Add more linting rules (#2406)

As a precursor to #2394, add a bunch of linting rules to try and catch
more mistakes/potential code errors/unnecessary code. Add a bunch of
rules from https://eslint.vuejs.org/rules/ in the "uncategorized"
section that seem useful to have.

photon-client/src/components/app/photon-camera-stream.vue

@@ -50,7 +50,7 @@ const containerStyle = computed<StyleValue>(() => {
 });
 
 const overlayStyle = computed<StyleValue>(() => {
-  if (useStateStore().colorPickingMode || streamSrc.value == emptyStreamSrc) {
+  if (useStateStore().colorPickingMode || streamSrc.value === emptyStreamSrc) {
     return { display: "none" };
   } else {
     return {};

photon-client/src/components/app/photon-error-snackbar.vue

@@ -14,7 +14,7 @@ import { useStateStore } from "@/stores/StateStore";
       {{ useStateStore().snackbarData.message }}
     </p>
     <v-progress-linear
-      v-if="useStateStore().snackbarData.progressBar != -1"
+      v-if="useStateStore().snackbarData.progressBar !== -1"
       v-model="useStateStore().snackbarData.progressBar"
       height="15"
       :color="useStateStore().snackbarData.progressBarColor"

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

@@ -38,7 +38,7 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
       <v-list-item link to="/settings" prepend-icon="mdi-cog">
         <v-list-item-title>Settings</v-list-item-title>
       </v-list-item>
-      <v-list-item ref="camerasTabOpener" link to="/cameras" prepend-icon="mdi-camera">
+      <v-list-item link to="/cameras" prepend-icon="mdi-camera">
         <v-list-item-title>Camera</v-list-item-title>
       </v-list-item>
       <v-list-item

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

@@ -28,7 +28,7 @@ const getUniqueVideoFormatsByResolution = (): VideoFormat[] => {
   if (useCameraSettingsStore().currentCameraSettings.validVideoFormats.length === 0) return uniqueResolutions;
   useCameraSettingsStore().currentCameraSettings.validVideoFormats.forEach((format) => {
     const index = uniqueResolutions.findIndex((v) => resolutionsAreEqual(v.resolution, format.resolution));
-    const contains = index != -1;
+    const contains = index !== -1;
     let skip = false;
     if (contains && format.fps > uniqueResolutions[index].fps) {
       uniqueResolutions.splice(index, 1);
@@ -132,7 +132,7 @@ const downloadCalibBoard = async () => {
           const yPos = chessboardStartY + squareY * squareSizeIn.value;
 
           // Only draw the odd squares to create the chessboard pattern
-          if (squareY % 2 != squareX % 2) {
+          if (squareY % 2 !== squareX % 2) {
             doc.rect(xPos, yPos, squareSizeIn.value, squareSizeIn.value, "F");
           }
         }
@@ -293,7 +293,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
           <v-card-subtitle v-if="!isCalibrating" class="pl-0 pb-3 pt-4 opacity-100"
             >Configure New Calibration</v-card-subtitle
           >
-          <v-form ref="form" v-model="settingsValid">
+          <v-form v-model="settingsValid">
             <pv-select
               v-model="uniqueVideoResolutionString"
               label="Resolution"

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

@@ -40,8 +40,8 @@ const importCalibration = async () => {
   const data = await parseJsonFile<CameraCalibrationResult>(uploadedJson);
 
   if (
-    data.resolution.height != props.videoFormat.resolution.height ||
-    data.resolution.width != props.videoFormat.resolution.width
+    data.resolution.height !== props.videoFormat.resolution.height ||
+    data.resolution.width !== props.videoFormat.resolution.width
   ) {
     useStateStore().showSnackbarMessage({
       color: "error",
@@ -341,7 +341,7 @@ const viewingImg = ref(0);
   <pv-delete-modal
     v-model="confirmRemoveDialog.show"
     :width="500"
-    :title="'Delete Calibration'"
+    title="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-confirm="() => removeCalibration(confirmRemoveDialog.vf)"
   />

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

@@ -66,10 +66,10 @@ const settingsHaveChanged = (): boolean => {
   const b = useCameraSettingsStore().currentCameraSettings;
 
   for (const q in ValidQuirks) {
-    if (a.quirksToChange[q] != b.cameraQuirks.quirks[q]) return true;
+    if (a.quirksToChange[q] !== b.cameraQuirks.quirks[q]) return true;
   }
 
-  return a.fov != b.fov.value;
+  return a.fov !== b.fov.value;
 };
 
 const resetTempSettingsStruct = () => {

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

@@ -129,7 +129,7 @@ const onBeforeTabUpdate = () => {
       <v-col
         v-for="(tabGroupData, tabGroupIndex) in tabGroups"
         :key="tabGroupIndex"
-        :cols="tabGroupIndex == 1 && useCameraSettingsStore().currentPipelineSettings.doMultiTarget ? 7 : ''"
+        :cols="tabGroupIndex === 1 && useCameraSettingsStore().currentPipelineSettings.doMultiTarget ? 7 : ''"
         :class="tabGroupIndex !== tabGroups.length - 1 && 'pr-3'"
         @vue:before-update="onBeforeTabUpdate"
       >

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

@@ -48,8 +48,8 @@ const processingMode = computed<number>({
             :disabled="
               !useCameraSettingsStore().hasConnected ||
               !useCameraSettingsStore().isCurrentVideoFormatCalibrated ||
-              useCameraSettingsStore().currentPipelineSettings.pipelineType == PipelineType.ObjectDetection ||
-              useCameraSettingsStore().currentPipelineSettings.pipelineType == PipelineType.ColoredShape
+              useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.ObjectDetection ||
+              useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.ColoredShape
             "
             :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
             class="w-50"

photon-client/src/components/settings/DeviceCard.vue

@@ -453,7 +453,7 @@ watch(metricsHistorySnapshot, () => {
         <v-card-text class="pt-0 flex-0-0 pb-2">
           <div class="d-flex justify-space-between pb-3 pt-3">
             <span>CPU Temperature</span>
-            <span>{{ cpuTempData.at(-1)?.value == -1 ? "--- " : Math.round(cpuTempData.at(-1)?.value ?? 0) }}°C</span>
+            <span>{{ cpuTempData.at(-1)?.value === -1 ? "--- " : Math.round(cpuTempData.at(-1)?.value ?? 0) }}°C</span>
           </div>
           <Suspense>
             <!-- Allows us to import echarts when it's actually needed  -->
@@ -470,7 +470,10 @@ watch(metricsHistorySnapshot, () => {
               tooltip="Measured rate for this coprocessor ONLY. This FMS limit is for ALL robot communication. If you are experiencing bandwidth issues while under this limit, check other sources."
             />
             <span
-              >{{ networkUsageData.at(-1)?.value == -1 ? "---" : networkUsageData.at(-1)?.value.toFixed(3) }} Mb/s</span
+              >{{
+                networkUsageData.at(-1)?.value === -1 ? "---" : networkUsageData.at(-1)?.value.toFixed(3)
+              }}
+              Mb/s</span
             >
           </div>
           <Suspense>

photon-client/src/components/settings/GlobalSettingsCard.vue

@@ -185,7 +185,7 @@ watchEffect(() => {
     </v-card-title>
     <div class="pa-5 pt-0">
       <v-card-title class="pl-0 pt-0 pb-10px">Networking</v-card-title>
-      <v-form ref="form" v-model="settingsValid">
+      <v-form v-model="settingsValid">
         <pv-input
           v-model="tempSettingsStruct.ntServerAddress"
           label="Team Number/NetworkTables Server Address"

photon-client/src/components/settings/ObjectDetectionCard.vue

@@ -446,8 +446,8 @@ const handleBulkImport = async () => {
       :on-backup="openExportPrompt"
       :on-confirm="nukeModels"
       title="Delete and Reset All Object Detection Models"
-      :description="'This will delete ALL object detection models and re-extract the default object detection models. This action cannot be undone.'"
-      :expected-confirmation-text="'Delete Models'"
+      description="This will delete ALL object detection models and re-extract the default object detection models. This action cannot be undone."
+      expected-confirmation-text="Delete Models"
       delete-text="Delete all models"
     />
   </v-card>