[Status Page] wip, upload logo and status page listing

server/model/status_page.js

@@ -22,7 +22,7 @@ class StatusPage extends BeanModel {
             slug: this.slug,
             title: this.title,
             description: this.description,
-            icon: this.icon,
+            icon: this.getIcon(),
             theme: this.theme,
             published: !!this.published,
             showTags: !!this.show_tags,
@@ -34,7 +34,7 @@ class StatusPage extends BeanModel {
             slug: this.slug,
             title: this.title,
             description: this.description,
-            icon: this.icon,
+            icon: this.getIcon(),
             theme: this.theme,
             published: !!this.published,
             showTags: !!this.show_tags,
@@ -47,6 +47,14 @@ class StatusPage extends BeanModel {
         ]);
     }
 
+    getIcon() {
+        if (!this.icon) {
+            return "/icon.svg";
+        } else {
+            return this.icon;
+        }
+    }
+
 }
 
 module.exports = StatusPage;

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

@@ -90,9 +90,17 @@ module.exports.statusPageSocketHandler = (socket) => {
 
         try {
             checkLogin(socket);
-
             apicache.clear();
 
+            // Save Config
+            let statusPage = await R.findOne("status_page", " slug = ? ", [
+                slug
+            ]);
+
+            if (!statusPage) {
+                throw new Error("No slug?");
+            }
+
             const header = "data:image/png;base64,";
 
             // Check logo format
@@ -103,23 +111,16 @@ module.exports.statusPageSocketHandler = (socket) => {
                     throw new Error("Only allowed PNG logo.");
                 }
 
+                const filename = `logo${statusPage.id}.png`;
+
                 // Convert to file
-                await ImageDataURI.outputFile(imgDataUrl, Database.uploadDir + "logo.png");
-                config.logo = "/upload/logo.png?t=" + Date.now();
+                await ImageDataURI.outputFile(imgDataUrl, Database.uploadDir + filename);
+                config.logo = `/upload/${filename}?t=` + Date.now();
 
             } else {
                 config.icon = imgDataUrl;
             }
 
-            // Save 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.description = config.description;

src/pages/ManageStatusPage.vue

@@ -9,33 +9,14 @@
                 <router-link to="/add-status-page" class="btn btn-primary mb-3"><font-awesome-icon icon="plus" /> {{ $t("Add New Status Page") }}</router-link>
             </div>
 
-            <div class="shadow-box">
-                <div v-for="statusPage in $root.statusPageList" class="item">
-                    <div class="row">
-                        <div class="col">
+            <div class="shadow-box" style="min-height: 110px;">
+                <a v-for="statusPage in $root.statusPageList" :key="statusPage.slug" :href="'/status/' + statusPage.slug" class="item">
+                    <img :src="icon(statusPage.icon)" alt class="logo me-2" />
+                    <div class="info">
                         <div class="title">{{ statusPage.title }}</div>
                         <div class="slug">/status/{{ statusPage.slug }}</div>
                     </div>
-                        <div class="col-lg-6 col-xl-5">
-                            <div class="btn-group">
-                                <a :href="'/status/' + statusPage.slug" class="btn btn-dark">
-                                    <font-awesome-icon icon="external-link-square-alt" /><br />
-                                    {{ $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">
-                                    <font-awesome-icon icon="trash" /><br />
-                                    {{ $t("Delete") }}
-                                </router-link>
-                            </div>
-                        </div>
-                    </div>
-                </div>
             </div>
         </div>
     </transition>
@@ -43,6 +24,8 @@
 
 <script>
 
+import { getResBaseURL } from "../util-frontend";
+
 export default {
     components: {
 
@@ -58,7 +41,13 @@ export default {
 
     },
     methods: {
-
+        icon(icon) {
+            if (icon === "/icon.svg") {
+                return icon;
+            } else {
+                return getResBaseURL() + icon;
+            }
+        }
     },
 };
 </script>
@@ -67,11 +56,13 @@ export default {
     @import "../assets/vars.scss";
 
     .item {
-        display: block;
+        display: flex;
+        align-items: center;
+        gap: 10px;
         text-decoration: none;
-        padding: 13px 15px 10px 15px;
         border-radius: 10px;
         transition: all ease-in-out 0.15s;
+        padding: 10px;
 
         &:hover {
             background-color: $highlight-white;
@@ -81,6 +72,14 @@ export default {
             background-color: #cdf8f4;
         }
 
+        $logo-width: 70px;
+
+        .logo {
+            width: $logo-width;
+        }
+
+        .info {
+
             .title {
                 font-weight: bold;
                 font-size: 20px;
@@ -89,9 +88,6 @@ export default {
             .slug {
                 font-size: 14px;
             }
-
-        .btn-group {
-            //margin-top: 7px;
         }
     }
 

src/pages/StatusPage.vue

@@ -40,6 +40,11 @@
                 <textarea id="cname" v-model="config.domanNames" rows="3" disabled class="form-control" :placeholder="domainNamesPlaceholder"></textarea>
             </div>
 
+            <button class="btn btn-danger me-2" @click="discard">
+                <font-awesome-icon icon="trash" />
+                {{ $t("Delete") }}
+            </button>
+
             <!-- Sidebar Footer -->
             <div class="sidebar-footer">
                 <button class="btn btn-success me-2" @click="save">
@@ -53,6 +58,8 @@
                 </button>
             </div>
         </div>
+
+        <!-- Main Status Page -->
         <div :class="{ edit: enableEditMode}" class="main">
             <!-- Logo & Title -->
             <h1 class="mb-4">
@@ -232,6 +239,7 @@ import { STATUS_PAGE_ALL_DOWN, STATUS_PAGE_ALL_UP, STATUS_PAGE_PARTIAL_DOWN, UP
 import { useToast } from "vue-toastification";
 import dayjs from "dayjs";
 import Favico from "favico.js";
+import { getResBaseURL } from "../util-frontend";
 
 const toast = useToast();
 
@@ -427,10 +435,7 @@ export default {
         });
 
         // Special handle for dev
-        const env = process.env.NODE_ENV;
-        if (env === "development" || localStorage.dev === "dev") {
-            this.baseURL = location.protocol + "//" + location.hostname + ":3001";
-        }
+        this.baseURL = getResBaseURL();
     },
     async mounted() {
         this.slug = this.$route.params.slug;
@@ -442,8 +447,8 @@ export default {
         axios.get("/api/status-page/" + this.slug).then((res) => {
             this.config = res.data.config;
 
-            if (this.config.logo) {
-                this.imgDataUrl = this.config.logo;
+            if (this.config.icon) {
+                this.imgDataUrl = this.config.icon;
             }
 
             this.incident = res.data.incident;

src/util-frontend.js

@@ -51,7 +51,19 @@ export function timezoneList() {
 }
 
 export function setPageLocale() {
-    const html = document.documentElement
-    html.setAttribute('lang', currentLocale() )
-    html.setAttribute('dir', localeDirection() )
+    const html = document.documentElement;
+    html.setAttribute("lang", currentLocale() );
+    html.setAttribute("dir", localeDirection() );
+}
+
+/**
+ * Mainly used for dev, because the backend and the frontend are in different ports.
+ */
+export function getResBaseURL() {
+    const env = process.env.NODE_ENV;
+    if (env === "development" || localStorage.dev === "dev") {
+        return location.protocol + "//" + location.hostname + ":3001";
+    } else {
+        return "";
+    }
 }