From e205adfd7b062a963a08feb2b4928393188c0bac Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Mon, 13 Sep 2021 02:26:45 +0800
Subject: [PATCH] [status page] developing

---
 db/patch-monitor-public-weight.sql |  6 ++++
 package.json                       |  3 +-
 server/database.js                 |  1 +
 server/model/monitor.js            | 13 ++++++++
 src/pages/StatusPage.vue           | 51 +++++++++++++++++++++++++++---
 5 files changed, 69 insertions(+), 5 deletions(-)
 create mode 100644 db/patch-monitor-public-weight.sql

diff --git a/db/patch-monitor-public-weight.sql b/db/patch-monitor-public-weight.sql
new file mode 100644
index 00000000..a24e30cb
--- /dev/null
+++ b/db/patch-monitor-public-weight.sql
@@ -0,0 +1,6 @@
+BEGIN TRANSACTION;
+
+alter table monitor
+    add public_weight BOOLEAN default 1000 not null;
+
+COMMIT;
diff --git a/package.json b/package.json
index 51d9ab05..5d34b09c 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,8 @@
         "vue-multiselect": "^3.0.0-alpha.2",
         "vue-qrcode": "^1.0.0",
         "vue-router": "^4.0.11",
-        "vue-toastification": "^2.0.0-rc.1"
+        "vue-toastification": "^2.0.0-rc.1",
+        "vuedraggable": "^4.1.0"
     },
     "devDependencies": {
         "@babel/eslint-parser": "^7.15.0",
diff --git a/server/database.js b/server/database.js
index 72e115f8..1ee2026d 100644
--- a/server/database.js
+++ b/server/database.js
@@ -32,6 +32,7 @@ class Database {
         "patch-improve-performance.sql": true,
         "patch-monitor-public.sql": true,
         "patch-2fa.sql": true,
+        "patch-monitor-public-weight.sql": true,
     }
 
     /**
diff --git a/server/model/monitor.js b/server/model/monitor.js
index 89208a3f..2e0c0387 100644
--- a/server/model/monitor.js
+++ b/server/model/monitor.js
@@ -20,6 +20,19 @@ const version = require("../../package.json").version;
  *      2 = PENDING
  */
 class Monitor extends BeanModel {
+
+    /**
+     * Return a object that ready to parse to JSON for public
+     * Only show necessary data to public
+     */
+    async toPublicJSON() {
+        // TODO Only show necessary
+        return this.toJSON();
+    }
+
+    /**
+     * Return a object that ready to parse to JSON
+     */
     async toJSON() {
 
         let notificationIDList = {};
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 4082381e..87d23092 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -3,21 +3,36 @@
         <h1><img src="/icon.svg" alt /> Uptime Kuma</h1>
 
         <div v-if="hasToken" class="mt-3">
-            <button class="btn btn-info me-2" @click="edit">
+            <button v-if="!enableEditMode" class="btn btn-info me-2" @click="edit">
                 <font-awesome-icon icon="edit" />
                 Edit Status Page
             </button>
 
-            <router-link to="/dashboard" class="btn btn-info">
+            <button v-if="enableEditMode" class="btn btn-dark me-2" @click="leaveEditMode">
+                <font-awesome-icon icon="" />
+                Leave Edit Mode
+            </button>
+
+            <router-link v-if="!enableEditMode" to="/dashboard" class="btn btn-info">
                 <font-awesome-icon icon="tachometer-alt" />
                 Go to Dashboard
             </router-link>
         </div>
 
-        <div class="shadow-box list mt-4 p-4 overall-status">
+        <div class="shadow-box list  p-4 overall-status mt-4">
             <font-awesome-icon icon="check-circle" class="ok" /> All Systems Operational
         </div>
 
+        <div v-if="showEditFeature" class="mt-4">
+            <VueMultiselect
+                v-model="selectedMonitor"
+                :options="allMonitorList"
+                :custom-label="monitorSelectorLabel"
+                :searchable="true"
+                @select="onSelectedMonitor"
+            ></VueMultiselect>
+        </div>
+
         <div class="shadow-box monitor-list mt-4">
             <div v-if="Object.keys(monitorList).length === 0" class="text-center my-3">
                 {{ $t("No Monitors") }}
@@ -45,6 +60,7 @@
 </template>
 
 <script>
+import VueMultiselect from "vue-multiselect"
 import { useToast } from "vue-toastification";
 const toast = useToast();
 
@@ -63,16 +79,24 @@ export default {
     components: {
         HeartbeatBar,
         Uptime,
+        VueMultiselect,
     },
     data() {
         return {
+            enableEditMode: false,
             hasToken: false,
             config: {},
             monitorList: {},
+            selectedMonitor: null,
         }
     },
     computed: {
-
+        allMonitorList() {
+            return Object.values(this.$root.monitorList);
+        },
+        showEditFeature() {
+            return this.enableEditMode && this.$root.socket.connected;
+        }
     },
     watch: {
 
@@ -88,9 +112,28 @@ export default {
         this.monitorList = (await axios.get("/api/status-page/monitor-list")).data;
     },
     methods: {
+
         edit() {
             this.$root.initSocketIO(true);
+            this.enableEditMode = true;
+        },
+
+        leaveEditMode() {
+            this.enableEditMode = false;
+        },
+
+        monitorSelectorLabel(monitor) {
+            return `${monitor.name}`;
+        },
+
+        onSelectedMonitor(selectedOption, id) {
+            console.log(selectedOption);
+            console.log(id);
+
+            // TODO: emit socket cmd to set it public
+            // TODO: Reload monitor or add to list
         }
+
     },
 }
 </script>