Added second layer confirmation for Cancel Job

src/components/dialogs/CancelJobDialog.vue

@@ -0,0 +1,50 @@
+<template>
+    <v-dialog :value="showDialog" width="400" persistent>
+        <panel
+            :title="$t('CancelJobDialog.CancelJob')"
+            toolbar-color="error"
+            card-class="cancel-job-dialog"
+            :icon="mdiStop"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closePrompt">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>{{ $t('CancelJobDialog.AreYouSure') }}</v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="closePrompt">{{ $t('CancelJobDialog.No') }}</v-btn>
+                <v-btn color="primary" text @click="cancelJob">{{ $t('CancelJobDialog.Yes') }}</v-btn>
+            </v-card-actions>
+        </panel>
+    </v-dialog>
+</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 { mdiCloseThick, mdiStop } from '@mdi/js'
+
+@Component({
+    components: { Panel },
+})
+export default class CancelJobDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiStop = mdiStop
+
+    @Prop({ type: Boolean, default: false }) showDialog!: boolean
+
+    cancelJob(): void {
+        this.$socket.emit('printer.print.cancel', {}, { loading: 'statusPrintCancel' })
+    }
+
+    closePrompt() {
+        this.$emit('close')
+    }
+}
+</script>
+
+<style scoped></style>

src/components/panels/StatusPanel.vue

@@ -110,6 +110,7 @@
                 </v-tab-item>
             </v-tabs-items>
         </panel>
+        <cancel-job-dialog :show-dialog="showCancelJobDialog" @close="showCancelJobDialog = false" />
     </div>
 </template>
 
@@ -392,6 +393,17 @@ export default class StatusPanel extends Mixins(BaseMixin) {
     }
 
     btnCancelJob() {
+        const confirmOnCancelJob = this.$store.state.gui.uiSettings.confirmOnCancelJob
+        if (confirmOnCancelJob) {
+            this.showCancelJobDialog = true
+            return
+        }
+
+        this.cancelJob()
+    }
+
+    cancelJob() {
+        this.showCancelJobDialog = false
         this.$socket.emit('printer.print.cancel', {}, { loading: 'statusPrintCancel' })
     }
 

src/components/settings/SettingsUiSettingsTab.vue

@@ -178,6 +178,13 @@
                     <v-switch v-model="confirmOnPowerDeviceChange" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2" />
+                <settings-row
+                    :title="$t('Settings.UiSettingsTab.ConfirmOnCancelJob')"
+                    :sub-title="$t('Settings.UiSettingsTab.ConfirmOnCancelJobDescription')"
+                    :dynamic-slot-width="true">
+                    <v-switch v-model="confirmOnCancelJob" hide-details class="mt-0" />
+                </settings-row>
+                <v-divider class="my-2" />
                 <settings-row
                     :title="$t('Settings.UiSettingsTab.NavigationStyle')"
                     :sub-title="$t('Settings.UiSettingsTab.NavigationStyleDescription')">
@@ -426,6 +433,14 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin, ThemeMixin)
         this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.confirmOnPowerDeviceChange', value: newVal })
     }
 
+    get confirmOnCancelJob() {
+        return this.$store.state.gui.uiSettings.confirmOnCancelJob
+    }
+
+    set confirmOnCancelJob(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.confirmOnCancelJob', value: newVal })
+    }
+
     get lockSliders() {
         return this.$store.state.gui.uiSettings.lockSlidersOnTouchDevices
     }

src/locales/de.json

@@ -144,6 +144,12 @@
         "ScrewName": "Name der Schraube",
         "ScrewOutput": "{current} von {max}"
     },
+    "CancelJobDialog": {
+        "AreYouSure": "Bist du sicher?",
+        "CancelJob": "Druck abbrechen",
+        "No": "Nein",
+        "Yes": "Ja"
+    },
     "ConnectionDialog": {
         "CannotConnectTo": "Kann keine Verbindung zu Moonraker ({host}) herstellen.",
         "CheckMoonrakerLog": "Wenn diese Meldung wiederholt erscheint, schaue bitte in die Logdatei unter:",
@@ -1202,6 +1208,8 @@
             "ConfirmOnEmergencyStopDescription": "Zeige vor einem Notstop einen Bestätigungsdialog.",
             "ConfirmOnPowerDeviceChange": "Bestätigung für Änderung der Stromversorgung von Geräten",
             "ConfirmOnPowerDeviceChangeDescription": "Zeige vor Änderung der Stromversorgung von Geräten einen Bestätigungsdialog.",
+            "ConfirmOnCancelJob": "Bestätigung für Druck abbrechen erforderlich",
+            "ConfirmOnCancelJobDescription": "Zeige vor dem Druck abbrechen einen Bestätigungsdialog.",
             "DefaultNavigationState": "Standard Navigationszustand",
             "DefaultNavigationStateAlwaysClosed": "immer geschlossen",
             "DefaultNavigationStateAlwaysOpen": "immer geöffnet",

src/locales/en.json

@@ -144,6 +144,12 @@
         "ScrewName": "Screw Name",
         "ScrewOutput": "{current} of {max}"
     },
+    "CancelJobDialog": {
+        "AreYouSure": "Are you sure?",
+        "CancelJob": "Cancel Job",
+        "No": "No",
+        "Yes": "Yes"
+    },
     "ConnectionDialog": {
         "CannotConnectTo": "Cannot connect to Moonraker ({host}).",
         "CheckMoonrakerLog": "If this message appears repeatedly, please have a look in the log file located at:",
@@ -1202,6 +1208,8 @@
             "ConfirmOnEmergencyStopDescription": "Show a confirmation dialog on Emergency Stop",
             "ConfirmOnPowerDeviceChange": "Require confirm on Device Power changes",
             "ConfirmOnPowerDeviceChangeDescription": "Show a confirmation dialog on Device Power changes",
+            "ConfirmOnCancelJob": "Require confirm on Cancel Job",
+            "ConfirmOnCancelJobDescription": "Show a confirmation dialog on Cancel Job",
             "DefaultNavigationState": "Navigation default state",
             "DefaultNavigationStateAlwaysClosed": "always closed",
             "DefaultNavigationStateAlwaysOpen": "always open",

src/store/gui/index.ts

@@ -166,6 +166,7 @@ export const getDefaultState = (): GuiState => {
             confirmOnEmergencyStop: false,
             confirmOnCoolDown: false,
             confirmOnPowerDeviceChange: false,
+            confirmOnCancelJob: false,
             boolBigThumbnail: true,
             bigThumbnailBackground: defaultBigThumbnailBackground,
             boolWideNavDrawer: false,

src/store/gui/types.ts

@@ -108,6 +108,7 @@ export interface GuiState {
         confirmOnEmergencyStop: boolean
         confirmOnCoolDown: boolean
         confirmOnPowerDeviceChange: boolean
+        confirmOnCancelJob: boolean
         boolBigThumbnail: boolean
         bigThumbnailBackground: string
         boolWideNavDrawer: boolean