From e9125787234504f4f6a7bea4c2daee2fc5033e3c Mon Sep 17 00:00:00 2001
From: naiba <hi@nai.ba>
Date: Sun, 20 Dec 2020 21:47:12 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20improve(ui):=20hotaru=20?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E5=BA=95=E9=83=A8=E8=BF=9B=E5=BA=A6=E6=9D=A1?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E8=9E=8D=E5=90=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resource/static/theme-hotaru/css/main.css | 22 +++++++++++++-----
 resource/template/theme-default/home.html |  4 +---
 resource/template/theme-hotaru/home.html  | 27 ++++++++++++++---------
 3 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/resource/static/theme-hotaru/css/main.css b/resource/static/theme-hotaru/css/main.css
index 8f7459b..c6bd2bf 100644
--- a/resource/static/theme-hotaru/css/main.css
+++ b/resource/static/theme-hotaru/css/main.css
@@ -159,11 +159,6 @@ h1 {
     }
 }
 
-.location-progress .bar {
-    height: 0.5em !important;
-    margin-bottom: 1em !important;
-}
-
 .ui.progress {
     margin: unset !important;
 }
@@ -175,4 +170,21 @@ h1 {
 
 table tr {
     height: 3em !important;
+}
+
+.location-progress>.ui.progress>.bar {
+    height: 0.5em !important;
+    margin-bottom: 1em !important;
+}
+
+.state-online {
+    background-color: rgb(0, 235, 139);
+    border-radius: .3em;
+    margin-left: 1em;
+}
+
+.state-offline {
+    background-color: slategray;
+    border-radius: .3em;
+    margin-left: 1em;
 }
\ No newline at end of file
diff --git a/resource/template/theme-default/home.html b/resource/template/theme-default/home.html
index 8f0c36c..04d2d55 100644
--- a/resource/template/theme-default/home.html
+++ b/resource/template/theme-default/home.html
@@ -98,7 +98,6 @@
         delimiters: ['@#', '#@'],
         data: {
             servers: initData,
-            pulled: false,
             cache: [],
         },
         mounted() {
@@ -168,14 +167,13 @@
     ws.onmessage = function (evt) {
         const oldServers = statusCards.servers
         statusCards.servers = JSON.parse(evt.data)
-        statusCards.pulled++
         const keys = Object.keys(statusCards.servers)
         for (let i = 0; i < keys.length; i++) {
             const ns = statusCards.servers[keys[i]];
             if (!ns.Host) ns.live = false
             else {
                 const lastActive = new Date(ns.LastActive).getTime()
-                if (statusCards.pulled > 3 && Date.now() - lastActive > 5 * 1000) {
+                if (Date.now() - lastActive > 5 * 1000) {
                     ns.live = false
                 } else {
                     ns.live = true
diff --git a/resource/template/theme-hotaru/home.html b/resource/template/theme-hotaru/home.html
index 73cf890..6a55c0b 100644
--- a/resource/template/theme-hotaru/home.html
+++ b/resource/template/theme-hotaru/home.html
@@ -17,7 +17,7 @@
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
     <link rel="stylesheet" type="text/css" href="/static/semantic-ui-alerts.min.css">
     <link rel="stylesheet" href="/static/theme-hotaru/css/core.css?v202012121912" type="text/css">
-    <link rel="stylesheet" href="/static/theme-hotaru/css/main.css?v202012202117" type="text/css">
+    <link rel="stylesheet" href="/static/theme-hotaru/css/main.css?v202012202136" type="text/css">
     <link rel="stylesheet" href="/static/theme-hotaru/css/darkmode.css?v202012121912" type="text/css">
     {{if ts .CustomCSS}}
     {{tag "style"}}
@@ -61,9 +61,8 @@
                     <tr v-for='server in servers' :id="server.ID">
                         <td>
                             <div class="progress">
-                                <div style="width: 100%;"
-                                    :class="'progress-bar progress-bar-'+ (server.live?'success':pulled>3?'danger':'warning')">
-                                    <small>@#server.live?'运行中':pulled>3?'已离线':'……'#@</small>
+                                <div :class="'state-'+ (server.live?'online':'offline')">
+                                    <small>@#server.live?'运行中':'已离线'#@</small>
                                 </div>
                             </div>
                         </td>
@@ -112,14 +111,15 @@
                         <div class="panel panel-block panel-block-sm panel-location">
                             <div class="location-header">
                                 <h3 class="h4"><img
-                                        :src="'/static/theme-hotaru/img/clients/'+(server.Host?server.Host.CountryCode.toUpperCase():'HK')+'.png'">
+                                        :src="'/static/theme-hotaru/img/clients/'+(server.Host&&server.Host.CountryCode?server.Host.CountryCode.toUpperCase():'CN')+'.png'">
                                     &nbsp;@#server.Name#@</h3>
                                 <i class="zmdi zmdi-check-circle text-success"></i>
                             </div>
                             <div class="location-progress">
-                                <div :class="formatPercent(server.live,server.State?server.State.CPU:0, 100).class">
+                                <div
+                                    :class="formatPercent(server.live,mergeUsage(server.State, server.Host),100).class">
                                     <div class="bar"
-                                        :style="formatPercent(server.live,server.State?server.State.CPU:0, 100).style">
+                                        :style="formatPercent(server.live,mergeUsage(server.State, server.Host),100).style">
                                     </div>
                                 </div>
                             </div>
@@ -151,13 +151,21 @@
             delimiters: ['@#', '#@'],
             data: {
                 servers: initData,
-                pulled: false,
                 cache: [],
             },
             mounted() {
                 this.troggleDarkMode();
             },
             methods: {
+                mergeUsage(state, host) {
+                    if (!state) {
+                        return 0
+                    }
+                    if (!host) {
+                        return state.CPU
+                    }
+                    return (state.CPU + (state.MemUsed / host.MemTotal * 100) + (state.DiskUsed / host.DiskTotal * 100)) / 3
+                },
                 formatPercent(live, used, total) {
                     const percent = live ? (parseInt(used / total * 100) || 0) : -1
                     if (!this.cache[percent]) {
@@ -230,14 +238,13 @@
         }
         ws.onmessage = function (evt) {
             statusCards.servers = JSON.parse(evt.data)
-            statusCards.pulled++
             const keys = Object.keys(statusCards.servers)
             for (let i = 0; i < keys.length; i++) {
                 const ns = statusCards.servers[keys[i]];
                 if (!ns.Host) ns.live = false
                 else {
                     const lastActive = new Date(ns.LastActive).getTime()
-                    if (statusCards.pulled > 3 && Date.now() - lastActive > 5 * 1000) {
+                    if (Date.now() - lastActive > 5 * 1000) {
                         ns.live = false
                     } else {
                         ns.live = true