Colors theme: adapt to new charge mode concept

packages/modules/web_themes/colors/source/src/assets/css/style.css

@@ -196,6 +196,7 @@ body>.container-fluid {
 	--font-verysmall: 0.7rem;
 	--font-extralarge: 1.7rem;
 	--font-settings: 16px;
+	--font-settings-button: 14px;
 }
 
 /* Theme color sets */
@@ -314,7 +315,11 @@ body>.container-fluid {
 	gap: .2em;
 	justify-items: center;
 }
-.grid-col-3 {
+.grid-col-1 {
+	grid-column: span 1;
+}.grid-col-2 {
+	grid-column: span 2;
+}.grid-col-3 {
 	grid-column: span 3;
 }
 .grid-col-4 {

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

@@ -45,6 +45,7 @@ const topics: { [topic: string]: string } = {
 	socUpdate: 'openWB/set/vehicle/%/get/force_soc_update',
 	setSoc: 'openWB/set/vehicle/%/soc_module/calculated_soc_state/manual_soc',
 	priceCharging: 'openWB/set/vehicle/template/charge_template/%/et/active',
+	chargeTemplate: 'openWB/set/chargepoint/%/set/charge_template',
 }
 export function updateServer(
 	item: string,
@@ -61,7 +62,7 @@ export function updateServer(
 		return
 	}
 	switch (item) {
-		case 'chargeMode':
+		/* case 'chargeMode':
 		case 'cpPriority':
 		case 'cpScheduledCharging':
 		case 'cpInstantTargetCurrent':
@@ -76,7 +77,7 @@ export function updateServer(
 		case 'cpPvMinSocCurrent':
 			// these values are set in the charge template
 			topic = topic.replace('%', chargePoints[index].chargeTemplate.toString())
-			break
+			break */
 		default:
 			topic = topic.replace('%', String(index))
 	}
@@ -96,3 +97,10 @@ export function sendCommand(event: object) {
 		JSON.stringify(event),
 	)
 }
+
+export function updateChargeTemplate(cp: number) {
+	mqttPublish(
+		topics.chargeTemplate.replace('%', String(cp)),
+		JSON.stringify(chargePoints[cp].chargeTemplate),
+	)
+}

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

@@ -362,7 +362,7 @@ export const chargemodes: { [key: string]: ChargeModeInfo } = {
 	pv_charging: {
 		mode: ChargeMode.pv_charging,
 		name: 'PV',
-		color: 'var(--color-pv',
+		color: 'var(--color-pv)',
 		icon: 'fa-solar-panel',
 	},
 	scheduled_charging: {
@@ -371,11 +371,11 @@ export const chargemodes: { [key: string]: ChargeModeInfo } = {
 		color: 'var(--color-battery)',
 		icon: 'fa-bullseye',
 	},
-	standby: {
-		mode: ChargeMode.standby,
-		name: 'Standby',
-		color: 'var(--color-axis',
-		icon: 'fa-pause',
+	eco_charging: {
+		mode: ChargeMode.eco_charging,
+		name: 'Eco',
+		color: 'var(--color-devices)',
+		icon: 'fa-coins',
 	},
 	stop: {
 		mode: ChargeMode.stop,

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

@@ -33,7 +33,7 @@ export enum ChargeMode {
 	instant_charging = 'instant_charging',
 	pv_charging = 'pv_charging',
 	scheduled_charging = 'scheduled_charging',
-	standby = 'standby',
+	eco_charging = 'eco_charging',
 	stop = 'stop',
 }
 

packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue

@@ -36,7 +36,12 @@ Hagen */
 				</span>
 			</InfoItem>
 		</div>
-		<BLBattery v-for="[key, battery] in batteries" :key="key" :bat="battery" />
+		<BLBattery
+			v-for="[key, battery] in batteries"
+			:key="key"
+			:bat="battery"
+			class="px-4"
+		/>
 	</WbWidgetFlex>
 </template>
 

packages/modules/web_themes/colors/source/src/components/buttonBar/BBSelect.vue

@@ -122,7 +122,7 @@ const buttons = [
 		name: 'Zielladen',
 		color: 'var(--color-battery)',
 	},
-	{ mode: 'standby', name: 'Standby', color: 'var(--color-axis)' },
+	{ mode: 'eco_charging', name: 'Eco', color: 'var(--color-devices)' },
 	{ mode: 'stop', name: 'Stop', color: 'var(--color-axis)' },
 ]
 const cp = computed(() => {

packages/modules/web_themes/colors/source/src/components/buttonBar/BbChargeButton.vue

@@ -100,7 +100,6 @@ const modePillStyle = computed(() => {
 					style = swapcolors(style)
 				}
 				break
-			case ChargeMode.standby:
 			case ChargeMode.stop:
 				style.background = 'darkgrey'
 				style.color = 'black'

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

@@ -215,18 +215,15 @@
 					</div>
 					<!-- ET Information -->
 					<hr class="divider grid-col-12" />
+
 					<InfoItem
 						v-if="etData.active"
-						heading="Preisladen:"
+						heading="Strompreis:"
 						class="grid-col-4 grid-left"
 					>
-						<SwitchInput v-model="cp.etActive" />
+						<span :style="currentPriceStyle">{{ currentPrice }} ct </span>
 					</InfoItem>
-					<InfoItem
-						v-if="etData.active"
-						heading="max. Preis:"
-						class="grid-col-4"
-					>
+					<InfoItem v-if="cp.etActive" heading="max. Preis:" class="grid-col-4">
 						<span type="button" @click="editPrice = !editPrice"
 							>{{
 								props.chargepoint.etActive
@@ -235,19 +232,13 @@
 										).toFixed(1) + ' ct'
 									: '-'
 							}}
+
 							<i
 								v-if="props.chargepoint.etActive"
 								class="fa-solid fa-sm fas fa-edit ms-2"
 							/>
 						</span>
 					</InfoItem>
-					<InfoItem
-						v-if="etData.active"
-						heading="akt. Preis:"
-						class="grid-col-4 grid-right"
-					>
-						<span :style="currentPriceStyle">{{ currentPrice }} ct </span>
-					</InfoItem>
 
 					<div
 						v-if="editPrice"
@@ -314,7 +305,7 @@ import { updateServer } from '@/assets/js/sendMessages'
 import RangeInput from '../shared/RangeInput.vue'
 import PriceChart from '../priceChart/PriceChart.vue'
 import { etData } from '../priceChart/model'
-import SwitchInput from '../shared/SwitchInput.vue'
+//import SwitchInput from '../shared/SwitchInput.vue'
 
 const props = defineProps<{
 	chargepoint: ChargePoint
@@ -327,6 +318,7 @@ const chargeMode = computed({
 		return props.chargepoint.chargeMode
 	},
 	set(newMode) {
+		console.log('set mode')
 		chargePoints[props.chargepoint.id].chargeMode = newMode
 	},
 })

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

@@ -9,8 +9,9 @@
 		:infotext="infotext['chargemode']"
 		:fullwidth="true"
 	>
-		<RadioInput
+		<RadioInput2
 			v-model="cp.chargeMode"
+			:columns="3"
 			:options="
 				Object.keys(chargemodes).map((v) => [
 					chargemodes[v].name,
@@ -23,12 +24,13 @@
 	</ConfigItem>
 	<!-- Select the vehicle -->
 	<ConfigItem
+		v-if="Object.values(vehicles).filter((v) => v.visible).length > 1"
 		title="Fahrzeug wechseln"
 		icon="fa-car"
 		:infotext="infotext['vehicle']"
 		:fullwidth="true"
 	>
-		<RadioInput
+		<RadioInput2
 			v-model.number="cp.connectedVehicle"
 			:options="
 				Object.values(vehicles)
@@ -43,7 +45,9 @@
 		:infotext="infotext['locked']"
 		:fullwidth="true"
 	>
-		<SwitchInput v-model="cp.isLocked" />
+		<template #inline-item>
+			<SwitchInput v-model="cp.isLocked" />
+		</template>
 	</ConfigItem>
 	<!-- Priority -->
 	<ConfigItem
@@ -52,7 +56,9 @@
 		:infotext="infotext['priority']"
 		:fullwidth="true"
 	>
-		<SwitchInput v-model="cp.hasPriority" />
+		<template #inline-item>
+			<SwitchInput v-model="cp.hasPriority" />
+		</template>
 	</ConfigItem>
 	<!-- Scheduled Charging -->
 	<ConfigItem
@@ -61,7 +67,9 @@
 		:infotext="infotext['timeplan']"
 		:fullwidth="true"
 	>
-		<SwitchInput v-model="cp.timedCharging" />
+		<template #inline-item>
+			<SwitchInput v-model="cp.timedCharging" />
+		</template>
 	</ConfigItem>
 	<!-- Priority mode if battery exists -->
 	<ConfigItem
@@ -71,15 +79,15 @@
 		:infotext="infotext['pvpriority']"
 		:fullwidth="true"
 	>
-		<RadioInput
+		<RadioInput2
 			v-model="globalData.pvBatteryPriority"
 			:options="evPriorityModes"
 		>
-		</RadioInput
+		</RadioInput2
 	></ConfigItem>
 
 	<!-- Price based Charging -->
-	<ConfigItem
+	<!-- <ConfigItem
 		v-if="etData.active"
 		title="Strompreisbasiert laden"
 		icon="fa-money-bill"
@@ -88,6 +96,7 @@
 	>
 		<SwitchInput v-model="cp.etActive" />
 	</ConfigItem>
+ -->
 </template>
 
 <script setup lang="ts">
@@ -96,8 +105,8 @@ import { ChargePoint, vehicles } from '../model'
 import ConfigItem from '../../shared/ConfigItem.vue'
 import { infotext } from '@/assets/js/themeConfig'
 import SwitchInput from '../../shared/SwitchInput.vue'
-import RadioInput from '@/components/shared/RadioInput.vue'
-import { etData } from '@/components/priceChart/model'
+import RadioInput2 from '@/components/shared/RadioInput2.vue'
+//import { etData } from '@/components/priceChart/model'
 import { globalData } from '@/assets/js/model'
 import { evPriorityModes } from '@/assets/js/types'
 const props = defineProps<{