Frontend: allow showing bandwidth for wifi

core/frontend/src/App.vue

@@ -423,6 +423,7 @@ import autopilot_data from './store/autopilot'
 import Cpu from './widgets/Cpu.vue'
 import Disk from './widgets/Disk.vue'
 import Networking from './widgets/Networking.vue'
+import WifiNetworking from './widgets/WifiNetworking.vue'
 
 export default Vue.extend({
   name: 'App',
@@ -472,7 +473,11 @@ export default Vue.extend({
       },
       {
         component: Networking,
-        name: 'Networking',
+        name: 'Eth0 Networking',
+      },
+      {
+        component: WifiNetworking,
+        name: 'Wifi Networking',
       },
     ],
     selected_widgets: settings.user_top_widgets,

core/frontend/src/widgets/WifiNetworking.vue

@@ -0,0 +1,74 @@
+<template>
+  <v-card class="d-flex align-center justify-center" height="40">
+    <v-card-title class="d-flex align-center">
+      <span class="vertical-text mr-1">Wifi</span>
+      <img src="/img/icons/pi.svg" alt="Pi" class="pi-icon mr-1" height="30">
+      <div class="d-flex flex-column">
+        <div class="d-flex align-center text-caption" style="margin-bottom: -5px">
+          <v-icon small>
+            mdi-arrow-left
+          </v-icon>
+          {{ formatBandwidth(download) }}
+        </div>
+        <div class="d-flex align-center text-caption">
+          <v-icon small>
+            mdi-arrow-right
+          </v-icon>
+          {{ formatBandwidth(upload) }}
+        </div>
+      </div>
+    </v-card-title>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import { OneMoreTime } from '@/one-more-time'
+import system_information, { FetchType } from '@/store/system-information'
+import { formatBandwidth } from '@/utils/networking'
+
+export default Vue.extend({
+  name: 'Wifi0Widget',
+  data() {
+    return {
+      timer: 0,
+      check_backend_status_task: new OneMoreTime({ delay: 2000, disposeWith: this }),
+    }
+  },
+  computed: {
+    upload(): number {
+      const eth0 = system_information.system?.network?.find((iface) => iface.name === 'wlan0')
+      return eth0?.upload_speed ?? 0
+    },
+    download(): number {
+      const eth0 = system_information.system?.network?.find((iface) => iface.name === 'wlan0')
+      return eth0?.download_speed ?? 0
+    },
+  },
+  mounted() {
+    this.check_backend_status_task.setAction(() => {
+      system_information.fetchSystemInformation(FetchType.SystemNetworkType)
+    })
+  },
+  beforeDestroy() {
+    clearInterval(this.timer)
+  },
+  methods: {
+    formatBandwidth(bytesPerSecond: number): string {
+      return formatBandwidth(bytesPerSecond)
+    },
+  },
+})
+</script>
+
+<style scoped>
+.vertical-text {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  transform: rotate(180deg);
+  font-size: 0.8rem;
+  width: 20px;
+  margin-left: -18px;
+}
+</style>