Merge pull request #151 from MikoyChinese/theme-mdui [skip ci]

Fix viewpassword and Add Network Traffic Statistics in service page.

Co-authored-by: MikoyChinese <22676744+MikoyChinese@users.noreply.github.com>

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);
+                      if (infoTooltip[ns.ID]) {
-                      var upTime = statusCards.secondToDate(ns.State.Uptime);
+                        var disk =  statusCards.formatByteSize(ns.State.DiskUsed) + '/' + statusCards.formatByteSize(ns.Host.DiskTotal);
-                      var content = 
+                        var upTime = statusCards.secondToDate(ns.State.Uptime);
-`System: ${ns.Host.Platform}-${ns.Host.PlatformVersion}[${ns.Host.Arch}]
+                        var content =
-CPU: ${ns.Host.CPU}
+  `System: ${ns.Host.Platform}-${ns.Host.PlatformVersion}[${ns.Host.Arch}]
-Disk: ${disk}
+  CPU: ${ns.Host.CPU}
-Online: ${upTime}
+  Disk: ${disk}
-Version: ${ns.Host.Version}`;
+  Online: ${upTime}
-                      if (infoTooltip[ns.ID]) {infoTooltip[ns.ID].$element[0].innerText = content;}
+  Version: ${ns.Host.Version}`;
-                      else {
+                        infoTooltip[ns.ID].$element[0].innerText = content;
-                        if (document.getElementById(`info-${ns.ID}`)) infoTooltip[ns.ID] = new mdui.Tooltip(`#info-${ns.ID}`, {})
+                      }
+                      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}`, {});
                       }

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" .}}

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">' +
+    var $input = mdui.$('#container').find('.mdui-textfield-input');
-      '<i class="mdui-icon material-icons">lock</i>' +
+    var $dialog = new mdui.Dialog(mdui.$('.mdui-dialog'));
-      '<label class="mdui-textfield-label">密码</label>' +
+    var onConfirm = async function() {
-      '<input class="mdui-textfield-input" type="password">' +
+      var pwd = $input.val();
-      '</div>';
-
-    var onConfirm = async function(pwd) {
       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) {
+    mdui.updateTextFields($input);
-      var value = dialog.$element.find('.mdui-textfield-input').val();
+    $input.on('keydown', function (event) {
-      onConfirm(value, dialog);
+      if (event.keyCode === 13) {
-    };
+        var value = $input.val();
-
+        onConfirm(value);
-    var checkPwd = mdui.dialog({
+        return false;
-      title: '验证查看密码',
+      }
-      content: content,
+      return;
-      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;
-        });
-      },
     });
+    document.getElementById('confimBtn').addEventListener('click', onConfirm);
 
-    $('#container').add(checkPwd);
+    $dialog.open();
+    $input[0].focus();
     mdui.mutation();
   </script>
 </body>