From aa0918f7fdc14504ed8b92fac510a5d8ea7ddd15 Mon Sep 17 00:00:00 2001
From: Willian Galvani <williangalvani@gmail.com>
Date: Sat, 30 Aug 2025 16:14:48 -0300
Subject: [PATCH] frontend: detect and list other vehicles on blueos

---
 .../src/components/app/VehicleBanner.vue      |  26 ++-
 .../src/components/app/VehiclePicker.vue      | 176 ++++++++++++++++++
 core/frontend/src/store/beacon.ts             |  97 ++++++++++
 core/services/beacon/main.py                  | 113 ++++++++++-
 4 files changed, 401 insertions(+), 11 deletions(-)
 create mode 100644 core/frontend/src/components/app/VehiclePicker.vue

diff --git a/core/frontend/src/components/app/VehicleBanner.vue b/core/frontend/src/components/app/VehicleBanner.vue
index 0a6bb6500f..d6efe7a74d 100755
--- a/core/frontend/src/components/app/VehicleBanner.vue
+++ b/core/frontend/src/components/app/VehicleBanner.vue
@@ -18,18 +18,19 @@
         >
           ({{ system_id }})
         </span>
+      </p>
+      <div class="action-buttons-container">
         <v-btn
-          class="mx-2 edit-icon"
+          class="mx-1"
           fab
           dark
           x-small
           @click="openDialog"
         >
-          <v-icon>
-            mdi-pencil
-          </v-icon>
+          <v-icon>mdi-pencil</v-icon>
         </v-btn>
-      </p>
+        <VehiclePicker />
+      </div>
       <v-spacer />
       <image-picker
         size="35px"
@@ -74,11 +75,13 @@ import bag from '@/store/bag'
 import beacon from '@/store/beacon'
 
 import ImagePicker from './ImagePicker.vue'
