feat: machine settings panel on dashboard

src/components/inputs/FirmwareRetractionSettingsInput.vue

@@ -0,0 +1,58 @@
+<template>
+    <form v-on:submit.prevent="sendCmd">
+        <v-text-field
+            v-model="value"
+            @click:append="resetLimit"
+            :label="label"
+            :suffix="unit"
+            :append-icon="this.value !== this.defaultValue ? 'mdi-refresh' : ''"
+            :error="this.value < 0"
+            :step="step"
+            type="number"
+            min="0"
+            hide-details
+            outlined
+            dense
+        ></v-text-field>
+    </form>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import {Mixins, Prop, Watch} from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+@Component
+export default class FirmwareRetractionSettingsInput extends Mixins(BaseMixin) {
+    private value: any = 0
+
+    @Prop({ type: String, required: true }) readonly label!: string
+    @Prop({ type: Number, required: false }) readonly step!: string
+    @Prop({ type: Number, required: true, default: 0 }) readonly target!: number
+    @Prop({ type: Number, required: true, default: 0 }) readonly defaultValue!: number
+    @Prop({ type: String, required: true }) readonly attributeName!: string
+    @Prop({ type: String, required: true }) readonly unit!: string
+
+    @Watch('target')
+    targetChanged(newVal: number): void {
+        this.value = newVal
+    }
+
+    created(): void {
+        this.value = this.target
+    }
+
+    resetLimit() {
+        this.value = this.defaultValue
+
+        this.sendCmd()
+    }
+
+    sendCmd() {
+        const gcode = 'SET_RETRACTION ' + this.attributeName + '=' + Math.max(0, this.value).toFixed(2)
+        this.$store.dispatch('server/addEvent', {message: gcode, type: 'command'})
+        this.$socket.emit('printer.gcode.script', {script: gcode})
+    }
+
+}
+</script>

src/components/inputs/MachineLimitsInput.vue → src/components/inputs/MotionSettingsInput.vue

@@ -12,7 +12,8 @@
             outlined
             dense
             :append-icon="this.value !== this.defaultValue ? 'mdi-refresh' : ''"
-            :error="this.value > this.defaultValue"
+            :error="this.value <= 0"
+            min="1"
             @click:append="resetLimit"
             hide-details
         ></v-text-field>
@@ -25,7 +26,7 @@ import {Mixins, Prop, Watch} from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 
 @Component
-export default class MachineLimitsInput extends Mixins(BaseMixin) {
+export default class MotionSettingsInput extends Mixins(BaseMixin) {
     private value: any = 0
 
     @Prop({ type: String, required: true }) readonly label!: string

src/components/mixins/dashboard.ts

@@ -82,6 +82,13 @@ export default class DashboardMixin extends BaseMixin {
             return (group) ? group.name : 'Macrogroup'
         }
 
-        return this.$t('Panels.'+capitalize(name)+'Panel.Headline')
+        if (name.includes('-')) {
+            let panelName = ''
+            const subStrings = name.split('-')
+            subStrings.forEach((subStr) => {panelName += capitalize(subStr)})
+            return this.$t('Panels.' + panelName + 'Panel.Headline')
+        }
+
+        return this.$t('Panels.' + capitalize(name) + 'Panel.Headline')
     }
 }

src/components/panels/MachineSettings/FirmwareRetractionSettings.vue

