feat: Implementation of MMU panel to support single-extruder-multi-material printing using the Happy Hare for any MMU/AFC.

src/components/dialogs/MmuGateDialogRow.vue

@@ -0,0 +1,68 @@
+<template>
+    <tr
+        :class="rowClass"
+        @click="$emit('select-gate', details.index)"
+        @mouseover="$emit('mouseover', details.index)"
+        @mouseleave="$emit('mouseleave', details.index)">
+        <td>{{ details.index }}</td>
+        <td class="pr-0 py-2">
+            <mmu-spool
+                :gate-index="details.index"
+                :show-percent="false"
+                style="height: 60px; float: left"
+                class="mr-0" />
+        </td>
+        <td class="py-0" style="min-width: 274px; max-width: 274px">
+            <mmu-gate-summary :gate-index="details.index" :show-details="true" :show-gate="false" :compact="true" />
+        </td>
+        <td>
+            <span
+                class="es-group-icon"
+                :style="{ background: details.endlessSpoolGroup === selectedEsGroup ? 'limegreen' : 'none' }" />
+        </td>
+    </tr>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+
+@Component({})
+export default class MmuGateDialogRow extends Mixins(BaseMixin, MmuMixin) {
+    @Prop({ required: true }) declare readonly details: MmuGateDetails
+    @Prop({ required: true }) declare readonly selectedGate: number | null
+    @Prop({ required: true }) declare readonly selectedEsGroup: number | null
+
+    get rowClass(): string[] {
+        let classes = ['cursor-pointer']
+        if (this.details.index === this.selectedGate) classes.push('selected-row')
+        if (this.details.status === this.GATE_EMPTY) classes.push('disabled-row')
+        return classes
+    }
+}
+</script>
+
+<style scoped>
+.v-data-table__table {
+    table-layout: fixed;
+}
+
+.selected-row {
+    background: #595959;
+}
+
+.disabled-row {
+    opacity: 0.7;
+}
+
+.es-group-icon {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border-radius: 25%;
+    border: 1px solid var(--v-secondary-lighten3);
+    vertical-align: middle;
+}
+</style>

src/components/dialogs/MmuRecoverStateDialog.vue

