feat(tempgroups): add user-organizable temperature tabs

src/components/TheSettingsMenu.vue

@@ -81,6 +81,7 @@ import SettingsGCodeViewerTab from '@/components/settings/SettingsGCodeViewerTab
 import SettingsEditorTab from '@/components/settings/SettingsEditorTab.vue'
 import SettingsTimelapseTab from '@/components/settings/SettingsTimelapseTab.vue'
 import SettingsNavigationTab from '@/components/settings/SettingsNavigationTab.vue'
+import SettingsTempgroupsTab from '@/components/settings/SettingsTempgroupsTab.vue'
 
 import Panel from '@/components/ui/Panel.vue'
 import {
@@ -101,6 +102,7 @@ import {
     mdiDipSwitch,
     mdiMenu,
     mdiGrid,
+    mdiThermometer,
 } from '@mdi/js'
 import SettingsMiscellaneousTab from '@/components/settings/SettingsMiscellaneousTab.vue'
 import SettingsHeightmapTab from '@/components/settings/SettingsHeightmapTab.vue'
@@ -123,6 +125,7 @@ import SettingsHeightmapTab from '@/components/settings/SettingsHeightmapTab.vue
         SettingsMiscellaneousTab,
         SettingsNavigationTab,
         SettingsHeightmapTab,
+        SettingsTempgroupsTab,
     },
 })
 export default class TheSettingsMenu extends Mixins(BaseMixin) {
@@ -211,6 +214,11 @@ export default class TheSettingsMenu extends Mixins(BaseMixin) {
                 name: 'heightmap',
                 title: this.$t('Settings.HeightmapTab.Heightmap'),
             },
+            {
+                icon: mdiThermometer,
+                name: 'tempgroups',
+                title: this.$t('Settings.TempgroupsTab.TempGroups'),
+            },
         ]
 
         if (this.moonrakerComponents.includes('timelapse')) {

src/components/charts/TempChart.vue

@@ -14,7 +14,7 @@
 <script lang="ts">
 import { convertName } from '@/plugins/helpers'
 import Component from 'vue-class-component'
-import { Mixins, Watch } from 'vue-property-decorator'
+import { Mixins, Prop, Watch } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
 import { PrinterTempHistoryStateSourceEntry } from '@/store/printer/tempHistory/types'
 
@@ -36,6 +36,8 @@ export default class TempChart extends Mixins(BaseMixin, ThemeMixin) {
         tempchart: any
     }
 
+    @Prop({ default: null }) declare readonly sensorFilter: string[] | null
+
     hoverChart = false
     private isVisible = true
     get chartOptions(): ECBasicOption {
@@ -75,7 +77,7 @@ export default class TempChart extends Mixins(BaseMixin, ThemeMixin) {
             dataset: {
                 source: [],
             },
-            series: this.series,
+            series: this.filteredSeries,
         }
     }
 
@@ -219,7 +221,22 @@ export default class TempChart extends Mixins(BaseMixin, ThemeMixin) {
     }
 
     get series() {
-        return this.$store.state.printer.tempHistory.series ?? {}
+        return this.$store.state.printer.tempHistory.series ?? []
+    }
+    get filteredSeries() {
+        const allSeries = this.series
+
+        if (!this.sensorFilter || this.sensorFilter.length === 0) {
+            return allSeries
+        }
+
+        return allSeries.filter((serie: { name: string }) => {
+            const lastDashIndex = serie.name.lastIndexOf('-')
+            if (lastDashIndex === -1) return false
+
+            const sensorName = serie.name.substring(0, lastDashIndex)
+            return this.sensorFilter!.includes(sensorName)
+        })
     }
 
     get source() {

src/components/panels/Temperature/TemperaturePanelList.vue

@@ -22,24 +22,24 @@
                 </thead>
                 <tbody>
                     <temperature-panel-list-item
-                        v-for="objectName in heaterObjects"
+                        v-for="objectName in filteredHeaterObjects"
                         :key="objectName"
                         :object-name="objectName"
                         :input-digits="inputFieldDigits"
                         :is-responsive-mobile="el.is.mobile ?? false" />
                     <temperature-panel-list-item-nevermore
-                        v-for="objectName in nevermoreObjects"
+                        v-for="objectName in filteredNevermoreObjects"
                         :key="objectName"
                         :object-name="objectName"
                         :is-responsive-mobile="el.is.mobile ?? false" />
                     <temperature-panel-list-item
-                        v-for="objectName in temperature_sensors"
+                        v-for="objectName in filteredTemperatureSensors"
                         :key="objectName"
                         :object-name="objectName"
                         :is-responsive-mobile="el.is.mobile ?? false" />
                     <template v-if="!hideMonitors">
                         <temperature-panel-list-item
-                            v-for="objectName in monitors"
+                            v-for="objectName in filteredMonitors"
                             :key="objectName"
                             :object-name="objectName"
                             :is-responsive-mobile="el.is.mobile ?? false" />
@@ -52,14 +52,16 @@
 
 <script lang="ts">
 import Component from 'vue-class-component'
-import { Mixins } from 'vue-property-decorator'
+import { Mixins, Prop } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import TemperaturePanelListItemNevermore from '@/components/panels/Temperature/TemperaturePanelListItemNevermore.vue'
 
 @Component({
     components: { TemperaturePanelListItemNevermore },
 })
 export default class TemperaturePanelList extends Mixins(BaseMixin) {
+    @Prop({ default: null }) declare readonly sensorFilter: string[] | null
+
     get available_heaters() {
         return this.$store.state.printer?.heaters?.available_heaters ?? []
     }
@@ -118,6 +120,26 @@ export default class TemperaturePanelList extends Mixins(BaseMixin) {
         return this.filterNamesAndSort(this.available_nevermores)
     }
 
+    get filteredHeaterObjects(): string[] {
+        if (!this.sensorFilter) return this.heaterObjects
+        return this.heaterObjects.filter((name) => this.sensorFilter!.includes(name))
+    }
+
+    get filteredNevermoreObjects(): string[] {
+        if (!this.sensorFilter) return this.nevermoreObjects
+        return this.nevermoreObjects.filter((name) => this.sensorFilter!.includes(name))
+    }
+
+    get filteredTemperatureSensors(): string[] {
+        if (!this.sensorFilter) return this.temperature_sensors
+        return this.temperature_sensors.filter((name) => this.sensorFilter!.includes(name))
+    }
+
+    get filteredMonitors(): string[] {
+        if (!this.sensorFilter) return this.monitors
+        return this.monitors.filter((name) => this.sensorFilter!.includes(name))
+    }
+
     get settings() {
         return this.$store.state.printer?.configfile?.settings ?? {}
     }

src/components/panels/Temperature/TemperaturePanelTabs.vue

@@ -0,0 +1,73 @@
+<template>
+    <v-tabs v-model="activeTab" show-arrows background-color="transparent" class="temperature-panel-tabs" height="36">
+        <v-tab v-if="showAllTab" :key="'all'" class="text-none">
+            {{ $t('Panels.TemperaturePanel.All') }}
+        </v-tab>
+        <v-tab v-for="group in sortedGroups" :key="group.id" class="text-none">
+            {{ group.name }}
+        </v-tab>
+    </v-tabs>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import { GuiTempgroup } from '@/store/gui/tempgroups/types'
+
+@Component
+export default class TemperaturePanelTabs extends Mixins(BaseMixin) {
+    get activeTab(): number {
+        const activeGroupId = this.$store.state.gui.tempgroups.activeGroupId
+
+        if (this.showAllTab && !activeGroupId) {
+            return 0
+        }
+
+        const groupIndex = this.sortedGroups.findIndex((g) => g.id === activeGroupId)
+
+        if (this.showAllTab) {
+            return groupIndex !== -1 ? groupIndex + 1 : 0
+        }
+
+        return groupIndex !== -1 ? groupIndex : 0
+    }
+
+    set activeTab(index: number) {
+        if (this.showAllTab && index === 0) {
+            this.$store.dispatch('gui/tempgroups/setActiveGroup', null)
+            return
+        }
+
+        const groupIndex = this.showAllTab ? index - 1 : index
+
+        const group = this.sortedGroups[groupIndex]
+        if (group) {
+            this.$store.dispatch('gui/tempgroups/setActiveGroup', group.id)
+        }
+    }
+
+    get showAllTab(): boolean {
+        return this.$store.state.gui.tempgroups.showAllTab ?? true
+    }
+
+    get sortedGroups(): GuiTempgroup[] {
+        return this.$store.getters['gui/tempgroups/getSortedGroups'] ?? []
+    }
+}
+</script>
+
+<style scoped>
+.temperature-panel-tabs {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.theme--light .temperature-panel-tabs {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.temperature-panel-tabs ::v-deep .v-slide-group__prev,
+.temperature-panel-tabs ::v-deep .v-slide-group__next {
+    min-width: 32px;
+}
+</style>

src/components/panels/TemperaturePanel.vue

@@ -10,10 +10,11 @@
             <temperature-panel-settings />
         </template>
         <v-card-text class="pa-0">
-            <temperature-panel-list />
+            <temperature-panel-tabs v-if="shouldShowTabs" />
+            <temperature-panel-list :sensor-filter="sensorFilter" />
             <template v-if="boolTempchart">
                 <v-divider class="my-0" />
-                <temp-chart />
+                <temp-chart :sensor-filter="sensorFilter" />
             </template>
         </v-card-text>
     </panel>
@@ -31,9 +32,10 @@ import Panel from '@/components/ui/Panel.vue'
 import Responsive from '@/components/ui/Responsive.vue'
 import { mdiCloseThick, mdiThermometerLines } from '@mdi/js'
 import TemperaturePanelPresets from '@/components/panels/Temperature/TemperaturePanelPresets.vue'
+import TemperaturePanelTabs from '@/components/panels/Temperature/TemperaturePanelTabs.vue'
 
 @Component({
-    components: { Panel, TempChart, TemperatureInput, Responsive, TemperaturePanelPresets },
+    components: { Panel, TempChart, TemperatureInput, Responsive, TemperaturePanelPresets, TemperaturePanelTabs },
 })
 export default class TemperaturePanel extends Mixins(BaseMixin, ControlMixin) {
     mdiCloseThick = mdiCloseThick
@@ -45,5 +47,13 @@ export default class TemperaturePanel extends Mixins(BaseMixin, ControlMixin) {
     get boolTempchart(): boolean {
         return this.$store.state.gui.view.tempchart.boolTempchart ?? false
     }
+
+    get shouldShowTabs(): boolean {
+        return this.$store.getters['gui/tempgroups/shouldShowTabs'] ?? false
+    }
+
+    get sensorFilter(): string[] | null {
+        return this.$store.getters['gui/tempgroups/getActiveSensorFilter'] ?? null
+    }
 }
 </script>