Add vehicle discovery

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, '..'),
 }
@@ -15,10 +17,9 @@ function createWindow(): void {
   mainWindow = new BrowserWindow({
     icon: join(ROOT_PATH.dist, 'pwa-512x512.png'),
     webPreferences: {
-      webSecurity: false,
-      contextIsolation: false,
-      nodeIntegration: true,
-      allowRunningInsecureContent: true,
+      preload: join(ROOT_PATH.dist, 'electron/preload.js'),
+      contextIsolation: true,
+      nodeIntegration: false,
     },
     width,
     height,
@@ -60,6 +61,8 @@ protocol.registerSchemesAsPrivileged([
   },
 ])
 
+setupNetworkService()
+
 app.whenReady().then(createWindow)
 
 app.on('before-quit', () => {

electron/preload.ts

@@ -0,0 +1,5 @@
+import { contextBridge, ipcRenderer } from 'electron'
+
+contextBridge.exposeInMainWorld('electronAPI', {
+  getNetworkInfo: () => ipcRenderer.invoke('get-network-info'),
+})

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)
+}

src/App.vue

@@ -315,22 +315,25 @@
   <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 {
   availableCockpitActions,
   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>

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
    */

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>

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 */
 }