frontend: vehiclesetup: failsafes: add visual indication when a failsafe is disabled

Author: nicoschmdt

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>