From e02d0ba41a385497d35f82daa06012ac5703be9b Mon Sep 17 00:00:00 2001
From: Claus Hagen <cshagen@hagens.ch>
Date: Sun, 19 Jan 2025 08:17:07 +0100
Subject: [PATCH 1/2] fix house consumption display in powergraph

---
 .../colors/source/src/assets/js/model.ts      |   5 -
 .../source/src/assets/js/processMessages.ts   |   8 +-
 .../source/src/assets/js/themeConfig.ts       |   2 +-
 .../components/chargePointList/CPVehicle.vue  | 141 +++++++++---------
 .../components/energyMeter/EnergyMeter.vue    |   6 +-
 .../source/src/components/powerGraph/model.ts |   6 +-
 .../src/components/powerMeter/PMUsageArc.vue  |   2 +-
 .../source/src/components/shared/WBWidget.vue |   2 -
 .../source/src/components/smartHome/model.ts  |   9 +-
 .../components/smartHome/processMessages.ts   |  44 +++---
 .../colors/source/src/views/DisplayTheme.vue  |   1 -
 .../colors/source/src/views/NavigationBar.vue |  33 +++-
 .../colors/source/src/views/StatusPage.vue    |   7 +-
 13 files changed, 135 insertions(+), 131 deletions(-)

diff --git a/packages/modules/display_themes/colors/source/src/assets/js/model.ts b/packages/modules/display_themes/colors/source/src/assets/js/model.ts
index 216a45d1e6..785aae7674 100755
--- a/packages/modules/display_themes/colors/source/src/assets/js/model.ts
+++ b/packages/modules/display_themes/colors/source/src/assets/js/model.ts
@@ -162,9 +162,4 @@ export function checkCode(code: string) {
 	return code == displayConfig.code
 }
 
-export function correctHouseConsumption() {
-	usageSummary.house.power =
-		usageSummary.house.power - usageSummary.devices.power
-}
-
 export const currentTime = ref(new Date())
diff --git a/packages/modules/display_themes/colors/source/src/assets/js/processMessages.ts b/packages/modules/display_themes/colors/source/src/assets/js/processMessages.ts
index f4bbc10320..552c7d5c72 100755
--- a/packages/modules/display_themes/colors/source/src/assets/js/processMessages.ts
+++ b/packages/modules/display_themes/colors/source/src/assets/js/processMessages.ts
@@ -1,11 +1,6 @@
 import { mqttRegister, mqttSubscribe, mqttUnsubscribe } from './mqttClient'
 import type { Hierarchy } from './types'
-import {
-	correctHouseConsumption,
-	globalData,
-	sourceSummary,
-	usageSummary,
-} from './model'
+import { globalData, sourceSummary, usageSummary } from './model'
 import { processLiveGraphMessages } from '../../components/powerGraph/processLiveGraphData'
 import { processDayGraphMessages } from '../../components/powerGraph/processDayGraphData'
 import { processMonthGraphMessages } from '../../components/powerGraph/processMonthYearGraphData'
