refactor: split ExtruderControlPanel.vue in multiple SFC

src/components/inputs/MacroButton.vue

@@ -59,7 +59,7 @@
                     <v-icon>{{ mdiMenuDown }}</v-icon>
                 </v-btn>
                 <v-dialog v-model="paramsDialog">
-                    <panel :title="macro.name" :card-class="`macro-params-mobile-${macro.name}`" :margin-bottom="0">
+                    <panel :title="macro.name" :card-class="`macro-params-mobile-${macro.name}`" :margin-bottom="false">
                         <template #buttons>
                             <v-btn icon tile @click="paramsDialog = false">
                                 <v-icon>{{ mdiCloseThick }}</v-icon>
@@ -101,6 +101,8 @@ import BaseMixin from '@/components/mixins/base'
 import { GuiMacrosStateMacrogroupMacro } from '@/store/gui/macros/types'
 import { mdiCloseThick, mdiMenuDown, mdiRefresh } from '@mdi/js'
 import Panel from '@/components/ui/Panel.vue'
+import { TranslateResult } from 'vue-i18n'
+import { PrinterStateMacro } from '@/store/printer/types'
 
 interface param {
     type: 'int' | 'double' | 'string' | null
@@ -128,13 +130,13 @@ export default class MacroButton extends Mixins(BaseMixin) {
     private paramsDialog = false
 
     @Prop({ required: true })
-    declare readonly macro: GuiMacrosStateMacrogroupMacro
+    declare readonly macro: GuiMacrosStateMacrogroupMacro | PrinterStateMacro
 
     @Prop({ default: 'primary' })
     declare readonly color: string
 
     @Prop({ default: null })
-    declare readonly alias: string
+    declare readonly alias: string | TranslateResult
 
     @Prop({ default: false })
     declare readonly disabled: boolean

src/components/inputs/NumberInput.vue

@@ -53,6 +53,7 @@ import Component from 'vue-class-component'
 import { Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { mdiChevronDown, mdiChevronUp, mdiRestart } from '@mdi/js'
+import { TranslateResult } from 'vue-i18n'
 
 @Component
 export default class NumberInput extends Mixins(BaseMixin) {
@@ -65,48 +66,23 @@ export default class NumberInput extends Mixins(BaseMixin) {
     private invalidChars: string[] = ['e', 'E', '+']
 
     // input field name and identifier
-    @Prop({ type: String, required: true })
-    declare readonly label: string
-
-    @Prop({ type: String, required: true })
-    declare readonly param: string
-
+    @Prop({ required: true }) declare readonly label: TranslateResult | string
+    @Prop({ type: String, required: true }) declare readonly param: string
     // props defining incoming data
-    @Prop({ type: Number, required: true })
-    declare readonly target: number
-
-    @Prop({ type: Number, required: false })
-    declare readonly defaultValue: number
-
+    @Prop({ type: Number, required: true }) declare readonly target: number
+    @Prop({ type: Number, required: false }) declare readonly defaultValue: number
     // props for internal processing
-    @Prop({ type: Number, required: true })
-    declare readonly min: number
-
-    @Prop({ type: Number, default: null })
-    declare readonly max: number | null
-
-    @Prop({ type: Number, required: true })
-    declare readonly dec: number
-
-    @Prop({ type: Number, required: false, default: 1 })
-    declare readonly step: number
-
-    @Prop({ type: String, required: false })
-    declare readonly unit: string
-
+    @Prop({ type: Number, required: true }) declare readonly min: number
+    @Prop({ default: null }) declare readonly max: number | null
+    @Prop({ type: Number, required: true }) declare readonly dec: number
+    @Prop({ type: Number, required: false, default: 1 }) declare readonly step: number
+    @Prop({ type: String, required: false }) declare readonly unit: string
     // spinner related props
-    @Prop({ type: Boolean, required: false, default: false })
-    declare readonly hasSpinner: boolean
-
-    @Prop({ type: Number, required: false, default: 1 })
-    declare readonly spinnerFactor: number
-
+    @Prop({ type: Boolean, required: false, default: false }) declare readonly hasSpinner: boolean
+    @Prop({ type: Number, required: false, default: 1 }) declare readonly spinnerFactor: number
     // props for general internal behaviour
-    @Prop({ type: Boolean, required: false, default: false })
-    declare readonly disabled: boolean
-
-    @Prop({ type: Boolean, required: false, default: false })
-    declare readonly outputErrorMsg: boolean
+    @Prop({ type: Boolean, required: false, default: false }) declare readonly disabled: boolean
+    @Prop({ type: Boolean, required: false, default: false }) declare readonly outputErrorMsg: boolean
 
     created(): void {
         this.value = this.target.toString()

src/components/mixins/base.ts

@@ -47,6 +47,10 @@ export default class BaseMixin extends Vue {
         return this.klipperReadyForGui && ['printing', 'paused'].includes(this.printer_state)
     }
 
+    get printerIsPrintingOnly() {
+        return this.klipperReadyForGui && this.printer_state === 'printing'
+    }
+
     get printerPowerDevice(): string {
         let deviceName = this.$store.state.gui.uiSettings.powerDeviceName ?? null
         if (deviceName === null) deviceName = 'printer'

src/components/mixins/extruder.ts

@@ -0,0 +1,40 @@
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+@Component
+export default class ExtruderMixin extends Vue {
+    get activeExtruder(): string {
+        return this.$store.state.printer.toolhead?.extruder
+    }
+
+    get activeExtruderSettings(): any {
+        return this.$store.state.printer.configfile?.settings?.[this.activeExtruder]
+    }
+
+    get filamentDiameter(): number {
+        return this.activeExtruderSettings?.filament_diameter ?? 1.75
+    }
+
+    get nozzleDiameter(): number {
+        return this.activeExtruderSettings?.nozzle_diameter ?? 0.4
+    }
+
+    get feedamount(): number {
+        return parseFloat(this.$store.state.gui.control.extruder.feedamount)
+    }
+
+    get feedrate(): number {
+        return parseFloat(this.$store.state.gui.control.extruder.feedrate)
+    }
+
+    get extrudeFactor() {
+        return this.$store.state.printer?.gcode_move?.extrude_factor ?? 1
+    }
+
+    get extrudePossible(): boolean {
+        return this.$store.getters['printer/getExtrudePossible']
+    }
+
+    get minExtrudeTemp(): number {
+        return this.activeExtruderSettings?.min_extrude_temp ?? 170
+    }
+}

src/components/panels/Extruder/EstimatedExtrusionOutput.vue

@@ -0,0 +1,42 @@
+<template>
+    <v-container v-if="showEstimatedExtrusion" class="pa-0 ma-0 pb-1">
+        <div style="font-size: 0.8em" class="text--disabled text-caption font-weight-light d-flex justify-center">
+            <span>
+                {{ $t('Panels.ExtruderControlPanel.EstimatedExtrusion') }} ~ {{ extrudedLength }} mm @
+                {{ volumetricFlow }} mm³/s -
+                <v-icon x-small style="opacity: 0.4; margin-top: -2px">
+                    {{ mdiDiameterVariant }}
+                </v-icon>
+                {{ nozzleDiameter }} mm
+            </span>
+        </div>
+    </v-container>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiDiameterVariant } from '@mdi/js'
+import ExtruderMixin from '@/components/mixins/extruder'
+
+@Component({})
+export default class PressureAdvanceSettings extends Mixins(BaseMixin, ExtruderMixin) {
+    mdiDiameterVariant = mdiDiameterVariant
+
+    get showEstimatedExtrusion() {
+        return this.$store.state.gui.control.extruder.showEstimatedExtrusionInfo ?? true
+    }
+
+    get extrudedLength(): number {
+        return Math.round(
+            this.feedamount *
+                this.extrudeFactor *
+                (Math.pow(this.filamentDiameter, 2) / Math.pow(this.nozzleDiameter, 2))
+        )
+    }
+
+    get volumetricFlow(): number {
+        return Math.round(Math.pow(this.filamentDiameter / 2, 2) * Math.PI * this.feedrate * 10) / 10
+    }
+}
+</script>