Armored Turtle AFC

.gitignore

@@ -20,3 +20,18 @@ package-lock.json
 cypress/screenshots/
 cypress/videos/
 components.d.ts
+.env.development.local.example
+.env.development.local.example
+.vs/mainsail-AFC/FileContentIndex/5bdbf5aa-9859-4380-8abc-de4486603c4d.vsidx
+.vs/mainsail-AFC/FileContentIndex/c628b66e-9226-4f15-a947-8c3fce887af8.vsidx
+.vs/VSWorkspaceState.json
+.env.development.local.example
+.vs/mainsail-AFC/v17/.wsuo
+.vs/mainsail-AFC/v17/DocumentLayout.json
+.vs/mainsail-AFC/v17/workspaceFileList.bin
+.vs/ProjectSettings.json
+.vs/slnx.sqlite
+.env.development.local.example
+.env.development.local.example
+package-lock.json
+package.json

package.json

@@ -47,26 +47,26 @@
         "lodash.kebabcase": "^4.1.1",
         "lodash.throttle": "^4.1.1",
         "overlayscrollbars": "^1.13.1",
-        "overlayscrollbars-vue": "^0.2.2",
+        "overlayscrollbars-vue": "^0.5.9",
         "regenerator-runtime": "^0.14.0",
         "resize-observer-polyfill": "^1.5.1",
         "semver": "^7.5.2",
         "typed_janus_js": "^1.0.14",
         "uuid": "^9.0.0",
-        "vue": "^2.7.10",
-        "vue-class-component": "^7.2.6",
+        "vue": "^3.5.13",
+        "vue-class-component": "^7.2.2",
         "vue-echarts": "^6.0.2",
         "vue-i18n": "^8.25.0",
         "vue-inline-svg": "^2.1.3",
-        "vue-load-image": "^0.2.0",
+        "vue-load-image": "^1.1.0",
         "vue-meta": "^2.4.0",
         "vue-observe-visibility": "^1.0.0",
         "vue-property-decorator": "^9.1.2",
-        "vue-resize": "^1.0.1",
-        "vue-toast-notification": "^0.6.1",
+        "vue-resize": "^0.3.0",
+        "vue-toast-notification": "^3.1.3",
         "vuedraggable": "^2.24.3",