@@ -152,7 +147,6 @@ function processGlobalCounterMessages(topic: string, message: string) {
 		}
 	} else if (topic.match(/^openwb\/counter\/set\/home_consumption$/i)) {
 		usageSummary.house.power = +message
-		correctHouseConsumption()
 	} else if (
 		topic.match(/^openwb\/counter\/set\/daily_yield_home_consumption$/i)
 	) {
diff --git a/packages/modules/display_themes/colors/source/src/assets/js/themeConfig.ts b/packages/modules/display_themes/colors/source/src/assets/js/themeConfig.ts
index a7ba4a87b5..5e182e3f78 100755
--- a/packages/modules/display_themes/colors/source/src/assets/js/themeConfig.ts
+++ b/packages/modules/display_themes/colors/source/src/assets/js/themeConfig.ts
@@ -396,7 +396,7 @@ interface Preferences {
 
 function writeCookie() {
 	const prefs: Preferences = {}
-	prefs.hideSH = Object.values(shDevices)
+	prefs.hideSH = [...shDevices.values()]
 		.filter((device) => !device.showInGraph)
 		.map((device) => device.id)
 	prefs.showLG = globalConfig.graphPreference == 'live'
diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue b/packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue
index 628174b685..12960f3530 100644
--- a/packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue
+++ b/packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="vehicleinfo justify-content-left">
-		<div class="titleline  mb-3">
+		<div class="titleline mb-3">
 			<DisplayButton @click="openSettings('#chSettings')">
 				<div
 					class="carname d-flex justify-content-left align-items-center px-2"
@@ -42,74 +42,77 @@
 			/>
 		</div>
 		<!-- Car info -->
-		 <div class="infoline">
-		<InfoItem
-			v-if="chargepoint.isSocConfigured"
-			heading="Ladestand:"
-			class="grid-col-4 grid-left"
-		>
-			<BatterySymbol :soc="soc" class="me-2" />
-			<DisplayButton v-if="chargepoint.isSocManual" @click="editSoc = !editSoc">
-				<i
-					class="fa-solid fa-sm fas fa-edit py-0 px-3 mt-3"
-					:style="{ color: 'var(--color-fg)' }"
+		<div class="infoline">
+			<InfoItem
+				v-if="chargepoint.isSocConfigured"
+				heading="Ladestand:"
+				class="grid-col-4 grid-left"
+			>
+				<BatterySymbol :soc="soc" class="me-2" />
+				<DisplayButton
+					v-if="chargepoint.isSocManual"
+					@click="editSoc = !editSoc"
+				>
+					<i
+						class="fa-solid fa-sm fas fa-edit py-0 px-3 mt-3"
+						:style="{ color: 'var(--color-fg)' }"
+					/>
+				</DisplayButton>
+			</InfoItem>
+			<InfoItem
+				v-if="chargepoint.isSocConfigured"
+				heading="Reichweite:"
+				class="grid-col-4"
+			>
+				{{
+					vehicles[props.chargepoint.connectedVehicle]
+						? Math.round(vehicles[props.chargepoint.connectedVehicle].range)
+						: 0
+				}}
+				km
+			</InfoItem>
+			<InfoItem heading="Zeitplan:" class="grid-col-4 grid-right">
+				<span
+					v-if="chargepoint.timedCharging"
+					class="me-1 fa-solid fa-xs fa-clock ps-1"
 				/>
-			</DisplayButton>
-		</InfoItem>
-		<InfoItem
-			v-if="chargepoint.isSocConfigured"
-			heading="Reichweite:"
-			class="grid-col-4"
-		>
-			{{
-				vehicles[props.chargepoint.connectedVehicle]
-					? Math.round(vehicles[props.chargepoint.connectedVehicle].range)
-					: 0
-			}}
-			km
-		</InfoItem>
-		<InfoItem heading="Zeitplan:" class="grid-col-4 grid-right">
-			<span
-				v-if="chargepoint.timedCharging"
-				class="me-1 fa-solid fa-xs fa-clock ps-1"
-			/>
-			{{ props.chargepoint.timedCharging ? 'Ja' : 'Nein' }}
-		</InfoItem>
-</div>
-<div class="infoline">
-		<!-- ET Information -->
-		<InfoItem
-			v-if="etData.active"
-			heading="Preisladen:"
-			class="grid-col-4 grid-left"
-		>
-			<SwitchInput v-model="cp.etActive" />
-			<!--{{ cp.etActive ? 'Ja' : 'Nein' }}-->
-		</InfoItem>
+				{{ props.chargepoint.timedCharging ? 'Ja' : 'Nein' }}
+			</InfoItem>
+		</div>
+		<div class="infoline">
+			<!-- ET Information -->
+			<InfoItem
+				v-if="etData.active"
+				heading="Preisladen:"
+				class="grid-col-4 grid-left"
+			>
+				<SwitchInput v-model="cp.etActive" />
+				<!--{{ cp.etActive ? 'Ja' : 'Nein' }}-->
+			</InfoItem>
 
-		<InfoItem v-if="etData.active" heading="max. Preis:" class="grid-col-4">
-			<DisplayButton v-if="cp.etActive" @click="openSettings('#prSettings')">
-				<span class="maxprice"
-					>{{
-						props.chargepoint.etActive
-							? (Math.round(props.chargepoint.etMaxPrice * 10) / 10).toFixed(
-									1,
-								) + ' ct'
-							: '-'
-					}}
-				</span>
-			</DisplayButton>
-			<span v-else>-</span>
-		</InfoItem>
+			<InfoItem v-if="etData.active" heading="max. Preis:" class="grid-col-4">
+				<DisplayButton v-if="cp.etActive" @click="openSettings('#prSettings')">
+					<span class="maxprice"
+						>{{
+							props.chargepoint.etActive
+								? (Math.round(props.chargepoint.etMaxPrice * 10) / 10).toFixed(
+										1,
+									) + ' ct'
+								: '-'
+						}}
+					</span>
+				</DisplayButton>
+				<span v-else>-</span>
+			</InfoItem>
 
-		<InfoItem
-			v-if="etData.active"
-			heading="akt. Preis:"
-			class="grid-col-4 grid-right"
-		>
-			<span :style="currentPriceStyle">{{ currentPrice }} ct </span>
-		</InfoItem>
-</div>
+			<InfoItem
+				v-if="etData.active"
+				heading="akt. Preis:"
+				class="grid-col-4 grid-right"
+			>
+				<span :style="currentPriceStyle">{{ currentPrice }} ct </span>
+			</InfoItem>
+		</div>
 		<!-- Chargemode buttons -->
 		<RadioBarInput
 			:id="'chargemode-' + chargepoint.name"
@@ -225,11 +228,11 @@ const currentPriceStyle = computed(() => {
 </script>
 <style scoped>
 .titleline {
-	display:flex;
+	display: flex;
 	justify-content: left;
 }
 .infoline {
-	display:flex;
+	display: flex;
 	justify-content: space-between;
 	flex-direction: row;
 }
@@ -262,7 +265,7 @@ const currentPriceStyle = computed(() => {
 	justify-self: stretch;
 }
 .vehicleinfo {
-	display:flex;
+	display: flex;
 	flex-direction: column;
 }
 </style>
diff --git a/packages/modules/display_themes/colors/source/src/components/energyMeter/EnergyMeter.vue b/packages/modules/display_themes/colors/source/src/components/energyMeter/EnergyMeter.vue
index 8e7b581b7f..3a28c414a7 100755
--- a/packages/modules/display_themes/colors/source/src/components/energyMeter/EnergyMeter.vue
+++ b/packages/modules/display_themes/colors/source/src/components/energyMeter/EnergyMeter.vue
@@ -146,9 +146,7 @@ const heading = 'Energie'
 
 const usageDetails = computed(() => {
 	const cpcount = Object.values(chargePoints).length
-	const shcount = Object.values(shDevices).filter(
-		(dev) => dev.configured,
-	).length
+	const shcount = [...shDevices.values()].filter((dev) => dev.configured).length
 	return [usageSummary.evuOut, usageSummary.devices, usageSummary.charging]
 		.concat(
 			cpcount > 1
@@ -157,7 +155,7 @@ const usageDetails = computed(() => {
 		)
 		.concat(
 			shcount > 1
-				? Object.values(shDevices).filter(
+				? [...shDevices.values()].filter(
 						(row) => row.configured && row.showInGraph,
 					)
 				: [],
diff --git a/packages/modules/display_themes/colors/source/src/components/powerGraph/model.ts b/packages/modules/display_themes/colors/source/src/components/powerGraph/model.ts
index 61f7483d9a..56a270dd14 100755
--- a/packages/modules/display_themes/colors/source/src/components/powerGraph/model.ts
+++ b/packages/modules/display_themes/colors/source/src/components/powerGraph/model.ts
@@ -342,7 +342,7 @@ export function updateEnergyValues(
 		Object.entries(totals.sh).forEach(([id, values]) => {
 			historicSummary.setEnergy(id, values.energy_imported)
 			const idNumber = id.substring(2)
-			if (!shDevices[+idNumber].countAsHouse) {
+			if (!shDevices.get(+idNumber)!.countAsHouse) {
 				historicSummary.items.devices.energy += values.energy_imported
 			}
 		})
@@ -380,7 +380,7 @@ export function updateEnergyValues(
 					cp.pvPercentage = hcp.pvPercentage
 				}
 			})
-			Object.values(shDevices).map((device) => {
+			shDevices.forEach((device) => {
 				const hDevice = historicSummary.items['sh' + device.id]
 				if (hDevice) {
 					device.energy = hDevice.energy
@@ -409,7 +409,7 @@ function resetPvValues() {
 		cp.energyBat = 0
 		cp.pvPercentage = 0
 	})
-	Object.values(shDevices).map((device) => {
+	shDevices.forEach((device) => {
 		device.energyPv = 0
 		device.energyBat = 0
 		device.pvPercentage = 0
diff --git a/packages/modules/display_themes/colors/source/src/components/powerMeter/PMUsageArc.vue b/packages/modules/display_themes/colors/source/src/components/powerMeter/PMUsageArc.vue
index 6839af419c..fea0dbc9d9 100755
--- a/packages/modules/display_themes/colors/source/src/components/powerMeter/PMUsageArc.vue
+++ b/packages/modules/display_themes/colors/source/src/components/powerMeter/PMUsageArc.vue
@@ -30,7 +30,7 @@ const draw = computed(() => {
 	}
 	const plotdata = [usageSummary.evuOut, usageSummary.charging]
 		.concat(
-			Object.values(shDevices)
+			[...shDevices.values()]
 				.filter((row) => row.configured && !row.countAsHouse)
 				.sort((a, b) => {
 					return b.power - a.power
diff --git a/packages/modules/display_themes/colors/source/src/components/shared/WBWidget.vue b/packages/modules/display_themes/colors/source/src/components/shared/WBWidget.vue
index 38dab427d9..9196a4ae2f 100755
--- a/packages/modules/display_themes/colors/source/src/components/shared/WBWidget.vue
+++ b/packages/modules/display_themes/colors/source/src/components/shared/WBWidget.vue
@@ -42,7 +42,6 @@
 	/* display: grid;
 	grid-template-columns: repeat(12, auto);
 	gap: 0.2em; */
-	
 }
 
 .wb-subwidget {
@@ -71,7 +70,6 @@
 }
 
 .cont {
-	
 	align-self: stretch;
 	height: 100%;
 }
diff --git a/packages/modules/display_themes/colors/source/src/components/smartHome/model.ts b/packages/modules/display_themes/colors/source/src/components/smartHome/model.ts
index f3c7c80502..3a5ffa9b33 100755
--- a/packages/modules/display_themes/colors/source/src/components/smartHome/model.ts
+++ b/packages/modules/display_themes/colors/source/src/components/smartHome/model.ts
@@ -35,13 +35,12 @@ export class ShDevice {
 	}
 }
 
-export const shDevices: { [key: number]: ShDevice } = reactive({})
-
+//export const shDevices: { [key: number]: ShDevice } = reactive({})
+export const shDevices = reactive(new Map<number, ShDevice>())
 export function addShDevice(shIndex: number) {
 	if (!(shIndex in shDevices)) {
-		shDevices[shIndex] = new ShDevice(shIndex)
-		shDevices[shIndex].color =
-			'var(--color-sh' + Object.values(shDevices).length + ')'
+		shDevices.set(shIndex, new ShDevice(shIndex))
+		shDevices.get(shIndex)!.color = 'var(--color-sh' + shDevices.size + ')'
 		// console.info('Added sh device ' + shIndex)
 	} else {
 		console.info('Duplicate sh device message: ' + shIndex)
diff --git a/packages/modules/display_themes/colors/source/src/components/smartHome/processMessages.ts b/packages/modules/display_themes/colors/source/src/components/smartHome/processMessages.ts
index fc4d7dae5c..78324dfecd 100755
--- a/packages/modules/display_themes/colors/source/src/components/smartHome/processMessages.ts
+++ b/packages/modules/display_themes/colors/source/src/components/smartHome/processMessages.ts
@@ -17,23 +17,24 @@ function processSmarthomeConfigMessages(topic: string, message: string) {
 		// console.warn('Smarthome: Missing index in ' + topic)
 		return
 	}
-	if (!(index in shDevices)) {
+	if (!shDevices.has(index)) {
 		// console.warn('Invalid sh device id received: ' + index)
 		addShDevice(index)
 	}
+	const dev = shDevices.get(index)!
 	if (
 		topic.match(
 			/^openWB\/LegacySmarthome\/config\/get\/Devices\/[0-9]+\/device_configured$/i,
 		)
 	) {
-		shDevices[index].configured = message != '0'
+		dev.configured = message != '0'
 	} else if (
 		topic.match(
 			/^openWB\/LegacySmarthome\/config\/get\/Devices\/[0-9]+\/device_name$/i,
 		)
 	) {
-		shDevices[index].name = message.toString()
-		shDevices[index].icon = message.toString()
+		dev.name = message.toString()
+		dev.icon = message.toString()
 
 		masterData['sh' + index].name = message.toString()
 		masterData['sh' + index].icon = message.toString()
@@ -42,25 +43,25 @@ function processSmarthomeConfigMessages(topic: string, message: string) {
 			/^openWB\/LegacySmarthome\/config\/set\/Devices\/[0-9]+\/mode$/i,
 		)
 	) {
-		shDevices[index].isAutomatic = message == '0'
+		dev.isAutomatic = message == '0'
 	} else if (
 		topic.match(
 			/^openWB\/LegacySmarthome\/config\/get\/Devices\/[0-9]+\/device_canSwitch$/i,
 		)
 	) {
-		shDevices[index].canSwitch = message == '1'
+		dev.canSwitch = message == '1'
 	} else if (
 		topic.match(
 			/^openWB\/LegacySmarthome\/config\/get\/Devices\/[0-9]+\/device_homeConsumtion$/i,
 		)
 	) {
-		shDevices[index].countAsHouse = message == '1'
+		dev.countAsHouse = message == '1'
 	} else if (
 		topic.match(
 			/^openWB\/LegacySmarthome\/config\/get\/Devices\/[0-9]+\/device_temperatur_configured$/i,
 		)
 	) {
-		shDevices[index].tempConfigured = +message
+		dev.tempConfigured = +message
 	} else {
 		// console.warn('Ignored Smarthome config message: ' + topic)
 	}
@@ -72,12 +73,13 @@ function processSmarthomeDeviceMessages(topic: string, message: string) {
 		console.warn('Smarthome: Missing index in ' + topic)
 		return
 	}
-	if (!(index in shDevices)) {
+	if (!shDevices.has(index)) {
 		// console.warn('Invalid sh device id received: ' + index)
 		addShDevice(index)
 	}
+	const dev = shDevices.get(index)!
 	if (topic.match(/^openWB\/LegacySmarthome\/Devices\/[0-9]+\/Watt$/i)) {
-		shDevices[index].power = +message
+		dev.power = +message
 		updateShSummary('power')
 	} else if (topic.match(/^openWB\/LegacySmarthome\/Devices\/[0-9]+\/Wh$/i)) {
 		//shDevices[index].energy = +message
@@ -85,43 +87,43 @@ function processSmarthomeDeviceMessages(topic: string, message: string) {
 	} else if (
 		topic.match(/^openWB\/LegacySmarthome\/Devices\/[0-9]+\/RunningTimeToday$/i)
 	) {
-		shDevices[index].runningTime = +message
+		dev.runningTime = +message
 	} else if (
 		topic.match(
 			/^openWB\/LegacySmarthome\/Devices\/[0-9]+\/TemperatureSensor0$/i,
 		)
 	) {
-		shDevices[index].temp[0] = +message
+		dev.temp[0] = +message
 	} else if (
 		topic.match(
 			/^openWB\/LegacySmarthome\/Devices\/[0-9]+\/TemperatureSensor1$/i,
 		)
 	) {
-		shDevices[index].temp[1] = +message
+		dev.temp[1] = +message
 	} else if (
 		topic.match(
 			/^openWB\/LegacySmarthome\/Devices\/[0-9]+\/TemperatureSensor2$/i,
 		)
 	) {
-		shDevices[index].temp[2] = +message
+		dev.temp[2] = +message
 	} else if (
 		topic.match(/^openWB\/LegacySmartHome\/Devices\/[0-9]+\/Status$/i)
 	) {
 		switch (+message) {
 			case 10:
-				shDevices[index].status = 'off'
+				dev.status = 'off'
 				break
 			case 11:
-				shDevices[index].status = 'on'
+				dev.status = 'on'
 				break
 			case 20:
-				shDevices[index].status = 'detection'
+				dev.status = 'detection'
 				break
 			case 30:
-				shDevices[index].status = 'timeout'
+				dev.status = 'timeout'
 				break
 			default:
-				shDevices[index].status = 'off'
+				dev.status = 'off'
 		}
 	} else {
 		// console.warn('Ignored Smarthome device message: ' + topic)
@@ -131,12 +133,12 @@ function processSmarthomeDeviceMessages(topic: string, message: string) {
 function updateShSummary(cat: string) {
 	switch (cat) {
 		case 'power':
-			usageSummary['devices'].power = Object.values(shDevices)
+			usageSummary['devices'].power = [...shDevices.values()]
 				.filter((dev) => dev.configured && !dev.countAsHouse)
 				.reduce((sum, consumer) => sum + consumer.power, 0)
 			break
 		case 'energy':
-			usageSummary['devices'].energy = Object.values(shDevices)
+			usageSummary['devices'].energy = [...shDevices.values()]
 				.filter((dev) => dev.configured && !dev.countAsHouse)
 				.reduce((sum, consumer) => sum + consumer.energy, 0)
 			break
diff --git a/packages/modules/display_themes/colors/source/src/views/DisplayTheme.vue b/packages/modules/display_themes/colors/source/src/views/DisplayTheme.vue
index 3618a1184d..9aabc777b8 100644
--- a/packages/modules/display_themes/colors/source/src/views/DisplayTheme.vue
+++ b/packages/modules/display_themes/colors/source/src/views/DisplayTheme.vue
@@ -87,7 +87,6 @@ onMounted(() => {
 onBeforeUnmount(() => {
 	window.removeEventListener('focus', haveFocus)
 	window.removeEventListener('resize', updateDimensions)
-	
 })
 function haveFocus() {
 	if (document.hasFocus()) {
diff --git a/packages/modules/display_themes/colors/source/src/views/NavigationBar.vue b/packages/modules/display_themes/colors/source/src/views/NavigationBar.vue
index 8dd904ffea..2ef4e519a3 100755
--- a/packages/modules/display_themes/colors/source/src/views/NavigationBar.vue
+++ b/packages/modules/display_themes/colors/source/src/views/NavigationBar.vue
@@ -4,21 +4,40 @@
 	<div class="navigation">
 		<span class="graphbuttons">
 			<span class="brand me-4">openWB</span>
-			<DisplayButton icon="fa-chart-pie" @click="selectPowermeter">Leistung</DisplayButton>
-			<DisplayButton icon="fa-chart-line" @click="selectPowergraph">Verlauf</DisplayButton>
-			<DisplayButton icon="fa-chart-column" @click="selectEnergymeter">Energie</DisplayButton>
+			<DisplayButton icon="fa-chart-pie" @click="selectPowermeter"
+				>Leistung</DisplayButton
+			>
+			<DisplayButton icon="fa-chart-line" @click="selectPowergraph"
+				>Verlauf</DisplayButton
+			>
+			<DisplayButton icon="fa-chart-column" @click="selectEnergymeter"
+				>Energie</DisplayButton
+			>
 		</span>
 
-		<DisplayButton icon="fa-rectangle-list" @click="showStatus">Status</DisplayButton>
+		<DisplayButton icon="fa-rectangle-list" @click="showStatus"
+			>Status</DisplayButton
+		>
 		<span class="cpbuttons">
-			<DisplayButton v-if="Object.values(chargePoints).length > 1" color="var(--color-cp0)" @click="cpLeft">
+			<DisplayButton
+				v-if="Object.values(chargePoints).length > 1"
+				color="var(--color-cp0)"
+				@click="cpLeft"
+			>
 				<span class="fas fa-arrow-left px-2" />
 				<span class="fas fa-charging-station pe-2" />
 			</DisplayButton>
-			<DisplayButton :bgcolor="displayConfig.locked ? 'var(--color-evu)' : 'var(--color-pv)'" @click="unlockDisplay">
+			<DisplayButton
+				:bgcolor="displayConfig.locked ? 'var(--color-evu)' : 'var(--color-pv)'"
+				@click="unlockDisplay"
+			>
 				<span class="fas fa-lock px-4" />
 			</DisplayButton>
-			<DisplayButton v-if="Object.values(chargePoints).length > 1" color="var(--color-cp0)" @click="cpRight">
+			<DisplayButton
+				v-if="Object.values(chargePoints).length > 1"
+				color="var(--color-cp0)"
+				@click="cpRight"
+			>
 				<span class="fas fa-charging-station px-2" />
 				<span class="fas fa-arrow-right pe-2" />
 			</DisplayButton>
diff --git a/packages/modules/display_themes/colors/source/src/views/StatusPage.vue b/packages/modules/display_themes/colors/source/src/views/StatusPage.vue
index 6740a6d13f..6aa686cc7b 100644
--- a/packages/modules/display_themes/colors/source/src/views/StatusPage.vue
+++ b/packages/modules/display_themes/colors/source/src/views/StatusPage.vue
@@ -38,7 +38,7 @@
 			</div>
 			
 		</div> -->
-		<!-- <div v-if="shutdown"
+	<!-- <div v-if="shutdown"
 			class="confirmationBox rounded m-5 p-5 d-flex flex-column align-items-center "
 		>
 			<span class="confirmTitle">Abschalten</span>
@@ -82,7 +82,6 @@ function reload() {
 }
 .controlbuttons {
 	font-size: var(--font-settings);
-	
 }
 .controlbutton {
 	background-color: var(--color-menu);
@@ -95,11 +94,10 @@ function reload() {
 	font-size: var(--font-settings);
 	background-color: var(--color-fg);
 	color: var(--color-evu);
-
 }
 .confirmTitle {
 	font-weight: bold;
-	}
+}
 .cancelButton {
 	font-size: var(--font-settings);
 	background-color: var(--color-battery);
@@ -109,5 +107,4 @@ function reload() {
 	background-color: var(--color-evu);
 	color: var(--color-fg);
 }
-
 </style>

From e0f3bc0efe7550f571e262e618c57541aa3fcf8f Mon Sep 17 00:00:00 2001
From: Claus Hagen <cshagen@hagens.ch>
Date: Sun, 19 Jan 2025 14:18:41 +0100
Subject: [PATCH 2/2] add reload, restart and shutdown buttons

---
 .../colors/source/package-lock.json           | 612 +++++++++---------
 .../display_themes/colors/source/package.json |   8 +-
 .../display_themes/colors/source/src/App.vue  |  22 +
 .../source/src/assets/js/sendMessages.ts      |   9 +-
 .../source/src/assets/js/themeConfig.ts       |  12 +
 .../source/src/components/powerGraph/model.ts |  16 +-
 .../colors/source/src/views/StatusPage.vue    | 148 +++--
 7 files changed, 459 insertions(+), 368 deletions(-)

diff --git a/packages/modules/display_themes/colors/source/package-lock.json b/packages/modules/display_themes/colors/source/package-lock.json
index 9e81aac6b8..2a47deb3b6 100644
--- a/packages/modules/display_themes/colors/source/package-lock.json
+++ b/packages/modules/display_themes/colors/source/package-lock.json
@@ -26,17 +26,17 @@
         "@tsconfig/node20": "^20.1.4",
         "@types/bootstrap": "^5.2.10",
         "@types/d3": "^7.4.3",
-        "@types/node": "^20.17.12",
+        "@types/node": "^20.17.14",
         "@vitejs/plugin-vue": "^5.2.1",
-        "@vue/eslint-config-prettier": "^10.1.0",
-        "@vue/eslint-config-typescript": "^14.2.0",
+        "@vue/eslint-config-prettier": "^10.2.0",
+        "@vue/eslint-config-typescript": "^14.3.0",
         "@vue/tsconfig": "^0.7.0",
         "esbuild": "^0.24.2",
         "eslint": "^9.18.0",
         "eslint-plugin-vue": "^9.32.0",
         "npm-run-all2": "^7.0.2",
         "prettier": "^3.4.2",
-        "rollup": "^4.30.1",
+        "rollup": "^4.31.0",
         "typescript": "^5.7.3",
         "vite": "^6.0.7",
         "vue-tsc": "^2.2.0"
@@ -575,28 +575,6 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@eslint/config-array/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/@eslint/config-array/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/@eslint/core": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.10.0.tgz",
@@ -632,69 +610,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/@eslint/eslintrc/node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
-      "dev": true,
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/@eslint/eslintrc/node_modules/espree": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
-      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
-      "dev": true,
-      "dependencies": {
-        "acorn": "^8.14.0",
-        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^4.2.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
-    "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
-      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/@eslint/js": {
       "version": "9.18.0",
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.18.0.tgz",
@@ -920,9 +835,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.30.1.tgz",
-      "integrity": "sha512-pSWY+EVt3rJ9fQ3IqlrEUtXh3cGqGtPDH1FQlNZehO2yYxCHEX1SPsz1M//NXwYfbTlcKr9WObLnJX9FsS9K1Q==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.31.0.tgz",
+      "integrity": "sha512-9NrR4033uCbUBRgvLcBrJofa2KY9DzxL2UKZ1/4xA/mnTNyhZCWBuD8X3tPm1n4KxcgaraOYgrFKSgwjASfmlA==",
       "cpu": [
         "arm"
       ],
@@ -932,9 +847,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.30.1.tgz",
-      "integrity": "sha512-/NA2qXxE3D/BRjOJM8wQblmArQq1YoBVJjrjoTSBS09jgUisq7bqxNHJ8kjCHeV21W/9WDGwJEWSN0KQ2mtD/w==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.31.0.tgz",
+      "integrity": "sha512-iBbODqT86YBFHajxxF8ebj2hwKm1k8PTBQSojSt3d1FFt1gN+xf4CowE47iN0vOSdnd+5ierMHBbu/rHc7nq5g==",
       "cpu": [
         "arm64"
       ],
@@ -944,9 +859,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.30.1.tgz",
-      "integrity": "sha512-r7FQIXD7gB0WJ5mokTUgUWPl0eYIH0wnxqeSAhuIwvnnpjdVB8cRRClyKLQr7lgzjctkbp5KmswWszlwYln03Q==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.31.0.tgz",
+      "integrity": "sha512-WHIZfXgVBX30SWuTMhlHPXTyN20AXrLH4TEeH/D0Bolvx9PjgZnn4H677PlSGvU6MKNsjCQJYczkpvBbrBnG6g==",
       "cpu": [
         "arm64"
       ],
@@ -956,9 +871,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.30.1.tgz",
-      "integrity": "sha512-x78BavIwSH6sqfP2xeI1hd1GpHL8J4W2BXcVM/5KYKoAD3nNsfitQhvWSw+TFtQTLZ9OmlF+FEInEHyubut2OA==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.31.0.tgz",
+      "integrity": "sha512-hrWL7uQacTEF8gdrQAqcDy9xllQ0w0zuL1wk1HV8wKGSGbKPVjVUv/DEwT2+Asabf8Dh/As+IvfdU+H8hhzrQQ==",
       "cpu": [
         "x64"
       ],
@@ -968,9 +883,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.30.1.tgz",
-      "integrity": "sha512-HYTlUAjbO1z8ywxsDFWADfTRfTIIy/oUlfIDmlHYmjUP2QRDTzBuWXc9O4CXM+bo9qfiCclmHk1x4ogBjOUpUQ==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.31.0.tgz",
+      "integrity": "sha512-S2oCsZ4hJviG1QjPY1h6sVJLBI6ekBeAEssYKad1soRFv3SocsQCzX6cwnk6fID6UQQACTjeIMB+hyYrFacRew==",
       "cpu": [
         "arm64"
       ],
@@ -980,9 +895,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.30.1.tgz",
-      "integrity": "sha512-1MEdGqogQLccphhX5myCJqeGNYTNcmTyaic9S7CG3JhwuIByJ7J05vGbZxsizQthP1xpVx7kd3o31eOogfEirw==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.31.0.tgz",
+      "integrity": "sha512-pCANqpynRS4Jirn4IKZH4tnm2+2CqCNLKD7gAdEjzdLGbH1iO0zouHz4mxqg0uEMpO030ejJ0aA6e1PJo2xrPA==",
       "cpu": [
         "x64"
       ],
@@ -992,9 +907,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.30.1.tgz",
-      "integrity": "sha512-PaMRNBSqCx7K3Wc9QZkFx5+CX27WFpAMxJNiYGAXfmMIKC7jstlr32UhTgK6T07OtqR+wYlWm9IxzennjnvdJg==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.31.0.tgz",
+      "integrity": "sha512-0O8ViX+QcBd3ZmGlcFTnYXZKGbFu09EhgD27tgTdGnkcYXLat4KIsBBQeKLR2xZDCXdIBAlWLkiXE1+rJpCxFw==",
       "cpu": [
         "arm"
       ],
@@ -1004,9 +919,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.30.1.tgz",
-      "integrity": "sha512-B8Rcyj9AV7ZlEFqvB5BubG5iO6ANDsRKlhIxySXcF1axXYUyqwBok+XZPgIYGBgs7LDXfWfifxhw0Ik57T0Yug==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.31.0.tgz",
+      "integrity": "sha512-w5IzG0wTVv7B0/SwDnMYmbr2uERQp999q8FMkKG1I+j8hpPX2BYFjWe69xbhbP6J9h2gId/7ogesl9hwblFwwg==",
       "cpu": [
         "arm"
       ],
@@ -1016,9 +931,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.30.1.tgz",
-      "integrity": "sha512-hqVyueGxAj3cBKrAI4aFHLV+h0Lv5VgWZs9CUGqr1z0fZtlADVV1YPOij6AhcK5An33EXaxnDLmJdQikcn5NEw==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.31.0.tgz",
+      "integrity": "sha512-JyFFshbN5xwy6fulZ8B/8qOqENRmDdEkcIMF0Zz+RsfamEW+Zabl5jAb0IozP/8UKnJ7g2FtZZPEUIAlUSX8cA==",
       "cpu": [
         "arm64"
       ],
@@ -1028,9 +943,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.30.1.tgz",
-      "integrity": "sha512-i4Ab2vnvS1AE1PyOIGp2kXni69gU2DAUVt6FSXeIqUCPIR3ZlheMW3oP2JkukDfu3PsexYRbOiJrY+yVNSk9oA==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.31.0.tgz",
+      "integrity": "sha512-kpQXQ0UPFeMPmPYksiBL9WS/BDiQEjRGMfklVIsA0Sng347H8W2iexch+IEwaR7OVSKtr2ZFxggt11zVIlZ25g==",
       "cpu": [
         "arm64"
       ],
@@ -1040,9 +955,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.30.1.tgz",
-      "integrity": "sha512-fARcF5g296snX0oLGkVxPmysetwUk2zmHcca+e9ObOovBR++9ZPOhqFUM61UUZ2EYpXVPN1redgqVoBB34nTpQ==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.31.0.tgz",
+      "integrity": "sha512-pMlxLjt60iQTzt9iBb3jZphFIl55a70wexvo8p+vVFK+7ifTRookdoXX3bOsRdmfD+OKnMozKO6XM4zR0sHRrQ==",
       "cpu": [
         "loong64"
       ],
@@ -1052,9 +967,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.30.1.tgz",
-      "integrity": "sha512-GLrZraoO3wVT4uFXh67ElpwQY0DIygxdv0BNW9Hkm3X34wu+BkqrDrkcsIapAY+N2ATEbvak0XQ9gxZtCIA5Rw==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.31.0.tgz",
+      "integrity": "sha512-D7TXT7I/uKEuWiRkEFbed1UUYZwcJDU4vZQdPTcepK7ecPhzKOYk4Er2YR4uHKme4qDeIh6N3XrLfpuM7vzRWQ==",
       "cpu": [
         "ppc64"
       ],
@@ -1064,9 +979,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.30.1.tgz",
-      "integrity": "sha512-0WKLaAUUHKBtll0wvOmh6yh3S0wSU9+yas923JIChfxOaaBarmb/lBKPF0w/+jTVozFnOXJeRGZ8NvOxvk/jcw==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.31.0.tgz",
+      "integrity": "sha512-wal2Tc8O5lMBtoePLBYRKj2CImUCJ4UNGJlLwspx7QApYny7K1cUYlzQ/4IGQBLmm+y0RS7dwc3TDO/pmcneTw==",
       "cpu": [
         "riscv64"
       ],
@@ -1076,9 +991,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.30.1.tgz",
-      "integrity": "sha512-GWFs97Ruxo5Bt+cvVTQkOJ6TIx0xJDD/bMAOXWJg8TCSTEK8RnFeOeiFTxKniTc4vMIaWvCplMAFBt9miGxgkA==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.31.0.tgz",
+      "integrity": "sha512-O1o5EUI0+RRMkK9wiTVpk2tyzXdXefHtRTIjBbmFREmNMy7pFeYXCFGbhKFwISA3UOExlo5GGUuuj3oMKdK6JQ==",
       "cpu": [
         "s390x"
       ],
@@ -1088,9 +1003,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.30.1.tgz",
-      "integrity": "sha512-UtgGb7QGgXDIO+tqqJ5oZRGHsDLO8SlpE4MhqpY9Llpzi5rJMvrK6ZGhsRCST2abZdBqIBeXW6WPD5fGK5SDwg==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.31.0.tgz",
+      "integrity": "sha512-zSoHl356vKnNxwOWnLd60ixHNPRBglxpv2g7q0Cd3Pmr561gf0HiAcUBRL3S1vPqRC17Zo2CX/9cPkqTIiai1g==",
       "cpu": [
         "x64"
       ],
@@ -1100,9 +1015,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.30.1.tgz",
-      "integrity": "sha512-V9U8Ey2UqmQsBT+xTOeMzPzwDzyXmnAoO4edZhL7INkwQcaW1Ckv3WJX3qrrp/VHaDkEWIBWhRwP47r8cdrOow==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.31.0.tgz",
+      "integrity": "sha512-ypB/HMtcSGhKUQNiFwqgdclWNRrAYDH8iMYH4etw/ZlGwiTVxBz2tDrGRrPlfZu6QjXwtd+C3Zib5pFqID97ZA==",
       "cpu": [
         "x64"
       ],
@@ -1112,9 +1027,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.30.1.tgz",
-      "integrity": "sha512-WabtHWiPaFF47W3PkHnjbmWawnX/aE57K47ZDT1BXTS5GgrBUEpvOzq0FI0V/UYzQJgdb8XlhVNH8/fwV8xDjw==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.31.0.tgz",
+      "integrity": "sha512-JuhN2xdI/m8Hr+aVO3vspO7OQfUFO6bKLIRTAy0U15vmWjnZDLrEgCZ2s6+scAYaQVpYSh9tZtRijApw9IXyMw==",
       "cpu": [
         "arm64"
       ],
@@ -1124,9 +1039,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.30.1.tgz",
-      "integrity": "sha512-pxHAU+Zv39hLUTdQQHUVHf4P+0C47y/ZloorHpzs2SXMRqeAWmGghzAhfOlzFHHwjvgokdFAhC4V+6kC1lRRfw==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.31.0.tgz",
+      "integrity": "sha512-U1xZZXYkvdf5MIWmftU8wrM5PPXzyaY1nGCI4KI4BFfoZxHamsIe+BtnPLIvvPykvQWlVbqUXdLa4aJUuilwLQ==",
       "cpu": [
         "ia32"
       ],
@@ -1136,9 +1051,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.30.1.tgz",
-      "integrity": "sha512-D6qjsXGcvhTjv0kI4fU8tUuBDF/Ueee4SVX79VfNDXZa64TfCW1Slkb6Z7O1p7vflqZjcmOVdZlqf8gvJxc6og==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.31.0.tgz",
+      "integrity": "sha512-ul8rnCsUumNln5YWwz0ted2ZHFhzhRRnkpBZ+YRuHoRAlUji9KChpOUOndY7uykrPEPXVbHLlsdo6v5yXo/TXw==",
       "cpu": [
         "x64"
       ],
@@ -1439,9 +1354,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.17.12",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.12.tgz",
-      "integrity": "sha512-vo/wmBgMIiEA23A/knMfn/cf37VnuF52nZh5ZoW0GWt4e4sxNquibrMRJ7UQsA06+MBx9r/H1jsI9grYjQCQlw==",
+      "version": "20.17.14",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.14.tgz",
+      "integrity": "sha512-w6qdYetNL5KRBiSClK/KWai+2IMEJuAj+EujKCumalFOwXtvOXaEan9AuwcRID2IcOIAWSIfR495hBtgKlx2zg==",
       "dependencies": {
         "undici-types": "~6.19.2"
       }
@@ -1464,16 +1379,16 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.19.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.19.1.tgz",
-      "integrity": "sha512-tJzcVyvvb9h/PB96g30MpxACd9IrunT7GF9wfA9/0TJ1LxGOJx1TdPzSbBBnNED7K9Ka8ybJsnEpiXPktolTLg==",
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.20.0.tgz",
+      "integrity": "sha512-naduuphVw5StFfqp4Gq4WhIBE2gN1GEmMUExpJYknZJdRnc+2gDzB8Z3+5+/Kv33hPQRDGzQO/0opHE72lZZ6A==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.19.1",
-        "@typescript-eslint/type-utils": "8.19.1",
-        "@typescript-eslint/utils": "8.19.1",
-        "@typescript-eslint/visitor-keys": "8.19.1",
+        "@typescript-eslint/scope-manager": "8.20.0",
+        "@typescript-eslint/type-utils": "8.20.0",
+        "@typescript-eslint/utils": "8.20.0",
+        "@typescript-eslint/visitor-keys": "8.20.0",
         "graphemer": "^1.4.0",
         "ignore": "^5.3.1",
         "natural-compare": "^1.4.0",
@@ -1493,15 +1408,15 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.19.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.19.1.tgz",
-      "integrity": "sha512-67gbfv8rAwawjYx3fYArwldTQKoYfezNUT4D5ioWetr/xCrxXxvleo3uuiFuKfejipvq+og7mjz3b0G2bVyUCw==",
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.20.0.tgz",
+      "integrity": "sha512-gKXG7A5HMyjDIedBi6bUrDcun8GIjnI8qOwVLiY3rx6T/sHP/19XLJOnIq/FgQvWLHja5JN/LSE7eklNBr612g==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.19.1",
-        "@typescript-eslint/types": "8.19.1",
-        "@typescript-eslint/typescript-estree": "8.19.1",
-        "@typescript-eslint/visitor-keys": "8.19.1",
+        "@typescript-eslint/scope-manager": "8.20.0",
+        "@typescript-eslint/types": "8.20.0",
+        "@typescript-eslint/typescript-estree": "8.20.0",
+        "@typescript-eslint/visitor-keys": "8.20.0",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -1517,13 +1432,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.19.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.19.1.tgz",
-      "integrity": "sha512-60L9KIuN/xgmsINzonOcMDSB8p82h95hoBfSBtXuO4jlR1R9L1xSkmVZKgCPVfavDlXihh4ARNjXhh1gGnLC7Q==",
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.20.0.tgz",
+      "integrity": "sha512-J7+VkpeGzhOt3FeG1+SzhiMj9NzGD/M6KoGn9f4dbz3YzK9hvbhVTmLj/HiTp9DazIzJ8B4XcM80LrR9Dm1rJw==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "8.19.1",
-        "@typescript-eslint/visitor-keys": "8.19.1"
+        "@typescript-eslint/types": "8.20.0",
+        "@typescript-eslint/visitor-keys": "8.20.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1534,13 +1449,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.19.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.19.1.tgz",
-      "integrity": "sha512-Rp7k9lhDKBMRJB/nM9Ksp1zs4796wVNyihG9/TU9R6KCJDNkQbc2EOKjrBtLYh3396ZdpXLtr/MkaSEmNMtykw==",
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.20.0.tgz",
+      "integrity": "sha512-bPC+j71GGvA7rVNAHAtOjbVXbLN5PkwqMvy1cwGeaxUoRQXVuKCebRoLzm+IPW/NtFFpstn1ummSIasD5t60GA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "8.19.1",
-        "@typescript-eslint/utils": "8.19.1",
+        "@typescript-eslint/typescript-estree": "8.20.0",
+        "@typescript-eslint/utils": "8.20.0",
         "debug": "^4.3.4",
         "ts-api-utils": "^2.0.0"
       },
@@ -1557,9 +1472,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.19.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.19.1.tgz",
-      "integrity": "sha512-JBVHMLj7B1K1v1051ZaMMgLW4Q/jre5qGK0Ew6UgXz1Rqh+/xPzV1aW581OM00X6iOfyr1be+QyW8LOUf19BbA==",
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.20.0.tgz",
+      "integrity": "sha512-cqaMiY72CkP+2xZRrFt3ExRBu0WmVitN/rYPZErA80mHjHx/Svgp8yfbzkJmDoQ/whcytOPO9/IZXnOc+wigRA==",
       "dev": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1570,13 +1485,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.19.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.19.1.tgz",
-      "integrity": "sha512-jk/TZwSMJlxlNnqhy0Eod1PNEvCkpY6MXOXE/WLlblZ6ibb32i2We4uByoKPv1d0OD2xebDv4hbs3fm11SMw8Q==",
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.20.0.tgz",
+      "integrity": "sha512-Y7ncuy78bJqHI35NwzWol8E0X7XkRVS4K4P4TCyzWkOJih5NDvtoRDW4Ba9YJJoB2igm9yXDdYI/+fkiiAxPzA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "8.19.1",
-        "@typescript-eslint/visitor-keys": "8.19.1",
+        "@typescript-eslint/types": "8.20.0",
+        "@typescript-eslint/visitor-keys": "8.20.0",
         "debug": "^4.3.4",
         "fast-glob": "^3.3.2",
         "is-glob": "^4.0.3",
@@ -1595,16 +1510,40 @@
         "typescript": ">=4.8.4 <5.8.0"
       }
     },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.19.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.19.1.tgz",
-      "integrity": "sha512-IxG5gLO0Ne+KaUc8iW1A+XuKLd63o4wlbI1Zp692n1xojCl/THvgIKXJXBZixTh5dd5+yTJ/VXH7GJaaw21qXA==",
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.20.0.tgz",
+      "integrity": "sha512-dq70RUw6UK9ei7vxc4KQtBRk7qkHZv447OUZ6RPQMQl71I3NZxQJX/f32Smr+iqWrB02pHKn2yAdHBb0KNrRMA==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
-        "@typescript-eslint/scope-manager": "8.19.1",
-        "@typescript-eslint/types": "8.19.1",
-        "@typescript-eslint/typescript-estree": "8.19.1"
+        "@typescript-eslint/scope-manager": "8.20.0",
+        "@typescript-eslint/types": "8.20.0",
+        "@typescript-eslint/typescript-estree": "8.20.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1619,12 +1558,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.19.1",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.19.1.tgz",
-      "integrity": "sha512-fzmjU8CHK853V/avYZAvuVut3ZTfwN5YtMaoi+X9Y9MA9keaWNHC3zEQ9zvyX/7Hj+5JkNyK1l7TOR2hevHB6Q==",
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.20.0.tgz",
+      "integrity": "sha512-v/BpkeeYAsPkKCkR8BDwcno0llhzWVqPOamQrAEMdpZav2Y9OVjd9dwJyBLJWwf335B5DmlifECIkZRJCaGaHA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "8.19.1",
+        "@typescript-eslint/types": "8.20.0",
         "eslint-visitor-keys": "^4.2.0"
       },
       "engines": {
@@ -1761,13 +1700,13 @@
       }
     },
     "node_modules/@vue/eslint-config-prettier": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-10.1.0.tgz",
-      "integrity": "sha512-J6wV91y2pXc0Phha01k0WOHBTPsoSTf4xlmMjoKaeSxBpAdsgTppGF5RZRdOHM7OA74zAXD+VLANrtYXpiPKkQ==",
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-prettier/-/eslint-config-prettier-10.2.0.tgz",
+      "integrity": "sha512-GL3YBLwv/+b86yHcNNfPJxOTtVFJ4Mbc9UU3zR+KVoG7SwGTjPT+32fXamscNumElhcpXW3mT0DgzS9w32S7Bw==",
       "dev": true,
       "dependencies": {
-        "eslint-config-prettier": "^9.1.0",
-        "eslint-plugin-prettier": "^5.2.1"
+        "eslint-config-prettier": "^10.0.1",
+        "eslint-plugin-prettier": "^5.2.2"
       },
       "peerDependencies": {
         "eslint": ">= 8.21.0",
@@ -1775,13 +1714,14 @@
       }
     },
     "node_modules/@vue/eslint-config-typescript": {
-      "version": "14.2.0",
-      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-14.2.0.tgz",
-      "integrity": "sha512-JJ4wHuTJa2faQsBOUeWzuHOSFizVS7RWG2eH2noABk2LcT4wVcTOMZKM/lFobKBcgwADIPAKVRGFHVKooXImoA==",
+      "version": "14.3.0",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-14.3.0.tgz",
+      "integrity": "sha512-bOreIxlSC/xsUdhDdKIHb1grwJah+IokNeJ50LqA1StdOHeSPUxSIPNxyKgRx4YdjhyzC6TKtrCf6yYK99x3Uw==",
       "dev": true,
       "dependencies": {
-        "fast-glob": "^3.3.2",
-        "typescript-eslint": "^8.18.1",
+        "@typescript-eslint/utils": "^8.20.0",
+        "fast-glob": "^3.3.3",
+        "typescript-eslint": "^8.20.0",
         "vue-eslint-parser": "^9.4.3"
       },
       "engines": {
@@ -1822,6 +1762,30 @@
         }
       }
     },
+    "node_modules/@vue/language-core/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@vue/language-core/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.5.13",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
@@ -2021,12 +1985,13 @@
       }
     },
     "node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "dev": true,
       "dependencies": {
-        "balanced-match": "^1.0.0"
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
       }
     },
     "node_modules/braces": {
@@ -2718,21 +2683,21 @@
       }
     },
     "node_modules/eslint-config-prettier": {
-      "version": "9.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
-      "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.0.1.tgz",
+      "integrity": "sha512-lZBts941cyJyeaooiKxAtzoPHTN+GbQTJFAIdQbRhA4/8whaAraEh47Whw/ZFfrjNSnlAxqfm9i0XVAEkULjCw==",
       "dev": true,
       "bin": {
-        "eslint-config-prettier": "bin/cli.js"
+        "eslint-config-prettier": "build/bin/cli.js"
       },
       "peerDependencies": {
         "eslint": ">=7.0.0"
       }
     },
     "node_modules/eslint-plugin-prettier": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.1.tgz",
-      "integrity": "sha512-gH3iR3g4JfF+yYPaJYkN7jEl9QbweL/YfkoRlNnuIEHEz1vHVlCmWOS+eGGiRuzHQXdJFCOTxRgvju9b8VUmrw==",
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.3.tgz",
+      "integrity": "sha512-qJ+y0FfCp/mQYQ/vWQ3s7eUlFEL4PyKfAJxsnYTJ4YT73nsJBWqmEpFryxV9OeUiqmsTsYJ5Y+KDNaeP31wrRw==",
       "dev": true,
       "dependencies": {
         "prettier-linter-helpers": "^1.0.0",
@@ -2781,17 +2746,32 @@
         "eslint": "^6.2.0 || ^7.0.0 || ^8.0.0 || ^9.0.0"
       }
     },
+    "node_modules/eslint-plugin-vue/node_modules/globals": {
+      "version": "13.24.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
+      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^0.20.2"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/eslint-scope": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
-      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.2.0.tgz",
+      "integrity": "sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==",
       "dev": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
@@ -2809,32 +2789,6 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/brace-expansion": {
-      "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0",
-        "concat-map": "0.0.1"
-      }
-    },
-    "node_modules/eslint/node_modules/eslint-scope": {
-      "version": "8.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.2.0.tgz",
-      "integrity": "sha512-PHlWUfG6lvPc3yvP5A4PNyBL1W8fkDUccmI21JUu/+GKZBoH/W5u6usENXUrWFRsyoW5ACUjFGgAFQp5gUlb/A==",
-      "dev": true,
-      "dependencies": {
-        "esrecurse": "^4.3.0",
-        "estraverse": "^5.2.0"
-      },
-      "engines": {
-        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint"
-      }
-    },
     "node_modules/eslint/node_modules/eslint-visitor-keys": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
@@ -2847,7 +2801,7 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/espree": {
+    "node_modules/espree": {
       "version": "10.3.0",
       "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
       "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
@@ -2864,30 +2818,13 @@
         "url": "https://opencollective.com/eslint"
       }
     },
-    "node_modules/eslint/node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^1.1.7"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
-    "node_modules/espree": {
-      "version": "9.6.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
-      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+    "node_modules/espree/node_modules/eslint-visitor-keys": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
+      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
       "dev": true,
-      "dependencies": {
-        "acorn": "^8.9.0",
-        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^3.4.1"
-      },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
@@ -3115,15 +3052,12 @@
       }
     },
     "node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
       "dev": true,
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -3414,18 +3348,15 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "dependencies": {
-        "brace-expansion": "^2.0.1"
+        "brace-expansion": "^1.1.7"
       },
       "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
+        "node": "*"
       }
     },
     "node_modules/minimist": {
@@ -3558,6 +3489,15 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/npm-run-all2/node_modules/brace-expansion": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
+      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
     "node_modules/npm-run-all2/node_modules/isexe": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.1.tgz",
@@ -3567,6 +3507,21 @@
         "node": ">=16"
       }
     },
+    "node_modules/npm-run-all2/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/npm-run-all2/node_modules/which": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/which/-/which-5.0.0.tgz",
@@ -3716,9 +3671,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.49",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz",
-      "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==",
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
+      "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -3734,7 +3689,7 @@
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.7",
+        "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -3901,9 +3856,9 @@
       "integrity": "sha512-IXgzBWvWQwE6PrDI05OvmXUIruQTcoMDzRsOd5CDvHCVLcLHMTSYvOK5Cm46kWqlV3yAbuSpBZdJ5oP5OUoStg=="
     },
     "node_modules/rollup": {
-      "version": "4.30.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.30.1.tgz",
-      "integrity": "sha512-mlJ4glW020fPuLi7DkM/lN97mYEZGWeqBnrljzN0gs7GLctqX3lNWxKQ7Gl712UAX+6fog/L3jh4gb7R6aVi3w==",
+      "version": "4.31.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.31.0.tgz",
+      "integrity": "sha512-9cCE8P4rZLx9+PjoyqHLs31V9a9Vpvfo4qNcs6JCiGWYhw2gijSetFbH6SSy1whnkgcefnUwr8sad7tgqsGvnw==",
       "dependencies": {
         "@types/estree": "1.0.6"
       },
@@ -3915,25 +3870,25 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.30.1",
-        "@rollup/rollup-android-arm64": "4.30.1",
-        "@rollup/rollup-darwin-arm64": "4.30.1",
-        "@rollup/rollup-darwin-x64": "4.30.1",
-        "@rollup/rollup-freebsd-arm64": "4.30.1",
-        "@rollup/rollup-freebsd-x64": "4.30.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.30.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.30.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.30.1",
-        "@rollup/rollup-linux-arm64-musl": "4.30.1",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.30.1",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.30.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.30.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.30.1",
-        "@rollup/rollup-linux-x64-gnu": "4.30.1",
-        "@rollup/rollup-linux-x64-musl": "4.30.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.30.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.30.1",
-        "@rollup/rollup-win32-x64-msvc": "4.30.1",
+        "@rollup/rollup-android-arm-eabi": "4.31.0",
+        "@rollup/rollup-android-arm64": "4.31.0",
+        "@rollup/rollup-darwin-arm64": "4.31.0",
+        "@rollup/rollup-darwin-x64": "4.31.0",
+        "@rollup/rollup-freebsd-arm64": "4.31.0",
+        "@rollup/rollup-freebsd-x64": "4.31.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.31.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.31.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.31.0",
+        "@rollup/rollup-linux-arm64-musl": "4.31.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.31.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.31.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.31.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.31.0",
+        "@rollup/rollup-linux-x64-gnu": "4.31.0",
+        "@rollup/rollup-linux-x64-musl": "4.31.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.31.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.31.0",
+        "@rollup/rollup-win32-x64-msvc": "4.31.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -4223,14 +4178,14 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.19.1",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.19.1.tgz",
-      "integrity": "sha512-LKPUQpdEMVOeKluHi8md7rwLcoXHhwvWp3x+sJkMuq3gGm9yaYJtPo8sRZSblMFJ5pcOGCAak/scKf1mvZDlQw==",
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.20.0.tgz",
+      "integrity": "sha512-Kxz2QRFsgbWj6Xcftlw3Dd154b3cEPFqQC+qMZrMypSijPd4UanKKvoKDrJ4o8AIfZFKAF+7sMaEIR8mTElozA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.19.1",
-        "@typescript-eslint/parser": "8.19.1",
-        "@typescript-eslint/utils": "8.19.1"
+        "@typescript-eslint/eslint-plugin": "8.20.0",
+        "@typescript-eslint/parser": "8.20.0",
+        "@typescript-eslint/utils": "8.20.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -4384,6 +4339,39 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-eslint-parser/node_modules/eslint-scope": {
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
+      "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/vue-eslint-parser/node_modules/espree": {
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
+      "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.9.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.1"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/vue-tsc": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.2.0.tgz",
diff --git a/packages/modules/display_themes/colors/source/package.json b/packages/modules/display_themes/colors/source/package.json
index 9d3e2b6167..a69143257c 100644
--- a/packages/modules/display_themes/colors/source/package.json
+++ b/packages/modules/display_themes/colors/source/package.json
@@ -30,17 +30,17 @@
     "@tsconfig/node20": "^20.1.4",
     "@types/bootstrap": "^5.2.10",
     "@types/d3": "^7.4.3",
-    "@types/node": "^20.17.12",
+    "@types/node": "^20.17.14",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vue/eslint-config-prettier": "^10.1.0",
-    "@vue/eslint-config-typescript": "^14.2.0",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.3.0",
     "@vue/tsconfig": "^0.7.0",
     "esbuild": "^0.24.2",
     "eslint": "^9.18.0",
     "eslint-plugin-vue": "^9.32.0",
     "npm-run-all2": "^7.0.2",
     "prettier": "^3.4.2",
-    "rollup": "^4.30.1",
+    "rollup": "^4.31.0",
     "typescript": "^5.7.3",
     "vite": "^6.0.7",
     "vue-tsc": "^2.2.0"
diff --git a/packages/modules/display_themes/colors/source/src/App.vue b/packages/modules/display_themes/colors/source/src/App.vue
index 4c18711a70..598bac0d6d 100644
--- a/packages/modules/display_themes/colors/source/src/App.vue
+++ b/packages/modules/display_themes/colors/source/src/App.vue
@@ -6,8 +6,30 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
 import NavigationBar from './views/NavigationBar.vue'
 import DisplayTheme from './views/DisplayTheme.vue'
+import { wbSettings } from './assets/js/themeConfig'
+
+onMounted(() => {
+	console.log('on mounted')
+	let uri = window.location.search
+	if (uri != '') {
+		console.debug('search', uri)
+		let params = new URLSearchParams(uri)
+		if (params.has('data')) {
+			let data = JSON.parse(params.get('data')!)
+			Object.entries(data).forEach(([key, value]) => {
+				console.log('updateSetting', key, value)
+				if (key.startsWith('parentChargePoint')) {
+					wbSettings[key] = parseInt(value as string)
+				} else {
+					wbSettings[key] = value as string
+				}
+			})
+		}
+	}
+})
 </script>
 
 <style>
diff --git a/packages/modules/display_themes/colors/source/src/assets/js/sendMessages.ts b/packages/modules/display_themes/colors/source/src/assets/js/sendMessages.ts
index 8f18815068..c3225fbd94 100755
--- a/packages/modules/display_themes/colors/source/src/assets/js/sendMessages.ts
+++ b/packages/modules/display_themes/colors/source/src/assets/js/sendMessages.ts
@@ -97,10 +97,11 @@ export function updateServer(
 	}
 }
 
-export function sendCommand(event: object) {
-	// console.log ("SENDCOMMAND " + JSON.stringify(event))
+export function sendCommand(command: string, data: object = {}) {
+	console.log('send command ' + command + ' ' + JSON.stringify(data))
+
 	mqttPublish(
-		'openWB/set/command/' + mqttClientId() + '/todo',
-		JSON.stringify(event),
+		`openWB/set/command/${mqttClientId()}/todo`,
+		JSON.stringify({ command: command, data: data }),
 	)
 }
diff --git a/packages/modules/display_themes/colors/source/src/assets/js/themeConfig.ts b/packages/modules/display_themes/colors/source/src/assets/js/themeConfig.ts
index 5e182e3f78..c9395cadd0 100755
--- a/packages/modules/display_themes/colors/source/src/assets/js/themeConfig.ts
+++ b/packages/modules/display_themes/colors/source/src/assets/js/themeConfig.ts
@@ -43,6 +43,8 @@ export class Config {
 	animationDuration = 300
 	animationDelay = 100
 	zoomGraph = false
+	parentChargePoint1: undefined
+	parentChargePoint2: undefined
 
 	constructor() {}
 	get showRelativeArcs() {
@@ -249,6 +251,16 @@ export class Config {
 	}
 }
 export const globalConfig = reactive(new Config())
+export const wbSettings: { [key: string]: string | number | undefined } =
+	reactive({
+		localIp: undefined,
+		localBranch: undefined,
+		localCommit: undefined,
+		localVersion: undefined,
+		parentChargePoint1: undefined,
+		parentChargePoint2: undefined,
+	})
+
 export function initConfig() {
 	// readCookie()
 	// set the background
diff --git a/packages/modules/display_themes/colors/source/src/components/powerGraph/model.ts b/packages/modules/display_themes/colors/source/src/components/powerGraph/model.ts
index 56a270dd14..5a1cef14e9 100755
--- a/packages/modules/display_themes/colors/source/src/components/powerGraph/model.ts
+++ b/packages/modules/display_themes/colors/source/src/components/powerGraph/model.ts
@@ -146,10 +146,8 @@ export const dayGraph = reactive({
 				(this.date.getMonth() + 1).toString().padStart(2, '0') +
 				this.date.getDate().toString().padStart(2, '0')
 			mqttSubscribe(this.topic)
-			sendCommand({
-				command: 'getDailyLog',
-				data: { day: dateString },
-			})
+			sendCommand('getDailyLog',{ day: dateString })
+			
 			// graphData.data = []
 		}
 	},
@@ -178,10 +176,7 @@ export const monthGraph = reactive({
 			this.year.toString() + this.month.toString().padStart(2, '0')
 		graphData.data = []
 		mqttSubscribe(this.topic)
-		sendCommand({
-			command: 'getMonthlyLog',
-			data: { month: dateString },
-		})
+		sendCommand('getMonthlyLog',{ month: dateString })
 	},
 	deactivate() {
 		mqttUnsubscribe(this.topic)
@@ -221,10 +216,7 @@ export const yearGraph = reactive({
 		const dateString = this.year.toString()
 		graphData.data = []
 		mqttSubscribe(this.topic)
-		sendCommand({
-			command: 'getYearlyLog',
-			data: { year: dateString },
-		})
+		sendCommand('getYearlyLog', { year: dateString })
 	},
 	deactivate() {
 		mqttUnsubscribe(this.topic)
diff --git a/packages/modules/display_themes/colors/source/src/views/StatusPage.vue b/packages/modules/display_themes/colors/source/src/views/StatusPage.vue
index 6aa686cc7b..3a68f63489 100644
--- a/packages/modules/display_themes/colors/source/src/views/StatusPage.vue
+++ b/packages/modules/display_themes/colors/source/src/views/StatusPage.vue
@@ -13,60 +13,136 @@
 		><span>{{ globalData.devBranch }}</span>
 	</div>
 
-	<!-- <div v-if="!restart && !shutdown" class="controlbuttons d-flex justify-content-between p-5">
-		<button class="btn controlbutton" :style="{'background-color': 'var(--color-battery)'}" @click="reload()">
-			<i class="fa-solid fa-rotate-left"/>
+	<div
+		v-if="status == Status.running"
+		class="controlbuttons d-flex justify-content-between p-5"
+	>
+		<button
+			class="btn controlbutton"
+			:style="{ 'background-color': 'var(--color-battery)' }"
+			@click="reload()"
+		>
+			<i class="fa-solid fa-rotate-left" />
 			Display neu laden
 		</button>
-		<button class="btn controlbutton" :style="{'background-color': 'var(--color-evu)'}" @click="restart = true">
-			<i class="fa-solid fa-power-off"/>
+		<button
+			class="btn controlbutton"
+			:style="{ 'background-color': 'var(--color-evu)' }"
+			@click="status = Status.restartRequested"
+		>
+			<i class="fa-solid fa-power-off" />
 			openWB neu starten
 		</button>
-		<button class="btn controlbutton" :style="{'background-color': 'var(--color-evu)'}" @click="shutdown = true">
-			<i class="fa-solid fa-power-off"/>
+		<button
+			class="btn controlbutton"
+			:style="{ 'background-color': 'var(--color-evu)' }"
+			@click="status = Status.shutdownRequested"
+		>
+			<i class="fa-solid fa-power-off" />
 			openWB abschalten
 		</button>
-	</div> -->
-	<!-- <div v-if="restart"
-			class="confirmationBox rounded m-5 p-5 d-flex flex-column align-items-center "
+	</div>
+	<div
+		v-if="status == Status.restartRequested"
+		class="confirmationBox rounded m-5 p-5 d-flex flex-column align-items-center"
+	>
+		<span class="confirmTitle">Neustart</span>
+		<span class="confirmQuestion">Die openWB jetzt neu starten?</span>
+		<div class="d-flex justify-content-between mt-3">
+			<button
+				class="btn cancelButton mx-3 px-3"
+				@click="status = Status.running"
+			>
+				Abbrechen
+			</button>
+			<button class="btn confirmButton mx-3 px-3" @click="restartWB()">
+				Neustart
+			</button>
+		</div>
+	</div>
+	<div
+		v-if="status == Status.shutdownRequested"
+		class="confirmationBox rounded m-5 p-5 d-flex flex-column align-items-center"
+	>
+		<span class="confirmTitle">Abschalten</span>
+		<span class="confirmQuestion">Die openWB jetzt abschalten?</span>
+		<div class="d-flex justify-content-between mt-3">
+			<button
+				class="btn cancelButton mx-3 px-3"
+				@click="status = Status.running"
+			>
+				Abbrechen
+			</button>
+			<button class="btn confirmButton mx-3 px-3" @click="shutdownWB()">
+				Abschalten
+			</button>
+		</div>
+	</div>
+	<div
+		v-if="status == Status.restartConfirmed"
+		class="confirmationBox rounded m-5 p-5 d-flex flex-column align-items-center"
+	>
+		<span class="confirmTitle"
+			>Die openWB startet jetzt neu. Bitte warten.</span
 		>
-			<span class="confirmTitle">Neustart</span>
-			<span class="confirmQuestion">Die openWB jetzt neu starten?</span>
-			<div class="d-flex justify-content-between mt-3">
-				<button class="btn cancelButton mx-3 px-3" @click="restart=false">Abbrechen</button>
-				<button class="btn confirmButton mx-3 px-3" @click="restartWB()">Neustart</button>
-			</div>
-			
-		</div> -->
-	<!-- <div v-if="shutdown"
-			class="confirmationBox rounded m-5 p-5 d-flex flex-column align-items-center "
+	</div>
+	<div
+		v-if="status == Status.shutdownConfirmed"
+		class="confirmationBox rounded m-5 p-5 d-flex flex-column align-items-center"
+	>
+		<span class="confirmTitle"
+			>Die openWB wird heruntergefahren. Zum Starten die Stromversorgung aus-
+			und wieder einschalten.</span
 		>
-			<span class="confirmTitle">Abschalten</span>
-			<span class="confirmQuestion">Die openWB jetzt abschalten?</span>
-			<div class="d-flex justify-content-between mt-3">
-				<button class="btn cancelButton mx-3 px-3" @click="shutdown=false">Abbrechen</button>
-				<button class="btn confirmButton mx-3 px-3" @click="shutdownWB()">Abschalten</button>
-			</div>
-			
-		</div> -->
+	</div>
 </template>
 
 <script setup lang="ts">
 import { globalData } from '@/assets/js/model'
-/* import { sendCommand } from '@/assets/js/sendMessages'
-import { ref } from 'vue'
-let restart = ref(false)
-let shutdown = ref(false)
-
+import { sendCommand } from '@/assets/js/sendMessages'
+import { wbSettings } from '@/assets/js/themeConfig'
+import { ref, type Ref } from 'vue'
+enum Status {
+	running,
+	restartRequested,
+	shutdownRequested,
+	restartConfirmed,
+	shutdownConfirmed,
+}
+let status: Ref<Status> = ref(Status.running)
 function shutdownWB() {
-	sendCommand({})
+	status.value = Status.shutdownConfirmed
+	if (wbSettings.parentChargePoint1 !== undefined) {
+		console.log(
+			'Shutting down secondary charge point: ',
+			wbSettings.parentChargePoint1,
+		)
+		sendCommand('chargepointShutdown', {
+			chargePoint: wbSettings.parentChargePoint1,
+		})
+	} else {
+		console.log('Shutting down primary system')
+		sendCommand('systemShutdown')
+	}
 }
 function restartWB() {
-	sendCommand({})
+	status.value = Status.restartConfirmed
+	if (wbSettings.parentChargePoint1 !== undefined) {
+		console.log(
+			'Rebooting secondary charge point:',
+			wbSettings.parentChargePoint1,
+		)
+		sendCommand('chargepointReboot', {
+			chargePoint: wbSettings.parentChargePoint1,
+		})
+	} else {
+		console.log('Rebooting primary system')
+		sendCommand('systemReboot')
+	}
 }
 function reload() {
 	location.reload()
-} */
+}
 </script>
 
 <style scoped>