combine control and extruder panel

Signed-off-by: Stefan Dej <meteyou@gmail.com>

src/components/panels/ControlPanel.vue

@@ -227,6 +227,31 @@
                         </v-col>
                     </v-row>
                 </template>
+                <v-row>
+                    <v-col class="pa-0">
+                        <v-divider></v-divider>
+                    </v-col>
+                </v-row>
+                <v-row class="">
+                    <v-col class="col col-md-6 pt-2">
+                        <span class="text--disabled" style="font-size: .9em">Feed amount [mm]</span>
+                        <v-btn-toggle class="mt-1" dense no-gutters style="flex-wrap: nowrap; width: 100%;" >
+                            <v-btn v-for="amount in feedamountsSorted" v-bind:key="amount" @click="setFeedAmount(amount)" dense :class="(amount === currentFeedAmount ? 'v-btn--active' : '') + ' btnMinWidthAuto flex-grow-1 px-0 _btnFeedrate'">{{ amount }}</v-btn>
+                        </v-btn-toggle>
+                    </v-col>
+                    <v-col class="col col-md-6 pt-2">
+                        <span class="text--disabled" style="font-size: .9em">Feedrate [mm/s]</span>
+                        <v-btn-toggle class="mt-1" dense no-gutters style="flex-wrap: nowrap; width: 100%;" >
+                            <v-btn v-for="rate in feedratesSorted" v-bind:key="rate" @click="setFeedrate(rate)" dense :class="(rate === currentFeedRate ? 'v-btn--active' : '') + ' btnMinWidthAuto flex-grow-1 px-0 _btnFeedrate'">{{ rate }}</v-btn>
+                        </v-btn-toggle>
+                    </v-col>
+                </v-row>
+                <v-row class="">
+                    <v-col class="col text-center pt-0">
+                        <v-btn small @click="sendRetract()" class="mx-3" :loading="loadings.includes('btnRetract')" :disabled="!this['printer/getExtrudePossible']"><v-icon small class="mr-1">mdi-arrow-up-bold</v-icon> Retract</v-btn>
+                        <v-btn small @click="sendDetract()" class="mx-3" :loading="loadings.includes('btnDetract')" :disabled="!this['printer/getExtrudePossible']"><v-icon small class="mr-1">mdi-arrow-down-bold</v-icon> Extrude</v-btn>
+                    </v-col>
+                </v-row>
             </v-container>
         </v-card>
         <v-card class="mt-6" v-if="this['printer/getMacros'].length > 0">
@@ -273,6 +298,10 @@
                 config: state => state.printer.configfile.config,
                 loadings: state => state.socket.loadings,
                 printer_state: state => state.printer.print_stats.state,
+                extruder: state => state.printer.extruder,
+
+                feedamounts: state => state.gui.dashboard.extruder.feedamounts,
+                feedrates: state => state.gui.dashboard.extruder.feedrates,
 
                 feedrateXY: state => state.gui.dashboard.control.feedrateXY,
                 stepsXY: state => state.gui.dashboard.control.stepsXY,
@@ -284,6 +313,7 @@
             }),
             ...mapGetters([
                 'printer/getMacros',
+                'printer/getExtrudePossible',
             ]),
             reverseZ: {
                 get() {
@@ -342,6 +372,32 @@
                         ...(this.stepsAll ?? []),
                     ])).sort((a, b) => a-b)
                 }
+            },
+            feedamountsSorted: {
+                get() {
+                    return [...this.feedamounts].sort((a,b) => { return b-a })
+                }
+            },
+            feedratesSorted: {
+                get() {
+                    return [...this.feedrates].sort((a,b) => { return b-a })
+                }
+            },
+            currentFeedAmount: {
+                get() {
+                    return parseFloat(this.$store.state.gui.dashboard.extruder.feedamount)
+                },
+                set(newVal) {
+                    return this.$store.dispatch('gui/setSettings', { dashboard: { extruder: { feedamount: newVal } } })
+                }
+            },
+            currentFeedRate: {
+                get() {
+                    return parseFloat(this.$store.state.gui.dashboard.extruder.feedrate)
+                },
+                set(newVal) {
+                    return this.$store.dispatch('gui/setSettings', { dashboard: { extruder: { feedrate: newVal } } })
+                }
             }
         },
         created() {
@@ -405,6 +461,24 @@
                 this.$store.commit('socket/addLoading', { name: 'macro_'+gcode });
                 Vue.prototype.$socket.sendObj('printer.gcode.script', { script: gcode }, "socket/removeLoading", { name: 'macro_'+gcode });
             },
