From 693929b77ae84855bc14ea60a319bcb7cb4016b9 Mon Sep 17 00:00:00 2001
From: Wondro <wondro18@hotmail.com>
Date: Tue, 31 Dec 2024 16:34:25 -0600
Subject: [PATCH] feat: Enhance lane actions, spool management, and extruder
 tools functionality

---
 .../dialogs/AfcChangeSpoolDialog.vue          |  34 ++-
 .../panels/Afc/AfcExtruderToolsItem.vue       |  18 +-
 .../panels/Afc/AfcUnitsItemLane.vue           | 214 ++++++++++++------
 src/locales/en.json                           |  10 +-
 4 files changed, 193 insertions(+), 83 deletions(-)

diff --git a/src/components/dialogs/AfcChangeSpoolDialog.vue b/src/components/dialogs/AfcChangeSpoolDialog.vue
index 0b1aa7e7a..cf49f4508 100644
--- a/src/components/dialogs/AfcChangeSpoolDialog.vue
+++ b/src/components/dialogs/AfcChangeSpoolDialog.vue
@@ -218,9 +218,13 @@ export default class AfcChangeSpoolDialog extends Mixins(BaseMixin) {
 
             this.$nextTick(async () => {
                 try {
-                    await this.$store.dispatch('printer/sendGcode', setColor)
-                    await this.$store.dispatch('printer/sendGcode', setWeight)
-                    await this.$store.dispatch('printer/sendGcode', setMaterial)
+                    this.$socket.emit('printer.gcode.script', { script: setColor }, { loading: 'macro_' + setColor })
+                    this.$socket.emit('printer.gcode.script', { script: setWeight }, { loading: 'macro_' + setWeight })
+                    this.$socket.emit(
+                        'printer.gcode.script',
+                        { script: setMaterial },
+                        { loading: 'macro_' + setMaterial }
+                    )
                 } catch (error) {
                     console.error('Failed to send G-code:', error)
                 }
@@ -238,9 +242,13 @@ export default class AfcChangeSpoolDialog extends Mixins(BaseMixin) {
 
             this.$nextTick(async () => {
                 try {
-                    await this.$store.dispatch('printer/sendGcode', setColor)
-                    await this.$store.dispatch('printer/sendGcode', setWeight)
-                    await this.$store.dispatch('printer/sendGcode', setMaterial)
+                    this.$socket.emit('printer.gcode.script', { script: setColor }, { loading: 'macro_' + setColor })
+                    this.$socket.emit('printer.gcode.script', { script: setWeight }, { loading: 'macro_' + setWeight })
+                    this.$socket.emit(
+                        'printer.gcode.script',
+                        { script: setMaterial },
+                        { loading: 'macro_' + setMaterial }
+                    )
                 } catch (error) {
                     console.error('Failed to send G-code:', error)
                 }
@@ -273,10 +281,18 @@ export default class AfcChangeSpoolDialog extends Mixins(BaseMixin) {
 
             this.$nextTick(async () => {
                 try {
-                    await this.$store.dispatch('printer/sendGcode', setSpoolId)
+                    this.$socket.emit(
+                        'printer.gcode.script',
+                        { script: setSpoolId },
+                        { loading: 'macro_' + setSpoolId }
+                    )
                     console.log('SET_SPOOL_ID sent successfully')
 
-                    await this.$store.dispatch('printer/sendGcode', unloadLane)
+                    this.$socket.emit(
+                        'printer.gcode.script',
+                        { script: unloadLane },
+                        { loading: 'macro_' + unloadLane }
+                    )
                     console.log('UNLOAD_LANE sent successfully')
                 } catch (error) {
                     console.error('Failed to send G-code:', error)
@@ -329,7 +345,7 @@ export default class AfcChangeSpoolDialog extends Mixins(BaseMixin) {
 
         this.$nextTick(async () => {
             try {
-                await this.$store.dispatch('printer/sendGcode', gcode)
+                this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'macro_' + gcode })
                 console.log('G-code sent successfully')
             } catch (error) {
                 console.error('Failed to send G-code:', error)
diff --git a/src/components/panels/Afc/AfcExtruderToolsItem.vue b/src/components/panels/Afc/AfcExtruderToolsItem.vue
index a48082020..fc44f2c26 100644
--- a/src/components/panels/Afc/AfcExtruderToolsItem.vue
+++ b/src/components/panels/Afc/AfcExtruderToolsItem.vue
@@ -13,7 +13,7 @@
                             }"
                             v-on="on"></span>
                     </template>
-                    <span>{{ $t('Panels.AfcPanel.PreExtruderSensor') }}</span>
+                    <span>{{ preSensorStatus }}</span>
                 </v-tooltip>
                 <span class="tool-name">{{ toolName }}</span>
                 <v-tooltip top>
@@ -28,7 +28,7 @@
                             }"
                             v-on="on"></span>
                     </template>
-                    <span>{{ $t('Panels.AfcPanel.PostExtruderSensor') }}</span>
+                    <span>{{ postSensorStatus }}</span>
                 </v-tooltip>
             </div>
             <div class="buffer-info">{{ tool.buffer }}: {{ tool.buffer_status }}</div>
@@ -52,6 +52,20 @@ import { Extruder } from '@/store/server/afc/types'
 export default class AfcExtruderToolsItem extends Mixins(BaseMixin) {
     @Prop({ type: Object, required: true }) readonly tool!: Extruder
     @Prop({ type: String, required: true }) readonly toolName!: string
+
+    get preSensorStatus(): string {
+        const status = this.tool.tool_start_sensor
+            ? this.$t('Panels.AfcPanel.Detected')
+            : this.$t('Panels.AfcPanel.Empty')
+        return `${this.$t('Panels.AfcPanel.PreExtruderSensor')} - ${status}`
+    }
+
+    get postSensorStatus(): string {
+        const status = this.tool.tool_end_sensor
+            ? this.$t('Panels.AfcPanel.Detected')
+            : this.$t('Panels.AfcPanel.Empty')
+        return `${this.$t('Panels.AfcPanel.PostExtruderSensor')} - ${status}`
+    }
 }
 </script>
 
diff --git a/src/components/panels/Afc/AfcUnitsItemLane.vue b/src/components/panels/Afc/AfcUnitsItemLane.vue
index 5747eda41..df267891e 100644
--- a/src/components/panels/Afc/AfcUnitsItemLane.vue
+++ b/src/components/panels/Afc/AfcUnitsItemLane.vue
@@ -1,34 +1,51 @@
 <template>
     <div>
         <div class="spool-card-header">
-            <span
-                :class="
-                    lane.load && lane.prep && lane.tool_loaded
-                        ? 'primary--text'
-                        : lane.load && lane.prep
-                          ? 'success--text'
-                          : lane.prep
-                            ? 'warning--text'
-                            : 'error--text'
-                ">
-                <h3>{{ lane.laneName }}</h3>
-            </span>
+            <v-menu :offset-y="true" :close-on-content-click="true" left>
+                <template #activator="{ on: onMenu, attrs }">
+                    <v-tooltip top>
+                        <template #activator="{ on: onTooltip }">
+                            <span
+                                :class="laneStatusClass"
+                                :style="{ cursor: laneReady ? 'pointer' : 'default' }"
+                                v-bind="attrs"
+                                v-on="{ ...onMenu, ...onTooltip }">
+                                {{ lane.laneName }}
+                            </span>
+                        </template>
+                        <span>{{ laneStatus }}</span>
+                    </v-tooltip>
+                </template>
+                <v-list v-if="laneReady" dense>
+                    <v-list-item v-if="!toolLoaded" @click="handleLaneAction($event, 'load')">
+                        <v-list-item-title>{{ $t('Panels.AfcPanel.Load') }}</v-list-item-title>
+                    </v-list-item>
+                    <v-list-item v-if="toolLoaded" @click="handleLaneAction($event, 'unload')">
+                        <v-list-item-title>{{ $t('Panels.AfcPanel.Unload') }}</v-list-item-title>
+                    </v-list-item>
+                    <v-list-item v-if="!toolLoaded" @click="handleLaneAction($event, 'eject')">
+                        <v-list-item-title>{{ $t('Panels.AfcPanel.Eject') }}</v-list-item-title>
+                    </v-list-item>
+                </v-list>
+            </v-menu>
             <div class="spacer"></div>
-            <v-tooltip top>
-                <template #activator="{ on, attrs }">
-                    <select
-                        v-bind="attrs"
-                        :name="'map-' + lane.laneName"
-                        class="afclist"
-                        v-on="on"
-                        @change="handleMapChange($event, lane)">
-                        <option v-for="option in mapList" :key="option" :value="option" :selected="option === lane.map">
-                            {{ option }}
-                        </option>
-                    </select>
+            <v-menu :offset-y="true" :close-on-content-click="true" left>
+                <template #activator="{ on: onMenu, attrs }">
+                    <v-tooltip top>
+                        <template #activator="{ on: onTooltip }">
+                            <span v-bind="attrs" v-on="{ ...onMenu, ...onTooltip }">
+                                {{ lane.map }}
+                            </span>
+                        </template>
+                        <span>{{ $t('Panels.AfcPanel.LaneMap') }}</span>
+                    </v-tooltip>
                 </template>
-                <span>{{ $t('Panels.AfcPanel.LaneMap') }}</span>
-            </v-tooltip>
+                <v-list dense>
+                    <v-list-item v-for="option in mapList" :key="option" @click="handleMapChange($event, option)">
+                        <v-list-item-title>{{ option }}</v-list-item-title>
+                    </v-list-item>
+                </v-list>
+            </v-menu>
         </div>
         <div class="spool-card-body">
             <div class="filament-reel" @click="openChangeSpoolDialog(lane)">
@@ -38,25 +55,26 @@
             </div>
             <div class="spool-card-info">
                 <div class="infinite-spool">
-                    <v-tooltip top>
-                        <template #activator="{ on, attrs }">
-                            <select
-                                v-bind="attrs"
-                                :name="'run-' + lane.laneName"
-                                class="afclist"
-                                v-on="on"
-                                @change="handleRunoutChange($event, lane)">
-                                <option
-                                    v-for="option in laneList.filter((option) => option !== lane.laneName)"
-                                    :key="option"
-                                    :value="option"
-                                    :selected="option === lane.runout_lane">
-                                    {{ option }}
-                                </option>
-                            </select>
+                    <v-menu :offset-y="true" :close-on-content-click="true" left>
+                        <template #activator="{ on: onMenu, attrs }">
+                            <v-tooltip top>
+                                <template #activator="{ on: onTooltip }">
+                                    <span v-bind="attrs" v-on="{ ...onMenu, ...onTooltip }">
+                                        {{ lane.runout_lane }}
+                                    </span>
+                                </template>
+                                <span>{{ $t('Panels.AfcPanel.InfiniteSpool') }}</span>
+                            </v-tooltip>
                         </template>
-                        <span>{{ $t('Panels.AfcPanel.InfiniteSpool') }}</span>
-                    </v-tooltip>
+                        <v-list dense>
+                            <v-list-item
+                                v-for="option in laneList.filter((option) => option !== lane.laneName)"
+                                :key="option"
+                                @click="handleMapChange($event, option)">
+                                <v-list-item-title>{{ option }}</v-list-item-title>
+                            </v-list-item>
+                        </v-list>
+                    </v-menu>
                     <infinity-icon
                         id="Capa_1"
                         :color="lane.runout_lane === 'NONE' ? 'red' : 'green'"
@@ -84,6 +102,7 @@
 import Component from 'vue-class-component'
 import { Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
+import { PrinterStateMacro } from '@/store/printer/types'
 import AfcChangeSpoolDialog from '@/components/dialogs/AfcChangeSpoolDialog.vue'
 import InfinityIcon from '@/components/ui/InfinityIcon.vue'
 import FilamentReelIcon from '@/components/ui/FilamentReelIcon.vue'
@@ -111,6 +130,37 @@ export default class AfcUnits extends Mixins(BaseMixin) {
         return this.$store.state.server.spoolman.active_spool
     }
 
+    get laneReady() {
+        return this.lane.load && this.lane.prep
+    }
+
+    get toolLoaded() {
+        return this.lane.tool_loaded
+    }
+
+    get laneStatusClass() {
+        return this.laneReady && this.toolLoaded
+            ? 'primary--text'
+            : this.laneReady
+              ? 'success--text'
+              : this.lane.prep
+                ? 'warning--text'
+                : 'error--text'
+    }
+
+    get laneStatus() {
+        switch (true) {
+            case this.laneReady && this.toolLoaded:
+                return this.$t('Panels.AfcPanel.LaneCommands')
+            case this.laneReady:
+                return this.$t('Panels.AfcPanel.LaneCommands')
+            case this.lane.prep:
+                return this.$t('Panels.AfcPanel.LaneErrorLoad')
+            default:
+                return this.$t('Panels.AfcPanel.LaneEmpty')
+        }
+    }
+
     openChangeSpoolDialog(lane: Lane) {
         this.selectedLane = lane
         this.showChangeSpoolDialog = true
@@ -127,14 +177,13 @@ export default class AfcUnits extends Mixins(BaseMixin) {
         console.log('Active spool weight changed:', weight)
 
         const gcode = `SET_WEIGHT LANE=${this.lane.laneName} WEIGHT=${weight}`
-        this.$nextTick(async () => {
-            try {
-                await this.$store.dispatch('printer/sendGcode', gcode)
-                console.log('G-code sent successfully')
-            } catch (error) {
-                console.error('Failed to send G-code:', error)
-            }
-        })
+
+        try {
+            this.$socket.emit('printer.gcode.script', { script: gcode }, { loading: 'macro_' + gcode })
+            console.log('G-code sent successfully')
+        } catch (error) {
+            console.error('Failed to send G-code:', error)
+        }
     }
 
     @Watch('lane.tool_loaded')
@@ -173,12 +222,11 @@ export default class AfcUnits extends Mixins(BaseMixin) {
         })
     }
 
-    handleMapChange(event: Event, lane: Lane) {
-        const selectedValue = (event.target as HTMLSelectElement).value
-        console.log(`Selected value for ${lane.laneName}: ${selectedValue}`)
+    handleMapChange(event: Event, option: string) {
+        console.log(`Selected value for ${this.lane.laneName}: ${option}`)
 
         //Example G-Code Call for you
-        const gcode = `SET_MAP LANE=${lane.laneName} MAP=${selectedValue}`
+        const gcode = `SET_MAP LANE=${this.lane.laneName} MAP=${option}`
         console.log('Dispatching G-code:', gcode)
 
         this.$nextTick(async () => {
@@ -191,6 +239,45 @@ export default class AfcUnits extends Mixins(BaseMixin) {
         })
     }
 
+    handleLaneAction(event: Event, action: string) {
+        console.log(`Selected action for ${this.lane.laneName}: ${action}`)
+
+        let gcode = ''
+        switch (action) {
+            case 'load':
+                gcode = `CHANGE_TOOL LANE=${this.lane.laneName}`
+                break
+            case 'unload':
+                gcode = `TOOL_UNLOAD LANE=${this.lane.laneName}`
+                break
+            case 'eject':
+                gcode = `LANE_UNLOAD LANE=${this.lane.laneName}`
+                break
+            default:
+                console.warn(`Unknown action: ${action}`)
+                return
+        }
+
+        this.$nextTick(async () => {
+            try {
+                await this.$store.dispatch('printer/sendGcode', gcode)
+                console.log('G-code sent successfully')
+            } catch (error) {
+                console.error('Failed to send G-code:', error)
+            }
+        })
+    }
+
+    get macros() {
+        return this.$store.getters['printer/getMacros']
+    }
+
+    get setFilamentWeightMacro(): PrinterStateMacro | undefined {
+        const macros = ['SET_WEIGHT']
+
+        return this.macros.find((macro: PrinterStateMacro) => macros.includes(macro.name.toUpperCase()))
+    }
+
     spoolWeight(spool: Spool) {
         const weight = Math.round(spool.weight)
         return weight ? `${weight} g` : ''
@@ -270,22 +357,7 @@ export default class AfcUnits extends Mixins(BaseMixin) {
     stroke-width: 2px;
 }
 
-.theme--dark .spool-card .afclist {
-    color: white;
-    background-color: #2e2e2e;
-}
-
-.theme--light .spool-card .afclist {
-    background-color: #ebebeb;
-}
-
 .spacer {
     flex-grow: 1;
 }
-
-.afclist {
-    cursor: pointer;
-    padding-left: 5px;
-    padding-right: 1px;
-}
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 3681c8167..27f6f4a61 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -609,16 +609,24 @@
     },
     "Panels": {
         "AfcPanel": {
+            "Detected": "Detected",
+            "Eject": "Eject Filament",
+            "Empty": "Empty",
             "ExtruderTools": "Extruder Tools",
             "Headline": "Automated Filament Control",
             "Hub": "Hub",
             "HubStatus": "{unit} Hub Load Status",
             "InfiniteSpool": "Next lane to load if the current lane runs out",
+            "LaneCommands": "Lane Controls",
+            "LaneEmpty": "Empty",
+            "LaneErrorLoad": "Check Lane, Filament not detected at the extruder",
             "LaneLoaded": "Loaded",
             "LaneLoadedNone": "NONE",
             "LaneMap": "Remap current lane to selected T command",
+            "Load": "Load Lane",
             "PostExtruderSensor": "Post-Extruder Sensor",
-            "PreExtruderSensor": "Pre-Extruder Sensor"
+            "PreExtruderSensor": "Pre-Extruder Sensor",
+            "Unload": "Unload Lane"
         },
         "AfcSpoolPanel": {
             "FilamentType": "Filament Type",