feat(spoolman): add multi tool support

Signed-off-by: Stefan Dej <[email protected]>

src/components/dialogs/SpoolmanChangeSpoolDialog.vue

@@ -84,6 +84,7 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
     mdiRefresh = mdiRefresh
 
     @Prop({ required: true }) declare readonly showDialog: boolean
+    @Prop({ required: false, default: null }) declare readonly tool?: string
 
     search = ''
 
@@ -181,6 +182,14 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
     }
 
     setSpool(spool: ServerSpoolmanStateSpool) {
+        if (this.tool) {
+            const gcode = `SET_GCODE_VARIABLE MACRO=${this.tool} VARIABLE=spool_id VALUE=${spool.id}`
+            this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+            this.$socket.emit('printer.gcode.script', { script: gcode })
+            this.close()
+            return
+        }
+
         this.$store.dispatch('server/spoolman/setActiveSpool', spool.id)
         this.close()
     }

src/components/panels/Extruder/ExtruderControlPanelToolsItem.vue

@@ -15,6 +15,7 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import { PrinterStateMacro } from '@/store/printer/types'
 import BaseMixin from '@/components/mixins/base'
 import ControlMixin from '@/components/mixins/control'
+import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
 
 @Component({
     components: {},
@@ -27,12 +28,26 @@ export default class ExtruderControlPanel extends Mixins(BaseMixin, ControlMixin
     }
 
     get color() {
+        if (this.spool) {
+            return this.spool.filament?.color_hex ?? '000000'
+        }
+
         const color = this.macro.variables.color ?? this.macro.variables.colour ?? null
         if (color === '' || color === 'undefined') return null
 
         return color
     }
 
+    get spoolId() {
+        return this.macro.variables.spool_id ?? null
+    }
+
+    get spool() {
+        const spools = this.$store.state.server.spoolman.spools ?? []
+
+        return spools.find((spool: ServerSpoolmanStateSpool) => spool.id === this.spoolId) ?? null
+    }
+
     get primaryColor(): string {
         return this.$store.state.gui.uiSettings.primary
     }

src/components/panels/Spoolman/SpoolmanToolsDropdown.vue

@@ -0,0 +1,37 @@
+<template>
+    <v-menu :offset-y="true" :close-on-content-click="false" left>
+        <template #activator="{ on, attrs }">
+            <v-btn icon tile v-bind="attrs" v-on="on">
+                <v-icon>{{ mdiSwapVertical }}</v-icon>
+            </v-btn>
+        </template>
+        <v-list dense>
+            <v-list-item>
+                <v-btn small @click="showChangeSpoolDialog = true">
+                    <v-icon left>{{ mdiSwapVertical }}</v-icon>
+                    {{ $t('Panels.SpoolmanPanel.ActiveSpool') }}
+                </v-btn>
+            </v-list-item>
+            <spoolman-tools-dropdown-item v-for="tool in tools" :key="tool" :object-name="tool" />
+        </v-list>
+        <spoolman-change-spool-dialog :show-dialog="showChangeSpoolDialog" @close="showChangeSpoolDialog = false" />
+    </v-menu>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiSwapVertical } from '@mdi/js'
+import SpoolmanToolsDropdownItem from '@/components/panels/Spoolman/SpoolmanToolsDropdownItem.vue'
+
+@Component({
+    components: { SpoolmanToolsDropdownItem },
+})
+export default class SpoolmanToolsDropdown extends Mixins(BaseMixin) {
+    mdiSwapVertical = mdiSwapVertical
+
+    showChangeSpoolDialog = false
+
+    @Prop({ required: false, default: false }) readonly tools!: string[]
+}
+</script>

src/components/panels/Spoolman/SpoolmanToolsDropdownItem.vue

@@ -0,0 +1,66 @@
+<template>
+    <v-list-item>
+        <v-btn small @click="showChangeSpoolDialog = true">
+            <span v-if="color != null" class="_extruderColorState mr-2" :style="dotStyle" />
+            {{ name }}
+            <span v-if="spoolId === null" class="font-italic ml-1">({{ $t('Panels.SpoolmanPanel.NoSpool') }})</span>
+            <span v-else class="ml-1">({{ spool?.filament?.name ?? '--' }})</span>
+        </v-btn>
+        <spoolman-change-spool-dialog
+            :show-dialog="showChangeSpoolDialog"
+            :tool="name"
+            @close="showChangeSpoolDialog = false" />
+    </v-list-item>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
+
+@Component({
+    components: {},
+})
+export default class SpoolmanToolsDropdownItem extends Mixins(BaseMixin) {
+    @Prop({ required: false, default: false }) readonly objectName!: string
+
+    showChangeSpoolDialog = false
+
+    get name() {
+        return (this.objectName.split(' ')[1] ?? 'Unknown').toUpperCase()
+    }
+
+    get color() {
+        return this.spool?.filament?.color_hex ?? '000000'
+    }
+
+    get dotStyle() {
+        return {
+            'background-color': '#' + this.color,
+        }
+    }
+
+    get spoolId() {
+        const object = this.$store.state.printer[this.objectName] ?? {}
+
+        return object.spool_id ?? null
+    }
+
+    get spool() {
+        return this.spools.find((spool) => spool.id === this.spoolId) ?? null
+    }
+
+    get spools(): ServerSpoolmanStateSpool[] {
+        return this.$store.state.server.spoolman.spools ?? []
+    }
+}
+</script>
+
+<style scoped>
+._extruderColorState {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 1px solid lightgray;
+}
+</style>

src/components/panels/SpoolmanPanel.vue

@@ -2,7 +2,13 @@
     <div>
         <panel :icon="mdiAdjust" :title="title" card-class="spoolman-panel" :collapsible="true">
             <template #buttons>
-                <v-btn icon tile :title="changeSpoolTooltip" @click="showChangeSpoolDialog = true">
+                <spoolman-tools-dropdown :tools="toolsWithSpoolId" />
+                <v-btn
+                    v-if="toolsWithSpoolId.length === 0"
+                    icon
+                    tile
+                    :title="changeSpoolTooltip"
+                    @click="showChangeSpoolDialog = true">
                     <v-icon>{{ mdiSwapVertical }}</v-icon>
                 </v-btn>
                 <v-menu :offset-y="true" :close-on-content-click="false" left>
@@ -93,6 +99,16 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
         return this.$store.state.server.config.config?.spoolman?.server ?? null
     }
 
+    get toolsWithSpoolId() {
+        return Object.keys(this.$store.state.printer)
+            .filter((key) => /^gcode_macro T\d+$/i.test(key.toLowerCase()))
+            .filter((keys) => {
+                const object = this.$store.state.printer[keys] ?? {}
+
+                return Object.keys(object).some((key) => key.toLowerCase() === 'spool_id')
+            })
+    }
+
     openSpoolManager() {
         window.open(this.spoolManagerUrl, '_blank')
     }

src/locales/en.json

@@ -692,6 +692,7 @@
             "PowerControl": "Power Control"
         },
         "SpoolmanPanel": {
+            "ActiveSpool": "Active Spool",
             "Cancel": "Cancel",
             "ChangeSpool": "Change Spool",
             "DaysAgo": "{days} days ago",
@@ -706,6 +707,7 @@
             "Never": "Never",
             "NoActiveSpool": "Filament tracking is inactive. To get started, please select a spool.",
             "NoResults": "No spool found with the current search criteria.",
+            "NoSpool": "No spool",
             "NoSpools": "No spools available",
             "NoSpoolSelected": "No spool selected. Please select a spool or this print will not be tracked.",
             "OpenSpoolManager": "open Spool Manager",