split mobile mixin from socket mixin

This commit is contained in:
LouisLam 2021-08-10 15:02:46 +08:00
parent d1d000bd74
commit 9ba1743900
4 changed files with 47 additions and 13 deletions

View file

@ -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>

View file

@ -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 {

25
src/mixins/mobile.js Normal file
View file

@ -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;
},
}
}

View file

@ -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") {