From 7785c21cb50eba5bfe6f2dfb6985c13c62bf1dfa Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 4 Sep 2024 20:43:53 +0200
Subject: [PATCH] refactor: refactor machine settings panel

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../MachineSettings/MachineSettingsPanel.vue  |  32 ---
 .../panels/MachineSettings/MotionSettings.vue | 164 ---------------
 .../panels/MachineSettingsPanel.vue           | 186 ++++++++++++++++++
 src/pages/Dashboard.vue                       |   2 +-
 4 files changed, 187 insertions(+), 197 deletions(-)
 delete mode 100644 src/components/panels/MachineSettings/MachineSettingsPanel.vue
 delete mode 100644 src/components/panels/MachineSettings/MotionSettings.vue
 create mode 100644 src/components/panels/MachineSettingsPanel.vue

diff --git a/src/components/panels/MachineSettings/MachineSettingsPanel.vue b/src/components/panels/MachineSettings/MachineSettingsPanel.vue
deleted file mode 100644
index 8b2bdb823..000000000
--- a/src/components/panels/MachineSettings/MachineSettingsPanel.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-    <panel
-        v-if="klipperReadyForGui"
-        :icon="mdiEngine"
-        :title="$t('Panels.MachineSettingsPanel.Headline').toString()"
-        :collapsible="true"
-        card-class="machine-settings-panel">
-        <div>
-            <motion-settings></motion-settings>
-        </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 { mdiEngine } from '@mdi/js'
-
-@Component({
-    components: {
-        Panel,
-        SubPanel,
-        MotionSettings,
-    },
-})
-export default class MachineSettingsPanel extends Mixins(BaseMixin) {
-    mdiEngine = mdiEngine
-}
-</script>
diff --git a/src/components/panels/MachineSettings/MotionSettings.vue b/src/components/panels/MachineSettings/MotionSettings.vue
deleted file mode 100644
index 315290a08..000000000
--- a/src/components/panels/MachineSettings/MotionSettings.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-    <v-container>
-        <responsive
-            :breakpoints="{
-                small: (el) => el.width < 375,
-                medium: (el) => el.width >= 375,
-            }">
-            <template #default="{ el }">
-                <v-row>
-                    <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
-                        <number-input
-                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity')"
-                            param="VELOCITY"
-                            :target="velocity"
-                            :default-value="defaultVelocity"
-                            :output-error-msg="true"
-                            :has-spinner="true"
-                            :spinner-factor="5"
-                            :step="1"
-                            :min="1"
-                            :max="null"
-                            :dec="0"
-                            unit="mm/s"
-                            @submit="sendCmd" />
-                    </v-col>
-                    <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
-                        <number-input
-                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity')"
-                            param="SQUARE_CORNER_VELOCITY"
-                            :target="squareCornerVelocity"
-                            :default-value="defaultSquareCornerVelocity"
-                            :output-error-msg="true"
-                            :has-spinner="true"
-                            :step="0.1"
-                            :min="0.1"
-                            :max="null"
-                            :dec="1"
-                            unit="mm/s"
-                            @submit="sendCmd" />
-                    </v-col>
-                </v-row>
-                <v-row>
-                    <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
-                        <number-input
-                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration')"
-                            param="ACCEL"
-                            :target="accel"
-                            :default-value="defaultAccel"
-                            :output-error-msg="true"
-                            :has-spinner="true"
-                            :spinner-factor="100"
-                            :step="1"
-                            :min="1"
-                            :max="null"
-                            :dec="0"
-                            unit="mm/s²"
-                            @submit="sendCmd" />
-                    </v-col>
-                    <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
-                        <number-input
-                            v-if="minimumCruiseRatio === null"
-                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.MaxAccelToDecel')"
-                            param="ACCEL_TO_DECEL"
-                            :target="accelToDecel"
-                            :default-value="defaultAccelToDecel"
-                            :output-error-msg="true"
-                            :has-spinner="true"
-                            :spinner-factor="100"
-                            :step="1"
-                            :min="1"
-                            :max="null"
-                            :dec="0"
-                            unit="mm/s²"
-                            @submit="sendCmd" />
-                        <number-input
-                            v-else
-                            :label="$t('Panels.MachineSettingsPanel.MotionSettings.MinimumCruiseRatio')"
-                            param="MINIMUM_CRUISE_RATIO"
-                            :target="minimumCruiseRatio"
-                            :default-value="defaultMinimumCruiseRatio"
-                            :output-error-msg="true"
-                            :has-spinner="true"
-                            :spinner-factor="5"
-                            :step="0.01"
-                            :min="0.0"
-                            :max="0.99"
-                            :dec="2"
-                            @submit="sendCmd" />
-                    </v-col>
-                </v-row>
-            </template>
-        </responsive>
-    </v-container>
-</template>
-
-<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 NumberInput from '@/components/inputs/NumberInput.vue'
-import Responsive from '@/components/ui/Responsive.vue'
-
-@Component({
-    components: { Panel, NumberInput, Responsive },
-})
-export default class MotionSettings extends Mixins(BaseMixin) {
-    get velocity(): number {
-        return Math.trunc(this.$store.state.printer?.toolhead?.max_velocity ?? 300)
-    }
-
-    get accel(): number {
-        return Math.trunc(this.$store.state.printer?.toolhead?.max_accel ?? 3000)
-    }
-
-    get accelToDecel(): number {
-        return Math.trunc(this.$store.state.printer?.toolhead?.max_accel_to_decel ?? this.accel / 2)
-    }
-
-    get minimumCruiseRatio(): number | null {
-        const value = this.$store.state.printer?.toolhead?.minimum_cruise_ratio ?? null
-
-        if (value === null) return null
-
-        return Math.round(value * 100) / 100
-    }
-
-    get squareCornerVelocity(): number {
-        return Math.floor((this.$store.state.printer?.toolhead?.square_corner_velocity ?? 8) * 10) / 10
-    }
-
-    get defaultVelocity(): number {
-        return Math.trunc(this.$store.state.printer?.configfile?.settings?.printer?.max_velocity ?? 300)
-    }
-
-    get defaultAccel(): number {
-        return Math.trunc(this.$store.state.printer?.configfile?.settings?.printer?.max_accel ?? 3000)
-    }
-
-    get defaultAccelToDecel(): number {
-        return Math.trunc(this.$store.state.printer?.configfile?.settings?.printer?.max_accel_to_decel ?? 1500)
-    }
-
-    get defaultMinimumCruiseRatio(): number {
-        const value = this.$store.state.printer?.configfile?.settings?.printer?.minimum_cruise_ratio ?? 0.5
-
-        return Math.round(value / 10) * 10
-    }
-
-    get defaultSquareCornerVelocity(): number {
-        const value = this.$store.state.printer?.configfile?.settings?.printer?.square_corner_velocity ?? 8
-
-        return Math.floor(value * 10) / 10
-    }
-
-    @Debounce(500)
-    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 })
-    }
-}
-</script>
diff --git a/src/components/panels/MachineSettingsPanel.vue b/src/components/panels/MachineSettingsPanel.vue
new file mode 100644
index 000000000..f2fc497dd
--- /dev/null
+++ b/src/components/panels/MachineSettingsPanel.vue
@@ -0,0 +1,186 @@
+<template>
+    <panel
+        v-if="klipperReadyForGui"
+        :icon="mdiEngine"
+        :title="$t('Panels.MachineSettingsPanel.Headline')"
+        :collapsible="true"
+        card-class="machine-settings-panel">
+        <responsive
+            :breakpoints="{
+                small: (el) => el.width < 375,
+                medium: (el) => el.width >= 375,
+            }">
+            <template #default="{ el }">
+                <v-card-text class="pt-5">
+                    <v-row>
+                        <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
+                            <number-input
+                                :label="$t('Panels.MachineSettingsPanel.MotionSettings.Velocity')"
+                                param="VELOCITY"
+                                :target="velocity"
+                                :default-value="defaultVelocity"
+                                :output-error-msg="true"
+                                :has-spinner="true"
+                                :spinner-factor="5"
+                                :step="1"
+                                :min="1"
+                                :max="null"
+                                :dec="0"
+                                unit="mm/s"
+                                @submit="sendCmd" />
+                        </v-col>
+                        <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
+                            <number-input
+                                :label="$t('Panels.MachineSettingsPanel.MotionSettings.SquareCornerVelocity')"
+                                param="SQUARE_CORNER_VELOCITY"
+                                :target="squareCornerVelocity"
+                                :default-value="defaultSquareCornerVelocity"
+                                :output-error-msg="true"
+                                :has-spinner="true"
+                                :step="0.1"
+                                :min="0.1"
+                                :max="null"
+                                :dec="1"
+                                unit="mm/s"
+                                @submit="sendCmd" />
+                        </v-col>
+                    </v-row>
+                    <v-row>
+                        <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
+                            <number-input
+                                :label="$t('Panels.MachineSettingsPanel.MotionSettings.Acceleration')"
+                                param="ACCEL"
+                                :target="accel"
+                                :default-value="defaultAccel"
+                                :output-error-msg="true"
+                                :has-spinner="true"
+                                :spinner-factor="100"
+                                :step="1"
+                                :min="1"
+                                :max="null"
+                                :dec="0"
+                                unit="mm/s²"
+                                @submit="sendCmd" />
+                        </v-col>
+                        <v-col :class="{ 'col-12': el.is.small, 'col-6': el.is.medium }">
+                            <number-input
+                                v-if="minimumCruiseRatio === null"
+                                :label="$t('Panels.MachineSettingsPanel.MotionSettings.MaxAccelToDecel')"
+                                param="ACCEL_TO_DECEL"
+                                :target="accelToDecel"
+                                :default-value="defaultAccelToDecel"
+                                :output-error-msg="true"
+                                :has-spinner="true"
+                                :spinner-factor="100"
+                                :step="1"
+                                :min="1"
+                                :max="null"
+                                :dec="0"
+                                unit="mm/s²"
+                                @submit="sendCmd" />
+                            <number-input
+                                v-else
+                                :label="$t('Panels.MachineSettingsPanel.MotionSettings.MinimumCruiseRatio')"
+                                param="MINIMUM_CRUISE_RATIO"
+                                :target="minimumCruiseRatio"
+                                :default-value="defaultMinimumCruiseRatio"
+                                :output-error-msg="true"
+                                :has-spinner="true"
+                                :spinner-factor="5"
+                                :step="0.01"
+                                :min="0.0"
+                                :max="0.99"
+                                :dec="2"
+                                @submit="sendCmd" />
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+            </template>
+        </responsive>
+    </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 { mdiEngine } from '@mdi/js'
+import { Debounce } from 'vue-debounce-decorator'
+import NumberInput from '@/components/inputs/NumberInput.vue'
+import Responsive from '@/components/ui/Responsive.vue'
+
+@Component({
+    components: {
+        NumberInput,
+        Panel,
+        Responsive,
+    },
+})
+export default class MachineSettingsPanel extends Mixins(BaseMixin) {
+    mdiEngine = mdiEngine
+
+    get toolhead() {
+        return this.$store.state.printer?.toolhead ?? {}
+    }
+
+    get configPrinter() {
+        return this.$store.state.printer?.configfile?.settings?.printer ?? {}
+    }
+
+    get velocity(): number {
+        return Math.trunc(this.toolhead.max_velocity ?? 300)
+    }
+
+    get accel(): number {
+        return Math.trunc(this.toolhead.max_accel ?? 3000)
+    }
+
+    get accelToDecel(): number {
+        return Math.trunc(this.toolhead.max_accel_to_decel ?? this.accel / 2)
+    }
+
+    get minimumCruiseRatio(): number | null {
+        const value = this.toolhead.minimum_cruise_ratio ?? null
+
+        if (value === null) return null
+
+        return Math.round(value * 100) / 100
+    }
+
+    get squareCornerVelocity(): number {
+        return Math.floor((this.toolhead.square_corner_velocity ?? 8) * 10) / 10
+    }
+
+    get defaultVelocity(): number {
+        return Math.trunc(this.configPrinter.max_velocity ?? 300)
+    }
+
+    get defaultAccel(): number {
+        return Math.trunc(this.configPrinter.max_accel ?? 3000)
+    }
+
+    get defaultAccelToDecel(): number {
+        return Math.trunc(this.configPrinter.max_accel_to_decel ?? 1500)
+    }
+
+    get defaultMinimumCruiseRatio(): number {
+        const value = this.configPrinter.minimum_cruise_ratio ?? 0.5
+
+        return Math.round(value / 10) * 10
+    }
+
+    get defaultSquareCornerVelocity(): number {
+        const value = this.configPrinter.square_corner_velocity ?? 8
+
+        return Math.floor(value * 10) / 10
+    }
+
+    @Debounce(500)
+    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 })
+    }
+}
+</script>
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 6d8d7d326..2b531c980 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -85,7 +85,7 @@ import { Mixins } from 'vue-property-decorator'
 import ExtruderControlPanel from '@/components/panels/ExtruderControlPanel.vue'
 import DashboardMixin from '@/components/mixins/dashboard'
 import KlippyStatePanel from '@/components/panels/KlippyStatePanel.vue'
-import MachineSettingsPanel from '@/components/panels/MachineSettings/MachineSettingsPanel.vue'
+import MachineSettingsPanel from '@/components/panels/MachineSettingsPanel.vue'
 import MacrogroupPanel from '@/components/panels/MacrogroupPanel.vue'
 import MacrosPanel from '@/components/panels/MacrosPanel.vue'
 import MiniconsolePanel from '@/components/panels/MiniconsolePanel.vue'