Colors Theme (Display): Adapt to new charge template concept

packages/modules/display_themes/colors/source/src/App.vue

@@ -12,7 +12,6 @@ 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)

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

@@ -49,6 +49,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,
@@ -66,7 +67,7 @@ export function updateServer(
 		return
 	}
 	switch (item) {
-		case 'chargeMode':
+		/* case 'chargeMode':
 		case 'cpPriority':
 		case 'cpScheduledCharging':
 		case 'cpInstantTargetCurrent':
@@ -81,7 +82,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))
 			if (index2 != undefined) {
@@ -105,3 +106,10 @@ export function sendCommand(command: string, data: object = {}) {
 		JSON.stringify({ command: command, data: data }),
 	)
 }
+
+export function updateChargeTemplate(cp: number) {
+	mqttPublish(
+		topics.chargeTemplate.replace('%', String(cp)),
+		JSON.stringify(chargePoints[cp].chargeTemplate),
+	)
+}

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

@@ -293,29 +293,29 @@ export const widescreen = computed(() => {
 	return screensize.x >= breakpoint
 })
 export const chargemodes: { [key: string]: ChargeModeInfo } = {
-	pv_charging: {
-		mode: ChargeMode.pv_charging,
-		name: 'PV',
-		color: 'var(--color-pv',
-		icon: 'fa-solar-panel',
-	},
 	instant_charging: {
 		mode: ChargeMode.instant_charging,
 		name: 'Sofort',
 		color: 'var(--color-charging)',
 		icon: 'fa-bolt',
 	},
+	pv_charging: {
+		mode: ChargeMode.pv_charging,
+		name: 'PV',
+		color: 'var(--color-pv',
+		icon: 'fa-solar-panel',
+	},
 	scheduled_charging: {
 		mode: ChargeMode.scheduled_charging,
 		name: 'Zielladen',
 		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/display_themes/colors/source/src/components/chargePointList/CPChargePoint.vue → packages/modules/display_themes/colors/source/src/components/chargePointList/ChargePoint.vue

@@ -68,7 +68,7 @@
 
 		<!-- Car information-->
 		<template #footer>
-			<CPVehicle :chargepoint="props.chargepoint" />
+			<VehicleData :chargepoint="props.chargepoint" />
 		</template>
 	</WBWidget>
 </template>
@@ -83,7 +83,7 @@ import InfoItem from '@/components/shared/InfoItem.vue'
 import FormatWatt from '@/components/shared/FormatWatt.vue'
 import FormatWattH from '../shared/FormatWattH.vue'
 import DisplayButton from '@/components/shared/DisplayButton.vue'
-import CPVehicle from './CPVehicle.vue'
+import VehicleData from './VehicleData.vue'
 
 const props = defineProps<{
 	chargepoint: ChargePoint
@@ -174,6 +174,9 @@ function openSettings() {
 			case 'scheduled_charging':
 				chargePanelName = '#scSettings'
 				break
+			case 'eco_charging':
+				chargePanelName = '#ecSettings'
+				break
 			default:
 				chargePanelName = '#chSettings'
 		}

packages/modules/display_themes/colors/source/src/components/chargePointList/CPVehicle.vue → packages/modules/display_themes/colors/source/src/components/chargePointList/VehicleData.vue

@@ -78,14 +78,15 @@
 		</div>
 		<div class="infoline">
 			<!-- ET Information -->
-			<InfoItem
+			<!-- <InfoItem
 				v-if="etData.active"
 				heading="Preisladen:"
 				class="grid-col-4 grid-left"
 			>
 				<SwitchInput v-model="cp.etActive" />
-				<!--{{ cp.etActive ? 'Ja' : 'Nein' }}-->
-			</InfoItem>
+				{{ 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')">
@@ -139,7 +140,6 @@ import InfoItem from '@/components/shared/InfoItem.vue'
 import BatterySymbol from '@/components/shared/BatterySymbol.vue'
 import RadioBarInput from '@/components/shared/RadioBarInput.vue'
 import DisplayButton from '@/components/shared/DisplayButton.vue'
-import SwitchInput from '../shared/SwitchInput.vue'
 import RangeInput from '../shared/RangeInput.vue'
 import { etData } from '../priceChart/model'
 import { computed } from 'vue'

packages/modules/display_themes/colors/source/src/components/chargePointList/CPChargeConfig.vue → packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ChargeConfig.vue

@@ -11,7 +11,7 @@
 				:options="Object.values(vehicles).map((v) => [v.name, v.id])"
 			/>
 		</ConfigItem>
-		<ConfigItem
+		<!-- <ConfigItem
 			v-if="Object.keys(chargeTemplates).length > 1"
 			title="Ladeprofil"
 			icon="fa-sliders"
@@ -25,6 +25,7 @@
 				"
 			/>
 		</ConfigItem>
+		 -->
 		<hr class="grid-col-2 my-2" />
 		<ConfigItem
 			title="Priorität"
@@ -51,13 +52,14 @@
 		</ConfigItem>
 		<!-- Priority -->
 
-		<ConfigItem
+		<!-- <ConfigItem
 			title="Strompreisbasiert laden"
 			icon="fa-coins"
 			iconcolor="var(--color-battery)"
 		>
 			<SwitchInput v-model="etActive"></SwitchInput>
 		</ConfigItem>
+		 -->
 		<hr v-if="globalData.isBatteryConfigured" class="grid-col-2 my-2" />
 		<ConfigItem
 			v-if="globalData.isBatteryConfigured"
@@ -76,7 +78,7 @@
 </template>
 
 <script setup lang="ts">
-import { vehicles, chargePoints, chargeTemplates } from './model'
+import { vehicles, chargePoints } from '../model'
 import ConfigItem from '@/components/shared/ConfigItem.vue'
 import SwitchInput from '@/components/shared/SwitchInput.vue'
 import RadioInput from '@/components/shared/RadioInput.vue'
@@ -99,12 +101,6 @@ const connectedVehicle = computed({
 		chargePoints[cp.value.id].connectedVehicle = value
 	},
 })
-const etActive = computed({
-	get: () => cp.value.etActive,
-	set: (value: boolean) => {
-		chargePoints[cp.value.id].etActive = value
-	},
-})
 const timedCharging = computed({
 	get: () => cp.value.timedCharging,
 	set: (value: boolean) => {

packages/modules/display_themes/colors/source/src/components/chargePointList/configPanels/ConfigEco.vue

@@ -0,0 +1,164 @@
+<template>
+	<div class="ecosettings">
+		<PriceChart
+			v-if="etData.active && etData.etPriceList.size > 0"
+			:charge-point-id="props.chargepoint.id"
+			class="fullwidth"
+		/>
+		<span class="fullwidth mb-4">
+			<button type="button" class="btn btn-secondary" @click="pageDown">
+				<i class="fa-solid fa-circle-down me-2"></i>
+				Abwärts
+			</button>
+		</span>
+
+		<!-- Minimal ampere -->
+		<ConfigItem
+			title="Minimaler Ladestrom unter der Preisgrenze"
+			icon="fa-bolt"
+			:fullwidth="true"
+		>
+			<RangeInput
+				id="minCurrent"
+				v-model="cp.ecoMinCurrent"
+				:min="6"
+				:max="32"
+				:step="1"
+				unit="A"
+			/>
+		</ConfigItem>
+
+		<!-- Phases -->
+		<ConfigItem title="Anzahl Phasen" icon="fa-plug" :fullwidth="true">
+			<RadioInput
+				id="targetPhases"
+				v-model="cp.ecoTargetPhases"
+				:options="[
+					['Eine', 1],
+					['Max', 2],
+					['Auto', 3],
+				]"
+			/>
+		</ConfigItem>
+		<hr v-if="cp.ecoChargeLimitMode != 'none'" class="fullwidth" />
+		<!-- Limit Mode -->
+		<ConfigItem title="Begrenzung" icon="fa-hand" :fullwidth="true">
+			<RadioInput
+				v-model="cp.ecoChargeLimitMode"
+				:options="ecoChargeLimitModes.map((e) => [e.name, e.id])"
+			/>
+		</ConfigItem>
+		<!-- Max SoC -->
+		<ConfigItem
+			v-if="cp.ecoChargeLimitMode == 'soc'"
+			title="Maximaler SoC"
+			icon="fa-sliders"
+			:fullwidth="true"
+		>
+			<RangeInput
+				id="maxSoc"
+				v-model="cp.ecoTargetSoc"
+				:min="0"
+				:max="100"
+				:step="1"
+				unit="%"
+			/>
+		</ConfigItem>
+
+		<!-- Max Energy -->
+		<ConfigItem
+			v-if="cp.ecoChargeLimitMode == 'amount'"
+			title="Zu ladende Energie"
+			icon="fa-sliders"
+			:fullwidth="true"
+		>
+			<RangeInput
+				id="maxEnergy"
+				v-model="energyLimit"
+				:min="0"
+				:max="100"
+				:step="1"
+				unit="kWh"
+			/>
+		</ConfigItem>
+		<span class="fullwidth">
+			<button type="button" class="btn btn-secondary" @click="pageUp">
+				<i class="fa-solid fa-circle-up me-2"></i>
+				Aufwärts
+			</button>
+		</span>
+	</div>
+</template>
+
+<script setup lang="ts">
+// import { eventBus } from '@/main.js'
+import { computed } from 'vue'
+import { ChargePoint, chargePoints } from '../model'
+import { etData } from '@/components/priceChart/model'
+import ConfigItem from '@/components/shared/ConfigItem.vue'
+import RangeInput from '@/components/shared/RangeInput.vue'
+import RadioInput from '@/components/shared/RadioInput.vue'
+import PriceChart from '@/components/priceChart/PriceChart.vue'
+
+const props = defineProps<{
+	chargepoint: ChargePoint
+}>()
+
+const cp = computed(() => {
+	return chargePoints[props.chargepoint.id]
+})
+
+const ecoChargeLimitModes = [
+	{ name: 'keine', id: 'none' },
+	{ name: 'EV-SoC', id: 'soc' },
+	{ name: 'Energiemenge', id: 'amount' },
+]
+const energyLimit = computed({
+	get() {
+		return cp.value.ecoMaxEnergy / 1000
+	},
+	set(limit: number) {
+		cp.value.ecoMaxEnergy = limit * 1000
+	},
+})
+// methods
+function pageDown() {
+	const modalbody = document.getElementById('modal-body-settingspage')
+	if (modalbody) {
+		modalbody.scrollTo({ top: modalbody.scrollHeight, behavior: 'smooth' })
+	} else {
+		console.warn('modalbody not found')
+	}
+}
+function pageUp() {
+	const modalbody = document.getElementById('modal-body-settingspage')
+	window.scrollTo(0, 0)
+	if (modalbody) {
+		modalbody.scrollTo({ top: 0, behavior: 'smooth' })
+	} else {
+		console.warn('modalbody not found')
+	}
+}
+</script>
+
+<style scoped>
+.ecosettings {
+	display: grid;
+	justify-content: space-between;
+	align-items: top;
+	grid-template-columns: auto auto;
+	grid-gap: 0px;
+}
+.chargeConfigSelect {
+	background: var(--color-bg);
+	color: var(--color-fg);
+}
+.heading {
+	color: var(--color-fg);
+	font-size: var(--font-settings);
+	font-weight: bold;
+}
+.fullwidth {
+	grid-column: 1 / -1;
+}
+</style>