Colors theme (display): Add Soc reload button

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

@@ -232,6 +232,9 @@ function processSystemMessages(topic: string, message: string) {
 	) {
 		const config = JSON.parse(message)
 		if (config.type == 'counter') {
+			if (!(config.id in counters)) {
+				addCounter(config.id, config.type)
+			}
 			counters[config.id].name = config.name
 		}
 	} else if (topic.match(/^openWB\/system\/ip_address$/i)) {

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

@@ -48,13 +48,22 @@
 				heading="Ladestand:"
 				class="grid-col-4 grid-left"
 			>
-				<BatterySymbol :soc="soc" class="me-2" />
+				<BatterySymbol :soc="soc ?? 0" class="me-2" />
 				<DisplayButton v-if="chargepoint.isSocManual" @click="startSocEditor">
 					<i
 						class="fa-solid fa-sm fas fa-edit py-0 px-3 mt-3"
 						:style="{ color: 'var(--color-fg)' }"
 					/>
 				</DisplayButton>
+				<DisplayButton v-else >
+					<i
+						class="fa-solid fa-sm fas py-0 px-3 mt-3"
+						:class="chargepoint.waitingForSoc ? 'fa-spinner fa-spin' : 'fa-sync'"
+					@click="loadSoc"
+						:style="{ color: 'var(--color-fg)' }"
+					/>
+				</DisplayButton>
+
 			</InfoItem>
 			<InfoItem
 				v-if="chargepoint.isSocConfigured"
@@ -154,15 +163,15 @@ const cp = ref(props.chargepoint)
 const editSoc = ref(false)
 
 function setSoc() {
-	updateServer('setSoc', manualSoc.value, props.chargepoint.connectedVehicle)
+	updateServer('setSoc', manualSoc.value ?? 0, props.chargepoint.connectedVehicle)
 	editSoc.value = false
 }
 const manualSoc = computed({
 	get() {
-		return props.chargepoint.soc
+		return props.chargepoint.soc ?? 0
 	},
-	set(s: number) {
-		chargePoints[props.chargepoint.id].soc = s
+	set(s: number | undefined) {
+		chargePoints[props.chargepoint.id].soc = s ?? 0
 	},
 })
 const soc = computed(() => {
@@ -230,6 +239,10 @@ const currentPriceStyle = computed(() => {
 		? { color: 'var(--color-charging)' }
 		: { color: 'var(--color-menu)' }
 })
+function loadSoc() {
+	updateServer('socUpdate', 1, props.chargepoint.connectedVehicle)
+	chargePoints[props.chargepoint.id].waitingForSoc = true
+}
 </script>
 <style scoped>
 .titleline {
@@ -265,6 +278,9 @@ const currentPriceStyle = computed(() => {
 .fa-edit {
 	font-size: 8pt;
 }
+.fa-sync {
+	font-size: 10pt;
+}
 .socEditor {
 	border: 1px solid var(--color-menu);
 	justify-self: stretch;

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

@@ -8,7 +8,7 @@
 		>
 			<RadioInput
 				v-model.number="connectedVehicle"
-				:options="Object.values(vehicles).map((v) => [v.name, v.id])"
+				:options="Object.values(vehicles).filter((v) => v.visible).map((v) => [v.name, v.id])"
 			/>
 		</ConfigItem>
 		<!-- <ConfigItem
@@ -92,6 +92,7 @@ const props = defineProps<{
 
 //state
 const cp = computed(() => {
+	console.log(vehicles)
 	return chargePoints[props.chargepointId]
 })
 

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

@@ -80,11 +80,11 @@ export class ChargePoint {
 			vehicles[this.connectedVehicle].name = name
 		}
 	}
-	get soc() {
-		if (vehicles[this.connectedVehicle]) {
+	get soc() : number | undefined {
+		if (vehicles[this.connectedVehicle] && vehicles[this.connectedVehicle].soc != undefined) {
 			return vehicles[this.connectedVehicle].soc
 		} else {
-			return 0
+			return undefined
 		}
 	}
 	set soc(newSoc: number) {
@@ -391,6 +391,12 @@ export class Vehicle {
 		}
 		return undefined
 	}
+	get visible(): boolean {
+		return (
+			this.name != '__invalid' && this.name != ""//&&
+			//(this.id != 0 || globalConfig.showStandardVehicle)
+		)
+	}
 }
 export interface ConnectedVehicleConfig {
 	average_consumption: number

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

@@ -258,7 +258,7 @@ function labelCoordinates(item: number) {
 // methods
 
 function soc(i: number) {
-	return Math.round(chargepoints.value[i].soc)
+	return Math.round(chargepoints.value[i].soc ?? 0)
 }
 function trimName(name: string) {
 	const maxlen = 12

packages/modules/display_themes/colors/source/src/components/shared/RadioInput.vue

@@ -30,8 +30,6 @@ const v = computed({
 		return props.modelValue
 	},
 	set(value: number | string) {
-		console.log(props.options)
-		console.log('set value', value)
 		emit('update:modelValue', value)
 	},
 })