@@ -0,0 +1,91 @@
+<template>
+    <v-card-text>
+        <v-row>
+            <v-col class="col-6">
+                <firmware-retraction-settings-input
+                    :label="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.RetractLength')"
+                    :target="current_retract_length"
+                    :default-value="config_retract_length"
+                    :step="0.01"
+                    unit="mm"
+                    attribute-name="RETRACT_LENGTH"
+                ></firmware-retraction-settings-input>
+            </v-col>
+            <v-col class="col-6">
+                <firmware-retraction-settings-input
+                    :label="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.RetractSpeed')"
+                    :target="current_retract_speed"
+                    :default-value="config_retract_speed"
+                    unit="mm/s"
+                    attribute-name="RETRACT_SPEED"
+                ></firmware-retraction-settings-input>
+            </v-col>
+        </v-row>
+        <v-row>
+            <v-col class="col-6">
+                <firmware-retraction-settings-input
+                    :label="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.UnretractExtraLength')"
+                    :target="current_unretract_extra_length"
+                    :default-value="config_unretract_extra_length"
+                    :step="0.01"
+                    unit="mm"
+                    attribute-name="UNRETRACT_EXTRA_LENGTH"
+                ></firmware-retraction-settings-input>
+            </v-col>
+            <v-col class="col-6">
+                <firmware-retraction-settings-input
+                    :label="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.UnretractSpeed')"
+                    :target="current_unretract_speed"
+                    :default-value="config_unretract_speed"
+                    unit="mm/s"
+                    attribute-name="UNRETRACT_SPEED"
+                ></firmware-retraction-settings-input>
+            </v-col>
+        </v-row>
+    </v-card-text>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import FirmwareRetractionSettingsInput from '@/components/inputs/FirmwareRetractionSettingsInput.vue'
+
+@Component({
+    components: {Panel, FirmwareRetractionSettingsInput}
+})
+export default class FirmwareRetractionSettings extends Mixins(BaseMixin) {
+
+    get current_retract_length() {
+        return this.$store.state.printer?.firmware_retraction?.retract_length ?? 0
+    }
+
+    get current_retract_speed() {
+        return this.$store.state.printer?.firmware_retraction?.retract_speed ?? 20
+    }
+
+    get current_unretract_extra_length() {
+        return this.$store.state.printer?.firmware_retraction?.unretract_extra_length ?? 0
+    }
+
+    get current_unretract_speed() {
+        return this.$store.state.printer?.firmware_retraction?.unretract_speed ?? 10
+    }
+
+    get config_retract_length() {
+        return this.$store.state.printer?.configfile?.settings?.firmware_retraction?.retract_length ?? 0
+    }
+
+    get config_retract_speed() {
+        return this.$store.state.printer?.configfile?.settings?.firmware_retraction?.retract_speed ?? 20
+    }
+
+    get config_unretract_extra_length() {
+        return this.$store.state.printer?.configfile?.settings?.firmware_retraction?.unretract_extra_length ?? 0
+    }
+
+    get config_unretract_speed() {
+        return this.$store.state.printer?.configfile?.settings?.firmware_retraction?.unretract_speed ?? 10
+    }
+}
+</script>

src/components/panels/MachineSettings/MachineSettingsPanel.vue

@@ -0,0 +1,51 @@
+<template>
+    <panel
+        v-if="klipperReadyForGui"
+        icon="mdi-engine"
+        :title="$t('Panels.MachineSettingsPanel.Headline')"
+        :collapsible="true"
+        card-class="machine-settings-panel"
+    >
+        <motion-settings v-if="!existsFirmwareRetraction"></motion-settings>
+
+        <div v-if="existsFirmwareRetraction">
+            <sub-panel
+                :title="$t('Panels.MachineSettingsPanel.MotionSettings.Motion')"
+                sub-panel-class="motion-settings-subpanel"
+            >
+                <motion-settings></motion-settings>
+            </sub-panel>
+            <sub-panel
+                :title="$t('Panels.MachineSettingsPanel.FirmwareRetractionSettings.FirmwareRetraction')"
+                sub-panel-class="firmware-retraction-settings-subpanel"
+            >
+                <firmware-retraction-settings></firmware-retraction-settings>
+            </sub-panel>
+        </div>
+    </panel>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import SubPanel from '@/components/ui/SubPanel.vue'
+import MotionSettings from '@/components/panels/MachineSettings/MotionSettings.vue'
+import FirmwareRetractionSettings from '@/components/panels/MachineSettings/FirmwareRetractionSettings.vue'
+
+@Component({
+    components: {
+        Panel,
+        SubPanel,
+        MotionSettings,
+        FirmwareRetractionSettings
+    }
+})
+export default class MachineSettingsPanel extends Mixins(BaseMixin) {
+
+    get existsFirmwareRetraction() {
+        return this.$store.state.printer.configfile?.settings?.firmware_retraction ?? false
+    }
+
+}
+</script>