Store: App-interface: Add dialog queue

Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com> App: Implement startup dialogs queue Signed-off-by: Arturo Manzoli <arturomanzoli@gmail.com>
bluerobotics · Jan 17, 2025 · 2855924 · 2855924
1 parent 45dc51e
commit 2855924
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 10 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -313,10 +313,12 @@
     </v-main>
   </v-app>
   <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 />
-  <UpdateNotification v-if="isElectron()" />
+
+  <!-- Startup dialogs queue -->
+  <div v-if="activeDialog">
+    <component :is="activeDialog.component" v-bind="activeDialog.props" @close="interfaceStore.openNextDialogOnQueue" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -375,6 +377,8 @@ const isSlidingOut = ref(false)
 const simplifiedMainMenu = ref(false)
 const windowHeight = ref(window.innerHeight)
 
+const activeDialog = computed(() => interfaceStore.activeDialog)
+
 const configMenu = [
   {
     icon: 'mdi-view-dashboard-variant',
@@ -726,17 +730,43 @@ onBeforeUnmount(() => {
 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(() => {
+onMounted(async () => {
+  interfaceStore.enqueueDialog({
+    id: 'Tutorial',
+    component: Tutorial,
+    props: {},
+  })
+  await runElectronStartup()
+  interfaceStore.openNextDialogOnQueue()
+})
+
+const runElectronStartup = async (): Promise<void> => {
+  if (isElectron()) {
+    interfaceStore.enqueueDialog({
+      id: 'UpdateNotification',
+      component: UpdateNotification,
+      props: {},
+    })
+    // Wait 5 seconds to check if we're connected to a vehicle
+    setTimeout(() => {
+      if (vehicleStore.isVehicleOnline) return
+      interfaceStore.enqueueDialog({
+        id: 'VehicleDiscoveryDialog',
+        component: VehicleDiscoveryDialog,
+        props: {},
+      })
+      if (interfaceStore.dialogQueue[0].id === 'VehicleDiscoveryDialog') {
+        interfaceStore.openNextDialogOnQueue()
+      }
+    }, 5000)
+  }
   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)
+onBeforeUnmount(() => {
+  interfaceStore.dialogQueue = []
 })
 </script>
 

diff --git a/src/stores/appInterface.ts b/src/stores/appInterface.ts
@@ -4,6 +4,7 @@ import { watch } from 'vue'
 
 import { defaultDisplayUnitPreferences } from '@/assets/defaults'
 import { useBlueOsStorage } from '@/composables/settingsSyncer'
+import { DialogOnQueue } from '@/types/ui'
 
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 
@@ -28,6 +29,8 @@ export const useAppInterfaceStore = defineStore('responsive', {
     isGlassModalAlwaysOnTop: false,
     isTutorialVisible: false,
     configPanelVisible: false,
+    dialogQueue: [] as DialogOnQueue[],
+    activeDialog: undefined as DialogOnQueue | undefined,
   }),
   actions: {
     updateWidth() {
@@ -41,6 +44,14 @@ export const useAppInterfaceStore = defineStore('responsive', {
         .padStart(2, '0')
       this.UIGlassEffect.bgColor = `#${hex}${alphaHex}`
     },
+    enqueueDialog(dialog: DialogOnQueue) {
+      this.dialogQueue.push(dialog)
+    },
+    openNextDialogOnQueue() {
+      if (this.dialogQueue.length > 0) {
+        this.activeDialog = this.dialogQueue.shift()
+      }
+    },
   },
   getters: {
     isXs: (state) => state.width < 720, // Extra small devices (5-6" mobile screens in landscape)

diff --git a/src/types/ui.ts b/src/types/ui.ts
@@ -0,0 +1,14 @@
+export type DialogOnQueue = {
+  /**
+   * Dialog Id
+   */
+  id: string
+  /**
+   * Component to be rendered
+   */
+  component: any
+  /**
+   * Props to be passed to the component
+   */
+  props?: Record<string, any>
+}