@@ -0,0 +1,292 @@
+<template>
+    <v-dialog v-model="showDialog" width="600" persistent :fullscreen="isMobile">
+        <panel
+            :title="$t('Panels.MmuPanel.RecoverState')"
+            :icon="mdiCogRefresh"
+            card-class="mmu-recover-state-dialog"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="close">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+
+            <v-card-subtitle>
+                {{ $t('Panels.MmuPanel.MmuRecoverDialog.Intro') }}
+            </v-card-subtitle>
+
+            <v-card-text>
+                <v-row class="fixed-height">
+                    <v-col class="col-1" />
+                    <v-col class="col-5 d-flex justify-center">
+                        <v-row class="d-flex flex-row">
+                            <v-col class="d-flex justify-center flex-column">
+                                <span class="settings-row-title">Tool</span>
+                                <span class="settings-row-subtitle">
+                                    {{ $t('Panels.MmuPanel.MmuRecoverDialog.SetTool') }}
+                                </span>
+                            </v-col>
+                        </v-row>
+                    </v-col>
+                    <v-col class="col-5 d-flex justify-end align-center">
+                        <v-select
+                            v-model="selectedTool"
+                            :items="toolsList"
+                            :error-messages="toolErrorMessage"
+                            outlined
+                            dense />
+                    </v-col>
+                </v-row>
+                <v-divider class="my-2"></v-divider>
+                <v-row class="fixed-height">
+                    <v-col class="col-1" />
+                    <v-col class="col-5 d-flex justify-center">
+                        <v-row class="d-flex flex-row">
+                            <v-col class="d-flex justify-center flex-column">
+                                <span class="settings-row-title">Gate</span>
+                                <span class="settings-row-subtitle">
+                                    {{ $t('Panels.MmuPanel.MmuRecoverDialog.SetGate') }}
+                                </span>
+                            </v-col>
+                        </v-row>
+                    </v-col>
+                    <v-col class="col-5 d-flex justify-end align-center">
+                        <v-select
+                            v-model="selectedGate"
+                            :items="gatesList"
+                            :error-messages="gateErrorMessage"
+                            outlined
+                            dense />
+                    </v-col>
+                </v-row>
+                <v-divider class="my-2"></v-divider>
+                <v-row class="fixed-height">
+                    <v-col class="col-1" />
+                    <v-col class="col-5 d-flex justify-center">
+                        <v-row class="d-flex flex-row">
+                            <v-col class="d-flex justify-center flex-column">
+                                <span class="settings-row-title">Filament Position</span>
+                                <span class="settings-row-subtitle">
+                                    {{ $t('Panels.MmuPanel.MmuRecoverDialog.FilamentLoaded') }}
+                                </span>
+                            </v-col>
+                        </v-row>
+                    </v-col>
+                    <v-col class="col-5 d-flex justify-end align-center">
+                        <v-select
+                            v-model="selectedPos"
+                            :items="posList"
+                            :error-messages="posErrorMessage"
+                            outlined
+                            dense />
+                    </v-col>
+                </v-row>
+            </v-card-text>
+
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="close">{{ $t('Panels.MmuPanel.Cancel') }}</v-btn>
+                <v-btn color="primary" :disabled="okDisabled" text @click="commit">
+                    {{ $t('Panels.MmuPanel.Ok') }}
+                </v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop, Watch } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import MmuMixin from '@/components/mixins/mmu'
+import Panel from '@/components/ui/Panel.vue'
+import { mdiCloseThick, mdiCogRefresh } from '@mdi/js'
+
+@Component({
+    components: { Panel },
+})
+export default class MmuRecoverDialog extends Mixins(BaseMixin, MmuMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiCogRefresh = mdiCogRefresh
+
+    @Prop({ required: true }) readonly showDialog!: boolean
+
+    private localGate: number = -1
+    private localTool: number = -1
+    private localFilamentPos: number = -1
+
+    @Watch('showDialog')
+    onShowDialogChanged(newValue: boolean): void {
+        if (newValue) {
+            this.localGate = this.gate
+            this.localTool = this.tool
+            this.localFilamentPos = this.filamentPos
+        }
+    }
+
+    get selectedTool(): string {
+        if (this.localTool === this.TOOL_GATE_UNKNOWN) {
+            return 'Unknown'
+        } else if (this.localTool === this.TOOL_GATE_BYPASS) {
+            return 'Bypass'
+        }
+        return `T${this.localTool}`
+    }
+
+    set selectedTool(newTool: string): void {
+        const index = this.toolsList.findIndex((item) => item === newTool)
+        if (index == this.numGates) {
+            this.localTool = this.TOOL_GATE_BYPASS
+        } else {
+            this.localTool = index
+        }
+    }
+
+    get toolsList(): string[] {
+        const tools: string[] = []
+        for (let i = 0; i < this.numGates; i++) {
+            tools.push(`T${i}`)
+        }
+        if (this.hasBypass) tools.push('Bypass')
+        return tools
+    }
+
+    get toolErrorMessage(): string {
+        if (this.localTool === this.TOOL_GATE_UNKNOWN) {
+            return this.$t('Panels.MmuPanel.MmuRecoverDialog.NoTool')
+        } else if (this.localGate === this.TOOL_GATE_BYPASS && this.localTool !== this.TOOL_GATE_BYPASS) {
+            return this.$t('Panels.MmuPanel.MmuRecoverDialog.GateBypass')
+        }
+        return ''
+    }
+
+    get selectedGate(): string {
+        if (this.localGate === this.TOOL_GATE_UNKNOWN) {
+            return 'Unknown'
+        } else if (this.localGate === this.TOOL_GATE_BYPASS) {
+            return 'Bypass'
+        }
+        return `${this.gateIndexText(this.localGate)}`
+    }
+
+    set selectedGate(newGate: string): void {
+        const index = this.gatesList.findIndex((item) => item === newGate)
+        if (index == this.numGates) {
+            this.localGate = this.TOOL_GATE_BYPASS
+        } else {
+            this.localGate = index
+        }
+    }
+
+    get gatesList(): string[] {
+        const gates: string[] = []
+        for (let gate = 0; gate < this.numGates; gate++) {
+            gates.push(this.gateIndexText(gate))
+        }
+        if (this.hasBypass) gates.push('Bypass')
+        return gates
+    }
+
+    get gateErrorMessage(): string {
+        if (this.localGate === this.TOOL_GATE_UNKNOWN) {
+            return this.$t('Panels.MmuPanel.MmuRecoverDialog.NoGate')
+        } else if (this.localTool === this.TOOL_GATE_BYPASS && this.localGate !== this.TOOL_GATE_BYPASS) {
+            return this.$t('Panels.MmuPanel.MmuRecoverDialog.ToolBypass')
+        } else if (this.localGate >= 0 && this.ttgMap[this.localGate] !== this.localTool) {
+            const msg = this.$t('Panels.MmuPanel.MmuRecoverDialog.Remap', { tool: `T${this.localTool}` })
+            return `${this.$t('Panels.MmuPanel.MmuRecoverDialog.WarningPrefix')} ${msg}`
+        }
+        return ''
+    }
+
+    private gateIndexText(gateIndex: number): string {
+        const num_units = this.$store.state.printer?.mmu_machine?.num_units
+        if (num_units > 1) {
+            for (let i = 0; i < num_units; i++) {
+                const unitRef = `unit_${i}`
+                const unit = this.$store.state.printer?.mmu_machine?.[unitRef]
+                if (i > 0 && gateIndex >= unit.first_gate && gateIndex < unit.first_gate + unit.num_gates) {
+                    return `${gateIndex} (unit #${i + 1})`
+                }
+            }
+        }
+        return `${gateIndex}`
+    }
+
+    get selectedPos(): string {
+        if (this.localFilamentPos === this.FILAMENT_POS_UNLOADED) {
+            return 'UNLOADED'
+        } else if (this.localFilamentPos === this.FILAMENT_POS_LOADED) {
+            return 'LOADED'
+        }
+        return 'UNKNOWN'
+    }
+
+    set selectedPos(newPos: string): void {
+        if (newPos === 'UNLOADED') {
+            this.localFilamentPos = this.FILAMENT_POS_UNLOADED
+        } else if (newPos === 'LOADED') {
+            this.localFilamentPos = this.FILAMENT_POS_LOADED
+        }
+        this.localFilamentPos = this.FILAMENT_POS_UNKNOWN
+    }
+
+    get posList(): string[] {
+        return ['UNKNOWN', 'UNLOADED', 'LOADED']
+    }
+
+    get posErrorMessage(): string {
+        if (this.localFilamentPos === this.FILAMENT_POS_UNKNOWN) {
+            return `${this.$t('Panels.MmuPanel.MmuRecoverDialog.WarningPrefix')} ${this.$t('Panels.MmuPanel.MmuRecoverDialog.NoPosition')}`
+        }
+        return ''
+    }
+
+    get okDisabled(): boolean {
+        let tError =
+            this.toolErrorMessage !== '' &&
+            !this.toolErrorMessage.startsWith(this.$t('Panels.MmuPanel.MmuRecoverDialog.WarningPrefix'))
+        let gError =
+            this.gateErrorMessage !== '' &&
+            !this.gateErrorMessage.startsWith(this.$t('Panels.MmuPanel.MmuRecoverDialog.WarningPrefix'))
+        let pError =
+            this.posErrorMessage !== '' &&
+            !this.posErrorMessage.startsWith(this.$t('Panels.MmuPanel.MmuRecoverDialog.WarningPrefix'))
+        return tError || gError || pError
+    }
+
+    close() {
+        this.$emit('close')
+    }
+
+    commit() {
+        let cmd = `MMU_RECOVER TOOL=${this.localTool} GATE=${this.localGate}`
+        if (this.localFilamentPos === this.FILAMENT_POS_UNLOADED) {
+            cmd += ' LOADED=0'
+        } else if (this.localFilamentPos === this.FILAMENT_POS_LOADED) {
+            cmd += ' LOADED=1'
+        }
+        this.doSend(cmd)
+        this.close()
+    }
+}
+</script>
+
+<style scoped>
+.settings-row-title {
+    display: block;
+    width: 100%;
+    font-weight: bold;
+}
+
+.settings-row-subtitle {
+    display: block;
+    font-size: 0.8em;
+    line-height: 1.3;
+    margin-top: 3px;
+}
+
+.fixed-height {
+    min-height: 100px;
+}
+</style>

