From 75b628ccfe6d1eddfd2fc8beedfc12b2f360f4bc Mon Sep 17 00:00:00 2001
From: Rafael Araujo Lehmkuhl <rafael.lehmkuhl93@gmail.com>
Date: Fri, 22 Nov 2024 13:26:42 -0300
Subject: [PATCH] general: Add vehicle discovery system (electron-only)

---
 electron/main.ts                          |   4 +
 electron/preload.ts                       |   5 +
 electron/services/network.ts              |  39 ++++++
 src/App.vue                               |  18 ++-
 src/components/InteractionDialog.vue      |   2 +-
 src/components/VehicleDiscoveryDialog.vue | 150 ++++++++++++++++++++++
 src/libs/cosmos.ts                        |  10 ++
 src/libs/electron/vehicle-discovery.ts    | 127 ++++++++++++++++++
 src/views/ConfigurationGeneralView.vue    |  23 +++-
 9 files changed, 369 insertions(+), 9 deletions(-)
 create mode 100644 electron/services/network.ts
 create mode 100644 src/components/VehicleDiscoveryDialog.vue
 create mode 100644 src/libs/electron/vehicle-discovery.ts

diff --git a/electron/main.ts b/electron/main.ts
index b560ea0f6..abe2a48d2 100644
--- a/electron/main.ts
+++ b/electron/main.ts
@@ -1,6 +1,8 @@
 import { app, BrowserWindow, protocol, screen } from 'electron'
 import { join } from 'path'
 
+import { setupNetworkService } from './services/network'
+
 export const ROOT_PATH = {
   dist: join(__dirname, '..'),
 }
@@ -59,6 +61,8 @@ protocol.registerSchemesAsPrivileged([
   },
 ])
 
+setupNetworkService()
+
 app.whenReady().then(createWindow)
 
 app.on('before-quit', () => {
diff --git a/electron/preload.ts b/electron/preload.ts
index e69de29bb..bfdd3fe8c 100644
--- a/electron/preload.ts
+++ b/electron/preload.ts
@@ -0,0 +1,5 @@
+import { contextBridge, ipcRenderer } from 'electron'
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  getNetworkInfo: () => ipcRenderer.invoke('get-network-info'),
+})
diff --git a/electron/services/network.ts b/electron/services/network.ts
new file mode 100644
index 000000000..991b0f60f
--- /dev/null
+++ b/electron/services/network.ts
@@ -0,0 +1,39 @@
+import { ipcMain } from 'electron'
+import { networkInterfaces } from 'os'
+
+/**
+ * Information about the network
+ */
+interface NetworkInfo {
+  /**
+   * The subnet of the local machine
+   */
+  subnet: string
+}
+
+/**
+ * Get the network information
+ * @returns {NetworkInfo} The network information
+ */
+const getNetworkInfo = (): NetworkInfo => {
+  const nets = networkInterfaces()
+
+  for (const name of Object.keys(nets)) {
+    for (const net of nets[name] ?? []) {
+      // Skip over non-IPv4 and internal addresses
+      if (net.family === 'IPv4' && !net.internal) {
+        // Return the subnet (e.g., if IP is 192.168.1.5, return 192.168.1)
+        return { subnet: net.address.split('.').slice(0, 3).join('.') }
+      }
+    }
+  }
+
+  throw new Error('No network interface found.')
+}
+
+/**
+ * Setup the network service
+ */
+export const setupNetworkService = (): void => {
+  ipcMain.handle('get-network-info', getNetworkInfo)
+}
diff --git a/src/App.vue b/src/App.vue
index fc19580ca..94af043d2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -315,15 +315,17 @@
   <About v-if="showAboutDialog" @update:show-about-dialog="showAboutDialog = $event" />
   <Tutorial :show-tutorial="interfaceStore.isTutorialVisible" />
   <VideoLibraryModal :open-modal="interfaceStore.isVideoLibraryVisible" />