-        "vuetify": "^2.6.10",
-        "vuex": "^3.6.2"
+        "vuetify": "^3.7.5",
+        "vuex": "^4.1.0"
     },
     "devDependencies": {
         "@intlify/vite-plugin-vue-i18n": "^2.5.0",
@@ -90,7 +90,7 @@
         "eslint-plugin-vue": "^9.0.0",
         "postcss": "^8.4.31",
         "postcss-nesting": "^12.0.1",
-        "prettier": "^3.3.3",
+        "prettier": "3.4.2",
         "prettier-plugin-sort-json": "^4.0.0",
         "sass": "~1.32",
         "start-server-and-test": "^2.0.5",

src/components/dialogs/AfcChangeSpoolDialog.vue

@@ -0,0 +1,236 @@
+<template>
+    <div>
+        <v-dialog v-model="showDialog" width="800" persistent :fullscreen="isMobile">
+            <panel
+                :title="$t('Panels.SpoolmanPanel.ChangeSpool')"
+                :icon="mdiAdjust"
+                card-class="afc-change-spool-dialog"
+                :margin-bottom="false">
+                <template #buttons>
+                    <v-btn icon tile @click="close">
+                        <v-icon>{{ mdiCloseThick }}</v-icon>
+                    </v-btn>
+                </template>
+
+                <v-card-title>
+                    <v-text-field
+                        v-model="search"
+                        :append-icon="mdiMagnify"
+                        :label="$t('Panels.SpoolmanPanel.Search')"
+                        outlined
+                        dense
+                        hide-details
+                        style="max-width: 300px" />
+                    <v-spacer />
+                    <v-btn
+                        :title="$t('Panels.SpoolmanPanel.EjectSpool')"
+                        class="px-2 minwidth-0 ml-3"
+                        :loading="loadings.includes('ejectSpool')"
+                        @click="ejectSpool">
+                        <v-icon>{{ mdiEject }}</v-icon>
+                    </v-btn>
+                    <v-btn
+                        :title="$t('Panels.SpoolmanPanel.Refresh')"
+                        class="px-2 minwidth-0 ml-3"
+                        :loading="loadings.includes('refreshSpools')"
+                        @click="refreshSpools">
+                        <v-icon>{{ mdiRefresh }}</v-icon>
+                    </v-btn>
+                    <v-btn
+                        :title="$t('Panels.SpoolmanPanel.OpenSpoolManager')"
+                        class="px-2 minwidth-0 ml-3"
+                        @click="openSpoolManager">
+                        <v-icon>{{ mdiDatabase }}</v-icon>
+                    </v-btn>
+                </v-card-title>
+                <v-card-text class="px-0 pb-0">
+                    <v-data-table
+                        :headers="headers"
+                        :items="spools"
+                        item-key="id"
+                        :search="search"
+                        sort-by="last_used"
+                        :sort-desc="true"
+                        :custom-filter="customFilter">
+                        <template #no-data>
+                            <div class="text-center">{{ $t('Panels.SpoolmanPanel.NoSpools') }}</div>
+                        </template>
+                        <template #no-results>
+                            <div class="text-center">{{ $t('Panels.SpoolmanPanel.NoResults') }}</div>
+                        </template>
+
+                        <template #item="{ item }">
+                            <SpoolmanChangeSpoolDialogRow
+                                :key="item.id"
+                                :spool="item"
+                                :max_id_digits="max_spool_id_digits"
+                                @set-spool="setSpool" />
+                        </template>
+                    </v-data-table>
+                </v-card-text>
+            </panel>
+        </v-dialog>
+    </div>
+</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 Panel from '@/components/ui/Panel.vue'
+import { mdiCloseThick, mdiAdjust, mdiDatabase, mdiMagnify, mdiRefresh, mdiEject } from '@mdi/js'
+import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
+import SpoolmanChangeSpoolDialogRow from '@/components/dialogs/SpoolmanChangeSpoolDialogRow.vue'
+
+@Component({
+    components: { SpoolmanChangeSpoolDialogRow, Panel },
+})
+export default class AfcChangeSpoolDialog extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) laneData!: any
+    mdiAdjust = mdiAdjust
+    mdiCloseThick = mdiCloseThick
+    mdiDatabase = mdiDatabase
+    mdiMagnify = mdiMagnify
+    mdiRefresh = mdiRefresh
+    mdiEject = mdiEject
+
+    @Prop({ required: true }) declare readonly showDialog: boolean
+
+    search = ''
+
+    get spools(): ServerSpoolmanStateSpool[] {
+        return this.$store.state.server.spoolman.spools ?? []
+    }
+
+    get max_spool_id_digits(): number {
+        const max_id = this.$store.state.server.spoolman.spools.reduce(
+            (x: number, s: ServerSpoolmanStateSpool) => Math.max(x, s.id),
+            0
+        )
+
+        return max_id.toString().length
+    }
+
+    get headers() {
+        return [
+            {
+                text: ' ',
+                align: 'start',
+                sortable: false,
+            },
+            {
+                text: this.$t('Panels.SpoolmanPanel.Filament'),
+                align: 'start',
+                value: 'filament.name',
+                sortable: false,
+            },
+            {
+                text: this.$t('Panels.SpoolmanPanel.Material'),
+                align: 'center',
+                value: 'filament.material',
+            },
+            {
+                text: this.$t('Panels.SpoolmanPanel.LastUsed'),
+                align: 'end',
+                value: 'last_used',
+            },
+            {
+                text: this.$t('Panels.SpoolmanPanel.Weight'),
+                align: 'end',
+                value: 'remaining_weight',
+            },
+        ]
+    }
+
+    get spoolManagerUrl() {
+        return this.$store.state.server.config.config?.spoolman?.server ?? null
+    }
+
+    openSpoolManager() {
+        window.open(this.spoolManagerUrl, '_blank')
+    }
+
+    mounted() {
+        this.refresh()
+    }
+
+    refresh() {
+        this.$store.dispatch('server/spoolman/refreshSpools')
+    }
+
+    close() {
+        this.$emit('close')
+    }
+
+    ejectSpool() {
+        if (this.laneData != null) {
+            const gcode = `SET_SPOOL_ID LANE=${this.laneData.laneName} SPOOL_ID=`
+            console.log('Dispatching G-code:', gcode)
+
+            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)
+                }
+            })
+
+            this.$emit('fetch-spool')
+            this.close()
+        }
+    }
+
+    refreshSpools() {
+        this.$store.dispatch('server/spoolman/refreshSpools')
+    }
+
+    customFilter(value: any, search: string, item: ServerSpoolmanStateSpool): boolean {
+        if (search.trim().startsWith('web+spoolman:s-')) {
+            const spoolId = parseInt(search.split('-')[1] ?? -1)
+            return item.id === spoolId
+        }
+
+        const querySplits = search.toLowerCase().split(' ')
+        const searchArray = [
+            item.id.toString(),
+            item.comment,
+            item.filament.name,
+            item.filament.vendor.name,
+            item.filament.material,
+            item.location,
+        ]
+
+        for (const query of querySplits) {
+            const result = searchArray.some((q) => q?.toLowerCase().includes(query))
+
+            if (!result) return false
+        }
+
+        return true
+    }
+
+    setSpool(spool: any) {
+        console.log('Spool set as:', spool)
+        console.log('Lane data received:', this.laneData)
+        const gcode = `SET_SPOOL_ID LANE=${this.laneData.laneName} SPOOL_ID=${spool.id}`
+        console.log('Dispatching G-code:', gcode)
+
+        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)
+            }
+        })
+        this.$emit('fetch-spool')
+        this.close()
+    }
+
+    @Watch('showDialog')
+    onShowDialogChanged(newVal: boolean) {
+        if (newVal) this.search = ''
+    }
+}
+</script>