From 42d927a586be8b2eba3a4fd8272b87511b3001cb Mon Sep 17 00:00:00 2001
From: Claus Hagen <cshagen@hagens.ch>
Date: Sat, 19 Jul 2025 15:37:23 +0200
Subject: [PATCH] fix phase selection and improve pricechart display

---
 .../chargePointList/configPanels/ConfigEco.vue       | 10 +++++++---
 .../chargePointList/configPanels/ConfigInstant.vue   |  4 ++--
 .../chargePointList/configPanels/ConfigPv.vue        |  4 ++--
 .../source/src/components/priceChart/PriceChart.vue  | 12 +++++++++---
 .../source/src/components/shared/ConfigItem.vue      | 10 ++++++++--
 .../source/src/components/shared/RadioInput.vue      |  9 ++++++++-
 6 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigEco.vue b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigEco.vue
index b173ae5941..880c70eabe 100644
--- a/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigEco.vue
+++ b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigEco.vue
@@ -5,7 +5,8 @@
 			:charge-point-id="props.chargepoint.id"
 			class="fullwidth"
 		/>
-		<span class="fullwidth mb-4">
+
+		<span class="fullwidth mb-4 mt-2">
 			<button type="button" class="btn btn-secondary" @click="pageDown">
 				<i class="fa-solid fa-circle-down me-2"></i>
 				Abwärts
@@ -35,8 +36,8 @@
 				v-model="cp.ecoTargetPhases"
 				:options="[
 					['Eine', 1],
-					['Max', 2],
-					['Auto', 3],
+					['Max', 3],
+					['Auto', 0],
 				]"
 			/>
 		</ConfigItem>
@@ -161,4 +162,7 @@ function pageUp() {
 .fullwidth {
 	grid-column: 1 / -1;
 }
+.chartsection {
+	border: 1px solid var(--color-border);
+}
 </style>
diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigInstant.vue b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigInstant.vue
index af7bc4e6ef..fa08a2d536 100755
--- a/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigInstant.vue
+++ b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigInstant.vue
@@ -19,8 +19,8 @@
 				v-model="cp.instantTargetPhases"
 				:options="[
 					['Eine', 1],
-					['Max', 2],
-					['Auto', 3],
+					['Max', 3],
+					['Auto', 0],
 				]"
 			/>
 		</ConfigItem>
diff --git a/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigPv.vue b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigPv.vue
index 45a2ea8cd0..a4838cb768 100755
--- a/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigPv.vue
+++ b/packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigPv.vue
@@ -27,8 +27,8 @@
 				v-model="cp.pvTargetPhases"
 				:options="[
 					['Eine', 1],
-					['Max', 2],
-					['Auto', 3],
+					['Max', 3],
+					['Auto', 0],
 				]"
 			/>
 		</ConfigItem>
diff --git a/packages/modules/display_themes/colors/source/src/components/priceChart/PriceChart.vue b/packages/modules/display_themes/colors/source/src/components/priceChart/PriceChart.vue
index 9d69d6e5d9..62e29ef3dd 100755
--- a/packages/modules/display_themes/colors/source/src/components/priceChart/PriceChart.vue
+++ b/packages/modules/display_themes/colors/source/src/components/priceChart/PriceChart.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="pricesettings">
-		<div class="grapharea">
+		<div class="grapharea rounded shadow p-2">
 			<span>Anbieter: {{ etData.etProvider }}</span>
 			<figure id="pricechart">
 				<svg viewBox="0 0 400 270">
@@ -12,7 +12,7 @@
 				</svg>
 			</figure>
 		</div>
-		<div class="controlarea">
+		<div class="controlarea rounded shadow p-2">
 			<span class="pt-1 pb-2 d-flex justify-content-between">
 				<button
 					type="button"
@@ -323,7 +323,7 @@ onMounted(() => {
 .pricesettings {
 	display: grid;
 	grid-template-columns: 50% 50%;
-	grid-template-rows: 325px;
+	grid-template-rows: 310px;
 }
 .grapharea {
 	display: flex;
@@ -333,6 +333,9 @@ onMounted(() => {
 	min-width: 0px;
 	overflow: hidden;
 	height: 100%;
+	margin-right: 5px;
+	border: 1px solid var(--color-frame);
+	border-radius: 30px;
 }
 .controlarea {
 	display: flex;
@@ -344,6 +347,9 @@ onMounted(() => {
 	height: 100%;
 	padding-left: 20px;
 	padding-right: 10px;
+	margin-left: 5px;
+	border: 1px solid var(--color-frame);
+	border-radius: 30px;
 }
 .sliderarea {
 	margin-bottom: 5px;
diff --git a/packages/modules/display_themes/colors/source/src/components/shared/ConfigItem.vue b/packages/modules/display_themes/colors/source/src/components/shared/ConfigItem.vue
index ff1cf278c5..9cbc6c4dc7 100755
--- a/packages/modules/display_themes/colors/source/src/components/shared/ConfigItem.vue
+++ b/packages/modules/display_themes/colors/source/src/components/shared/ConfigItem.vue
@@ -11,9 +11,9 @@
 		{{ title }}</span
 	>
 	<div
-		class="ms-1 mb-2 p-0 pt-2 d-flex justify-content-stretch align-items-center"
+		class="configwidget ms-1 mb-2 p-0 pt-2 d-flex justify-content-stretch align-items-center"
 	>
-		<span class="justify-content-stretch d-flex">
+		<span class="configslot justify-content-stretch d-flex">
 			<slot />
 		</span>
 	</div>
@@ -30,6 +30,12 @@ const props = defineProps<{
 </script>
 
 <style scoped>
+.configwidget {
+	width: 100%;
+}
+.configslot {
+	width: 100%;
+}
 .infotext {
 	font-size: var(--font-settings);
 	color: var(--color-battery);
diff --git a/packages/modules/display_themes/colors/source/src/components/shared/RadioInput.vue b/packages/modules/display_themes/colors/source/src/components/shared/RadioInput.vue
index 0b2e45838c..41e670697c 100755
--- a/packages/modules/display_themes/colors/source/src/components/shared/RadioInput.vue
+++ b/packages/modules/display_themes/colors/source/src/components/shared/RadioInput.vue
@@ -30,6 +30,8 @@ const v = computed({
 		return props.modelValue
 	},
 	set(value: number | string) {
+		console.log(props.options)
+		console.log('set value', value)
 		emit('update:modelValue', value)
 	},
 })
@@ -41,13 +43,18 @@ function getColor(index: number) {
 	}
 }
 function setValue(event: Event) {
+	console.log(event)
 	let element = event.target as HTMLButtonElement
 	while (element && !element.value && element.parentElement) {
 		// we need to move up the DOM in case a sub element of the button was clicked
 		element = element.parentElement as HTMLButtonElement
 	}
 	if (element.value) {
-		v.value = element.value
+		if (typeof props.options[0][1] === 'number') {
+			v.value = Number(element.value)
+		} else {
+			v.value = element.value
+		}
 	}
 }
 </script>