Colors theme fixes & Soc-Editor (openWB#2230)

* fix chargepoint display and usage graph
* fix powergraph axis and soc display
* add soc editor to vehicle list

Author: cshagen

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

@@ -235,7 +235,6 @@
 										).toFixed(1) + ' ct'
 									: '-'
 							}}
-
 							<i
 								v-if="props.chargepoint.etActive"
 								class="fa-solid fa-sm fas fa-edit ms-2"

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

@@ -170,7 +170,7 @@ const statusColor = computed(() => {
 const modeStyle = computed(() => {
 	switch (props.chargepoint.chargeMode) {
 		case 'stop':
-			return { 'background-color': 'var(--fg)' }
+			return { 'background-color': 'var(--color-input)' }
 		default:
 			return {
 				'background-color': chargemodes[props.chargepoint.chargeMode].color,

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

@@ -274,6 +274,8 @@ export class Vehicle {
 		this.id = index
 	}
 	private _chargeTemplateId = 0
+	isSocConfigured = false
+	isSocManual = false
 	get chargeTemplateId() {
 		return this._chargeTemplateId
 	}

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

@@ -173,6 +173,8 @@ export function processVehicleMessages(topic: string, message: string) {
 					cp.isSocManual = config.type == 'manual'
 				}
 			})
+			vehicles[index].isSocConfigured = config.type !== null
+			vehicles[index].isSocManual = config.type == 'manual'
 		} else {
 			// console.warn('Ignored vehicle message [' + topic + ']=' + message)
 		}

packages/modules/web_themes/colors/source/src/components/powerGraph/PgSoc.vue

@@ -1,32 +1,34 @@
 <template>
 	<svg x="0" :width="props.width">
-		<path
-			:id="'soc-' + vID"
-			.origin="autozoom"
-			class="soc-baseline"
-			:d="myline"
-			stroke="var(--color-bg)"
-			stroke-width="1"
-			fill="none"
-		/>
-		<path
-			:id="'socdashes-' + vID"
-			class="soc-dashes"
-			:d="myline"
-			:stroke="cpColor"
-			stroke-width="1"
-			:style="{ strokeDasharray: '3,3' }"
-			fill="none"
-		/>
-		<text
-			class="cpname"
-			:x="nameX"
-			:y="nameY"
-			:style="{ fill: cpColor, fontSize: 10 }"
-			:text-anchor="textPosition"
-		>
-			{{ vName }}
-		</text>
+		<g>
+			<path
+				:id="'soc-' + vID"
+				.origin="autozoom"
+				class="soc-baseline"
+				:d="myline"
+				stroke="var(--color-bg)"
+				stroke-width="1"
+				fill="none"
+			/>
+			<path
+				:id="'socdashes-' + vID"
+				class="soc-dashes"
+				:d="myline"
+				:stroke="cpColor"
+				stroke-width="1"
+				:style="{ strokeDasharray: '3,3' }"
+				fill="none"
+			/>
+			<text
+				class="cpname"
+				:x="nameX"
+				:y="nameY"
+				:style="{ fill: cpColor, fontSize: 10 }"
+				:text-anchor="textPosition"
+			>
+				{{ vName }}
+			</text>
+		</g>
 	</svg>
 </template>
 
@@ -75,7 +77,6 @@ const myline = computed(() => {
 							: d['soc' + topVehicles.value[1]!],
 				) ?? yScale.value(0),
 		)
-
 	let p = path(graphData.data)
 	return p ? p : ''
 })
@@ -116,11 +117,11 @@ const cpColor = computed(() => {
 const nameX = computed(() => {
 	switch (props.order) {
 		case 0:
-			return 3
+			return 3 // first vehicle
 		case 1:
-			return props.width - 3
+			return props.width - 3 // 2nd vehicle
 		case 2:
-			return props.width / 2
+			return props.width / 2 // battery
 		default:
 			return 0 // error
 	}
@@ -130,15 +131,16 @@ const nameY = computed(() => {
 	if (graphData.data.length > 0) {
 		let index: number
 		switch (props.order) {
-			case 0:
-				index = graphData.data.length - 1
+			case 0: // 1st vehicle
+				index = 0
 				return yScale.value(
 					graphData.data[index]['soc' + topVehicles.value[0]] + 2,
 				)
 			case 1:
-				index = 0
-				return yScale.value(
-					graphData.data[index]['soc' + topVehicles.value[1]] + 2,
+				index = graphData.data.length - 1
+				return Math.max(
+					12,
+					yScale.value(graphData.data[index]['soc' + topVehicles.value[1]] + 2),
 				)
 			case 2:
 				index = Math.round(graphData.data.length / 2)

packages/modules/web_themes/colors/source/src/components/powerGraph/PgSourceGraph.vue

@@ -103,14 +103,17 @@ const keysToUse = computed(() => {
 	if (globalConfig.showInverters) {
 		const pattern = /pv\d+/
 		if (graphData.data.length > 0) {
-			additionalKeys = Object.keys(graphData.data[0]).reduce(
-				(list: string[], element: string) => {
-					if (element.match(pattern)) {
-						list.push(element)
+			/* additionalKeys = Object.keys(graphData.data[0]).reduce(
+				(list: string[], itemKey: string) => {
+					if (itemKey.match(pattern)) {
+						list.push(itemKey)
 					}
 					return list
 				},
 				[],
+			) */
+			additionalKeys = Object.keys(graphData.data[0]).filter((itemKey) =>
+				itemKey.match(pattern),
 			)
 		}
 	}

packages/modules/web_themes/colors/source/src/components/powerGraph/PgUsageGraph.vue

@@ -141,23 +141,18 @@ const keysToUse = computed(() => {
 		const pattern = /cp\d+/
 		let additionalKeys: string[] = []
 		if (graphData.data.length > 0) {
-			additionalKeys = Object.keys(graphData.data[0]).reduce(
-				(list: string[], element: string) => {
-					if (element.match(pattern)) {
-						list.push(element)
-					}
-					return list
-				},
-				[],
+			additionalKeys = Object.keys(graphData.data[0]).filter((itemKey) =>
+				itemKey.match(pattern),
 			)
 		}
 		additionalKeys.forEach((key, i) => {
 			k.splice(idx + i, 0, key)
-			colors[key] = chargePoints[+key.slice(2)]?.color ?? 'black'
+			colors[key] =
+				chargePoints[+key.slice(2)]?.color ?? 'var(--color-charging)'
 		})
-		if (globalConfig.showInverters) {
+		/* 	if (globalConfig.showInverters) {
 			k.push('evuOut')
-		}
+		} */
 		return k
 	}
 })

packages/modules/web_themes/colors/source/src/components/powerGraph/PgXAxis.vue

@@ -5,7 +5,7 @@
 			:transform="'translate(' + 0 + ',' + (height / 2 + 9) + ')'"
 		></g>
 	</svg>
-	<svg :x="props.margin.left" :width="props.width">
+	<svg :x="0" :width="props.width">
 		<g :transform="'translate(' + margin.left + ',' + margin.top + ')'">
 			<g
 				id="PGXAxis"

packages/modules/web_themes/colors/source/src/components/powerGraph/PowerGraph.vue

@@ -49,7 +49,7 @@
 					:stack-order="globalConfig.usageStackOrder"
 				/>
 				<PgXAxis
-					:width="width - margin.left - 2 * margin.right"
+					:width="width - margin.left - margin.right"
 					:height="height - margin.top - margin.bottom"
 					:margin="margin"
 				/>

packages/modules/web_themes/colors/source/src/components/vehicleList/VlVehicle.vue

@@ -12,7 +12,21 @@
 				>
 			</InfoItem>
 			<InfoItem heading="Ladestand:" :small="true" class="grid-col-4">
-				{{ Math.round(props.vehicle.soc) }} %
+				<BatterySymbol :soc="soc ?? 0" color="var(--color-fg)" class="me-2" />
+				<i
+					v-if="vehicle.isSocManual"
+					class="fa-solid fa-sm fas fa-edit"
+					type="button"
+					:style="{ color: 'var(--color-fg)' }"
+					@click="editSoc = !editSoc"
+				/>
+				<i
+					v-if="!vehicle.isSocManual"
+					type="button"
+					class="fa-solid fa-sm"
+					:class="spinsymbol"
+					@click="loadSoc"
+				/>
 			</InfoItem>
 			<InfoItem
 				heading="Reichweite:"
@@ -21,19 +35,46 @@
 			>
 				{{ Math.round(props.vehicle.range) }} km
 			</InfoItem>
+			<div
+				v-if="editSoc"
+				class="socEditor rounded mt-2 d-flex flex-column align-items-center grid-col-12 grid-left"
+			>
+				<span class="d-flex m-1 p-0 socEditTitle">Ladestand einstellen:</span>
+				<span class="d-flex justify-content-stretch align-items-center">
+					<span>
+						<RangeInput
+							id="manualSoc"
+							v-model="manualSoc"
+							:min="0"
+							:max="100"
+							:step="1"
+							unit="%"
+						/>
+					</span>
+				</span>
+				<span
+					type="button"
+					class="fa-solid d-flex fa-lg me-2 mb-3 align-self-end fa-circle-check"
+					@click="setSoc"
+				/>
+			</div>
 		</div>
 	</WbSubwidget>
 </template>
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { chargePoints } from '@/components/chargePointList/model'
 import InfoItem from '../shared/InfoItem.vue'
 import WbSubwidget from '../shared/WbSubwidget.vue'
+import BatterySymbol from '../shared/BatterySymbol.vue'
+import RangeInput from '../shared/RangeInput.vue'
 import type { Vehicle } from '@/components/chargePointList/model.ts'
+import { updateServer } from '@/assets/js/sendMessages'
 
 const props = defineProps<{
 	vehicle: Vehicle
 }>()
-
+const editSoc = ref(false)
 const statusString = computed(() => {
 	let result = 'Unterwegs'
 	let cp = props.vehicle.chargepoint
@@ -46,7 +87,6 @@ const statusString = computed(() => {
 	}
 	return result
 })
-
 const statusColor = computed(() => {
 	let cp = props.vehicle.chargepoint
 	if (cp != undefined) {
@@ -63,6 +103,36 @@ const statusColor = computed(() => {
 		return 'var(--color-axis)'
 	}
 })
+const soc = computed(() => {
+	return props.vehicle.soc
+})
+function loadSoc() {
+	if (props.vehicle.chargepoint != undefined) {
+		updateServer('socUpdate', 1, props.vehicle.id)
+		chargePoints[props.vehicle.chargepoint.id].waitingForSoc = true
+	}
+}
+function setSoc() {
+	updateServer('setSoc', manualSoc.value, props.vehicle.id)
+	editSoc.value = false
+}
+const manualSoc = computed({
+	get() {
+		return props.vehicle.soc
+	},
+	set(s: number) {
+		if (props.vehicle.chargepoint != undefined) {
+			chargePoints[props.vehicle.chargepoint.id].soc = s
+		}
+	},
+})
+const spinsymbol = computed(() => {
+	return props.vehicle.chargepoint
+		? props.vehicle.chargepoint.waitingForSoc
+			? 'fa-spinner fa-spin'
+			: 'fa-sync'
+		: ''
+})
 </script>
 <style scoped>
 .idWbBadge {
@@ -75,4 +145,8 @@ const statusColor = computed(() => {
 .vehiclename {
 	font-size: var(--font-medium);
 }
+.socEditor {
+	border: 1px solid var(--color-menu);
+	justify-self: stretch;
+}
 </style>