wip

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

Author: patrickelectric

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

@@ -145,6 +145,10 @@ export default Vue.extend({
       type: Boolean,
       default: false,
     },
+    interfaceName: {
+      type: String,
+      default: null,
+    },
   },
   data() {
     return {
@@ -201,14 +205,18 @@ export default Vue.extend({
     async connectToWifiNetwork(): Promise<void> {
       const credentials: NetworkCredentials = { ssid: this.real_ssid, password: this.password }
       this.connection_status = ConnectionStatus.Connecting
+      const params: Record<string, unknown> = { hidden: this.is_hidden }
+      if (this.interfaceName) {
+        params.interface = this.interfaceName
+      }
       try {
         wifi.setLoading(true)
         await back_axios({
           method: 'post',
           url: `${wifi.API_URL}/connect`,
           timeout: 50000,
           data: credentials,
-          params: { hidden: this.is_hidden },
+          params,
         })
         this.showDialog(false)
         this.connection_status = ConnectionStatus.Succeeded
@@ -225,11 +233,15 @@ export default Vue.extend({
     },
     async removeSavedWifiNetwork(): Promise<void> {
       wifi.setLoading(true)
+      const params: Record<string, unknown> = { ssid: this.network.ssid }
+      if (this.interfaceName) {
+        params.interface = this.interfaceName
+      }
       await back_axios({
         method: 'post',
         url: `${wifi.API_URL}/remove`,
         timeout: 10000,
-        params: { ssid: this.network.ssid },
+        params,
       }).then(() => {
         this.$emit('forget', this.network)
       })

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

@@ -105,6 +105,10 @@ export default Vue.extend({
       type: Boolean,
       default: false,
     },
+    interfaceName: {
+      type: String,
+      default: null,
+    },
   },
   data() {
     return {
@@ -135,14 +139,22 @@ export default Vue.extend({
     async disconnectFromWifiNetwork(): Promise<void> {
       wifi.setLoading(true)
       this.showDialog(false)
+      const params: Record<string, unknown> = {}
+      if (this.interfaceName) {
+        params.interface = this.interfaceName
+      }
       await back_axios({
         method: 'get',
         url: `${wifi.API_URL}/disconnect`,
+        params,
         timeout: 10000,
       })
         .then(() => {
           wifi.setNetworkStatus(null)
           wifi.setCurrentNetwork(null)
+          if (this.interfaceName) {
+            wifi.setInterfaceCurrentNetwork({ interfaceName: this.interfaceName, network: null })
+          }
         })
         .catch((error) => {
           const message = `Could not disconnect from wifi network: ${error.message}.`

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

@@ -114,6 +114,7 @@
       v-if="selected_network"
       v-model="show_connection_dialog"
       :network="selected_network"
+      :interface-name="active_interface"
       @forget="forgetNetwork"
     />
 
@@ -122,6 +123,7 @@
       v-model="show_disconnection_dialog"
       :network="current_network"
       :status="wifi_status"
+      :interface-name="active_interface"
     />
 
     <wifi-settings-dialog v-model="show_settings_menu" />
@@ -182,6 +184,10 @@ export default Vue.extend({
       type: Boolean,
       default: true,
     },
+    interfaceName: {
+      type: String,
+      default: null,
+    },
   },
   data() {
     return {
@@ -196,18 +202,52 @@ export default Vue.extend({
     }
   },
   computed: {
+    active_interface(): string | null {
+      return this.interfaceName || wifi.current_interface
+    },
     wifi_is_loading(): boolean {
+      if (this.active_interface) {
+        const data = wifi.interface_data[this.active_interface]
+        return !data || data.available_networks === null
+      }
       return wifi.is_loading
     },
     wifi_status(): WifiStatus | null {
+      if (this.active_interface) {
+        return wifi.interface_data[this.active_interface]?.network_status ?? null
+      }
       return wifi.network_status
     },
     current_network(): Network | null {
-      this.$emit('current-network', wifi.current_network)
-      return wifi.current_network
+      let network: Network | null = null
+      if (this.active_interface) {
+        network = wifi.interface_data[this.active_interface]?.current_network ?? null
+      } else {
+        network = wifi.current_network
+      }
+      this.$emit('current-network', network)
+      return network
+    },
+    interface_available_networks(): Network[] | null {
+      if (this.active_interface) {
+        return wifi.interface_data[this.active_interface]?.available_networks ?? null
+      }
+      return wifi.available_networks
+    },
+    interface_connectable_networks(): Network[] | null {
+      const networks = this.interface_available_networks
+      if (networks === null) {
+        return null
+      }
+      const currentSsid = this.current_network?.ssid
+      return networks.filter((network: Network) => network.ssid !== currentSsid)
     },
     connectable_networks(): Network[] | undefined {
-      return uniqBy(wifi.connectable_networks, 'ssid')
+      const networks = this.interface_connectable_networks
+      if (networks === null) {
+        return undefined
+      }
+      return uniqBy(networks, 'ssid')
         // Move known networks to the top
         .sort((a: Network, b: Network) => Number(b.saved) - Number(a.saved))
     },
@@ -283,10 +323,14 @@ export default Vue.extend({
     },
     async toggleHotspot(): Promise<void> {
       this.hotspot_status_loading = true
+      const params: Record<string, unknown> = { enable: !this.hotspot_status }
+      if (this.active_interface) {
+        params.interface = this.active_interface
+      }
       await back_axios({
         method: 'post',
         url: `${wifi.API_URL}/hotspot`,
-        params: { enable: !this.hotspot_status },
+        params,
         timeout: 20000,
       })
         .then(() => {

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

@@ -1,7 +1,55 @@
 <template>
-  <div>
+  <div class="d-flex">
     <wifi-updater v-if="!wifi_service_disabled" />
     <v-menu
+      v-for="iface in displayed_interfaces"
+      :key="iface.name"
+      :close-on-content-click="false"
+      nudge-left="500"
+      nudge-bottom="25"
+    >
+      <template
+        #activator="{ on, attrs }"
+      >
+        <v-card
+          :id="`wifi-tray-menu-button-${iface.name}`"
+          class="px-1"
+          elevation="0"
+          color="transparent"
+          v-bind="attrs"
+          v-on="on"
+        >
+          <v-icon
+            v-tooltip="{
+              content: get_interface_tooltip(iface.name),
+              bottom: true,
+              offset: 5,
+            }"
+            color="white"
+          >
+            {{ get_interface_icon(iface.name) }}
+          </v-icon>
+        </v-card>
+      </template>
+      <wifi-manager
+        v-if="!wifi_service_disabled"
+        :interface-name="iface.name"
+      />
+      <v-card
+        v-else
+        elevation="1"
+        width="500"
+      >
+        <v-card-title class="text-subtitle-1 pa-4">
+          Wifi is disabled via environment variable. <br>
+          Re-enable it by removing "wifi" from <code>BLUEOS_DISABLE_SERVICES</code>
+          in <code>/root/.config/bootstrap/startup.json</code>
+        </v-card-title>
+      </v-card>
+    </v-menu>
+    <!-- Fallback icon when no interfaces are available yet -->
+    <v-menu
+      v-if="displayed_interfaces.length === 0"
       :close-on-content-click="false"
       nudge-left="500"
       nudge-bottom="25"
@@ -19,7 +67,7 @@
         >
           <v-icon
             v-tooltip="{
-              content: wifi_service_disabled ? 'Wifi is disabled' : undefined,
+              content: wifi_service_disabled ? 'Wifi is disabled' : 'WiFi',
               bottom: true,
               offset: 5,
             }"
@@ -50,6 +98,7 @@ import Vue from 'vue'
 
 import commander from '@/store/commander'
 import wifi from '@/store/wifi'
+import { InterfaceStatus, WlanInterface } from '@/types/wifi'
 import { wifi_strenght_icon } from '@/utils/wifi'
 
 import WifiManager from './WifiManager.vue'
@@ -70,6 +119,18 @@ export default Vue.extend({
     wifi_service_disabled(): boolean {
       return this.disabled_services?.includes('wifi') ?? false
     },
+    available_interfaces(): WlanInterface[] {
+      return wifi.available_interfaces
+    },
+    interface_statuses(): InterfaceStatus[] {
+      return wifi.interface_statuses
+    },
+    displayed_interfaces(): WlanInterface[] {
+      if (this.wifi_service_disabled) {
+        return []
+      }
+      return this.available_interfaces
+    },
     wifi_icon(): string {
       if (this.wifi_service_disabled) {
         return 'mdi-wifi-cancel'
@@ -85,9 +146,37 @@ 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[]
     })
   },
+  methods: {
+    get_interface_status(interfaceName: string): InterfaceStatus | undefined {
+      return this.interface_statuses.find((status) => status.interface === interfaceName)
+    },
+    get_interface_icon(interfaceName: string): string {
+      const status = this.get_interface_status(interfaceName)
+      if (!status) {
+        return 'mdi-wifi-sync'
+      }
+      if (!status.connected) {
+        return 'mdi-wifi-off'
+      }
+      if (status.signal !== null) {
+        return wifi_strenght_icon(status.signal)
+      }
+      return 'mdi-wifi'
+    },
+    get_interface_tooltip(interfaceName: string): string {
+      const status = this.get_interface_status(interfaceName)
+      if (!status) {
+        return `${interfaceName}: Scanning...`
+      }
+      if (!status.connected) {
+        return `${interfaceName}: Disconnected`
+      }
+      return `${interfaceName}: ${status.ssid || 'Connected'}`
+    },
+  },
 })
 </script>