do not connect to socket io for status page

src/main.js

@@ -20,6 +20,7 @@ import EditMonitor from "./pages/EditMonitor.vue";
 import Settings from "./pages/Settings.vue";
 import Setup from "./pages/Setup.vue";
 import List from "./pages/List.vue";
+import StatusPage from "./pages/StatusPage.vue";
 
 import { appName } from "./util.ts";
 
@@ -94,6 +95,10 @@ const routes = [
         path: "/setup",
         component: Setup,
     },
+    {
+        path: "/status-page",
+        component: StatusPage,
+    },
 ]
 
 const router = createRouter({

src/mixins/socket.js

@@ -4,6 +4,10 @@ const toast = useToast()
 
 let socket;
 
+const noSocketIOPage = [
+    "/status-page",
+];
+
 export default {
 
     data() {
@@ -14,6 +18,8 @@ export default {
                 firstConnect: true,
                 connected: false,
                 connectCount: 0,
+                initedSocketIO: false,
+
             },
             remember: (localStorage.remember !== "0"),
             allowLoginDialog: false,        // Allowed to show login dialog, but "loggedIn" have to be true too. This exists because prevent the login dialog show 0.1s in first before the socket server auth-ed.
@@ -31,6 +37,23 @@ export default {
 
     created() {
         window.addEventListener("resize", this.onResize);
+        this.initSocketIO();
+    },
+
+    methods: {
+
+        initSocketIO(bypass = false) {
+            // No need to re-init
+            if (this.socket.initedSocketIO) {
+                return;
+            }
+
+            // No need to connect to the socket.io for status page
+            if (! bypass && noSocketIOPage.includes(location.pathname)) {
+                return;
+            }
+
+            this.socket.initedSocketIO = true;
 
             let protocol = (location.protocol === "https:") ? "wss://" : "ws://";
 
@@ -185,8 +208,6 @@ export default {
 
         },
 
-    methods: {
-
         storage() {
             return (this.remember) ? localStorage : sessionStorage;
         },
@@ -336,6 +357,14 @@ export default {
             localStorage.remember = (this.remember) ? "1" : "0"
         },
 
+        // Reconnect the socket io, if status-page to dashboard
+        "$route.fullPath"(newValue, oldValue) {
+            if (noSocketIOPage.includes(newValue)) {
+                return;
+            }
+            this.initSocketIO();
+        },
+
     },
 
 }

src/pages/StatusPage.vue

@@ -0,0 +1,36 @@
+<template>
+    <button v-if="hasToken" @click="edit">
+        <font-awesome-icon icon="edit" />
+    </button>
+</template>
+
+<script>
+import { useToast } from "vue-toastification"
+const toast = useToast()
+
+export default {
+    data() {
+        return {
+            hasToken: false,
+        }
+    },
+    computed: {
+
+    },
+    watch: {
+
+    },
+    created() {
+        this.hasToken = ("token" in localStorage);
+    },
+    mounted() {
+
+    },
+    methods: {
+        edit() {
+            console.log("here");
+            this.$root.initSocketIO(true);
+        }
+    },
+}
+</script>