[status page] store config

server/socket-handlers/status-page-socket-handler.js

@@ -1,5 +1,5 @@
 const { R } = require("redbean-node");
-const { checkLogin } = require("../util-server");
+const { checkLogin, setSettings } = require("../util-server");
 const dayjs = require("dayjs");
 const { debug } = require("../../src/util");
 
@@ -67,12 +67,19 @@ module.exports.statusPageSocketHandler = (socket) => {
     });
 
     // Save Status Page
-    socket.on("saveStatusPage", async (publicGroupList, callback) => {
+    socket.on("saveStatusPage", async (config, imgDataUrl, publicGroupList, callback) => {
 
         try {
             checkLogin(socket);
 
             await R.transaction(async (trx) => {
+                // Save Config
+                //TODO
+                await setSettings("statusPage", config);
+
+                // Save Icon
+
+                // Save Public Group List
                 const groupIDList = [];
                 let groupOrder = 1;
 
@@ -120,6 +127,7 @@ module.exports.statusPageSocketHandler = (socket) => {
                 });
             });
         } catch (error) {
+            console.log(error);
 
             callback({
                 ok: false,

server/util-server.js

@@ -5,7 +5,6 @@ const { debug } = require("../src/util");
 const passwordHash = require("./password-hash");
 const dayjs = require("dayjs");
 const { Resolver } = require("dns");
-const { allowAllOrigin } = require("./util-server");
 
 /**
  * Init or reset JWT secret
@@ -24,7 +23,7 @@ exports.initJWTSecret = async () => {
     jwtSecretBean.value = passwordHash.generate(dayjs() + "");
     await R.store(jwtSecretBean);
     return jwtSecretBean;
-}
+};
 
 exports.tcping = function (hostname, port) {
     return new Promise((resolve, reject) => {
@@ -45,7 +44,7 @@ exports.tcping = function (hostname, port) {
             resolve(Math.round(data.max));
         });
     });
-}
+};
 
 exports.ping = async (hostname) => {
     try {
@@ -58,7 +57,7 @@ exports.ping = async (hostname) => {
             throw e;
         }
     }
-}
+};
 
 exports.pingAsync = function (hostname, ipv6 = false) {
     return new Promise((resolve, reject) => {
@@ -70,13 +69,13 @@ exports.pingAsync = function (hostname, ipv6 = false) {
             if (err) {
                 reject(err);
             } else if (ms === null) {
-                reject(new Error(stdout))
+                reject(new Error(stdout));
             } else {
-                resolve(Math.round(ms))
+                resolve(Math.round(ms));
             }
         });
     });
-}
+};
 
 exports.dnsResolve = function (hostname, resolver_server, rrtype) {
     const resolver = new Resolver();
@@ -99,8 +98,8 @@ exports.dnsResolve = function (hostname, resolver_server, rrtype) {
                 }
             });
         }
-    })
+    });
-}
+};
 
 exports.setting = async function (key) {
     let value = await R.getCell("SELECT `value` FROM setting WHERE `key` = ? ", [
@@ -109,29 +108,29 @@ exports.setting = async function (key) {
 
     try {
         const v = JSON.parse(value);
-        debug(`Get Setting: ${key}: ${v}`)
+        debug(`Get Setting: ${key}: ${v}`);
         return v;
     } catch (e) {
         return value;
     }
-}
+};
 
 exports.setSetting = async function (key, value) {
     let bean = await R.findOne("setting", " `key` = ? ", [
         key,
-    ])
+    ]);
     if (!bean) {
-        bean = R.dispense("setting")
+        bean = R.dispense("setting");
         bean.key = key;
     }
     bean.value = JSON.stringify(value);
-    await R.store(bean)
+    await R.store(bean);
-}
+};
 
 exports.getSettings = async function (type) {
     let list = await R.getAll("SELECT `key`, `value` FROM setting WHERE `type` = ? ", [
         type,
-    ])
+    ]);
 
     let result = {};
 
@@ -144,7 +143,7 @@ exports.getSettings = async function (type) {
     }
 
     return result;
-}
+};
 
 exports.setSettings = async function (type, data) {
     let keyList = Object.keys(data);
@@ -164,12 +163,12 @@ exports.setSettings = async function (type, data) {
 
         if (bean.type === type) {
             bean.value = JSON.stringify(data[key]);
-            promiseList.push(R.store(bean))
+            promiseList.push(R.store(bean));
         }
     }
 
     await Promise.all(promiseList);
-}
+};
 
 // ssl-checker by @dyaa
 // param: res - response object from axios
@@ -219,7 +218,7 @@ exports.checkCertificate = function (res) {
         issuer,
         fingerprint,
     };
-}
+};
 
 // Check if the provided status code is within the accepted ranges
 // Param: status - the status code to check
@@ -248,7 +247,7 @@ exports.checkStatusCode = function (status, accepted_codes) {
     }
 
     return false;
-}
+};
 
 exports.getTotalClientInRoom = (io, roomName) => {
 
@@ -271,7 +270,7 @@ exports.getTotalClientInRoom = (io, roomName) => {
     } else {
         return 0;
     }
-}
+};
 
 exports.genSecret = () => {
     let secret = "";
@@ -281,21 +280,21 @@ exports.genSecret = () => {
         secret += chars.charAt(Math.floor(Math.random() * charsLength));
     }
     return secret;
-}
+};
 
 exports.allowDevAllOrigin = (res) => {
     if (process.env.NODE_ENV === "development") {
         exports.allowAllOrigin(res);
     }
-}
+};
 
 exports.allowAllOrigin = (res) => {
     res.header("Access-Control-Allow-Origin", "*");
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
-}
+};
 
 exports.checkLogin = (socket) => {
     if (! socket.userID) {
         throw new Error("You are not logged in.");
     }
-}
+};

src/pages/StatusPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="container mt-3">
+    <div v-if="loadedTheme" class="container mt-3">
         <!-- Logo & Title -->
         <h1>
             <!-- Logo -->
@@ -143,15 +143,19 @@
                     All Systems Operational
                 </div>
 
-                <div v-if="partialDown">
+                <div v-else-if="partialDown">
                     <font-awesome-icon icon="exclamation-circle" class="warning" />
                     Partially Degraded Service
                 </div>
 
-                <div v-if="allDown">
+                <div v-else-if="allDown">
                     <font-awesome-icon icon="times-circle" class="danger" />
                     Degraded Service
                 </div>
+
+                <div v-else>
+                    <font-awesome-icon icon="question-circle" style="color: #efefef" />
+                </div>
             </template>
         </div>
 
@@ -190,7 +194,6 @@
 </template>
 
 <script>
-import VueMultiselect from "vue-multiselect";
 import axios from "axios";
 import PublicGroupList from "../components/PublicGroupList.vue";
 import ImageCropUpload from "vue-image-crop-upload";
@@ -206,7 +209,6 @@ let feedInterval;
 export default {
     components: {
         PublicGroupList,
-        VueMultiselect,
         ImageCropUpload
     },
 
@@ -234,6 +236,7 @@ export default {
             previousIncident: null,
             showImageCropUpload: false,
             imgDataUrl: "/icon.svg",
+            loadedTheme: false,
         };
     },
     computed: {
@@ -284,6 +287,11 @@ export default {
         },
 
         overallStatus() {
+
+            if (Object.keys(this.$root.publicLastHeartbeatList).length === 0) {
+                return -1;
+            }
+
             let status = STATUS_PAGE_ALL_UP;
             let hasUp = false;
 
@@ -346,6 +354,7 @@ export default {
         // Set Theme
         "config.statusPageTheme"() {
             this.$root.statusPageTheme = this.config.statusPageTheme;
+            this.loadedTheme = true;
         }
 
     },
@@ -366,6 +375,7 @@ export default {
     async mounted() {
         axios.get("/api/status-page/config").then((res) => {
             this.config = res.data;
+
         });
 
         axios.get("/api/status-page/incident").then((res) => {
@@ -401,10 +411,9 @@ export default {
         },
 
         save() {
-            this.$root.getSocket().emit("saveStatusPage", this.$root.publicGroupList, (res) => {
+            this.$root.getSocket().emit("saveStatusPage", this.config, this.imgDataUrl, this.$root.publicGroupList, (res) => {
                 if (res.ok) {
                     this.enableEditMode = false;
-                    console.log(res);
                     this.$root.publicGroupList = res.publicGroupList;
                 } else {
                     toast.error(res.msg);