#54 bugfix and code clean up

app/src/store/index.js

@@ -114,30 +114,18 @@ const store = new Vuex.Store({
     getTimezone: () => (timezone) => {
       return timezones.getTimezone(timezone)
     },
+    getFSUsage: (state) => {
+      return Math.round(
+        (100 / state.stats.device.fs.total) * state.stats.device.fs.used,
+      )
+    },
+    getMemoryUsage: (state) => {
+      return Math.round(
+        (100 / state.stats.device.heap.total) * state.stats.device.heap.free,
+      )
+    },
+
   },
 })
 
-// sensor push data
-/*
-const connection = new WebSocket('ws://' + window.location.host + '/ws')
-connection.onmessage = (message) => {
-  const log = JSON.parse(message.data)
-  log.last_update = new Date()
-
-  store.commit('updateSensor', log)
-  store.commit('addSensorHistory', log)
-  store.commit('notification', log)
-}
-
-store.watch(
-  state => state.pushUpdate,
-  (value) => {
-    if (value) {
-      console.info('TODO:: enable websocket')
-    } else {
-      console.info('TODO:: disable websocket')
-    }
-  },
-)
-*/
 export default store

app/src/views/System.vue

@@ -70,10 +70,10 @@
       <v-list-item-avatar>
         <v-progress-circular
           :rotate="-90"
-          :value="fsUsage"
+          :value="getFSUsage"
           class="caption"
         >
-          {{ fsUsage }}
+          {{ getFSUsage }}
         </v-progress-circular>
       </v-list-item-avatar>
     </v-list-item>
@@ -95,17 +95,6 @@
         </v-list-item-subtitle>
       </v-list-item>
     </v-list>
-    <v-progress-linear
-      v-if="0"
-      height="25"
-      :value="fsUsage"
-      dark
-      rounded
-    >
-      <template #default="{ value }">
-        <strong>{{ Math.ceil(value) }}%</strong>
-      </template>
-    </v-progress-linear>
 
     <v-list-item class="mt-10">
       <v-list-item-icon class="mr-3">
@@ -117,10 +106,10 @@
       <v-list-item-avatar>
         <v-progress-circular
           :rotate="-90"
-          :value="memoryUsage"
+          :value="getMemoryUsage"
           class="caption"
         >
-          {{ memoryUsage }}
+          {{ getMemoryUsage }}
         </v-progress-circular>
       </v-list-item-avatar>
     </v-list-item>
@@ -143,17 +132,6 @@
         </v-list-item-subtitle>
       </v-list-item>
     </v-list>
-    <v-progress-linear
-      v-if="0"
-      height="25"
-      :value="memoryUsage"
-      dark
-      rounded
-    >
-      <template #default="{ value }">
-        <strong>{{ Math.ceil(value) }}%</strong>
-      </template>
-    </v-progress-linear>
 
     <v-divider class="mt-12" />
     <v-card-actions>
@@ -168,7 +146,7 @@
 </template>
 
 <script>
-  import { mapState } from 'vuex'
+  import { mapState, mapGetters } from 'vuex'
   import UpdateDialog from '@/components/UpdateDialog'
 
   export default {
@@ -179,11 +157,7 @@
     }),
     computed: {
       ...mapState(['stats']),
-      fsUsage () {
-        return Math.round(
-          (100 / this.stats.device.fs.total) * this.stats.device.fs.used,
-        )
-      },
+      ...mapGetters(['getFSUsage', 'getMemoryUsage']),
       fs () {
         return this.stats.device.fs
       },