Remove camera index in ui (#1677)

With the new camera matching, this is SUPER BAD! Convert to using camera
uuid.

---------

Co-authored-by: Matt <matthew.morley.ca@gmail.com>

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

@@ -20,7 +20,8 @@ const mdAndUp = computed<boolean>(() => getCurrentInstance()?.proxy.$vuetify.bre
 
 const needsCamerasConfigured = computed<boolean>(() => {
   return (
-    useCameraSettingsStore().cameras.length === 0 || useCameraSettingsStore().cameras[0] === PlaceholderCameraSettings
+    Object.values(useCameraSettingsStore().cameras).length === 0 ||
+    useCameraSettingsStore().cameras["PlaceHolder Name"] === PlaceholderCameraSettings
   );
 });
 </script>

photon-client/src/components/cameras/CameraSettingsCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import PvSelect from "@/components/common/pv-select.vue";
+import PvSelect, { type SelectItem } from "@/components/common/pv-select.vue";
 import PvNumberInput from "@/components/common/pv-number-input.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
@@ -121,7 +121,7 @@ const openExportSettingsPrompt = () => {
 const yesDeleteMySettingsText = ref("");
 const deleteThisCamera = () => {
   const payload = {
-    cameraUniqueName: useCameraSettingsStore().cameraUniqueNames[useStateStore().currentCameraIndex]
+    cameraUniqueName: useStateStore().currentCameraUniqueName
   };
 
   axios
@@ -152,6 +152,12 @@ const deleteThisCamera = () => {
     });
   showDeleteCamera.value = false;
 };
+const wrappedCameras = computed<SelectItem[]>(() =>
+  Object.keys(useCameraSettingsStore().cameras).map((cameraUniqueName) => ({
+    name: useCameraSettingsStore().cameras[cameraUniqueName].nickname,
+    value: cameraUniqueName
+  }))
+);
 </script>
 
 <template>
@@ -159,9 +165,9 @@ const deleteThisCamera = () => {
     <v-card-title>Camera Settings</v-card-title>
     <div class="ml-5">
       <pv-select
-        v-model="useStateStore().currentCameraIndex"
+        v-model="useStateStore().currentCameraUniqueName"
         label="Camera"
-        :items="useCameraSettingsStore().cameraNames"
+        :items="wrappedCameras"
         :select-cols="8"
       />
       <pv-number-input
@@ -213,9 +219,7 @@ const deleteThisCamera = () => {
 
     <v-dialog v-model="showDeleteCamera" dark width="1500">
       <v-card dark class="dialog-container pa-6" color="primary" flat>
-        <v-card-title
-          >Delete camera "{{ useCameraSettingsStore().cameraNames[useStateStore().currentCameraIndex] }}"</v-card-title
-        >
+        <v-card-title>Delete camera "{{ useCameraSettingsStore().currentCameraName }}"</v-card-title>
         <v-row class="pl-3 align-center pa-6">
           <v-col cols="12" md="6">
             <span class="mt-3"> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>

photon-client/src/components/common/pv-select.vue

@@ -2,7 +2,7 @@
 import { computed } from "vue";
 import TooltippedLabel from "@/components/common/pv-tooltipped-label.vue";
 
-interface SelectItem {
+export interface SelectItem {
   name: string | number;
   value: string | number;
   disabled?: boolean;
@@ -14,7 +14,7 @@ const props = withDefaults(
     tooltip?: string;
     selectCols?: number;
     // TODO fully update v-model usage in custom components on Vue3 update
-    value: number;
+    value: any;
     disabled?: boolean;
     items: string[] | number[] | SelectItem[];
   }>(),
@@ -25,7 +25,7 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-  (e: "input", value: number): void;
+  (e: "input", value: string): void;
 }>();
 
 const localValue = computed({

photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import PvSelect from "@/components/common/pv-select.vue";
+import PvSelect, { type SelectItem } from "@/components/common/pv-select.vue";
 import { useStateStore } from "@/stores/StateStore";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { WebsocketPipelineType } from "@/types/WebsocketDataTypes";
@@ -9,10 +9,10 @@ import PvInput from "@/components/common/pv-input.vue";
 import { PipelineType } from "@/types/PipelineTypes";
 import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
 
-const changeCurrentCameraIndex = (index: number) => {
-  useCameraSettingsStore().setCurrentCameraIndex(index, true);
+const changeCurrentCameraUniqueName = (cameraUniqueName: string) => {
+  useCameraSettingsStore().setCurrentCameraUniqueName(cameraUniqueName, true);
 
-  switch (useCameraSettingsStore().cameras[index].pipelineSettings.pipelineType) {
+  switch (useCameraSettingsStore().cameras[cameraUniqueName].pipelineSettings.pipelineType) {
     case PipelineType.Reflective:
       pipelineType.value = WebsocketPipelineType.Reflective;
       break;
@@ -86,7 +86,7 @@ const cancelCameraNameEdit = () => {
 };
 
 // Pipeline Name Edit
-const pipelineNamesWrapper = computed<{ name: string; value: number }[]>(() => {
+const pipelineNamesWrapper = computed<SelectItem[]>(() => {
   const pipelineNames = useCameraSettingsStore().pipelineNames.map((name, index) => ({ name: name, value: index }));
 
   if (useCameraSettingsStore().isDriverMode) {
@@ -212,7 +212,7 @@ const duplicateCurrentPipeline = () => {
 
 // Change Props whenever the pipeline settings are changed
 useCameraSettingsStore().$subscribe((mutation, state) => {
-  const currentCameraSettings = state.cameras[useStateStore().currentCameraIndex];
+  const currentCameraSettings = state.cameras[useStateStore().currentCameraUniqueName];
 
   switch (currentCameraSettings.pipelineSettings.pipelineType) {
     case PipelineType.Reflective:
@@ -232,6 +232,12 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
       break;
   }
 });
+const wrappedCameras = computed<SelectItem[]>(() =>
+  Object.keys(useCameraSettingsStore().cameras).map((cameraUniqueName) => ({
+    name: useCameraSettingsStore().cameras[cameraUniqueName].nickname,
+    value: cameraUniqueName
+  }))
+);
 </script>
 
 <template>
@@ -240,10 +246,10 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
       <v-col cols="10" class="pa-0">
         <pv-select
           v-if="!isCameraNameEdit"
-          v-model="useStateStore().currentCameraIndex"
+          v-model="useStateStore().currentCameraUniqueName"
           label="Camera"
-          :items="useCameraSettingsStore().cameraNames"
-          @input="changeCurrentCameraIndex"
+          :items="wrappedCameras"
+          @input="changeCurrentCameraUniqueName"
         />
         <pv-input
           v-else