Colors theme: Fixes

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

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

@@ -159,6 +159,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 // x position of first vehicle
 		case 1:
-			return props.width - 3
+			return props.width - 3 // x position of 2nd vehicle
 		case 2:
-			return props.width / 2
+			return props.width / 2 // x position of battery
 		default:
 			return 0 // error
 	}
@@ -130,16 +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(
+				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)
 				return yScale.value(graphData.data[index].batSoc + 2)

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

@@ -155,9 +155,6 @@ const keysToUse = computed(() => {
 			k.splice(idx + i, 0, key)
 			colors[key] = chargePoints[+key.slice(2)]?.color ?? 'black'
 		})
-		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 + 10">
 		<g :transform="'translate(' + margin.left + ',' + margin.top + ')'">
 			<g
 				id="PGXAxis"
@@ -18,7 +18,7 @@
 				id="PGXAxis2"
 				class="axis"
 				:origin="drawAxis2"
-				:transform="'translate(0,' + (height / 2 + 10) + ')'"
+				:transform="'translate(0,' + (height / 2 + -6) + ')'"
 			/>
 			<g v-if="globalConfig.showGrid">
 				<rect

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/web/index.html

@@ -24,9 +24,9 @@
 	<link rel="apple-touch-icon" sizes="60x60" href="/openWB/web/img/favicons/apple-touch-icon-60x60.png">
 	<link rel="manifest" href="/openWB/web/manifest.json">
 	<title>openWB</title>
-  <script type="module" crossorigin src="/openWB/web/themes/colors/assets/index-B-oIXkFa.js"></script>
+  <script type="module" crossorigin src="/openWB/web/themes/colors/assets/index-C0V3o4mh.js"></script>
   <link rel="modulepreload" crossorigin href="/openWB/web/themes/colors/assets/vendor-CmSLe-Fc.js">
-  <link rel="stylesheet" crossorigin href="/openWB/web/themes/colors/assets/index-BmACv-mh.css">
+  <link rel="stylesheet" crossorigin href="/openWB/web/themes/colors/assets/index-Dt5u90of.css">
 </head>
 
 <body>