[status page] many update and save group list

src/mixins/public.js

@@ -11,12 +11,14 @@ export default {
     data() {
         return {
             publicGroupList: [],
-        }
+        };
     },
     computed: {
         publicMonitorList() {
             let result = {};
 
+            console.log(this.publicGroupList);
+
             for (let group of this.publicGroupList) {
                 for (let monitor of group.monitorList) {
                     result[monitor.id] = monitor;
@@ -26,7 +28,7 @@ export default {
         },
 
         publicLastHeartbeatList() {
-            let result = {}
+            let result = {};
 
             for (let monitorID in this.publicMonitorList) {
                 if (this.lastHeartbeatList[monitorID]) {
@@ -37,4 +39,4 @@ export default {
             return result;
         },
     }
-}
+};

src/pages/StatusPage.vue

@@ -37,7 +37,7 @@
             </div>
 
             <div v-else>
-                <button class="btn btn-success me-2" @click="leaveEditMode">
+                <button class="btn btn-success me-2" @click="save">
                     <font-awesome-icon icon="save" />
                     {{ $t("Save") }}
                 </button>
@@ -52,6 +52,7 @@
                     {{ $t("Create Incident") }}
                 </button>
 
+                <!--
                 <button v-if="isPublished" class="btn btn-light me-2" @click="">
                     <font-awesome-icon icon="save" />
                     {{ $t("Unpublish") }}
@@ -60,7 +61,7 @@
                 <button v-if="!isPublished" class="btn btn-info me-2" @click="">
                     <font-awesome-icon icon="save" />
                     {{ $t("Publish") }}
-                </button>
+                </button>-->
 
                 <!-- Set Default Language -->
                 <!-- Set theme -->
@@ -84,6 +85,14 @@
             <strong v-if="editIncidentMode">{{ $t("Content") }}:</strong>
             <Editable v-model="incident.content" tag="div" :contenteditable="editIncidentMode" class="content" />
 
+            <!-- Incident Date -->
+            <div class="date mt-3">
+                Created: {{ incident.createdDate }} ({{ createdDateFromNow }})<br />
+                <span v-if="incident.lastUpdatedDate">
+                    Last Updated: {{ incident.lastUpdatedDate }} ({{ lastUpdatedDateFromNow }})
+                </span>
+            </div>
+
             <div v-if="editMode" class="mt-3">
                 <button v-if="editIncidentMode" class="btn btn-light me-2" @click="postIncident">
                     <font-awesome-icon icon="bullhorn" />
@@ -190,6 +199,7 @@ import PublicGroupList from "../components/PublicGroupList.vue";
 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";
 const toast = useToast();
 
 const leavePageMsg = "Do you really want to leave? you have unsaved changes!";
@@ -309,6 +319,14 @@ export default {
             return this.overallStatus === STATUS_PAGE_ALL_DOWN;
         },
 
+        createdDateFromNow() {
+            return dayjs.utc(this.incident.createdDate).fromNow();
+        },
+
+        lastUpdatedDateFromNow() {
+            return dayjs.utc(this.incident. lastUpdatedDate).fromNow();
+        }
+
     },
     watch: {
 
@@ -360,7 +378,7 @@ export default {
         });
 
         axios.get("/api/status-page/monitor-list").then((res) => {
-            this.monitorList = res.data;
+            this.$root.publicGroupList = res.data;
         });
 
         // 5mins a loop
@@ -380,8 +398,16 @@ export default {
             this.enableEditMode = true;
         },
 
-        leaveEditMode() {
-            this.enableEditMode = false;
+        save() {
+            this.$root.getSocket().emit("saveStatusPage", this.$root.publicGroupList, (res) => {
+                if (res.ok) {
+                    this.enableEditMode = false;
+                    console.log(res);
+                    this.$root.publicGroupList = res.publicGroupList;
+                } else {
+                    toast.error(res.msg);
+                }
+            });
         },
 
         monitorSelectorLabel(monitor) {
@@ -534,7 +560,13 @@ footer {
 
 .incident {
     .content {
-        min-height: 60px;
+        &[contenteditable=true] {
+            min-height: 60px;
+        }
+    }
+
+    .date {
+        font-size: 14px;
     }
 }
 

src/util-frontend.js

@@ -3,8 +3,8 @@ import timezone from "dayjs/plugin/timezone";
 import utc from "dayjs/plugin/utc";
 import timezones from "timezones-list";
 
-dayjs.extend(utc)
-dayjs.extend(timezone)
+dayjs.extend(utc);
+dayjs.extend(timezone);
 
 function getTimezoneOffset(timeZone) {
     const now = new Date();
@@ -28,7 +28,7 @@ export function timezoneList() {
                 name: `(UTC${display}) ${timezone.tzCode}`,
                 value: timezone.tzCode,
                 time: getTimezoneOffset(timezone.tzCode),
-            })
+            });
         } catch (e) {
             console.log("Skip Timezone: " + timezone.tzCode);
         }
@@ -44,7 +44,7 @@ export function timezoneList() {
         }
 
         return 0;
-    })
+    });
 
     return result;
 }

src/util.js

