Add badges to favicon

This commit is contained in:
Willian Rodrigues Barbosa 2021-10-29 22:25:32 -03:00
parent d4c9431142
commit 036218f711
4 changed files with 104 additions and 14918 deletions

14979
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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",

View File

@ -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 = {};
},

View File

@ -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;
});
}