refactor(Machine): refactor endstop panel and add dockable_probe

src/components/panels/Machine/EndstopPanel.vue

@@ -4,55 +4,16 @@
         :icon="mdiArrowExpandVertical"
         card-class="machine-endstop-panel"
         :collapsible="true">
-        <v-card-text class="pb-0">
-            <v-container px-0 py-0>
-                <template v-if="Object.keys(endstops).length">
-                    <v-row v-for="key of Object.keys(endstops)" :key="key">
-                        <v-col class="py-1">
-                            <label class="mt-1 d-inline-block">
-                                {{ $t('Machine.EndstopPanel.Endstop') }}
-                                <b>{{ key.toUpperCase() }}</b>
-                            </label>
-                            <v-chip
-                                small
-                                label
-                                class="float-right"
-                                :color="endstops[key] === 'open' ? 'green' : 'red'"
-                                text-color="white">
-                                <template v-if="endstops[key] === 'open'">
-                                    {{ $t('Machine.EndstopPanel.open') }}
-                                </template>
-                                <template v-else>
-                                    {{ $t('Machine.EndstopPanel.TRIGGERED') }}
-                                </template>
-                            </v-chip>
-                        </v-col>
-                    </v-row>
-                    <v-row v-if="existProbe">
-                        <v-col class="py-1">
-                            <label class="mt-1 d-inline-block">Probe</label>
-                            <v-chip small label class="float-right" :color="probe ? 'red' : 'green'" text-color="white">
-                                <template v-if="probe">
-                                    {{ $t('Machine.EndstopPanel.TRIGGERED') }}
-                                </template>
-                                <template v-else>
-                                    {{ $t('Machine.EndstopPanel.open') }}
-                                </template>
-                            </v-chip>
-                        </v-col>
-                    </v-row>
-                </template>
-                <template v-else>
-                    <v-row>
-                        <v-col>
-                            <p>{{ $t('Machine.EndstopPanel.EndstopInfo') }}</p>
-                        </v-col>
-                    </v-row>
-                </template>
-            </v-container>
+        <v-card-text class="pb-0 pt-6">
+            <EndstopPanelItem v-for="item in items" :key="item.name" :item="item" />
+            <v-row v-if="items.length === 0">
+                <v-col class="pt-0">
+                    <p class="mb-0">{{ $t('Machine.EndstopPanel.EndstopInfo') }}</p>
+                </v-col>
+            </v-row>
         </v-card-text>
         <v-card-actions class="pt-3">
-            <v-spacer></v-spacer>
+            <v-spacer />
             <v-btn icon :loading="loadings.includes('queryEndstops')" @click="syncEndstops">
                 <v-icon>{{ mdiSync }}</v-icon>
             </v-btn>
@@ -65,35 +26,54 @@ import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '../../mixins/base'
 import Panel from '@/components/ui/Panel.vue'
 import { mdiArrowExpandVertical, mdiSync } from '@mdi/js'
+
+export interface EndstopItem {
+    type: 'endstop' | 'probe'
+    name: string
+    value: string
+}
+
 @Component({
     components: { Panel },
 })
 export default class EndstopPanel extends Mixins(BaseMixin) {
     mdiArrowExpandVertical = mdiArrowExpandVertical
     mdiSync = mdiSync
 
-    public sortEndstops: any = {}
+    get items() {
+        let output: EndstopItem[] = []
 
-    get endstops() {
         const endstops = this.$store.state.printer.endstops ?? {}
+        Object.keys(endstops).forEach((key) => {
+            output.push({ type: 'endstop', name: key, value: endstops[key] })
+        })
 
-        return Object.keys(endstops)
-            .sort()
-            .reduce((obj: any, key: string) => {
-                obj[key] = endstops[key]
-                return obj
-            }, {})
-    }
+        // dont show probe values if there are no endstop values
+        if (output.length === 0) return []
+
+        output = output.sort((a, b) => a.name.localeCompare(b.name))
+
+        if ('probe' in this.$store.state.printer && 'last_query' in this.$store.state.printer.probe) {
+            const value = this.$store.state.printer.probe.last_query ? 'TRIGGERED' : 'open'
+
+            output.push({
+                type: 'probe',
+                name: this.$store.state.printer.probe.name ?? 'probe',
+                value,
+            })
+        }
 
-    get existProbe() {
-        return 'probe' in this.$store.state.printer.configfile.settings
+        return output
     }
 
-    get probe() {
-        if ('probe' in this.$store.state.printer && 'last_query' in this.$store.state.printer.probe)
-            return this.$store.state.printer.probe.last_query
+    get existsQueryProbe() {
+        const commands = this.$store.state.printer.gcode?.commands ?? null
+        if (commands) {
+            return 'QUERY_PROBE' in commands
+        }
 
-        return false
+        // fallback for older Klipper versions
+        return 'probe' in this.$store.state.printer
     }
 
     syncEndstops() {
@@ -102,37 +82,11 @@ export default class EndstopPanel extends Mixins(BaseMixin) {
             {},
             { action: 'printer/getEndstopStatus', loading: 'queryEndstops' }
         )
-        if (this.existProbe) {
+
+        if (this.existsQueryProbe) {
             this.$store.dispatch('server/addEvent', { message: 'QUERY_PROBE', type: 'command' })
             this.$socket.emit('printer.gcode.script', { script: 'QUERY_PROBE' })
         }
     }
 }
-
-/*    import { mapState } from 'vuex'
-
-    export default {
-        created() {
-            this.getEndstops();
-        },
-        methods: {
-            ,
-            getEndstops() {
-                this.sortEndstops = {};
-
-                let keys = Object.keys(this.endstops);
-                keys.sort();
-
-                for (let i = 0; i < keys.length; i++) {
-                    let k = keys[i];
-                    this.sortEndstops[k] = this.endstops[k];
-                }
-            }
-        },
-        watch: {
-            endstops: function() {
-                this.getEndstops();
-            }
-        }
-    }*/
 </script>

src/components/panels/Machine/EndstopPanelItem.vue

@@ -0,0 +1,41 @@
+<template>
+    <v-row>
+        <v-col class="py-1">
+            <label class="mt-1 d-inline-block">
+                <span v-if="item.type === 'endstop'" class="mr-2">{{ $t('Machine.EndstopPanel.Endstop') }}</span>
+                <b>{{ name }}</b>
+            </label>
+            <v-chip small label class="float-right" :color="chipColor" text-color="white">{{ value }}</v-chip>
+        </v-col>
+    </v-row>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import { EndstopItem } from '@/components/panels/Machine/EndstopPanel.vue'
+import { convertName } from '@/plugins/helpers'
+@Component({
+    components: { Panel },
+})
+export default class EndstopPanelItem extends Mixins(BaseMixin) {
+    @Prop({ type: Object }) declare readonly item: EndstopItem
+
+    get name() {
+        if (this.item.type === 'endstop') return this.item.name.toUpperCase()
+
+        return convertName(this.item.name)
+    }
+
+    get chipColor() {
+        return this.item.value === 'open' ? 'green' : 'red'
+    }
+
+    get value() {
+        return this.item.value === 'open'
+            ? this.$t('Machine.EndstopPanel.open')
+            : this.$t('Machine.EndstopPanel.TRIGGERED')
+    }
+}
+</script>