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

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="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 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>
+                </a>
             </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,17 +72,22 @@ export default {
             background-color: #cdf8f4;
         }
 
-        .title {
-            font-weight: bold;
-            font-size: 20px;
+        $logo-width: 70px;
+
+        .logo {
+            width: $logo-width;
         }
 
-        .slug {
-            font-size: 14px;
-        }
+        .info {
 
-        .btn-group {
-            //margin-top: 7px;
+            .title {
+                font-weight: bold;
+                font-size: 20px;
+            }
+
+            .slug {
+                font-size: 14px;
+            }
         }
     }
 

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 "";
+    }
 }