From b4c8010715e961e6332cbfed8bcccf70e29bda1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=88=91=E8=8B=A5=E4=B8=BA=E7=8E=8B?= <807190135@qq.com>
Date: Tue, 12 Jan 2021 16:34:11 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=95=B0=E6=8D=AE=E4=B8=8D?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=9A=84=E9=97=AE=E9=A2=98=E3=80=81=E5=88=86?=
 =?UTF-8?q?=E7=BB=84=E6=98=BE=E7=A4=BA=E6=94=B9=E4=B8=BA=E6=8A=98=E5=8F=A0?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resource/template/theme-default/home.html | 85 +++++++++++------------
 1 file changed, 42 insertions(+), 43 deletions(-)

diff --git a/resource/template/theme-default/home.html b/resource/template/theme-default/home.html
index 19ecb33..3a11400 100644
--- a/resource/template/theme-default/home.html
+++ b/resource/template/theme-default/home.html
@@ -7,13 +7,10 @@
 <div class="nb-container">
     <div class="ui container">
         <div id="app">
-            <div class="ui" v-for="group in groups" >
-                <br>
-                <div class="ui horizontal divider">
-                    @#group.Tag#@
-                </div>
 
-                <div class="ui four stackable status cards"> <div v-for='server in group.data' :id="server.ID" class="card">
+            <div class="ui styled fluid accordion" v-for="group in groups">
+                <div class="active title"><i class="dropdown icon"></i>@#(group.Tag!==''?group.Tag:'默认')#@</div>
+                <div class="active content"><div class="ui four stackable status cards"> <div v-for='server in group.data' :id="server.ID" class="card">
                     <div class="content" v-if='server.Host'>
                         <div class="header"><i :class="server.Host.CountryCode + ' flag'"></i><i
                                 v-if='server.Host.Platform == "darwin"' class="apple icon"></i><i
@@ -95,8 +92,7 @@
                         <p>@#server.Name#@</p>
                         <p>节点已离线</p>
                     </div>
-                </div></div>
-
+                </div></div></div>
             </div>
         </div>
     </div>
@@ -104,7 +100,6 @@
 {{template "common/footer" .}}
 <script>
     const initData = {{.Servers}};
-
     var statusCards = new Vue({
         el: '#app',
         delimiters: ['@#', '#@'],
@@ -124,41 +119,9 @@
         },
         methods: {
             group() {
-                this.groups = this.groupingData(this.data, "Tag")
+                this.groups = groupingData(this.data, "Tag")
                 console.log(this.groups)
             },
-            groupingData(data, filed) {
-                let map = {};
-
-                let dest = [];
-
-                data.forEach(item => {
-                    if (!map[item[filed]]) {
-                        dest.push({
-                            [filed]: item[filed],
-
-                            data: [item]
-
-                        });
-
-                        map[item[filed]] = item;
-
-                    } else {
-                        dest.forEach(dItem => {
-                            if (dItem[filed] == item[filed]) {
-                                dItem.data.push(item);
-
-                            }
-
-                        });
-
-                    }
-
-                })
-
-                return dest;
-
-            },
             formatPercent(live, used, total) {
                 const percent = live ? (parseInt(used / total * 100) || 0) : -1
                 if (!this.cache[percent]) {
@@ -209,6 +172,38 @@
             }
         }
     })
+    function groupingData(data, filed){
+        let map = {};
+
+        let dest = [];
+
+        data.forEach(item => {
+            if (!map[item[filed]]) {
+                dest.push({
+                    [filed]: item[filed],
+
+                    data: [item]
+
+                });
+
+                map[item[filed]] = item;
+
+            } else {
+                dest.forEach(dItem => {
+                    if (dItem[filed] == item[filed]) {
+                        dItem.data.push(item);
+
+                    }
+
+                });
+
+            }
+
+        })
+
+        return dest;
+
+    }
     const wsProtocol = window.location.protocol == "https:" ? "wss" : "ws"
     const ws = new WebSocket(wsProtocol + '://' + window.location.host + '/ws');
     ws.onopen = function (evt) {
@@ -235,6 +230,7 @@
                 }
             }
         }
+        statusCards.groups=groupingData(statusCards.servers,"Tag")
     }
     ws.onclose = function () {
         $.suiAlert({
@@ -245,5 +241,8 @@
             position: 'top-center',
         });
     }
+    $('.ui.accordion')
+        .accordion({"exclusive":false})
+    ;
 </script>
-{{end}}
\ No newline at end of file
+{{end}}