Frontend: update networking bandwidth widget style

Frontend: allow showing bandwidth for wifi
frontend: update networking widgets for using the a blueos-on-sbc  with css colors

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/components/wifi/WifiTrayMenu.vue

@@ -85,7 +85,7 @@ export default Vue.extend({
   },
   mounted() {
     commander.getEnvironmentVariables().then((environment_variables) => {
-      this.disabled_services = ((environment_variables?.BLUEOS_DISABLE_SERVICES as string) ?? '').split(',') as string[]
+      this.disabled_services = (environment_variables?.BLUEOS_DISABLE_SERVICES as string ?? '').split(',') as string[]
     })
   },
 })

core/frontend/src/utils/networking.ts

@@ -0,0 +1,5 @@
+export function formatBandwidth(bytesPerSecond: number): string {
+  const mbps = (bytesPerSecond / 1024 / 1024)
+  const decimal_places = mbps < 10 ? 2 : mbps < 100 ? 1 : 0
+  return `${mbps.toFixed(decimal_places)}Mbps`
+}