From 9ba1743900bba33cba2f097afb3742d91801ab09 Mon Sep 17 00:00:00 2001
From: LouisLam <louislam@users.noreply.github.com>
Date: Tue, 10 Aug 2021 15:02:46 +0800
Subject: [PATCH] split mobile mixin from socket mixin

---
 src/layouts/Layout.vue | 22 +++++++++++++++++++---
 src/main.js            |  4 +++-
 src/mixins/mobile.js   | 25 +++++++++++++++++++++++++
 src/mixins/socket.js   |  9 ---------
 4 files changed, 47 insertions(+), 13 deletions(-)
 create mode 100644 src/mixins/mobile.js

diff --git a/src/layouts/Layout.vue b/src/layouts/Layout.vue
index 93ad065b..d63f209f 100644
--- a/src/layouts/Layout.vue
+++ b/src/layouts/Layout.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="$root.theme">
+    <div :class="classes">
         <div v-if="! $root.socket.connected && ! $root.socket.firstConnect" class="lost-connection">
             <div class="container-fluid">
                 {{ $root.connectionErrorMsg }}
@@ -79,29 +79,45 @@
 import Login from "../components/Login.vue";
 
 export default {
+
     components: {
         Login,
     },
+
     data() {
         return {}
     },
-    computed: {},
+
+    computed: {
+
+        // Theme or Mobile
+        classes() {
+            const classes = {};
+            classes[this.$root.theme] = true;
+            classes["mobile"] = this.$root.isMobile;
+            return classes;
+        }
+
+    },
+
     watch: {
         $route (to, from) {
             this.init();
         },
     },
+
     mounted() {
         this.init();
     },
+
     methods: {
         init() {
             if (this.$route.name === "root") {
                 this.$router.push("/dashboard")
             }
         },
-
     },
+
 }
 </script>
 
diff --git a/src/main.js b/src/main.js
index 6ef72034..f66d22c2 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,6 +10,7 @@ import EmptyLayout from "./layouts/EmptyLayout.vue";
 import Layout from "./layouts/Layout.vue";
 import socket from "./mixins/socket";
 import theme from "./mixins/theme";
+import mobile from "./mixins/mobile";
 import Dashboard from "./pages/Dashboard.vue";
 import DashboardHome from "./pages/DashboardHome.vue";
 import Details from "./pages/Details.vue";
@@ -78,7 +79,8 @@ const router = createRouter({
 const app = createApp({
     mixins: [
         socket,
-        theme
+        theme,
+        mobile
     ],
     data() {
         return {
diff --git a/src/mixins/mobile.js b/src/mixins/mobile.js
new file mode 100644
index 00000000..b5812703
--- /dev/null
+++ b/src/mixins/mobile.js
@@ -0,0 +1,25 @@
+export default {
+
+    data() {
+        return {
+            windowWidth: window.innerWidth,
+        }
+    },
+
+    created() {
+        window.addEventListener("resize", this.onResize);
+    },
+
+    methods: {
+        onResize() {
+            this.windowWidth = window.innerWidth;
+        },
+    },
+
+    computed: {
+        isMobile() {
+            return this.windowWidth <= 767.98;
+        },
+    }
+
+}
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index 46449ade..0857fd5f 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -27,7 +27,6 @@ export default {
             uptimeList: { },
             certInfoList: {},
             notificationList: [],
-            windowWidth: window.innerWidth,
             showListMobile: false,
             connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
         }
@@ -193,10 +192,6 @@ export default {
             this.$root.showListMobile = false;
         },
 
-        onResize() {
-            this.windowWidth = window.innerWidth;
-        },
-
         storage() {
             return (this.remember) ? localStorage : sessionStorage;
         },
@@ -270,10 +265,6 @@ export default {
 
     computed: {
 
-        isMobile() {
-            return this.windowWidth <= 767.98;
-        },
-
         timezone() {
 
             if (this.userTimezone === "auto") {