wip

Signed-off-by: Patrick José Pereira <patrickelectric@gmail.com>

Author: patrickelectric

core/frontend/src/components/wifi/WifiInterfaceManager.vue

@@ -11,22 +11,14 @@
         WiFi - {{ interfaceName }}
       </v-toolbar-title>
       <v-spacer />
-      <v-chip
-        v-if="interface_data?.connected"
-        color="success"
-        small
-        class="mr-2"
-      >
-        {{ interface_data?.ssid }}
-      </v-chip>
-      <v-chip
-        v-else
-        color="grey"
-        small
-        class="mr-2"
+      <v-btn
+        v-if="is_hotspot_interface"
+        v-tooltip="'Hotspot settings'"
+        icon
+        @click="show_settings_dialog = true"
       >
-        Disconnected
-      </v-chip>
+        <v-icon>mdi-cog</v-icon>
+      </v-btn>
       <v-btn
         v-if="is_hotspot_interface"
         v-tooltip="'Toggle hotspot'"
@@ -41,6 +33,8 @@
       </v-btn>
     </v-app-bar>
 
+    <wifi-settings-dialog v-model="show_settings_dialog" />
+
     <v-sheet>
       <v-sheet
         max-height="600"
@@ -62,7 +56,7 @@
             :key="key"
             class="available-network"
             :network="network"
-            :connected="interface_data?.ssid === network.ssid && interface_data?.connected"
+            :connected="isNetworkConnected(network)"
             @click="openConnectionDialog(network)"
           />
         </div>
@@ -100,12 +94,13 @@ import Vue from 'vue'
 import Notifier from '@/libs/notifier'
 import wifi from '@/store/wifi'
 import { wifi_service } from '@/types/frontend_services'
-import { Network, WifiInterface } from '@/types/wifi'
+import { Network, WifiInterfaceStatus } from '@/types/wifi'
 import back_axios from '@/utils/api'
 
 import SpinningLogo from '../common/SpinningLogo.vue'
 import InterfaceConnectionDialog from './InterfaceConnectionDialog.vue'
 import WifiNetworkCard from './WifiNetworkCard.vue'
+import WifiSettingsDialog from './WifiSettingsDialog.vue'
 
 const notifier = new Notifier(wifi_service)
 