src/components/dialogs/SpoolmanChangeSpoolDialog.vue

@@ -2,7 +2,9 @@
     <div>
         <v-dialog v-model="showDialog" width="800" persistent :fullscreen="isMobile">
             <panel
-                :title="$t('Panels.SpoolmanPanel.ChangeSpool')"
+                :title="
+                    setActiveSpool ? $t('Panels.SpoolmanPanel.ChangeSpool') : $t('Panels.SpoolmanPanel.SelectSpool')
+                "
                 :icon="mdiAdjust"
                 card-class="spoolman-change-spool-dialog"
                 :margin-bottom="false">
@@ -85,6 +87,7 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
 
     @Prop({ required: true }) declare readonly showDialog: boolean
     @Prop({ required: false, default: null }) declare readonly tool?: string
+    @Prop({ required: false, default: true }) declare readonly setActiveSpool?: boolean
 
     search = ''
 
@@ -188,6 +191,13 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
     }
 
     setSpool(spool: ServerSpoolmanStateSpool) {
+        // If dialog is used for selection only, bypass setting of active spool and propogate event
+        if (!this.setActiveSpool) {
+            this.$emit('select-spool', spool)
+            this.close()
+            return
+        }
+
         this.$store.dispatch('server/spoolman/setActiveSpool', spool.id)
 
         // Close the dialog if no tool is selected