feat: added confirm dialog to cancel print button

src/components/dialogs/dialogConfirm.vue

@@ -0,0 +1,50 @@
+<template>
+  <v-dialog
+    @input="emitChange(value)"
+    :value="value"
+    :max-width="maxWidthValue"
+    persistent
+  >
+    <v-card>
+      <v-card-title>
+        <span class="headline"> {{ title }}</span>
+      </v-card-title>
+      <v-card-text>
+        <slot></slot>
+      </v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn color="secondary" @click="emitChange(false)">No</v-btn>
+        <v-btn color="warning" @click="emitChange(true)">Yes</v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script lang="ts">
+import { Component, Mixins, Prop } from 'vue-property-decorator'
+import UtilsMixin from '@/mixins/utils'
+
+@Component({})
+export default class DialogInput extends Mixins(UtilsMixin) {
+  @Prop({ type: Boolean, required: true })
+  public value!: boolean
+
+  @Prop({ type: String, required: false, default: 'Confirm' })
+  title!: string
+
+  @Prop({ type: Number, required: false, default: 250 })
+  maxWidth!: number
+
+  get maxWidthValue (): string | undefined {
+    return (this.maxWidth) ? this.maxWidth.toString() + 'px' : undefined
+  }
+
+  emitChange (val: boolean) {
+    if (val === true) {
+      this.$emit('confirm')
+    }
+    this.$emit('input', false)
+  }
+}
+</script>

src/components/dialogs/dialogInput.vue

@@ -14,8 +14,8 @@
       </v-card-text>
       <v-card-actions>
         <v-spacer></v-spacer>
-        <v-btn color="blue darken-1" text @click="emitChange(false)">Close</v-btn>
-        <v-btn color="blue darken-1" text @click="saveValue()">Save</v-btn>
+        <v-btn color="secondary" @click="emitChange(false)">Close</v-btn>
+        <v-btn color="primary" @click="saveValue()">Save</v-btn>
       </v-card-actions>
     </v-card>
   </v-dialog>

src/components/widgets/PrintStatusWidget.vue

@@ -58,8 +58,9 @@
             <v-icon small>mdi-pause</v-icon>
             <span>Pause</span>
           </v-btn>
+
           <v-btn
-            @click="cancelPrint()"
+            @click="confirmDialog.open = true"
             :loading="hasWait(waits.onPrintCancel)"
             :width="buttonWidths"
             v-if="printerPrinting || printerPaused"
@@ -104,6 +105,11 @@
       </v-row>
     </v-expand-transition>
     </v-container>
+    <dialog-confirm
+      v-model="confirmDialog.open"
+      @confirm="cancelPrint()">
+      <p>Are you sure? This will cancel your print.</p>
+    </dialog-confirm>
   </v-sheet>
 </template>
 
@@ -112,12 +118,21 @@ import { Component, Mixins } from 'vue-property-decorator'
 import UtilsMixin from '@/mixins/utils'
 import { Waits } from '@/globals'
 import { SocketActions } from '@/socketActions'
+import DialogConfirm from '@/components/dialogs/dialogConfirm.vue'
 
-@Component({})
+@Component({
+  components: {
+    DialogConfirm
+  }
+})
 export default class PrintStatusWidget extends Mixins(UtilsMixin) {
   buttonWidths = 140
   waits = Waits
 
+  confirmDialog = {
+    open: false
+  }
+
   get cameraUrl (): string {
     return this.$store.state.config.fileConfig.camera.url
   }