+            setFeedAmount(value) {
+                this.currentFeedAmount = value;
+            },
+            setFeedrate(value) {
+                this.currentFeedRate = value;
+            },
+            sendRetract() {
+                let gcode = "M83\nG1 E-"+this.currentFeedAmount+" F"+(this.currentFeedRate * 60);
+                this.$store.commit('server/addEvent', { message: gcode, type: 'command' });
+                this.$store.commit('socket/addLoading', { name: 'btnRetract' });
+                Vue.prototype.$socket.sendObj('printer.gcode.script', { script: gcode }, "socket/removeLoading", { name: 'btnRetract' });
+            },
+            sendDetract() {
+                let gcode = "M83\nG1 E"+this.currentFeedAmount+" F"+(this.currentFeedRate * 60);
+                this.$store.commit('server/addEvent', { message: gcode, type: 'command' });
+                this.$store.commit('socket/addLoading', { name: 'btnDetract' });
+                Vue.prototype.$socket.sendObj('printer.gcode.script', { script: gcode }, "socket/removeLoading", { name: 'btnDetract' });
+            },
         },
     }
 </script>

src/components/panels/ExtruderPanel.vue

@@ -1,98 +0,0 @@
-<style>
-
-</style>
-
-<template>
-    <v-card v-if="(['standby', 'paused', 'complete'].includes(printer_state))">
-        <v-container>
-            <v-row class="">
-                <v-col class="col col-md-6">
-                    <v-label>Feed amount in mm:</v-label>
-                    <v-btn-toggle class="mt-2" dense no-gutters style="flex-wrap: nowrap; width: 100%;" >
-                        <v-btn v-for="amount in feedamountsSorted" v-bind:key="amount" @click="setFeedAmount(amount)" dense :class="(amount === currentFeedAmount ? 'v-btn--active' : '') + ' btnMinWidthAuto flex-grow-1 px-0 _btnFeedrate'">{{ amount }}</v-btn>
-                    </v-btn-toggle>
-                </v-col>
-                <v-col class="col col-md-6">
-                    <v-label>Feedrate in mm/s:</v-label>
-                    <v-btn-toggle class="mt-2" dense no-gutters style="flex-wrap: nowrap; width: 100%;" >
-                        <v-btn v-for="rate in feedratesSorted" v-bind:key="rate" @click="setFeedrate(rate)" dense :class="(rate === currentFeedRate ? 'v-btn--active' : '') + ' btnMinWidthAuto flex-grow-1 px-0 _btnFeedrate'">{{ rate }}</v-btn>
-                    </v-btn-toggle>
-                </v-col>
-            </v-row>
-            <v-row class="">
-                <v-col class="col text-center">
-                    <v-btn small @click="sendRetract()" class="mx-2" :loading="loadings.includes('btnRetract')" :disabled="!this['printer/getExtrudePossible']"><v-icon small class="mr-1">mdi-arrow-up-bold</v-icon> Retract</v-btn>
-                    <v-btn small @click="sendDetract()" class="mx-2" :loading="loadings.includes('btnDetract')" :disabled="!this['printer/getExtrudePossible']"><v-icon small class="mr-1">mdi-arrow-down-bold</v-icon> Extrude</v-btn>
-                </v-col>
-            </v-row>
-        </v-container>
-    </v-card>
-</template>
-
-<script>
-    import { mapState, mapGetters } from 'vuex'
-    import Vue from "vue";
-
-    export default {
-        computed: {
-            ...mapState({
-                loadings: state => state.socket.loadings,
-                printer_state: state => state.printer.print_stats.state,
-                extruder: state => state.printer.extruder,
-                config: state => state.printer.configfile.config,
-
-                feedamounts: state => state.gui.dashboard.extruder.feedamounts,
-                feedrates: state => state.gui.dashboard.extruder.feedrates,
-            }),
-            ...mapGetters([
-                'printer/getExtrudePossible',
-            ]),
-            feedamountsSorted: {
-                get() {
-                    return [...this.feedamounts].sort((a,b) => { return b-a })
-                }
-            },
-            feedratesSorted: {
-                get() {
-                    return [...this.feedrates].sort((a,b) => { return b-a })
-                }
-            },
-            currentFeedAmount: {
-                get() {
-                    return parseFloat(this.$store.state.gui.dashboard.extruder.feedamount)
-                },
-                set(newVal) {
-                    return this.$store.dispatch('gui/setSettings', { dashboard: { extruder: { feedamount: newVal } } })
-                }
-            },
-            currentFeedRate: {
-                get() {
-                    return parseFloat(this.$store.state.gui.dashboard.extruder.feedrate)
-                },
-                set(newVal) {
-                    return this.$store.dispatch('gui/setSettings', { dashboard: { extruder: { feedrate: newVal } } })
-                }
-            }
-        },
-        methods: {
-            setFeedAmount(value) {
-                this.currentFeedAmount = value;
-            },
-            setFeedrate(value) {
-                this.currentFeedRate = value;
-            },
-            sendRetract() {
-                let gcode = "M83\nG1 E-"+this.currentFeedAmount+" F"+(this.currentFeedRate * 60);
-                this.$store.commit('server/addEvent', { message: gcode, type: 'command' });
-                this.$store.commit('socket/addLoading', { name: 'btnRetract' });
-                Vue.prototype.$socket.sendObj('printer.gcode.script', { script: gcode }, "socket/removeLoading", { name: 'btnRetract' });
-            },
-            sendDetract() {
-                let gcode = "M83\nG1 E"+this.currentFeedAmount+" F"+(this.currentFeedRate * 60);
-                this.$store.commit('server/addEvent', { message: gcode, type: 'command' });
-                this.$store.commit('socket/addLoading', { name: 'btnDetract' });
-                Vue.prototype.$socket.sendObj('printer.gcode.script', { script: gcode }, "socket/removeLoading", { name: 'btnDetract' });
-            },
-        }
-    }
-</script>

