Merge pull request openWB#1286 from cshagen/master

Colors theme: Fix border colors in chargepointlist and device list

Author: benderl

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

@@ -111,14 +111,8 @@
 					<!-- Car info -->
 
 					<div class="m-0 p-0 d-flex justify-content-between">
-						<InfoItem
-							v-if="chargepoint.isSocConfigured"
-							heading="Ladestand:"
-						>
-							<BatterySymbol
-								:soc="soc"
-								class="me-2"
-							/>
+						<InfoItem v-if="chargepoint.isSocConfigured" heading="Ladestand:">
+							<BatterySymbol :soc="soc" class="me-2" />
 							<i
 								v-if="chargepoint.isSocConfigured && chargepoint.isSocManual"
 								class="fa-solid fa-sm fas fa-edit"
@@ -137,10 +131,7 @@
 								@click="loadSoc"
 							/>
 						</InfoItem>
-						<InfoItem
-							v-if="chargepoint.isSocConfigured"
-							heading="Reichweite:"
-						>
+						<InfoItem v-if="chargepoint.isSocConfigured" heading="Reichweite:">
 							{{
 								vehicles[props.chargepoint.connectedVehicle]
 									? Math.round(
@@ -160,21 +151,26 @@
 					</div>
 					<div
 						v-if="editSoc"
-						class="socEditor rounded mt-2 d-flex flex-column align-items-end"
+						class="socEditor rounded mt-2 d-flex flex-column align-items-center"
 					>
-						<ConfigItem title="Ladestand einstellen:" :fullwidth="true">
-							<RangeInput
-								id="manualSoc"
-								v-model="manualSoc"
-								:min="0"
-								:max="100"
-								:step="1"
-								unit="%"
-							/>
-						</ConfigItem>
+						<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 fa-circle-check"
+							class="fa-solid d-flex fa-lg me-2 mb-3 align-self-end fa-circle-check"
 							@click="setSoc"
 						/>
 					</div>
@@ -220,7 +216,6 @@ import RadioBarInput from '@/components/shared/RadioBarInput.vue'
 import WbWidgetFlex from '../shared/WbWidgetFlex.vue'
 import { updateServer } from '@/assets/js/sendMessages'
 import RangeInput from '../shared/RangeInput.vue'
-import ConfigItem from '../shared/ConfigItem.vue'
 
 const props = defineProps<{
 	chargepoint: ChargePoint

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

@@ -91,20 +91,23 @@
 	</tr>
 	<tr v-if="editSoc" class="socEditRow m-0 p-0">
 		<td colspan="5" class="m-0 p-0 pb-2">
-			<div class="socEditor rounded mt-2 d-flex flex-column align-items-end">
-				<ConfigItem title="Ladestand einstellen:" :fullwidth="true">
-					<RangeInput
-						id="manualSoc"
-						v-model="manualSoc"
-						:min="0"
-						:max="100"
-						:step="1"
-						unit="%"
-					/>
-				</ConfigItem>
+			<div class="socEditor rounded mt-2 d-flex flex-column align-items-center">
+				<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 fa-circle-check"
+					class="fa-solid d-flex fa-lg me-2 mb-3 align-self-end fa-circle-check"
 					@click="setSoc"
 				/>
 			</div>
@@ -131,7 +134,6 @@ import { chargemodes, globalConfig } from '@/assets/js/themeConfig'
 import { formatWatt, formatWattH } from '@/assets/js/helpers'
 import CPChargeConfigPanel from '../cpConfig/CPChargeConfigPanel.vue'
 import BatterySymbol from '../../shared/BatterySymbol.vue'
-import ConfigItem from '@/components/shared/ConfigItem.vue'
 import RangeInput from '@/components/shared/RangeInput.vue'
 import { updateServer } from '@/assets/js/sendMessages'
 import ModalComponent from '@/components/shared/ModalComponent.vue'
@@ -236,7 +238,7 @@ const manualSoc = computed({
 <style scoped>
 .tablerow {
 	margin: 14px;
-	border-top: 0.1px solid var(--color-frame);
+	border-top: 0.1px solid var(--color-scale);
 }
 
 .tablecell {
@@ -283,14 +285,21 @@ const manualSoc = computed({
 .fa-clock {
 	color: var(--color-battery);
 }
+
 .socEditor {
 	border: 1px solid var(--color-menu);
 	background-color: var(--color-bg);
 }
+
 .socEditRow td {
 	background-color: var(--color-bg);
 }
+
 .fa-circle-check {
 	color: var(--color-menu);
 }
+
+.socEditTitle {
+	color: white;
+}
 </style>

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

@@ -108,6 +108,8 @@ export const liveGraph = reactive({
 		this.initCounter = 0
 		this.graphRefreshCounter = 0
 		this.rawDataPacks = []
+		resetPvValues()
+		energyMeterNeedsRedraw.value = true
 	},
 	deactivate() {
 		this.unsubscribeRefresh()
@@ -322,6 +324,9 @@ export function updateEnergyValues(
 		})
 		historicSummary.setEnergy('devices', 0)
 		Object.entries(totals.sh).forEach(([id, values]) => {
+			if (!historicSummary.keys().includes(id)) {
+				historicSummary.addItem(id)
+			}
 			historicSummary.setEnergy(id, values.imported)
 			const idNumber = id.substring(2)
 			if (!shDevices[+idNumber].countAsHouse) {
@@ -376,6 +381,27 @@ export function updateEnergyValues(
 	}
 	energyMeterNeedsRedraw.value = true
 }
+function resetPvValues() {
+	historicSummary.keys().map((cat) => {
+		if (consumerCategories.includes(cat)) {
+			usageSummary[cat].energy = historicSummary.items[cat].energy
+			usageSummary[cat].energyPv = 0
+			usageSummary[cat].energyBat = 0
+			usageSummary[cat].pvPercentage = 0
+		}
+	})
+	Object.values(chargePoints).map((cp) => {
+		cp.energyPv = 0
+		cp.energyBat = 0
+		cp.pvPercentage = 0
+	})
+	Object.values(shDevices).map((device) => {
+		device.energyPv = 0
+		device.energyBat = 0
+		device.pvPercentage = 0
+	})
+}
+
 export const xScaleMonth = computed(() => {
 	const e = extent(graphData.data, (d) => d.date)
 	if (e[1]) {

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

@@ -155,11 +155,11 @@ function transformRow(inputRow: RawDayGraphDataItem): GraphDataItem {
 	// Devices
 	outputRow.devices = Object.entries(inputRow.sh).reduce<number>(
 		(sum: number, item) => {
+			if (!historicSummary.keys().includes(item[0])) {
+				historicSummary.addItem(item[0])
+			}
 			if (item[1].energy_imported >= 0) {
 				sum += item[1].energy_imported
-				if (!historicSummary.keys().includes(item[0])) {
-					historicSummary.addItem(item[0])
-				}
 			} else {
 				console.warn(
 					`Negative energy value for device ${item[0]} in row ${outputRow.date}. Ignoring this value`,

packages/modules/web_themes/colors/source/src/components/shared/WbSubwidget.vue

@@ -35,7 +35,7 @@ const widgetwidth = computed(() => {
 })
 </script>
 <style scoped>
-/* .wb-subwidget {
+.wb-subwidget {
 	border-top: 0.5px solid var(--color-scale);
-} */
+}
 </style>

packages/modules/web_themes/colors/web/assets/index-4e3f10be.js

@@ -23,9 +23,9 @@
 	<link rel="apple-touch-icon" sizes="57x57" href="/openWB/web/img/favicons/apple-touch-icon-57x57.png">
 	<link rel="apple-touch-icon" sizes="60x60" href="/openWB/web/img/favicons/apple-touch-icon-60x60.png">
 	<title>openWB</title>
-  <script type="module" crossorigin src="/openWB/web/themes/colors/assets/index-91b4c1d6.js"></script>
-  <link rel="modulepreload" crossorigin href="/openWB/web/themes/colors/assets/vendor-e76013e3.js">
-  <link rel="stylesheet" href="/openWB/web/themes/colors/assets/index-5b61a84c.css">
+  <script type="module" crossorigin src="/openWB/web/themes/colors/assets/index-4e3f10be.js"></script>
+  <link rel="modulepreload" crossorigin href="/openWB/web/themes/colors/assets/vendor-4d91b42b.js">
+  <link rel="stylesheet" href="/openWB/web/themes/colors/assets/index-8951a584.css">
 </head>
 
 <body>