feat(Temperatures): add menu to open Settings & turn off heaters

src/components/panels/Temperature/TemperaturePanelListItem.vue

@@ -1,12 +1,12 @@
 <template>
-    <tr>
+    <tr v-longpress:600="(e) => openContextMenu(e)" @contextmenu.prevent="openContextMenu($event)">
         <td class="icon">
-            <v-icon :color="iconColor" :class="iconClass" tabindex="-1" @click="showEditDialog = true">
+            <v-icon :color="iconColor" :class="iconClass" tabindex="-1" @click="openEditDialog">
                 {{ icon }}
             </v-icon>
         </td>
         <td class="name">
-            <span class="cursor-pointer" @click="showEditDialog = true">{{ formatName }}</span>
+            <span class="cursor-pointer" @click="openEditDialog">{{ formatName }}</span>
         </td>
         <td v-if="!isResponsiveMobile" class="state">
             <v-tooltip v-if="state !== null" top>
@@ -57,6 +57,18 @@
             :icon="icon"
             :color="color"
             @close-dialog="showEditDialog = false" />
+        <v-menu v-model="showContextMenu" :position-x="contextMenuX" :position-y="contextMenuY" absolute offset-y>
+            <v-list>
+                <v-list-item v-if="isHeater" :disabled="!isHeaterActive" @click="turnOffHeater">
+                    <v-icon left>{{ mdiSnowflake }}</v-icon>
+                    {{ $t('Panels.TemperaturePanel.TurnHeaterOff') }}
+                </v-list-item>
+                <v-list-item @click="openEditDialog">
+                    <v-icon left>{{ mdiCog }}</v-icon>
+                    {{ $t('Panels.TemperaturePanel.Settings') }}
+                </v-list-item>
+            </v-list>
+        </v-menu>
     </tr>
 </template>
 
@@ -66,23 +78,32 @@ import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { convertName } from '@/plugins/helpers'
 import {
+    mdiCog,
     mdiFan,
     mdiFire,
     mdiMemory,
     mdiPrinter3dNozzle,
     mdiPrinter3dNozzleAlert,
     mdiRadiator,
     mdiRadiatorDisabled,
+    mdiSnowflake,
     mdiThermometer,
 } from '@mdi/js'
 import { additionalSensors, opacityHeaterActive, opacityHeaterInactive } from '@/store/variables'
+import { CLOSE_TEMPERATURE_CONTEXT_MENU, EventBus } from '@/plugins/eventBus'
 
 @Component
 export default class TemperaturePanelListItem extends Mixins(BaseMixin) {
+    mdiCog = mdiCog
+    mdiSnowflake = mdiSnowflake
+
     @Prop({ type: String, required: true }) readonly objectName!: string
     @Prop({ type: Boolean, required: true }) readonly isResponsiveMobile!: boolean
 
     showEditDialog = false
+    showContextMenu = false
+    contextMenuX = 0
+    contextMenuY = 0
 
     get printerObject() {
         if (!(this.objectName in this.$store.state.printer)) return {}
@@ -270,6 +291,49 @@ export default class TemperaturePanelListItem extends Mixins(BaseMixin) {
 
         return ''
     }
+
+    get availableHeaters() {
+        return this.$store.state.printer.heaters?.available_heaters ?? []
+    }
+
+    get isHeater() {
+        return this.availableHeaters.includes(this.objectName)
+    }
+
+    get isHeaterActive() {
+        return this.target > 0
+    }
+
+    mounted() {
+        EventBus.$on(CLOSE_TEMPERATURE_CONTEXT_MENU, this.closeContextMenu)
+    }
+
+    beforeDestroy() {
+        EventBus.$off(CLOSE_TEMPERATURE_CONTEXT_MENU, this.closeContextMenu)
+    }
+
+    openContextMenu(event: MouseEvent) {
+        EventBus.$emit(CLOSE_TEMPERATURE_CONTEXT_MENU)
+
+        this.showContextMenu = true
+        this.contextMenuX = event?.clientX || event?.pageX || window.screenX / 2
+        this.contextMenuY = event?.clientY || event?.pageY || window.screenY / 2
+    }
+
+    closeContextMenu() {
+        this.showContextMenu = false
+    }
+
+    openEditDialog() {
+        this.closeContextMenu()
+        this.showEditDialog = true
+    }
+
+    turnOffHeater() {
+        const gcode = `SET_HEATER_TEMPERATURE HEATER=${this.name} TARGET=0`
+        this.$store.dispatch('server/addEvent', { message: gcode, type: 'command' })
+        this.$socket.emit('printer.gcode.script', { script: gcode })
+    }
 }
 </script>
 

src/locales/en.json

@@ -799,6 +799,7 @@
             "Min": "min",
             "Name": "Name",
             "Presets": "Presets",
+            "Settings": "Settings",
             "SetupTemperatures": "Setup Temperatures",
             "ShowChart": "Show Chart",
             "ShowNameInChart": "Show {name} in chart",
@@ -807,7 +808,8 @@
             "Target": "Target",
             "TemperaturesInChart": "Temperature [°C]",
             "TempTooHigh": "Temperature too high for {name}! (max: {max})",
-            "TempTooLow": "Temperature too low for {name}! (min: {min})"
+            "TempTooLow": "Temperature too low for {name}! (min: {min})",
+            "TurnHeaterOff": "Turn Heater Off"
         },
         "ToolheadControlPanel": {
             "Absolute": "absolute",

src/plugins/eventBus.ts

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+export const EventBus = new Vue()
+
+export const CLOSE_TEMPERATURE_CONTEXT_MENU = 'close-temperature-context-menu'