[photon-client] Fix camera and pipeline name editing (#969)

closes #965

    Had to disable the eslint rule that was causing the bug.
    Disallows disabling driver mode when there are no other pipelines to swap to
    Also adds icons for saving and canceling name edits
    Adds the option to create a new pipeline in driver mode if there are no other pipelines
    Adds disable prop to the driver mode switch on the camera settings page

photon-client/.eslintrc.json

@@ -15,6 +15,7 @@
     "object-curly-spacing": ["error", "always"],
     "quote-props": ["error", "as-needed"],
     "no-case-declarations": "off",
-    "vue/require-default-prop": "off"
+    "vue/require-default-prop": "off",
+    "vue/v-on-event-hyphenation": "off"
   }
 }

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

@@ -68,7 +68,7 @@ const fpsTooLow = computed<boolean>(() => {
       <div>
         <v-switch
           v-model="driverMode"
-          :disabled="useCameraSettingsStore().isCalibrationMode"
+          :disabled="useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().pipelineNames.length === 0"
           label="Driver Mode"
           style="margin-left: auto"
           color="accent"

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

@@ -2,13 +2,15 @@
 const props = withDefaults(
   defineProps<{
     iconName: string;
+    disabled?: boolean;
     color?: string;
     tooltip?: string;
     right?: boolean;
     hover?: boolean;
   }>(),
   {
     right: false,
+    disabled: false,
     hover: false
   }
 );
@@ -24,7 +26,14 @@ const hoverClass = props.hover ? "hover" : "";
   <div>
     <v-tooltip :right="right" :bottom="!right" nudge-right="10" :disabled="tooltip === undefined">
       <template #activator="{ on, attrs }">
-        <v-icon :class="hoverClass" :color="color" v-bind="attrs" v-on="on" @click="$emit('click')">
+        <v-icon
+          :class="hoverClass"
+          :color="color"
+          v-bind="attrs"
+          :disabled="disabled"
+          v-on="on"
+          @click="$emit('click')"
+        >
           {{ iconName }}
         </v-icon>
       </template>

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

@@ -35,9 +35,10 @@ const localValue = computed({
 const handleKeydown = ({ key }) => {
   switch (key) {
     case "Enter":
-      if (!(props.rules || []).some((v) => v(localValue.value) === false || typeof v(localValue.value) === "string")) {
-        emit("onEnter", localValue.value);
-      }
+      // Explicitly check that all rule props return true
+      if (!props.rules?.every((rule) => rule(localValue.value) === true)) return;
+
+      emit("onEnter", localValue.value);
       break;
     case "Escape":
       emit("onEscape");

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

@@ -138,7 +138,7 @@ const cancelPipelineCreation = () => {
   newPipelineType.value = useCameraSettingsStore().currentWebsocketPipelineType;
 };
 
-// Pipeline Creation
+// Pipeline Deletion
 const showPipelineDeletionConfirmationDialog = ref(false);
 const confirmDeleteCurrentPipeline = () => {
   useCameraSettingsStore().deleteCurrentPipeline();
@@ -186,6 +186,11 @@ const cancelChangePipelineType = () => {
   showPipelineTypeChangeDialog.value = false;
 };
 
+// Pipeline duplication'
+const duplicateCurrentPipeline = () => {
+  useCameraSettingsStore().duplicatePipeline(useCameraSettingsStore().currentCameraSettings.currentPipelineIndex);
+};
+
 // Change Props whenever the pipeline settings are changed
 useCameraSettingsStore().$subscribe((mutation, state) => {
   const currentCameraSettings = state.cameras[useStateStore().currentCameraIndex];
@@ -225,12 +230,27 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
           :input-cols="12 - 3"
           :rules="[(v) => checkCameraName(v)]"
           label="Camera"
-          @on-enter="saveCameraNameEdit"
-          @on-escape="cancelCameraNameEdit"
+          @onEnter="saveCameraNameEdit"
+          @onEscape="cancelCameraNameEdit"
         />
       </v-col>
       <v-col cols="2" style="display: flex; align-items: center; justify-content: center">
-        <pv-icon color="#c5c5c5" icon-name="mdi-pencil" tooltip="Edit Camera Name" @click="startCameraNameEdit" />
+        <div v-if="isCameraNameEdit" style="display: flex; gap: 14px">
+          <pv-icon
+            icon-name="mdi-content-save"
+            color="#c5c5c5"
+            :disabled="checkCameraName(currentCameraName) !== true"
+            @click="() => saveCameraNameEdit(currentCameraName)"
+          />
+          <pv-icon icon-name="mdi-cancel" color="red darken-2" @click="cancelCameraNameEdit" />
+        </div>
+        <pv-icon
+          v-else
+          color="#c5c5c5"
+          icon-name="mdi-pencil"
+          tooltip="Edit Camera Name"
+          @click="startCameraNameEdit"
+        />
       </v-col>
     </v-row>
     <v-row style="padding: 0 12px 0 24px">
@@ -250,12 +270,21 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
           :input-cols="12 - 3"
           :rules="[(v) => checkPipelineName(v)]"
           label="Pipeline"
-          @on-enter="(v) => savePipelineNameEdit(v)"
-          @on-escape="cancelPipelineNameEdit"
+          @onEnter="(v) => savePipelineNameEdit(v)"
+          @onEscape="cancelPipelineNameEdit"
         />
       </v-col>
       <v-col cols="2" class="pa-0" style="display: flex; align-items: center; justify-content: center">
-        <v-menu v-if="!useCameraSettingsStore().isDriverMode" offset-y nudge-bottom="7" auto>
+        <div v-if="isPipelineNameEdit" style="display: flex; gap: 14px">
+          <pv-icon
+            icon-name="mdi-content-save"
+            color="#c5c5c5"
+            :disabled="checkPipelineName(currentPipelineName) !== true"
+            @click="() => savePipelineNameEdit(currentPipelineName)"
+          />
+          <pv-icon icon-name="mdi-cancel" color="red darken-2" @click="cancelPipelineNameEdit" />
+        </div>
+        <v-menu v-else-if="!useCameraSettingsStore().isDriverMode" offset-y nudge-bottom="7" auto>
           <template #activator="{ on }">
             <v-icon color="#c5c5c5" v-on="on" @click="cancelPipelineNameEdit"> mdi-menu </v-icon>
           </template>
@@ -275,19 +304,21 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
                 <pv-icon color="red darken-2" :right="true" icon-name="mdi-delete" tooltip="Delete pipeline" />
               </v-list-item-title>
             </v-list-item>
-            <v-list-item
-              @click="
-                useCameraSettingsStore().duplicatePipeline(
-                  useCameraSettingsStore().currentCameraSettings.currentPipelineIndex
-                )
-              "
-            >
+            <v-list-item @click="duplicateCurrentPipeline">
               <v-list-item-title>
                 <pv-icon color="#c5c5c5" :right="true" icon-name="mdi-content-copy" tooltip="Duplicate pipeline" />
               </v-list-item-title>
             </v-list-item>
           </v-list>
         </v-menu>
+        <pv-icon
+          v-else-if="useCameraSettingsStore().isDriverMode && useCameraSettingsStore().pipelineNames.length === 0"
+          color="#c5c5c5"
+          :right="true"
+          icon-name="mdi-plus"
+          tooltip="Add new pipeline"
+          @click="showCreatePipelineDialog"
+        />
       </v-col>
     </v-row>
     <v-row style="padding: 0 12px 12px 24px">

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

@@ -66,7 +66,14 @@ const fpsTooLow = computed<boolean>(() => {
         </v-chip>
       </div>
       <div>
-        <v-switch v-model="driverMode" label="Driver Mode" style="margin-left: auto" color="accent" class="pt-2" />
+        <v-switch
+          v-model="driverMode"
+          :disabled="useCameraSettingsStore().isCalibrationMode || useCameraSettingsStore().pipelineNames.length === 0"
+          label="Driver Mode"
+          style="margin-left: auto"
+          color="accent"
+          class="pt-2"
+        />
       </div>
     </v-card-title>
     <v-divider style="border-color: white" />