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