Enable transition at view changing

SysInfo: Add data updating

Author: SanyaPilot

src/App.vue

@@ -46,11 +46,13 @@
     </v-navigation-drawer>
 
     <v-main>
-      <v-container fluid>
-        <keep-alive>
-          <router-view></router-view>
-        </keep-alive>
-      </v-container>
+      <v-scroll-x-reverse-transition>
+        <v-container fluid v-show="mainViewShown">
+          <keep-alive>
+            <router-view></router-view>
+          </keep-alive>
+        </v-container>
+      </v-scroll-x-reverse-transition>
     </v-main>
   </v-app>
 </template>
@@ -85,22 +87,24 @@ export default {
       null,
       'System logs'
     ],
-    titleShown: false
+    titleShown: false,
+    mainViewShown: false
   }),
   methods: {
     changeMainView(view) {
       this.titleShown = false
-      console.log(this.titleShown)
-      this.$router.push(view)
-      let context = this
-      //setTimeout(function() {
-      //
-      //}, 1000)
+      this.mainViewShown = false
+
+      setTimeout(function() {
+        this.mainViewShown = true
+        this.$router.push(view)
+        console.log(view)
+      }.bind(this), 400)
+
       setTimeout(function() {
-        context.drawer.selectedItem = context.drawer.tempSelectedItem
-        context.titleShown = true
-      }, 400)
-      console.log(this.titleShown)
+        this.drawer.selectedItem = this.drawer.tempSelectedItem
+        this.titleShown = true
+      }.bind(this), 400)
     },
     getSelectedItem() {
       this.drawer.selectedItem = this.drawer.items.findIndex(e => e.view == this.$route.name)
@@ -123,6 +127,7 @@ export default {
     console.log(this.$vuetify.breakpoint)
     console.log(this.$vuetify)
     this.titleShown = true
+    this.mainViewShown = true
   }
 };
 </script>

src/components/SysInfo.vue

@@ -5,6 +5,8 @@
         <v-card
           :hover="!$vuetify.breakpoint.mobile"
           :outlined="$vuetify.breakpoint.mobile"
+          class="d-flex flex-wrap"
+          style="height: 100%;"
         >
           <v-card-title class="title-img">
             {{card.label}}
@@ -41,6 +43,8 @@ import { getInterfaceAddressesData, getActiveInterface, getHostname } from '../A
 import getTimeData from '../API/time.js'
 import getPythonData from '../API/python.js'
 
+let updateTimer
+
 export default {
   name: 'SysInfo',
 
@@ -144,12 +148,24 @@ export default {
     await this.updateTimeData()
     await this.updatePythonData()
   },
+  async activated() {
+    updateTimer = setInterval(async function() {
+      await this.updateHardwareData()
+      await this.updateNetworkData()
+      await this.updateTimeData()
+    }.bind(this), 3000)
+  },
+  deactivated() {
+    clearInterval(updateTimer)
+  },
 };
 </script>
 
 <style>
 .title-img {
   justify-content: space-between;
+  width: 100%;
+  height: fit-content;
 }
 .data-table {
   border-spacing: 0px;