frontend: add ServoFunctionEditorDialog

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

@@ -0,0 +1,135 @@
+<template>
+  <v-dialog
+    :value="value"
+    max-width="600px"
+    @input="$emit('input', $event)"
+  >
+    <v-card>
+      <v-card-title>
+        Parameter Editor
+        <v-spacer />
+        <v-btn
+          icon
+          @click="$emit('input', false)"
+        >
+          <v-icon>mdi-close</v-icon>
+        </v-btn>
+      </v-card-title>
+
+      <v-card-text>
+        <inline-parameter-editor
+          :label="param.name"
+          :param="param"
+        />
+        <v-row>
+          <v-col
+            cols="12"
+            sm="4"
+          >
+            <inline-parameter-editor
+              :label="max_param?.name"
+              :param="max_param"
+            />
+          </v-col>
+          <v-col
+            cols="12"
+            sm="4"
+          >
+            <inline-parameter-editor
+              :label="trim_param?.name"
+              :param="trim_param"
+            />
+          </v-col>
+          <v-col
+            cols="12"
+            sm="4"
+          >
+            <inline-parameter-editor
+              :label="min_param?.name"
+              :param="min_param"
+            />
+          </v-col>
+        </v-row>
+      </v-card-text>
+
+      <v-card-actions>
+        <v-spacer />
+        <v-btn
+          color="primary"
+          @click="$emit('input', false)"
+        >
+          Close
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import Notifier from '@/libs/notifier'
+import autopilot from '@/store/autopilot'
+import Parameter from '@/types/autopilot/parameter'
+import { autopilot_service } from '@/types/frontend_services'
+
+import InlineParameterEditor from './InlineParameterEditor.vue'
+
+export default Vue.extend({
+  name: 'ServoFunctionEditorDialog',
+  components: {
+    InlineParameterEditor,
+  },
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+  props: {
+    value: {
+      type: Boolean,
+      required: true,
+    },
+    param: {
+      type: Object as () => Parameter,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      paramValues: {} as { [key: string]: string | number },
+    }
+  },
+  computed: {
+    trim_param(): Parameter | undefined {
+      const name = this.param.name.replace('_FUNCTION', '_TRIM')
+      return autopilot.parameter(name)
+    },
+    max_param(): Parameter | undefined {
+      const name = this.param.name.replace('_FUNCTION', '_MAX')
+      return autopilot.parameter(name)
+    },
+    min_param(): Parameter | undefined {
+      const name = this.param.name.replace('_FUNCTION', '_MIN')
+      return autopilot.parameter(name)
+    },
+  },
+  watch: {
+    param: {
+      handler(newParam: Parameter) {
+        // Initialize paramValues with current parameter values
+        this.$set(this.paramValues, newParam.name, newParam.value)
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+
+  },
+})
+</script>
+
+<style scoped>
+.parameter-card {
+  margin-bottom: 12px;
+}
+</style>

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

@@ -142,17 +142,17 @@
         </v-card>
       </v-col>
     </v-row>
-    <parameter-editor-dialog
+    <servo-function-editor-dialog
       v-model="edit_param_dialog"
-      :param="param"
+      :param="selected_param"
     />
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 
-import ParameterEditorDialog from '@/components/parameter-editor/ParameterEditorDialog.vue'
+import ServoFunctionEditorDialog from '@/components/parameter-editor/ServoFunctionEditorDialog.vue'
 import MotorDetection from '@/components/vehiclesetup/MotorDetection.vue'
 import VehicleViewer from '@/components/vehiclesetup/viewers/VehicleViewer.vue'
 import {
@@ -199,7 +199,7 @@ const param_value_map = {
 export default Vue.extend({
   name: 'PwmSetup',
   components: {
-    ParameterEditorDialog,
+    ServoFunctionEditorDialog,
     ParameterSwitch,
     VehicleViewer,
     MotorDetection,
@@ -209,7 +209,7 @@ export default Vue.extend({
       highlight: ['Motor', 'Light', 'Mount', 'Gripper'],
       default_highlight: ['Motor', 'Light', 'Mount', 'Gripper'],
       edit_param_dialog: false,
-      param: undefined as Parameter | undefined,
+      selected_param: undefined as Parameter | undefined,
       motor_targets: {} as {[key: number]: number},
       motor_zeroer_interval: undefined as undefined | number,
       motor_writer_interval: undefined as undefined | number,
@@ -426,7 +426,7 @@ export default Vue.extend({
       return `width: ${Math.abs(percent)}%; left: ${left}%; background-color: red`
     },
     showParamEdit(param: Parameter) {
-      this.param = param
+      this.selected_param = param
       this.edit_param_dialog = true
     },
     stringToUserFriendlyText(text: string) {