feat: add nevermore to temperature panel

src/components/panels/Temperature/TemperaturePanelList.vue

@@ -22,7 +22,15 @@
                 </thead>
                 <tbody>
                     <temperature-panel-list-item
-                        v-for="objectName in tempObjects"
+                        v-for="objectName in heaterObjects"
+                        :key="objectName"
+                        :object-name="objectName"
+                        :is-responsive-mobile="el.is.mobile ?? false" />
+                    <temperature-panel-list-item-nevermore
+                        v-if="existsNevermoreFilter"
+                        :is-responsive-mobile="el.is.mobile ?? false" />
+                    <temperature-panel-list-item
+                        v-for="objectName in temperature_sensors"
                         :key="objectName"
                         :object-name="objectName"
                         :is-responsive-mobile="el.is.mobile ?? false" />
@@ -36,8 +44,11 @@
 import Component from 'vue-class-component'
 import { Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
+import TemperaturePanelListItemNevermore from '@/components/panels/Temperature/TemperaturePanelListItemNevermore.vue'
 
-@Component
+@Component({
+    components: { TemperaturePanelListItemNevermore },
+})
 export default class TemperaturePanelList extends Mixins(BaseMixin) {
     get available_heaters() {
         return this.$store.state.printer?.heaters?.available_heaters ?? []
@@ -65,6 +76,10 @@ export default class TemperaturePanelList extends Mixins(BaseMixin) {
             .sort(this.sortObjectName)
     }
 
+    get existsNevermoreFilter() {
+        return 'nevermore' in this.$store.state.printer
+    }
+
     get hideMcuHostSensors(): boolean {
         return this.$store.state.gui.view.tempchart.hideMcuHostSensors ?? false
     }
@@ -87,8 +102,8 @@ export default class TemperaturePanelList extends Mixins(BaseMixin) {
             .sort(this.sortObjectName)
     }
 
-    get tempObjects() {
-        return [...this.filteredHeaters, ...this.temperature_fans, ...this.temperature_sensors]
+    get heaterObjects() {
+        return [...this.filteredHeaters, ...this.temperature_fans]
     }
 
     get settings() {

src/components/panels/Temperature/TemperaturePanelListItemEdit.vue

@@ -67,6 +67,7 @@ export default class TemperaturePanelListItemEdit extends Mixins(BaseMixin) {
 
     get additionalValues() {
         if (this.objectName === 'z_thermal_adjust') return ['current_z_adjust']
+        if (this.objectName === 'nevermore') return ['temperature', 'pressure', 'humidity', 'rpm']
 
         return Object.keys(this.printerObjectAdditionalSensor).filter((key) => key !== 'temperature')
     }

src/components/panels/Temperature/TemperaturePanelListItemNevermore.vue

@@ -0,0 +1,110 @@
+<template>
+    <tr>
+        <td class="icon">
+            <v-icon :color="iconColor" :class="iconClass" tabindex="-1" @click="showEditDialog = true">
+                {{ mdiFan }}
+            </v-icon>
+        </td>
+        <td class="name">
+            <span class="cursor-pointer" @click="showEditDialog = true">Nevermore</span>
+        </td>
+        <td class="text-no-wrap text-center" colspan="3">
+            <temperature-panel-list-item-nevermore-value
+                :printer-object="printerObject"
+                :small="false"
+                object-name="nevermore"
+                key-name="gas" />
+            <temperature-panel-list-item-nevermore-value
+                v-for="keyName in nevermoreValues"
+                :key="keyName"
+                :printer-object="printerObject"
+                object-name="nevermore"
+                :key-name="keyName" />
+            <div v-if="rpm !== null">
+                <small :class="rpmClass">{{ rpm }} RPM</small>
+            </div>
+        </td>
+        <temperature-panel-list-item-edit
+            :bool-show="showEditDialog"
+            object-name="nevermore"
+            name="nevermore"
+            format-name="Nevermore"
+            additional-sensor-name="nevermore"
+            :icon="mdiFan"
+            :color="color"
+            @close-dialog="showEditDialog = false" />
+    </tr>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { mdiFan } from '@mdi/js'
+import { opacityHeaterActive, opacityHeaterInactive } from '@/store/variables'
+
+@Component
+export default class TemperaturePanelListItemNevermore extends Mixins(BaseMixin) {
+    mdiFan = mdiFan
+
+    @Prop({ type: Boolean, required: true }) readonly isResponsiveMobile!: boolean
+
+    showEditDialog = false
+    nevermoreValues = ['temperature', 'pressure', 'humidity']
+
+    get printerObject() {
+        return this.$store.state.printer.nevermore ?? {}
+    }
+
+    get color() {
+        return this.$store.state.gui?.view?.tempchart?.datasetSettings?.nevermore?.color ?? '#ffffff'
+    }
+
+    get iconColor() {
+        // set icon color to active, if no target exists (temperature_sensors) or a heater is active
+        if (this.state === null || this.state > 0) return `${this.color}${opacityHeaterActive}`
+
+        return `${this.color}${opacityHeaterInactive}`
+    }
+
+    get iconClass() {
+        const classes = ['_no-focus-style', 'cursor-pointer']
+
+        // add icon animation, when it is a fan and state > 0
+        const disableFanAnimation = this.$store.state.gui?.uiSettings.disableFanAnimation ?? false
+
+        if (!disableFanAnimation && (this.state ?? 0) > 0) classes.push('icon-rotate')
+
+        return classes
+    }
+
+    get state(): number | null {
+        return this.printerObject.speed ?? null
+    }
+
+    get rpm() {
+        const rpm = this.printerObject.rpm ?? null
+
+        // return null when rpm doesn't exist
+        if (rpm === null) return null
+
+        return parseInt(this.printerObject.rpm)
+    }
+
+    get rpmClass() {
+        if (this.rpm === 0 && (this.printerObject.speed ?? 0) > 0) return 'red--text'
+
+        return ''
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .v-icon._no-focus-style:focus::after {
+    opacity: 0 !important;
+}
+
+::v-deep .cursor-pointer {
+    cursor: pointer;
+}
+</style>

src/components/panels/Temperature/TemperaturePanelListItemNevermoreValue.vue

@@ -0,0 +1,141 @@
+<template>
+    <div v-if="isVisible">
+        <v-tooltip top :disabled="disableTooltip">
+            <template #activator="{ on, attrs }">
+                <span :style="cssStyle" v-bind="attrs" v-on="on">{{ formatValue }}</span>
+            </template>
+            <span>
+                {{ $t('Panels.TemperaturePanel.Max') }}: {{ formatValue_max }}
+                <br />
+                {{ $t('Panels.TemperaturePanel.Min') }}: {{ formatValue_min }}
+            </span>
+        </v-tooltip>
+    </div>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins, Prop } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+
+@Component
+export default class TemperaturePanelListItemNevermoreValue extends Mixins(BaseMixin) {
+    @Prop({ type: Object, required: true }) readonly printerObject!: { [key: string]: number }
+    @Prop({ type: String, required: true }) readonly objectName!: string
+    @Prop({ type: String, required: true }) readonly keyName!: string
+    @Prop({ type: Boolean, required: false, default: true }) readonly small!: boolean
+
+    get cssStyle() {
+        let style = { cursor: 'default', fontSize: '1em' }
+        if (this.small) style.fontSize = '0.8em'
+
+        return style
+    }
+
+    get value() {
+        const value = this.printerObject[this.keyName] ?? null
+        if (isNaN(value)) return null
+
+        return value
+    }
+
+    get intake_value(): number | null {
+        const name = `intake_${this.keyName}`
+
+        return this.printerObject[name] ?? null
+    }
+
+    get intake_value_min(): number | null {
+        const name = `intake_${this.keyName}_min`
+
+        return this.printerObject[name] ?? null
+    }
+
+    get intake_value_max(): number | null {
+        const name = `intake_${this.keyName}_max`
+
+        return this.printerObject[name] ?? null
+    }
+
+    get exhaust_value(): number | null {
+        const name = `exhaust_${this.keyName}`
+
+        return this.printerObject[name] ?? null
+    }
+
+    get exhaust_value_min(): number | null {
+        const name = `exhaust_${this.keyName}_min`
+
+        return this.printerObject[name] ?? null
+    }
+
+    get exhaust_value_max(): number | null {
+        const name = `exhaust_${this.keyName}_max`
+
+        return this.printerObject[name] ?? null
+    }
+
+    get unit(): string | null {
+        switch (this.keyName) {
+            case 'temperature':
+                return '°C'
+            case 'pressure':
+                return 'hPa'
+            case 'humidity':
+                return '%'
+        }
+
+        return null
+    }
+
+    get digits() {
+        return ['gas', 'pressure'].includes(this.keyName) ? 0 : 1
+    }
+
+    get formatValue() {
+        return this.getFormatedValue(this.intake_value, this.exhaust_value)
+    }
+
+    get formatValue_min() {
+        return this.getFormatedValue(this.intake_value_min, this.exhaust_value_min)
+    }
+
+    get formatValue_max() {
+        return this.getFormatedValue(this.intake_value_max, this.exhaust_value_max)
+    }
+
+    getFormatedValue(intake: number | null, exhaust: number | null): string {
+        let intake_value = intake?.toFixed(this.digits)
+        let exhaust_value = exhaust?.toFixed(this.digits)
+        if (this.intake_value === null) intake_value = '--'
+        if (this.exhaust_value === null) exhaust_value = '--'
+
+        // return only the value, if unit is null
+        if (this.unit === null) return `${intake_value} > ${exhaust_value}`
+
+        return `${intake_value} ${this.unit} > ${exhaust_value} ${this.unit}`
+    }
+
+    get disableTooltip() {
+        return (
+            this.intake_value_min === null ||
+            this.exhaust_value_min === null ||
+            this.intake_value_max === null ||
+            this.exhaust_value_max === null
+        )
+    }
+
+    get guiSetting() {
+        return this.$store.getters['gui/getDatasetAdditionalSensorValue']({
+            name: this.objectName,
+            sensor: this.keyName,
+        })
+    }
+
+    get isVisible() {
+        if (this.intake_value === null && this.exhaust_value === null) return false
+
+        return this.guiSetting
+    }
+}
+</script>