[new status page] wip

src/pages/ManageStatusPage.vue

@@ -0,0 +1,104 @@
+<template>
+    <transition name="slide-fade" appear>
+        <div>
+            <h1 class="mb-3">
+                {{ $t("Status Pages") }}
+            </h1>
+
+            <div>
+                <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 target="_blank" :href="'/status/' + statusPage.slug" class="btn btn-dark">
+                                    <font-awesome-icon icon="external-link-square-alt" /><br />
+                                    {{ $t("Manage") }}
+                                </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>
+</template>
+
+<script>
+
+export default {
+    components: {
+
+    },
+    data() {
+        return {
+        };
+    },
+    computed: {
+
+    },
+    mounted() {
+
+    },
+    methods: {
+
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+    @import "../assets/vars.scss";
+
+    .item {
+        display: block;
+        text-decoration: none;
+        padding: 13px 15px 10px 15px;
+        border-radius: 10px;
+        transition: all ease-in-out 0.15s;
+
+        &:hover {
+            background-color: $highlight-white;
+        }
+
+        &.active {
+            background-color: #cdf8f4;
+        }
+
+        .title {
+            font-weight: bold;
+            font-size: 20px;
+        }
+
+        .slug {
+            font-size: 14px;
+        }
+
+        .btn-group {
+            //margin-top: 7px;
+        }
+    }
+
+    .dark {
+        .item {
+            &:hover {
+                background-color: $dark-bg2;
+            }
+
+            &.active {
+                background-color: $dark-bg2;
+            }
+        }
+    }
+</style>

src/pages/Settings.vue

@@ -167,6 +167,8 @@ footer {
         margin: 0.5em;
         padding: 0.7em 1em;
         cursor: pointer;
+        border-left-width: 0;
+        transition: all ease-in-out 0.1s;
     }
 
     .menu-item:hover {

src/pages/StatusPage.vue

@@ -247,6 +247,7 @@ export default {
 
     data() {
         return {
+            slug: null,
             enableEditMode: false,
             enableEditIncidentMode: false,
             hasToken: false,
@@ -296,15 +297,15 @@ export default {
         },
 
         isPublished() {
-            return this.config.statusPagePublished;
+            return this.config.published;
         },
 
         theme() {
-            return this.config.statusPageTheme;
+            return this.config.theme;
         },
 
         tagsVisible() {
-            return this.config.statusPageTags
+            return this.config.showTags;
         },
 
         logoClass() {
@@ -378,8 +379,8 @@ export default {
         },
 
         // Set Theme
-        "config.statusPageTheme"() {
-            this.$root.statusPageTheme = this.config.statusPageTheme;
+        "config.theme"() {
+            this.$root.statusPageTheme = this.config.theme;
             this.loadedTheme = true;
         },
 
@@ -409,7 +410,13 @@ export default {
         }
     },
     async mounted() {
-        axios.get("/api/status-page/config").then((res) => {
+        this.slug = this.$route.params.slug;
+
+        if (!this.slug) {
+            this.slug = "default";
+        }
+
+        axios.get("/api/status-page/config/" + this.slug).then((res) => {
             this.config = res.data;
 
             if (this.config.logo) {
@@ -417,13 +424,13 @@ export default {
             }
         });
 
-        axios.get("/api/status-page/incident").then((res) => {
+        axios.get("/api/status-page/incident/" + this.slug).then((res) => {
             if (res.data.ok) {
                 this.incident = res.data.incident;
             }
         });
 
-        axios.get("/api/status-page/monitor-list").then((res) => {
+        axios.get("/api/status-page/monitor-list/" + this.slug).then((res) => {
             this.$root.publicGroupList = res.data;
         });
 
@@ -438,7 +445,7 @@ export default {
         updateHeartbeatList() {
             // If editMode, it will use the data from websocket.
             if (! this.editMode) {
-                axios.get("/api/status-page/heartbeat").then((res) => {
+                axios.get("/api/status-page/heartbeat/" + this.slug).then((res) => {
                     this.$root.heartbeatList = res.data.heartbeatList;
                     this.$root.uptimeList = res.data.uptimeList;
                     this.loadedData = true;
@@ -485,10 +492,10 @@ export default {
         },
 
         changeTheme(name) {
-            this.config.statusPageTheme = name;
+            this.config.theme = name;
         },
         changeTagsVisibilty(newState) {
-            this.config.statusPageTags = 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
@@ -501,9 +508,9 @@ export default {
                         return {
                             ...monitor,
                             tags: newState ? this.$root.monitorList[monitor.id].tags : []
-                        }
+                        };
                     })
-                }
+                };
             });
         },