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] 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"
         }