From 1077d39e11011913e536c8bb3366481590c5bb38 Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Wed, 16 Feb 2022 22:57:06 +0100
Subject: [PATCH 1/4] refactor: use new NumberInput in MotionSettings

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 src/components/inputs/MotionSettingsInput.vue | 110 ------------------
 .../panels/MachineSettings/MotionSettings.vue |  91 ++++++++++++---
 2 files changed, 73 insertions(+), 128 deletions(-)
 delete mode 100644 src/components/inputs/MotionSettingsInput.vue

diff --git a/src/components/inputs/MotionSettingsInput.vue b/src/components/inputs/MotionSettingsInput.vue
deleted file mode 100644
index 0f6925935..000000000
--- a/src/components/inputs/MotionSettingsInput.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<style scoped>
-._spin_button_group {
-    width: 24px;
-    margin: -6px -6px 0 -6px;
-}
-</style>
-
-<template>
-    <form v-on:submit.prevent="sendCmd">
-        <v-text-field
-            v-model="value"
-            class="d-flex align-center"
-            @click:append="resetLimit"
-            @blur="value = target"
-            :label="label"
-            :suffix="unit"
-            :append-icon="value !== defaultValue ? 'mdi-restart' : ''"
-            :error="(error = value < min || (value > max && max !== null))"
-            :step="step"
-            :min="min"
-            :max="max"
-            :dec="dec"
-            type="number"
-            hide-spin-buttons
-            hide-details
-            outlined
-            dense>
-            <template v-if="hasSpinner" v-slot:append-outer>
-                <div class="_spin_button_group">
-                    <v-btn
-                        @click="increment"
-                        :disabled="(value >= max && max !== null) || error"
-                        class="mt-n3"
-                        icon
-                        plain
-                        small>
-                        <v-icon>mdi-chevron-up</v-icon>
-                    </v-btn>
-                    <v-btn @click="decrement" :disabled="value <= min || error" class="mb-n3" icon plain small>
-                        <v-icon>mdi-chevron-down</v-icon>
-                    </v-btn>
-                </div>
-            </template>
-        </v-text-field>
-    </form>
-</template>
-
-<script lang="ts">
-import Component from 'vue-class-component'
-import { Mixins, Prop, Watch } from 'vue-property-decorator'
-import { Debounce } from 'vue-debounce-decorator'
-import BaseMixin from '@/components/mixins/base'
-
-@Component
-export default class MotionSettingsInput extends Mixins(BaseMixin) {
-    private value: number = 0
-    private error: boolean | undefined
-
-    @Prop({ type: String, required: true }) declare readonly label: string
-    @Prop({ type: Number, required: false, default: 1 }) declare readonly step: number
-    @Prop({ type: Boolean, required: false, default: false }) declare readonly hasSpinner: number
-    @Prop({ type: Number, required: false, default: 1 }) declare readonly spinnerFactor: number
-    @Prop({ type: Number, required: true, default: 0 }) declare readonly min: number
-    @Prop({ type: Number, default: null }) declare readonly max: number | null
-    @Prop({ type: Number, required: true, default: 0 }) declare readonly dec: number
-    @Prop({ type: Number, required: true, default: 0 }) declare readonly target: number
-    @Prop({ type: Number, required: true, default: 0 }) declare readonly defaultValue: number
-    @Prop({ type: String, required: true }) declare readonly attributeName: string
-    @Prop({ type: String, required: true }) declare readonly unit: string
-
-    @Watch('target')
-    targetChanged(newVal: number): void {
-        this.value = newVal
-    }
-
-    created(): void {
-        this.value = this.target
-    }
-
-    resetLimit(): void {
-        this.value = this.defaultValue
-
-        this.sendCmd()
-    }
-
-    decrement(): void {
-        this.value =
-            this.value > this.min
-                ? Math.round((this.value - this.step * this.spinnerFactor) * 10 ** this.dec) / 10 ** this.dec
-                : this.min
-        this.sendCmd()
-    }
-
-    increment(): void {
-        this.value =
-            this.value < this.max! || this.max === null
-                ? Math.round((this.value + this.step * this.spinnerFactor) * 10 ** this.dec) / 10 ** this.dec
-                : this.max
-        this.sendCmd()
-    }
-
-    @Debounce(500)
-    sendCmd(): void {
-        const gcode =
-            'SET_VELOCITY_LIMIT ' + this.attributeName + '=' + Math.max(this.min, this.value).toFixed(this.dec)
-        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
-        this.$socket.emit('printer.gcode.script', { script: gcode })
-    }
-}
-</script>
diff --git a/src/components/panels/MachineSettings/MotionSettings.vue b/src/components/panels/MachineSettings/MotionSettings.vue
index 31d1c81d5..a506840a6 100644
--- a/src/components/panels/MachineSettings/MotionSettings.vue
+++ b/src/components/panels/MachineSettings/MotionSettings.vue
@@ -2,61 +2,73 @@
     <v-card-text>
         <v-row>
             <v-col class="col-12 col-md-6">
-                <motion-settings-input
+                <number-input
                     :label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity').toString()"
+                    param="velocity"
+                    @submit="sendCmd"
+                    @target-changed="updateValue"
                     :target="current_velocity"
                     :default-value="max_velocity"
+                    :output-error-msg="true"
                     :hasSpinner="true"
                     :spinnerFactor="5"
                     :step="1"
                     :min="1"
                     :max="null"
                     :dec="0"
-                    unit="mm/s"
-                    attribute-name="VELOCITY"></motion-settings-input>
+                    unit="mm/s"></number-input>
             </v-col>
             <v-col class="col-12 col-md-6">
-                <motion-settings-input
+                <number-input
                     :label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity').toString()"
+                    param="squareCornerVelocity"
+                    @submit="sendCmd"
+                    @target-changed="updateValue"
                     :target="current_square_corner_velocity"
                     :default-value="max_square_corner_velocity"
+                    :output-error-msg="true"
                     :hasSpinner="true"
                     :step="0.1"
                     :min="0.1"
                     :max="null"
                     :dec="1"
-                    unit="mm/s"
-                    attribute-name="SQUARE_CORNER_VELOCITY"></motion-settings-input>
+                    unit="mm/s"></number-input>
             </v-col>
         </v-row>
         <v-row>
             <v-col class="col-12 col-md-6">
-                <motion-settings-input
+                <number-input
                     :label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration').toString()"
+                    param="acceleration"
+                    @submit="sendCmd"
+                    @target-changed="updateValue"
                     :target="current_accel"
                     :default-value="max_accel"
+                    :output-error-msg="true"
                     :hasSpinner="true"
                     :spinnerFactor="100"
                     :step="1"
                     :min="1"
                     :max="null"
                     :dec="0"
-                    unit="mm/s²"
-                    attribute-name="ACCEL"></motion-settings-input>
+                    unit="mm/s²"></number-input>
             </v-col>
             <v-col class="col-12 col-md-6">
-                <motion-settings-input
+                <number-input
                     :label="$t('Panels.MachineSettingsPanel.MotionSettings.MaxAccelToDecel').toString()"
+                    param="accelToDecel"
+                    @submit="sendCmd"
+                    @target-changed="updateValue"
                     :target="current_accel_to_decel"
                     :default-value="max_accel_to_decel"
+                    :output-error-msg="true"
                     :hasSpinner="true"
                     :spinnerFactor="100"
                     :step="1"
                     :min="1"
                     :max="null"
                     :dec="0"
