From a00259f81ad4d1e99942e51ff69c4f4e7b3bb8c6 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 30 Aug 2023 23:08:36 +0200
Subject: [PATCH 01/32] feat: add first init process of spoolman

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/store/server/index.ts              |  2 +
 src/store/server/spoolman/actions.ts   | 56 ++++++++++++++++++++++++++
 src/store/server/spoolman/getters.ts   |  5 +++
 src/store/server/spoolman/index.ts     | 32 +++++++++++++++
 src/store/server/spoolman/mutations.ts | 22 ++++++++++
 src/store/server/spoolman/types.ts     | 25 ++++++++++++
 src/store/variables.ts                 | 10 ++++-
 7 files changed, 151 insertions(+), 1 deletion(-)
 create mode 100644 src/store/server/spoolman/actions.ts
 create mode 100644 src/store/server/spoolman/getters.ts
 create mode 100644 src/store/server/spoolman/index.ts
 create mode 100644 src/store/server/spoolman/mutations.ts
 create mode 100644 src/store/server/spoolman/types.ts

diff --git a/src/store/server/index.ts b/src/store/server/index.ts
index 95717ac7c..643e9ce4c 100644
--- a/src/store/server/index.ts
+++ b/src/store/server/index.ts
@@ -11,6 +11,7 @@ import { history } from '@/store/server/history'
 import { timelapse } from '@/store/server/timelapse'
 import { jobQueue } from '@/store/server/jobQueue'
 import { announcements } from '@/store/server/announcements'
+import { spoolman } from '@/store/server/spoolman'
 
 // create getDefaultState
 export const getDefaultState = (): ServerState => {
@@ -59,5 +60,6 @@ export const server: Module<ServerState, any> = {
         timelapse,
         jobQueue,
         announcements,
+        spoolman,
     },
 }
diff --git a/src/store/server/spoolman/actions.ts b/src/store/server/spoolman/actions.ts
new file mode 100644
index 000000000..b8b3d53c7
--- /dev/null
+++ b/src/store/server/spoolman/actions.ts
@@ -0,0 +1,56 @@
+import Vue from 'vue'
+import { ActionTree } from 'vuex'
+import { RootState } from '@/store/types'
+import { ServerSpoolmanState } from './types'
+
+export const actions: ActionTree<ServerSpoolmanState, RootState> = {
+    reset({ commit }) {
+        commit('reset')
+    },
+
+    init({ dispatch }) {
+        Vue.$socket.emit('server.spoolman.get_spool_id', {}, { action: 'server/spoolman/getSpoolId' })
+        Vue.$socket.emit(
+            'server.spoolman.proxy',
+            {
+                request_method: 'GET',
+                path: '/v1/info',
+            },
+            { action: 'server/spoolman/getInfo' }
+        )
+        Vue.$socket.emit(
+            'server.spoolman.proxy',
+            {
+                request_method: 'GET',
+                path: '/v1/vendor',
+            },
+            { action: 'server/spoolman/getVendors' }
+        )
+
+        dispatch('socket/addInitModule', 'server/spoolman/getSpoolId', { root: true })
+        dispatch('socket/addInitModule', 'server/spoolman/getInfo', { root: true })
+        dispatch('socket/addInitModule', 'server/spoolman/getVendors', { root: true })
+
+        dispatch('socket/removeInitModule', 'server/spoolman/init', { root: true })
+    },
+
+    getSpoolId({ commit, dispatch }, payload) {
+        commit('setSpoolId', payload.spool_id)
+        dispatch('socket/removeInitModule', 'server/spoolman/getSpoolId', { root: true })
+    },
+
+    getInfo({ commit, dispatch }, payload) {
+        delete payload.requestParams
+        commit('setInfo', payload)
+        dispatch('socket/removeInitModule', 'server/spoolman/getInfo', { root: true })
+    },
+
+    getVendors({ commit, dispatch }, payload) {
+        delete payload.requestParams
+        commit(
+            'setVendors',
+            Object.entries(payload).map((value) => value)
+        )
+        dispatch('socket/removeInitModule', 'server/spoolman/getVendors', { root: true })
+    },
+}
diff --git a/src/store/server/spoolman/getters.ts b/src/store/server/spoolman/getters.ts
new file mode 100644
index 000000000..0cdbc7858
--- /dev/null
+++ b/src/store/server/spoolman/getters.ts
@@ -0,0 +1,5 @@
+import { GetterTree } from 'vuex'
+import { ServerSpoolmanState } from './types'
+
+// eslint-disable-next-line
+export const getters: GetterTree<ServerSpoolmanState, any> = {}
diff --git a/src/store/server/spoolman/index.ts b/src/store/server/spoolman/index.ts
new file mode 100644
index 000000000..4d7d280f3
--- /dev/null
+++ b/src/store/server/spoolman/index.ts
@@ -0,0 +1,32 @@
+import { Module } from 'vuex'
+import { ServerSpoolmanState } from '@/store/server/spoolman/types'
+import { actions } from '@/store/server/spoolman/actions'
+import { mutations } from '@/store/server/spoolman/mutations'
+import { getters } from '@/store/server/spoolman/getters'
+
+export const getDefaultState = (): ServerSpoolmanState => {
+    return {
+        info: {
+            automatic_backups: false,
+            backups_dir: '',
+            data_dir: '',
+            debug_mode: false,
+            version: '',
+        },
+        spool_id: null,
+        vendors: [],
+        feeds: [],
+    }
+}
+
+// initial state
+const state = getDefaultState()
+
+// eslint-disable-next-line
+export const spoolman: Module<ServerSpoolmanState, any> = {
+    namespaced: true,
+    state,
+    getters,
+    actions,
+    mutations,
+}
diff --git a/src/store/server/spoolman/mutations.ts b/src/store/server/spoolman/mutations.ts
new file mode 100644
index 000000000..bf8575c4e
--- /dev/null
+++ b/src/store/server/spoolman/mutations.ts
@@ -0,0 +1,22 @@
+import { getDefaultState } from './index'
+import { MutationTree } from 'vuex'
+import { ServerSpoolmanState } from './types'
+import Vue from 'vue'
+
+export const mutations: MutationTree<ServerSpoolmanState> = {
+    reset(state) {
+        Object.assign(state, getDefaultState())
+    },
+
+    setSpoolId(state, payload) {
+        Vue.set(state, 'spool_id', payload)
+    },
+
+    setInfo(state, payload) {
+        Vue.set(state, 'info', payload)
+    },
+
+    setVendors(state, payload) {
+        Vue.set(state, 'vendors', payload)
+    },
+}
diff --git a/src/store/server/spoolman/types.ts b/src/store/server/spoolman/types.ts
new file mode 100644
index 000000000..e8c6bfaf0
--- /dev/null
+++ b/src/store/server/spoolman/types.ts
@@ -0,0 +1,25 @@
+export interface ServerSpoolmanState {
+    info: {
+        automatic_backups: boolean
+        backups_dir: string
+        data_dir: string
+        debug_mode: boolean
+        version: string
+    }
+    spool_id: number | null
+    vendors: ServerSpoolmanStateVendor[]
+    feeds: string[]
+}
+
+export interface ServerSpoolmanStateVendor {
+    id: number
+    registered: string
+    name: string
+}
+
+export interface ServerSpoolmanStateFilament {
+    id: number
+    registered: string
+    name: string
+    comment?: string
+}
diff --git a/src/store/variables.ts b/src/store/variables.ts
index d2a847be4..950b9e3d7 100644
--- a/src/store/variables.ts
+++ b/src/store/variables.ts
@@ -24,7 +24,15 @@ export const validGcodeExtensions = ['.gcode', '.g', '.gco', '.ufp', '.nc']
 /*
  * List of initable server components
  */
