From 959c162fc2f36c03d930e1c2afe530b1a796e235 Mon Sep 17 00:00:00 2001
From: Sriman Achanta <68172138+srimanachanta@users.noreply.github.com>
Date: Sat, 21 Oct 2023 11:09:55 -0400
Subject: [PATCH] [photon-client] Styling fixes (#968)

---
 .../cameras/CameraCalibrationCard.vue         |  1 +
 .../src/components/cameras/CamerasView.vue    |  1 +
 .../dashboard/CameraAndPipelineSelectCard.vue |  8 +++++++-
 .../components/dashboard/tabs/OutputTab.vue   | 10 ++++++----
 .../components/dashboard/tabs/TargetsTab.vue  | 20 +++++++++++--------
 .../settings/ApriltagControlCard.vue          |  6 ++----
 6 files changed, 29 insertions(+), 17 deletions(-)

diff --git a/photon-client/src/components/cameras/CameraCalibrationCard.vue b/photon-client/src/components/cameras/CameraCalibrationCard.vue
index f9bdbf1332..2c40c28b23 100644
--- a/photon-client/src/components/cameras/CameraCalibrationCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationCard.vue
@@ -233,6 +233,7 @@ const endCalibration = () => {
                 :items="getUniqueVideoResolutionStrings()"
               />
               <pv-select
+                v-show="isCalibrating"
                 v-model="useCameraSettingsStore().currentPipelineSettings.streamingFrameDivisor"
                 label="Decimation"
                 tooltip="Resolution to which camera frames are downscaled for detection. Calibration still uses full-res"
diff --git a/photon-client/src/components/cameras/CamerasView.vue b/photon-client/src/components/cameras/CamerasView.vue
index a0c1968d1e..f7c110cf62 100644
--- a/photon-client/src/components/cameras/CamerasView.vue
+++ b/photon-client/src/components/cameras/CamerasView.vue
@@ -125,6 +125,7 @@ th {
 
 .stream-container {
   display: flex;
+  justify-content: center;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
diff --git a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
index c7b6d3724b..11544a34d1 100644
--- a/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
+++ b/photon-client/src/components/dashboard/CameraAndPipelineSelectCard.vue
@@ -371,7 +371,13 @@ useCameraSettingsStore().$subscribe((mutation, state) => {
     <v-dialog v-model="showPipelineDeletionConfirmationDialog" dark width="500">
       <v-card dark color="primary">
         <v-card-title> Pipeline Deletion Confirmation </v-card-title>
-        <v-card-text> Are you sure you want to delete this pipeline? This cannot be undone. </v-card-text>
+        <v-card-text>
+          Are you sure you want to delete the pipeline
+          <b style="color: white; font-weight: bold">{{
+            useCameraSettingsStore().currentPipelineSettings.pipelineNickname
+          }}</b
+          >? This cannot be undone.
+        </v-card-text>
         <v-divider />
         <v-card-actions>
           <v-spacer />
diff --git a/photon-client/src/components/dashboard/tabs/OutputTab.vue b/photon-client/src/components/dashboard/tabs/OutputTab.vue
index 5116b6ee38..bc9fb8ca0c 100644
--- a/photon-client/src/components/dashboard/tabs/OutputTab.vue
+++ b/photon-client/src/components/dashboard/tabs/OutputTab.vue
@@ -84,10 +84,11 @@ const interactiveCols = computed(
         (value) => useCameraSettingsStore().changeCurrentPipelineSetting({ outputShowMultipleTargets: value }, false)
       "
     />
-    <cv-switch
+    <pv-switch
       v-if="
         currentPipelineSettings.pipelineType === PipelineType.AprilTag &&
-        useCameraSettingsStore().isCurrentVideoFormatCalibrated
+        useCameraSettingsStore().isCurrentVideoFormatCalibrated &&
+        useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled
       "
       v-model="currentPipelineSettings.doMultiTarget"
       label="Do Multi-Target Estimation"
@@ -96,10 +97,11 @@ const interactiveCols = computed(
       :disabled="!isTagPipeline"
       @input="(value) => useCameraSettingsStore().changeCurrentPipelineSetting({ doMultiTarget: value }, false)"
     />
-    <cv-switch
+    <pv-switch
       v-if="
         currentPipelineSettings.pipelineType === PipelineType.AprilTag &&
-        useCameraSettingsStore().isCurrentVideoFormatCalibrated
+        useCameraSettingsStore().isCurrentVideoFormatCalibrated &&
+        useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled
       "
       v-model="currentPipelineSettings.doSingleTargetAlways"
       label="Always Do Single-Target Estimation"
diff --git a/photon-client/src/components/dashboard/tabs/TargetsTab.vue b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
index e6b01fd1d4..144e76f1ea 100644
--- a/photon-client/src/components/dashboard/tabs/TargetsTab.vue
+++ b/photon-client/src/components/dashboard/tabs/TargetsTab.vue
@@ -2,6 +2,8 @@
 import { useCameraSettingsStore } from "@/stores/settings/CameraSettingsStore";
 import { PipelineType } from "@/types/PipelineTypes";
 import { useStateStore } from "@/stores/StateStore";
+
+const currentPipelineSettings = useCameraSettingsStore().currentPipelineSettings;
 </script>
 
 <template>
@@ -58,7 +60,7 @@ import { useStateStore } from "@/stores/StateStore";
                 <td>{{ target.skew.toFixed(2) }}&deg;</td>
                 <td>{{ target.area.toFixed(2) }}&deg;</td>
               </template>
-              <template v-else-if="useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled">
+              <template v-else>
                 <td>{{ target.pose?.x.toFixed(2) }}&nbsp;m</td>
                 <td>{{ target.pose?.y.toFixed(2) }}&nbsp;m</td>
                 <td>{{ (((target.pose?.angle_z || 0) * 180.0) / Math.PI).toFixed(2) }}&deg;</td>
@@ -78,13 +80,15 @@ import { useStateStore } from "@/stores/StateStore";
     </v-row>
     <v-row
       v-if="
-        useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.AprilTag &&
-        useCameraSettingsStore().currentPipelineSettings.doMultiTarget
+        currentPipelineSettings.pipelineType === PipelineType.AprilTag &&
+        currentPipelineSettings.doMultiTarget &&
+        useCameraSettingsStore().isCurrentVideoFormatCalibrated &&
+        useCameraSettingsStore().currentPipelineSettings.solvePNPEnabled
       "
       align="start"
       class="pb-4 white--text"
     >
-      <v-card-subtitle>Multi-tag pose, field-to-camera</v-card-subtitle>
+      <v-card-subtitle class="ma-0 pa-0 pb-4" style="font-size: 16px">Multi-tag pose, field-to-camera</v-card-subtitle>
       <v-simple-table fixed-header height="100%" dense dark>
         <thead style="font-size: 1.25rem">
           <th class="text-center">X meters</th>
@@ -92,10 +96,10 @@ import { useStateStore } from "@/stores/StateStore";
           <th class="text-center">Z Angle &theta;&deg;</th>
           <th class="text-center">Tags</th>
         </thead>
-        <tbody>
-          <td>{{ useStateStore().currentPipelineResults?.multitagResult?.bestTransform.x.toFixed(2) }}</td>
-          <td>{{ useStateStore().currentPipelineResults?.multitagResult?.bestTransform.y.toFixed(2) }}</td>
-          <td>{{ useStateStore().currentPipelineResults?.multitagResult?.bestTransform.angle_z.toFixed(2) }}</td>
+        <tbody v-show="useStateStore().currentPipelineResults?.multitagResult">
+          <td>{{ useStateStore().currentPipelineResults?.multitagResult?.bestTransform.x.toFixed(2) }}&nbsp;m</td>
+          <td>{{ useStateStore().currentPipelineResults?.multitagResult?.bestTransform.y.toFixed(2) }}&nbsp;m</td>
+          <td>{{ useStateStore().currentPipelineResults?.multitagResult?.bestTransform.angle_z.toFixed(2) }}&deg;</td>
           <td>{{ useStateStore().currentPipelineResults?.multitagResult?.fiducialIDsUsed }}</td>
         </tbody>
       </v-simple-table>
diff --git a/photon-client/src/components/settings/ApriltagControlCard.vue b/photon-client/src/components/settings/ApriltagControlCard.vue
index f6a3e30629..b0c64ff7cc 100644
--- a/photon-client/src/components/settings/ApriltagControlCard.vue
+++ b/photon-client/src/components/settings/ApriltagControlCard.vue
@@ -39,11 +39,9 @@ const quaternionToEuler = (rot_quat: Quaternion): { x: number; y: number; z: num
           <tbody>
             <tr v-for="(tag, index) in useSettingsStore().currentFieldLayout.tags" :key="index">
               <td>{{ tag.ID }}</td>
-              <td v-for="(val, idx) in Object.values(tag.pose.translation)" :key="idx">
-                {{ val.toFixed(2) }}
-              </td>
+              <td v-for="(val, idx) in Object.values(tag.pose.translation)" :key="idx">{{ val.toFixed(2) }}&nbsp;m</td>
               <td v-for="(val, idx) in Object.values(quaternionToEuler(tag.pose.rotation.quaternion))" :key="idx + 4">
-                {{ val.toFixed(2) }}
+                {{ val.toFixed(2) }}&deg;
               </td>
             </tr>
           </tbody>