-                    unit="mm/s²"
-                    attribute-name="ACCEL_TO_DECEL"></motion-settings-input>
+                    unit="mm/s²"></number-input>
             </v-col>
         </v-row>
     </v-card-text>
@@ -64,28 +76,39 @@
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
+import { Debounce } from 'vue-debounce-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
-import MotionSettingsInput from '@/components/inputs/MotionSettingsInput.vue'
+import NumberInput from '@/components/inputs/NumberInput.vue'
 
 @Component({
-    components: { Panel, MotionSettingsInput },
+    components: { Panel, NumberInput },
 })
 export default class MotionSettings extends Mixins(BaseMixin) {
+    private declare velocity: number
+    private declare acceleration: number
+    private declare accelToDecel: number
+    private declare squareCornerVelocity: number
+
     get current_velocity(): number {
-        return Math.trunc(this.$store.state.printer?.toolhead?.max_velocity ?? 300)
+        this.velocity = Math.trunc(this.$store.state.printer?.toolhead?.max_velocity ?? 300)
+        return this.velocity
     }
 
     get current_accel(): number {
-        return Math.trunc(this.$store.state.printer?.toolhead?.max_accel ?? 3000)
+        this.acceleration = Math.trunc(this.$store.state.printer?.toolhead?.max_accel ?? 3000)
+        return this.acceleration
     }
 
     get current_accel_to_decel(): number {
-        return Math.trunc(this.$store.state.printer?.toolhead?.max_accel_to_decel ?? 1500)
+        this.accelToDecel = Math.trunc(this.$store.state.printer?.toolhead?.max_accel_to_decel ?? 1500)
+        return this.accelToDecel
     }
 
     get current_square_corner_velocity(): number {
-        return Math.floor((this.$store.state.printer?.toolhead?.square_corner_velocity ?? 8) * 10) / 10
+        this.squareCornerVelocity =
+            Math.floor((this.$store.state.printer?.toolhead?.square_corner_velocity ?? 8) * 10) / 10
+        return this.squareCornerVelocity
     }
 
     get max_velocity(): number {
@@ -106,5 +129,37 @@ export default class MotionSettings extends Mixins(BaseMixin) {
             10
         )
     }
+
+    updateValue(param: string, newVal: number) {
+        const params = ['velocity', 'acceleration', 'accelToDecel', 'squareCornerVelocity']
+        if (!params.includes(param)) return
+
+        switch (param) {
+            case 'velocity':
+                this.velocity = newVal
+                break
+            case 'acceleration':
+                this.acceleration = newVal
+                break
+            case 'accelToDecel':
+                this.accelToDecel = newVal
+                break
+            case 'squareCornerVelocity':
+                this.squareCornerVelocity = newVal
+                break
+        }
+    }
+
+    @Debounce(500)
+    sendCmd(): void {
+        let gcode = `SET_VELOCITY_LIMIT`
+        gcode += ` VELOCITY=${this.velocity}`
+        gcode += ` ACCEL=${this.acceleration}`
+        gcode += ` ACCEL_TO_DECEL=${this.accelToDecel}`
+        gcode += ` SQUARE_CORNER_VELOCITY=${this.squareCornerVelocity}`
+
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode })
+    }
 }
 </script>

From 81d3ba9a3d4bf2c5c9eae5a69d8669c48597db24 Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Fri, 18 Feb 2022 14:30:39 +0100
Subject: [PATCH 2/4] refactor: use new NumberInput in PressureAdvance and
 FirmwareRetraction Settings

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 components.d.ts                               |   3 -
 .../FirmwareRetractionSettingsInput.vue       | 109 ----------------
 .../inputs/PressureAdvanceSettingsInput.vue   | 117 ------------------
 .../FirmwareRetractionSettings.vue            |  92 +++++++++++---
 .../PressureAdvanceSettings.vue               |  59 +++++++--
 5 files changed, 123 insertions(+), 257 deletions(-)
 delete mode 100644 src/components/inputs/FirmwareRetractionSettingsInput.vue
 delete mode 100644 src/components/inputs/PressureAdvanceSettingsInput.vue

