From 57c868c5271e2b9b92e9ce7717f850217558ff9d Mon Sep 17 00:00:00 2001
From: MikoyChinese <emailmikoy@163.com>
Date: Mon, 10 Jan 2022 18:35:47 +0800
Subject: [PATCH 1/3] Improve init Home page.

---
 resource/template/theme-mdui/home.html | 36 ++++++++++++++------------
 1 file changed, 20 insertions(+), 16 deletions(-)

diff --git a/resource/template/theme-mdui/home.html b/resource/template/theme-mdui/home.html
index d2d29f1..2dd1b16 100644
--- a/resource/template/theme-mdui/home.html
+++ b/resource/template/theme-mdui/home.html
@@ -101,7 +101,7 @@
         </div>
       </div>
     </div>
-    
+
     <div v-else class="mdui-table-fluid mdui-m-t-1">
       <table class="mdui-table mdui-table-hoverable">
 		<thead>
@@ -144,7 +144,7 @@
 		</tbody>
 	  </table>
 	</div>
-    
+
   </div>
   </div>
 
@@ -251,21 +251,25 @@
                 } else {
                     ns.live = true
                     if (statusCards.showCard) {
-                      var disk =  statusCards.formatByteSize(ns.State.DiskUsed) + '/' + statusCards.formatByteSize(ns.Host.DiskTotal);
-                      var upTime = statusCards.secondToDate(ns.State.Uptime);
-                      var content = 
-`System: ${ns.Host.Platform}-${ns.Host.PlatformVersion}[${ns.Host.Arch}]
-CPU: ${ns.Host.CPU}
-Disk: ${disk}
-Online: ${upTime}
-Version: ${ns.Host.Version}`;
-                      if (infoTooltip[ns.ID]) {infoTooltip[ns.ID].$element[0].innerText = content;}
-                      else {
-                        if (document.getElementById(`info-${ns.ID}`)) infoTooltip[ns.ID] = new mdui.Tooltip(`#info-${ns.ID}`, {})
+                      if (infoTooltip[ns.ID]) {
+                        var disk =  statusCards.formatByteSize(ns.State.DiskUsed) + '/' + statusCards.formatByteSize(ns.Host.DiskTotal);
+                        var upTime = statusCards.secondToDate(ns.State.Uptime);
+                        var content =
+  `System: ${ns.Host.Platform}-${ns.Host.PlatformVersion}[${ns.Host.Arch}]
+  CPU: ${ns.Host.CPU}
+  Disk: ${disk}
+  Online: ${upTime}
+  Version: ${ns.Host.Version}`;
+                        infoTooltip[ns.ID].$element[0].innerText = content;
+                      }
+                      else {
+                        if (document.getElementById(`info-${ns.ID}`)) infoTooltip[ns.ID] = new mdui.Tooltip(`#info-${ns.ID}`, {});
+                      }
+
+                      if (memTooltip[ns.ID]) {
+                        var content = `${statusCards.formatByteSize(ns.State.MemUsed)}/${statusCards.formatByteSize(ns.Host.MemTotal)}`;
+                        memTooltip[ns.ID].$element[0].innerText = content;
                       }
-                      
-                      var content = `${statusCards.formatByteSize(ns.State.MemUsed)}/${statusCards.formatByteSize(ns.Host.MemTotal)}`;
-                      if (memTooltip[ns.ID]) {memTooltip[ns.ID].$element[0].innerText = content;}
                       else {
                         if (document.getElementById(`mem-${ns.ID}`)) memTooltip[ns.ID] = new mdui.Tooltip(`#mem-${ns.ID}`, {});
                       }

From 9b8c8101b5ba5e80278a2c1447504035c9d49012 Mon Sep 17 00:00:00 2001
From: MikoyChinese <emailmikoy@163.com>
Date: Mon, 10 Jan 2022 18:36:21 +0800
Subject: [PATCH 2/3] Add Network Traffic Statistics in service page.

---
 resource/template/theme-mdui/service.html | 39 +++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/resource/template/theme-mdui/service.html b/resource/template/theme-mdui/service.html
index 3ace361..10a39d6 100644
--- a/resource/template/theme-mdui/service.html
+++ b/resource/template/theme-mdui/service.html
@@ -72,6 +72,45 @@
         </tbody>
       </table>
     </div>
+
+    {{if .CycleTransferStats}}
+    <h2 class="mdui-m-t-5 mdui-text-center">Network Traffic Statistics</h2>
+    <div class="mdui-table-fluid">
+      <table class="mdui-table mdui-table-hoverable">
+        <thead>
+          <tr>
+            <th class="mdui-text-center">ID</th>
+            <th class="mdui-text-center">Rule</th>
+            <th class="mdui-text-center">Sever</th>
+            <th class="mdui-text-center">Date From</th>
+            <th class="mdui-text-center">Date To</th>
+            <th class="mdui-text-center">MAX</th>
+            <th class="mdui-text-center">MIN</th>
+            <th class="mdui-text-center">Check Next</th>
+            <th class="mdui-text-center">Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          {{range $id, $stats := .CycleTransferStats}}
+          {{range $innerId, $transfer := $stats.Transfer}}
+          <tr>
+            <td class="mdui-text-center">{{$id}}</td>
+            <td class="mdui-text-center">{{$stats.Name}}</td>
+            <td class="mdui-text-center">{{index $stats.ServerName $innerId}}</td>
+            <td class="mdui-text-center">{{$stats.From|tf}}</td>
+            <td class="mdui-text-center">{{$stats.To|tf}}</td>
+            <td class="mdui-text-center">{{$stats.Max|bf}}</td>
+            <td class="mdui-text-center">{{$stats.Min|bf}}</td>
+            <td class="mdui-text-center">{{(index $stats.NextUpdate $innerId)|sft}}</td>
+            <td class="mdui-text-center">{{$transfer|bf}}</td>
+          </tr>
+          {{end}}
+          {{end}}
+        </tbody>
+      </table>
+    </div>
+    {{end}}
+
   </div>
 
 {{template "theme-mdui/footer" .}}

From bfb67b719e1740ba0192f59d20554d81ea346ac8 Mon Sep 17 00:00:00 2001
From: MikoyChinese <emailmikoy@163.com>
Date: Mon, 10 Jan 2022 18:36:38 +0800
Subject: [PATCH 3/3] Fix viewpassword bug.

---
 .../template/theme-mdui/viewpassword.html     | 71 +++++++++----------
 1 file changed, 32 insertions(+), 39 deletions(-)

diff --git a/resource/template/theme-mdui/viewpassword.html b/resource/template/theme-mdui/viewpassword.html
index 3327da7..9b84443 100644
--- a/resource/template/theme-mdui/viewpassword.html
+++ b/resource/template/theme-mdui/viewpassword.html
@@ -17,18 +17,30 @@
 
 <body>
   <div class="mdui-container" id="container">
+    <div class="mdui-dialog mdui-dialog-prompt mdui-dialog-open">
+      <div class="mdui-dialog-title">验证查看密码</div>
+
+      <div class="mdui-dialog-content">
+        <div class="mdui-textfield">
+          <i class="mdui-icon material-icons">lock</i>
+          <label class="mdui-textfield-label">密码</label>
+          <input class="mdui-textfield-input" type="password" id="password">
+        </div>
+      </div>
+
+      <div class="mdui-dialog-actions">
+        <button class="mdui-btn mdui-ripple mdui-text-color-primary" id="confimBtn">验证</button>
+      </div>
+    </div>
   </div>
 
   <script src="https://cdn.jsdelivr.net/npm/mdui@1.0.2/dist/js/mdui.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
   <script>
-    var content = '<div class="mdui-textfield">' +
-      '<i class="mdui-icon material-icons">lock</i>' +
-      '<label class="mdui-textfield-label">密码</label>' +
-      '<input class="mdui-textfield-input" type="password">' +
-      '</div>';
-
-    var onConfirm = async function(pwd) {
+    var $input = mdui.$('#container').find('.mdui-textfield-input');
+    var $dialog = new mdui.Dialog(mdui.$('.mdui-dialog'));
+    var onConfirm = async function() {
+      var pwd = $input.val();
       const res = await fetch("/view-password", {
         method: 'POST',
         headers: {'Content-Type': 'application/json'},
@@ -39,49 +51,30 @@
         if (res.redirected) {
           window.location.href = res.url;
         } else {
-          window.location.reload();
           mdui.snackbar({
            message: '密码错误',
            position: 'top',
+           timeout: 2000,
          });
           mdui.mutation();
+          $input[0].focus();
         }
       }
     };
 
-    var onConfirmClick = function (dialog) {
-      var value = dialog.$element.find('.mdui-textfield-input').val();
-      onConfirm(value, dialog);
-    };
-
-    var checkPwd = mdui.dialog({
-      title: '验证查看密码',
-      content: content,
-      buttons: [
-        {
-          text: '验证',
-          bold: false,
-          onClick: onConfirmClick,
-        }
-      ],
-      cssClass: 'mdui-dialog-prompt',
-      modal: true,
-      onOpen: function (dialog) {
-        var $input = dialog.$element.find('.mdui-textfield-input');
-        mdui.updateTextFields($input);
-        $input[0].focus();
-        $input.on('keydown', function (event) {
-          if (event.keyCode === 13) {
-            var value = dialog.$element.find('.mdui-textfield-input').val();
-            onConfirm(value, dialog);
-            return false;
-          }
-          return;
-        });
-      },
+    mdui.updateTextFields($input);
+    $input.on('keydown', function (event) {
+      if (event.keyCode === 13) {
+        var value = $input.val();
+        onConfirm(value);
+        return false;
+      }
+      return;
     });
+    document.getElementById('confimBtn').addEventListener('click', onConfirm);
 
-    $('#container').add(checkPwd);
+    $dialog.open();
+    $input[0].focus();
     mdui.mutation();
   </script>
 </body>