[status page] crop and resize logo

package.json

@@ -68,14 +68,15 @@
         "socket.io-client": "^4.2.0",
         "sqlite3": "github:mapbox/node-sqlite3#593c9d",
         "tcp-ping": "^0.1.1",
-        "timezones-list": "^3.0.1",
         "thirty-two": "^1.0.2",
+        "timezones-list": "^3.0.1",
         "v-pagination-3": "^0.1.6",
         "vue": "^3.2.8",
         "vue-chart-3": "^0.5.8",
         "vue-confirm-dialog": "^1.0.2",
         "vue-contenteditable": "^3.0.4",
         "vue-i18n": "^9.1.7",
+        "vue-image-crop-upload": "^3.0.3",
         "vue-multiselect": "^3.0.0-alpha.2",
         "vue-qrcode": "^1.0.0",
         "vue-router": "^4.0.11",

server/routers/api-router.js

@@ -85,14 +85,32 @@ router.get("/api/status-page/heartbeat", async (_request, response) => {
     }
 });
 
+router.post("/api/status-page/upload-logo", async (request, response) => {
+    allowDevAllOrigin(response);
+
+    // TODO: Check Bearer token
+
+    console.log(request);
+
+    response.json({});
+});
+
 async function checkPublished() {
     if (! await isPublished()) {
         throw new Error("The status page is not published");
     }
 }
 
+/**
+ * Default is published
+ * @returns {Promise<boolean>}
+ */
 async function isPublished() {
-    return await setting("statusPagePublished");
+    const value = await setting("statusPagePublished");
+    if (value === null) {
+        return true;
+    }
+    return value;
 }
 
 function send403(res, msg = "") {

src/assets/app.scss

@@ -144,7 +144,9 @@ h2 {
     }
 
     .shadow-box {
-        background-color: $dark-bg;
+        &:not(.alert) {
+            background-color: $dark-bg;
+        }
     }
 
     .form-check-input {
@@ -376,12 +378,19 @@ h2 {
 }
 
 [contenteditable=true] {
+    transition: all $easing-in 0.2s;
+
     &:focus {
         outline: 0 solid #eee;
     }
 
     &:hover, &:focus {
-        background-color: #efefef;
+        background-color: rgb(239, 239, 239);
+
+        .dark & {
+            background-color: rgba(239, 239, 239, 0.2);
+        }
+
         border-radius: 8px;
     }
 
@@ -401,3 +410,7 @@ h2 {
         transform: scale(1.2);
     }
 }
+
+.vue-image-crop-upload .vicp-wrap {
+    border-radius: 10px !important;
+}

src/pages/StatusPage.vue

@@ -1,10 +1,31 @@
 <template>
     <div class="container mt-3">
+        <!-- Logo & Title -->
         <h1>
-            <img src="/icon.svg" alt class="me-2" />
+            <!-- Logo -->
+            <img :src="imgDataUrl" alt class="logo me-2" :class="logoClass" @click="showImageCropUploadMethod" />
+
+            <!-- Uploader -->
+            <!--    url="/api/status-page/upload-logo" -->
+            <ImageCropUpload v-model="showImageCropUpload"
+                             field="img"
+                             :width="128"
+                             :height="128"
+                             :langType="$i18n.locale"
+                             :headers="uploadHeader"
+                             img-format="png"
+                             :noCircle="true"
+                             :noSquare="false"
+                             @crop-success="cropSuccess"
+                             @crop-upload-success="cropUploadSuccess"
+                             @crop-upload-fail="cropUploadFail"
+            />
+
+            <!-- Title -->
             <Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
         </h1>
 
+        <!-- Admin functions -->
         <div v-if="hasToken" class="mt-3" style="height: 38px;">
             <div v-if="!enableEditMode">
                 <button class="btn btn-info me-2" @click="edit">
@@ -46,9 +67,19 @@
 
                 <!-- 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>
             </div>
         </div>
 
+        <!-- Overall Status -->
         <div class="shadow-box list  p-4 overall-status mt-4">
             <div v-if="false">
                 <font-awesome-icon icon="check-circle" class="ok" />
@@ -64,10 +95,10 @@
             </div>
         </div>
 
-        <div class="mt-4">
-            <Editable v-model="config.description" :contenteditable="editMode" tag="span" />
-        </div>
+        <!-- Description -->
+        <Editable v-model="config.description" :contenteditable="editMode" tag="div" class="mt-4 description" />
 
+        <!-- Incident -->
         <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>
@@ -117,6 +148,7 @@
 import VueMultiselect from "vue-multiselect"
 import axios from "axios";
 import GroupList from "../components/GroupList.vue";
+import ImageCropUpload from "vue-image-crop-upload";
 
 const env = process.env.NODE_ENV || "production";
 
@@ -131,6 +163,7 @@ export default {
     components: {
         GroupList,
         VueMultiselect,
+        ImageCropUpload
     },
 
     // Leave Page for vue route change
@@ -152,6 +185,9 @@ export default {
             hasToken: false,
             config: {},
             selectedMonitor: null,
+            incident: null,
+            showImageCropUpload: false,
+            imgDataUrl: "/icon.svg",
         }
     },
     computed: {
@@ -180,6 +216,25 @@ export default {
             return this.config.statusPagePublished;
         },
 
+        theme() {
+            return this.config.statusPageTheme;
+        },
+
+        uploadHeader() {
+            return {
+                Authorization: "Bearer " + localStorage.token,
+            }
+        },
+
+        logoClass() {
+            if (this.editMode) {
+                return {
+                    "edit-mode": true,
+                }
+            }
+            return {};
+        }
+
     },
     watch: {
 
@@ -197,15 +252,18 @@ export default {
                 firstGroup.monitorList.push(monitor);
                 this.selectedMonitor = null;
             }
+        },
+
+        // Set Theme
+        "config.statusPageTheme"() {
+            this.$root.statusPageTheme = this.config.statusPageTheme;
         }
+
     },
     async created() {
         this.hasToken = ("token" in localStorage);
         this.config = (await axios.get("/api/status-page/config")).data;
 
-        // Set Theme
-        this.$root.statusPageTheme = this.config.statusPageTheme;
-
         // Browser change page
         // https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes
         window.addEventListener("beforeunload", (e) => {
@@ -250,6 +308,24 @@ export default {
 
         discard() {
             location.reload();
+        },
+
+        changeTheme(name) {
+            this.config.statusPageTheme = name;
+        },
+
+        /**
+         * Crop success
+         */
+        cropSuccess(imgDataUrl, field) {
+            console.log("-------- crop success --------");
+            this.imgDataUrl = imgDataUrl;
+        },
+
+        showImageCropUploadMethod() {
+            if (this.editMode) {
+                this.showImageCropUpload = true;
+            }
         }
     }
 }
@@ -290,4 +366,20 @@ footer {
     font-size: 14px;
 }
 
+.description span {
+    min-width: 50px;
+}
+
+.logo {
+    transition: all $easing-in 0.2s;
+
+    &.edit-mode {
+        cursor: pointer;
+
+        &:hover {
+            transform: scale(1.2);
+        }
+    }
+}
+
 </style>