diff --git a/components.d.ts b/components.d.ts
index 44d756bf8..f8d74a7b1 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -21,7 +21,6 @@ declare module 'vue' {
     FarmPrinterPanel: typeof import('./src/components/panels/FarmPrinterPanel.vue')['default']
     FilamentSensor: typeof import('./src/components/inputs/FilamentSensor.vue')['default']
     FirmwareRetractionSettings: typeof import('./src/components/panels/MachineSettings/FirmwareRetractionSettings.vue')['default']
-    FirmwareRetractionSettingsInput: typeof import('./src/components/inputs/FirmwareRetractionSettingsInput.vue')['default']
     GcodefilesPanel: typeof import('./src/components/panels/GcodefilesPanel.vue')['default']
     HistoryAllPrintStatus: typeof import('./src/components/charts/HistoryAllPrintStatus.vue')['default']
     HistoryFilamentUsage: typeof import('./src/components/charts/HistoryFilamentUsage.vue')['default']
@@ -46,12 +45,10 @@ declare module 'vue' {
     MjpegstreamerAdaptive: typeof import('./src/components/webcams/MjpegstreamerAdaptive.vue')['default']
     MoonrakerStatePanel: typeof import('./src/components/panels/MoonrakerStatePanel.vue')['default']
     MotionSettings: typeof import('./src/components/panels/MachineSettings/MotionSettings.vue')['default']
-    MotionSettingsInput: typeof import('./src/components/inputs/MotionSettingsInput.vue')['default']
     NumberInput: typeof import('./src/components/inputs/NumberInput.vue')['default']
     Panel: typeof import('./src/components/ui/Panel.vue')['default']
     PowerControlPanel: typeof import('./src/components/panels/PowerControlPanel.vue')['default']
     PressureAdvanceSettings: typeof import('./src/components/panels/MachineSettings/PressureAdvanceSettings.vue')['default']
-    PressureAdvanceSettingsInput: typeof import('./src/components/inputs/PressureAdvanceSettingsInput.vue')['default']
     PrinterSelector: typeof import('./src/components/ui/PrinterSelector.vue')['default']
     PrintsettingsPanel: typeof import('./src/components/panels/PrintsettingsPanel.vue')['default']
     SettingsConsoleTab: typeof import('./src/components/settings/SettingsConsoleTab.vue')['default']
diff --git a/src/components/inputs/FirmwareRetractionSettingsInput.vue b/src/components/inputs/FirmwareRetractionSettingsInput.vue
deleted file mode 100644
index ea5ba42ce..000000000
--- a/src/components/inputs/FirmwareRetractionSettingsInput.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<style scoped>
-._spin_button_group {
-    width: 24px;
-    margin: -6px -6px 0 -6px;
-}
-</style>
-
-<template>
-    <form v-on:submit.prevent="sendCmd">
-        <v-text-field
-            v-model="value"
-            class="d-flex align-center"
-            @click:append="resetLimit"
-            @blur="value = target"
-            :label="label"
-            :suffix="unit"
-            :append-icon="value !== defaultValue ? 'mdi-restart' : ''"
-            :error="(error = value < min || (value > max && max !== null))"
-            :step="step"
-            :min="min"
-            :max="max"
-            :dec="dec"
-            type="number"
-            hide-spin-buttons
-            hide-details
-            outlined
-            dense>
-            <template v-if="hasSpinner" v-slot:append-outer>
-                <div class="_spin_button_group">
-                    <v-btn
-                        @click="increment"
-                        :disabled="(value >= max && max !== null) || error"
-                        class="mt-n3"
-                        icon
-                        plain
-                        small>
-                        <v-icon>mdi-chevron-up</v-icon>
-                    </v-btn>
-                    <v-btn @click="decrement" :disabled="value <= min || error" class="mb-n3" icon plain small>
-                        <v-icon>mdi-chevron-down</v-icon>
-                    </v-btn>
-                </div>
-            </template>
-        </v-text-field>
-    </form>
-</template>
-
-<script lang="ts">
-import Component from 'vue-class-component'
-import { Mixins, Prop, Watch } from 'vue-property-decorator'
-import { Debounce } from 'vue-debounce-decorator'
-import BaseMixin from '@/components/mixins/base'
-
-@Component
-export default class FirmwareRetractionSettingsInput extends Mixins(BaseMixin) {
-    private value: number = 0
-    private error: boolean | undefined
-
-    @Prop({ type: String, required: true }) declare readonly label: string
-    @Prop({ type: Number, required: false, default: 1 }) declare readonly step: number
-    @Prop({ type: Boolean, required: false, default: false }) declare readonly hasSpinner: number
-    @Prop({ type: Number, required: false, default: 1 }) declare readonly spinnerFactor: number
-    @Prop({ type: Number, required: true, default: 0 }) declare readonly min: number
-    @Prop({ type: Number, default: null }) declare readonly max: number | null
-    @Prop({ type: Number, required: true, default: 0 }) declare readonly dec: number
-    @Prop({ type: Number, required: true, default: 0 }) declare readonly target: number
-    @Prop({ type: Number, required: true, default: 0 }) declare readonly defaultValue: number
-    @Prop({ type: String, required: true }) declare readonly attributeName: string
-    @Prop({ type: String, required: true }) declare readonly unit: string
-
-    @Watch('target')
-    targetChanged(newVal: number): void {
-        this.value = newVal
-    }
-
-    created(): void {
-        this.value = this.target
-    }
-
-    resetLimit(): void {
-        this.value = this.defaultValue
-
-        this.sendCmd()
-    }
-
-    decrement(): void {
-        this.value =
-            this.value > this.min
-                ? Math.round((this.value - this.step * this.spinnerFactor) * 10 ** this.dec) / 10 ** this.dec
-                : this.min
-        this.sendCmd()
-    }
-
-    increment(): void {
-        this.value =
-            this.value < this.max! || this.max === null
-                ? Math.round((this.value + this.step * this.spinnerFactor) * 10 ** this.dec) / 10 ** this.dec
-                : this.max
-        this.sendCmd()
-    }
-
-    @Debounce(500)
-    sendCmd(): void {
-        const gcode = 'SET_RETRACTION ' + this.attributeName + '=' + Math.max(this.min, this.value).toFixed(this.dec)
-        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
-        this.$socket.emit('printer.gcode.script', { script: gcode })
-    }
-}
-</script>
diff --git a/src/components/inputs/PressureAdvanceSettingsInput.vue b/src/components/inputs/PressureAdvanceSettingsInput.vue
deleted file mode 100644
index 921b7b53a..000000000
--- a/src/components/inputs/PressureAdvanceSettingsInput.vue
+++ /dev/null
@@ -1,117 +0,0 @@
-<style scoped>
-._spin_button_group {
-    width: 24px;
-    margin: -6px -6px 0 -6px;
-}
-</style>
-
-<template>
-    <form v-on:submit.prevent="sendCmd">
-        <v-text-field
-            v-model="value"
-            class="d-flex align-center"
-            @click:append="resetLimit"
-            @blur="value = target"
-            :label="label"
-            :suffix="unit"
-            :append-icon="value !== defaultValue ? 'mdi-restart' : ''"
-            :error="(error = value < min || (value > max && max !== null))"
-            :step="step"
-            :min="min"
-            :max="max"
-            :dec="dec"
-            type="number"
-            hide-spin-buttons
-            hide-details
-            outlined
-            dense>
-            <template v-if="hasSpinner" v-slot:append-outer>
-                <div class="_spin_button_group">
-                    <v-btn
-                        @click="increment"
-                        :disabled="(value >= max && max !== null) || error"
-                        class="mt-n3"
-                        icon
-                        plain
-                        small>
-                        <v-icon>mdi-chevron-up</v-icon>
-                    </v-btn>
-                    <v-btn @click="decrement" :disabled="value <= min || error" class="mb-n3" icon plain small>
-                        <v-icon>mdi-chevron-down</v-icon>
-                    </v-btn>
-                </div>
-            </template>
-        </v-text-field>
-    </form>
-</template>
-
-<script lang="ts">
-import Component from 'vue-class-component'
-import { Mixins, Prop, Watch } from 'vue-property-decorator'
-import { Debounce } from 'vue-debounce-decorator'
-import BaseMixin from '@/components/mixins/base'
-
-@Component
-export default class PressureAdvanceSettingsInput extends Mixins(BaseMixin) {
-    private value: number = 0
-    private error: boolean | undefined
-
-    @Prop({ type: String, required: true }) declare readonly label: string
-    @Prop({ type: Number, required: false, default: 1 }) declare readonly step: number
-    @Prop({ type: Boolean, required: false, default: false }) declare readonly hasSpinner: number
-    @Prop({ type: Number, required: false, default: 1 }) declare readonly spinnerFactor: number
-    @Prop({ type: Number, required: true, default: 0 }) declare readonly min: number
-    @Prop({ type: Number, default: null }) declare readonly max: number | null
-    @Prop({ type: Number, required: true, default: 0 }) declare readonly dec: number
-    @Prop({ type: Number, required: true, default: 0 }) declare readonly target: number
-    @Prop({ type: Number, required: true, default: 0 }) declare readonly defaultValue: number
-    @Prop({ type: String, required: true, default: 'extruder' }) declare readonly extruder: string
-    @Prop({ type: String, required: true }) declare readonly attributeName: string
-    @Prop({ type: String, required: true }) declare readonly unit: string
-
-    @Watch('target')
-    targetChanged(newVal: number): void {
-        this.value = newVal
-    }
-
-    created(): void {
-        this.value = this.target
-    }
-
-    resetLimit(): void {
-        this.value = this.defaultValue
-
-        this.sendCmd()
-    }
-
-    decrement(): void {
-        this.value =
-            this.value > this.min
-                ? Math.round((this.value - this.step * this.spinnerFactor) * 10 ** this.dec) / 10 ** this.dec
-                : this.min
-        this.sendCmd()
-    }
-
-    increment(): void {
-        this.value =
-            this.value < this.max! || this.max === null
-                ? Math.round((this.value + this.step * this.spinnerFactor) * 10 ** this.dec) / 10 ** this.dec
-                : this.max
-        this.sendCmd()
-    }
-
-    @Debounce(500)
-    sendCmd(): void {
-        const gcode =
-            'SET_PRESSURE_ADVANCE ' +
-            'EXTRUDER=' +
-            this.extruder +
-            ' ' +
-            this.attributeName +
-            '=' +
-            Math.max(this.min, this.value).toFixed(this.dec)
-        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
-        this.$socket.emit('printer.gcode.script', { script: gcode })
-    }
-}
-</script>
diff --git a/src/components/panels/MachineSettings/FirmwareRetractionSettings.vue b/src/components/panels/MachineSettings/FirmwareRetractionSettings.vue
index 9e38cc80b..90b039115 100644
--- a/src/components/panels/MachineSettings/FirmwareRetractionSettings.vue
+++ b/src/components/panels/MachineSettings/FirmwareRetractionSettings.vue
@@ -2,64 +2,76 @@
     <v-card-text>
         <v-row>
             <v-col class="col-12 col-md-6">
-                <firmware-retraction-settings-input
+                <number-input
                     :label="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.RetractLength').toString()"
+                    param="retractLength"
+                    @submit="sendCmd"
+                    @target-changed="updateValue"
                     :target="current_retract_length"
                     :default-value="config_retract_length"
+                    :output-error-msg="true"
                     :hasSpinner="true"
                     :spinnerFactor="10"
                     :step="0.01"
                     :min="0"
                     :max="null"
                     :dec="2"
-                    unit="mm"
-                    attribute-name="RETRACT_LENGTH"></firmware-retraction-settings-input>
+                    unit="mm"></number-input>
             </v-col>
             <v-col class="col-12 col-md-6">
-                <firmware-retraction-settings-input
+                <number-input
                     :label="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.RetractSpeed').toString()"
+                    param="retractSpeed"
+                    @submit="sendCmd"
+                    @target-changed="updateValue"
                     :target="current_retract_speed"
                     :default-value="config_retract_speed"
+                    :output-error-msg="true"
                     :hasSpinner="true"
                     :spinnerFactor="5"
                     :step="1"
                     :min="1"
                     :max="null"
                     :dec="0"
-                    unit="mm/s"
-                    attribute-name="RETRACT_SPEED"></firmware-retraction-settings-input>
+                    unit="mm/s"></number-input>
             </v-col>
         </v-row>
         <v-row>
             <v-col class="col-12 col-md-6">
-                <firmware-retraction-settings-input
+                <number-input
                     :label="
                         $t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.UnretractExtraLength').toString()
                     "
+                    param="unretractExtraLength"
+                    @submit="sendCmd"
+                    @target-changed="updateValue"
                     :target="current_unretract_extra_length"
                     :default-value="config_unretract_extra_length"
+                    :output-error-msg="true"
                     :hasSpinner="true"
                     :spinnerFactor="10"
                     :step="0.01"
                     :min="0"
                     :max="null"
                     :dec="2"
-                    unit="mm"
-                    attribute-name="UNRETRACT_EXTRA_LENGTH"></firmware-retraction-settings-input>
+                    unit="mm"></number-input>
             </v-col>
             <v-col class="col-12 col-md-6">
-                <firmware-retraction-settings-input
+                <number-input
                     :label="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.UnretractSpeed').toString()"
+                    param="unretractSpeed"
+                    @submit="sendCmd"
+                    @target-changed="updateValue"
                     :target="current_unretract_speed"
                     :default-value="config_unretract_speed"
+                    :output-error-msg="true"
                     :hasSpinner="true"
                     :spinnerFactor="5"
                     :step="1"
                     :min="1"
                     :max="null"
                     :dec="0"
-                    unit="mm/s"
-                    attribute-name="UNRETRACT_SPEED"></firmware-retraction-settings-input>
+                    unit="mm/s"></number-input>
             </v-col>
         </v-row>
     </v-card-text>
@@ -67,28 +79,40 @@
 
 <script lang="ts">
 import { Component, Mixins } from 'vue-property-decorator'
+import { Debounce } from 'vue-debounce-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
-import FirmwareRetractionSettingsInput from '@/components/inputs/FirmwareRetractionSettingsInput.vue'
+import NumberInput from '@/components/inputs/NumberInput.vue'
 
 @Component({
-    components: { Panel, FirmwareRetractionSettingsInput },
+    components: { Panel, NumberInput },
 })
 export default class FirmwareRetractionSettings extends Mixins(BaseMixin) {
+    private declare retractLength: number
+    private declare retractSpeed: number
+    private declare unretractExtraLength: number
+    private declare unretractSpeed: number
+
     get current_retract_length(): number {
-        return Math.floor((this.$store.state.printer?.firmware_retraction?.retract_length ?? 0) * 100) / 100
+        this.retractLength =
+            Math.floor((this.$store.state.printer?.firmware_retraction?.retract_length ?? 0) * 100) / 100
+        return this.retractLength
     }
 
     get current_retract_speed(): number {
-        return Math.trunc(this.$store.state.printer?.firmware_retraction?.retract_speed ?? 20)
+        this.retractSpeed = Math.trunc(this.$store.state.printer?.firmware_retraction?.retract_speed ?? 20)
+        return this.retractSpeed
     }
 
     get current_unretract_extra_length(): number {
-        return Math.floor((this.$store.state.printer?.firmware_retraction?.unretract_extra_length ?? 0) * 100) / 100
+        this.unretractExtraLength =
+            Math.floor((this.$store.state.printer?.firmware_retraction?.unretract_extra_length ?? 0) * 100) / 100
+        return this.unretractExtraLength
     }
 
     get current_unretract_speed(): number {
-        return Math.trunc(this.$store.state.printer?.firmware_retraction?.unretract_speed ?? 10)
+        this.unretractSpeed = Math.trunc(this.$store.state.printer?.firmware_retraction?.unretract_speed ?? 10)
+        return this.unretractSpeed
     }
 
     get config_retract_length(): number {
@@ -115,5 +139,37 @@ export default class FirmwareRetractionSettings extends Mixins(BaseMixin) {
     get config_unretract_speed(): number {
         return Math.trunc(this.$store.state.printer?.configfile?.settings?.firmware_retraction?.unretract_speed ?? 0)
     }
+
+    updateValue(param: string, newVal: number) {
+        const params = ['retractLength', 'retractSpeed', 'unretractExtraLength', 'unretractSpeed']
+        if (!params.includes(param)) return
+
+        switch (param) {
+            case 'retractLength':
+                this.retractLength = newVal
+                break
+            case 'retractSpeed':
+                this.retractSpeed = newVal
+                break
+            case 'unretractExtraLength':
+                this.unretractExtraLength = newVal
+                break
+            case 'unretractSpeed':
+                this.unretractSpeed = newVal
+                break
+        }
+    }
+
+    @Debounce(500)
+    sendCmd(): void {
+        let gcode = `SET_RETRACTION`
+        gcode += ` RETRACT_LENGTH=${this.retractLength}`
+        gcode += ` RETRACT_SPEED=${this.retractSpeed}`
+        gcode += ` UNRETRACT_EXTRA_LENGTH=${this.unretractExtraLength}`
+        gcode += ` UNRETRACT_SPEED=${this.unretractSpeed}`
+
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode })
+    }
 }
 </script>
diff --git a/src/components/panels/MachineSettings/PressureAdvanceSettings.vue b/src/components/panels/MachineSettings/PressureAdvanceSettings.vue
index 657f9c0ba..3ef4b218c 100644
--- a/src/components/panels/MachineSettings/PressureAdvanceSettings.vue
+++ b/src/components/panels/MachineSettings/PressureAdvanceSettings.vue
@@ -22,33 +22,39 @@
                 </div>
             </v-col>
             <v-col :class="this.all_extruders.length > 1 ? 'col-12 col-md-6 col-xl-4' : 'col-12 col-md-6'">
-                <pressure-advance-settings-input
+                <number-input
                     :label="$t('Panels.MachineSettingsPanel.PressureAdvanceSettings.Advance').toString()"
+                    param="advance"
+                    @submit="sendCmd"
+                    @target-changed="updateValue"
                     :target="current_pressure_advance"
                     :default-value="default_pressure_advance"
                     :extruder="selectedExtruder"
+                    :output-error-msg="true"
                     :hasSpinner="true"
                     :min="0"
                     :max="null"
                     :step="0.001"
                     :dec="3"
-                    unit="mm/s"
-                    attribute-name="ADVANCE"></pressure-advance-settings-input>
+                    unit="mm/s"></number-input>
             </v-col>
             <v-col :class="this.all_extruders.length > 1 ? 'col-12 col-md-6 col-xl-4' : 'col-12 col-md-6'">
-                <pressure-advance-settings-input
+                <number-input
                     :label="$t('Panels.MachineSettingsPanel.PressureAdvanceSettings.SmoothTime').toString()"
+                    param="smoothTime"
+                    @submit="sendCmd"
+                    @target-changed="updateValue"
                     :target="current_smooth_time"
                     :default-value="default_smooth_time"
                     :extruder="selectedExtruder"
+                    :output-error-msg="true"
                     :hasSpinner="true"
                     :min="0"
                     :max="0.2"
                     :step="0.001"
                     :spinnerFactor="10"
                     :dec="3"
-                    unit="s"
-                    attribute-name="SMOOTH_TIME"></pressure-advance-settings-input>
+                    unit="s"></number-input>
             </v-col>
         </v-row>
     </v-card-text>
@@ -58,15 +64,19 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
-import PressureAdvanceSettingsInput from '@/components/inputs/PressureAdvanceSettingsInput.vue'
+import NumberInput from '@/components/inputs/NumberInput.vue'
+import { Debounce } from 'vue-debounce-decorator'
 
 @Component({
-    components: { Panel, PressureAdvanceSettingsInput },
+    components: { Panel, NumberInput },
 })
 export default class PressureAdvanceSettings extends Mixins(BaseMixin) {
     private extruders: string[] = []
     private selectedExtruder = ''
 
+    private declare advance: number
+    private declare smoothTime: number
+
     resetToActiveExtruder(): void {
         this.selectedExtruder = this.$store.state.printer.toolhead?.extruder
     }
@@ -86,11 +96,15 @@ export default class PressureAdvanceSettings extends Mixins(BaseMixin) {
     }
 
     get current_pressure_advance(): number {
-        return Math.floor((this.$store.state.printer?.[this.selectedExtruder]?.pressure_advance ?? 0) * 1000) / 1000
+        this.advance =
+            Math.floor((this.$store.state.printer?.[this.selectedExtruder]?.pressure_advance ?? 0) * 1000) / 1000
+        return this.advance
     }
 
     get current_smooth_time(): number {
-        return Math.floor((this.$store.state.printer?.[this.selectedExtruder]?.smooth_time ?? 0.04) * 1000) / 1000
+        this.smoothTime =
+            Math.floor((this.$store.state.printer?.[this.selectedExtruder]?.smooth_time ?? 0.04) * 1000) / 1000
+        return this.smoothTime
     }
 
     get default_pressure_advance(): number {
@@ -109,5 +123,30 @@ export default class PressureAdvanceSettings extends Mixins(BaseMixin) {
             ) / 1000
         )
     }
+
+    updateValue(param: string, newVal: number) {
+        const params = ['advance', 'smoothTime']
+        if (!params.includes(param)) return
+
+        switch (param) {
+            case 'advance':
+                this.advance = newVal
+                break
+            case 'smoothTime':
+                this.smoothTime = newVal
+                break
+        }
+    }
+
+    @Debounce(500)
+    sendCmd(): void {
+        let gcode = `SET_PRESSURE_ADVANCE`
+        gcode += ` EXTRUDER=${this.selectedExtruder}`
+        gcode += ` ADVANCE=${this.advance}`
+        gcode += ` SMOOTH_TIME=${this.smoothTime}`
+
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode })
+    }
 }
 </script>

