[Favicon] Code refactoring

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "uptime-kuma",
-    "version": "1.11.4",
+    "version": "1.12.1",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
             "name": "uptime-kuma",
-            "version": "1.11.4",
+            "version": "1.12.1",
             "license": "MIT",
             "dependencies": {
                 "@fortawesome/fontawesome-svg-core": "~1.2.36",
@@ -29,6 +29,7 @@
                 "dayjs": "~1.10.7",
                 "express": "~4.17.1",
                 "express-basic-auth": "~1.2.0",
+                "favico.js": "^0.3.10",
                 "form-data": "~4.0.0",
                 "http-graceful-shutdown": "~3.1.5",
                 "iconv-lite": "^0.6.3",
@@ -6140,6 +6141,11 @@
                 "reusify": "^1.0.4"
             }
         },
+        "node_modules/favico.js": {
+            "version": "0.3.10",
+            "resolved": "https://registry.npmjs.org/favico.js/-/favico.js-0.3.10.tgz",
+            "integrity": "sha1-gFhuJ6EX8kqNUcGKmb3HFNQzkwE="
+        },
         "node_modules/fb-watchman": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",
@@ -18240,6 +18246,11 @@
                 "reusify": "^1.0.4"
             }
         },
+        "favico.js": {
+            "version": "0.3.10",
+            "resolved": "https://registry.npmjs.org/favico.js/-/favico.js-0.3.10.tgz",
+            "integrity": "sha1-gFhuJ6EX8kqNUcGKmb3HFNQzkwE="
+        },
         "fb-watchman": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz",

src/mixins/socket.js

@@ -16,8 +16,6 @@ const favicon = new Favico({
     animation: "none"
 });
 
-let downMonitors = [];
-
 export default {
 
     data() {
@@ -126,14 +124,10 @@ export default {
                 if (data.important) {
 
                     if (data.status === 0) {
-                        downMonitors.push(data.monitorID);
-                        favicon.badge(downMonitors.length);
                         toast.error(`[${this.monitorList[data.monitorID].name}] [DOWN] ${data.msg}`, {
                             timeout: false,
                         });
                     } else if (data.status === 1) {
-                        downMonitors = downMonitors.filter(monitor => monitor !== data.monitorID);
-                        favicon.badge(downMonitors.length);
                         toast.success(`[${this.monitorList[data.monitorID].name}] [Up] ${data.msg}`, {
                             timeout: 20000,
                         });
@@ -150,11 +144,6 @@ export default {
             });
 
             socket.on("heartbeatList", (monitorID, data, overwrite = false) => {
-                const lastElement = data.at(-1);
-                if (lastElement.status === 0) {
-                    downMonitors.push(monitorID);
-                    favicon.badge(downMonitors.length);
-                }
                 if (! (monitorID in this.heartbeatList) || overwrite) {
                     this.heartbeatList[monitorID] = data;
                 } else {
@@ -330,15 +319,11 @@ export default {
         },
 
         deleteMonitor(monitorID, callback) {
-            downMonitors = downMonitors.filter(monitor => monitor !== monitorID);
-            favicon.badge(downMonitors.length);
             socket.emit("deleteMonitor", monitorID, callback);
         },
 
         clearData() {
             console.log("reset heartbeat list");
-            downMonitors = [];
-            favicon.badge(0);
             this.heartbeatList = {};
             this.importantHeartbeatList = {};
         },
@@ -412,10 +397,50 @@ export default {
 
             return result;
         },
+
+        stats() {
+            let result = {
+                up: 0,
+                down: 0,
+                unknown: 0,
+                pause: 0,
+            };
+
+            for (let monitorID in this.$root.monitorList) {
+                let beat = this.$root.lastHeartbeatList[monitorID];
+                let monitor = this.$root.monitorList[monitorID];
+
+                if (monitor && ! monitor.active) {
+                    result.pause++;
+                } else if (beat) {
+                    if (beat.status === 1) {
+                        result.up++;
+                    } else if (beat.status === 0) {
+                        result.down++;
+                    } else if (beat.status === 2) {
+                        result.up++;
+                    } else {
+                        result.unknown++;
+                    }
+                } else {
+                    result.unknown++;
+                }
+            }
+
+            return result;
+        },
     },
 
     watch: {
 
+        // Update Badge
+        "stats.down"(to, from) {
+            if (to !== from) {
+                favicon.badge(to);
+                console.log(to);
+            }
+        },
+
         // Reload the SPA if the server version is changed.
         "info.version"(to, from) {
             if (from && from !== to) {

src/pages/DashboardHome.vue

@@ -9,19 +9,19 @@
                 <div class="row">
                     <div class="col">
                         <h3>{{ $t("Up") }}</h3>
-                        <span class="num">{{ stats.up }}</span>
+                        <span class="num">{{ $root.stats.up }}</span>
                     </div>
                     <div class="col">
                         <h3>{{ $t("Down") }}</h3>
-                        <span class="num text-danger">{{ stats.down }}</span>
+                        <span class="num text-danger">{{ $root.stats.down }}</span>
                     </div>
                     <div class="col">
                         <h3>{{ $t("Unknown") }}</h3>
-                        <span class="num text-secondary">{{ stats.unknown }}</span>
+                        <span class="num text-secondary">{{ $root.stats.unknown }}</span>
                     </div>
                     <div class="col">
                         <h3>{{ $t("pauseDashboardHome") }}</h3>
-                        <span class="num text-secondary">{{ stats.pause }}</span>
+                        <span class="num text-secondary">{{ $root.stats.pause }}</span>
                     </div>
                 </div>
             </div>
@@ -89,37 +89,6 @@ export default {
         };
     },
     computed: {
-        stats() {
-            let result = {
-                up: 0,
-                down: 0,
-                unknown: 0,
-                pause: 0,
-            };
-
-            for (let monitorID in this.$root.monitorList) {
-                let beat = this.$root.lastHeartbeatList[monitorID];
-                let monitor = this.$root.monitorList[monitorID];
-
-                if (monitor && ! monitor.active) {
-                    result.pause++;
-                } else if (beat) {
-                    if (beat.status === 1) {
-                        result.up++;
-                    } else if (beat.status === 0) {
-                        result.down++;
-                    } else if (beat.status === 2) {
-                        result.up++;
-                    } else {
-                        result.unknown++;
-                    }
-                } else {
-                    result.unknown++;
-                }
-            }
-
-            return result;
-        },
 
         importantHeartBeatList() {
             let result = [];