Fix camera setup modal not closing and navigation not working (#1979)

photon-client/src/components/app/photon-sidebar.vue

@@ -3,7 +3,6 @@ import { computed } from "vue";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
-import { PlaceholderCameraSettings } from "@/types/SettingTypes";
 import { useRoute } from "vue-router";
 import { useDisplay } from "vuetify";
 
@@ -18,13 +17,6 @@ const compact = computed<boolean>({
 const { mdAndUp } = useDisplay();
 
 const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
-
-const needsCamerasConfigured = computed<boolean>(() => {
-  return (
-    Object.values(useCameraSettingsStore().cameras).length === 0 ||
-    useCameraSettingsStore().cameras["PlaceHolder Name"] === PlaceholderCameraSettings
-  );
-});
 </script>
 
 <template>
@@ -50,12 +42,18 @@ const needsCamerasConfigured = computed<boolean>(() => {
       <v-list-item
         link
         to="/cameraConfigs"
-        :class="{ cameraicon: needsCamerasConfigured && useRoute().path !== '/cameraConfigs' }"
+        :class="{
+          cameraicon: useCameraSettingsStore().needsCameraConfiguration && useRoute().path !== '/cameraConfigs'
+        }"
       >
         <template #prepend>
-          <v-icon :class="{ 'text-red': needsCamerasConfigured }">mdi-swap-horizontal-bold</v-icon>
+          <v-icon :class="{ 'text-red': useCameraSettingsStore().needsCameraConfiguration }"
+            >mdi-swap-horizontal-bold</v-icon
+          >
         </template>
-        <v-list-item-title :class="{ 'text-red': needsCamerasConfigured }">Camera Matching</v-list-item-title>
+        <v-list-item-title :class="{ 'text-red': useCameraSettingsStore().needsCameraConfiguration }"
+          >Camera Matching</v-list-item-title
+        >
       </v-list-item>
       <v-list-item link to="/docs" prepend-icon="mdi-bookshelf">
         <v-list-item-title>Documentation</v-list-item-title>

photon-client/src/stores/settings/CameraSettingsStore.ts

@@ -26,6 +26,12 @@ export const useCameraSettingsStore = defineStore("cameraSettings", {
     cameras: { [PlaceholderCameraSettings.uniqueName]: PlaceholderCameraSettings }
   }),
   getters: {
+    needsCameraConfiguration(): boolean {
+      return (
+        JSON.stringify(useCameraSettingsStore().cameras[PlaceholderCameraSettings.uniqueName]) ===
+        JSON.stringify(PlaceholderCameraSettings)
+      );
+    },
     // TODO update types to update this value being undefined. This would be a decently large change.
     currentCameraSettings(): UiCameraConfiguration {
       const currentCameraUniqueName = useStateStore().currentCameraUniqueName;

photon-client/src/views/DashboardView.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import CamerasCard from "@/components/dashboard/CamerasCard.vue";
 import CameraAndPipelineSelectCard from "@/components/dashboard/CameraAndPipelineSelectCard.vue";
 import StreamConfigCard from "@/components/dashboard/StreamConfigCard.vue";
 import PipelineConfigCard from "@/components/dashboard/ConfigOptions.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
-import { PlaceholderCameraSettings } from "@/types/SettingTypes";
 
 const cameraViewType = computed<number[]>({
   get: (): number[] => {
@@ -39,14 +38,6 @@ const cameraViewType = computed<number[]>({
   }
 });
 
-// TODO - deduplicate with needsCamerasConfigured
-const warningShown = computed<boolean>(() => {
-  return (
-    Object.values(useCameraSettingsStore().cameras).length === 0 ||
-    PlaceholderCameraSettings.nickname === useCameraSettingsStore().currentCameraName
-  );
-});
-
 const arducamWarningShown = computed<boolean>(() => {
   return Object.values(useCameraSettingsStore().cameras).some(
     (c) =>
@@ -58,6 +49,8 @@ const arducamWarningShown = computed<boolean>(() => {
       )
   );
 });
+
+const showCameraSetupDialog = ref(useCameraSettingsStore().needsCameraConfiguration);
 </script>
 
 <template>
@@ -87,11 +80,17 @@ const arducamWarningShown = computed<boolean>(() => {
     <PipelineConfigCard />
 
     <!-- TODO - not sure this belongs here -->
-    <v-dialog v-if="warningShown" v-model="warningShown" :persistent="false" max-width="800" dark>
+    <v-dialog
+      v-if="useCameraSettingsStore().needsCameraConfiguration"
+      v-model="showCameraSetupDialog"
+      max-width="800"
+      dark
+    >
       <v-card flat color="primary">
         <v-card-title>Setup some cameras to get started!</v-card-title>
         <v-card-text>
-          No cameras activated - head to the <a href="#/cameraConfigs">Camera matching tab</a> to set some up!
+          No cameras activated - head to the <router-link to="/cameraConfigs">Camera matching tab</router-link> to set
+          some up!
         </v-card-text>
       </v-card>
     </v-dialog>