From d9a63482fb1f6371bddb2bad8b9f52bec8687a5b Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 28 Feb 2022 23:27:01 +0100
Subject: [PATCH 3/4] refactor: simplify code (#1)

---
 src/components/inputs/NumberInput.vue         | 11 ++-
 .../panels/MachineSettings/MotionSettings.vue | 82 +++++--------------
 2 files changed, 27 insertions(+), 66 deletions(-)

diff --git a/src/components/inputs/NumberInput.vue b/src/components/inputs/NumberInput.vue
index 3119b5d8b..5dfd910e8 100644
--- a/src/components/inputs/NumberInput.vue
+++ b/src/components/inputs/NumberInput.vue
@@ -77,20 +77,20 @@ export default class NumberInput extends Mixins(BaseMixin) {
     declare readonly param: string
 
     // props defining incoming data
-    @Prop({ type: Number, required: true, default: 0 })
+    @Prop({ type: Number, required: true })
     declare readonly target: number
 
-    @Prop({ type: Number, required: true, default: 0 })
+    @Prop({ type: Number, required: true })
     declare readonly defaultValue: number
 
     // props for internal processing
-    @Prop({ type: Number, required: true, default: 0 })
+    @Prop({ type: Number, required: true })
     declare readonly min: number
 
     @Prop({ type: Number, default: null })
     declare readonly max: number | null
 
-    @Prop({ type: Number, required: true, default: 0 })
+    @Prop({ type: Number, required: true })
     declare readonly dec: number
 
     @Prop({ type: Number, required: false, default: 1 })
@@ -147,8 +147,7 @@ export default class NumberInput extends Mixins(BaseMixin) {
 
     submit(): void {
         if (this.invalidInput()) return
-        this.$emit('target-changed', this.param, this.value)
-        this.$emit('submit', this.param)
+        this.$emit('submit', { name: this.param, value: this.value })
     }
 
     // input validation //
diff --git a/src/components/panels/MachineSettings/MotionSettings.vue b/src/components/panels/MachineSettings/MotionSettings.vue
index 7bfbba431..89dc4fe96 100644
--- a/src/components/panels/MachineSettings/MotionSettings.vue
+++ b/src/components/panels/MachineSettings/MotionSettings.vue
@@ -4,8 +4,8 @@
             <v-col class="col-12 col-md-6">
                 <number-input
                     :label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity').toString()"
-                    param="velocity"
-                    :target="current_velocity"
+                    param="VELOCITY"
+                    :target="velocity"
                     :default-value="max_velocity"
                     :output-error-msg="true"
                     :has-spinner="true"
@@ -15,14 +15,13 @@
                     :max="null"
                     :dec="0"
                     unit="mm/s"
-                    @submit="sendCmd"
-                    @target-changed="updateValue"></number-input>
+                    @submit="sendCmd"></number-input>
             </v-col>
             <v-col class="col-12 col-md-6">
                 <number-input
                     :label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity').toString()"
-                    param="squareCornerVelocity"
-                    :target="current_square_corner_velocity"
+                    param="SQUARE_CORNER_VELOCITY"
+                    :target="squareCornerVelocity"
                     :default-value="max_square_corner_velocity"
                     :output-error-msg="true"
                     :has-spinner="true"
@@ -31,16 +30,15 @@
                     :max="null"
                     :dec="1"
                     unit="mm/s"
-                    @submit="sendCmd"
-                    @target-changed="updateValue"></number-input>
+                    @submit="sendCmd"></number-input>
             </v-col>
         </v-row>
         <v-row>
             <v-col class="col-12 col-md-6">
                 <number-input
                     :label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration').toString()"
-                    param="acceleration"
-                    :target="current_accel"
+                    param="ACCEL"
+                    :target="accel"
                     :default-value="max_accel"
                     :output-error-msg="true"
                     :has-spinner="true"
@@ -50,14 +48,13 @@
                     :max="null"
                     :dec="0"
                     unit="mm/s²"
-                    @submit="sendCmd"
-                    @target-changed="updateValue"></number-input>
+                    @submit="sendCmd"></number-input>
             </v-col>
             <v-col class="col-12 col-md-6">
                 <number-input
                     :label="$t('Panels.MachineSettingsPanel.MotionSettings.MaxAccelToDecel').toString()"
-                    param="accelToDecel"
-                    :target="current_accel_to_decel"
+                    param="ACCEL_TO_DECEL"
+                    :target="accelToDecel"
                     :default-value="max_accel_to_decel"
                     :output-error-msg="true"
                     :has-spinner="true"
@@ -67,8 +64,7 @@
                     :max="null"
                     :dec="0"
                     unit="mm/s²"
-                    @submit="sendCmd"
-                    @target-changed="updateValue"></number-input>
+                    @submit="sendCmd"></number-input>
             </v-col>
         </v-row>
     </v-card-text>
@@ -85,30 +81,20 @@ import NumberInput from '@/components/inputs/NumberInput.vue'
     components: { Panel, NumberInput },
 })
 export default class MotionSettings extends Mixins(BaseMixin) {
-    private declare velocity: number
-    private declare acceleration: number
-    private declare accelToDecel: number
-    private declare squareCornerVelocity: number
-
-    get current_velocity(): number {
-        this.velocity = Math.trunc(this.$store.state.printer?.toolhead?.max_velocity ?? 300)
-        return this.velocity
+    get velocity(): number {
+        return Math.trunc(this.$store.state.printer?.toolhead?.max_velocity ?? 300)
     }
 
-    get current_accel(): number {
-        this.acceleration = Math.trunc(this.$store.state.printer?.toolhead?.max_accel ?? 3000)
-        return this.acceleration
+    get accel(): number {
+        return Math.trunc(this.$store.state.printer?.toolhead?.max_accel ?? 3000)
     }
 
-    get current_accel_to_decel(): number {
-        this.accelToDecel = Math.trunc(this.$store.state.printer?.toolhead?.max_accel_to_decel ?? 1500)
-        return this.accelToDecel
+    get accelToDecel(): number {
+        return Math.trunc(this.$store.state.printer?.toolhead?.max_accel_to_decel ?? this.accel / 2)
     }
 
-    get current_square_corner_velocity(): number {
-        this.squareCornerVelocity =
-            Math.floor((this.$store.state.printer?.toolhead?.square_corner_velocity ?? 8) * 10) / 10
-        return this.squareCornerVelocity
+    get squareCornerVelocity(): number {
+        return Math.floor((this.$store.state.printer?.toolhead?.square_corner_velocity ?? 8) * 10) / 10
     }
 
     get max_velocity(): number {
@@ -130,33 +116,9 @@ export default class MotionSettings extends Mixins(BaseMixin) {
         )
     }
 
-    updateValue(param: string, newVal: number) {
-        const params = ['velocity', 'acceleration', 'accelToDecel', 'squareCornerVelocity']
-        if (!params.includes(param)) return
-
-        switch (param) {
-            case 'velocity':
-                this.velocity = newVal
-                break
-            case 'acceleration':
-                this.acceleration = newVal
-                break
-            case 'accelToDecel':
-                this.accelToDecel = newVal
-                break
-            case 'squareCornerVelocity':
-                this.squareCornerVelocity = newVal
-                break
-        }
-    }
-
     @Debounce(500)
-    sendCmd(): void {
-        let gcode = `SET_VELOCITY_LIMIT`
-        gcode += ` VELOCITY=${this.velocity}`
-        gcode += ` ACCEL=${this.acceleration}`
-        gcode += ` ACCEL_TO_DECEL=${this.accelToDecel}`
-        gcode += ` SQUARE_CORNER_VELOCITY=${this.squareCornerVelocity}`
+    sendCmd(params: { name: string; value: number }): void {
+        const gcode = `SET_VELOCITY_LIMIT ${params.name}=${params.value}`
 
         this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
         this.$socket.emit('printer.gcode.script', { script: gcode })

From 07508d623acef2cd2506ba6cfc8b920794bd230c Mon Sep 17 00:00:00 2001
From: th33xitus <th33xitus@googlemail.com>
Date: Mon, 28 Feb 2022 23:51:07 +0100
Subject: [PATCH 4/4] refactor: further simplifications

Signed-off-by: Dominik Willner <th33xitus@gmail.com>
---
 .../FirmwareRetractionSettings.vue            | 99 ++++++-------------
 .../panels/MachineSettings/MotionSettings.vue | 16 +--
 .../PressureAdvanceSettings.vue               | 74 +++++---------
 3 files changed, 62 insertions(+), 127 deletions(-)

diff --git a/src/components/panels/MachineSettings/FirmwareRetractionSettings.vue b/src/components/panels/MachineSettings/FirmwareRetractionSettings.vue
index d6c19bc4c..5794271c0 100644
--- a/src/components/panels/MachineSettings/FirmwareRetractionSettings.vue
+++ b/src/components/panels/MachineSettings/FirmwareRetractionSettings.vue
@@ -4,9 +4,9 @@
             <v-col class="col-12 col-md-6">
                 <number-input
                     :label="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.RetractLength').toString()"
-                    param="retractLength"
-                    :target="current_retract_length"
-                    :default-value="config_retract_length"
+                    param="RETRACT_LENGTH"
+                    :target="retractLength"
+                    :default-value="defaultRetractLength"
                     :output-error-msg="true"
                     :has-spinner="true"
                     :spinner-factor="10"
@@ -15,15 +15,14 @@
                     :max="null"
                     :dec="2"
                     unit="mm"
-                    @submit="sendCmd"
-                    @target-changed="updateValue"></number-input>
+                    @submit="sendCmd"></number-input>
             </v-col>
             <v-col class="col-12 col-md-6">
                 <number-input
                     :label="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.RetractSpeed').toString()"
-                    param="retractSpeed"
-                    :target="current_retract_speed"
-                    :default-value="config_retract_speed"
+                    param="RETRACT_SPEED"
+                    :target="retractSpeed"
+                    :default-value="defaultRetractSpeed"
                     :output-error-msg="true"
                     :has-spinner="true"
                     :spinner-factor="5"
@@ -32,8 +31,7 @@
                     :max="null"
                     :dec="0"
                     unit="mm/s"
-                    @submit="sendCmd"
-                    @target-changed="updateValue"></number-input>
+                    @submit="sendCmd"></number-input>
             </v-col>
         </v-row>
         <v-row>
@@ -42,9 +40,9 @@
                     :label="
                         $t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.UnretractExtraLength').toString()
                     "
-                    param="unretractExtraLength"
-                    :target="current_unretract_extra_length"
-                    :default-value="config_unretract_extra_length"
+                    param="UNRETRACT_EXTRA_LENGTH"
+                    :target="unretractExtraLength"
+                    :default-value="defaultUnretractExtraLength"
                     :output-error-msg="true"
                     :has-spinner="true"
                     :spinner-factor="10"
@@ -53,15 +51,14 @@
                     :max="null"
                     :dec="2"
                     unit="mm"
-                    @submit="sendCmd"
-                    @target-changed="updateValue"></number-input>
+                    @submit="sendCmd"></number-input>
             </v-col>
             <v-col class="col-12 col-md-6">
                 <number-input
                     :label="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.UnretractSpeed').toString()"
-                    param="unretractSpeed"
-                    :target="current_unretract_speed"
-                    :default-value="config_unretract_speed"
+                    param="UNRETRACT_SPEED"
+                    :target="unretractSpeed"
+                    :default-value="defaultUnretractSpeed"
                     :output-error-msg="true"
                     :has-spinner="true"
                     :spinner-factor="5"
@@ -70,8 +67,7 @@
                     :max="null"
                     :dec="0"
                     unit="mm/s"
-                    @submit="sendCmd"
-                    @target-changed="updateValue"></number-input>
+                    @submit="sendCmd"></number-input>
             </v-col>
         </v-row>
     </v-card-text>
@@ -88,34 +84,23 @@ import NumberInput from '@/components/inputs/NumberInput.vue'
     components: { Panel, NumberInput },
 })
 export default class FirmwareRetractionSettings extends Mixins(BaseMixin) {
-    private declare retractLength: number
-    private declare retractSpeed: number
-    private declare unretractExtraLength: number
-    private declare unretractSpeed: number
-
-    get current_retract_length(): number {
-        this.retractLength =
-            Math.floor((this.$store.state.printer?.firmware_retraction?.retract_length ?? 0) * 100) / 100
-        return this.retractLength
+    get retractLength(): number {
+        return Math.floor((this.$store.state.printer?.firmware_retraction?.retract_length ?? 0) * 100) / 100
     }
 
-    get current_retract_speed(): number {
-        this.retractSpeed = Math.trunc(this.$store.state.printer?.firmware_retraction?.retract_speed ?? 20)
-        return this.retractSpeed
+    get retractSpeed(): number {
+        return Math.trunc(this.$store.state.printer?.firmware_retraction?.retract_speed ?? 20)
     }
 
-    get current_unretract_extra_length(): number {
-        this.unretractExtraLength =
-            Math.floor((this.$store.state.printer?.firmware_retraction?.unretract_extra_length ?? 0) * 100) / 100
-        return this.unretractExtraLength
+    get unretractExtraLength(): number {
+        return Math.floor((this.$store.state.printer?.firmware_retraction?.unretract_extra_length ?? 0) * 100) / 100
     }
 
-    get current_unretract_speed(): number {
-        this.unretractSpeed = Math.trunc(this.$store.state.printer?.firmware_retraction?.unretract_speed ?? 10)
-        return this.unretractSpeed
+    get unretractSpeed(): number {
+        return Math.trunc(this.$store.state.printer?.firmware_retraction?.unretract_speed ?? 10)
     }
 
-    get config_retract_length(): number {
+    get defaultRetractLength(): number {
         return (
             Math.floor(
                 (this.$store.state.printer?.configfile?.settings?.firmware_retraction?.retract_length ?? 0) * 100
@@ -123,11 +108,11 @@ export default class FirmwareRetractionSettings extends Mixins(BaseMixin) {
         )
     }
 
-    get config_retract_speed(): number {
+    get defaultRetractSpeed(): number {
         return Math.trunc(this.$store.state.printer?.configfile?.settings?.firmware_retraction?.retract_speed ?? 20)
     }
 
-    get config_unretract_extra_length(): number {
+    get defaultUnretractExtraLength(): number {
         return (
             Math.floor(
                 (this.$store.state.printer?.configfile?.settings?.firmware_retraction?.unretract_extra_length ?? 0) *
@@ -136,37 +121,13 @@ export default class FirmwareRetractionSettings extends Mixins(BaseMixin) {
         )
     }
 
-    get config_unretract_speed(): number {
+    get defaultUnretractSpeed(): number {
         return Math.trunc(this.$store.state.printer?.configfile?.settings?.firmware_retraction?.unretract_speed ?? 0)
     }
 
-    updateValue(param: string, newVal: number) {
-        const params = ['retractLength', 'retractSpeed', 'unretractExtraLength', 'unretractSpeed']
-        if (!params.includes(param)) return
-
-        switch (param) {
-            case 'retractLength':
-                this.retractLength = newVal
-                break
-            case 'retractSpeed':
-                this.retractSpeed = newVal
-                break
-            case 'unretractExtraLength':
-                this.unretractExtraLength = newVal
-                break
-            case 'unretractSpeed':
-                this.unretractSpeed = newVal
-                break
-        }
-    }
-
     @Debounce(500)
-    sendCmd(): void {
-        let gcode = `SET_RETRACTION`
-        gcode += ` RETRACT_LENGTH=${this.retractLength}`
-        gcode += ` RETRACT_SPEED=${this.retractSpeed}`
-        gcode += ` UNRETRACT_EXTRA_LENGTH=${this.unretractExtraLength}`
-        gcode += ` UNRETRACT_SPEED=${this.unretractSpeed}`
+    sendCmd(params: { name: string; value: number }): void {
+        const gcode = `SET_RETRACTION ${params.name}=${params.value}`
 
         this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
         this.$socket.emit('printer.gcode.script', { script: gcode })
diff --git a/src/components/panels/MachineSettings/MotionSettings.vue b/src/components/panels/MachineSettings/MotionSettings.vue
index 89dc4fe96..1e4525606 100644
--- a/src/components/panels/MachineSettings/MotionSettings.vue
+++ b/src/components/panels/MachineSettings/MotionSettings.vue
@@ -6,7 +6,7 @@
                     :label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity').toString()"
                     param="VELOCITY"
                     :target="velocity"
-                    :default-value="max_velocity"
+                    :default-value="defaultVelocity"
                     :output-error-msg="true"
                     :has-spinner="true"
                     :spinner-factor="5"
@@ -22,7 +22,7 @@
                     :label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity').toString()"
                     param="SQUARE_CORNER_VELOCITY"
                     :target="squareCornerVelocity"
-                    :default-value="max_square_corner_velocity"
+                    :default-value="defaultSquareCornerVelocity"
                     :output-error-msg="true"
                     :has-spinner="true"
                     :step="0.1"
@@ -39,7 +39,7 @@
                     :label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration').toString()"
                     param="ACCEL"
                     :target="accel"
-                    :default-value="max_accel"
+                    :default-value="defaultAccel"
                     :output-error-msg="true"
                     :has-spinner="true"
                     :spinner-factor="100"
@@ -55,7 +55,7 @@
                     :label="$t('Panels.MachineSettingsPanel.MotionSettings.MaxAccelToDecel').toString()"
                     param="ACCEL_TO_DECEL"
                     :target="accelToDecel"
-                    :default-value="max_accel_to_decel"
+                    :default-value="defaultAccelToDecel"
                     :output-error-msg="true"
                     :has-spinner="true"
                     :spinner-factor="100"
@@ -97,19 +97,19 @@ export default class MotionSettings extends Mixins(BaseMixin) {
         return Math.floor((this.$store.state.printer?.toolhead?.square_corner_velocity ?? 8) * 10) / 10
     }
 
-    get max_velocity(): number {
+    get defaultVelocity(): number {
         return Math.trunc(this.$store.state.printer?.configfile?.settings?.printer?.max_velocity ?? 300)
     }
 
-    get max_accel(): number {
+    get defaultAccel(): number {
         return Math.trunc(this.$store.state.printer?.configfile?.settings?.printer?.max_accel ?? 3000)
     }
 
-    get max_accel_to_decel(): number {
+    get defaultAccelToDecel(): number {
         return Math.trunc(this.$store.state.printer?.configfile?.settings?.printer?.max_accel_to_decel ?? 1500)
     }
 
-    get max_square_corner_velocity(): number {
+    get defaultSquareCornerVelocity(): number {
         return (
             Math.floor((this.$store.state.printer?.configfile?.settings?.printer?.square_corner_velocity ?? 8) * 10) /
             10
diff --git a/src/components/panels/MachineSettings/PressureAdvanceSettings.vue b/src/components/panels/MachineSettings/PressureAdvanceSettings.vue
index ee99e7f56..81e9c5e66 100644
--- a/src/components/panels/MachineSettings/PressureAdvanceSettings.vue
+++ b/src/components/panels/MachineSettings/PressureAdvanceSettings.vue
@@ -1,10 +1,10 @@
 <template>
     <v-card-text>
         <v-row>
-            <v-col v-if="all_extruders.length > 1" class="col-12 col-xl-4">
+            <v-col v-if="allExtruders.length > 1" class="col-12 col-xl-4">
                 <div class="d-flex align-center">
                     <v-btn
-                        v-if="selectedExtruder !== active_extruder"
+                        v-if="selectedExtruder !== activeExtruder"
                         icon
                         plain
                         class="mr-2"
@@ -14,19 +14,19 @@
                     <v-select
                         v-model="selectedExtruder"
                         :label="$t('Panels.MachineSettingsPanel.PressureAdvanceSettings.Extruder').toString()"
-                        :items="all_extruders"
-                        :value="active_extruder"
+                        :items="allExtruders"
+                        :value="activeExtruder"
                         hide-details
                         outlined
                         dense></v-select>
                 </div>
             </v-col>
-            <v-col :class="all_extruders.length > 1 ? 'col-12 col-md-6 col-xl-4' : 'col-12 col-md-6'">
+            <v-col :class="allExtruders.length > 1 ? 'col-12 col-md-6 col-xl-4' : 'col-12 col-md-6'">
                 <number-input
                     :label="$t('Panels.MachineSettingsPanel.PressureAdvanceSettings.Advance').toString()"
-                    param="advance"
-                    :target="current_pressure_advance"
-                    :default-value="default_pressure_advance"
+                    param="ADVANCE"
+                    :target="pressureAdvance"
+                    :default-value="defaultPressureAdvance"
                     :extruder="selectedExtruder"
                     :output-error-msg="true"
                     :has-spinner="true"
@@ -35,15 +35,14 @@
                     :step="0.001"
                     :dec="3"
                     unit="mm/s"
-                    @submit="sendCmd"
-                    @target-changed="updateValue"></number-input>
+                    @submit="sendCmd"></number-input>
             </v-col>
-            <v-col :class="all_extruders.length > 1 ? 'col-12 col-md-6 col-xl-4' : 'col-12 col-md-6'">
+            <v-col :class="allExtruders.length > 1 ? 'col-12 col-md-6 col-xl-4' : 'col-12 col-md-6'">
                 <number-input
                     :label="$t('Panels.MachineSettingsPanel.PressureAdvanceSettings.SmoothTime').toString()"
-                    param="smoothTime"
-                    :target="current_smooth_time"
-                    :default-value="default_smooth_time"
+                    param="SMOOTH_TIME"
+                    :target="smoothTime"
+                    :default-value="defaultSmoothTime"
                     :extruder="selectedExtruder"
                     :output-error-msg="true"
                     :has-spinner="true"
@@ -53,8 +52,7 @@
                     :step="0.001"
                     :dec="3"
                     unit="s"
-                    @submit="sendCmd"
-                    @target-changed="updateValue"></number-input>
+                    @submit="sendCmd"></number-input>
             </v-col>
         </v-row>
     </v-card-text>
@@ -74,14 +72,11 @@ export default class PressureAdvanceSettings extends Mixins(BaseMixin) {
     private extruders: string[] = []
     private selectedExtruder = ''
 
-    private declare advance: number
-    private declare smoothTime: number
-
     resetToActiveExtruder(): void {
         this.selectedExtruder = this.$store.state.printer.toolhead?.extruder
     }
 
-    get all_extruders(): string[] {
+    get allExtruders(): string[] {
         Object.keys(this.$store.state.printer).forEach((e) => {
             if (e.startsWith('extruder') && !this.extruders.includes(e)) this.extruders.push(e)
         })
@@ -90,24 +85,20 @@ export default class PressureAdvanceSettings extends Mixins(BaseMixin) {
         return this.extruders
     }
 
-    get active_extruder(): string {
+    get activeExtruder(): string {
         this.resetToActiveExtruder()
         return this.$store.state.printer.toolhead?.extruder
     }
 
-    get current_pressure_advance(): number {
-        this.advance =
-            Math.floor((this.$store.state.printer?.[this.selectedExtruder]?.pressure_advance ?? 0) * 1000) / 1000
-        return this.advance
+    get pressureAdvance(): number {
+        return Math.floor((this.$store.state.printer?.[this.selectedExtruder]?.pressure_advance ?? 0) * 1000) / 1000
     }
 
-    get current_smooth_time(): number {
-        this.smoothTime =
-            Math.floor((this.$store.state.printer?.[this.selectedExtruder]?.smooth_time ?? 0.04) * 1000) / 1000
-        return this.smoothTime
+    get smoothTime(): number {
+        return Math.floor((this.$store.state.printer?.[this.selectedExtruder]?.smooth_time ?? 0.04) * 1000) / 1000
     }
 
-    get default_pressure_advance(): number {
+    get defaultPressureAdvance(): number {
         return (
             Math.floor(
                 (this.$store.state.printer.configfile?.settings?.[this.selectedExtruder]?.pressure_advance ?? 0) * 1000
@@ -115,7 +106,7 @@ export default class PressureAdvanceSettings extends Mixins(BaseMixin) {
         )
     }
 
-    get default_smooth_time(): number {
+    get defaultSmoothTime(): number {
         return (
             Math.floor(
                 (this.$store.state.printer.configfile?.settings?.[this.selectedExtruder]
@@ -124,26 +115,9 @@ export default class PressureAdvanceSettings extends Mixins(BaseMixin) {
         )
     }
 
-    updateValue(param: string, newVal: number) {
-        const params = ['advance', 'smoothTime']
-        if (!params.includes(param)) return
-
-        switch (param) {
-            case 'advance':
-                this.advance = newVal
-                break
-            case 'smoothTime':
-                this.smoothTime = newVal
-                break
-        }
-    }
-
     @Debounce(500)
-    sendCmd(): void {
-        let gcode = `SET_PRESSURE_ADVANCE`
-        gcode += ` EXTRUDER=${this.selectedExtruder}`
-        gcode += ` ADVANCE=${this.advance}`
-        gcode += ` SMOOTH_TIME=${this.smoothTime}`
+    sendCmd(params: { name: string; value: number }): void {
+        const gcode = `SET_PRESSURE_ADVANCE EXTRUDER=${this.selectedExtruder} ${params.name}=${params.value}`
 
         this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
         this.$socket.emit('printer.gcode.script', { script: gcode })