[Status Page] wip, sidebar for editor

server/database.js

@@ -223,10 +223,10 @@ class Database {
         if (title) {
             console.log("Migrating Status Page");
 
-            let statusPageCheck = await R.findOne("status_page", " slug = '' ");
+            let statusPageCheck = await R.findOne("status_page", " slug = 'default' ");
 
             if (statusPageCheck !== null) {
-                console.log("Migrating Status Page - Fail, empty slug record is already existing");
+                console.log("Migrating Status Page - Skip, default slug record is already existing");
                 return;
             }
 

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

@@ -71,7 +71,7 @@ module.exports.statusPageSocketHandler = (socket) => {
 
     // Save Status Page
     // imgDataUrl Only Accept PNG!
-    socket.on("saveStatusPage", async (config, imgDataUrl, publicGroupList, callback) => {
+    socket.on("saveStatusPage", async (slug, config, imgDataUrl, publicGroupList, callback) => {
 
         try {
             checkLogin(socket);
@@ -97,7 +97,24 @@ module.exports.statusPageSocketHandler = (socket) => {
             }
 
             // Save Config
-            await setSettings("statusPage", config);
+            let statusPage = await R.findOne("status_page", " slug = ? ", [
+                slug
+            ]);
+
+            if (!statusPage) {
+                throw new Error("No slug?");
+            }
+
+            statusPage.slug = config.slug;
+            statusPage.title = config.title;
+            statusPage.icon = config.logo;
+            statusPage.theme = config.theme;
+            //statusPage.published = ;
+            //statusPage.search_engine_index = ;
+            statusPage.show_tags = config.showTags;
+            //statusPage.password = null;
+
+            await R.store(statusPage);
 
             // Save Public Group List
             const groupIDList = [];

src/assets/app.scss

@@ -163,6 +163,12 @@ textarea.form-control {
         border-color: $dark-border-color;
     }
 
+    .input-group-text {
+        background-color: #282f39;
+        border-color: $dark-border-color;
+        color: $dark-font-color;
+    }
+
     .form-check-input:checked {
         border-color: $primary; // Re-apply bootstrap border
     }

src/mixins/socket.js

@@ -7,9 +7,9 @@ const toast = useToast();
 let socket;
 
 const noSocketIOPages = [
-    "/status-page",
+    /^\/status-page$/,  //  /status-page
-    "/status",
+    /^\/status/,    // /status**
-    "/"
+    /^\/$/      //  /
 ];
 
 const favicon = new Favico({
@@ -57,9 +57,13 @@ export default {
             }
 
             // No need to connect to the socket.io for status page
-            if (! bypass && noSocketIOPages.includes(location.pathname)) {
+            if (! bypass && location.pathname) {
+                for (let page of noSocketIOPages) {
+                    if (location.pathname.match(page)) {
                         return;
                     }
+                }
+            }
 
             this.socket.initedSocketIO = true;
 
@@ -110,7 +114,6 @@ export default {
             });
 
             socket.on("statusPageList", (data) => {
-                console.log(data);
                 this.statusPageList = data;
             });
 
@@ -443,7 +446,6 @@ export default {
         "stats.down"(to, from) {
             if (to !== from) {
                 favicon.badge(to);
-                console.log(to);
             }
         },
 
@@ -460,9 +462,15 @@ export default {
 
         // Reconnect the socket io, if status-page to dashboard
         "$route.fullPath"(newValue, oldValue) {
-            if (noSocketIOPages.includes(newValue)) {
+
+            if (newValue) {
+                for (let page of noSocketIOPages) {
+                    if (newValue.match(page)) {
                         return;
                     }
+                }
+            }
+
             this.initSocketIO();
         },
 

src/pages/AddStatusPage.vue

@@ -0,0 +1,37 @@
+<template>
+    <transition name="slide-fade" appear>
+        <div>
+            <h1 class="mb-3">
+                {{ $t("Add New Status Page") }}
+            </h1>
+
+            <div class="shadow-box">
+                <div class="my-3">
+                    <label for="name" class="form-label">{{ $t("Status Page Name") }}</label>
+                    <input id="name" v-model="statusPage.basic_auth_user" type="text" class="form-control">
+                </div>
+
+                <div class="my-3">
+                    <label for="basicauth" class="form-label">{{ $t("Password") }}</label>
+                    <input id="basicauth-pass" v-model="statusPage.basic_auth_pass" type="password" autocomplete="new-password" class="form-control" :placeholder="$t('Password')">
+                </div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+export default {
+    components: {
+
+    },
+    data() {
+        return {
+            statusPage: {
+
+            }
+        };
+    }
+};
+</script>
+

src/pages/ManageStatusPage.vue

@@ -18,9 +18,14 @@
                         </div>
                         <div class="col-lg-6 col-xl-5">
                             <div class="btn-group">
-                                <a target="_blank" :href="'/status/' + statusPage.slug" class="btn btn-dark">
+                                <a :href="'/status/' + statusPage.slug" class="btn btn-dark">
                                     <font-awesome-icon icon="external-link-square-alt" /><br />
-                                    {{ $t("Manage") }}
+                                    {{ $t("View") }}
+                                </a>
+
+                                <a :href="'/status/' + statusPage.slug +'?edit'" class="btn btn-dark">
+                                    <font-awesome-icon icon="pen" /><br />
+                                    {{ $t("Edit") }}
                                 </a>
 
                                 <router-link to="/" class="btn btn-danger">

src/pages/StatusPage.vue

@@ -1,5 +1,59 @@
 <template>
     <div v-if="loadedTheme" class="container mt-3">
+        <!-- Sidebar for edit mode -->
+        <div v-if="enableEditMode" class="sidebar">
+            <div class="my-3">
+                <label for="slug" class="form-label">{{ $t("Slug") }}</label>
+                <div class="input-group">
+                    <span id="basic-addon3" class="input-group-text">/status/</span>
+                    <input id="slug" v-model="config.slug" type="text" class="form-control">
+                </div>
+            </div>
+
+            <div class="my-3">
+                <label for="title" class="form-label">{{ $t("Title") }}</label>
+                <input id="title" v-model="config.title" type="text" class="form-control">
+            </div>
+
+            <div class="my-3">
+                <label for="description" class="form-label">{{ $t("Description") }}</label>
+                <textarea id="description" v-model="config.description" class="form-control"></textarea>
+            </div>
+
+            <div class="my-3 form-check form-switch">
+                <input id="switch-theme" v-model="config.theme" class="form-check-input" type="checkbox" true-value="dark" false-value="light">
+                <label class="form-check-label" for="switch-theme">{{ $t("Switch to Dark Theme") }}</label>
+            </div>
+
+            <div class="my-3 form-check form-switch">
+                <input id="showTags" v-model="config.showTags" class="form-check-input" type="checkbox">
+                <label class="form-check-label" for="showTags">{{ $t("Show Tags") }}</label>
+            </div>
+
+            <div v-if="false" class="my-3">
+                <label for="password" class="form-label">{{ $t("Password") }} <sup>Coming Soon</sup></label>
+                <input id="password" v-model="config.password" disabled type="password" autocomplete="new-password" class="form-control">
+            </div>
+
+            <div v-if="false" class="my-3">
+                <label for="cname" class="form-label">Domain Names <sup>Coming Soon</sup></label>
+                <textarea id="cname" v-model="config.domanNames" rows="3" disabled class="form-control" :placeholder="domainNamesPlaceholder"></textarea>
+            </div>
+
+            <!-- Sidebar Footer -->
+            <div class="sidebar-footer">
+                <button class="btn btn-success me-2" @click="save">
+                    <font-awesome-icon icon="save" />
+                    {{ $t("Save") }}
+                </button>
+
+                <button class="btn btn-danger me-2" @click="discard">
+                    <font-awesome-icon icon="save" />
+                    {{ $t("Discard") }}
+                </button>
+            </div>
+        </div>
+        <div :class="{ edit: enableEditMode}" class="main">
             <!-- Logo & Title -->
             <h1 class="mb-4">
                 <!-- Logo -->
@@ -33,61 +87,17 @@
                         {{ $t("Edit Status Page") }}
                     </button>
 
-                <a href="/dashboard" class="btn btn-info">
+                    <a href="/manage-status-page" class="btn btn-info">
                         <font-awesome-icon icon="tachometer-alt" />
                         {{ $t("Go to Dashboard") }}
                     </a>
                 </div>
 
                 <div v-else>
-                <button class="btn btn-success me-2" @click="save">
-                    <font-awesome-icon icon="save" />
-                    {{ $t("Save") }}
-                </button>
-
-                <button class="btn btn-danger me-2" @click="discard">
-                    <font-awesome-icon icon="save" />
-                    {{ $t("Discard") }}
-                </button>
-
                     <button class="btn btn-primary btn-add-group me-2" @click="createIncident">
                         <font-awesome-icon icon="bullhorn" />
                         {{ $t("Create Incident") }}
                     </button>
-
-                <!--
-                <button v-if="isPublished" class="btn btn-light me-2" @click="">
-                    <font-awesome-icon icon="save" />
-                    {{ $t("Unpublish") }}
-                </button>
-
-                <button v-if="!isPublished" class="btn btn-info me-2" @click="">
-                    <font-awesome-icon icon="save" />
-                    {{ $t("Publish") }}
-                </button>-->
-
-                <!-- Set Default Language -->
-                <!-- Set theme -->
-                <button v-if="theme == 'dark'" class="btn btn-light me-2" @click="changeTheme('light')">
-                    <font-awesome-icon icon="save" />
-                    {{ $t("Switch to Light Theme") }}
-                </button>
-
-                <button v-if="theme == 'light'" class="btn btn-dark me-2" @click="changeTheme('dark')">
-                    <font-awesome-icon icon="save" />
-                    {{ $t("Switch to Dark Theme") }}
-                </button>
-
-                <button class="btn btn-secondary me-2" @click="changeTagsVisibilty(!tagsVisible)">
-                    <template v-if="tagsVisible">
-                        <font-awesome-icon icon="eye-slash" />
-                        {{ $t("Hide Tags") }}
-                    </template>
-                    <template v-else>
-                        <font-awesome-icon icon="eye" />
-                        {{ $t("Show Tags") }}
-                    </template>
-                </button>
                 </div>
             </div>
 
@@ -211,6 +221,7 @@
                 {{ $t("Powered by") }} <a target="_blank" href="https://github.com/louislam/uptime-kuma">{{ $t("Uptime Kuma" ) }}</a>
             </footer>
         </div>
+    </div>
 </template>
 
 <script>
@@ -266,6 +277,8 @@ export default {
             loadedTheme: false,
             loadedData: false,
             baseURL: "",
+            clickedEditButton: false,
+            domainNamesPlaceholder: "domain1.com\ndomain2.com\n..."
         };
     },
     computed: {
@@ -306,10 +319,6 @@ export default {
             return this.config.published;
         },
 
-        theme() {
-            return this.config.theme;
-        },
-
         tagsVisible() {
             return this.config.showTags;
         },
@@ -386,12 +395,17 @@ export default {
 
         // Set Theme
         "config.theme"() {
-            this.$root.statusPageTheme = this.config.theme;
+            this.$root.userTheme = this.config.theme;
             this.loadedTheme = true;
         },
 
         "config.title"(title) {
             document.title = title;
+        },
+
+        "config.showTags"(value) {
+            console.log("here???");
+            this.changeTagsVisibility(value);
         }
 
     },
@@ -479,14 +493,36 @@ export default {
         edit() {
             this.$root.initSocketIO(true);
             this.enableEditMode = true;
+            this.clickedEditButton = true;
         },
 
         save() {
-            this.$root.getSocket().emit("saveStatusPage", this.config, this.imgDataUrl, this.$root.publicGroupList, (res) => {
+            let startTime = new Date();
+
+            this.$root.getSocket().emit("saveStatusPage", this.slug, this.config, this.imgDataUrl, this.$root.publicGroupList, (res) => {
                 if (res.ok) {
                     this.enableEditMode = false;
                     this.$root.publicGroupList = res.publicGroupList;
+
+                    // Add some delay, so that the side menu animation would be better
+                    let endTime = new Date();
+                    let time = 100 - (endTime - startTime) / 1000;
+
+                    if (time < 0) {
+                        time = 0;
+                    }
+
+                    console.log(time);
+
+                    setTimeout(() => {
+                        // If the slug was changed, go to the new slug
+                        if (this.slug !== this.config.slug) {
+                            location.href = "/status/" + this.config.slug;
+                        } else {
                             location.reload();
+                        }
+                    }, time);
+
                 } else {
                     toast.error(res.msg);
                 }
@@ -514,11 +550,7 @@ export default {
             location.reload();
         },
 
-        changeTheme(name) {
+        changeTagsVisibility(show) {
-            this.config.theme = name;
-        },
-        changeTagsVisibilty(newState) {
-            this.config.showTags = newState;
 
             // On load, the status page will not include tags if it's not enabled for security reasons
             // Which means if we enable tags, it won't show in the UI until saved
@@ -530,7 +562,7 @@ export default {
                         // We only include the tags if visible so we can reuse the logic to hide the tags on disable
                         return {
                             ...monitor,
-                            tags: newState ? this.$root.monitorList[monitor.id].tags : []
+                            tags: show ? this.$root.monitorList[monitor.id].tags : []
                         };
                     })
                 };
@@ -644,6 +676,35 @@ h1 {
     }
 }
 
+.main {
+    transition: all ease-in-out 0.1s;
+
+    &.edit {
+        margin-left: 300px;
+    }
+}
+
+.sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 300px;
+    height: 100vh;
+    padding: 15px 15px 68px 15px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border-right: 1px solid #ededed;
+
+    .sidebar-footer {
+        width: 100%;
+        bottom: 0;
+        left: 0;
+        padding: 15px;
+        position: absolute;
+        border-top: 1px solid #ededed;
+    }
+}
+
 footer {
     text-align: center;
     font-size: 14px;
@@ -711,4 +772,15 @@ footer {
     }
 }
 
+.dark {
+    .sidebar {
+        background-color: $dark-header-bg;
+        border-right-color: $dark-border-color;
+
+        .sidebar-footer {
+            border-top-color: $dark-border-color;
+        }
+    }
+}
+
 </style>

src/router.js

@@ -19,6 +19,7 @@ import Security from "./components/settings/Security.vue";
 import Backup from "./components/settings/Backup.vue";
 import About from "./components/settings/About.vue";
 import ManageStatusPage from "./pages/ManageStatusPage.vue";
+import AddStatusPage from "./pages/AddStatusPage.vue";
 
 const routes = [
     {
@@ -103,6 +104,10 @@ const routes = [
                         path: "/manage-status-page",
                         component: ManageStatusPage,
                     },
+                    {
+                        path: "/add-status-page",
+                        component: AddStatusPage,
+                    },
                 ],
             },
         ],