feat: added second layer confirmation for Cancel Job (#1978)

Co-authored-by: Stefan Dej <meteyou@gmail.com>

src/components/dialogs/CancelJobDialog.vue

@@ -0,0 +1,50 @@
+<template>
+ <v-dialog :value="showDialog" width="400" persistent>
+ <panel
+ :title="$t('CancelJobDialog.CancelJob')"
+ toolbar-color="normal"
+ card-class="cancel-job-dialog"
+ :icon="mdiStopCircleOutline"
+ :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, mdiStopCircleOutline } from '@mdi/js'
+
+@Component({
+ components: { Panel },
+})
+export default class CancelJobDialog extends Mixins(BaseMixin) {
+ mdiCloseThick = mdiCloseThick
+ mdiStopCircleOutline = mdiStopCircleOutline
+
+ @Prop({ type: Boolean, default: false }) showDialog!: boolean
+
+ cancelJob() {
+ this.$emit('cancel-job')
+ }
+
+ closePrompt() {
+ this.$emit('close')
+ }
+}
+</script>
+
+<style scoped></style>

src/components/panels/StatusPanel.vue

@@ -110,6 +110,10 @@
  </v-tab-item>
  </v-tabs-items>
  </panel>
+ <cancel-job-dialog
+ :show-dialog="showCancelJobDialog"
+ @cancel-job="cancelJob"
+ @close="showCancelJobDialog = false" />
  </div>
 </template>
 
@@ -141,9 +145,11 @@ import {
  mdiDotsVertical,
 } from '@mdi/js'
 import { PrinterStateMacro } from '@/store/printer/types'
+import CancelJobDialog from '@/components/dialogs/CancelJobDialog.vue'
 
 @Component({
  components: {
+ CancelJobDialog,
  KlippyStatePanel,
  MinSettingsPanel,
  Panel,
@@ -166,6 +172,7 @@ export default class StatusPanel extends Mixins(BaseMixin) {
  bigThumbnail: any
  }
 
+ showCancelJobDialog = false
  boolShowObjects = false
  boolShowPauseAtLayer = false
 
@@ -392,6 +399,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:",
@@ -1196,6 +1202,8 @@
  "BoolBigThumbnailDescription": "Zeige ein großes Thumbnail in der Status-Anzeige während eines Drucks.",
  "BoolHideUploadAndPrintButton": "\"Hochladen & Drucken\" Schaltfläche ausblenden",
  "BoolHideUploadAndPrintButtonDescription": "Blendet die \"Hochladen & Drucken\" Schaltfläche in der Kopfleiste ein oder aus.",
+ "ConfirmOnCancelJob": "Bestätigung für Druck abbrechen erforderlich",
+ "ConfirmOnCancelJobDescription": "Zeige vor dem Druck abbrechen einen Bestätigungsdialog.",
  "ConfirmOnCoolDown": "Bestätigung für Abkühlen erforderlich",
  "ConfirmOnCoolDownDescription": "Zeige vor dem Abkühlen einen Bestätigungsdialog.",
  "ConfirmOnEmergencyStop": "Bestätigung für Notstopp erforderlich",

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:",
@@ -1197,6 +1203,8 @@
  "BoolBigThumbnailDescription": "Display a large thumbnail in the status panel during a print.",
  "BoolHideUploadAndPrintButton": "Hide Upload and Print Button",
  "BoolHideUploadAndPrintButtonDescription": "Show or hide the \"Upload and Print\" button in the top bar.",
+ "ConfirmOnCancelJob": "Require confirm on Cancel Job",
+ "ConfirmOnCancelJobDescription": "Show a confirmation dialog on Cancel Job",
  "ConfirmOnCoolDown": "Require confirm on CoolDown",
  "ConfirmOnCoolDownDescription": "Show a confirmation dialog on CoolDown",
  "ConfirmOnEmergencyStop": "Require confirm on Emergency Stop",

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