convert to use modal

samfreund · samfreund · commit 2896a7dc5cfc · 2025-11-15T17:34:18.000-06:00
diff --git a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
@@ -20,8 +20,6 @@ const removeCalibration = (vf: VideoFormat) => {
     width: vf.resolution.width,
     height: vf.resolution.height
   });
-
-  confirmRemoveDialog.value.show = false;
 };
 
 const exportCalibration = ref();
@@ -312,32 +310,12 @@ const calibrationImageURL = (index: number) =>
     </v-card-text>
   </v-card>
 
-  <v-dialog v-model="confirmRemoveDialog.show" width="600">
-    <v-card color="surface" dark>
-      <v-card-title>Delete Calibration</v-card-title>
-      <v-card-text class="pt-0">
-        Are you sure you want to delete the calibration for {{ confirmRemoveDialog.vf.resolution.width }}x{{
-          confirmRemoveDialog.vf.resolution.height
-        }}? This cannot be undone.
-        <v-card-actions class="pt-5 pb-0 pr-0" style="justify-content: flex-end">
-          <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            color="primary"
-            @click="() => (confirmRemoveDialog.show = false)"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            color="error"
-            @click="removeCalibration(confirmRemoveDialog.vf)"
-          >
-            Delete
-          </v-btn>
-        </v-card-actions>
-      </v-card-text>
-    </v-card>
-  </v-dialog>
+  <pv-delete-modal
+    v-model="confirmRemoveDialog.show"
+    :action="'Delete Calibration'"
+    :description="`Are you sure you want to delete the calibration for '${confirmRemoveDialog.vf.resolution.width}x${confirmRemoveDialog.vf.resolution.height}'? This action cannot be undone.`"
+    :on-delete="() => removeCalibration(confirmRemoveDialog.vf)"
+  />
 </template>
 
 <style scoped>
diff --git a/photon-client/src/components/cameras/CameraSettingsCard.vue b/photon-client/src/components/cameras/CameraSettingsCard.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import PvSelect, { type SelectItem } from "@/components/common/pv-select.vue";
-import PvInput from "@/components/common/pv-input.vue";
+import pvDeleteModal from "../common/pv-delete-modal.vue";
 import PvNumberInput from "@/components/common/pv-number-input.vue";
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
@@ -112,17 +112,9 @@ watchEffect(() => {
 });
 
 const showDeleteCamera = ref(false);