@@ -115,6 +110,7 @@ export default Vue.extend({
     WifiNetworkCard,
     SpinningLogo,
     InterfaceConnectionDialog,
+    WifiSettingsDialog,
   },
   props: {
     interfaceName: {
@@ -126,13 +122,14 @@ export default Vue.extend({
     return {
       selected_network: null as Network | null,
       show_connection_dialog: false,
+      show_settings_dialog: false,
       hotspot_status_loading: false,
       ssid_filter: undefined as string | undefined,
     }
   },
   computed: {
-    interface_data(): WifiInterface | undefined {
-      return wifi.wifi_interfaces.find((iface) => iface.name === this.interfaceName)
+    connection_status(): WifiInterfaceStatus | undefined {
+      return wifi.interface_status.get(this.interfaceName)
     },
     networks(): Network[] | null {
       const result = wifi.interface_scan_results.get(this.interfaceName)
@@ -162,6 +159,16 @@ export default Vue.extend({
     },
   },
   methods: {
+    isNetworkConnected(network: Network): boolean {
+      const status = this.connection_status
+      if (!status || status.state !== 'connected') return false
+      // Match by BSSID for exact AP identification
+      if (status.bssid && network.bssid) {
+        return status.bssid.toLowerCase() === network.bssid.toLowerCase()
+      }
+      // Fallback to SSID only if BSSID not available
+      return status.ssid === network.ssid
+    },
     openConnectionDialog(network: Network): void {
       this.selected_network = network
       this.show_connection_dialog = true

core/frontend/src/components/wifi/WifiInterfaceTrayMenu.vue

@@ -25,13 +25,6 @@
           >
             {{ wifi_icon }}
           </v-icon>
-          <span
-            v-if="showLabel"
-            class="white--text text-caption ml-1"
-            style="font-size: 0.65rem !important;"
-          >
-            {{ interfaceName }}
-          </span>
         </v-card>
       </template>
       <wifi-interface-manager
@@ -60,10 +53,6 @@ export default Vue.extend({
       type: String,
       required: true,
     },
-    showLabel: {
-      type: Boolean,
-      default: false,
-    },
   },
   computed: {
     interface_data(): WifiInterface | undefined {

core/frontend/src/components/wifi/WifiNetworkCard.vue

@@ -23,11 +23,15 @@
         </span>
       </v-col>
 
-      <v-col :cols="1">
+      <v-col
+        :cols="1"
+        class="d-flex justify-center"
+      >
         <v-chip
-          x-small
+          small
           :color="frequency_band_color"
           class="frequency-chip"
+          label
         >
           {{ frequency_band }}
         </v-chip>
@@ -123,9 +127,11 @@ export default Vue.extend({
     background-color: #2174aa;
   }
   .frequency-chip {
-    font-size: 10px !important;
-    height: 18px !important;
-    padding: 0 6px !important;
+    font-size: 11px !important;
+    height: 20px !important;
+    min-width: 32px !important;
+    padding: 0 4px !important;
     font-weight: 600;
+    justify-content: center;
   }
 </style>

core/frontend/src/components/wifi/WifiTrayMenu.vue

@@ -8,7 +8,6 @@
         v-for="iface in wifi_interfaces"
         :key="iface.name"
         :interface-name="iface.name"
-        :show-label="wifi_interfaces.length > 1"
         class="mr-1"
       />
     </template>

core/frontend/src/components/wifi/WifiUpdater.vue

@@ -10,7 +10,7 @@ import { OneMoreTime } from '@/one-more-time'
 import wifi from '@/store/wifi'
 import { wifi_service } from '@/types/frontend_services'
 import {
-  Network, SavedNetwork, WifiInterfaceList, WifiInterfaceScanResult, WPANetwork,
+  Network, SavedNetwork, WifiInterfaceList, WifiInterfaceScanResult, WifiInterfaceStatus, WPANetwork,
 } from '@/types/wifi'
 import back_axios, { isBackendOffline } from '@/utils/api'
 
@@ -28,6 +28,7 @@ export default Vue.extend({
       // Multi-interface v2 API tasks
       fetch_interfaces_task: new OneMoreTime({ delay: 5000, disposeWith: this }),
       fetch_interface_scans_task: new OneMoreTime({ delay: 20000, disposeWith: this }),
+      fetch_interface_status_task: new OneMoreTime({ delay: 5000, disposeWith: this }),
     }
   },
   mounted() {
@@ -39,6 +40,7 @@ export default Vue.extend({
     // Multi-interface v2 API
     this.fetch_interfaces_task.setAction(this.fetchInterfaces)
     this.fetch_interface_scans_task.setAction(this.fetchInterfaceScans)
+    this.fetch_interface_status_task.setAction(this.fetchInterfaceStatus)
   },
   methods: {
     async fetchNetworkStatus(): Promise<void> {
@@ -206,6 +208,29 @@ export default Vue.extend({
           }
         })
     },
+    async fetchInterfaceStatus(): Promise<void> {
+      // Fetch connection status for all interfaces (includes bssid)
+      await back_axios({
+        method: 'get',
+        url: `${wifi.API_URL_V2}/wifi/status`,
+        timeout: 10000,
+      })
+        .then((response) => {
+          const results = response.data as WifiInterfaceStatus[]
+          for (const status of results) {
+            wifi.setInterfaceStatus({
+              interface_name: status.interface,
+              status,
+            })
+          }
+        })
+        .catch((error) => {
+          // Silently fail - v2 API might not be available
+          if (!isBackendOffline(error)) {
+            console.debug('v2 status API not available:', error.message)
+          }
+        })
+    },
   },
 })
 </script>

core/frontend/src/utils/wifi.ts

@@ -1,21 +1,35 @@
 import { Network } from '@/types/wifi'
 
-export function wifi_strenght_icon(signal_db: number): string {
+export function wifi_strenght_icon(signal: number): string {
   /*eslint-disable */
+  // Signal can be in two formats:
+  // 1. Percentage (0-100) from NetworkManager
+  // 2. dBm (negative values like -30 to -90) from wpa_supplicant
+  //
   // | Signal Strength | TL;DR     |  Description                                                                                                                               |
   // |-----------------|-----------|--------------------------------------------------------------------------------------------------------------------------------------------|
-  // | -30 dBm         | Amazing   | Max achievable signal strength. The client can only be a few feet from the AP to achieve this. Not typical or desirable in the real world. |
-  // | -67 dBm         | Very Good | Minimum signal strength for applications that require very reliable, timely delivery of data packets.                                      |
-  // | -70 dBm         | Okay      | Minimum signal strength for reliable packet delivery.                                                                                      |
-  // | -80 dBm         | Not Good  | Minimum signal strength for basic connectivity. Packet delivery may be unreliable.                                                         |
-  // | -90 dBm         | Unusable  | Approaching or drowning in the noise floor. Any functionality is highly unlikely.                                                           |
+  // | -30 dBm / 100%  | Amazing   | Max achievable signal strength. The client can only be a few feet from the AP to achieve this. Not typical or desirable in the real world. |
+  // | -67 dBm / 75%   | Very Good | Minimum signal strength for applications that require very reliable, timely delivery of data packets.                                      |
+  // | -70 dBm / 50%   | Okay      | Minimum signal strength for reliable packet delivery.                                                                                      |
+  // | -80 dBm / 25%   | Not Good  | Minimum signal strength for basic connectivity. Packet delivery may be unreliable.                                                         |
+  // | -90 dBm / 0%    | Unusable  | Approaching or drowning in the noise floor. Any functionality is highly unlikely.                                                           |
   // Reference: metageek.com/training/resources/wifi-signal-strength-basics.html
   /* eslint-enable */
 
-  if (signal_db >= -30) return 'mdi-wifi-strength-4'
-  if (signal_db >= -67) return 'mdi-wifi-strength-3'
-  if (signal_db >= -70) return 'mdi-wifi-strength-2'
-  if (signal_db >= -80) return 'mdi-wifi-strength-1'
+  // Handle percentage format (0-100, positive values)
+  if (signal >= 0) {
+    if (signal >= 75) return 'mdi-wifi-strength-4'
+    if (signal >= 50) return 'mdi-wifi-strength-3'
+    if (signal >= 25) return 'mdi-wifi-strength-2'
+    if (signal >= 10) return 'mdi-wifi-strength-1'
+    return 'mdi-wifi-strength-alert-outline'
+  }
+
+  // Handle dBm format (negative values)
+  if (signal >= -30) return 'mdi-wifi-strength-4'
+  if (signal >= -67) return 'mdi-wifi-strength-3'
+  if (signal >= -70) return 'mdi-wifi-strength-2'
+  if (signal >= -80) return 'mdi-wifi-strength-1'
   return 'mdi-wifi-strength-alert-outline'
 }