+import VehiclePicker from './VehiclePicker.vue'
 
 export default Vue.extend({
   name: 'VehicleBanner',
   components: {
     ImagePicker,
+    VehiclePicker,
   },
   data() {
     return {
@@ -166,7 +169,7 @@ export default Vue.extend({
 })
 </script>
 <style scoped>
-  #vehicle-name:hover .edit-icon{
+  #vehicle-banner:hover .action-buttons-container{
     display: inline-flex;
   }
 
@@ -181,10 +184,13 @@ export default Vue.extend({
     margin-bottom: 0 !important;
     position: relative;
   }
-  .edit-icon {
+
+  .action-buttons-container {
     display: none;
-    right: 0;
-    bottom: 0;
-    position: absolute;
+    position: fixed;
+    right: 70px;
+    z-index: 10;
+    align-items: center;
+    gap: 4px;
   }
 </style>
diff --git a/core/frontend/src/components/app/VehiclePicker.vue b/core/frontend/src/components/app/VehiclePicker.vue
new file mode 100644
index 0000000000..2de6cf1092
--- /dev/null
+++ b/core/frontend/src/components/app/VehiclePicker.vue
@@ -0,0 +1,176 @@
+<template>
+  <div class="vehicle-picker">
+    <v-btn
+      :loading="loading"
+      class="mx-1"
+      fab
+      dark
+      x-small
+      @click="toggleDropdown"
+    >
+      <v-icon>{{ expanded ? 'mdi-chevron-up' : 'mdi-chevron-down' }}</v-icon>
+    </v-btn>
+
+    <v-menu
+      v-model="expanded"
+      :close-on-content-click="false"
+      offset-y
+      min-width="150"
+    >
+      <template #activator="{ }" />
+
+      <v-card>
+        <v-card-title class="subtitle-2 pa-2">
+          Other Vehicles detected on your network
+          <v-spacer />
+          <v-btn
+            icon
+            x-small
+            @click="refreshServices"
+          >
+            <v-icon small>
+              mdi-refresh
+            </v-icon>
+          </v-btn>
+        </v-card-title>
+
+        <v-divider />
+
+        <v-list v-if="availableVehicles.length > 0" dense>
+          <v-list-item
+            v-for="vehicle in availableVehicles"
+            :key="vehicle.hostname"
+          >
+            <v-list-item-avatar>
+              <v-img
+                v-if="vehicle.imagePath"
+                :src="vehicle.imagePath"
+                :alt="vehicle.hostname"
+                aspect-ratio="1"
+                class="vehicle-image"
+              >
+                <template #error>
+                  <v-icon color="primary">
+                    mdi-submarine
+                  </v-icon>
+                </template>
+              </v-img>
+              <v-icon v-else color="primary">
+                mdi-submarine
+              </v-icon>
+            </v-list-item-avatar>
+            <v-list-item-content>
+              <v-list-item-title>
+                <span class="vehicle-name">
+                  {{ vehicle.hostname }}
+                </span>
+                {{ allMyIps.includes(vehicle.ips[0]) ? '(This Vehicle)' : '' }}
+              </v-list-item-title>
+              <v-list-item-title v-for="ip in vehicle.ips" :key="ip" class="caption" @click="navigateToVehicle(ip)">
+                {{ ip }}
+                <v-icon x-small color="primary">
+                  mdi-launch
+                </v-icon>
+              </v-list-item-title>
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+
+        <v-card-text v-else-if="!loading" class="text-center text--secondary">
+          <div v-if="error">
+            <v-icon color="error">
+              mdi-alert-circle
+            </v-icon>
+            <div class="caption">
+              {{ error }}
+            </div>
+          </div>
+          <div v-else>
+            No vehicles discovered
+          </div>
+        </v-card-text>
+
+        <v-card-text v-else class="text-center">
+          <v-progress-circular
+            indeterminate
+            size="24"
+            width="2"
+          />
+          <div class="caption mt-2">
+            Discovering vehicles...
+          </div>
+        </v-card-text>
+      </v-card>
+    </v-menu>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import beacon from '@/store/beacon'
+import system_information from '@/store/system-information'
+
+export default Vue.extend({
+  name: 'VehiclePicker',
+  data() {
+    return {
+      expanded: false,
+    }
+  },
+  computed: {
+    loading(): boolean {
+      return beacon.vehicles_loading
+    },
+    error(): string | null {
+      return beacon.vehicles_error
+    },
+    availableVehicles() {
+      return beacon.available_vehicles
+    },
+    allMyIps(): string[] {
+      return system_information.system?.network.flatMap((network) => network.ips.map((ip) => ip.split('/')[0])) || []
+    },
+  },
+  methods: {
+    toggleDropdown() {
+      this.expanded = !this.expanded
+      if (this.expanded && this.availableVehicles.length === 0) {
+        beacon.fetchDiscoveredServices()
+      }
+    },
+
+    async refreshServices() {
+      await beacon.fetchDiscoveredServices()
+    },
+
+    navigateToVehicle(ip: string) {
+      window.open(`http://${ip}`, '_blank')
+      this.expanded = false
+    },
+  },
+})
+</script>
+
+<style scoped>
+.vehicle-picker {
+  display: inline-block;
+}
+
+.caption:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+  cursor: pointer;
+}
+
+.vehicle-image {
+  border-radius: 4px;
+}
+
+.v-list-item:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+.vehicle-name {
+  font-size: 1.2rem;
+}
+</style>
diff --git a/core/frontend/src/store/beacon.ts b/core/frontend/src/store/beacon.ts
index b3639f54cb..3f2e4f46ed 100644
--- a/core/frontend/src/store/beacon.ts
+++ b/core/frontend/src/store/beacon.ts
@@ -1,3 +1,4 @@
+import axios from 'axios'
 import {
   Action,
   getModule, Module, Mutation, VuexModule,
@@ -10,6 +11,16 @@ import { Domain } from '@/types/beacon'
 import { beacon_service } from '@/types/frontend_services'
 import back_axios, { isBackendOffline } from '@/utils/api'
 
+interface DiscoveredServices {
+  [ip: string]: string[]
+}
+
+export interface Vehicle {
+  ips: string[]
+  hostname: string
+  imagePath?: string
+}
+
 const notifier = new Notifier(beacon_service)
 
 let prefetched_domains = false
@@ -37,6 +48,12 @@ class BeaconStore extends VuexModule {
 
   vehicle_name = ''
 
+  available_vehicles: Vehicle[] = []
+
+  vehicles_loading = false
+
+  vehicles_error: string | null = null
+
   fetchAvailableDomainsTask = new OneMoreTime(
     { delay: 5000 },
   )
@@ -90,6 +107,21 @@ class BeaconStore extends VuexModule {
     this.listeners_count -= 1
   }
 
+  @Mutation
+  setAvailableVehicles(vehicles: Vehicle[]): void {
+    this.available_vehicles = vehicles
+  }
+
+  @Mutation
+  setVehiclesLoading(loading: boolean): void {
+    this.vehicles_loading = loading
+  }
+
+  @Mutation
+  setVehiclesError(error: string | null): void {
+    this.vehicles_error = error
+  }
+
   @Action
   async setHostname(hostname: string): Promise<boolean> {
     hostname = hostname.trim().toLowerCase()
@@ -234,6 +266,71 @@ class BeaconStore extends VuexModule {
     }
   }
 
+  @Action
+  async fetchDiscoveredServices(): Promise<void> {
+    this.setVehiclesLoading(true)
+    this.setVehiclesError(null)
+    this.setAvailableVehicles([])
+
+    try {
+      const response = await back_axios({
+        method: 'get',
+        url: `${this.API_URL}/discovered_services`,
+        timeout: 10000,
+      })
+
+      const discoveredServices: DiscoveredServices = response.data
+      const ips = Object.keys(discoveredServices)
+
+      if (ips.length === 0) {
+        this.setVehiclesError('No vehicles discovered')
+        this.setVehiclesLoading(false)
+        return
+      }
+
+      const vehicles: Vehicle[] = []
+
+      await Promise.all(ips.map(async (ip) => {
+        try {
+          const hostnameResponse = await axios.get(`http://${ip}/beacon/v1.0/hostname`, {
+            timeout: 5000,
+          })
+
+          let imagePath: string | undefined
+          try {
+            const imageResponse = await axios.get(`http://${ip}/bag/v1.0/get/vehicle.image_path`, {
+              timeout: 3000,
+            })
+            imagePath = `http://${ip}${imageResponse.data.url}`
+          } catch {
+            // Image not available, use fallback
+          }
+
+          vehicles.push({
+            ips: [ip],
+            hostname: hostnameResponse.data,
+            imagePath,
+          })
+        } catch (error) {
+          console.warn(`Failed to fetch hostname for ${ip}:`, error)
+        }
+      }))
+
+      vehicles.sort((a, b) => a.hostname.localeCompare(b.hostname))
+      this.setAvailableVehicles(vehicles)
+
+      if (vehicles.length === 0) {
+        this.setVehiclesError('No accessible vehicles found')
+      }
+    } catch (error) {
+      console.error('Failed to fetch discovered services:', error)
+      this.setVehiclesError('Failed to discover vehicles')
+      this.setAvailableVehicles([])
+    } finally {
+      this.setVehiclesLoading(false)
+    }
+  }
+
   @Action
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   async registerBeaconListener(object: any): Promise<void> {
diff --git a/core/services/beacon/main.py b/core/services/beacon/main.py
index ee4447466d..ed923d6bae 100755
--- a/core/services/beacon/main.py
+++ b/core/services/beacon/main.py
@@ -17,7 +17,7 @@
 from fastapi_versioning import VersionedFastAPI, version
 from loguru import logger
 from uvicorn import Config, Server
-from zeroconf import IPVersion
+from zeroconf import IPVersion, ServiceBrowser, ServiceListener, Zeroconf
 from zeroconf.asyncio import AsyncServiceInfo, AsyncZeroconf
 
 from settings import ServiceTypes, SettingsV4
@@ -26,6 +26,46 @@
 SERVICE_NAME = "beacon"
 
 
+class BeaconServiceListener(ServiceListener):
+    """
+    Custom ServiceListener for the Beacon service to discover and track mDNS services
+    """
+
+    def __init__(self) -> None:
+        self.discovered_services: Dict[str, str] = {}
+
+    def update_service(self, zc: Zeroconf, type_: str, name: str) -> None:
+        logger.info(f"Service {name} updated")
+        self._process_service(zc, type_, name)
+
+    def remove_service(self, zc: Zeroconf, type_: str, name: str) -> None:
+        logger.info(f"Service {name} removed")
+        if name in self.discovered_services:
+            del self.discovered_services[name]
+
+    def add_service(self, zc: Zeroconf, type_: str, name: str) -> None:
+        logger.info(f"Service {name} added")
+        self._process_service(zc, type_, name)
+
+    def _process_service(self, zc: Zeroconf, type_: str, name: str) -> None:
+        """Process a service and extract its IP address"""
+        try:
+            info = zc.get_service_info(type_, name)
+            if info and info.addresses:
+                # Convert the first IP address from bytes to string
+                ip_address = socket.inet_ntoa(info.addresses[0])
+                self.discovered_services[name] = ip_address
+                logger.info(f"Service {name} at {ip_address}")
+            else:
+                logger.warning(f"No address info available for service {name}")
+        except Exception as e:
+            logger.warning(f"Error processing service {name}: {e}")
+
+    def get_discovered_services(self) -> Dict[str, str]:
+        """Return a copy of the discovered services dictionary"""
+        return self.discovered_services.copy()
+
+
 class AsyncRunner:
     def __init__(self, ip_version: IPVersion, interface: str, interface_name: str) -> None:
         self.ip_version = ip_version
@@ -78,6 +118,11 @@ class Beacon:
 
     def __init__(self) -> None:
         self.runners: Dict[str, AsyncRunner] = {}
+        # Initialize zeroconf listener components
+        self.zeroconf: Optional[Zeroconf] = None
+        self.service_listener: Optional[BeaconServiceListener] = None
+        self.service_browser: Optional[ServiceBrowser] = None
+
         try:
             self.manager = Manager(SERVICE_NAME, SettingsV4)
         except Exception as e:
@@ -228,10 +273,50 @@ def create_user_runners(self) -> Dict[str, AsyncRunner]:
                     runners[f"{interface_name}-{domain}-{ip}"] = runner
         return runners
 
+    def start_zeroconf_listener(self) -> None:
+        """
+        Start the zeroconf listener to discover services on the network
+        """
+        if self.zeroconf is None:
+            try:
+                self.zeroconf = Zeroconf()
+                self.service_listener = BeaconServiceListener()
+                self.service_browser = ServiceBrowser(self.zeroconf, "_http._tcp.local.", self.service_listener)
+                logger.info("Zeroconf listener started, discovering _http._tcp.local. services")
+            except Exception as e:
+                logger.warning(f"Failed to start zeroconf listener: {e}")
+
+    def stop_zeroconf_listener(self) -> None:
+        """
+        Stop the zeroconf listener and clean up resources
+        """
+        if self.zeroconf is not None:
+            try:
+                if self.service_browser is not None:
+                    self.service_browser.cancel()
+                    self.service_browser = None
+                self.zeroconf.close()
+                self.zeroconf = None
+                self.service_listener = None
+                logger.info("Zeroconf listener stopped")
+            except Exception as e:
+                logger.warning(f"Error stopping zeroconf listener: {e}")
+
+    def get_discovered_services(self) -> Dict[str, str]:
+        """
+        Get the dictionary of discovered services (service_name: ip_address)
+        """
+        if self.service_listener is not None:
+            return self.service_listener.get_discovered_services()
+        return {}
+
     async def run(self) -> None:
         """
         This is the "main loop" from Beacon.
         """
+        # Start the zeroconf listener when the beacon starts running
+        self.start_zeroconf_listener()
+
         while True:
             # re-load settings in case something changed
             self.manager.load()
@@ -263,6 +348,8 @@ async def run(self) -> None:
 
     async def stop(self) -> None:
         await asyncio.gather(*[runner.unregister_services() for runner in self.runners.values()])
+        # Stop the zeroconf listener when the beacon stops
+        self.stop_zeroconf_listener()
 
 
 logging.basicConfig(level=logging.DEBUG)
@@ -319,6 +406,30 @@ def get_ip(request: Request) -> Any:
         return IpInfo(client_ip=request.scope["client"][0], interface_ip=request.scope["server"][0])
 
 
+@app.get("/discovered_services", response_model=Dict[str, List[str]], summary="Discovered mDNS services")
+@version(1, 0)
+def get_discovered_services() -> Any:
+    """Returns a dictionary with IP addresses as keys and lists of service names as values"""
+    services = {
+        service.replace("_http._tcp.local.", ""): ip for service, ip in beacon.get_discovered_services().items()
+    }
+
+    # Group services by IP address
+    ip_to_services: Dict[str, List[str]] = {}
+
+    for service_name, ip in services.items():
+        # Remove trailing dot if present
+        clean_name = service_name.rstrip(".")
+
+        # Initialize the IP list if it doesn't exist
+        if ip not in ip_to_services:
+            ip_to_services[ip] = []
+
+        ip_to_services[ip].append(clean_name)
+
+    return ip_to_services
+
+
 app = VersionedFastAPI(app, version="1.0.0", prefix_format="/v{major}.{minor}", enable_latest=True)