feat: Add confirmation dialog to cooldown button (#1808)

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

src/components/dialogs/CoolDownDialog.vue

@@ -0,0 +1,56 @@
+<template>
+    <v-dialog :value="showDialog" width="400" persistent>
+        <panel
+            :title="$t('CoolDownDialog.CoolDown')"
+            card-class="cool-down-dialog"
+            :icon="mdiSnowflake"
+            :margin-bottom="false">
+            <template #buttons>
+                <v-btn icon tile @click="closePrompt">
+                    <v-icon>{{ mdiCloseThick }}</v-icon>
+                </v-btn>
+            </template>
+            <v-card-text>{{ $t('CoolDownDialog.AreYouSure') }}</v-card-text>
+            <v-card-actions>
+                <v-spacer />
+                <v-btn text @click="closePrompt">{{ $t('CoolDownDialog.No') }}</v-btn>
+                <v-btn color="primary" text @click="cooldown">{{ $t('CoolDownDialog.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, mdiSnowflake } from '@mdi/js'
+
+@Component({
+    components: { Panel },
+})
+export default class CoolDownDialog extends Mixins(BaseMixin) {
+    mdiCloseThick = mdiCloseThick
+    mdiSnowflake = mdiSnowflake
+
+    @Prop({ type: Boolean, default: false }) showDialog!: boolean
+
+    get cooldownGcode(): string {
+        return this.$store.getters['gui/presets/getCooldownGcode']
+    }
+
+    cooldown(): void {
+        this.$store.dispatch('server/addEvent', { message: this.cooldownGcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: this.cooldownGcode })
+
+        this.closePrompt()
+    }
+
+    closePrompt() {
+        this.$emit('close')
+    }
+}
+</script>
+
+<style scoped></style>

src/components/panels/Temperature/TemperaturePanelPresets.vue

@@ -25,7 +25,7 @@
             </v-list>
             <v-divider class="_fix_transparency" />
             <v-list dense class="py-0">
-                <v-list-item link @click="cooldown">
+                <v-list-item link @click="btnCoolDown">
                     <div class="d-flex align-center _preset-title">
                         <v-icon small color="primary" class="mr-1">{{ mdiSnowflake }}</v-icon>
                         <span class="primary--text">{{ $t('Panels.TemperaturePanel.Cooldown') }}</span>
@@ -39,10 +39,11 @@
             :text="$vuetify.breakpoint.mdAndUp"
             tile
             color="primary"
-            @click="cooldown">
+            @click="btnCoolDown">
             <v-icon small>{{ mdiSnowflake }}</v-icon>
             <span class="d-none ml-1 d-md-inline">{{ $t('Panels.TemperaturePanel.Cooldown') }}</span>
         </v-btn>
+        <cool-down-dialog :show-dialog="showCoolDownDialog" @close="showCoolDownDialog = false" />
     </div>
 </template>
 
@@ -51,13 +52,19 @@ import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { GuiPresetsStatePreset } from '@/store/gui/presets/types'
-import { mdiFire, mdiMenuDown, mdiSnowflake } from '@mdi/js'
+import { mdiFire, mdiMenuDown, mdiSnowflake, mdiCloseThick } from '@mdi/js'
+import CoolDownDialog from '@/components/dialogs/CoolDownDialog.vue'
 
-@Component
+@Component({
+    components: { CoolDownDialog },
+})
 export default class TemperaturePanelPresets extends Mixins(BaseMixin) {
     mdiFire = mdiFire
     mdiMenuDown = mdiMenuDown
     mdiSnowflake = mdiSnowflake
+    mdiCloseThick = mdiCloseThick
+
+    showCoolDownDialog = false
 
     get presets(): GuiPresetsStatePreset[] {
         return this.$store.getters['gui/presets/getPresets'] ?? []
@@ -67,6 +74,10 @@ export default class TemperaturePanelPresets extends Mixins(BaseMixin) {
         return this.$store.getters['gui/presets/getCooldownGcode']
     }
 
+    get confirmOnCoolDown(): boolean {
+        return this.$store.state.gui.uiSettings.confirmOnCoolDown
+    }
+
     preheat(preset: GuiPresetsStatePreset): void {
         for (const [name, attributes] of Object.entries(preset.values)) {
             if (attributes.bool) {
@@ -100,7 +111,17 @@ export default class TemperaturePanelPresets extends Mixins(BaseMixin) {
         }
     }
 
+    btnCoolDown(): void {
+        if (this.confirmOnCoolDown) {
+            this.showCoolDownDialog = true
+            return
+        }
+
+        this.cooldown()
+    }
+
     cooldown(): void {
+        this.showCoolDownDialog = false
         this.$store.dispatch('server/addEvent', { message: this.cooldownGcode, type: 'command' })
         this.$socket.emit('printer.gcode.script', { script: this.cooldownGcode })
     }

src/components/settings/SettingsUiSettingsTab.vue

@@ -142,6 +142,13 @@
                     <v-switch v-model="confirmOnEmergencyStop" hide-details class="mt-0" />
                 </settings-row>
                 <v-divider class="my-2" />
+                <settings-row
+                    :title="$t('Settings.UiSettingsTab.ConfirmOnCoolDown')"
+                    :sub-title="$t('Settings.UiSettingsTab.ConfirmOnCoolDownDescription')"
+                    :dynamic-slot-width="true">
+                    <v-switch v-model="confirmOnCoolDown" hide-details class="mt-0" />
+                </settings-row>
+                <v-divider class="my-2" />
                 <settings-row
                     :title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChange')"
                     :sub-title="$t('Settings.UiSettingsTab.ConfirmOnPowerDeviceChangeDescription')"
@@ -341,6 +348,14 @@ export default class SettingsUiSettingsTab extends Mixins(BaseMixin) {
         this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.confirmOnEmergencyStop', value: newVal })
     }
 
+    get confirmOnCoolDown() {
+        return this.$store.state.gui.uiSettings.confirmOnCoolDown
+    }
+
+    set confirmOnCoolDown(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'uiSettings.confirmOnCoolDown', value: newVal })
+    }
+
     get confirmOnPowerDeviceChange() {
         return this.$store.state.gui.uiSettings.confirmOnPowerDeviceChange
     }

src/locales/en.json

@@ -149,6 +149,12 @@
         "SendCode": "Send code...",
         "SetupConsole": "Setup Console"
     },
+    "CoolDownDialog": {
+        "AreYouSure": "Are you sure?",
+        "CoolDown": "CoolDown",
+        "No": "No",
+        "Yes": "Yes"
+    },
     "DevicesDialog": {
         "CanBusInfo": "Only unassigned nodes can be detected. It’s recommended to have only one unassigned device connected to the can bus to avoid communication issues. For more details, please click on the link:",
         "ClickRefresh": "Click on the refresh button to search for devices.",
@@ -1142,6 +1148,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.",
+            "ConfirmOnCoolDown": "Require confirm on CoolDown",
+            "ConfirmOnCoolDownDescription": "Show a confirmation dialog on CoolDown",
             "ConfirmOnEmergencyStop": "Require confirm on Emergency Stop",
             "ConfirmOnEmergencyStopDescription": "Show a confirmation dialog on Emergency Stop",
             "ConfirmOnPowerDeviceChange": "Require confirm on Device Power changes",

src/store/gui/index.ts

@@ -156,6 +156,7 @@ export const getDefaultState = (): GuiState => {
             lockSlidersOnTouchDevices: true,
             lockSlidersDelay: 1.5,
             confirmOnEmergencyStop: false,
+            confirmOnCoolDown: false,
             confirmOnPowerDeviceChange: false,
             boolBigThumbnail: true,
             bigThumbnailBackground: defaultBigThumbnailBackground,

src/store/gui/types.ts

@@ -105,6 +105,7 @@ export interface GuiState {
         lockSlidersOnTouchDevices: boolean
         lockSlidersDelay: number
         confirmOnEmergencyStop: boolean
+        confirmOnCoolDown: boolean
         confirmOnPowerDeviceChange: boolean
         boolBigThumbnail: boolean
         bigThumbnailBackground: string