-const yesDeleteMySettingsText = ref("");
-const deletingCamera = ref(false);
 const deleteThisCamera = () => {
-  if (deletingCamera.value) return;
-  deletingCamera.value = true;
-
-  const payload = { cameraUniqueName: useStateStore().currentCameraUniqueName };
-
-  axiosPost("/utils/nukeOneCamera", "delete this camera", payload).finally(() => {
-    deletingCamera.value = false;
-    showDeleteCamera.value = false;
+  axiosPost("/utils/nukeOneCamera", "delete this camera", {
+    cameraUniqueName: useStateStore().currentCameraUniqueName
   });
 };
 const wrappedCameras = computed<SelectItem[]>(() =>
@@ -195,45 +187,13 @@ const wrappedCameras = computed<SelectItem[]>(() =>
       </v-col>
     </v-card-text>
 
-    <v-dialog v-model="showDeleteCamera" width="800">
-      <v-card color="surface" flat>
-        <v-card-title> Delete {{ useCameraSettingsStore().currentCameraSettings.nickname }}? </v-card-title>
-        <v-card-text class="pt-0 pb-10px">
-          Are you sure you want to delete "{{ useCameraSettingsStore().currentCameraSettings.nickname }}"? This cannot
-          be undone.
-        </v-card-text>
-        <v-card-text class="pt-0 pb-10px">
-          <pv-input
-            v-model="yesDeleteMySettingsText"
-            :label="'Type &quot;' + useCameraSettingsStore().currentCameraName + '&quot;:'"
-            :label-cols="6"
-            :input-cols="6"
-          />
-        </v-card-text>
-        <v-card-actions class="pa-5 pt-0">
-          <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            color="primary"
-            class="text-black"
-            @click="showDeleteCamera = false"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            color="error"
-            :disabled="
-              yesDeleteMySettingsText.toLowerCase() !== useCameraSettingsStore().currentCameraName.toLowerCase()
-            "
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            :loading="deletingCamera"
-            @click="deleteThisCamera"
-          >
-            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
-            <span class="open-label">Delete</span>
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+    <pv-delete-modal
+      v-model="showDeleteCamera"
+      action="Delete Camera"
+      :description="`Are you sure you want to delete the camera '${useCameraSettingsStore().currentCameraSettings.nickname}'? This action cannot be undone.`"
+      :expected="useCameraSettingsStore().currentCameraSettings.nickname"
+      :on-delete="deleteThisCamera"
+    />
   </v-card>
 </template>
 
diff --git a/photon-client/src/components/settings/DeviceControlCard.vue b/photon-client/src/components/settings/DeviceControlCard.vue
@@ -2,7 +2,7 @@
 import { inject, ref } from "vue";
 import { useStateStore } from "@/stores/StateStore";
 import PvSelect from "@/components/common/pv-select.vue";
-import PvInput from "@/components/common/pv-input.vue";
+import pvDeleteModal from "../common/pv-delete-modal.vue";
 import { useTheme } from "vuetify";
 import { axiosPost } from "@/lib/PhotonUtils";
 
@@ -113,12 +113,8 @@ const handleSettingsImport = () => {
 };
 
 const showFactoryReset = ref(false);
-const expected = "Delete Everything";
-const yesDeleteMySettingsText = ref("");
 const nukePhotonConfigDirectory = () => {
   axiosPost("/utils/nukeConfigDirectory", "delete the config directory");
-
-  showFactoryReset.value = false;
 };
 </script>
 
@@ -280,63 +276,14 @@ const nukePhotonConfigDirectory = () => {
         </v-col>
       </v-row>
     </div>
-    <v-dialog v-model="showFactoryReset" width="800" dark>
-      <v-card color="surface" flat>
-        <v-card-title style="display: flex; justify-content: center">
-          <span class="open-label">
-            <v-icon end color="red" class="open-icon ma-1" size="large">mdi-alert-outline</v-icon>
-            Factory Reset PhotonVision
-            <v-icon end color="red" class="open-icon ma-1" size="large">mdi-alert-outline</v-icon>
-          </span>
-        </v-card-title>
-        <v-card-text class="pt-0 pb-10px">
-          <v-row class="align-center text-white">
-            <v-col cols="12" md="6">
-              <span> This will delete ALL OF YOUR SETTINGS and restart PhotonVision. </span>
-            </v-col>
-            <v-col cols="12" md="6">
-              <v-btn
-                color="primary"
-                style="float: right"
-                :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                @click="openExportSettingsPrompt"
-              >
-                <v-icon start class="open-icon" size="large"> mdi-export </v-icon>
-                <span class="open-label">Backup Settings</span>
-                <a
-                  ref="exportSettings"
-                  style="color: black; text-decoration: none; display: none"
-                  :href="`http://${address}/api/settings/photonvision_config.zip`"
-                  download="photonvision-settings.zip"
-                  target="_blank"
-                />
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-card-text>
-        <v-card-text class="pt-0 pb-0">
-          <pv-input
-            v-model="yesDeleteMySettingsText"
-            :label="'Type &quot;' + expected + '&quot;:'"
-            :label-cols="6"
-            :input-cols="6"
-          />
-        </v-card-text>
-        <v-card-text class="pt-10px">
-          <v-btn
-            color="error"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            :disabled="yesDeleteMySettingsText.toLowerCase() !== expected.toLowerCase()"
-            @click="nukePhotonConfigDirectory"
-          >
-            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
-            <span class="open-label">
-              {{ $vuetify.display.mdAndUp ? "Delete everything, I have backed up what I need" : "Delete Everything" }}
-            </span>
-          </v-btn>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
+    <pv-delete-modal
+      v-model="showFactoryReset"
+      action="Factory Reset PhotonVision"
+      description="This will delete all settings and configurations stored on this device, including network settings. This action cannot be undone."
+      expected="Delete Everything"
+      :on-delete="nukePhotonConfigDirectory"
+      :on-backup="openExportSettingsPrompt"
+    />
   </v-card>
 </template>
 
diff --git a/photon-client/src/components/settings/ObjectDetectionCard.vue b/photon-client/src/components/settings/ObjectDetectionCard.vue
@@ -73,17 +73,9 @@ const handleImport = async () => {
 };
 
 const deleteModel = async (model: ObjectDetectionModelProperties) => {
-  useStateStore().showSnackbarMessage({
-    message: "Deleting Object Detection Model...",
-    color: "secondary",
-    timeout: -1
-  });
-
   axiosPost("/objectdetection/delete", "delete an object detection model", {
     modelPath: model.modelPath
   });
-
-  confirmDeleteDialog.value.show = false;
 };
 
 const renameModel = async (model: ObjectDetectionModelProperties, newName: string) => {
diff --git a/photon-client/src/views/CameraMatchingView.vue b/photon-client/src/views/CameraMatchingView.vue
@@ -7,15 +7,13 @@ import {
   PVCameraInfo,
   type PVCSICameraInfo,
   type PVFileCameraInfo,
-  type PVUsbCameraInfo,
-  type UiCameraConfiguration
+  type PVUsbCameraInfo
 } from "@/types/SettingTypes";
 import { axiosPost, getResolutionString } from "@/lib/PhotonUtils";
 import PhotonCameraStream from "@/components/app/photon-camera-stream.vue";
-import PvInput from "@/components/common/pv-input.vue";
+import PvDeleteModal from "@/components/common/pv-delete-modal.vue";
 import PvCameraInfoCard from "@/components/common/pv-camera-info-card.vue";
 import PvCameraMatchCard from "@/components/common/pv-camera-match-card.vue";
-import type { WebsocketCameraSettingsUpdate } from "@/types/WebsocketDataTypes";
 import { useTheme } from "vuetify";
 
 const theme = useTheme();
@@ -55,18 +53,10 @@ const deactivateModule = (cameraUniqueName: string) => {
   );
 };
 
-const deletingCamera = ref(false);
-const deleteThisCamera = (cameraName: string) => {
-  if (deletingCamera.value) return;
-  deletingCamera.value = true;
-  const payload = {
-    cameraUniqueName: cameraName
-  };
+const confirmDeleteDialog = ref({ show: false, nickname: "", cameraUniqueName: "" });
 
-  axiosPost("/utils/nukeOneCamera", "delete a camera", payload).finally(() => {
-    setCameraDeleting(null);
-    deletingCamera.value = false;
-  });
+const deleteThisCamera = (cameraUniqueName: string) => {
+  axiosPost("/utils/nukeOneCamera", "delete a camera", { cameraUniqueName: cameraUniqueName });
 };
 
 const cameraConnected = (uniquePath: string): boolean => {
@@ -110,15 +100,6 @@ const setCameraView = (camera: PVCameraInfo | null, isConnected: boolean | null)
   viewingCamera.value = [camera, isConnected];
 };
 
-const viewingDeleteCamera = ref(false);
-const cameraToDelete = ref<UiCameraConfiguration | WebsocketCameraSettingsUpdate | null>(null);
-const setCameraDeleting = (camera: UiCameraConfiguration | WebsocketCameraSettingsUpdate | null) => {
-  yesDeleteMySettingsText.value = "";
-  viewingDeleteCamera.value = camera !== null;
-  cameraToDelete.value = camera;
-};
-const yesDeleteMySettingsText = ref("");
-
 /**
  * Get the connection-type-specific camera info from the given PVCameraInfo object.
  */
@@ -275,7 +256,14 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
                   color="error"
                   style="width: 100%"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                  @click="setCameraDeleting(module)"
+                  @click="
+                    () =>
+                      (confirmDeleteDialog = {
+                        show: true,
+                        nickname: module.nickname,
+                        cameraUniqueName: module.uniqueName
+                      })
+                  "
                 >
                   <v-icon size="x-large">mdi-trash-can-outline</v-icon>
                 </v-btn>
@@ -361,7 +349,14 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
                   color="error"
                   style="width: 100%"
                   :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-                  @click="setCameraDeleting(module)"
+                  @click="
+                    () =>
+                      (confirmDeleteDialog = {
+                        show: true,
+                        nickname: module.nickname,
+                        cameraUniqueName: module.uniqueName
+                      })
+                  "
                 >
                   <v-icon size="x-large">mdi-trash-can-outline</v-icon>
                 </v-btn>
@@ -465,43 +460,13 @@ const getMatchedDevice = (info: PVCameraInfo | undefined): PVCameraInfo => {
       </v-card>
     </v-dialog>
 
-    <!-- Camera delete modal -->
-    <v-dialog v-model="viewingDeleteCamera" width="800">
-      <v-card v-if="cameraToDelete !== null" class="dialog-container" color="surface" flat>
-        <v-card-title> Delete {{ cameraToDelete.nickname }}? </v-card-title>
-        <v-card-text class="pb-10px">
-          Are you sure you want to delete "{{ cameraToDelete.nickname }}"? This cannot be undone.
-        </v-card-text>
-        <v-card-text class="pt-0 pb-10px">
-          <pv-input
-            v-model="yesDeleteMySettingsText"
-            :label="'Type &quot;' + cameraToDelete.nickname + '&quot;:'"
-            :label-cols="6"
-            :input-cols="6"
-          />
-        </v-card-text>
-        <v-card-actions class="pa-5 pt-0">
-          <v-btn
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            color="primary"
-            class="text-black"
-            @click="cameraToDelete = null"
-          >
-            Cancel
-          </v-btn>
-          <v-btn
-            color="error"
-            :disabled="yesDeleteMySettingsText.toLowerCase() !== cameraToDelete.nickname.toLowerCase()"
-            :loading="deletingCamera"
-            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
-            @click="deleteThisCamera(cameraToDelete.uniqueName)"
-          >
-            <v-icon start class="open-icon" size="large"> mdi-trash-can-outline </v-icon>
-            <span class="open-label">Delete</span>
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+    <pv-delete-modal
+      v-model="confirmDeleteDialog.show"
+      action="Delete Camera"
+      :description="`Are you sure you want to delete the camera '${useCameraSettingsStore().currentCameraSettings.nickname}'? This action cannot be undone.`"
+      :expected="confirmDeleteDialog.nickname"
+      :on-delete="() => deleteThisCamera(confirmDeleteDialog.cameraUniqueName)"
+    />
   </div>
 </template>
 
