Merge pull request #53 from ilay1678/master

添加标签功能，默认主题可根据标签分组 #32

Co-authored-by: ilay1678 <7021399+ilay1678@users.noreply.github.com>

cmd/dashboard/controller/member_api.go

@@ -87,6 +87,7 @@ type serverForm struct {
 	Name         string `binding:"required"`
 	DisplayIndex int
 	Secret       string
+	Tag          string
 }
 
 func (ma *memberAPI) addOrEditServer(c *gin.Context) {
@@ -102,6 +103,7 @@ func (ma *memberAPI) addOrEditServer(c *gin.Context) {
 		s.Secret = sf.Secret
 		s.DisplayIndex = sf.DisplayIndex
 		s.ID = sf.ID
+		s.Tag = sf.Tag
 		if sf.ID == 0 {
 			s.Secret = com.MD5(fmt.Sprintf("%s%s%d", time.Now(), sf.Name, admin.ID))
 			s.Secret = s.Secret[:10]

model/server.go

@@ -14,7 +14,7 @@ type Server struct {
 	Name         string
 	DisplayIndex int    // 展示权重，越大越靠前
 	Secret       string `json:"-"`
-
+	Tag          string
 	Host         *Host  `gorm:"-"`
 	State        *State `gorm:"-"`
 	LastActive   time.Time

resource/template/component/server.html

@@ -8,6 +8,10 @@
                 <label>备注</label>
                 <input type="text" name="name" placeholder="爱因斯坦-光速1号">
             </div>
+            <div class="field">
+                <label>标签</label>
+                <input type="text" name="Tag" placeholder="服务器标签">
+            </div>
             <div class="field">
                 <label>展示权重</label>
                 <input type="number" name="DisplayIndex" placeholder="越大越靠前">

resource/template/dashboard/server.html

@@ -15,6 +15,7 @@
                 <tr>
                     <th>权重</th>
                     <th>备注</th>
+                    <th>标签</th>
                     <th>IP</th>
                     <th>ID</th>
                     <th>密钥</th>
@@ -26,6 +27,7 @@
                 <tr>
                     <td>{{$server.DisplayIndex}}</td>
                     <td>{{$server.Name}}</td>
+                    <td>{{$server.Tag}}</td>
                     <td>{{$server.Host.IP}}</td>
                     <td>{{$server.ID}}</td>
                     <td>{{$server.Secret}}</td>

resource/template/theme-default/home.html

@@ -6,8 +6,11 @@
 {{template "common/menu" .}}
 <div class="nb-container">
     <div class="ui container">
-        <div class="ui four stackable status cards">
+        <div id="app">
-            <div v-for='server in servers' :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
@@ -35,7 +38,8 @@
                                 <div class="three wide column">CPU</div>
                                 <div class="thirteen wide column">
                                     <div :class="formatPercent(server.live,server.State.CPU, 100).class">
-                                    <div class="bar" :style="formatPercent(server.live,server.State.CPU, 100).style">
+                                        <div class="bar"
+                                             :style="formatPercent(server.live,server.State.CPU, 100).style">
                                             <small>@#formatPercent(server.live,server.State.CPU,100).percent#@%</small>
                                         </div>
                                     </div>
@@ -88,6 +92,7 @@
                         <p>@#server.Name#@</p>
                         <p>节点已离线</p>
                     </div>
+                </div></div></div>
             </div>
         </div>
     </div>
@@ -96,12 +101,16 @@
 <script>
     const initData = {{.Servers}};
     var statusCards = new Vue({
-        el: 'div.status.cards',
+        el: '#app',
         delimiters: ['@#', '#@'],
         data: {
-            servers: initData,
+            data: initData,
+            groups:[],
             cache: [],
         },
+        created() {
+            this.group()
+        },
         mounted() {
             $('.yellow.info.icon').popup({
                 popup: '.ui.content.popup',
@@ -109,6 +118,10 @@
             });
         },
         methods: {
+            group() {
+                this.groups = groupingData(this.data, "Tag")
+                console.log(this.groups)
+            },
             formatPercent(live, used, total) {
                 const percent = live ? (parseInt(used / total * 100) || 0) : -1
                 if (!this.cache[percent]) {
@@ -159,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) {
@@ -185,6 +230,7 @@
                 }
             }
         }
+        statusCards.groups=groupingData(statusCards.servers,"Tag")
     }
     ws.onclose = function () {
         $.suiAlert({
@@ -195,5 +241,8 @@
             position: 'top-center',
         });
     }
+    $('.ui.accordion')
+        .accordion({"exclusive":false})
+    ;
 </script>
 {{end}}