frontend: vehiclesetup: failsafes: visual improvements

core/frontend/src/components/parameter-editor/InlineParameterEditor.vue

@@ -17,6 +17,7 @@
             :loading="waiting_for_param_update"
             :label="key"
             :value="2 ** keyvalue"
+            :disabled="disabled"
           />
         </template>
 
@@ -27,6 +28,7 @@
           variant="solo"
           :loading="waiting_for_param_update"
           :items="as_select_items"
+          :disabled="disabled"
         >
           <template #label>
             <parameter-label :label="label ?? 'Select an option'" :param="param" :format-options="formatOptions" />
@@ -38,6 +40,7 @@
           v-else-if="!custom_input && param?.options"
           v-model.number="internal_new_value"
           dense
+          :disabled="disabled"
           :items="as_select_items"
           :indeterminate="waiting_for_param_update"
           @change="updateVariables"
@@ -57,6 +60,7 @@
           :suffix="param.units"
           :rules="forcing_input ? [] : [isInRange, isValidType]"
           :loading="waiting_for_param_update"
+          :disabled="disabled"
           @blur="updateVariables"
           @input="internal_new_value = parseFloat(internal_new_value_as_string)"
         >
@@ -122,6 +126,10 @@ export default Vue.extend({
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

core/frontend/src/components/vehiclesetup/Configure.vue

@@ -44,7 +44,7 @@ import ArdupilotAccelerometerSetup from './configuration/accelerometer/Ardupilot
 import ArdupilotVehicleBodySetup from './configuration/ArdupilotVehicleBodySetup.vue'
 import Camera from './configuration/camera.vue'
 import ArdupilotMavlinkCompassSetup from './configuration/compass/ArdupilotMavlinkCompassSetup.vue'
-import FailsafesConfigration from './configuration/failsafes/Failsafes.vue'
+import FailsafesConfiguration from './configuration/failsafes/Failsafes.vue'
 import LightsConfigration from './configuration/lights.vue'
 import BaroCalib from './overview/BaroCalib.vue'
 import GripperInfo from './overview/gripper.vue'
@@ -77,7 +77,7 @@ export default Vue.extend({
     SpinningLogo,
     GyroCalib,
     BaroCalib,
-    FailsafesConfigration,
+    FailsafesConfiguration,
     Camera,
     NotSafeOverlay,
   },
@@ -96,7 +96,7 @@ export default Vue.extend({
           component: LightsConfigration,
           filter: () => autopilot.vehicle_type === 'Submarine',
         },
-        { title: 'Failsafes', value: 'failsafes', component: FailsafesConfigration },
+        { title: 'Failsafes', value: 'failsafes', component: FailsafesConfiguration },
         { title: 'Camera Gimbal', value: 'camera', component: Camera },
       ] as Item[],
     }
@@ -114,6 +114,6 @@ export default Vue.extend({
 
 <style scoped>
 .main-container {
-  background-color: #135DA3AA !important;
+  background-color: var(--v-mariner_blue-base) !important;
 }
 </style>

core/frontend/src/components/vehiclesetup/configuration/failsafes/FailsafeCard.vue

@@ -2,6 +2,7 @@
   <v-card
     v-if="all_required_params_are_available"
     elevation="2"
+    :class="{ 'disabled-failsafe': is_disabled }"
     class="mb-4 mt-4 pa-4 d-flex flex-row  flex-grow-0 justify-left failsafe-card"
   >
     <div class="ma-4">
@@ -24,7 +25,12 @@
               {{ param.replacementTitle ?? param.name }}
             </v-col>
             <v-col :key="`${param.name}-editor`" cols="5" class="pt-1 pb-1">
-              <inline-parameter-editor :key="failsafeDefinition.name" :auto-set="true" :param="params[param.name]" />
+              <inline-parameter-editor
+                :key="failsafeDefinition.name"
+                :auto-set="true"
+                :disabled="is_disabled && param.name !== actionParamName"
+                :param="params[param.name]"
+              />
             </v-col>
           </v-row>
         </div>
@@ -74,6 +80,16 @@ export default Vue.extend({
     available_params(): ParamDefinitions[] {
       return this.failsafeDefinition.params.filter((param) => param.name in this.params)
     },
+    is_disabled(): boolean {
+      const controlParam = this.findControlParam()
+      if (!controlParam || !(controlParam.name in this.params)) {
+        return false
+      }
+      return this.params[controlParam.name].value === 0
+    },
+    actionParamName(): string | undefined {
+      return this.findControlParam()?.name
+    },
   },
   mounted() {
     this.loadImage()
@@ -84,6 +100,18 @@ export default Vue.extend({
         this.image = response.data
       })
     },
+    findControlParam(): ParamDefinitions | undefined {
+      const enableParam = this.failsafeDefinition.params.find(
+        (p) => p.replacementTitle === 'Enable' || p.name.includes('_ENABLE'),
+      )
+      if (enableParam) {
+        return enableParam
+      }
+
+      return this.failsafeDefinition.params.find(
+        (p) => p.replacementTitle === 'Action',
+      )
+    },
   },
 
 })
@@ -106,4 +134,35 @@ i.svg-icon svg {
   text-align: end;
   margin: auto;
 }
+
+.disabled-failsafe {
+  border: 1px solid var(--v-warning-base) !important;
+  position: relative;
+}
+
+.disabled-failsafe:hover {
+  border-color: var(--v-warning-lighten1) !important;
+  box-shadow: 0 2px 8px rgba(224, 166, 0, 0.2);
+}
+
+.disabled-failsafe::after {
+  content: 'DISABLED';
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background-color: var(--v-warning-base);
+  color: white;
+  padding: 3px 6px;
+  border-radius: 3px;
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.disabled-failsafe .svg-icon {
+  opacity: 0.7;
+  filter: grayscale(30%);
+}
 </style>

core/frontend/src/components/vehiclesetup/configuration/failsafes/Failsafes.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="params_finished_loaded" class="pt-1 pb-1">
-    <div class="ma-3 pa-1 d-flex flex-row flex-wrap flex-grow-0 justify-center">
+    <div class="ma-3 pa-1 d-flex flex-row flex-wrap flex-grow-0 justify-center failsafes-container">
       <failsafe-card
         v-for="failsafeDefinition in failsafes"
         :key="failsafeDefinition.name"
@@ -17,7 +17,7 @@ import autopilot_data from '@/store/autopilot'
 import { FailsafeDefinition } from './types'
 
 export default {
-  name: 'FailsafesConfigration',
+  name: 'FailsafesConfiguration',
   components: {
     failsafeCard,
   },
@@ -114,44 +114,6 @@ export default {
             },
           ],
         },
-        {
-          name: 'Excess Internal Pressure',
-          generalDescription: 'Triggers when the internal pressure is too high. This may help to detect a leak, '
-          + 'and to avoid rapid unplanned disassembly.',
-          image: (await import('@/assets/img/configuration/failsafes/pressure.svg')).default as string,
-          params: [
-
-            {
-              replacementTitle: 'Maximum internal pressure',
-              icon: 'mdi-gauge-full',
-              name: 'FS_PRESS_MAX',
-            },
-            {
-              replacementTitle: 'Action',
-              icon: 'mdi-lightning-bolt',
-              name: 'FS_PRESS_ENABLE',
-            },
-          ],
-        },
-        {
-          name: 'Excess Internal Temperature',
-          generalDescription: 'Triggers when the internal temperature is too high. This may help to prevent '
-          + 'damage to electronics due to overheating.',
-          image: (await import('@/assets/img/configuration/failsafes/temperature.svg')).default as string,
-          params: [
-
-            {
-              replacementTitle: 'Maximum internal temperature',
-              icon: 'mdi-thermometer-high',
-              name: 'FS_TEMP_MAX',
-            },
-            {
-              replacementTitle: 'Action',
-              icon: 'mdi-lightning-bolt',
-              name: 'FS_TEMP_ENABLE',
-            },
-          ],
-        },
         {
           name: 'Low Battery',
           generalDescription: 'Triggers when the voltage goes below specified thresholds.\n This can help to avoid '
@@ -191,6 +153,44 @@ export default {
             },
           ],
         },
+        {
+          name: 'Excess Internal Pressure',
+          generalDescription: 'Triggers when the internal pressure is too high. This may help to detect a leak, '
+          + 'and to avoid rapid unplanned disassembly.',
+          image: (await import('@/assets/img/configuration/failsafes/pressure.svg')).default as string,
+          params: [
+
+            {
+              replacementTitle: 'Maximum internal pressure',
+              icon: 'mdi-gauge-full',
+              name: 'FS_PRESS_MAX',
+            },
+            {
+              replacementTitle: 'Action',
+              icon: 'mdi-lightning-bolt',
+              name: 'FS_PRESS_ENABLE',
+            },
+          ],
+        },
+        {
+          name: 'Excess Internal Temperature',
+          generalDescription: 'Triggers when the internal temperature is too high. This may help to prevent '
+          + 'damage to electronics due to overheating.',
+          image: (await import('@/assets/img/configuration/failsafes/temperature.svg')).default as string,
+          params: [
+
+            {
+              replacementTitle: 'Maximum internal temperature',
+              icon: 'mdi-thermometer-high',
+              name: 'FS_TEMP_MAX',
+            },
+            {
+              replacementTitle: 'Action',
+              icon: 'mdi-lightning-bolt',
+              name: 'FS_TEMP_ENABLE',
+            },
+          ],
+        },
         {
           name: 'Sensor Fusion Uncertainty',
           generalDescription: 'Triggers when the EKF variances surpass a given threshold, '
@@ -233,4 +233,8 @@ export default {
   column-gap: 10px;
   padding: 10px;
 }
+
+.failsafes-container {
+  gap: 8px;
+}
 </style>