From 64498163e10f2081f1ebbf043060cc1079fc56d1 Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Thu, 19 Aug 2021 18:12:52 +0800
Subject: [PATCH] add /list for mobile

---
 src/components/MonitorList.vue |  2 +-
 src/layouts/Layout.vue         | 12 ++++++------
 src/main.js                    |  6 ++++++
 src/mixins/socket.js           |  5 -----
 src/pages/List.vue             | 14 ++++++++++++++
 5 files changed, 27 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/List.vue

diff --git a/src/components/MonitorList.vue b/src/components/MonitorList.vue
index 496ad7a12..5be5bc7be 100644
--- a/src/components/MonitorList.vue
+++ b/src/components/MonitorList.vue
@@ -4,7 +4,7 @@
             No Monitors, please <router-link to="/add">add one</router-link>.
         </div>
 
-        <router-link v-for="(item, index) in sortedMonitorList" :key="index" :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }" @click="$root.cancelActiveList">
+        <router-link v-for="(item, index) in sortedMonitorList" :key="index" :to="monitorURL(item.id)" class="item" :class="{ 'disabled': ! item.active }">
             <div class="row">
                 <div class="col-6 col-md-8 small-padding" :class="{ 'monitorItem': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none' }">
                     <div class="info">
diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index d63f209f1..f5f2c6ec2 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -52,22 +52,22 @@
         <!-- Mobile Only -->
         <div v-if="$root.isMobile" style="width: 100%;height: 60px;" />
         <nav v-if="$root.isMobile" class="bottom-nav">
-            <router-link to="/dashboard" class="nav-link" @click="$root.cancelActiveList">
+            <router-link to="/dashboard" class="nav-link">
                 <div><font-awesome-icon icon="tachometer-alt" /></div>
                 Dashboard
             </router-link>
 
-            <a href="#" :class=" { 'router-link-exact-active' : $root.showListMobile } " @click="$root.showListMobile = ! $root.showListMobile">
+            <router-link to="/list" class="nav-link">
                 <div><font-awesome-icon icon="list" /></div>
                 List
-            </a>
+            </router-link>
 
-            <router-link to="/add" class="nav-link" @click="$root.cancelActiveList">
+            <router-link to="/add" class="nav-link">
                 <div><font-awesome-icon icon="plus" /></div>
                 Add
             </router-link>
 
-            <router-link to="/settings" class="nav-link" @click="$root.cancelActiveList">
+            <router-link to="/settings" class="nav-link">
                 <div><font-awesome-icon icon="cog" /></div>
                 Settings
             </router-link>
@@ -101,7 +101,7 @@ export default {
     },
 
     watch: {
-        $route (to, from) {
+        $route(to, from) {
             this.init();
         },
     },
diff --git a/src/main.js b/src/main.js
index 19da50b97..a4c1338b6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,8 @@ import Details from "./pages/Details.vue";
 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 { appName } from "./util.ts";
 
 const routes = [
@@ -53,6 +55,10 @@ const routes = [
                                 path: "/add",
                                 component: EditMonitor,
                             },
+                            {
+                                path: "/list",
+                                component: List,
+                            },
                         ],
                     },
                     {
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index 69931c92a..454422e94 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -25,7 +25,6 @@ export default {
             uptimeList: { },
             certInfoList: {},
             notificationList: [],
-            showListMobile: false,
             connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
         }
     },
@@ -186,10 +185,6 @@ export default {
 
     methods: {
 
-        cancelActiveList() {
-            this.$root.showListMobile = false;
-        },
-
         storage() {
             return (this.remember) ? localStorage : sessionStorage;
         },
diff --git a/src/pages/List.vue b/src/pages/List.vue
new file mode 100644
index 000000000..6d87cb87d
--- /dev/null
+++ b/src/pages/List.vue
@@ -0,0 +1,14 @@
+<template>
+    <MonitorList />
+</template>
+
+<script>
+import MonitorList from "../components/MonitorList.vue";
+
+export default {
+    components: {
+        MonitorList,
+    },
+}
+</script>
+