A complete maintenance planning system has been created

src/mixins/datetime.js

@@ -22,6 +22,16 @@ export default {
             return this.datetimeFormat(value, "YYYY-MM-DD HH:mm:ss");
         },
 
+        datetimeMaintenance(value) {
+            const inputDate = new Date(value);
+            const now = new Date(Date.now());
+
+            if (inputDate.getFullYear() === now.getFullYear() && inputDate.getMonth() === now.getMonth() && inputDate.getDay() === now.getDay())
+                return this.datetimeMaintenanceFormat(value, "HH:mm");
+            else
+                return this.datetimeMaintenanceFormat(value, "YYYY-MM-DD HH:mm");
+        },
+
         date(value) {
             return this.datetimeFormat(value, "YYYY-MM-DD");
         },
@@ -41,6 +51,13 @@ export default {
                 return dayjs.utc(value).tz(this.timezone).format(format);
             }
             return "";
+        },
+
+        datetimeMaintenanceFormat(value, format) {
+            if (value !== undefined && value !== "") {
+                return dayjs(value).format(format);
+            }
+            return "";
         }
     },
 

src/mixins/socket.js

@@ -27,6 +27,7 @@ export default {
             allowLoginDialog: false,        // Allowed to show login dialog, but "loggedIn" have to be true too. This exists because prevent the login dialog show 0.1s in first before the socket server auth-ed.
             loggedIn: false,
             monitorList: { },
+            maintenanceList: { },
             heartbeatList: { },
             importantHeartbeatList: { },
             avgPingList: { },
@@ -99,6 +100,10 @@ export default {
                 this.monitorList = data;
             });
 
+            socket.on("maintenanceList", (data) => {
+                this.maintenanceList = data;
+            });
+
             socket.on("notificationList", (data) => {
                 this.notificationList = data;
             });
@@ -309,14 +314,37 @@ export default {
             socket.emit("getMonitorList", callback);
         },
 
+        getMaintenanceList(callback) {
+            if (! callback) {
+                callback = () => { };
+            }
+            socket.emit("getMaintenanceList", callback);
+        },
+
         add(monitor, callback) {
             socket.emit("add", monitor, callback);
         },
 
+        addMaintenance(maintenance, callback) {
+            socket.emit("addMaintenance", maintenance, callback);
+        },
+
+        addMonitorMaintenance(maintenanceID, monitors, callback) {
+            socket.emit("addMonitorMaintenance", maintenanceID, monitors, callback);
+        },
+
+        getMonitorMaintenance(maintenanceID, callback) {
+            socket.emit("getMonitorMaintenance", maintenanceID, callback);
+        },
+
         deleteMonitor(monitorID, callback) {
             socket.emit("deleteMonitor", monitorID, callback);
         },
 
+        deleteMaintenance(maintenanceID, callback) {
+            socket.emit("deleteMaintenance", maintenanceID, callback);
+        },
+
         clearData() {
             console.log("reset heartbeat list");
             this.heartbeatList = {};
@@ -368,7 +396,13 @@ export default {
             for (let monitorID in this.lastHeartbeatList) {
                 let lastHeartBeat = this.lastHeartbeatList[monitorID];
 
-                if (! lastHeartBeat) {
+                if (this.monitorList[monitorID].maintenance) {
+                    result[monitorID] = {
+                        text: this.$t("Maintenance"),
+                        color: "maintenance",
+                    };
+                }
+                else if (! lastHeartBeat) {
                     result[monitorID] = unknown;
                 } else if (lastHeartBeat.status === 1) {
                     result[monitorID] = {