Add badges to favicon

package.json

@@ -72,6 +72,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.4",
         "iconv-lite": "^0.6.3",

src/mixins/socket.js

@@ -1,5 +1,6 @@
 import { io } from "socket.io-client";
 import { useToast } from "vue-toastification";
+import Favico from "favico.js";
 const toast = useToast();
 
 let socket;
@@ -10,6 +11,12 @@ const noSocketIOPages = [
     "/"
 ];
 
+const favicon = new Favico({
+    animation: "none"
+});
+
+let downMonitors = [];
+
 export default {
 
     data() {
@@ -118,10 +125,14 @@ 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,
                         });
@@ -138,6 +149,11 @@ 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 {
@@ -304,11 +320,15 @@ 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 = {};
         },

src/pages/StatusPage.vue

@@ -209,12 +209,18 @@ import ImageCropUpload from "vue-image-crop-upload";
 import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_PARTIAL_DOWN, UP } from "../util.ts";
 import { useToast } from "vue-toastification";
 import dayjs from "dayjs";
+import Favico from "favico.js";
+
 const toast = useToast();
 
 const leavePageMsg = "Do you really want to leave? you have unsaved changes!";
 
 let feedInterval;
 
+const favicon = new Favico({
+    animation: "none"
+});
+
 export default {
     components: {
         PublicGroupList,
@@ -424,8 +430,20 @@ export default {
             // If editMode, it will use the data from websocket.
             if (! this.editMode) {
                 axios.get("/api/status-page/heartbeat").then((res) => {
-                    this.$root.heartbeatList = res.data.heartbeatList;
-                    this.$root.uptimeList = res.data.uptimeList;
+                    const { heartbeatList, uptimeList } = res.data;
+                    const heartbeatIds = Object.keys(heartbeatList);
+
+                    const downMonitors = heartbeatIds.reduce((downMonitorsAmount, currentId) => {
+                        const monitorHeartbeats = heartbeatList[currentId];
+                        const lastHeartbeat = monitorHeartbeats.at(-1);
+
+                        return lastHeartbeat.status === 0 ? downMonitorsAmount + 1 : downMonitorsAmount;
+                    }, 0);
+
+                    favicon.badge(downMonitors);
+
+                    this.$root.heartbeatList = heartbeatList;
+                    this.$root.uptimeList = uptimeList;
                     this.loadedData = true;
                 });
             }