Merge pull request openWB#1423 from cshagen/master

Colors theme: Fix powergraph/pricechart problems

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

@@ -40,15 +40,9 @@ try {
 	client = connect(connectUrl, options)
 	client.on('connect', () => {
 		console.info('MQTT connection successful')
-		// topiclist.forEach((topic) => {
-		//  subscribe(topic);
-		// });
 	})
 	client.on('disconnect', () => {
 		console.info('MQTT disconnected')
-		// topiclist.forEach((topic) => {
-		//  subscribe(topic);
-		// });
 	})
 	client.on('error', (error) => {
 		console.error('MQTT connection failed: ', error)
@@ -87,15 +81,38 @@ export function mqttUnsubscribe(fromTopic: string) {
 		//console.info ('MQTT unsubscribe successful: ' + topic)
 	})
 }
-export function mqttPublish(topic: string, message: string) {
+export async function mqttPublish(topic: string, message: string) {
 	const qos: QoS = 0
-	client.publish(topic, message, { qos }, (error) => {
-		if (error) {
-			console.warn('MQTT publish error: ', error)
+	let connected = client.connected
+	let retries = 0
+	while (!connected && retries < 10) {
+		console.warn('MQTT publish: Not connected. Waiting 0.1 seconds')
+		await delay(100)
+		connected = client.connected
+		retries += 1
+	}
+	// console.warn ('MQTT publish: Now connected')
+	if (retries < 10) {
+		try {
+			client.publish(topic, message, { qos }, (error) => {
+				if (error) {
+					console.warn('MQTT publish error: ', error)
+				}
+				console.info(
+					'MQTT publish: Message sent: [' + topic + '](' + message + ')',
+				)
+			})
+		} catch (error) {
+			console.warn('MQTT publish: caught error: ' + error)
 		}
-		console.info('Message sent: [' + topic + '](' + message + ')')
-	})
+	} else {
+		console.error('MQTT publish: Lost connection to MQTT server. Please reload the page')
+	}
 }
 export function mqttClientId() {
 	return mqttConnection.clientId
 }
+
+function delay(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms))
+}

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

@@ -44,6 +44,7 @@ const topics: { [topic: string]: string } = {
 		'openWB/set/LegacySmartHome/config/set/Devices/%/device_manual_control',
 	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',
 }
 export function updateServer(
 	item: string,
@@ -72,7 +73,8 @@ export function updateServer(
 		case 'cpPvMaxSoc':
 		case 'cpPvMinSoc':
 		case 'cpEtMaxPrice':
-		case 'cpPvMinSocCurrent': // these values are set in the charge template
+		case 'cpPvMinSocCurrent':
+			// these values are set in the charge template
 			topic = topic.replace('%', chargePoints[index].chargeTemplate.toString())
 			break
 		default:

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

@@ -361,6 +361,8 @@ export const infotext: { [key: string]: string } = {
 		'Immer mindestens bis zum eingestellten Ladestand laden. Wenn notwendig mit Netzstrom.',
 	minpv:
 		'Durchgehend mit mindestens dem eingestellten Strom laden. Wenn notwendig mit Netzstrom.',
+	pricebased:
+		'Laden bei dynamischem Stromtarif, wenn eingestellter Maximalpreis unterboten wird.',
 }
 interface Preferences {
 	hideSH?: number[]
@@ -434,7 +436,7 @@ function readCookie() {
 				if (shDevices[i] == undefined) {
 					addShDevice(i)
 				}
-				shDevices[i].showInGraph = false
+				shDevices[i].setShowInGraph(false)
 			})
 		}
 		if (prefs.showLG !== undefined) {

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

@@ -104,6 +104,10 @@
 								v-if="chargepoint.hasPriority"
 								class="me-1 fa-solid fa-xs fa-star ps-1"
 							/>
+							<span
+								v-if="chargepoint.etActive"
+								class="me-0 fa-solid fa-xs fa-coins ps-0"
+							/>
 						</h3>
 					</div>
 				</div>
@@ -176,20 +180,25 @@
 						/>
 					</div>
 					<!-- ET Information -->
-					<div
-						v-if="etData.active && props.chargepoint.etActive"
-						class="row m-1 p-0"
-					>
+					<div v-if="etData.active" class="row m-1 p-0">
 						<div class="col m-0 mb-1 p-0 d-flex justify-content-between">
+							<InfoItem heading="Preisladen:">
+								<SwitchInput v-model="cp.etActive" />
+							</InfoItem>
 							<InfoItem heading="max. Preis:">
 								<span type="button" @click="editPrice = !editPrice"
 									>{{
-										(
-											Math.round(props.chargepoint.etMaxPrice * 10) / 10
-										).toFixed(1)
+										props.chargepoint.etActive
+											? (
+													Math.round(props.chargepoint.etMaxPrice * 10) / 10
+											  ).toFixed(1) + ' ct'
+											: '-'
 									}}
-									ct
-									<i class="fa-solid fa-sm fas fa-edit ms-2" />
+
+									<i
+										v-if="props.chargepoint.etActive"
+										class="fa-solid fa-sm fas fa-edit ms-2"
+									/>
 								</span>
 							</InfoItem>
 							<InfoItem heading="akt. Preis:">
@@ -261,11 +270,13 @@ 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'
 
 const props = defineProps<{
 	chargepoint: ChargePoint
 	fullWidth?: boolean
 }>()
+const cp = ref(props.chargepoint)
 // computed
 const chargeMode = computed({
 	get() {
@@ -397,6 +408,9 @@ const editPrice = ref(false)
 .fa-circle-check {
 	color: var(--color-menu);
 }
+.fa-coins {
+	color: var(--color-battery);
+}
 
 .fa-edit {
 	color: var(--color-menu);

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

@@ -57,6 +57,16 @@
 	>
 		<SwitchInput v-model="cp.timedCharging" />
 	</ConfigItem>
+	<!-- Price based Charging -->
+	<ConfigItem
+		v-if="etData.active"
+		title="Strompreisbasiert laden"
+		icon="fa-money-bill"
+		:infotext="infotext['pricebased']"
+		:fullwidth="true"
+	>
+		<SwitchInput v-model="cp.etActive" />
+	</ConfigItem>
 </template>
 
 <script setup lang="ts">
@@ -66,7 +76,7 @@ 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'
 const props = defineProps<{
 	chargepoint: ChargePoint
 }>()

packages/modules/web_themes/colors/source/src/components/chargePointList/cpSimpleList/CPSimpleList.vue

@@ -3,7 +3,7 @@
 		<template #title> Ladepunkte </template>
 		<template #buttons>
 			<div class="d-flex float-right justify-content-end align-items-center">
-				<span v-if="etData.active" class="badge rounded-pill pricebadge mx-2"
+				<span v-if="etData.active" class="badge rounded-pill pricebadge ms-2"
 					>Strompreis: {{ etData.etCurrentPriceString }}</span
 				>
 			</div>

packages/modules/web_themes/colors/source/src/components/chargePointList/cpSimpleList/CpSimpleList2.vue

@@ -6,7 +6,9 @@
 		</template>
 		<template #buttons>
 			<div class="d-flex float-right justify-content-end align-items-center">
-				<span v-if="etData.active" class="badge rounded-pill pricebadge mx-2"
+				<span
+					v-if="etData.active"
+					class="badge rounded-pill pricebadge mb-1 ms-2"
 					>Strompreis: {{ etData.etCurrentPriceString }}</span
 				>
 			</div>

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

@@ -236,6 +236,11 @@ export class ChargePoint {
 			return false
 		}
 	}
+	set etActive(val) {
+		if (vehicles[this.connectedVehicle]) {
+			vehicles[this.connectedVehicle].etActive = val
+		}
+	}
 	get etMaxPrice() {
 		return vehicles[this.connectedVehicle].etMaxPrice ?? 0
 	}
@@ -293,6 +298,15 @@ export class Vehicle {
 	get etActive() {
 		if (chargeTemplates[this.chargeTemplateId]) {
 			return chargeTemplates[this.chargeTemplateId].et.active
+		} else {
+			return false
+		}
+	}
+	set etActive(val) {
+		if (chargeTemplates[this.chargeTemplateId]) {
+			updateServer('priceCharging', val, this.chargeTemplateId)
+
+			// openWB/set/vehicle/template/charge_template/2/et/active -> false
 		}
 	}
 	get etMaxPrice() {

packages/modules/web_themes/colors/source/src/components/energyMeter/EMLabels.vue

@@ -2,8 +2,16 @@
 	<g id="emBarLabels">
 		<!-- Bars -->
 		<g v-for="(item, i) in props.plotdata" :key="i">
-			<EmLabel :item="item" :x-scale="props.xScale" :y-scale="props.yScale" :margin="props.margin" :height="props.height"
-				:barcount="props.plotdata.length" :aut-text="autTxt(item)" :autarchy="autPct(item)" />
+			<EmLabel
+				:item="item"
+				:x-scale="props.xScale"
+				:y-scale="props.yScale"
+				:margin="props.margin"
+				:height="props.height"
+				:barcount="props.plotdata.length"
+				:aut-text="autTxt(item)"
+				:autarchy="autPct(item)"
+			/>
 		</g>
 	</g>
 </template>
@@ -52,15 +60,15 @@ function autPct(item: PowerItem) {
 		const generatedEnergy = src.pv.energy
 		const batEnergy = src.batOut.energy
 		const storedEnergy = usg.batIn.energy
-		if ((generatedEnergy + batEnergy - exportedEnergy - storedEnergy) > 0) {
+		if (generatedEnergy + batEnergy - exportedEnergy - storedEnergy > 0) {
 			return Math.round(
 				((generatedEnergy + batEnergy - exportedEnergy - storedEnergy) /
 					(generatedEnergy +
 						batEnergy +
 						importedEnergy -
 						exportedEnergy -
 						storedEnergy)) *
-				100,
+					100,
 			)
 		} else {
 			return 0

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

@@ -150,7 +150,7 @@ export const dayGraph = reactive({
 				command: 'getDailyLog',
 				data: { day: dateString },
 			})
-			graphData.data = []
+			// graphData.data = []
 		}
 	},
 	deactivate() {

packages/modules/web_themes/colors/source/src/components/powerMeter/PowerMeter.vue

@@ -45,6 +45,15 @@
 						:anchor="'middle'"
 						:config="globalConfig"
 					/>
+					<PMLabel
+						v-if="etData.active"
+						:x="0"
+						:y="-height / 10"
+						:data="sourceSummary.batOut"
+						:props="masterData.batOut"
+						:anchor="'middle'"
+						:config="globalConfig"
+					/>
 					<!-- iterate over all usage items-->
 					<PMLabel
 						v-for="(item, index) in valuesToDisplay"
@@ -93,7 +102,7 @@
 						:anchor="'end'"
 						:config="globalConfig"
 					/>
-					<!-- Show the SoC of the 1st battery -->
+					<!-- Show the SoC of the batteries -->
 					<PMLabel
 						v-if="globalData.batterySoc > 0"
 						:x="-width / 2 - margin / 4 + 10"
@@ -103,6 +112,17 @@
 						:anchor="'start'"
 						:config="globalConfig"
 					/>
+					<!-- Show the current energy price -->
+					<PMLabel
+						v-if="etData.active"
+						:x="width / 2 + margin / 4 - 10"
+						:y="height / 2 - margin + 15"
+						:value="currentPrice"
+						:labeltext="etData.etCurrentPriceString"
+						labelcolor="var(--color-charging)"
+						:anchor="'end'"
+						:config="globalConfig"
+					/>
 					<!-- Show the current consumption -->
 					<PMLabel
 						:x="0"
@@ -149,6 +169,7 @@ import PMUsageArc from './PMUsageArc.vue'
 import PMLabel from './PMLabel.vue'
 import WBWidget from '../shared/WBWidget.vue'
 import { formatWatt } from '@/assets/js/helpers'
+import { etData } from '../priceChart/model'
 
 // state:
 const width = 500
@@ -239,6 +260,11 @@ function trimName(name: string) {
 	const maxlen = 12
 	return name.length > maxlen ? name.slice(0, maxlen - 1) + '.' : name
 }
+
+const currentPrice = computed(() => {
+	const [p] = etData.etPriceList.values()
+	return Math.round(p * 10) / 10
+})
 </script>
 
 <style></style>