-export const initableServerComponents = ['history', 'power', 'updateManager', 'timelapse', 'jobQueue', 'announcements']
+export const initableServerComponents = [
+    'history',
+    'power',
+    'updateManager',
+    'timelapse',
+    'jobQueue',
+    'announcements',
+    'spoolman',
+]
 
 /*
  * List of required klipper config modules

From d8bffe6f9ba9456995e6a2f651e200ea54ed6e8c Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 30 Aug 2023 23:25:11 +0200
Subject: [PATCH 02/32] feat: add spoolman panel on dashboard if moonraker
 component exists

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/SpoolmanPanel.vue | 30 +++++++++++++++++++++++++
 src/pages/Dashboard.vue                 |  2 ++
 src/store/gui/getters.ts                |  5 +++++
 src/store/server/spoolman/actions.ts    | 15 +++++++++++++
 src/store/server/spoolman/index.ts      |  1 +
 src/store/server/spoolman/mutations.ts  |  4 ++++
 src/store/server/spoolman/types.ts      |  1 +
 src/store/variables.ts                  |  1 +
 8 files changed, 59 insertions(+)
 create mode 100644 src/components/panels/SpoolmanPanel.vue

diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
new file mode 100644
index 000000000..2d7435fc9
--- /dev/null
+++ b/src/components/panels/SpoolmanPanel.vue
@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <panel :icon="mdiAdjust" :title="title" card-class="spoolman-panel">bla</panel>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import { mdiAdjust } from '@mdi/js'
+@Component({
+    components: { Panel },
+})
+export default class SpoolmanPanel extends Mixins(BaseMixin) {
+    mdiAdjust = mdiAdjust
+
+    get health() {
+        return this.$store.state.server.spoolman.health ?? ''
+    }
+
+    get title() {
+        if (this.health === '') return 'Spoolman'
+
+        return `Spoolman (${this.health})`
+    }
+}
+</script>
+
+<style scoped></style>
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 86fdd025b..6d8d7d326 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -91,6 +91,7 @@ import MacrosPanel from '@/components/panels/MacrosPanel.vue'
 import MiniconsolePanel from '@/components/panels/MiniconsolePanel.vue'
 import MinSettingsPanel from '@/components/panels/MinSettingsPanel.vue'
 import MiscellaneousPanel from '@/components/panels/MiscellaneousPanel.vue'
+import SpoolmanPanel from '@/components/panels/SpoolmanPanel.vue'
 import StatusPanel from '@/components/panels/StatusPanel.vue'
 import ToolheadControlPanel from '@/components/panels/ToolheadControlPanel.vue'
 import TemperaturePanel from '@/components/panels/TemperaturePanel.vue'
@@ -106,6 +107,7 @@ import WebcamPanel from '@/components/panels/WebcamPanel.vue'
         MiniconsolePanel,
         MinSettingsPanel,
         MiscellaneousPanel,
+        SpoolmanPanel,
         StatusPanel,
         ToolheadControlPanel,
         TemperaturePanel,
diff --git a/src/store/gui/getters.ts b/src/store/gui/getters.ts
index 039b9846c..c26e42a90 100644
--- a/src/store/gui/getters.ts
+++ b/src/store/gui/getters.ts
@@ -72,6 +72,11 @@ export const getters: GetterTree<GuiState, any> = {
             allPanels = allPanels.filter((name) => name !== 'webcam')
         }
 
+        // remove spoolman panel, if no spoolman component exists in moonraker
+        if (!rootState.server.components.includes('spoolman')) {
+            allPanels = allPanels.filter((name) => name !== 'spoolman')
+        }
+
         return allPanels
     },
 
diff --git a/src/store/server/spoolman/actions.ts b/src/store/server/spoolman/actions.ts
index b8b3d53c7..1a6970575 100644
--- a/src/store/server/spoolman/actions.ts
+++ b/src/store/server/spoolman/actions.ts
@@ -18,6 +18,14 @@ export const actions: ActionTree<ServerSpoolmanState, RootState> = {
             },
             { action: 'server/spoolman/getInfo' }
         )
+        Vue.$socket.emit(
+            'server.spoolman.proxy',
+            {
+                request_method: 'GET',
+                path: '/v1/health',
+            },
+            { action: 'server/spoolman/getHealth' }
+        )
         Vue.$socket.emit(
             'server.spoolman.proxy',
             {
@@ -28,6 +36,7 @@ export const actions: ActionTree<ServerSpoolmanState, RootState> = {
         )
 
         dispatch('socket/addInitModule', 'server/spoolman/getSpoolId', { root: true })
+        dispatch('socket/addInitModule', 'server/spoolman/getHealth', { root: true })
         dispatch('socket/addInitModule', 'server/spoolman/getInfo', { root: true })
         dispatch('socket/addInitModule', 'server/spoolman/getVendors', { root: true })
 
@@ -39,6 +48,12 @@ export const actions: ActionTree<ServerSpoolmanState, RootState> = {
         dispatch('socket/removeInitModule', 'server/spoolman/getSpoolId', { root: true })
     },
 
+    getHealth({ commit, dispatch }, payload) {
+        delete payload.requestParams
+        commit('setHealth', payload.status)
+        dispatch('socket/removeInitModule', 'server/spoolman/getHealth', { root: true })
+    },
+
     getInfo({ commit, dispatch }, payload) {
         delete payload.requestParams
         commit('setInfo', payload)
diff --git a/src/store/server/spoolman/index.ts b/src/store/server/spoolman/index.ts
index 4d7d280f3..1cd4fdb76 100644
--- a/src/store/server/spoolman/index.ts
+++ b/src/store/server/spoolman/index.ts
@@ -6,6 +6,7 @@ import { getters } from '@/store/server/spoolman/getters'
 
 export const getDefaultState = (): ServerSpoolmanState => {
     return {
+        health: '',
         info: {
             automatic_backups: false,
             backups_dir: '',
diff --git a/src/store/server/spoolman/mutations.ts b/src/store/server/spoolman/mutations.ts
index bf8575c4e..c91d97742 100644
--- a/src/store/server/spoolman/mutations.ts
+++ b/src/store/server/spoolman/mutations.ts
@@ -12,6 +12,10 @@ export const mutations: MutationTree<ServerSpoolmanState> = {
         Vue.set(state, 'spool_id', payload)
     },
 
+    setHealth(state, payload) {
+        Vue.set(state, 'health', payload)
+    },
+
     setInfo(state, payload) {
         Vue.set(state, 'info', payload)
     },
diff --git a/src/store/server/spoolman/types.ts b/src/store/server/spoolman/types.ts
index e8c6bfaf0..6337a67bd 100644
--- a/src/store/server/spoolman/types.ts
+++ b/src/store/server/spoolman/types.ts
@@ -1,4 +1,5 @@
 export interface ServerSpoolmanState {
+    health: string
     info: {
         automatic_backups: boolean
         backups_dir: string
diff --git a/src/store/variables.ts b/src/store/variables.ts
index 950b9e3d7..b7f6f8b54 100644
--- a/src/store/variables.ts
+++ b/src/store/variables.ts
@@ -85,6 +85,7 @@ export const allDashboardPanels = [
     'machine-settings',
     'miniconsole',
     'miscellaneous',
+    'spoolman',
     'temperature',
     'webcam',
 ]

From 818be405b6204939921caa4a83cb03626b6c17c9 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 2 Sep 2023 15:05:15 +0200
Subject: [PATCH 03/32] feat: add icon for spool

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/SpoolmanPanel.vue |  8 ++++-
 src/components/ui/SpoolIcon.vue         | 42 +++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/SpoolIcon.vue

diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
index 2d7435fc9..5a8349fe0 100644
--- a/src/components/panels/SpoolmanPanel.vue
+++ b/src/components/panels/SpoolmanPanel.vue
@@ -1,6 +1,12 @@
 <template>
     <div>
-        <panel :icon="mdiAdjust" :title="title" card-class="spoolman-panel">bla</panel>
+        <panel :icon="mdiAdjust" :title="title" card-class="spoolman-panel">
+            <v-row>
+                <v-col>
+                    <v-icon></v-icon>
+                </v-col>
+            </v-row>
+        </panel>
     </div>
 </template>
 
diff --git a/src/components/ui/SpoolIcon.vue b/src/components/ui/SpoolIcon.vue
new file mode 100644
index 000000000..6741ecb47
--- /dev/null
+++ b/src/components/ui/SpoolIcon.vue
@@ -0,0 +1,42 @@
+<template>
+    <svg
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+        x="0px"
+        y="0px"
+        viewBox="0 0 487.04 487.04"
+        xml:space="preserve">
+        <g>
+            <circle :style="styleCircle1" cx="243.52" cy="243.52" r="232.97" />
+            <circle :style="styleCircle2" cx="243.52" cy="243.52" r="112.5" />
+            <path
+                :style="styleCircle3"
+                d="M0,243.52c0,134.42,109.1,243.52,243.52,243.52,134.42,0,243.52-109.1,243.52-243.52S377.95,0,243.52,0C109.1,0,0,109.1,0,243.52Zm115.73,181.78c-52.4-39.5-86.52-98.59-94.52-163.72v-.09c-.68-5.43,1-10.89,4.6-15,3.6-4.12,8.79-6.51,14.26-6.57l118.36-1.33c18.99-.21,36.63,9.83,46.12,26.29,9.5,16.45,9.38,36.74-.3,53.09l-60.29,101.76c-2.8,4.73-7.48,8.03-12.87,9.1-5.39,1.06-10.98-.22-15.36-3.52ZM450.22,238.8c5.49,.06,10.7,2.46,14.31,6.59,3.62,4.13,5.3,9.61,4.63,15.06-8.01,65.13-42.12,124.22-94.52,163.72l-.07,.05c-4.37,3.29-9.93,4.57-15.3,3.51-5.37-1.06-10.03-4.36-12.82-9.06l-60.33-101.84c-9.68-16.34-9.8-36.64-.3-53.09,9.5-16.45,27.13-26.5,46.12-26.29l118.27,1.33ZM338.12,40.02c5.04,2.14,8.92,6.32,10.69,11.49,1.77,5.18,1.24,10.86-1.44,15.63l-58.03,103.17c-9.31,16.56-26.83,26.8-45.83,26.8-19,0-36.51-10.25-45.83-26.8l-57.99-103.09c-2.69-4.79-3.22-10.49-1.45-15.69,1.77-5.2,5.68-9.4,10.73-11.54,60.41-25.63,128.64-25.63,189.05,0l.08,.04Z" />
+        </g>
+    </svg>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '../mixins/base'
+
+@Component
+export default class SpoolIcon extends Mixins(BaseMixin) {
+    @Prop({ required: false, default: '' })
+    declare readonly color: string
+
+    get styleCircle1() {
+        return { fill: '#ff0' }
+    }
+
+    get styleCircle2() {
+        return { fill: '#bebebe' }
+    }
+
+    get styleCircle3() {
+        return { fill: '#343434' }
+    }
+}
+</script>

From 215aea8f7f491fe21b03d09d3bf251cc96bfea90 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 5 Sep 2023 07:20:04 +0200
Subject: [PATCH 04/32] WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../Spoolman/SpoolmanChangeSpoolDialog.vue    | 67 +++++++++++++++++++
 src/components/panels/SpoolmanPanel.vue       | 30 ++++++---
 2 files changed, 89 insertions(+), 8 deletions(-)
 create mode 100644 src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue

diff --git a/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue b/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue
new file mode 100644
index 000000000..dbfc62480
--- /dev/null
+++ b/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue
@@ -0,0 +1,67 @@
+<template>
+    <div>
+        <v-dialog v-model="showDialog" width="800" persistent :fullscreen="isMobile">
+            <panel
+                :title="$t('Panels.Spoolman.ChangeSpool')"
+                :icon="mdiAdjust"
+                card-class="spoolman-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="mdi-magnify" label="Search" single-line hide-details />
+                </v-card-title>
+                <v-card-text>
+                    <v-data-table
+                        :headers="headers"
+                        :items="spools"
+                        item-key="name"
+                        class="elevation-1"
+                        :search="search"
+                        :custom-filter="filterOnlyCapsText"></v-data-table>
+                </v-card-text>
+            </panel>
+        </v-dialog>
+    </div>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import { mdiCloseThick, mdiAdjust } from '@mdi/js'
+@Component({
+    components: { Panel },
+})
+export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
+    mdiAdjust = mdiAdjust
+    mdiCloseThick = mdiCloseThick
+
+    @Prop({ required: true }) declare readonly showDialog: boolean
+
+    search = ''
+
+    get spools() {
+        return this.$store.state.server.spoolman.spools ?? []
+    }
+
+    get headers() {
+        return [
+            {
+                text: 'Name',
+                align: 'start',
+                filterable: false,
+                value: 'name',
+            },
+        ]
+    }
+
+    close() {
+        this.$emit('close')
+    }
+}
+</script>
diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
index 5a8349fe0..e1ff6d0e6 100644
--- a/src/components/panels/SpoolmanPanel.vue
+++ b/src/components/panels/SpoolmanPanel.vue
@@ -1,12 +1,21 @@
 <template>
     <div>
-        <panel :icon="mdiAdjust" :title="title" card-class="spoolman-panel">
-            <v-row>
-                <v-col>
-                    <v-icon></v-icon>
-                </v-col>
-            </v-row>
+        <panel :icon="mdiAdjust" :title="title" card-class="spoolman-panel" :collapsible="true">
+            <template #buttons>
+                <v-btn icon @click="showChangeSpoolDialog = true">
+                    <v-icon>{{ mdiSync }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>
+                <v-row>
+                    <v-col class="pl-6 pt-6" style="max-width: 200px">
+                        <spool-icon />
+                    </v-col>
+                    <v-col>bla</v-col>
+                </v-row>
+            </v-card-text>
         </panel>
+        <spoolman-change-spool-dialog :show-dialog="showChangeSpoolDialog" @close="showChangeSpoolDialog = false" />
     </div>
 </template>
 
@@ -14,12 +23,17 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
-import { mdiAdjust } from '@mdi/js'
+import { mdiAdjust, mdiSync } from '@mdi/js'
+import SpoolmanChangeSpoolDialog from '@/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue'
+
 @Component({
-    components: { Panel },
+    components: { Panel, SpoolmanChangeSpoolDialog },
 })
 export default class SpoolmanPanel extends Mixins(BaseMixin) {
     mdiAdjust = mdiAdjust
+    mdiSync = mdiSync
+
+    showChangeSpoolDialog = false
 
     get health() {
         return this.$store.state.server.spoolman.health ?? ''

From 2c0ccb078f0276b6f15a1fc26512e3894ffc4487 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 7 Sep 2023 07:36:59 +0200
Subject: [PATCH 05/32] WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../Spoolman/SpoolmanChangeSpoolDialog.vue    | 28 +++++++++++++++----
 src/store/server/spoolman/actions.ts          | 19 +++++++++++++
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue b/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue
index dbfc62480..f1da3f7a5 100644
--- a/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue
+++ b/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue
@@ -14,14 +14,23 @@
                 <v-card-title>
                     <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details />
                 </v-card-title>
-                <v-card-text>
+                <v-card-text class="px-0 pb-0">
                     <v-data-table
                         :headers="headers"
                         :items="spools"
                         item-key="name"
                         class="elevation-1"
-                        :search="search"
-                        :custom-filter="filterOnlyCapsText"></v-data-table>
+                        :search="search">
+                        <template #no-data>
+                            <div class="text-center">{{ $t('Panels.Spoolman.NoSpools') }}</div>
+                        </template>
+
+                        <template #item="{ item }">
+                            <tr :key="item.filename" class="cursor-pointer">
+                                <td></td>
+                            </tr>
+                        </template>
+                    </v-data-table>
                 </v-card-text>
             </panel>
         </v-dialog>
@@ -30,7 +39,7 @@
 
 <script lang="ts">
 import Component from 'vue-class-component'
-import { Mixins, Prop } from 'vue-property-decorator'
+import { Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
 import { mdiCloseThick, mdiAdjust } from '@mdi/js'
@@ -52,7 +61,7 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
     get headers() {
         return [
             {
-                text: 'Name',
+                text: this.$t('Panels.Spoolman.Filament'),
                 align: 'start',
                 filterable: false,
                 value: 'name',
@@ -60,6 +69,15 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
         ]
     }
 
+    @Watch('spools')
+    onSpoolsChanged(newVal: any) {
+        window.console.log(newVal)
+    }
+
+    refresh() {
+        this.$store.dispatch('server/spoolman/refreshSpools')
+    }
+
     close() {
         this.$emit('close')
     }
diff --git a/src/store/server/spoolman/actions.ts b/src/store/server/spoolman/actions.ts
index 1a6970575..b877be630 100644
--- a/src/store/server/spoolman/actions.ts
+++ b/src/store/server/spoolman/actions.ts
@@ -68,4 +68,23 @@ export const actions: ActionTree<ServerSpoolmanState, RootState> = {
         )
         dispatch('socket/removeInitModule', 'server/spoolman/getVendors', { root: true })
     },
+
+    refreshSpools({ commit, dispatch }) {
+        Vue.$socket.emit(
+            'server.spoolman.proxy',
+            {
+                request_method: 'GET',
+                path: '/v1/spool',
+            },
+            { action: 'server/spoolman/getSpools' }
+        )
+
+        dispatch('socket/addLoading', 'refreshSpools', { root: true })
+    },
+
+    getSpools({ dispatch }, payload) {
+        window.console.log(payload)
+
+        dispatch('socket/removeLoading', 'refreshSpools', { root: true })
+    },
 }

From 31be81f43f355bdc9d3d592958e8a4ffb3c2f34e Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 8 Sep 2023 07:33:00 +0200
Subject: [PATCH 06/32] WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../Spoolman/SpoolmanChangeSpoolDialog.vue    | 33 +++++---
 .../Spoolman/SpoolmanChangeSpoolDialogRow.vue | 82 +++++++++++++++++++
 src/components/ui/SpoolIcon.vue               |  4 +-
 src/locales/en.json                           |  9 ++
 src/store/server/spoolman/actions.ts          | 10 ++-
 src/store/server/spoolman/mutations.ts        |  4 +
 src/store/server/spoolman/types.ts            | 25 ++++++
 7 files changed, 151 insertions(+), 16 deletions(-)
 create mode 100644 src/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue

diff --git a/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue b/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue
index f1da3f7a5..f6ba8d0d9 100644
--- a/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue
+++ b/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue
@@ -26,9 +26,7 @@
                         </template>
 
                         <template #item="{ item }">
-                            <tr :key="item.filename" class="cursor-pointer">
-                                <td></td>
-                            </tr>
+                            <SpoolmanChangeSpoolDialogRow :key="item.id" :spool="item" />
                         </template>
                     </v-data-table>
                 </v-card-text>
@@ -39,12 +37,14 @@
 
 <script lang="ts">
 import Component from 'vue-class-component'
-import { Mixins, Prop, Watch } from 'vue-property-decorator'
+import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
 import { mdiCloseThick, mdiAdjust } from '@mdi/js'
+import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
+import SpoolmanChangeSpoolDialogRow from '@/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue'
 @Component({
-    components: { Panel },
+    components: { SpoolmanChangeSpoolDialogRow, Panel },
 })
 export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
     mdiAdjust = mdiAdjust
@@ -54,7 +54,7 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
 
     search = ''
 
-    get spools() {
+    get spools(): ServerSpoolmanStateSpool[] {
         return this.$store.state.server.spoolman.spools ?? []
     }
 
@@ -64,14 +64,27 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
                 text: this.$t('Panels.Spoolman.Filament'),
                 align: 'start',
                 filterable: false,
-                value: 'name',
+            },
+            {
+                text: this.$t('Panels.Spoolman.Material'),
+                align: 'center',
+                filterable: false,
+            },
+            {
+                text: this.$t('Panels.Spoolman.LastUsed'),
+                align: 'end',
+                filterable: false,
+            },
+            {
+                text: this.$t('Panels.Spoolman.Weight'),
+                align: 'end',
+                filterable: false,
             },
         ]
     }
 
-    @Watch('spools')
-    onSpoolsChanged(newVal: any) {
-        window.console.log(newVal)
+    mounted() {
+        this.refresh()
     }
 
     refresh() {
diff --git a/src/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue b/src/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue
new file mode 100644
index 000000000..c83f5925a
--- /dev/null
+++ b/src/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue
@@ -0,0 +1,82 @@
+<template>
+    <tr class="cursor-pointer">
+        <td class="py-2">
+            <spool-icon :color="color" style="width: 50px; float: left" class="mr-3" />
+            <div>
+                <strong>{{ vendor }} - {{ name }}</strong>
+                <template v-if="location">
+                    <br />
+                    {{ $t('Panels.Spoolman.Location') }}: {{ location }}
+                </template>
+                <template v-if="spool.comment">
+                    <br />
+                    {{ spool.comment }}
+                </template>
+            </div>
+        </td>
+        <td class="text-center">{{ material }}</td>
+        <td class="text-right">{{ last_used }}</td>
+        <td class="text-right">
+            <strong>{{ rest_weight_format }} g</strong>
+            <small class="ml-1">/ {{ total_weight_format }} g</small>
+        </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 { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
+@Component({})
+export default class SpoolmanChangeSpoolDialogRow extends Mixins(BaseMixin) {
+    @Prop({ required: true }) declare readonly spool: ServerSpoolmanStateSpool
+
+    get color() {
+        const color = this.spool.filament?.color_hex ?? '000'
+
+        return `#${color}`
+    }
+
+    get vendor() {
+        return this.spool.filament?.vendor?.name ?? 'Unknown'
+    }
+
+    get name() {
+        return this.spool.filament?.name ?? 'Unknown'
+    }
+
+    get location() {
+        return this.spool.location
+    }
+
+    get material() {
+        return this.spool.filament?.material ?? '--'
+    }
+
+    get used_weight() {
+        return this.spool.used_weight ?? 0
+    }
+
+    get total_weight() {
+        return this.spool.filament?.weight ?? 0
+    }
+
+    get rest_weight_format() {
+        return (this.total_weight - this.used_weight).toFixed(0)
+    }
+
+    get total_weight_format() {
+        return this.total_weight.toFixed(0)
+    }
+
+    get last_used() {
+        const last_used = this.spool.last_used ?? null
+        if (!last_used) return this.$t('Panels.Spoolman.Never')
+
+        const date = new Date(this.spool.last_used)
+
+        return date.toLocaleDateString()
+    }
+}
+</script>
diff --git a/src/components/ui/SpoolIcon.vue b/src/components/ui/SpoolIcon.vue
index 6741ecb47..730da9111 100644
--- a/src/components/ui/SpoolIcon.vue
+++ b/src/components/ui/SpoolIcon.vue
@@ -24,11 +24,11 @@ import BaseMixin from '../mixins/base'
 
 @Component
 export default class SpoolIcon extends Mixins(BaseMixin) {
-    @Prop({ required: false, default: '' })
+    @Prop({ required: false, default: '#ff0' })
     declare readonly color: string
 
     get styleCircle1() {
-        return { fill: '#ff0' }
+        return { fill: this.color }
     }
 
     get styleCircle2() {
diff --git a/src/locales/en.json b/src/locales/en.json
index b7234078d..58ced7e10 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -620,6 +620,15 @@
             "On": "On",
             "PowerControl": "Power Control"
         },
+        "Spoolman": {
+            "ChangeSpool": "Change Spool",
+            "Filament": "Filament",
+            "LastUsed": "Last Used",
+            "Location": "Location",
+            "Material": "Material",
+            "Never": "Never",
+            "Weight": "Weight"
+        },
         "StatusPanel": {
             "CancelPrint": "Cancel print",
             "ClearPrintStats": "Clear print stats",
diff --git a/src/store/server/spoolman/actions.ts b/src/store/server/spoolman/actions.ts
index b877be630..4262f5c40 100644
--- a/src/store/server/spoolman/actions.ts
+++ b/src/store/server/spoolman/actions.ts
@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { ActionTree } from 'vuex'
 import { RootState } from '@/store/types'
-import { ServerSpoolmanState } from './types'
+import { ServerSpoolmanState } from '@/store/server/spoolman/types'
 
 export const actions: ActionTree<ServerSpoolmanState, RootState> = {
     reset({ commit }) {
@@ -69,7 +69,7 @@ export const actions: ActionTree<ServerSpoolmanState, RootState> = {
         dispatch('socket/removeInitModule', 'server/spoolman/getVendors', { root: true })
     },
 
-    refreshSpools({ commit, dispatch }) {
+    refreshSpools({ dispatch }) {
         Vue.$socket.emit(
             'server.spoolman.proxy',
             {
@@ -82,8 +82,10 @@ export const actions: ActionTree<ServerSpoolmanState, RootState> = {
         dispatch('socket/addLoading', 'refreshSpools', { root: true })
     },
 
-    getSpools({ dispatch }, payload) {
-        window.console.log(payload)
+    getSpools({ commit, dispatch }, payload) {
+        if ('requestParams' in payload) delete payload.requestParams
+        const spools = Object.entries(payload).map((value) => value[1])
+        commit('setSpools', spools)
 
         dispatch('socket/removeLoading', 'refreshSpools', { root: true })
     },
diff --git a/src/store/server/spoolman/mutations.ts b/src/store/server/spoolman/mutations.ts
index c91d97742..fbffbd0e7 100644
--- a/src/store/server/spoolman/mutations.ts
+++ b/src/store/server/spoolman/mutations.ts
@@ -23,4 +23,8 @@ export const mutations: MutationTree<ServerSpoolmanState> = {
     setVendors(state, payload) {
         Vue.set(state, 'vendors', payload)
     },
+
+    setSpools(state, payload) {
+        Vue.set(state, 'spools', payload)
+    },
 }
diff --git a/src/store/server/spoolman/types.ts b/src/store/server/spoolman/types.ts
index 6337a67bd..959e1ee87 100644
--- a/src/store/server/spoolman/types.ts
+++ b/src/store/server/spoolman/types.ts
@@ -23,4 +23,29 @@ export interface ServerSpoolmanStateFilament {
     registered: string
     name: string
     comment?: string
+    color_hex: string
+    density: number
+    diameter: number
+    material: string
+    price: number
+    settings_bed_temp: number
+    settings_extruder_temp: number
+    spool_weight: number
+    weight: number
+    vendor: ServerSpoolmanStateVendor
+}
+
+export interface ServerSpoolmanStateSpool {
+    id: number
+    registered: string
+    archived: boolean
+    filament: ServerSpoolmanStateFilament
+    first_used: string
+    last_used: string
+    remaining_length: number
+    remaining_weight: number
+    used_length: number
+    used_weight: number
+    location?: string
+    comment?: string
 }

From 475e31eb7168d292f4a3c6e52d9e679a06297497 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 10 Sep 2023 23:27:57 +0200
Subject: [PATCH 07/32] WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../Spoolman/SpoolmanChangeSpoolDialog.vue    | 89 ++++++++++++++++---
 .../Spoolman/SpoolmanChangeSpoolDialogRow.vue | 40 ++++++---
 src/components/panels/SpoolmanPanel.vue       | 88 +++++++++++++++++-
 src/locales/en.json                           | 15 +++-
 src/store/server/spoolman/actions.ts          | 37 ++++++--
 src/store/server/spoolman/index.ts            |  3 +-
 src/store/server/spoolman/mutations.ts        |  8 +-
 src/store/server/spoolman/types.ts            |  3 +-
 src/store/socket/actions.ts                   |  4 +
 9 files changed, 250 insertions(+), 37 deletions(-)

diff --git a/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue b/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue
index f6ba8d0d9..caaf8ff5f 100644
--- a/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue
+++ b/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue
@@ -12,21 +12,47 @@
                     </v-btn>
                 </template>
                 <v-card-title>
-                    <v-text-field v-model="search" append-icon="mdi-magnify" label="Search" single-line hide-details />
+                    <v-text-field
+                        v-model="search"
+                        :append-icon="mdiMagnify"
+                        :label="$t('Panels.Spoolman.Search')"
+                        outlined
+                        dense
+                        hide-details
+                        style="max-width: 300px" />
+                    <v-spacer />
+                    <v-btn
+                        :title="$t('Panels.Spoolman.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.Spoolman.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="name"
+                        item-key="id"
                         class="elevation-1"
-                        :search="search">
+                        :search="search"
+                        :custom-filter="customFilter"
+                        :disable-sort="true">
                         <template #no-data>
                             <div class="text-center">{{ $t('Panels.Spoolman.NoSpools') }}</div>
                         </template>
+                        <template #no-results>
+                            <div class="text-center">{{ $t('Panels.Spoolman.NoResults') }}</div>
+                        </template>
 
                         <template #item="{ item }">
-                            <SpoolmanChangeSpoolDialogRow :key="item.id" :spool="item" />
+                            <SpoolmanChangeSpoolDialogRow :key="item.id" :spool="item" @set-spool="setSpool" />
                         </template>
                     </v-data-table>
                 </v-card-text>
@@ -40,7 +66,7 @@ import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
-import { mdiCloseThick, mdiAdjust } from '@mdi/js'
+import { mdiCloseThick, mdiAdjust, mdiDatabase, mdiMagnify, mdiRefresh } from '@mdi/js'
 import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
 import SpoolmanChangeSpoolDialogRow from '@/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue'
 @Component({
@@ -49,40 +75,55 @@ import SpoolmanChangeSpoolDialogRow from '@/components/panels/Spoolman/SpoolmanC
 export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
     mdiAdjust = mdiAdjust
     mdiCloseThick = mdiCloseThick
+    mdiDatabase = mdiDatabase
+    mdiMagnify = mdiMagnify
+    mdiRefresh = mdiRefresh
 
     @Prop({ required: true }) declare readonly showDialog: boolean
 
     search = ''
 
     get spools(): ServerSpoolmanStateSpool[] {
-        return this.$store.state.server.spoolman.spools ?? []
+        const spools = this.$store.state.server.spoolman.spools ?? []
+
+        return spools.filter((spool: ServerSpoolmanStateSpool) => {
+            return spool.filament !== null
+        })
     }
 
     get headers() {
         return [
+            {
+                text: ' ',
+                align: 'start',
+            },
             {
                 text: this.$t('Panels.Spoolman.Filament'),
                 align: 'start',
-                filterable: false,
             },
             {
                 text: this.$t('Panels.Spoolman.Material'),
                 align: 'center',
-                filterable: false,
             },
             {
                 text: this.$t('Panels.Spoolman.LastUsed'),
                 align: 'end',
-                filterable: false,
             },
             {
                 text: this.$t('Panels.Spoolman.Weight'),
                 align: 'end',
-                filterable: false,
             },
         ]
     }
 
+    get spoolManagerUrl() {
+        return this.$store.state.server.config.config?.spoolman?.server ?? null
+    }
+
+    openSpoolManager() {
+        window.open(this.spoolManagerUrl, '_blank')
+    }
+
     mounted() {
         this.refresh()
     }
@@ -94,5 +135,33 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
     close() {
         this.$emit('close')
     }
+
+    refreshSpools() {
+        this.$store.dispatch('server/spoolman/refreshSpools')
+    }
+
+    customFilter(value: any, search: string, item: ServerSpoolmanStateSpool): boolean {
+        const querySplits = search.toLowerCase().split(' ')
+        const searchArray = [
+            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: ServerSpoolmanStateSpool) {
+        this.$store.dispatch('server/spoolman/setActiveSpool', spool.id)
+        this.close()
+    }
 }
 </script>
diff --git a/src/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue b/src/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue
index c83f5925a..a4596a3f0 100644
--- a/src/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue
+++ b/src/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue
@@ -1,18 +1,18 @@
 <template>
-    <tr class="cursor-pointer">
-        <td class="py-2">
+    <tr class="cursor-pointer" @click="setSpoolRow">
+        <td style="width: 50px" class="pr-0 py-2">
             <spool-icon :color="color" style="width: 50px; float: left" class="mr-3" />
-            <div>
-                <strong>{{ vendor }} - {{ name }}</strong>
-                <template v-if="location">
-                    <br />
-                    {{ $t('Panels.Spoolman.Location') }}: {{ location }}
-                </template>
-                <template v-if="spool.comment">
-                    <br />
-                    {{ spool.comment }}
-                </template>
-            </div>
+        </td>
+        <td class="py-2">
+            <strong>{{ vendor }} - {{ name }}</strong>
+            <template v-if="location">
+                <br />
+                {{ $t('Panels.Spoolman.Location') }}: {{ location }}
+            </template>
+            <template v-if="spool.comment">
+                <br />
+                {{ spool.comment }}
+            </template>
         </td>
         <td class="text-center">{{ material }}</td>
         <td class="text-right">{{ last_used }}</td>
@@ -75,8 +75,22 @@ export default class SpoolmanChangeSpoolDialogRow extends Mixins(BaseMixin) {
         if (!last_used) return this.$t('Panels.Spoolman.Never')
 
         const date = new Date(this.spool.last_used)
+        const now = new Date()
+        const diff = now.getTime() - date.getTime()
+
+        if (diff <= 1000 * 60 * 60 * 24) return this.$t('Panels.Spoolman.Today')
+        if (diff <= 1000 * 60 * 60 * 24 * 2) return this.$t('Panels.Spoolman.Yesterday')
+        if (diff <= 1000 * 60 * 60 * 24 * 14) {
+            const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+
+            return this.$t('Panels.Spoolman.DaysAgo', { days })
+        }
 
         return date.toLocaleDateString()
     }
+
+    setSpoolRow() {
+        this.$emit('set-spool', this.spool)
+    }
 }
 </script>
diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
index e1ff6d0e6..eff3b2d6e 100644
--- a/src/components/panels/SpoolmanPanel.vue
+++ b/src/components/panels/SpoolmanPanel.vue
@@ -6,14 +6,29 @@
                     <v-icon>{{ mdiSync }}</v-icon>
                 </v-btn>
             </template>
-            <v-card-text>
+            <v-card-text v-if="active_spool === null">
                 <v-row>
-                    <v-col class="pl-6 pt-6" style="max-width: 200px">
-                        <spool-icon />
+                    <v-col class="text-center">
+                        <p class="text--disabled">{{ $t('Panels.Spoolman.NoActiveSpool') }}</p>
+                        <v-btn small color="primary" @click="showChangeSpoolDialog = true">
+                            {{ $t('Panels.Spoolman.SelectSpool') }}
+                        </v-btn>
                     </v-col>
-                    <v-col>bla</v-col>
                 </v-row>
             </v-card-text>
+            <v-list-item v-else three-line>
+                <v-list-item-content>
+                    <div class="text-overline mb-1">{{ vendor }}</div>
+                    <v-list-item-title class="text-h5 mb-1">
+                        {{ name }}
+                    </v-list-item-title>
+                    <v-list-item-subtitle>{{ subtitle }}</v-list-item-subtitle>
+                </v-list-item-content>
+
+                <v-list-item-avatar tile size="80">
+                    <spool-icon :color="color" />
+                </v-list-item-avatar>
+            </v-list-item>
         </panel>
         <spoolman-change-spool-dialog :show-dialog="showChangeSpoolDialog" @close="showChangeSpoolDialog = false" />
     </div>
@@ -25,6 +40,7 @@ import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
 import { mdiAdjust, mdiSync } from '@mdi/js'
 import SpoolmanChangeSpoolDialog from '@/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue'
+import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
 
 @Component({
     components: { Panel, SpoolmanChangeSpoolDialog },
@@ -44,6 +60,70 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
 
         return `Spoolman (${this.health})`
     }
+
+    get active_spool(): ServerSpoolmanStateSpool | null {
+        return this.$store.state.server.spoolman.active_spool ?? null
+    }
+
+    get color() {
+        const color = this.active_spool?.filament.color_hex ?? null
+        if (color === null) return '#000'
+
+        return `#${color}`
+    }
+
+    get vendor() {
+        return this.active_spool?.filament?.vendor?.name ?? 'Unknown'
+    }
+
+    get name() {
+        return this.active_spool?.filament.name ?? 'Unknown'
+    }
+
+    get materialOutput() {
+        const material = this.active_spool?.filament.material ?? null
+        if (material === null) return null
+
+        return this.$t('Panels.Spoolman.MaterialOutput', { material })
+    }
+
+    get weightOutput() {
+        const remaining = this.active_spool?.remaining_weight ?? null
+        const total = this.active_spool?.filament.weight ?? null
+
+        if (remaining === null || total === null) return null
+
+        return this.$t('Panels.Spoolman.WeightOutput', { remaining, total })
+    }
+
+    get firstUsedString() {
+        const first_used = this.active_spool?.first_used ?? null
+        if (first_used === null) return null
+
+        const date = new Date(first_used)
+        const now = new Date()
+        const diff = now.getTime() - date.getTime()
+
+        if (diff <= 1000 * 60 * 60 * 24) return this.$t('Panels.Spoolman.Today')
+        if (diff <= 1000 * 60 * 60 * 24 * 2) return this.$t('Panels.Spoolman.Yesterday')
+        if (diff <= 1000 * 60 * 60 * 24 * 14) {
+            const days = Math.floor(diff / (1000 * 60 * 60 * 24))
+
+            return this.$t('Panels.Spoolman.DaysAgo', { days })
+        }
+
+        return date.toLocaleDateString()
+    }
+
+    get firstUsedOutput() {
+        if (this.firstUsedString === null) return null
+
+        return this.$t('Panels.Spoolman.FirstUsedOutput', { firstUsed: this.firstUsedString })
+    }
+
+    get subtitle() {
+        return [this.materialOutput, this.weightOutput, this.firstUsedOutput].filter((v) => v !== null).join(', ')
+    }
 }
 </script>
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 58ced7e10..0dba3b40d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -622,12 +622,25 @@
         },
         "Spoolman": {
             "ChangeSpool": "Change Spool",
+            "DaysAgo": "{days} days ago",
             "Filament": "Filament",
+            "FirstUsedOutput": "First used: {firstUsed}",
             "LastUsed": "Last Used",
             "Location": "Location",
             "Material": "Material",
+            "MaterialOutput": "Material: {material}",
             "Never": "Never",
-            "Weight": "Weight"
+            "NoActiveSpool": "Filament tracking is inactive. To get started, please select a spool.",
+            "NoResults": "No spool found with the current search criteria.",
+            "NoSpools": "No spools available",
+            "OpenSpoolManager": "open Spool Manager",
+            "Refresh": "refresh",
+            "Search": "Search",
+            "SelectSpool": "Select Spool",
+            "Today": "Today",
+            "Weight": "Weight",
+            "WeightOutput": "Weight: {remaining} / {total} g",
+            "Yesterday": "Yesterday"
         },
         "StatusPanel": {
             "CancelPrint": "Cancel print",
diff --git a/src/store/server/spoolman/actions.ts b/src/store/server/spoolman/actions.ts
index 4262f5c40..1bc7980a2 100644
--- a/src/store/server/spoolman/actions.ts
+++ b/src/store/server/spoolman/actions.ts
@@ -9,7 +9,7 @@ export const actions: ActionTree<ServerSpoolmanState, RootState> = {
     },
 
     init({ dispatch }) {
-        Vue.$socket.emit('server.spoolman.get_spool_id', {}, { action: 'server/spoolman/getSpoolId' })
+        Vue.$socket.emit('server.spoolman.get_spool_id', {}, { action: 'server/spoolman/getActiveSpoolId' })
         Vue.$socket.emit(
             'server.spoolman.proxy',
             {
@@ -35,7 +35,7 @@ export const actions: ActionTree<ServerSpoolmanState, RootState> = {
             { action: 'server/spoolman/getVendors' }
         )
 
-        dispatch('socket/addInitModule', 'server/spoolman/getSpoolId', { root: true })
+        dispatch('socket/addInitModule', 'server/spoolman/getActiveSpoolId', { root: true })
         dispatch('socket/addInitModule', 'server/spoolman/getHealth', { root: true })
         dispatch('socket/addInitModule', 'server/spoolman/getInfo', { root: true })
         dispatch('socket/addInitModule', 'server/spoolman/getVendors', { root: true })
@@ -43,9 +43,30 @@ export const actions: ActionTree<ServerSpoolmanState, RootState> = {
         dispatch('socket/removeInitModule', 'server/spoolman/init', { root: true })
     },
 
-    getSpoolId({ commit, dispatch }, payload) {
-        commit('setSpoolId', payload.spool_id)
-        dispatch('socket/removeInitModule', 'server/spoolman/getSpoolId', { root: true })
+    getActiveSpoolId({ commit, dispatch }, payload) {
+        commit('setActiveSpoolId', payload.spool_id)
+        dispatch('socket/removeInitModule', 'server/spoolman/getActiveSpoolId', { root: true })
+
+        // also set active spool to null, if spool_id is null
+        if (payload.spool_id === null) {
+            commit('setActiveSpool', null)
+            return
+        }
+
+        Vue.$socket.emit(
+            'server.spoolman.proxy',
+            {
+                request_method: 'GET',
+                path: `/v1/spool/${payload.spool_id}`,
+            },
+            { action: 'server/spoolman/getActiveSpool' }
+        )
+    },
+
+    getActiveSpool({ commit }, payload) {
+        if ('requestParams' in payload) delete payload.requestParams
+
+        commit('setActiveSpool', payload)
     },
 
     getHealth({ commit, dispatch }, payload) {
@@ -89,4 +110,10 @@ export const actions: ActionTree<ServerSpoolmanState, RootState> = {
 
         dispatch('socket/removeLoading', 'refreshSpools', { root: true })
     },
+
+    setActiveSpool(_, id: number | null) {
+        Vue.$socket.emit('server.spoolman.post_spool_id', {
+            spool_id: id,
+        })
+    },
 }
diff --git a/src/store/server/spoolman/index.ts b/src/store/server/spoolman/index.ts
index 1cd4fdb76..8c894c942 100644
--- a/src/store/server/spoolman/index.ts
+++ b/src/store/server/spoolman/index.ts
@@ -14,7 +14,8 @@ export const getDefaultState = (): ServerSpoolmanState => {
             debug_mode: false,
             version: '',
         },
-        spool_id: null,
+        active_spool_id: null,
+        active_spool: null,
         vendors: [],
         feeds: [],
     }
diff --git a/src/store/server/spoolman/mutations.ts b/src/store/server/spoolman/mutations.ts
index fbffbd0e7..f1a9f4093 100644
--- a/src/store/server/spoolman/mutations.ts
+++ b/src/store/server/spoolman/mutations.ts
@@ -8,8 +8,12 @@ export const mutations: MutationTree<ServerSpoolmanState> = {
         Object.assign(state, getDefaultState())
     },
 
-    setSpoolId(state, payload) {
-        Vue.set(state, 'spool_id', payload)
+    setActiveSpoolId(state, payload) {
+        Vue.set(state, 'active_spool_id', payload)
+    },
+
+    setActiveSpool(state, payload) {
+        Vue.set(state, 'active_spool', payload)
     },
 
     setHealth(state, payload) {
diff --git a/src/store/server/spoolman/types.ts b/src/store/server/spoolman/types.ts
index 959e1ee87..11f8cf77e 100644
--- a/src/store/server/spoolman/types.ts
+++ b/src/store/server/spoolman/types.ts
@@ -7,7 +7,8 @@ export interface ServerSpoolmanState {
         debug_mode: boolean
         version: string
     }
-    spool_id: number | null
+    active_spool_id: number | null
+    active_spool: number | null
     vendors: ServerSpoolmanStateVendor[]
     feeds: string[]
 }
diff --git a/src/store/socket/actions.ts b/src/store/socket/actions.ts
index a231fa051..a58a016d1 100644
--- a/src/store/socket/actions.ts
+++ b/src/store/socket/actions.ts
@@ -128,6 +128,10 @@ export const actions: ActionTree<SocketState, RootState> = {
                 dispatch('gui/webcams/initStore', payload.params[0], { root: true })
                 break
 
+            case 'notify_active_spool_set':
+                dispatch('server/spoolman/getActiveSpoolId', payload.params[0], { root: true })
+                break
+
             default:
                 window.console.debug(payload)
         }

From 9bf10c6d0b2a374576231dd615cead7b1b653652 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 12 Sep 2023 00:43:38 +0200
Subject: [PATCH 08/32] WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/SpoolmanPanel.vue | 48 ++++++++++++-------------
 src/locales/en.json                     |  2 --
 2 files changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
index eff3b2d6e..3f693d7a2 100644
--- a/src/components/panels/SpoolmanPanel.vue
+++ b/src/components/panels/SpoolmanPanel.vue
@@ -18,7 +18,7 @@
             </v-card-text>
             <v-list-item v-else three-line>
                 <v-list-item-content>
-                    <div class="text-overline mb-1">{{ vendor }}</div>
+                    <div class="text-overline mb-1">#{{ id }} | {{ vendor }}</div>
                     <v-list-item-title class="text-h5 mb-1">
                         {{ name }}
                     </v-list-item-title>
@@ -56,7 +56,7 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
     }
 
     get title() {
-        if (this.health === '') return 'Spoolman'
+        if (this.health === '' || this.health === 'healthy') return 'Spoolman'
 
         return `Spoolman (${this.health})`
     }
@@ -72,6 +72,10 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
         return `#${color}`
     }
 
+    get id() {
+        return this.active_spool?.id ?? 'XX'
+    }
+
     get vendor() {
         return this.active_spool?.filament?.vendor?.name ?? 'Unknown'
     }
@@ -84,45 +88,39 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
         const material = this.active_spool?.filament.material ?? null
         if (material === null) return null
 
-        return this.$t('Panels.Spoolman.MaterialOutput', { material })
+        return material
     }
 
     get weightOutput() {
         const remaining = this.active_spool?.remaining_weight ?? null
-        const total = this.active_spool?.filament.weight ?? null
+        let total = this.active_spool?.filament.weight ?? null
+        let unit = 'g'
 
         if (remaining === null || total === null) return null
+        let totalRound = Math.floor(total / 1000)
 
-        return this.$t('Panels.Spoolman.WeightOutput', { remaining, total })
-    }
-
-    get firstUsedString() {
-        const first_used = this.active_spool?.first_used ?? null
-        if (first_used === null) return null
+        if (total >= 1000) {
+            if (totalRound !== total / 1000) {
+                totalRound = Math.round(total / 100) / 10
+            }
 
-        const date = new Date(first_used)
-        const now = new Date()
-        const diff = now.getTime() - date.getTime()
-
-        if (diff <= 1000 * 60 * 60 * 24) return this.$t('Panels.Spoolman.Today')
-        if (diff <= 1000 * 60 * 60 * 24 * 2) return this.$t('Panels.Spoolman.Yesterday')
-        if (diff <= 1000 * 60 * 60 * 24 * 14) {
-            const days = Math.floor(diff / (1000 * 60 * 60 * 24))
-
-            return this.$t('Panels.Spoolman.DaysAgo', { days })
+            return `${remaining} g / ${totalRound} kg`
         }
 
-        return date.toLocaleDateString()
+        return `${remaining} / ${total} ${unit}`
     }
 
-    get firstUsedOutput() {
-        if (this.firstUsedString === null) return null
+    get lengthOutput() {
+        let remaining = this.active_spool?.remaining_length ?? null
+
+        if (remaining === null) return null
+        remaining = Math.round(remaining / 1000)
 
-        return this.$t('Panels.Spoolman.FirstUsedOutput', { firstUsed: this.firstUsedString })
+        return `${remaining} m`
     }
 
     get subtitle() {
-        return [this.materialOutput, this.weightOutput, this.firstUsedOutput].filter((v) => v !== null).join(', ')
+        return [this.materialOutput, this.weightOutput, this.lengthOutput].filter((v) => v !== null).join(' | ')
     }
 }
 </script>
diff --git a/src/locales/en.json b/src/locales/en.json
index 0dba3b40d..45e2c2c94 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -628,7 +628,6 @@
             "LastUsed": "Last Used",
             "Location": "Location",
             "Material": "Material",
-            "MaterialOutput": "Material: {material}",
             "Never": "Never",
             "NoActiveSpool": "Filament tracking is inactive. To get started, please select a spool.",
             "NoResults": "No spool found with the current search criteria.",
@@ -639,7 +638,6 @@
             "SelectSpool": "Select Spool",
             "Today": "Today",
             "Weight": "Weight",
-            "WeightOutput": "Weight: {remaining} / {total} g",
             "Yesterday": "Yesterday"
         },
         "StatusPanel": {

From 0026126f10ef563bdd10a17a248dc11b190b710a Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 12 Sep 2023 21:28:23 +0200
Subject: [PATCH 09/32] refactor: change format for spool details format

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/SpoolmanPanel.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
index 3f693d7a2..47af4518b 100644
--- a/src/components/panels/SpoolmanPanel.vue
+++ b/src/components/panels/SpoolmanPanel.vue
@@ -104,10 +104,10 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
                 totalRound = Math.round(total / 100) / 10
             }
 
-            return `${remaining} g / ${totalRound} kg`
+            return `${remaining}g / ${totalRound}kg`
         }
 
-        return `${remaining} / ${total} ${unit}`
+        return `${remaining} / ${total}${unit}`
     }
 
     get lengthOutput() {
@@ -116,7 +116,7 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
         if (remaining === null) return null
         remaining = Math.round(remaining / 1000)
 
-        return `${remaining} m`
+        return `${remaining}m`
     }
 
     get subtitle() {

From 9bd4787c93a32b3b186e18a94bb7a4e8a4492c1b Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 12 Sep 2023 23:15:44 +0200
Subject: [PATCH 10/32] feat: add option to remove spool

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/SpoolmanPanel.vue | 42 ++++++++++++++++++++++---
 src/locales/en.json                     |  1 +
 src/store/server/spoolman/actions.ts    |  4 +--
 3 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
index 47af4518b..9b4f98767 100644
--- a/src/components/panels/SpoolmanPanel.vue
+++ b/src/components/panels/SpoolmanPanel.vue
@@ -2,9 +2,37 @@
     <div>
         <panel :icon="mdiAdjust" :title="title" card-class="spoolman-panel" :collapsible="true">
             <template #buttons>
-                <v-btn icon @click="showChangeSpoolDialog = true">
-                    <v-icon>{{ mdiSync }}</v-icon>
-                </v-btn>
+                <v-menu left offset-y :close-on-content-click="true" class="pa-0">
+                    <template #activator="{ on, attrs }">
+                        <v-btn icon tile v-bind="attrs" :disabled="['printing'].includes(printer_state)" v-on="on">
+                            <v-icon>{{ mdiDotsVertical }}</v-icon>
+                        </v-btn>
+                    </template>
+                    <v-list dense>
+                        <template v-if="active_spool === null">
+                            <v-list-item>
+                                <v-btn small style="width: 100%" @click="showChangeSpoolDialog = true">
+                                    <v-icon left small>{{ mdiAdjust }}</v-icon>
+                                    {{ $t('Panels.Spoolman.SelectSpool') }}
+                                </v-btn>
+                            </v-list-item>
+                        </template>
+                        <template v-else>
+                            <v-list-item>
+                                <v-btn small style="width: 100%" @click="showChangeSpoolDialog = true">
+                                    <v-icon left small>{{ mdiSync }}</v-icon>
+                                    {{ $t('Panels.Spoolman.ChangeSpool') }}
+                                </v-btn>
+                            </v-list-item>
+                            <v-list-item>
+                                <v-btn small style="width: 100%" @click="removeSpool">
+                                    <v-icon left small>{{ mdiMinusCircleOutline }}</v-icon>
+                                    {{ $t('Panels.Spoolman.RemoveSpool') }}
+                                </v-btn>
+                            </v-list-item>
+                        </template>
+                    </v-list>
+                </v-menu>
             </template>
             <v-card-text v-if="active_spool === null">
                 <v-row>
@@ -38,7 +66,7 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
-import { mdiAdjust, mdiSync } from '@mdi/js'
+import { mdiAdjust, mdiDotsVertical, mdiMinusCircleOutline, mdiSync } from '@mdi/js'
 import SpoolmanChangeSpoolDialog from '@/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue'
 import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
 
@@ -47,6 +75,8 @@ import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
 })
 export default class SpoolmanPanel extends Mixins(BaseMixin) {
     mdiAdjust = mdiAdjust
+    mdiDotsVertical = mdiDotsVertical
+    mdiMinusCircleOutline = mdiMinusCircleOutline
     mdiSync = mdiSync
 
     showChangeSpoolDialog = false
@@ -122,6 +152,10 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
     get subtitle() {
         return [this.materialOutput, this.weightOutput, this.lengthOutput].filter((v) => v !== null).join(' | ')
     }
+
+    removeSpool() {
+        this.$store.dispatch('server/spoolman/setActiveSpool', 0)
+    }
 }
 </script>
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 45e2c2c94..78478fbb0 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -634,6 +634,7 @@
             "NoSpools": "No spools available",
             "OpenSpoolManager": "open Spool Manager",
             "Refresh": "refresh",
+            "RemoveSpool": "Remove spool",
             "Search": "Search",
             "SelectSpool": "Select Spool",
             "Today": "Today",
diff --git a/src/store/server/spoolman/actions.ts b/src/store/server/spoolman/actions.ts
index 1bc7980a2..30d4c57ae 100644
--- a/src/store/server/spoolman/actions.ts
+++ b/src/store/server/spoolman/actions.ts
@@ -47,8 +47,8 @@ export const actions: ActionTree<ServerSpoolmanState, RootState> = {
         commit('setActiveSpoolId', payload.spool_id)
         dispatch('socket/removeInitModule', 'server/spoolman/getActiveSpoolId', { root: true })
 
-        // also set active spool to null, if spool_id is null
-        if (payload.spool_id === null) {
+        // also set active spool to null, if spool_id is 0
+        if (payload.spool_id === 0) {
             commit('setActiveSpool', null)
             return
         }

From 093dc21d4743b14a1ca28917b3a3bf22846a16fd Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 14 Sep 2023 23:01:57 +0200
Subject: [PATCH 11/32] refactor: remove submenu for change/eject spool and add
 a prompt to eject spove

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../Spoolman/SpoolmanEjectSpoolDialog.vue     | 53 ++++++++++++++++
 src/components/panels/SpoolmanPanel.vue       | 60 +++++++------------
 src/locales/en.json                           |  4 +-
 3 files changed, 76 insertions(+), 41 deletions(-)
 create mode 100644 src/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue

diff --git a/src/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue b/src/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue
new file mode 100644
index 000000000..9a0381990
--- /dev/null
+++ b/src/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue
@@ -0,0 +1,53 @@
+<template>
+    <div>
+        <v-dialog v-model="showDialog" width="400" persistent :fullscreen="isMobile">
+            <panel
+                :title="$t('Panels.Spoolman.EjectSpool')"
+                :icon="mdiEject"
+                card-class="spoolman-eject-spool-dialog"
+                :margin-bottom="false">
+                <template #buttons>
+                    <v-btn icon tile @click="close">
+                        <v-icon>{{ mdiCloseThick }}</v-icon>
+                    </v-btn>
+                </template>
+                <v-card-text>
+                    <p>{{ $t('Panels.Spoolman.EjectSpoolQuestion') }}</p>
+                </v-card-text>
+                <v-card-actions>
+                    <v-spacer />
+                    <v-btn text @click="close">{{ $t('Panels.Spoolman.Cancel') }}</v-btn>
+                    <v-btn color="primary" text @click="removeSpool">
+                        {{ $t('Panels.Spoolman.EjectSpool') }}
+                    </v-btn>
+                </v-card-actions>
+            </panel>
+        </v-dialog>
+    </div>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import Panel from '@/components/ui/Panel.vue'
+import { mdiCloseThick, mdiEject } from '@mdi/js'
+@Component({
+    components: { Panel },
+})
+export default class SpoolmanEjectSpoolDialog extends Mixins(BaseMixin) {
+    mdiEject = mdiEject
+    mdiCloseThick = mdiCloseThick
+
+    @Prop({ required: true }) declare readonly showDialog: boolean
+
+    close() {
+        this.$emit('close')
+    }
+
+    removeSpool() {
+        this.$store.dispatch('server/spoolman/setActiveSpool', 0)
+        this.close()
+    }
+}
+</script>
diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
index 9b4f98767..9a1173a2e 100644
--- a/src/components/panels/SpoolmanPanel.vue
+++ b/src/components/panels/SpoolmanPanel.vue
@@ -2,37 +2,19 @@
     <div>
         <panel :icon="mdiAdjust" :title="title" card-class="spoolman-panel" :collapsible="true">
             <template #buttons>
-                <v-menu left offset-y :close-on-content-click="true" class="pa-0">
-                    <template #activator="{ on, attrs }">
-                        <v-btn icon tile v-bind="attrs" :disabled="['printing'].includes(printer_state)" v-on="on">
-                            <v-icon>{{ mdiDotsVertical }}</v-icon>
-                        </v-btn>
-                    </template>
-                    <v-list dense>
-                        <template v-if="active_spool === null">
-                            <v-list-item>
-                                <v-btn small style="width: 100%" @click="showChangeSpoolDialog = true">
-                                    <v-icon left small>{{ mdiAdjust }}</v-icon>
-                                    {{ $t('Panels.Spoolman.SelectSpool') }}
-                                </v-btn>
-                            </v-list-item>
-                        </template>
-                        <template v-else>
-                            <v-list-item>
-                                <v-btn small style="width: 100%" @click="showChangeSpoolDialog = true">
-                                    <v-icon left small>{{ mdiSync }}</v-icon>
-                                    {{ $t('Panels.Spoolman.ChangeSpool') }}
-                                </v-btn>
-                            </v-list-item>
-                            <v-list-item>
-                                <v-btn small style="width: 100%" @click="removeSpool">
-                                    <v-icon left small>{{ mdiMinusCircleOutline }}</v-icon>
-                                    {{ $t('Panels.Spoolman.RemoveSpool') }}
-                                </v-btn>
-                            </v-list-item>
-                        </template>
-                    </v-list>
-                </v-menu>
+                <template v-if="active_spool === null">
+                    <v-btn icon tile :title="$t('Panels.Spoolman.SelectSpool')" @click="showChangeSpoolDialog = true">
+                        <v-icon>{{ mdiSwapVertical }}</v-icon>
+                    </v-btn>
+                </template>
+                <template v-else>
+                    <v-btn icon tile :title="$t('Panels.Spoolman.ChangeSpool')" @click="showChangeSpoolDialog = true">
+                        <v-icon>{{ mdiSwapVertical }}</v-icon>
+                    </v-btn>
+                    <v-btn icon tile :title="$t('Panels.Spoolman.EjectSpool')" @click="showEjectSpoolDialog = true">
+                        <v-icon>{{ mdiEject }}</v-icon>
+                    </v-btn>
+                </template>
             </template>
             <v-card-text v-if="active_spool === null">
                 <v-row>
@@ -59,6 +41,7 @@
             </v-list-item>
         </panel>
         <spoolman-change-spool-dialog :show-dialog="showChangeSpoolDialog" @close="showChangeSpoolDialog = false" />
+        <spoolman-eject-spool-dialog :show-dialog="showEjectSpoolDialog" @close="showEjectSpoolDialog = false" />
     </div>
 </template>
 
@@ -66,20 +49,21 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
-import { mdiAdjust, mdiDotsVertical, mdiMinusCircleOutline, mdiSync } from '@mdi/js'
+import { mdiAdjust, mdiEject, mdiSwapVertical } from '@mdi/js'
 import SpoolmanChangeSpoolDialog from '@/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue'
+import SpoolmanEjectSpoolDialog from '@/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue'
 import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
 
 @Component({
-    components: { Panel, SpoolmanChangeSpoolDialog },
+    components: { Panel, SpoolmanChangeSpoolDialog, SpoolmanEjectSpoolDialog },
 })
 export default class SpoolmanPanel extends Mixins(BaseMixin) {
     mdiAdjust = mdiAdjust
-    mdiDotsVertical = mdiDotsVertical
-    mdiMinusCircleOutline = mdiMinusCircleOutline
-    mdiSync = mdiSync
+    mdiEject = mdiEject
+    mdiSwapVertical = mdiSwapVertical
 
     showChangeSpoolDialog = false
+    showEjectSpoolDialog = false
 
     get health() {
         return this.$store.state.server.spoolman.health ?? ''
@@ -152,10 +136,6 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
     get subtitle() {
         return [this.materialOutput, this.weightOutput, this.lengthOutput].filter((v) => v !== null).join(' | ')
     }
-
-    removeSpool() {
-        this.$store.dispatch('server/spoolman/setActiveSpool', 0)
-    }
 }
 </script>
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 78478fbb0..cb12cd896 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -621,8 +621,11 @@
             "PowerControl": "Power Control"
         },
         "Spoolman": {
+            "Cancel": "Cancel",
             "ChangeSpool": "Change Spool",
             "DaysAgo": "{days} days ago",
+            "EjectSpool": "Eject spool",
+            "EjectSpoolQuestion": "Are you sure to eject the filament spool?",
             "Filament": "Filament",
             "FirstUsedOutput": "First used: {firstUsed}",
             "LastUsed": "Last Used",
@@ -634,7 +637,6 @@
             "NoSpools": "No spools available",
             "OpenSpoolManager": "open Spool Manager",
             "Refresh": "refresh",
-            "RemoveSpool": "Remove spool",
             "Search": "Search",
             "SelectSpool": "Select Spool",
             "Today": "Today",

From 11370b5e6b686421282eab354aea3e1ec8c075d4 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 14 Sep 2023 23:03:15 +0200
Subject: [PATCH 12/32] refactor: remove div in SpoolmanEjectSpoolDialog.vue

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../Spoolman/SpoolmanEjectSpoolDialog.vue     | 48 +++++++++----------
 1 file changed, 23 insertions(+), 25 deletions(-)

diff --git a/src/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue b/src/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue
index 9a0381990..4c82f17ca 100644
--- a/src/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue
+++ b/src/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue
@@ -1,29 +1,27 @@
 <template>
-    <div>
-        <v-dialog v-model="showDialog" width="400" persistent :fullscreen="isMobile">
-            <panel
-                :title="$t('Panels.Spoolman.EjectSpool')"
-                :icon="mdiEject"
-                card-class="spoolman-eject-spool-dialog"
-                :margin-bottom="false">
-                <template #buttons>
-                    <v-btn icon tile @click="close">
-                        <v-icon>{{ mdiCloseThick }}</v-icon>
-                    </v-btn>
-                </template>
-                <v-card-text>
-                    <p>{{ $t('Panels.Spoolman.EjectSpoolQuestion') }}</p>
-                </v-card-text>
-                <v-card-actions>
-                    <v-spacer />
-                    <v-btn text @click="close">{{ $t('Panels.Spoolman.Cancel') }}</v-btn>
-                    <v-btn color="primary" text @click="removeSpool">
-                        {{ $t('Panels.Spoolman.EjectSpool') }}
-                    </v-btn>
-                </v-card-actions>
-            </panel>
-        </v-dialog>
-    </div>
+    <v-dialog v-model="showDialog" width="400" persistent :fullscreen="isMobile">
+        <panel
+            :title="$t('Panels.Spoolman.EjectSpool')"
+            :icon="mdiEject"
+            card-class="spoolman-eject-spool-dialog"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="close">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>
+                <p>{{ $t('Panels.Spoolman.EjectSpoolQuestion') }}</p>
+            </v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="close">{{ $t('Panels.Spoolman.Cancel') }}</v-btn>
+                <v-btn color="primary" text @click="removeSpool">
+                    {{ $t('Panels.Spoolman.EjectSpool') }}
+                </v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
 </template>
 
 <script lang="ts">

From c07b44b5dce320b02b181d2359c16a8b448ebc3a Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Thu, 14 Sep 2023 23:33:15 +0200
Subject: [PATCH 13/32] WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/StartPrintDialog.vue   | 54 +++++++++++++++----
 .../Spoolman/SpoolmanEjectSpoolDialog.vue     |  6 ++-
 src/locales/en.json                           |  1 +
 3 files changed, 50 insertions(+), 11 deletions(-)

diff --git a/src/components/dialogs/StartPrintDialog.vue b/src/components/dialogs/StartPrintDialog.vue
index b2604b0e8..369b038ac 100644
--- a/src/components/dialogs/StartPrintDialog.vue
+++ b/src/components/dialogs/StartPrintDialog.vue
@@ -1,23 +1,27 @@
 <template>
-    <v-dialog v-model="bool" :max-width="dialogWidth">
+    <v-dialog v-model="bool" :max-width="dialogWidth" @click:outside="closeDialog">
         <v-card>
-            <v-img v-if="file.big_thumbnail" contain :src="file.big_thumbnail"></v-img>
-            <v-card-title class="headline">{{ $t('Dialogs.StartPrint.Headline') }}</v-card-title>
+            <v-img v-if="file.big_thumbnail" contain :src="file.big_thumbnail" />
+            <v-card-title>
+                {{ $t('Dialogs.StartPrint.Headline') }}
+            </v-card-title>
             <v-card-text class="pb-0">
-                {{ $t('Dialogs.StartPrint.DoYouWantToStartFilename', { filename: file.filename }) }}
+                <p class="body-2">
+                    {{ question }}
+                </p>
             </v-card-text>
             <template v-if="moonrakerComponents.includes('timelapse')">
-                <v-divider class="mt-3 mb-2"></v-divider>
-                <v-card-text class="pb-0">
+                <v-divider class="mt-3 mb-2" />
+                <v-card-text class="py-0">
                     <settings-row :title="$t('Dialogs.StartPrint.Timelapse')">
-                        <v-switch v-model="timelapseEnabled" hide-details class="mt-0"></v-switch>
+                        <v-switch v-model="timelapseEnabled" hide-details class="mt-0" />
                     </settings-row>
                 </v-card-text>
-                <v-divider class="mt-2 mb-0"></v-divider>
+                <v-divider class="mt-2 mb-0" />
             </template>
             <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn color="" text @click="closeDialog">{{ $t('Dialogs.StartPrint.Cancel') }}</v-btn>
+                <v-spacer />
+                <v-btn text @click="closeDialog">{{ $t('Dialogs.StartPrint.Cancel') }}</v-btn>
                 <v-btn
                     color="primary"
                     text
@@ -35,6 +39,8 @@ import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { FileStateGcodefile } from '@/store/files/types'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
+import { mdiPrinter3d } from '@mdi/js'
+import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
 
 @Component({
     components: {
@@ -42,6 +48,8 @@ import SettingsRow from '@/components/settings/SettingsRow.vue'
     },
 })
 export default class StartPrintDialog extends Mixins(BaseMixin) {
+    mdiPrinter3d = mdiPrinter3d
+
     @Prop({ required: true, default: false })
     declare readonly bool: boolean
 
@@ -67,6 +75,32 @@ export default class StartPrintDialog extends Mixins(BaseMixin) {
         return this.file.big_thumbnail_width ?? 400
     }
 
+    get active_spool(): ServerSpoolmanStateSpool | null {
+        return this.$store.state.server.spoolman.active_spool ?? null
+    }
+
+    get filamentVendor() {
+        return this.active_spool?.filament?.vendor?.name ?? 'Unknown'
+    }
+
+    get filamentName() {
+        return this.active_spool?.filament.name ?? 'Unknown'
+    }
+
+    get filament() {
+        return `${this.filamentVendor} - ${this.filamentName}`
+    }
+
+    get question() {
+        if (this.active_spool)
+            return this.$t('Dialogs.StartPrint.DoYouWantToStartFilenameFilament', {
+                filename: this.file?.filename ?? 'unknown',
+                filament: this.filament,
+            })
+
+        return this.$t('Dialogs.StartPrint.DoYouWantToStartFilename', { filename: this.file?.filename ?? 'unknown' })
+    }
+
     startPrint(filename = '') {
         filename = (this.currentPath + '/' + filename).substring(1)
         this.closeDialog()
diff --git a/src/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue b/src/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue
index 4c82f17ca..e77902ddc 100644
--- a/src/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue
+++ b/src/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue
@@ -11,7 +11,11 @@
                 </v-btn>
             </template>
             <v-card-text>
-                <p>{{ $t('Panels.Spoolman.EjectSpoolQuestion') }}</p>
+                <v-row>
+                    <v-col>
+                        <p class="body-2">{{ $t('Panels.Spoolman.EjectSpoolQuestion') }}</p>
+                    </v-col>
+                </v-row>
             </v-card-text>
             <v-card-actions>
                 <v-spacer />
diff --git a/src/locales/en.json b/src/locales/en.json
index cb12cd896..427cfdf5a 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -144,6 +144,7 @@
         "StartPrint": {
             "Cancel": "Cancel",
             "DoYouWantToStartFilename": "Do you want to start {filename}?",
+            "DoYouWantToStartFilenameFilament": "Do you want to start {filename} with the filament {filament}?",
             "Headline": "Start Job",
             "Print": "print",
             "Timelapse": "Timelapse"

From 45e4f164efe78f9e809953c1c3be73f1569f2227 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 15 Sep 2023 20:40:13 +0200
Subject: [PATCH 14/32] feat: autorefresh rest weight of spool

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/App.vue                          |  7 +++++++
 src/store/server/spoolman/actions.ts | 13 +++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index 29a4a2b71..8a24baf2e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -277,6 +277,7 @@ export default class App extends Mixins(BaseMixin) {
     @Watch('print_percent')
     print_percentChanged(newVal: number): void {
         this.drawFavicon(newVal)
+        this.refreshSpoolman()
     }
 
     @Watch('printerIsPrinting')
@@ -284,6 +285,12 @@ export default class App extends Mixins(BaseMixin) {
         this.drawFavicon(this.print_percent)
     }
 
+    refreshSpoolman(): void {
+        if (this.moonrakerComponents.includes('spoolman')) {
+            this.$store.dispatch('server/spoolman/refreshActiveSpool', null, { root: true })
+        }
+    }
+
     appHeight() {
         this.$nextTick(() => {
             const doc = document.documentElement
diff --git a/src/store/server/spoolman/actions.ts b/src/store/server/spoolman/actions.ts
index 30d4c57ae..6553cd8d2 100644
--- a/src/store/server/spoolman/actions.ts
+++ b/src/store/server/spoolman/actions.ts
@@ -116,4 +116,17 @@ export const actions: ActionTree<ServerSpoolmanState, RootState> = {
             spool_id: id,
         })
     },
+
+    refreshActiveSpool({ state }) {
+        if (state.active_spool_id === null) return
+
+        Vue.$socket.emit(
+            'server.spoolman.proxy',
+            {
+                request_method: 'GET',
+                path: `/v1/spool/${state.active_spool_id}`,
+            },
+            { action: 'server/spoolman/getActiveSpool' }
+        )
+    },
 }

From 24d7e6cac4d6cda4a79540caee18b62616385b6b Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 15 Sep 2023 20:40:43 +0200
Subject: [PATCH 15/32] refactor: also convert to kg in change spool dialog
 total weight

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../Spoolman/SpoolmanChangeSpoolDialogRow.vue   | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue b/src/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue
index a4596a3f0..c42ec9fb7 100644
--- a/src/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue
+++ b/src/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue
@@ -17,8 +17,8 @@
         <td class="text-center">{{ material }}</td>
         <td class="text-right">{{ last_used }}</td>
         <td class="text-right">
-            <strong>{{ rest_weight_format }} g</strong>
-            <small class="ml-1">/ {{ total_weight_format }} g</small>
+            <strong>{{ rest_weight_format }}</strong>
+            <small class="ml-1">/ {{ total_weight_format }}</small>
         </td>
     </tr>
 </template>
@@ -63,11 +63,20 @@ export default class SpoolmanChangeSpoolDialogRow extends Mixins(BaseMixin) {
     }
 
     get rest_weight_format() {
-        return (this.total_weight - this.used_weight).toFixed(0)
+        return `${(this.total_weight - this.used_weight).toFixed(0)}g`
     }
 
     get total_weight_format() {
-        return this.total_weight.toFixed(0)
+        if (this.total_weight < 1000) {
+            return `${this.total_weight.toFixed(0)}g`
+        }
+
+        let totalRound = Math.round(this.total_weight / 1000)
+        if (totalRound !== this.total_weight / 1000) {
+            totalRound = Math.round(this.total_weight / 100) / 10
+        }
+
+        return `${totalRound}kg`
     }
 
     get last_used() {

From 9ed824e94ad09262202b16aa9fc01c34e245ad4c Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 15 Sep 2023 20:41:04 +0200
Subject: [PATCH 16/32] refactor: round remaining weight in spoolman panel

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/SpoolmanPanel.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
index 9a1173a2e..93d72ff03 100644
--- a/src/components/panels/SpoolmanPanel.vue
+++ b/src/components/panels/SpoolmanPanel.vue
@@ -106,11 +106,12 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
     }
 
     get weightOutput() {
-        const remaining = this.active_spool?.remaining_weight ?? null
+        let remaining = this.active_spool?.remaining_weight ?? null
         let total = this.active_spool?.filament.weight ?? null
         let unit = 'g'
 
         if (remaining === null || total === null) return null
+        remaining = Math.round(remaining)
         let totalRound = Math.floor(total / 1000)
 
         if (total >= 1000) {

From c10cc4aa78e628a5b2a25dd5f66f28c88bbb258e Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sat, 16 Sep 2023 00:47:23 +0200
Subject: [PATCH 17/32] WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../SpoolmanChangeSpoolDialog.vue             |   2 +-
 .../SpoolmanChangeSpoolDialogRow.vue          |   0
 .../SpoolmanEjectSpoolDialog.vue              |   0
 src/components/dialogs/StartPrintDialog.vue   |  10 +-
 .../dialogs/StartPrintDialogSpoolman.vue      |  29 ++++
 .../Spoolman/SpoolmanPanelActiveSpool.vue     | 125 ++++++++++++++++++
 src/components/panels/SpoolmanPanel.vue       |  76 ++++++-----
 src/locales/en.json                           |   3 +-
 8 files changed, 208 insertions(+), 37 deletions(-)
 rename src/components/{panels/Spoolman => dialogs}/SpoolmanChangeSpoolDialog.vue (98%)
 rename src/components/{panels/Spoolman => dialogs}/SpoolmanChangeSpoolDialogRow.vue (100%)
 rename src/components/{panels/Spoolman => dialogs}/SpoolmanEjectSpoolDialog.vue (100%)
 create mode 100644 src/components/dialogs/StartPrintDialogSpoolman.vue
 create mode 100644 src/components/panels/Spoolman/SpoolmanPanelActiveSpool.vue

diff --git a/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
similarity index 98%
rename from src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue
rename to src/components/dialogs/SpoolmanChangeSpoolDialog.vue
index caaf8ff5f..38a195cc8 100644
--- a/src/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
@@ -68,7 +68,7 @@ import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
 import { mdiCloseThick, mdiAdjust, mdiDatabase, mdiMagnify, mdiRefresh } from '@mdi/js'
 import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
-import SpoolmanChangeSpoolDialogRow from '@/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue'
+import SpoolmanChangeSpoolDialogRow from '@/components/dialogs/SpoolmanChangeSpoolDialogRow.vue'
 @Component({
     components: { SpoolmanChangeSpoolDialogRow, Panel },
 })
diff --git a/src/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue b/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
similarity index 100%
rename from src/components/panels/Spoolman/SpoolmanChangeSpoolDialogRow.vue
rename to src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
diff --git a/src/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue b/src/components/dialogs/SpoolmanEjectSpoolDialog.vue
similarity index 100%
rename from src/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue
rename to src/components/dialogs/SpoolmanEjectSpoolDialog.vue
diff --git a/src/components/dialogs/StartPrintDialog.vue b/src/components/dialogs/StartPrintDialog.vue
index 369b038ac..d3508247d 100644
--- a/src/components/dialogs/StartPrintDialog.vue
+++ b/src/components/dialogs/StartPrintDialog.vue
@@ -1,8 +1,8 @@
 <template>
-    <v-dialog v-model="bool" :max-width="dialogWidth" @click:outside="closeDialog">
+    <v-dialog v-model="bool" :max-width="dialogWidth" @click:outside="closeDialog" @keydown.esc="closeDialog">
         <v-card>
             <v-img v-if="file.big_thumbnail" contain :src="file.big_thumbnail" />
-            <v-card-title>
+            <v-card-title class="text-h5">
                 {{ $t('Dialogs.StartPrint.Headline') }}
             </v-card-title>
             <v-card-text class="pb-0">
@@ -10,8 +10,9 @@
                     {{ question }}
                 </p>
             </v-card-text>
-            <template v-if="moonrakerComponents.includes('timelapse')">
-                <v-divider class="mt-3 mb-2" />
+            <start-print-dialog-spoolman v-if="moonrakerComponents.includes('spoolman')" />
+            <template v-if="moonrakerComponents.includes('timelapse') || true">
+                <v-divider v-if="!moonrakerComponents.includes('spoolman')" class="mt-3 mb-2" />
                 <v-card-text class="py-0">
                     <settings-row :title="$t('Dialogs.StartPrint.Timelapse')">
                         <v-switch v-model="timelapseEnabled" hide-details class="mt-0" />
@@ -95,7 +96,6 @@ export default class StartPrintDialog extends Mixins(BaseMixin) {
         if (this.active_spool)
             return this.$t('Dialogs.StartPrint.DoYouWantToStartFilenameFilament', {
                 filename: this.file?.filename ?? 'unknown',
-                filament: this.filament,
             })
 
         return this.$t('Dialogs.StartPrint.DoYouWantToStartFilename', { filename: this.file?.filename ?? 'unknown' })
diff --git a/src/components/dialogs/StartPrintDialogSpoolman.vue b/src/components/dialogs/StartPrintDialogSpoolman.vue
new file mode 100644
index 000000000..8f4413b32
--- /dev/null
+++ b/src/components/dialogs/StartPrintDialogSpoolman.vue
@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <v-divider class="mt-3 mb-0" />
+        <v-card-text class="py-0 px-2">
+            <spoolman-panel-active-spool v-if="activeSpool !== null" :small="true" class="my-0" />
+            <v-alert v-else text color="warning" class="mt-4 mx-3">
+                {{ $t('Dialogs.StartPrint.NoSpoolSelected') }}
+            </v-alert>
+        </v-card-text>
+        <v-divider class="mt-0 mb-0" />
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import SpoolmanPanelActiveSpool from '@/components/panels/Spoolman/SpoolmanPanelActiveSpool.vue'
+
+@Component({
+    components: { SpoolmanPanelActiveSpool },
+})
+export default class StartPrintDialogSpoolman extends Mixins(BaseMixin) {
+    get activeSpool() {
+        return null
+
+        return this.$store.state.server.spoolman?.active_spool_id ?? null
+    }
+}
+</script>
diff --git a/src/components/panels/Spoolman/SpoolmanPanelActiveSpool.vue b/src/components/panels/Spoolman/SpoolmanPanelActiveSpool.vue
new file mode 100644
index 000000000..02cb9eccb
--- /dev/null
+++ b/src/components/panels/Spoolman/SpoolmanPanelActiveSpool.vue
@@ -0,0 +1,125 @@
+<template>
+    <v-list-item three-line>
+        <v-list-item-content :class="listItemContentClass">
+            <div :class="overlineClass">#{{ id }} | {{ vendor }}</div>
+            <v-list-item-title :class="listItemTitleClass">
+                {{ name }}
+            </v-list-item-title>
+            <v-list-item-subtitle>{{ subtitle }}</v-list-item-subtitle>
+        </v-list-item-content>
+
+        <v-list-item-avatar tile :size="avatarSize">
+            <spool-icon :color="color" />
+        </v-list-item-avatar>
+    </v-list-item>
+</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 SpoolmanChangeSpoolDialog from '@/components/dialogs/SpoolmanChangeSpoolDialog.vue'
+import SpoolmanEjectSpoolDialog from '@/components/dialogs/SpoolmanEjectSpoolDialog.vue'
+import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
+
+@Component({
+    components: { Panel, SpoolmanChangeSpoolDialog, SpoolmanEjectSpoolDialog },
+})
+export default class SpoolmanPanelActiveSpool extends Mixins(BaseMixin) {
+    @Prop({ required: false, default: false }) readonly small!: boolean
+
+    get listItemContentClass() {
+        if (this.small) return 'my-0'
+
+        return ''
+    }
+
+    get overlineClass() {
+        const classes = ['text-overline', 'mb-1']
+        if (this.small) classes.push('line-height-auto')
+
+        return classes
+    }
+
+    get listItemTitleClass() {
+        if (this.small) return ['text-h6', 'mb-1']
+
+        return ['text-h5', 'mb-1']
+    }
+
+    get avatarSize() {
+        if (this.small) return 60
+
+        return 80
+    }
+
+    get active_spool(): ServerSpoolmanStateSpool | null {
+        return this.$store.state.server.spoolman.active_spool ?? null
+    }
+
+    get color() {
+        const color = this.active_spool?.filament.color_hex ?? null
+        if (color === null) return '#000'
+
+        return `#${color}`
+    }
+
+    get id() {
+        return this.active_spool?.id ?? 'XX'
+    }
+
+    get vendor() {
+        return this.active_spool?.filament?.vendor?.name ?? 'Unknown'
+    }
+
+    get name() {
+        return this.active_spool?.filament.name ?? 'Unknown'
+    }
+
+    get materialOutput() {
+        const material = this.active_spool?.filament.material ?? null
+        if (material === null) return null
+
+        return material
+    }
+
+    get weightOutput() {
+        let remaining = this.active_spool?.remaining_weight ?? null
+        let total = this.active_spool?.filament.weight ?? null
+        let unit = 'g'
+
+        if (remaining === null || total === null) return null
+        remaining = Math.round(remaining)
+        let totalRound = Math.floor(total / 1000)
+
+        if (total >= 1000) {
+            if (totalRound !== total / 1000) {
+                totalRound = Math.round(total / 100) / 10
+            }
+
+            return `${remaining}g / ${totalRound}kg`
+        }
+
+        return `${remaining} / ${total}${unit}`
+    }
+
+    get lengthOutput() {
+        let remaining = this.active_spool?.remaining_length ?? null
+
+        if (remaining === null) return null
+        remaining = Math.round(remaining / 1000)
+
+        return `${remaining}m`
+    }
+
+    get subtitle() {
+        return [this.materialOutput, this.weightOutput, this.lengthOutput].filter((v) => v !== null).join(' | ')
+    }
+}
+</script>
+
+<style scoped>
+.line-height-auto {
+    line-height: 1;
+}
+</style>
diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
index 93d72ff03..fdd1fc4ef 100644
--- a/src/components/panels/SpoolmanPanel.vue
+++ b/src/components/panels/SpoolmanPanel.vue
@@ -2,19 +2,30 @@
     <div>
         <panel :icon="mdiAdjust" :title="title" card-class="spoolman-panel" :collapsible="true">
             <template #buttons>
-                <template v-if="active_spool === null">
-                    <v-btn icon tile :title="$t('Panels.Spoolman.SelectSpool')" @click="showChangeSpoolDialog = true">
-                        <v-icon>{{ mdiSwapVertical }}</v-icon>
-                    </v-btn>
-                </template>
-                <template v-else>
-                    <v-btn icon tile :title="$t('Panels.Spoolman.ChangeSpool')" @click="showChangeSpoolDialog = true">
-                        <v-icon>{{ mdiSwapVertical }}</v-icon>
-                    </v-btn>
-                    <v-btn icon tile :title="$t('Panels.Spoolman.EjectSpool')" @click="showEjectSpoolDialog = true">
-                        <v-icon>{{ mdiEject }}</v-icon>
-                    </v-btn>
-                </template>
+                <v-btn 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>
+                    <template #activator="{ on, attrs }">
+                        <v-btn icon tile v-bind="attrs" v-on="on">
+                            <v-icon>{{ mdiDotsVertical }}</v-icon>
+                        </v-btn>
+                    </template>
+                    <v-list dense>
+                        <v-list-item>
+                            <v-btn small style="width: 100%" @click="showEjectSpoolDialog = true">
+                                <v-icon left>{{ mdiEject }}</v-icon>
+                                {{ $t('Panels.Spoolman.EjectSpool') }}
+                            </v-btn>
+                        </v-list-item>
+                        <v-list-item>
+                            <v-btn small style="width: 100%" @click="openSpoolManager">
+                                <v-icon left>{{ mdiOpenInNew }}</v-icon>
+                                {{ $t('Panels.Spoolman.OpenSpoolManager') }}
+                            </v-btn>
+                        </v-list-item>
+                    </v-list>
+                </v-menu>
             </template>
             <v-card-text v-if="active_spool === null">
                 <v-row>
@@ -26,19 +37,7 @@
                     </v-col>
                 </v-row>
             </v-card-text>
-            <v-list-item v-else three-line>
-                <v-list-item-content>
-                    <div class="text-overline mb-1">#{{ id }} | {{ vendor }}</div>
-                    <v-list-item-title class="text-h5 mb-1">
-                        {{ name }}
-                    </v-list-item-title>
-                    <v-list-item-subtitle>{{ subtitle }}</v-list-item-subtitle>
-                </v-list-item-content>
-
-                <v-list-item-avatar tile size="80">
-                    <spool-icon :color="color" />
-                </v-list-item-avatar>
-            </v-list-item>
+            <spoolman-panel-active-spool v-else />
         </panel>
         <spoolman-change-spool-dialog :show-dialog="showChangeSpoolDialog" @close="showChangeSpoolDialog = false" />
         <spoolman-eject-spool-dialog :show-dialog="showEjectSpoolDialog" @close="showEjectSpoolDialog = false" />
@@ -49,17 +48,20 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import Panel from '@/components/ui/Panel.vue'
-import { mdiAdjust, mdiEject, mdiSwapVertical } from '@mdi/js'
-import SpoolmanChangeSpoolDialog from '@/components/panels/Spoolman/SpoolmanChangeSpoolDialog.vue'
-import SpoolmanEjectSpoolDialog from '@/components/panels/Spoolman/SpoolmanEjectSpoolDialog.vue'
+import { mdiAdjust, mdiDotsVertical, mdiEject, mdiOpenInNew, mdiSwapVertical } from '@mdi/js'
+import SpoolmanChangeSpoolDialog from '@/components/dialogs/SpoolmanChangeSpoolDialog.vue'
+import SpoolmanEjectSpoolDialog from '@/components/dialogs/SpoolmanEjectSpoolDialog.vue'
 import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
+import SpoolmanPanelActiveSpool from '@/components/panels/Spoolman/SpoolmanPanelActiveSpool.vue'
 
 @Component({
-    components: { Panel, SpoolmanChangeSpoolDialog, SpoolmanEjectSpoolDialog },
+    components: { SpoolmanPanelActiveSpool, Panel, SpoolmanChangeSpoolDialog, SpoolmanEjectSpoolDialog },
 })
 export default class SpoolmanPanel extends Mixins(BaseMixin) {
     mdiAdjust = mdiAdjust
+    mdiDotsVertical = mdiDotsVertical
     mdiEject = mdiEject
+    mdiOpenInNew = mdiOpenInNew
     mdiSwapVertical = mdiSwapVertical
 
     showChangeSpoolDialog = false
@@ -75,6 +77,12 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
         return `Spoolman (${this.health})`
     }
 
+    get changeSpoolTooltip(): string {
+        if (this.active_spool === null) return this.$t('Panels.Spoolman.SelectSpool') as string
+
+        return this.$t('Panels.Spoolman.ChangeSpool') as string
+    }
+
     get active_spool(): ServerSpoolmanStateSpool | null {
         return this.$store.state.server.spoolman.active_spool ?? null
     }
@@ -137,6 +145,14 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
     get subtitle() {
         return [this.materialOutput, this.weightOutput, this.lengthOutput].filter((v) => v !== null).join(' | ')
     }
+
+    get spoolManagerUrl() {
+        return this.$store.state.server.config.config?.spoolman?.server ?? null
+    }
+
+    openSpoolManager() {
+        window.open(this.spoolManagerUrl, '_blank')
+    }
 }
 </script>
 
diff --git a/src/locales/en.json b/src/locales/en.json
index 427cfdf5a..84f5f9d2b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -144,8 +144,9 @@
         "StartPrint": {
             "Cancel": "Cancel",
             "DoYouWantToStartFilename": "Do you want to start {filename}?",
-            "DoYouWantToStartFilenameFilament": "Do you want to start {filename} with the filament {filament}?",
+            "DoYouWantToStartFilenameFilament": "Do you want to start {filename} with the following filament?",
             "Headline": "Start Job",
+            "NoSpoolSelected": "No spool selected. Please select a spool or this print will not be tracked.",
             "Print": "print",
             "Timelapse": "Timelapse"
         }

From d069329be7201a66937ba9bb49a7e098237ca59e Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 17 Sep 2023 10:54:14 +0200
Subject: [PATCH 18/32] locale: add headline to locale

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/SpoolmanPanel.vue | 6 ++++--
 src/locales/en.json                     | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
index fdd1fc4ef..b6335ba95 100644
--- a/src/components/panels/SpoolmanPanel.vue
+++ b/src/components/panels/SpoolmanPanel.vue
@@ -72,9 +72,11 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
     }
 
     get title() {
-        if (this.health === '' || this.health === 'healthy') return 'Spoolman'
+        const headline = this.$t('Panels.Spoolman.Headline') as string
 
-        return `Spoolman (${this.health})`
+        if (this.health === '' || this.health === 'healthy') return headline
+
+        return `${headline} (${this.health})`
     }
 
     get changeSpoolTooltip(): string {
diff --git a/src/locales/en.json b/src/locales/en.json
index 84f5f9d2b..d6bba7759 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -630,6 +630,7 @@
             "EjectSpoolQuestion": "Are you sure to eject the filament spool?",
             "Filament": "Filament",
             "FirstUsedOutput": "First used: {firstUsed}",
+            "Headline": "Spoolman",
             "LastUsed": "Last Used",
             "Location": "Location",
             "Material": "Material",

From b6fc06824a9f3eaf75713e67431421b43e653750 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 17 Sep 2023 23:07:07 +0200
Subject: [PATCH 19/32] locale: fix locale

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../dialogs/SpoolmanChangeSpoolDialog.vue     | 20 +++++++++----------
 .../dialogs/SpoolmanChangeSpoolDialogRow.vue  | 10 +++++-----
 .../dialogs/SpoolmanEjectSpoolDialog.vue      |  8 ++++----
 src/components/panels/SpoolmanPanel.vue       | 14 ++++++-------
 src/locales/en.json                           |  2 +-
 5 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
index 38a195cc8..7c51d32f5 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
@@ -2,7 +2,7 @@
     <div>
         <v-dialog v-model="showDialog" width="800" persistent :fullscreen="isMobile">
             <panel
-                :title="$t('Panels.Spoolman.ChangeSpool')"
+                :title="$t('Panels.SpoolmanPanel.ChangeSpool')"
                 :icon="mdiAdjust"
                 card-class="spoolman-change-spool-dialog"
                 :margin-bottom="false">
@@ -15,21 +15,21 @@
                     <v-text-field
                         v-model="search"
                         :append-icon="mdiMagnify"
-                        :label="$t('Panels.Spoolman.Search')"
+                        :label="$t('Panels.SpoolmanPanel.Search')"
                         outlined
                         dense
                         hide-details
                         style="max-width: 300px" />
                     <v-spacer />
                     <v-btn
-                        :title="$t('Panels.Spoolman.Refresh')"
+                        :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.Spoolman.OpenSpoolManager')"
+                        :title="$t('Panels.SpoolmanPanel.OpenSpoolManager')"
                         class="px-2 minwidth-0 ml-3"
                         @click="openSpoolManager">
                         <v-icon>{{ mdiDatabase }}</v-icon>
@@ -45,10 +45,10 @@
                         :custom-filter="customFilter"
                         :disable-sort="true">
                         <template #no-data>
-                            <div class="text-center">{{ $t('Panels.Spoolman.NoSpools') }}</div>
+                            <div class="text-center">{{ $t('Panels.SpoolmanPanel.NoSpools') }}</div>
                         </template>
                         <template #no-results>
-                            <div class="text-center">{{ $t('Panels.Spoolman.NoResults') }}</div>
+                            <div class="text-center">{{ $t('Panels.SpoolmanPanel.NoResults') }}</div>
                         </template>
 
                         <template #item="{ item }">
@@ -98,19 +98,19 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
                 align: 'start',
             },
             {
-                text: this.$t('Panels.Spoolman.Filament'),
+                text: this.$t('Panels.SpoolmanPanel.Filament'),
                 align: 'start',
             },
             {
-                text: this.$t('Panels.Spoolman.Material'),
+                text: this.$t('Panels.SpoolmanPanel.Material'),
                 align: 'center',
             },
             {
-                text: this.$t('Panels.Spoolman.LastUsed'),
+                text: this.$t('Panels.SpoolmanPanel.LastUsed'),
                 align: 'end',
             },
             {
-                text: this.$t('Panels.Spoolman.Weight'),
+                text: this.$t('Panels.SpoolmanPanel.Weight'),
                 align: 'end',
             },
         ]
diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue b/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
index c42ec9fb7..2456ca555 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
@@ -7,7 +7,7 @@
             <strong>{{ vendor }} - {{ name }}</strong>
             <template v-if="location">
                 <br />
-                {{ $t('Panels.Spoolman.Location') }}: {{ location }}
+                {{ $t('Panels.SpoolmanPanel.Location') }}: {{ location }}
             </template>
             <template v-if="spool.comment">
                 <br />
@@ -81,18 +81,18 @@ export default class SpoolmanChangeSpoolDialogRow extends Mixins(BaseMixin) {
 
     get last_used() {
         const last_used = this.spool.last_used ?? null
-        if (!last_used) return this.$t('Panels.Spoolman.Never')
+        if (!last_used) return this.$t('Panels.SpoolmanPanel.Never')
 
         const date = new Date(this.spool.last_used)
         const now = new Date()
         const diff = now.getTime() - date.getTime()
 
-        if (diff <= 1000 * 60 * 60 * 24) return this.$t('Panels.Spoolman.Today')
-        if (diff <= 1000 * 60 * 60 * 24 * 2) return this.$t('Panels.Spoolman.Yesterday')
+        if (diff <= 1000 * 60 * 60 * 24) return this.$t('Panels.SpoolmanPanel.Today')
+        if (diff <= 1000 * 60 * 60 * 24 * 2) return this.$t('Panels.SpoolmanPanel.Yesterday')
         if (diff <= 1000 * 60 * 60 * 24 * 14) {
             const days = Math.floor(diff / (1000 * 60 * 60 * 24))
 
-            return this.$t('Panels.Spoolman.DaysAgo', { days })
+            return this.$t('Panels.SpoolmanPanel.DaysAgo', { days })
         }
 
         return date.toLocaleDateString()
diff --git a/src/components/dialogs/SpoolmanEjectSpoolDialog.vue b/src/components/dialogs/SpoolmanEjectSpoolDialog.vue
index e77902ddc..14200f2a0 100644
--- a/src/components/dialogs/SpoolmanEjectSpoolDialog.vue
+++ b/src/components/dialogs/SpoolmanEjectSpoolDialog.vue
@@ -1,7 +1,7 @@
 <template>
     <v-dialog v-model="showDialog" width="400" persistent :fullscreen="isMobile">
         <panel
-            :title="$t('Panels.Spoolman.EjectSpool')"
+            :title="$t('Panels.SpoolmanPanel.EjectSpool')"
             :icon="mdiEject"
             card-class="spoolman-eject-spool-dialog"
             :margin-bottom="false">
@@ -13,15 +13,15 @@
             <v-card-text>
                 <v-row>
                     <v-col>
-                        <p class="body-2">{{ $t('Panels.Spoolman.EjectSpoolQuestion') }}</p>
+                        <p class="body-2">{{ $t('Panels.SpoolmanPanel.EjectSpoolQuestion') }}</p>
                     </v-col>
                 </v-row>
             </v-card-text>
             <v-card-actions>
                 <v-spacer />
-                <v-btn text @click="close">{{ $t('Panels.Spoolman.Cancel') }}</v-btn>
+                <v-btn text @click="close">{{ $t('Panels.SpoolmanPanel.Cancel') }}</v-btn>
                 <v-btn color="primary" text @click="removeSpool">
-                    {{ $t('Panels.Spoolman.EjectSpool') }}
+                    {{ $t('Panels.SpoolmanPanel.EjectSpool') }}
                 </v-btn>
             </v-card-actions>
         </panel>
diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
index b6335ba95..c6d33a73a 100644
--- a/src/components/panels/SpoolmanPanel.vue
+++ b/src/components/panels/SpoolmanPanel.vue
@@ -15,13 +15,13 @@
                         <v-list-item>
                             <v-btn small style="width: 100%" @click="showEjectSpoolDialog = true">
                                 <v-icon left>{{ mdiEject }}</v-icon>
-                                {{ $t('Panels.Spoolman.EjectSpool') }}
+                                {{ $t('Panels.SpoolmanPanel.EjectSpool') }}
                             </v-btn>
                         </v-list-item>
                         <v-list-item>
                             <v-btn small style="width: 100%" @click="openSpoolManager">
                                 <v-icon left>{{ mdiOpenInNew }}</v-icon>
-                                {{ $t('Panels.Spoolman.OpenSpoolManager') }}
+                                {{ $t('Panels.SpoolmanPanel.OpenSpoolManager') }}
                             </v-btn>
                         </v-list-item>
                     </v-list>
@@ -30,9 +30,9 @@
             <v-card-text v-if="active_spool === null">
                 <v-row>
                     <v-col class="text-center">
-                        <p class="text--disabled">{{ $t('Panels.Spoolman.NoActiveSpool') }}</p>
+                        <p class="text--disabled">{{ $t('Panels.SpoolmanPanel.NoActiveSpool') }}</p>
                         <v-btn small color="primary" @click="showChangeSpoolDialog = true">
-                            {{ $t('Panels.Spoolman.SelectSpool') }}
+                            {{ $t('Panels.SpoolmanPanel.SelectSpool') }}
                         </v-btn>
                     </v-col>
                 </v-row>
@@ -72,7 +72,7 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
     }
 
     get title() {
-        const headline = this.$t('Panels.Spoolman.Headline') as string
+        const headline = this.$t('Panels.SpoolmanPanel.Headline') as string
 
         if (this.health === '' || this.health === 'healthy') return headline
 
@@ -80,9 +80,9 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
     }
 
     get changeSpoolTooltip(): string {
-        if (this.active_spool === null) return this.$t('Panels.Spoolman.SelectSpool') as string
+        if (this.active_spool === null) return this.$t('Panels.SpoolmanPanel.SelectSpool') as string
 
-        return this.$t('Panels.Spoolman.ChangeSpool') as string
+        return this.$t('Panels.SpoolmanPanel.ChangeSpool') as string
     }
 
     get active_spool(): ServerSpoolmanStateSpool | null {
diff --git a/src/locales/en.json b/src/locales/en.json
index d6bba7759..cb71efdcf 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -622,7 +622,7 @@
             "On": "On",
             "PowerControl": "Power Control"
         },
-        "Spoolman": {
+        "SpoolmanPanel": {
             "Cancel": "Cancel",
             "ChangeSpool": "Change Spool",
             "DaysAgo": "{days} days ago",

From bad91814f8266e8d4f2745ca773bd782a5c5a333 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 19 Sep 2023 19:41:07 +0200
Subject: [PATCH 20/32] WIP

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/StartPrintDialog.vue   |  2 +-
 .../dialogs/StartPrintDialogSpoolman.vue      | 42 ++++++++++++++++---
 src/store/server/spoolman/types.ts            |  2 +-
 3 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/components/dialogs/StartPrintDialog.vue b/src/components/dialogs/StartPrintDialog.vue
index d3508247d..237e540d3 100644
--- a/src/components/dialogs/StartPrintDialog.vue
+++ b/src/components/dialogs/StartPrintDialog.vue
@@ -10,7 +10,7 @@
                     {{ question }}
                 </p>
             </v-card-text>
-            <start-print-dialog-spoolman v-if="moonrakerComponents.includes('spoolman')" />
+            <start-print-dialog-spoolman v-if="moonrakerComponents.includes('spoolman')" :file="file" />
             <template v-if="moonrakerComponents.includes('timelapse') || true">
                 <v-divider v-if="!moonrakerComponents.includes('spoolman')" class="mt-3 mb-2" />
                 <v-card-text class="py-0">
diff --git a/src/components/dialogs/StartPrintDialogSpoolman.vue b/src/components/dialogs/StartPrintDialogSpoolman.vue
index 8f4413b32..e19a84008 100644
--- a/src/components/dialogs/StartPrintDialogSpoolman.vue
+++ b/src/components/dialogs/StartPrintDialogSpoolman.vue
@@ -2,9 +2,9 @@
     <div>
         <v-divider class="mt-3 mb-0" />
         <v-card-text class="py-0 px-2">
-            <spoolman-panel-active-spool v-if="activeSpool !== null" :small="true" class="my-0" />
-            <v-alert v-else text color="warning" class="mt-4 mx-3">
-                {{ $t('Dialogs.StartPrint.NoSpoolSelected') }}
+            <spoolman-panel-active-spool v-if="activeSpoolId !== null" :small="true" class="my-0" />
+            <v-alert v-for="alert in alerts" :key="alert.text" text :color="alert.warning" class="mt-4 mx-3">
+                {{ alert.text }}
             </v-alert>
         </v-card-text>
         <v-divider class="mt-0 mb-0" />
@@ -12,18 +12,48 @@
 </template>
 
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator'
+import { Component, Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import SpoolmanPanelActiveSpool from '@/components/panels/Spoolman/SpoolmanPanelActiveSpool.vue'
+import { FileStateGcodefile } from '@/store/files/types'
 
 @Component({
     components: { SpoolmanPanelActiveSpool },
 })
 export default class StartPrintDialogSpoolman extends Mixins(BaseMixin) {
-    get activeSpool() {
-        return null
+    @Prop({ required: true }) readonly file!: FileStateGcodefile
 
+    get activeSpoolId() {
         return this.$store.state.server.spoolman?.active_spool_id ?? null
     }
+
+    get activeSpool() {
+        return this.$store.state.server.spoolman?.active_spool ?? null
+    }
+
+    get alerts() {
+        let alerts = []
+
+        if (this.activeSpoolId === null) {
+            alerts.push({
+                text: this.$t('Dialogs.StartPrint.NoSpoolSelected'),
+                color: 'warning',
+            })
+        }
+
+        const gcodeFilamentType = (this.file.filament_type ?? '').toLowerCase()
+        if (
+            this.activeSpoolId !== null &&
+            gcodeFilamentType !== '' &&
+            this.activeSpool?.filament?.material?.toLowerCase() !== gcodeFilamentType
+        ) {
+            alerts.push({
+                text: this.$t('Dialogs.StartPrint.FilamentTypeMismatch'),
+                color: 'warning',
+            })
+        }
+
+        return alerts
+    }
 }
 </script>
diff --git a/src/store/server/spoolman/types.ts b/src/store/server/spoolman/types.ts
index 11f8cf77e..fd2af037f 100644
--- a/src/store/server/spoolman/types.ts
+++ b/src/store/server/spoolman/types.ts
@@ -8,7 +8,7 @@ export interface ServerSpoolmanState {
         version: string
     }
     active_spool_id: number | null
-    active_spool: number | null
+    active_spool: ServerSpoolmanStateSpool | null
     vendors: ServerSpoolmanStateVendor[]
     feeds: string[]
 }

From b4ef4a68e164318d5ed205798cfa7c20207721dc Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 19 Sep 2023 22:46:23 +0200
Subject: [PATCH 21/32] feat: add warnings in the print start dialog

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../dialogs/StartPrintDialogSpoolman.vue      | 60 ++++++++++++++++---
 src/locales/en.json                           |  4 +-
 2 files changed, 54 insertions(+), 10 deletions(-)

diff --git a/src/components/dialogs/StartPrintDialogSpoolman.vue b/src/components/dialogs/StartPrintDialogSpoolman.vue
index e19a84008..7d23daaba 100644
--- a/src/components/dialogs/StartPrintDialogSpoolman.vue
+++ b/src/components/dialogs/StartPrintDialogSpoolman.vue
@@ -3,11 +3,17 @@
         <v-divider class="mt-3 mb-0" />
         <v-card-text class="py-0 px-2">
             <spoolman-panel-active-spool v-if="activeSpoolId !== null" :small="true" class="my-0" />
-            <v-alert v-for="alert in alerts" :key="alert.text" text :color="alert.warning" class="mt-4 mx-3">
+            <v-alert v-for="alert in alerts" :key="alert.text" text :color="alert.color" class="mt-4 mx-3">
                 {{ alert.text }}
             </v-alert>
+            <div class="text-center">
+                <v-btn color="primary" small class="mx-auto" @click="showChangeSpoolDialog = true">
+                    {{ buttonText }}
+                </v-btn>
+            </div>
         </v-card-text>
-        <v-divider class="mt-0 mb-0" />
+        <v-divider :class="classSecondDivider" />
+        <spoolman-change-spool-dialog :show-dialog="showChangeSpoolDialog" @close="showChangeSpoolDialog = false" />
     </div>
 </template>
 
@@ -23,32 +29,68 @@ import { FileStateGcodefile } from '@/store/files/types'
 export default class StartPrintDialogSpoolman extends Mixins(BaseMixin) {
     @Prop({ required: true }) readonly file!: FileStateGcodefile
 
+    showChangeSpoolDialog = false
+
     get activeSpoolId() {
-        return this.$store.state.server.spoolman?.active_spool_id ?? null
+        let spoolId = this.$store.state.server.spoolman?.active_spool_id ?? null
+        if (spoolId === 0) spoolId = null
+
+        return spoolId
     }
 
     get activeSpool() {
         return this.$store.state.server.spoolman?.active_spool ?? null
     }
 
+    get classSecondDivider() {
+        const classes = ['mt-4']
+
+        classes.push(this.moonrakerComponents.includes('spoolman') ? 'mb-2' : 'mb-0')
+
+        return classes
+    }
+
+    get buttonText() {
+        if (this.activeSpoolId === null) return this.$t('Panels.SpoolmanPanel.SelectSpool') as string
+
+        return this.$t('Panels.SpoolmanPanel.ChangeSpool') as string
+    }
+
     get alerts() {
         let alerts = []
 
         if (this.activeSpoolId === null) {
             alerts.push({
-                text: this.$t('Dialogs.StartPrint.NoSpoolSelected'),
-                color: 'warning',
+                text: this.$t('Panels.SpoolmanPanel.NoSpoolSelected'),
+                color: 'orange',
             })
+
+            // No need to check for filament type mismatch if no spool is selected
+            return alerts
         }
 
-        const gcodeFilamentType = (this.file.filament_type ?? '').toLowerCase()
+        const gcodeFilamentType = this.file.filament_type ?? ''
         if (
-            this.activeSpoolId !== null &&
             gcodeFilamentType !== '' &&
-            this.activeSpool?.filament?.material?.toLowerCase() !== gcodeFilamentType
+            this.activeSpool?.filament?.material?.toLowerCase() !== gcodeFilamentType.toLowerCase()
         ) {
             alerts.push({
-                text: this.$t('Dialogs.StartPrint.FilamentTypeMismatch'),
+                text: this.$t('Panels.SpoolmanPanel.FilamentTypeMismatch', {
+                    fileType: gcodeFilamentType,
+                    spoolType: this.activeSpool?.filament?.material,
+                }),
+                color: 'warning',
+            })
+        }
+
+        const fileWeight = Math.round(this.file.filament_weight_total ?? 0)
+        const spoolWeight = Math.round(this.activeSpool?.remaining_weight ?? 0)
+        if (spoolWeight < fileWeight) {
+            alerts.push({
+                text: this.$t('Panels.SpoolmanPanel.TooLessFilament', {
+                    fileWeight,
+                    spoolWeight,
+                }),
                 color: 'warning',
             })
         }
diff --git a/src/locales/en.json b/src/locales/en.json
index cb71efdcf..2559244df 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -146,7 +146,6 @@
             "DoYouWantToStartFilename": "Do you want to start {filename}?",
             "DoYouWantToStartFilenameFilament": "Do you want to start {filename} with the following filament?",
             "Headline": "Start Job",
-            "NoSpoolSelected": "No spool selected. Please select a spool or this print will not be tracked.",
             "Print": "print",
             "Timelapse": "Timelapse"
         }
@@ -629,6 +628,7 @@
             "EjectSpool": "Eject spool",
             "EjectSpoolQuestion": "Are you sure to eject the filament spool?",
             "Filament": "Filament",
+            "FilamentTypeMismatch": "The material of the active spool ({spoolType}) does not match the material of the G-Code ({fileType}).",
             "FirstUsedOutput": "First used: {firstUsed}",
             "Headline": "Spoolman",
             "LastUsed": "Last Used",
@@ -638,11 +638,13 @@
             "NoActiveSpool": "Filament tracking is inactive. To get started, please select a spool.",
             "NoResults": "No spool found with the current search criteria.",
             "NoSpools": "No spools available",
+            "NoSpoolSelected": "No spool selected. Please select a spool or this print will not be tracked.",
             "OpenSpoolManager": "open Spool Manager",
             "Refresh": "refresh",
             "Search": "Search",
             "SelectSpool": "Select Spool",
             "Today": "Today",
+            "TooLessFilament": "The current spool may not have enough filament for this print. ({spoolWeight}g of {fileWeight}g)",
             "Weight": "Weight",
             "Yesterday": "Yesterday"
         },

From c478235f519da0c22c088589f74f57c3efd133af Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 24 Sep 2023 22:14:45 +0200
Subject: [PATCH 22/32] refactor: better usability on mobile devices in change
 spool dialog

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../dialogs/SpoolmanChangeSpoolDialogRow.vue           | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue b/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
index 2456ca555..fa3d0202e 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
@@ -3,8 +3,8 @@
         <td style="width: 50px" class="pr-0 py-2">
             <spool-icon :color="color" style="width: 50px; float: left" class="mr-3" />
         </td>
-        <td class="py-2">
-            <strong>{{ vendor }} - {{ name }}</strong>
+        <td class="py-2" style="min-width: 300px">
+            <strong class="text-no-wrap">{{ vendor }} - {{ name }}</strong>
             <template v-if="location">
                 <br />
                 {{ $t('Panels.SpoolmanPanel.Location') }}: {{ location }}
@@ -14,9 +14,9 @@
                 {{ spool.comment }}
             </template>
         </td>
-        <td class="text-center">{{ material }}</td>
-        <td class="text-right">{{ last_used }}</td>
-        <td class="text-right">
+        <td class="text-center text-no-wrap">{{ material }}</td>
+        <td class="text-right text-no-wrap">{{ last_used }}</td>
+        <td class="text-right text-no-wrap">
             <strong>{{ rest_weight_format }}</strong>
             <small class="ml-1">/ {{ total_weight_format }}</small>
         </td>

From fc0af956e7989e4c55418ebc0bc6a922e1991396 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 1 Oct 2023 09:13:12 +0200
Subject: [PATCH 23/32] feat: add option to click on the spool or name to open
 change spool dialog

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../panels/Spoolman/SpoolmanPanelActiveSpool.vue     |  8 ++++++--
 src/components/panels/SpoolmanPanel.vue              |  2 +-
 src/components/ui/SpoolIcon.vue                      | 12 +++++++++---
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/panels/Spoolman/SpoolmanPanelActiveSpool.vue b/src/components/panels/Spoolman/SpoolmanPanelActiveSpool.vue
index 02cb9eccb..52dafdd20 100644
--- a/src/components/panels/Spoolman/SpoolmanPanelActiveSpool.vue
+++ b/src/components/panels/Spoolman/SpoolmanPanelActiveSpool.vue
@@ -3,13 +3,13 @@
         <v-list-item-content :class="listItemContentClass">
             <div :class="overlineClass">#{{ id }} | {{ vendor }}</div>
             <v-list-item-title :class="listItemTitleClass">
-                {{ name }}
+                <span class="cursor-pointer" @click="clickSpool">{{ name }}</span>
             </v-list-item-title>
             <v-list-item-subtitle>{{ subtitle }}</v-list-item-subtitle>
         </v-list-item-content>
 
         <v-list-item-avatar tile :size="avatarSize">
-            <spool-icon :color="color" />
+            <spool-icon :color="color" @click-spool="clickSpool" />
         </v-list-item-avatar>
     </v-list-item>
 </template>
@@ -115,6 +115,10 @@ export default class SpoolmanPanelActiveSpool extends Mixins(BaseMixin) {
     get subtitle() {
         return [this.materialOutput, this.weightOutput, this.lengthOutput].filter((v) => v !== null).join(' | ')
     }
+
+    clickSpool() {
+        this.$emit('change-spool')
+    }
 }
 </script>
 
diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
index c6d33a73a..a05a1fa04 100644
--- a/src/components/panels/SpoolmanPanel.vue
+++ b/src/components/panels/SpoolmanPanel.vue
@@ -37,7 +37,7 @@
                     </v-col>
                 </v-row>
             </v-card-text>
-            <spoolman-panel-active-spool v-else />
+            <spoolman-panel-active-spool v-else @change-spool="showChangeSpoolDialog = true" />
         </panel>
         <spoolman-change-spool-dialog :show-dialog="showChangeSpoolDialog" @close="showChangeSpoolDialog = false" />
         <spoolman-eject-spool-dialog :show-dialog="showEjectSpoolDialog" @close="showEjectSpoolDialog = false" />
diff --git a/src/components/ui/SpoolIcon.vue b/src/components/ui/SpoolIcon.vue
index 730da9111..d0b65e6c8 100644
--- a/src/components/ui/SpoolIcon.vue
+++ b/src/components/ui/SpoolIcon.vue
@@ -6,7 +6,9 @@
         x="0px"
         y="0px"
         viewBox="0 0 487.04 487.04"
-        xml:space="preserve">
+        xml:space="preserve"
+        class="cursor-pointer"
+        @click="clickSpool">
         <g>
             <circle :style="styleCircle1" cx="243.52" cy="243.52" r="232.97" />
             <circle :style="styleCircle2" cx="243.52" cy="243.52" r="112.5" />
@@ -20,9 +22,9 @@
 <script lang="ts">
 import Component from 'vue-class-component'
 import { Mixins, Prop } from 'vue-property-decorator'
-import BaseMixin from '../mixins/base'
+import BaseMixin from '@/components/mixins/base'
 
-@Component
+@Component({})
 export default class SpoolIcon extends Mixins(BaseMixin) {
     @Prop({ required: false, default: '#ff0' })
     declare readonly color: string
@@ -38,5 +40,9 @@ export default class SpoolIcon extends Mixins(BaseMixin) {
     get styleCircle3() {
         return { fill: '#343434' }
     }
+
+    clickSpool() {
+        this.$emit('click-spool')
+    }
 }
 </script>

From df4cd3a2c16da41a6a65a465de598b0704e1f4b3 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Sun, 1 Oct 2023 09:44:31 +0200
Subject: [PATCH 24/32] feat: add option to click on the spool or name to open
 change spool dialog

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/StartPrintDialogSpoolman.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/dialogs/StartPrintDialogSpoolman.vue b/src/components/dialogs/StartPrintDialogSpoolman.vue
index 7d23daaba..b2f241f68 100644
--- a/src/components/dialogs/StartPrintDialogSpoolman.vue
+++ b/src/components/dialogs/StartPrintDialogSpoolman.vue
@@ -2,7 +2,11 @@
     <div>
         <v-divider class="mt-3 mb-0" />
         <v-card-text class="py-0 px-2">
-            <spoolman-panel-active-spool v-if="activeSpoolId !== null" :small="true" class="my-0" />
+            <spoolman-panel-active-spool
+                v-if="activeSpoolId !== null"
+                :small="true"
+                class="my-0"
+                @change-spool="showChangeSpoolDialog = true" />
             <v-alert v-for="alert in alerts" :key="alert.text" text :color="alert.color" class="mt-4 mx-3">
                 {{ alert.text }}
             </v-alert>

From abcd49712c72e02eb553f9e90666dd4e127526ee Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 3 Oct 2023 22:28:54 +0200
Subject: [PATCH 25/32] refactor: remove unused getters in SpoolmanPanel.vue

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/panels/SpoolmanPanel.vue | 59 -------------------------
 1 file changed, 59 deletions(-)

diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
index a05a1fa04..054a8786d 100644
--- a/src/components/panels/SpoolmanPanel.vue
+++ b/src/components/panels/SpoolmanPanel.vue
@@ -89,65 +89,6 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
         return this.$store.state.server.spoolman.active_spool ?? null
     }
 
-    get color() {
-        const color = this.active_spool?.filament.color_hex ?? null
-        if (color === null) return '#000'
-
-        return `#${color}`
-    }
-
-    get id() {
-        return this.active_spool?.id ?? 'XX'
-    }
-
-    get vendor() {
-        return this.active_spool?.filament?.vendor?.name ?? 'Unknown'
-    }
-
-    get name() {
-        return this.active_spool?.filament.name ?? 'Unknown'
-    }
-
-    get materialOutput() {
-        const material = this.active_spool?.filament.material ?? null
-        if (material === null) return null
-
-        return material
-    }
-
-    get weightOutput() {
-        let remaining = this.active_spool?.remaining_weight ?? null
-        let total = this.active_spool?.filament.weight ?? null
-        let unit = 'g'
-
-        if (remaining === null || total === null) return null
-        remaining = Math.round(remaining)
-        let totalRound = Math.floor(total / 1000)
-
-        if (total >= 1000) {
-            if (totalRound !== total / 1000) {
-                totalRound = Math.round(total / 100) / 10
-            }
-
-            return `${remaining}g / ${totalRound}kg`
-        }
-
-        return `${remaining} / ${total}${unit}`
-    }
-
-    get lengthOutput() {
-        let remaining = this.active_spool?.remaining_length ?? null
-
-        if (remaining === null) return null
-        remaining = Math.round(remaining / 1000)
-
-        return `${remaining}m`
-    }
-
-    get subtitle() {
-        return [this.materialOutput, this.weightOutput, this.lengthOutput].filter((v) => v !== null).join(' | ')
-    }
-
     get spoolManagerUrl() {
         return this.$store.state.server.config.config?.spoolman?.server ?? null
     }

From c3d272340ca011c22d5cf1456cc14fa92a97cf10 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 3 Oct 2023 22:46:31 +0200
Subject: [PATCH 26/32] refactor: remove filter for spools

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/SpoolmanChangeSpoolDialog.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
index 7c51d32f5..6e266e3e5 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
@@ -84,11 +84,7 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
     search = ''
 
     get spools(): ServerSpoolmanStateSpool[] {
-        const spools = this.$store.state.server.spoolman.spools ?? []
-
-        return spools.filter((spool: ServerSpoolmanStateSpool) => {
-            return spool.filament !== null
-        })
+        return this.$store.state.server.spoolman.spools ?? []
     }
 
     get headers() {

From 43c40a791eb64a98d3e131ddf61bbc550e63d15a Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 3 Oct 2023 22:47:07 +0200
Subject: [PATCH 27/32] refactor: remove testing true for timelapse

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/StartPrintDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dialogs/StartPrintDialog.vue b/src/components/dialogs/StartPrintDialog.vue
index 237e540d3..afcf1dcdb 100644
--- a/src/components/dialogs/StartPrintDialog.vue
+++ b/src/components/dialogs/StartPrintDialog.vue
@@ -11,7 +11,7 @@
                 </p>
             </v-card-text>
             <start-print-dialog-spoolman v-if="moonrakerComponents.includes('spoolman')" :file="file" />
-            <template v-if="moonrakerComponents.includes('timelapse') || true">
+            <template v-if="moonrakerComponents.includes('timelapse')">
                 <v-divider v-if="!moonrakerComponents.includes('spoolman')" class="mt-3 mb-2" />
                 <v-card-text class="py-0">
                     <settings-row :title="$t('Dialogs.StartPrint.Timelapse')">

From 97643ebee7eea144cbe6d4968c3c6a1ad8c328f1 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 3 Oct 2023 22:53:50 +0200
Subject: [PATCH 28/32] fix: change margin bottom when timelapse exists

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/StartPrintDialogSpoolman.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/dialogs/StartPrintDialogSpoolman.vue b/src/components/dialogs/StartPrintDialogSpoolman.vue
index b2f241f68..469415a98 100644
--- a/src/components/dialogs/StartPrintDialogSpoolman.vue
+++ b/src/components/dialogs/StartPrintDialogSpoolman.vue
@@ -49,7 +49,7 @@ export default class StartPrintDialogSpoolman extends Mixins(BaseMixin) {
     get classSecondDivider() {
         const classes = ['mt-4']
 
-        classes.push(this.moonrakerComponents.includes('spoolman') ? 'mb-2' : 'mb-0')
+        classes.push(this.moonrakerComponents.includes('timelapse') ? 'mb-2' : 'mb-0')
 
         return classes
     }

From 5a90fae99329857f846fda1cdd577da413afe01b Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 3 Oct 2023 23:06:56 +0200
Subject: [PATCH 29/32] feat: reset search on opening change spool dialog

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/SpoolmanChangeSpoolDialog.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
index 6e266e3e5..18d475f01 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
@@ -63,7 +63,7 @@
 
 <script lang="ts">
 import Component from 'vue-class-component'
-import { Mixins, Prop } from 'vue-property-decorator'
+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 } from '@mdi/js'
@@ -159,5 +159,10 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
         this.$store.dispatch('server/spoolman/setActiveSpool', spool.id)
         this.close()
     }
+
+    @Watch('showDialog')
+    onShowDialogChanged(newVal: boolean) {
+        if (newVal) this.search = ''
+    }
 }
 </script>

From 4635026604d962776e2885014c0e91640ee334cb Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Tue, 3 Oct 2023 23:24:35 +0200
Subject: [PATCH 30/32] refactor: use remaining_weight instead of calculating
 it

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 .../dialogs/SpoolmanChangeSpoolDialogRow.vue       | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue b/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
index fa3d0202e..cf5040b28 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
@@ -17,7 +17,7 @@
         <td class="text-center text-no-wrap">{{ material }}</td>
         <td class="text-right text-no-wrap">{{ last_used }}</td>
         <td class="text-right text-no-wrap">
-            <strong>{{ rest_weight_format }}</strong>
+            <strong>{{ remaining_weight_format }}</strong>
             <small class="ml-1">/ {{ total_weight_format }}</small>
         </td>
     </tr>
@@ -32,6 +32,10 @@ import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
 export default class SpoolmanChangeSpoolDialogRow extends Mixins(BaseMixin) {
     @Prop({ required: true }) declare readonly spool: ServerSpoolmanStateSpool
 
+    mounted() {
+        window.console.log(this.spool)
+    }
+
     get color() {
         const color = this.spool.filament?.color_hex ?? '000'
 
@@ -54,16 +58,16 @@ export default class SpoolmanChangeSpoolDialogRow extends Mixins(BaseMixin) {
         return this.spool.filament?.material ?? '--'
     }
 
-    get used_weight() {
-        return this.spool.used_weight ?? 0
+    get remaining_weight() {
+        return this.spool.remaining_weight ?? 0
     }
 
     get total_weight() {
         return this.spool.filament?.weight ?? 0
     }
 
-    get rest_weight_format() {
-        return `${(this.total_weight - this.used_weight).toFixed(0)}g`
+    get remaining_weight_format() {
+        return `${this.remaining_weight.toFixed(0)}g`
     }
 
     get total_weight_format() {

From fd715ceddd729a782793b46e223575f4edc439a7 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 4 Oct 2023 22:28:53 +0200
Subject: [PATCH 31/32] refactor: remove debug output

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue b/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
index cf5040b28..c02fb14ff 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialogRow.vue
@@ -31,11 +31,6 @@ import { ServerSpoolmanStateSpool } from '@/store/server/spoolman/types'
 @Component({})
 export default class SpoolmanChangeSpoolDialogRow extends Mixins(BaseMixin) {
     @Prop({ required: true }) declare readonly spool: ServerSpoolmanStateSpool
-
-    mounted() {
-        window.console.log(this.spool)
-    }
-
     get color() {
         const color = this.spool.filament?.color_hex ?? '000'
 

From fff13b8d85578c9d9aeb6cff86674512bfe5ca01 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Fri, 6 Oct 2023 21:06:56 +0200
Subject: [PATCH 32/32] feat: add sort to spool dialog

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/dialogs/SpoolmanChangeSpoolDialog.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
index 18d475f01..8c6254dd9 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
+++ b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
@@ -40,10 +40,10 @@
                         :headers="headers"
                         :items="spools"
                         item-key="id"
-                        class="elevation-1"
                         :search="search"
-                        :custom-filter="customFilter"
-                        :disable-sort="true">
+                        sort-by="last_used"
+                        :sort-desc="true"
+                        :custom-filter="customFilter">
                         <template #no-data>
                             <div class="text-center">{{ $t('Panels.SpoolmanPanel.NoSpools') }}</div>
                         </template>
@@ -92,22 +92,28 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
             {
                 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',
             },
         ]
     }