src/components/panels/index.js

@@ -6,7 +6,6 @@ import MinSettingsPanel from './MinSettingsPanel.vue'
 import MoonrakerFailedPluginsPanel from './MoonrakerFailedPluginsPanel.vue'
 import ToolsPanel from './ToolsPanel.vue'
 import ControlPanel from "./ControlPanel";
-import ExtruderPanel from "./ExtruderPanel";
 import ZOffsetPanel from "./ZOffsetPanel";
 import Miscellaneous from "./MiscellaneousPanel";
 import WebcamPanel from "./WebcamPanel";
@@ -20,7 +19,6 @@ Vue.component('min-settings-panel', MinSettingsPanel);
 Vue.component('moonraker-failed-plugins-panel', MoonrakerFailedPluginsPanel);
 Vue.component('tools-panel', ToolsPanel);
 Vue.component('control-panel', ControlPanel);
-Vue.component('extruder-panel', ExtruderPanel);
 Vue.component('zoffset-panel', ZOffsetPanel);
 Vue.component('miscellaneous-panel', Miscellaneous);
 Vue.component('webcam-panel', WebcamPanel);

src/pages/Dashboard.vue

@@ -8,7 +8,6 @@
             <webcam-panel class="mt-6" v-if="showDashboardWebcam"></webcam-panel>
             <z-offset-panel class="mt-6" v-if="klippy_state === 'ready'"></z-offset-panel>
             <control-panel class="mt-6" v-if="klippy_state === 'ready'"></control-panel>
-            <extruder-panel class="mt-6" v-if="klippy_state === 'ready'"></extruder-panel>
             <miscellaneous-panel v-if="klippy_state === 'ready'"></miscellaneous-panel>
         </v-col>
         <v-col class="col-sm-12 col-md-7" v-if="klippy_connected">