@@ -1,73 +1,73 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRandomInt = exports.getRandomArbitrary = exports.TimeLogger = exports.polyfill = exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.STATUS_PAGE_PARTIAL_DOWN = exports.STATUS_PAGE_ALL_UP = exports.STATUS_PAGE_ALL_DOWN = exports.PENDING = exports.UP = exports.DOWN = exports.appName = exports.isDev = void 0;
-const _dayjs = require("dayjs");
-const dayjs = _dayjs;
-exports.isDev = process.env.NODE_ENV === "development";
-exports.appName = "Uptime Kuma";
-exports.DOWN = 0;
-exports.UP = 1;
-exports.PENDING = 2;
-exports.STATUS_PAGE_ALL_DOWN = 0;
-exports.STATUS_PAGE_ALL_UP = 1;
-exports.STATUS_PAGE_PARTIAL_DOWN = 2;
-function flipStatus(s) {
-    if (s === exports.UP) {
-        return exports.DOWN;
-    }
-    if (s === exports.DOWN) {
-        return exports.UP;
-    }
-    return s;
-}
-exports.flipStatus = flipStatus;
-function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-exports.sleep = sleep;
-function ucfirst(str) {
-    if (!str) {
-        return str;
-    }
-    const firstLetter = str.substr(0, 1);
-    return firstLetter.toUpperCase() + str.substr(1);
-}
-exports.ucfirst = ucfirst;
-function debug(msg) {
-    if (exports.isDev) {
-        console.log(msg);
-    }
-}
-exports.debug = debug;
-function polyfill() {
-    if (!String.prototype.replaceAll) {
-        String.prototype.replaceAll = function (str, newStr) {
-            if (Object.prototype.toString.call(str).toLowerCase() === "[object regexp]") {
-                return this.replace(str, newStr);
-            }
-            return this.replace(new RegExp(str, "g"), newStr);
-        };
-    }
-}
-exports.polyfill = polyfill;
-class TimeLogger {
-    constructor() {
-        this.startTime = dayjs().valueOf();
-    }
-    print(name) {
-        if (exports.isDev) {
-            console.log(name + ": " + (dayjs().valueOf() - this.startTime) + "ms");
-        }
-    }
-}
-exports.TimeLogger = TimeLogger;
-function getRandomArbitrary(min, max) {
-    return Math.random() * (max - min) + min;
-}
-exports.getRandomArbitrary = getRandomArbitrary;
-function getRandomInt(min, max) {
-    min = Math.ceil(min);
-    max = Math.floor(max);
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-}
-exports.getRandomInt = getRandomInt;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRandomInt = exports.getRandomArbitrary = exports.TimeLogger = exports.polyfill = exports.debug = exports.ucfirst = exports.sleep = exports.flipStatus = exports.STATUS_PAGE_PARTIAL_DOWN = exports.STATUS_PAGE_ALL_UP = exports.STATUS_PAGE_ALL_DOWN = exports.PENDING = exports.UP = exports.DOWN = exports.appName = exports.isDev = void 0;
+const _dayjs = require("dayjs");
+const dayjs = _dayjs;
+exports.isDev = process.env.NODE_ENV === "development";
+exports.appName = "Uptime Kuma";
+exports.DOWN = 0;
+exports.UP = 1;
+exports.PENDING = 2;
+exports.STATUS_PAGE_ALL_DOWN = 0;
+exports.STATUS_PAGE_ALL_UP = 1;
+exports.STATUS_PAGE_PARTIAL_DOWN = 2;
+function flipStatus(s) {
+    if (s === exports.UP) {
+        return exports.DOWN;
+    }
+    if (s === exports.DOWN) {
+        return exports.UP;
+    }
+    return s;
+}
+exports.flipStatus = flipStatus;
+function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+}
+exports.sleep = sleep;
+function ucfirst(str) {
+    if (!str) {
+        return str;
+    }
+    const firstLetter = str.substr(0, 1);
+    return firstLetter.toUpperCase() + str.substr(1);
+}
+exports.ucfirst = ucfirst;
+function debug(msg) {
+    if (exports.isDev) {
+        console.log(msg);
+    }
+}
+exports.debug = debug;
+function polyfill() {
+    if (!String.prototype.replaceAll) {
+        String.prototype.replaceAll = function (str, newStr) {
+            if (Object.prototype.toString.call(str).toLowerCase() === "[object regexp]") {
+                return this.replace(str, newStr);
+            }
+            return this.replace(new RegExp(str, "g"), newStr);
+        };
+    }
+}
+exports.polyfill = polyfill;
+class TimeLogger {
+    constructor() {
+        this.startTime = dayjs().valueOf();
+    }
+    print(name) {
+        if (exports.isDev) {
+            console.log(name + ": " + (dayjs().valueOf() - this.startTime) + "ms");
+        }
+    }
+}
+exports.TimeLogger = TimeLogger;
+function getRandomArbitrary(min, max) {
+    return Math.random() * (max - min) + min;
+}
+exports.getRandomArbitrary = getRandomArbitrary;
+function getRandomInt(min, max) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+exports.getRandomInt = getRandomInt;