Big scary buttons (#1471)

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

@@ -3,8 +3,9 @@ import PvSelect 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";
-import { computed, ref, watchEffect } from "vue";
+import { computed, inject, ref, watchEffect } from "vue";
 import { type CameraSettingsChangeRequest, ValidQuirks } from "@/types/SettingTypes";
+import axios from "axios";
 
 const tempSettingsStruct = ref<CameraSettingsChangeRequest>({
   fov: useCameraSettingsStore().currentCameraSettings.fov.value,
@@ -108,6 +109,49 @@ watchEffect(() => {
   // Reset temp settings on remote camera settings change
   resetTempSettingsStruct();
 });
+
+const showDeleteCamera = ref(false);
+
+const address = inject<string>("backendHost");
+const exportSettings = ref();
+const openExportSettingsPrompt = () => {
+  exportSettings.value.click();
+};
+
+const yesDeleteMySettingsText = ref("");
+const deleteThisCamera = () => {
+  const payload = {
+    cameraUniqueName: useCameraSettingsStore().cameraUniqueNames[useStateStore().currentCameraIndex]
+  };
+
+  axios
+    .post("/utils/nukeOneCamera", payload)
+    .then(() => {
+      useStateStore().showSnackbarMessage({
+        message: "Successfully dispatched the delete command. Waiting for backend to start back up",
+        color: "success"
+      });
+    })
+    .catch((error) => {
+      if (error.response) {
+        useStateStore().showSnackbarMessage({
+          message: "The backend is unable to fulfil the request to delete this camera.",
+          color: "error"
+        });
+      } else if (error.request) {
+        useStateStore().showSnackbarMessage({
+          message: "Error while trying to process the request! The backend didn't respond.",
+          color: "error"
+        });
+      } else {
+        useStateStore().showSnackbarMessage({
+          message: "An error occurred while trying to process the request.",
+          color: "error"
+        });
+      }
+    });
+  showDeleteCamera.value = false;
+};
 </script>
 
 <template>
@@ -144,17 +188,82 @@ watchEffect(() => {
         :select-cols="8"
       />
       <br />
-      <v-btn
-        class="mt-2 mb-3"
-        style="width: 100%"
-        small
-        color="secondary"
-        :disabled="!settingsHaveChanged()"
-        @click="saveCameraSettings"
-      >
-        <v-icon left> mdi-content-save </v-icon>
-        Save Changes
-      </v-btn>
+      <v-row>
+        <v-col cols="6">
+          <v-btn
+            class="mt-2 mb-3"
+            style="width: 100%"
+            small
+            color="secondary"
+            :disabled="!settingsHaveChanged()"
+            @click="saveCameraSettings"
+          >
+            <v-icon left> mdi-content-save </v-icon>
+            Save Changes
+          </v-btn>
+        </v-col>
+        <v-col cols="6">
+          <v-btn class="mt-2 mb-3" style="width: 100%" small color="red" @click="() => (showDeleteCamera = true)">
+            <v-icon left> mdi-bomb </v-icon>
+            Delete Camera
+          </v-btn>
+        </v-col>
+      </v-row>
     </div>
+
+    <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-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>
+          </v-col>
+          <v-col cols="12" md="6">
+            <v-btn color="secondary" style="float: right" @click="openExportSettingsPrompt">
+              <v-icon left class="open-icon"> 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-divider class="mt-4 mb-4" />
+        <v-row class="pl-3 align-center pa-6">
+          <v-col>
+            <pv-input
+              v-model="yesDeleteMySettingsText"
+              :label="'Type &quot;' + useCameraSettingsStore().currentCameraName + '&quot;:'"
+              :label-cols="12"
+              :input-cols="12"
+            />
+          </v-col>
+
+          <v-btn
+            color="red"
+            :disabled="
+              yesDeleteMySettingsText.toLowerCase() !== useCameraSettingsStore().currentCameraName.toLowerCase()
+            "
+            @click="deleteThisCamera"
+          >
+            <v-icon left class="open-icon"> mdi-skull </v-icon>
+            <span class="open-label">DELETE (UNRECOVERABLE)</span>
+          </v-btn>
+        </v-row>
+      </v-card>
+    </v-dialog>
   </v-card>
 </template>
+
+<style scoped>
+.v-divider {
+  border-color: white !important;
+}
+</style>