Colors Theme: Fixes and extensions for consumers

packages/modules/web_themes/colors/source/package.json

@@ -18,8 +18,9 @@
     "bootstrap": "^5.3.8",
     "d3": "^7.9.0",
     "mqtt": "^5.16.0",
+    "pinia": "^4.0.3",
     "process": "^0.11.10",
-    "swiper": "^14.2.0",
+    "swiper": "^14.3.0",
     "vue": "^3.5.43"
   },
   "devDependencies": {
@@ -36,20 +37,19 @@
     "@types/node": "^20.19.43",
     "@typescript-eslint/eslint-plugin": "^8.57.1",
     "@typescript-eslint/parser": "^8.57.1",
-    "@vitejs/plugin-vue": "^6.0.9",
+    "@vitejs/plugin-vue": "^6.0.10",
     "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.9.0",
     "@vue/tsconfig": "^0.9.1",
     "esbuild": "^0.28.2",
-    "eslint": "10.11",
+    "eslint": "^10.12.0",
     "eslint-plugin-vue": "^10.11.1",
     "npm-run-all2": "^9.0.3",
-    "prettier": "^3.9.9",
+    "prettier": "^3.9.10",
     "rollup-plugin-polyfill-node": "^0.13.0",
     "typescript": "^6.0.3",
-    "vite": "^8.3.1",
-    "vite-plugin-node-polyfills": "^0.28.0",
-    "vue-tsc": "^3.3.11"
+    "vite": "^8.3.4",
+    "vite-plugin-node-polyfills": "^0.2.0",
+    "vue-tsc": "^3.3.13"
   },
   "allowScripts": {
     "esbuild@0.28.2": true

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

@@ -1,5 +1,5 @@
 import { mqttRegister, mqttSubscribe, mqttUnsubscribe } from './mqttClient'
-import { PvSystem, type Hierarchy } from './types'
+import { PvSystem, type Hierarchy, type Priority } from './types'
 import { addPvSystem, registry, globalData, pvSystems } from './model'
 import { processLiveGraphMessages } from '../../components/powerGraph/processLiveGraphData'
 import { processDayGraphMessages } from '../../components/powerGraph/processDayGraphData'
@@ -11,6 +11,7 @@ import { processEtProviderMessages } from '@/components/priceChart/processMessag
 import {
 	addChargePoint,
 	resetChargePoints,
+	vehicles,
 } from '@/components/chargePointList/model'
 import {
 	addBattery,
@@ -32,7 +33,7 @@ import {
 import { mqttClientId } from './mqttClient'
 import { add } from '@/components/mqttViewer/model'
 import { globalConfig } from './themeConfig'
-import { addConsumer } from '@/components/consumerList/model'
+import { addConsumer, consumers } from '@/components/consumerList/model'
 
 const topicsToSubscribe = [
 	'openWB/counter/#',
@@ -122,6 +123,20 @@ function processCounterMessages(topic: string, message: string) {
 		}
 	}
 }
+const sample_loadmanagement_prios = [
+	{ type: 'vehicle', id: 2 },
+	{ type: 'vehicle', id: 3 },
+	{
+		type: 'group',
+		children: [
+			{ type: 'vehicle', id: 0 },
+			{ type: 'vehicle', id: 1 },
+		],
+	},
+	{ type: 'consumer', id: 11 },
+	{ type: 'consumer', id: 12 },
+]
+
 function processGlobalCounterMessages(topic: string, message: string) {
 	if (topic.match(/^openwb\/counter\/get\/hierarchy$/i)) {
 		const hierarchy = JSON.parse(message)
@@ -131,6 +146,13 @@ function processGlobalCounterMessages(topic: string, message: string) {
 			globalData.evuId = hierarchy[0].id
 			processHierarchy(hierarchy[0])
 		}
+	} else if (topic.match(/^openwb\/counter\/get\/loadmanagement_prios$/i)) {
+		const prios = JSON.parse(message)
+		if (prios.length) {
+			for (const prio of prios) {
+				assignPriority(prio, prios.indexOf(prio) + 1)
+			}
+		}
 	} else if (topic.match(/^openwb\/counter\/set\/home_consumption$/i)) {
 		registry.setPower('house', +message)
 		// correctHouseConsumption()
@@ -170,7 +192,29 @@ function processHierarchy(hierarchy: Hierarchy) {
 	// recursively process the hierarchy
 	hierarchy.children.forEach((element) => processHierarchy(element))
 }
-
+function assignPriority(target: Priority, priority: number) {
+	switch (target.type) {
+		case 'vehicle':
+			globalConfig.priorities.set(target.id, priority)
+			if (vehicles[target.id]) {
+				vehicles[target.id].priority = priority
+			}
+			break
+		case 'consumer':
+			globalConfig.priorities.set(target.id, priority)
+			if (consumers.has(target.id)) {
+				consumers.get(target.id)!.priority = priority
+			}
+			break
+		case 'group':
+			if (target.children) {
+				target.children.forEach((child) => assignPriority(child, priority))
+			}
+			break
+		default:
+			console.warn('Ignored Priority type: ' + target.type)
+	}
+}
 function processPvMessages(topic: string, message: string) {
 	const index = getIndex(topic)
 	if (index && !pvSystems.value.has(index)) {

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

@@ -101,3 +101,10 @@ export function updateChargeTemplate(cp: number) {
 		JSON.stringify(chargePoints[cp].chargeTemplate),
 	)
 }
+
+export function updateConsumerUsage(consumerId: number, usage: object) {
+	mqttPublish(
+		'openWB/set/consumer/' + consumerId + '/usage',
+		JSON.stringify(usage),
+	)
+}

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

@@ -48,6 +48,7 @@ export class Config {
 	zoomGraph = false
 	zoomedWidget = 1
 	countersToShow: number[] = []
+	priorities: Map<number, number> = new Map()
 	constructor() {}
 	get showRelativeArcs() {
 		return this._showRelativeArcs

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

@@ -38,6 +38,11 @@ export interface Hierarchy {
 	type: string
 	children: [Hierarchy]
 }
+export interface Priority {
+	type: string
+	id: number
+	children?: [Priority]
+}
 export enum ChargeMode {
 	instant_charging = 'instant_charging',
 	pv_charging = 'pv_charging',

packages/modules/web_themes/colors/source/src/components/chargePointList/VehicleData.vue

@@ -17,23 +17,28 @@
 				class="me-0 fa-solid fa-xs fa-clock ps-1"
 			/>
 		</h3>
-		<WbBadge v-if="chargepoint.isSocConfigured" :bgcolor="batcolor">
-			<BatterySymbol :soc="soc ?? 0" color="var(--color-bg)" class="me-2" />
-			<i
-				v-if="chargepoint.isSocManual"
-				class="fa-solid fa-sm fas fa-edit"
-				:style="{ color: 'var(--color-bg)' }"
-				@click="toggleSocEditor()"
-			/>
+		<div class="d-flex align-items-center">
+			<WbBadge v-if="chargepoint.priority > 0" bgcolor="var(--color-menu)"
+				>Prio: {{ chargepoint.priority }}
+			</WbBadge>
+			<WbBadge v-if="chargepoint.isSocConfigured" :bgcolor="batcolor">
+				<BatterySymbol :soc="soc ?? 0" color="var(--color-bg)" class="me-2" />
+				<i
+					v-if="chargepoint.isSocManual"
+					class="fa-solid fa-sm fas fa-edit"
+					:style="{ color: 'var(--color-bg)' }"
+					@click="toggleSocEditor()"
+				/>
 
-			<i
-				v-if="!chargepoint.isSocManual"
-				type="button"
-				class="fa-solid fa-sm"
-				:class="chargepoint.waitingForSoc ? 'fa-spinner fa-spin' : 'fa-sync'"
-				@click="loadSoc"
-			/>
-		</WbBadge>
+				<i
+					v-if="!chargepoint.isSocManual"
+					type="button"
+					class="fa-solid fa-sm"
+					:class="chargepoint.waitingForSoc ? 'fa-spinner fa-spin' : 'fa-sync'"
+					@click="loadSoc"
+				/>
+			</WbBadge>
+		</div>
 	</div>
 	<div v-if="changeCar" class="carSelector p-4 m-2">
 		<span class="changeCarTitle mb-2">Fahrzeug wechseln:</span>
@@ -51,13 +56,14 @@
 			v-model="chargeMode"
 			class="chargemodes mt-3 mb-3"
 			:options="
-				Object.keys(chargemodes).map((v) => {
+				Object.entries(chargemodes).map((e) => {
+					const [k, v] = e
 					return {
-						text: chargemodes[v].name,
-						value: v,
-						color: chargemodes[v].color,
-						icon: chargemodes[v].icon,
-						active: chargemodes[v].mode == chargepoint.chargeMode,
+						text: v.name,
+						value: k,
+						color: v.color,
+						icon: v.icon,
+						active: v.mode == chargepoint.chargeMode,
 					}
 				})
 			"
@@ -273,36 +279,45 @@ function toggleSocEditor() {
 .fa-star {
 	color: var(--color-evu);
 }
+
 .fa-clock {
 	color: var(--color-charging);
 }
+
 .fa-car {
 	color: var(--color-menu);
 }
+
 .fa-circle-check {
 	color: var(--color-menu);
 }
+
 .socEditor {
 	border: 1px solid var(--color-menu);
 	justify-self: stretch;
 }
+
 .priceEditor {
 	border: 1px solid var(--color-menu);
 	justify-self: stretch;
 }
+
 .chargemodes {
 	grid-column: 1 / 13;
 	justify-self: center;
 }
+
 .chargeinfo {
 	display: grid;
 	grid-template-columns: repeat(12, auto);
 	justify-content: space-between;
 }
+
 .divider {
 	border-top: 1px solid var(--color-fg);
 	width: 100%;
 }
+
 .carSelector {
 	border: 1px solid var(--color-menu);
 	font-size: var(--font-settings);

packages/modules/web_themes/colors/source/src/components/chargePointList/compactList/CompactListItem.vue

@@ -15,6 +15,12 @@
 		</template>
 		<template #buttons>
 			<div class="d-flex float-right justify-content-end align-items-center">
+				<span
+					v-if="chargepoint.priority > 0"
+					class="badge rounded-pill priobadge mx-2"
+					bgcolor="var(--color-menu)"
+					>Prio: {{ chargepoint.priority }}
+				</span>
 				<span
 					class="badge rounded-pill modebadge mx-2"
 					type="button"
@@ -143,6 +149,7 @@ import { updateServer } from '@/assets/js/sendMessages'
 import ModalComponent from '@/components/shared/ModalComponent.vue'
 import WbSubwidget from '@/components/shared/WbSubwidget.vue'
 import InfoItem from '@/components/shared/InfoItem.vue'
+import WbBadge from '@/components/shared/WbBadge.vue'
 const props = defineProps<{
 	chargepoint: ChargePoint
 }>()
@@ -348,6 +355,11 @@ const chargeLimitsString = computed(() => {
 .modebadge {
 	color: var(--color-bg);
 }
+.priobadge {
+	color: var(--color-bg);
+	background-color: var(--color-menu);
+	font-size: var(--font-verysmall);
+}
 .cpname {
 	font-size: var(--font-small);
 }

packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/ConfigGeneral.vue

@@ -13,11 +13,11 @@
 			v-model="cp.chargeMode"
 			:columns="3"
 			:options="
-				Object.keys(chargemodes).map((v) => [
-					chargemodes[v].name,
-					v,
-					chargemodes[v].color,
-					chargemodes[v].icon,
+				Object.entries(chargemodes).map(([key, value]) => [
+					value.name,
+					key,
+					value.color,
+					value.icon,
 				])
 			"
 		/>

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

@@ -366,6 +366,9 @@ export class ChargePoint implements PowerItem {
 				return 0
 		}
 	}
+	get priority() {
+		return vehicles[this.connectedVehicle]?.priority ?? 0
+	}
 }
 export class Vehicle {
 	id: number
@@ -374,6 +377,7 @@ export class Vehicle {
 	config = {}
 	soc = 0
 	range = 0
+	priority = 0
 	constructor(index: number) {
 		this.id = index
 	}

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

@@ -11,6 +11,7 @@ import type {
 	EvTemplate,
 	ChargeTemplate,
 } from './model'
+import { globalConfig } from '@/assets/js/themeConfig'
 
 export function processChargepointMessages(topic: string, message: string) {
 	const index = getIndex(topic)
@@ -124,6 +125,7 @@ export function processVehicleMessages(topic: string, message: string) {
 		if (!(index in vehicles)) {
 			const v = new Vehicle(index)
 			vehicles[index] = v
+			v.priority = globalConfig.priorities.get(index) ?? 0
 			// console.info('New vehicle created: ' + index)
 		}
 		if (topic.match(/^openwb\/vehicle\/[0-9]+\/name$/i)) {