Add support for removing calib coefficients (#2150)

## Description

Adds the ability to remove old calibrations. This might be helpful if
you have a bad calibration.

closes #1262

## Meta

Merge checklist:
- [x] Pull Request title is [short, imperative
summary](https://cbea.ms/git-commit/) of proposed changes
- [x] The description documents the _what_ and _why_
- [ ] If this PR changes behavior or adds a feature, user documentation
is updated
- [ ] If this PR touches photon-serde, all messages have been
regenerated and hashes have not changed unexpectedly
- [ ] If this PR touches configuration, this is backwards compatible
with settings back to v2025.3.2
- [ ] If this PR touches pipeline settings or anything related to data
exchange, the frontend typing is updated
- [ ] If this PR addresses a bug, a regression test for it is added

---------

Co-authored-by: Gold856 <117957790+Gold856@users.noreply.github.com>

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

@@ -3,7 +3,7 @@ import type { CameraCalibrationResult, VideoFormat } from "@/types/SettingTypes"
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { useStateStore } from "@/stores/StateStore";
 import { computed, inject, ref } from "vue";
-import { getResolutionString, parseJsonFile } from "@/lib/PhotonUtils";
+import { axiosPost, getResolutionString, parseJsonFile } from "@/lib/PhotonUtils";
 import { useTheme } from "vuetify";
 
 const theme = useTheme();
@@ -12,6 +12,18 @@ const props = defineProps<{
   videoFormat: VideoFormat;
 }>();
 
+const confirmRemoveDialog = ref({ show: false, vf: {} as VideoFormat });
+
+const removeCalibration = (vf: VideoFormat) => {
+  axiosPost("/calibration/remove", "delete a camera calibration", {
+    cameraUniqueName: useCameraSettingsStore().currentCameraSettings.uniqueName,
+    width: vf.resolution.width,
+    height: vf.resolution.height
+  });
+
+  confirmRemoveDialog.value.show = false;
+};
+
 const exportCalibration = ref();
 const openExportCalibrationPrompt = () => {
   exportCalibration.value.click();
@@ -93,18 +105,30 @@ const calibrationImageURL = (index: number) =>
 </script>
 <template>
   <v-card color="surface" dark>
-    <div class="d-flex flex-wrap pt-2 pl-2 pr-2">
+    <div class="d-flex flex-wrap pt-2 pl-2 pr-2 align-center">
       <v-col cols="12" md="6">
         <v-card-title class="pa-0"> Calibration Details </v-card-title>
       </v-col>
-      <v-col cols="6" md="3" class="d-flex align-center pt-0 pt-md-3 pl-6 pl-md-3">
+      <v-col cols="12" md="6" class="d-flex align-center pt-0 pt-md-3">
+        <v-btn
+          color="error"
+          :disabled="!currentCalibrationCoeffs"
+          class="mr-2"
+          style="flex: 1"
+          :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
+          @click="() => (confirmRemoveDialog = { show: true, vf: props.videoFormat })"
+        >
+          <v-icon start size="large">mdi-delete</v-icon>
+          <span>Delete</span>
+        </v-btn>
         <v-btn
           color="buttonPassive"
-          style="width: 100%"
+          class="mr-2"
+          style="flex: 1"
           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           @click="openUploadPhotonCalibJsonPrompt"
         >
-          <v-icon start size="large"> mdi-import</v-icon>
+          <v-icon start size="large">mdi-import</v-icon>
           <span>Import</span>
         </v-btn>
         <input
@@ -114,12 +138,10 @@ const calibrationImageURL = (index: number) =>
           style="display: none"
           @change="importCalibration"
         />
-      </v-col>
-      <v-col cols="6" md="3" class="d-flex align-center pt-0 pt-md-3 pr-6 pr-md-3">
         <v-btn
           color="buttonPassive"
           :disabled="!currentCalibrationCoeffs"
-          style="width: 100%"
+          style="flex: 1"
           :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
           @click="openExportCalibrationPrompt"
         >
@@ -289,6 +311,33 @@ const calibrationImageURL = (index: number) =>
       </v-data-table>
     </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>
 </template>
 
 <style scoped>