Colors theme: fix consumer display issues

packages/modules/web_themes/colors/source/src/assets/js/processMessages.ts

@@ -32,6 +32,7 @@ import {
 import { mqttClientId } from './mqttClient'
 import { add } from '@/components/mqttViewer/model'
 import { globalConfig } from './themeConfig'
+import { addConsumer } from '@/components/consumerList/model'
 
 const topicsToSubscribe = [
 	'openWB/counter/#',
@@ -159,6 +160,9 @@ function processHierarchy(hierarchy: Hierarchy) {
 		case 'inverter':
 			addPvSystem(hierarchy.id)
 			break
+		case 'consumer':
+			addConsumer(hierarchy.id)
+			break
 		default:
 		// console.warn('Ignored Hierarchy type: ' + hierarchy.type)
 	}

packages/modules/web_themes/colors/source/src/assets/js/sendMessages.ts

@@ -12,8 +12,7 @@ const topics: { [topic: string]: string } = {
 	chargeMode:
 		'openWB/set/vehicle/template/charge_template/%/chargemode/selected',
 	cpPriority: 'openWB/set/vehicle/template/charge_template/%/prio',
-	pvBatteryPriority:
-		'openWB/set/general/chargemode_config/bat/mode',
+	pvBatteryPriority: 'openWB/set/general/chargemode_config/bat/mode',
 	cpVehicle: 'openWB/set/chargepoint/%/config/ev',
 	cpInstantChargeLimitMode:
 		'openWB/set/vehicle/template/charge_template/%/chargemode/instant_charging/limit/selected',

packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerList.vue

@@ -1,9 +1,18 @@
 <template>
-	<WbWidgetFlex :variable-width="true">
+	<WbWidgetFlex v-if="!configmode" :variable-width="true">
 		<template #title>
 			<span class="fa-solid fa-lightbulb">&nbsp;</span>
 			Verbraucher
 		</template>
+		<template #buttons>
+			<span
+				type="button"
+				class="ms-2 ps-1 pt-1"
+				@click="configmode = !configmode"
+			>
+				<span class="fa-solid fa-lg ps-1 fa-ellipsis-vertical" />
+			</span>
+		</template>
 		<div class="subgrid" v-for="[index, dev] in consumers">
 			<ConsumerDevice
 				v-if="dev.showInList"
@@ -12,12 +21,25 @@
 			/>
 		</div>
 	</WbWidgetFlex>
+	<WbWidgetFlex v-else :variable-width="true">
+		<template #title> Anzeige der Verbraucher </template>
+		<template #buttons>
+			<span class="ms-2 pt-1" @click="configmode = !configmode">
+				<span class="fa-solid fa-lg ps-1 fa-circle-check" />
+			</span>
+		</template>
+		<ConsumerSettings />
+	</WbWidgetFlex>
 </template>
 
 <script setup lang="ts">
 import { type Consumer, consumers } from './model.ts'
 import WbWidgetFlex from '@/components/shared/WbWidgetFlex.vue'
 import ConsumerDevice from './ConsumerDevice.vue'
+import ConsumerSettings from './ConsumerSettings.vue'
+import { ref } from 'vue'
+
+const configmode = ref(false)
 </script>
 
 <style scoped>

packages/modules/web_themes/colors/source/src/components/consumerList/ConsumerSettings.vue

@@ -0,0 +1,30 @@
+<template>
+	<div class="d-flex flex-column">
+		<span class="settingstitle mb-3"
+			>Verbraucher in den Diagrammen anzeigen:</span
+		>
+		<div v-for="(element, idx) in consumers.values()" :key="idx">
+			<input
+				:id="'check' + idx"
+				v-model="element.showInGraph"
+				class="form-check-input mb-3"
+				type="checkbox"
+				:value="element"
+			/>
+			<label class="form-check-label px-2" :for="'check' + idx">{{
+				element.name
+			}}</label>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { consumers } from '../consumerList/model'
+</script>
+
+<style scoped>
+.settingstitle {
+	font-weight: bold;
+	font-size: var(--font-settings-title);
+}
+</style>

packages/modules/web_themes/colors/source/src/components/consumerList/model.ts

@@ -40,7 +40,7 @@ export class Consumer implements PowerItem {
 	}
 	set showInGraph(val: boolean) {
 		this._showInGraph = val
-		registry.items.get('sh' + this.id)!.showInGraph = val
+		registry.items.get('consumer' + this.id)!.showInGraph = val
 		savePrefs()
 	}
 	setShowInGraph(val: boolean) {
@@ -51,12 +51,20 @@ export class Consumer implements PowerItem {
 export const consumers = reactive(new Map<number, Consumer>())
 
 export function addConsumer(index: number, showInList = true) {
+	const consumerColorCount = 5
 	if (!consumers.has(index)) {
 		consumers.set(index, new Consumer(index, showInList))
 		const dev = consumers.get(index)!
-		dev.color = 'var(--color-consumer' + consumers.size + ')'
+		dev.color =
+			'var(--color-consumer' +
+			(((consumers.size - 1) % consumerColorCount) + 1) +
+			')'
 		// console.log('Added consumer with index ' + index + ' and color ' + dev.color)
 	} else {
 		console.warn('Consumer with index ' + index + ' already exists.')
 	}
 }
+
+export function resetConsumers() {
+	consumers.clear()
+}

packages/modules/web_themes/colors/source/src/components/consumerList/processMessages.ts

@@ -4,7 +4,6 @@ import { updateShSummary } from '../smartHome/processMessages'
 
 // Process incoming messages for consumers based on the topic
 export function processConsumerMessages(topic: string, message: string) {
-	// console.debug('Consumer: Received message on topic ' + topic + ': ' + message)
 	if (topic.match(/^openWB\/consumer\/config\//i)) {
 		processConsumerConfigMessages(topic, message)
 	} else if (topic.match(/^openWB\/consumer\/[0-9]+\//i)) {
@@ -22,7 +21,7 @@ function processConsumerDeviceMessages(topic: string, message: string) {
 		return
 	}
 	if (!consumers.has(index)) {
-		addConsumer(index)
+		console.warn('Invalid consumer id received: ' + index)
 	}
 	const dev = consumers.get(index)!
 	if (topic.match(/^openWB\/consumer\/[0-9]+\/get\/power$/i)) {
@@ -56,7 +55,7 @@ function processConsumerConfigMessages(topic: string, message: string) {
 	}
 	if (!consumers.has(index)) {
 		console.warn('Invalid device id received: ' + index)
-		addConsumer(index)
+		// addConsumer(index)
 	}
 	const dev = consumers.get(index)!
 	if (