[status page] checkpoint

server/routers/api-router.js

@@ -12,6 +12,10 @@ router.get("/api/status-page/config", async (_request, response) => {
         config.statusPageTheme = "light";
     }
 
+    if (! config.title) {
+        config.title = "Uptime Kuma";
+    }
+
     response.json(config);
 });
 

src/assets/app.scss

@@ -374,3 +374,18 @@ h2 {
     background-color: #4caf50;
     border-color: #4caf50;
 }
+
+[contenteditable=true] {
+    &:focus {
+        outline: 0 solid #eee;
+        border: 1px solid #aaa;
+        border-radius: 8px;
+    }
+
+    &::after {
+        margin-left: 5px;
+        content: "🖊️";
+        font-size: 13px;
+        color: #eee;
+    }
+}

src/components/GroupList.vue

@@ -8,7 +8,10 @@
     >
         <template #item="{ element }">
             <div>
-                <h2 class="mt-5">{{ element.name }}</h2>
+                <!-- Group Title -->
+                <h2 class="mt-5">
+                    <Editable v-model="element.name" :contenteditable="editMode" tag="span" />
+                </h2>
 
                 <div class="shadow-box monitor-list mt-4 position-relative">
                     <div v-if="element.monitorList.length === 0" class="text-center no-monitor-msg">

src/icon.js

@@ -1,4 +1,8 @@
+// Add Free Font Awesome Icons
+// https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
+
 import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import {
     faArrowAltCircleUp,
     faCog,
@@ -13,13 +17,12 @@ import {
     faTachometerAlt,
     faTimes,
     faTrash,
-    faCheckCircle, faStream, faSave, faExclamationCircle
+    faCheckCircle,
+    faStream,
+    faSave,
+    faExclamationCircle
 } from "@fortawesome/free-solid-svg-icons";
-//import { fa } from '@fortawesome/free-regular-svg-icons'
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 
-// Add Free Font Awesome Icons here
-// https://fontawesome.com/v5.15/icons?d=gallery&p=2&s=solid&m=free
 library.add(
     faArrowAltCircleUp,
     faCog,
@@ -34,7 +37,10 @@ library.add(
     faTachometerAlt,
     faTimes,
     faTrash,
-    faCheckCircle, faStream, faSave, faExclamationCircle
+    faCheckCircle,
+    faStream,
+    faSave,
+    faExclamationCircle
 );
 
 export { FontAwesomeIcon };

src/main.js

@@ -1,6 +1,7 @@
 import "bootstrap";
 import { createApp, h } from "vue";
 import Toast from "vue-toastification";
+import contenteditable from "vue-contenteditable"
 import "vue-toastification/dist/index.css";
 import App from "./App.vue";
 import "./assets/app.scss";
@@ -39,7 +40,7 @@ const options = {
 };
 
 app.use(Toast, options);
+app.component("Editable", contenteditable);
+app.component("FontAwesomeIcon", FontAwesomeIcon);
 
-app.component("FontAwesomeIcon", FontAwesomeIcon)
-
-app.mount("#app")
+app.mount("#app");

src/pages/StatusPage.vue

@@ -1,6 +1,9 @@
 <template>
     <div class="container mt-3">
-        <h1><img src="/icon.svg" alt /> Uptime Kuma</h1>
+        <h1>
+            <img src="/icon.svg" alt class="me-2" />
+            <Editable v-model="config.title" tag="span" :contenteditable="editMode" />
+        </h1>
 
         <div v-if="hasToken" class="mt-3" style="height: 38px;">
             <div v-if="!enableEditMode">
@@ -31,10 +34,6 @@
             </div>
         </div>
 
-        <div class="mt-4">
-            Free text here.
-        </div>
-
         <div class="shadow-box list  p-4 overall-status mt-4">
             <div v-if="false">
                 <font-awesome-icon icon="check-circle" class="ok" />
@@ -46,27 +45,35 @@
             </div>
         </div>
 
+        <div class="mt-4">
+            <Editable v-model="config.description" :contenteditable="editMode" tag="span" />
+        </div>
+
         <div class="shadow-box alert alert-success mt-4 p-4" role="alert">
             <h4 class="alert-heading">Well done!</h4>
             <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
             <hr>
             <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
+
+            <div class="mt-3">
+                <button v-if="editMode" class="btn btn-light me-2">Unpin</button>
+                <button v-if="editMode" class="btn btn-light">Edit</button>
+            </div>
         </div>
 
-        <div v-if="showEditFeature" class="row mt-4" style="height: 43px;">
-            <div class="col-2">
+        <div v-if="editMode" class="row mt-4" style="height: 43px;">
+            <div>
                 <button class="btn btn-primary btn-add-group" @click="addGroup">Add Group</button>
             </div>
-            <div class="col-10">
-                <div>
-                    <VueMultiselect
-                        v-model="selectedMonitor"
-                        :options="allMonitorList"
-                        :custom-label="monitorSelectorLabel"
-                        :searchable="true"
-                        placeholder="Add a monitor"
-                    ></VueMultiselect>
-                </div>
+
+            <div class="mt-5">
+                <VueMultiselect
+                    v-model="selectedMonitor"
+                    :options="allMonitorList"
+                    :custom-label="monitorSelectorLabel"
+                    :searchable="true"
+                    placeholder="Add a monitor"
+                ></VueMultiselect>
             </div>
         </div>
 
@@ -122,7 +129,7 @@ export default {
 
             return result;
         },
-        showEditFeature() {
+        editMode() {
             return this.enableEditMode && this.$root.socket.connected;
         }
     },
@@ -214,8 +221,4 @@ footer {
     font-size: 14px;
 }
 
-.btn-add-group {
-    height: 100%;
-    width: 100%;
-}
 </style>