+  <VehicleDiscoveryDialog v-model="showDiscoveryDialog" show-auto-search-option />
 </template>
 
 <script setup lang="ts">
-import { onClickOutside, useDebounceFn, useFullscreen, useWindowSize } from '@vueuse/core'
+import { onClickOutside, useDebounceFn, useFullscreen, useStorage, useWindowSize } from '@vueuse/core'
 import { computed, markRaw, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 
 import GlassModal from '@/components/GlassModal.vue'
 import Tutorial from '@/components/Tutorial.vue'
+import VehicleDiscoveryDialog from '@/components/VehicleDiscoveryDialog.vue'
 import VideoLibraryModal from '@/components/VideoLibraryModal.vue'
 import { useInteractionDialog } from '@/composables/interactionDialog'
 import {
@@ -331,6 +333,7 @@ import {
   registerActionCallback,
   unregisterActionCallback,
 } from '@/libs/joystick/protocols/cockpit-actions'
+import { isElectron } from '@/libs/utils'
 
 import About from './components/About.vue'
 import AltitudeSlider from './components/AltitudeSlider.vue'
@@ -720,6 +723,19 @@ onBeforeUnmount(() => {
 // Dynamic styles
 const currentTopBarHeightPixels = computed(() => `${widgetStore.currentTopBarHeightPixels}px`)
 const currentBottomBarHeightPixels = computed(() => `${widgetStore.currentBottomBarHeightPixels}px`)
+
+const showDiscoveryDialog = ref(false)
+const preventAutoSearch = useStorage('cockpit-prevent-auto-vehicle-discovery-dialog', false)
+
+onMounted(() => {
+  if (!isElectron() || preventAutoSearch.value) return
+
+  // Wait 5 seconds to check if we're connected to a vehicle
+  setTimeout(() => {
+    if (vehicleStore.isVehicleOnline) return
+    showDiscoveryDialog.value = true
+  }, 5000)
+})
 </script>
 
 <style>
diff --git a/src/components/InteractionDialog.vue b/src/components/InteractionDialog.vue
index c5a04ff53..c8b413a8a 100644
--- a/src/components/InteractionDialog.vue
+++ b/src/components/InteractionDialog.vue
@@ -93,7 +93,7 @@ const slots = useSlots()
 /**
  * Interface to an array of buttons for the Interaction Dialog's footer
  */
-interface Action {
+export interface Action {
   /**
    * Button Text
    */
diff --git a/src/components/VehicleDiscoveryDialog.vue b/src/components/VehicleDiscoveryDialog.vue
new file mode 100644
index 000000000..cd09bc93e
--- /dev/null
+++ b/src/components/VehicleDiscoveryDialog.vue
@@ -0,0 +1,150 @@
+<template>
+  <InteractionDialog
+    v-model="isOpen"
+    :title="searching ? 'Searching for vehicles...' : 'Vehicle Discovery'"
+    :actions="dialogActions"
+    :persistent="searching"
+    :variant="'text-only'"
+  >
+    <template #content>
+      <div v-if="props.showAutoSearchOption && preventAutoSearch">
+        <div class="text-sm mb-4">You can still search for vehicles in the general configuration menu.</div>
+      </div>
+      <div v-else class="flex flex-col items-center justify-center gap-4 min-w-[300px] min-h-[100px]">
+        <div v-if="searching" class="flex flex-col items-center gap-2 mb-2">
+          <v-progress-circular class="mb-2" indeterminate />
+          <span>Searching for vehicles in your network...</span>
+        </div>
+
+        <div v-else-if="vehicles.length > 0" class="flex flex-col gap-2 mb-3">
+          <div class="h-4 font-weight-bold mb-5">Vehicles found!</div>
+          <div v-for="vehicle in vehicles" :key="vehicle.address" class="flex items-center gap-2">
+            <v-btn variant="tonal" class="w-full justify-start" @click="selectVehicle(vehicle.address)">
+              {{ vehicle.name }}
+              <span class="text-xs ml-2 opacity-50">({{ vehicle.address }})</span>
+            </v-btn>
+          </div>
+        </div>
+
+        <div v-else-if="searched" class="text-sm">No vehicles found in your network.</div>
+
+        <div v-if="!searching && !searched" class="flex flex-col gap-2 items-center justify-center text-center">
+          <p v-if="props.showAutoSearchOption" class="font-bold">It looks like you're not connected to a vehicle!</p>
+          <p class="max-w-[25rem] mb-2">This tool allows you to locate and connect to vehicles within your network.</p>
+        </div>
+
+        <div v-if="!searching" class="flex justify-center items-center">
+          <v-btn variant="outlined" :disabled="searching" class="mb-5" @click="searchVehicles">
+            {{ searched ? 'Search again' : 'Search for vehicles' }}
+          </v-btn>
+        </div>
+      </div>
+    </template>
+  </InteractionDialog>
+</template>
+
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core'
+import { ref, watch } from 'vue'
+
+import { useSnackbar } from '@/composables/snackbar'
+import vehicleDiscover, { NetworkVehicle } from '@/libs/electron/vehicle-discovery'
+import { useMainVehicleStore } from '@/stores/mainVehicle'
+
+import InteractionDialog, { Action } from './InteractionDialog.vue'
+
+const props = defineProps<{
+  /**
+   *
+   */
+  modelValue: boolean
+  /**
+   *
+   */
+  showAutoSearchOption?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const { showSnackbar } = useSnackbar()
+const mainVehicleStore = useMainVehicleStore()
+const discoveryService = vehicleDiscover
+
+const isOpen = ref(props.modelValue)
+const searching = ref(false)
+const searched = ref(false)
+const vehicles = ref<NetworkVehicle[]>([])
+const preventAutoSearch = useStorage('cockpit-prevent-auto-vehicle-discovery-dialog', false)
+
+const originalActions = [
+  {
+    text: 'Close',
+    action: () => {
+      isOpen.value = false
+    },
+  },
+]
+
+if (props.showAutoSearchOption) {
+  originalActions.unshift({
+    text: "Don't show again",
+    action: () => preventFutureAutoSearchs(),
+  })
+}
+
+const dialogActions = ref<Action[]>(originalActions)
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    isOpen.value = value
+  }
+)
+
+watch(isOpen, (value) => {
+  emit('update:modelValue', value)
+})
+
+const searchVehicles = async (): Promise<void> => {
+  searching.value = true
+  disableButtons()
+  vehicles.value = await discoveryService.findVehicles()
+  searching.value = false
+  enableButtons()
+  searched.value = true
+}
+
+const selectVehicle = (address: string): void => {
+  mainVehicleStore.globalAddress = address
+  isOpen.value = false
+  showSnackbar({ message: 'Vehicle address updated', variant: 'success', duration: 5000 })
+}
+
+const preventFutureAutoSearchs = (): void => {
+  preventAutoSearch.value = true
+  disableButtons()
+  setTimeout(() => {
+    isOpen.value = false
+  }, 5000)
+}
+
+const disableButtons = (): void => {
+  dialogActions.value = originalActions.map((action) => ({ ...action, disabled: true }))
+}
+
+const enableButtons = (): void => {
+  dialogActions.value = originalActions
+}
+
+watch(isOpen, (isNowOpen) => {
+  if (isNowOpen) return
+
+  setTimeout(() => {
+    vehicles.value = []
+    searching.value = false
+    searched.value = false
+  }, 1000)
+})
+</script>
diff --git a/src/libs/cosmos.ts b/src/libs/cosmos.ts
index dc865c944..5463d6d2b 100644
--- a/src/libs/cosmos.ts
+++ b/src/libs/cosmos.ts
@@ -102,6 +102,16 @@ declare global {
       unregisterActionCallback: typeof unregisterActionCallback
       executeActionCallback: typeof executeActionCallback
     }
+    /**
+     * Electron API exposed through preload script
+     */
+    electronAPI?: {
+      /**
+       * Get network information from the main process
+       * @returns Promise containing subnet information
+       */
+      getNetworkInfo: () => Promise<{ subnet: string }>
+    }
   }
   /* eslint-enable jsdoc/require-jsdoc */
 }
diff --git a/src/libs/electron/vehicle-discovery.ts b/src/libs/electron/vehicle-discovery.ts
new file mode 100644
index 000000000..0399eea26
--- /dev/null
+++ b/src/libs/electron/vehicle-discovery.ts
@@ -0,0 +1,127 @@
+import { getStatus } from '../blueos'
+import { isElectron } from '../utils'
+
+/**
+ * A vehicle found on the network
+ */
+export interface NetworkVehicle {
+  /**
+   * The IPV4 address of the vehicle
+   */
+  address: string
+  /**
+   * The name of the vehicle
+   */
+  name: string
+}
+
+/**
+ * A service for discovering vehicles on the network
+ */
+class VehicleDiscover {
+  private static instance: VehicleDiscover
+  private currentSearch: Promise<NetworkVehicle[]> | undefined = undefined
+
+  /**
+   * Get the singleton instance of VehicleDiscover
+   * @returns {VehicleDiscover} The singleton instance
+   */
+  public static getInstance(): VehicleDiscover {
+    if (!VehicleDiscover.instance) {
+      VehicleDiscover.instance = new VehicleDiscover()
+    }
+    return VehicleDiscover.instance
+  }
+
+  /**
+   * Check if a vehicle is online on a given address
+   * @param {string} address The address of the vehicle
+   * @returns {NetworkVehicle | null} The vehicle if it is online, null otherwise
+   */
+  private async checkAddress(address: string): Promise<NetworkVehicle | null> {
+    try {
+      // First check if the vehicle is online
+      const hasRespondingStatusEndpoint = await getStatus(address)
+      if (!hasRespondingStatusEndpoint) {
+        return null
+      }
+
+      // Try to get the vehicle name
+      try {
+        const response = await fetch(`http://${address}/beacon/v1.0/vehicle_name`)
+        if (!response.ok) {
+          return null
+        }
+        const name = await response.text()
+        return { address, name }
+      } catch {
+        // If we can't get the name, it's because it's not a vehicle (or maybe BlueOS's Beacon service is not running)
+        return null
+      }
+    } catch {
+      // If we can't get the status, it's because the vehicle is not online
+      return null
+    }
+  }
+
+  /**
+   * Get the local subnet
+   * @returns {string | null} The local subnet, or null if not running in Electron
+   */
+  private async getLocalSubnet(): Promise<string> {
+    if (!isElectron() || !window.electronAPI?.getNetworkInfo) {
+      const msg = 'For technical reasons, getting information about the local subnet is only available in Electron.'
+      throw new Error(msg)
+    }
+
+    try {
+      const { subnet } = await window.electronAPI.getNetworkInfo()
+      return subnet
+    } catch (error) {
+      throw new Error(`Failed to get information about the local subnet. ${error}`)
+    }
+  }
+
+  /**
+   * Find vehicles on the local network
+   * @returns {NetworkVehicle[]} The vehicles found
+   */
+  public async findVehicles(): Promise<NetworkVehicle[]> {
+    if (!isElectron()) {
+      throw new Error('For technical reasons, finding vehicles is only available in Electron.')
+    }
+
+    if (this.currentSearch !== undefined) {
+      return this.currentSearch
+    }
+
+    const search = async (): Promise<NetworkVehicle[]> => {
+      const subnet = await this.getLocalSubnet()
+
+      if (!subnet) {
+        throw new Error('Failed to get information about the local subnet.')
+      }
+
+      const promises: Promise<NetworkVehicle | null>[] = []
+
+      // Check all IPs in the subnet
+      for (let i = 1; i <= 254; i++) {
+        const address = `${subnet}.${i}`
+        promises.push(this.checkAddress(address))
+      }
+
+      const vehiclesFound = await Promise.all(promises).then((results) => {
+        return results.filter((result): result is NetworkVehicle => result !== null)
+      })
+
+      this.currentSearch = undefined
+
+      return vehiclesFound
+    }
+
+    this.currentSearch = search()
+    return this.currentSearch
+  }
+}
+
+export default VehicleDiscover.getInstance()
diff --git a/src/views/ConfigurationGeneralView.vue b/src/views/ConfigurationGeneralView.vue
index 54c2f8021..029378016 100644
--- a/src/views/ConfigurationGeneralView.vue
+++ b/src/views/ConfigurationGeneralView.vue
@@ -16,7 +16,7 @@
           </template>
           <template #content>
             <div class="flex flex-col w-full items-start">
-              <div class="flex align-center w-full justify-between pl-3 pr-2 mt-1 mb-6">
+              <div class="flex align-center w-full justify-between pr-2 mt-1 mb-6">
                 <div>
                   <span class="mr-2">Current user:</span>
                   <span class="font-semibold text-2xl cursor-pointer" @click="missionStore.changeUsername">{{
@@ -32,12 +32,7 @@
                   @click="missionStore.changeUsername"
                 />
               </div>
-              <v-btn
-                size="x-small"
-                class="bg-[#FFFFFF22] -mt-3 mb-4 ml-4 shadow-2"
-                variant="flat"
-                @click="openTutorial"
-              >
+              <v-btn size="x-small" class="bg-[#FFFFFF22] -mt-3 mb-4 shadow-2" variant="flat" @click="openTutorial">
                 Show tutorial
               </v-btn>
             </div>
@@ -49,6 +44,15 @@
           <template #subtitle>Current address: {{ mainVehicleStore.globalAddress }}</template>
           <template #info>Sets the network address for device communication. E.g: blueos.local</template>
           <template #content>
+            <v-btn
+              v-if="isElectron()"
+              size="x-small"
+              class="bg-[#FFFFFF22] mt-3 mb-2 shadow-2"
+              variant="flat"
+              @click="showDiscoveryDialog = true"
+            >
+              Search for vehicles
+            </v-btn>
             <v-form
               ref="globalAddressForm"
               v-model="globalAddressFormValid"
@@ -279,6 +283,7 @@
       </div>
     </template>
   </BaseConfigurationView>
+  <VehicleDiscoveryDialog v-model="showDiscoveryDialog" />
 </template>
 
 <script setup lang="ts">
@@ -286,9 +291,11 @@ import { onMounted, ref, watch } from 'vue'
 
 import { defaultGlobalAddress } from '@/assets/defaults'
 import ExpansiblePanel from '@/components/ExpansiblePanel.vue'
+import VehicleDiscoveryDialog from '@/components/VehicleDiscoveryDialog.vue'
 import * as Connection from '@/libs/connection/connection'
 import { ConnectionManager } from '@/libs/connection/connection-manager'
 import { isValidNetworkAddress, reloadCockpit } from '@/libs/utils'
+import { isElectron } from '@/libs/utils'
 import * as Protocol from '@/libs/vehicle/protocol/protocol'
 import { useAppInterfaceStore } from '@/stores/appInterface'
 import { useMainVehicleStore } from '@/stores/mainVehicle'
@@ -508,6 +515,8 @@ watch(customRtcConfiguration, () => tryToPrettifyRtcConfig())
 onMounted(() => {
   tryToPrettifyRtcConfig()
 })
+
+const showDiscoveryDialog = ref(false)
 </script>
 <style scoped>
 .uri-input {