[1.4 backports] Bring master's vehicle-setup updates to 1.4

core/frontend/src/components/app/SettingsMenu.vue

@@ -43,7 +43,7 @@
             <v-btn
               v-tooltip="'Restores BlueOS services to default configurations'"
               class="ma-2"
-              @click="reset_settings"
+              @click="confirm_reset_settings"
             >
               <v-icon left>
                 mdi-cog-refresh
@@ -135,6 +135,12 @@
         </v-card>
       </v-card>
     </v-dialog>
+    <WarningDialog
+      v-model="show_reset_warning"
+      :message="resetWarningMessage"
+      confirm-label="Yes, reset settings"
+      @confirm="onConfirmResetSettings"
+    />
     <v-dialog
       width="380"
       :value="show_reset_dialog"
@@ -153,6 +159,7 @@
 import Vue from 'vue'
 
 import SpinningLogo from '@/components/common/SpinningLogo.vue'
+import WarningDialog from '@/components/common/WarningDialog.vue'
 import filebrowser from '@/libs/filebrowser'
 import Notifier from '@/libs/notifier'
 import bag from '@/store/bag'
@@ -168,6 +175,7 @@ export default Vue.extend({
   name: 'SettingsMenu',
   components: {
     SpinningLogo,
+    WarningDialog,
   },
   data() {
     return {
@@ -177,6 +185,7 @@ export default Vue.extend({
       mavlink_log_folder_size: null as null | string,
       show_dialog: false,
       show_reset_dialog: false,
+      show_reset_warning: false,
       operation_in_progress: false,
       operation_description: '',
       operation_error: undefined as undefined | string,
@@ -186,6 +195,12 @@ export default Vue.extend({
     has_operation_error(): boolean {
       return this.operation_error !== undefined
     },
+    resetWarningMessage(): string {
+      return (
+        'Resetting will restore BlueOS services to their default configurations.\n'
+        + 'This action cannot be undone. Proceed?'
+      )
+    },
   },
   async mounted() {
     await this.get_log_folder_size()
@@ -243,6 +258,13 @@ export default Vue.extend({
         })
       this.operation_in_progress = false
     },
+    confirm_reset_settings(): void {
+      this.show_reset_warning = true
+    },
+    onConfirmResetSettings(): void {
+      this.show_reset_warning = false
+      this.reset_settings()
+    },
     async reset_settings(): Promise<void> {
       this.prepare_operation('Resetting settings...')
 

core/frontend/src/components/common/WarningDialog.vue

@@ -0,0 +1,142 @@
+<template>
+  <v-dialog
+    :value="value"
+    :width="width"
+    :persistent="persistent"
+    @input="emitInput"
+    @click:outside="handleOutsideClick"
+    @keydown.esc="handleEsc"
+  >
+    <v-sheet
+      color="warning"
+      outlined
+    >
+      <v-card variant="outlined">
+        <v-card-title class="align-center">
+          <span class="warning-title">
+            <span
+              class="warning-emoji"
+              aria-label="warning"
+              role="img"
+            >⚠️</span>
+            {{ title }}
+          </span>
+        </v-card-title>
+        <v-card-text :class="['warning-text', textClass]">
+          {{ message }}
+        </v-card-text>
+        <v-card-actions>
+          <v-btn :color="cancelColor" @click="close">
+            {{ cancelLabel }}
+          </v-btn>
+          <v-spacer />
+          <v-btn :color="confirmColor" @click="confirmAndMaybeClose">
+            {{ confirmLabel }}
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-sheet>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+
+export default Vue.extend({
+  name: 'WarningDialog',
+  props: {
+    value: {
+      type: Boolean,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: 'WARNING',
+    },
+    message: {
+      type: String,
+      required: true,
+    },
+    confirmLabel: {
+      type: String,
+      required: true,
+    },
+    cancelLabel: {
+      type: String,
+      default: 'Cancel',
+    },
+    confirmColor: {
+      type: String as PropType<string>,
+      default: 'warning',
+    },
+    cancelColor: {
+      type: String as PropType<string>,
+      default: 'primary',
+    },
+    width: {
+      type: [String, Number] as PropType<string | number>,
+      default: 'fit-content',
+    },
+    persistent: {
+      type: Boolean,
+      default: false,
+    },
+    closeOnOutside: {
+      type: Boolean,
+      default: true,
+    },
+    closeOnEsc: {
+      type: Boolean,
+      default: true,
+    },
+    closeOnConfirm: {
+      type: Boolean,
+      default: true,
+    },
+    textClass: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    emitInput(state: boolean) {
+      this.$emit('input', state)
+    },
+    close() {
+      this.emitInput(false)
+    },
+    handleOutsideClick() {
+      if (this.closeOnOutside && !this.persistent) {
+        this.close()
+      }
+    },
+    handleEsc() {
+      if (this.closeOnEsc && !this.persistent) {
+        this.close()
+      }
+    },
+    confirmAndMaybeClose() {
+      this.$emit('confirm')
+      if (this.closeOnConfirm) {
+        this.close()
+      }
+    },
+  },
+})
+</script>
+
+<style scoped>
+.warning-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.warning-emoji {
+  font-size: 1.2rem;
+}
+
+.warning-text {
+  max-width: 30rem;
+}
+</style>

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

@@ -198,10 +198,16 @@ export default Vue.extend({
     },
     param_value() {
       this.updateSelectedFlags()
-      if (this.last_sent_value === undefined) {
-        this.internal_new_value = this.param_value
-        this.internal_new_value_as_string = String(this.internal_new_value)
+      if (
+        this.last_sent_value !== undefined
+         && this.internal_new_value !== this.last_sent_value
+         && this.param_value === this.last_sent_value
+         && this.param_value === this.last_sent_value
+      ) {
+        return
       }
+      this.internal_new_value = this.param_value
+      this.internal_new_value_as_string = String(this.internal_new_value)
     },
   },
   mounted() {
@@ -307,7 +313,7 @@ export default Vue.extend({
           .map((value) => parseFloat(value))
           .includes(this.internal_new_value)
       }
-      if (this.param?.value) {
+      if (this.param != null) {
         this.internal_new_value_as_string = this.internal_new_value.toString()
       }
 

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

@@ -0,0 +1,71 @@
+<template>
+  <v-card class="mt-4 mb-4">
+    <v-card-text>
+      <v-row align="center">
+        <v-col cols="12">
+          <span class="text-h6">Leak {{ leak_number }}</span>
+        </v-col>
+      </v-row>
+
+      <v-row align="center">
+        <v-col v-if="type_parameter" cols="4">
+          <inline-parameter-editor
+            :param="type_parameter"
+            label="Sensor type"
+            auto-set
+          />
+        </v-col>
+        <v-col v-if="logic_parameter" cols="4">
+          <inline-parameter-editor
+            :param="logic_parameter"
+            label="Logic when dry"
+            auto-set
+          />
+        </v-col>
+        <v-col v-if="failsafe_parameter" cols="4">
+          <inline-parameter-editor
+            :param="failsafe_parameter"
+            label="Failsafe action"
+            auto-set
+          />
+        </v-col>
+      </v-row>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import autopilot_data from '@/store/autopilot'
+import Parameter from '@/types/autopilot/parameter'
+
+import InlineParameterEditor from './InlineParameterEditor.vue'
+
+export default Vue.extend({
+  name: 'LeakSetup',
+  components: {
+    InlineParameterEditor,
+  },
+  props: {
+    leakParameter: {
+      type: Object as () => Parameter,
+      required: true,
+    },
+  },
+  computed: {
+    leak_number(): number {
+      return parseInt(this.leakParameter.name.match(/LEAK(\d+)_TYPE/)?.[1] ?? '0', 10)
+    },
+    type_parameter(): Parameter | undefined {
+      return autopilot_data.parameter(`LEAK${this.leak_number}_TYPE`)
+    },
+    logic_parameter(): Parameter | undefined {
+      return autopilot_data.parameter(`LEAK${this.leak_number}_LOGIC`)
+    },
+    failsafe_parameter(): Parameter | undefined {
+      return autopilot_data.parameter('FS_LEAK_ENABLE')
+    },
+  },
+})
+</script>