Colors theme: Fixes and Improvements (#1712)

* increase font size in badges

* fix livegraph SOC

packages/modules/web_themes/colors/source/src/components/batteryList/BLBattery.vue

@@ -7,9 +7,7 @@ Hagen */
 			<span class="battery-title">{{ bat.name }}</span>
 		</template>
 		<template #buttons>
-			<span class="badge rounded-pill battery-mode me-2" :style="statusstyle">{{
-				batteryState
-			}}</span>
+			<WbBadge :bgcolor="statusbg" color="black">{{ batteryState }}</WbBadge>
 		</template>
 		<div class="subgrid pt-1">
 			<InfoItem heading="Geliefert:" :small="true" class="grid-left grid-col-4">
@@ -35,6 +33,7 @@ import type { Battery } from './model'
 import BatterySymbol from '../shared/BatterySymbol.vue'
 import InfoItem from '../shared/InfoItem.vue'
 import FormatWattH from '../shared/FormatWattH.vue'
+import WbBadge from '../shared/WbBadge.vue'
 import { computed } from 'vue'
 import { formatWatt } from '@/assets/js/helpers'
 // props
@@ -50,14 +49,12 @@ const batteryState = computed(() => {
 		return `Bereit`
 	}
 })
-const statusstyle = computed(() => {
-	const bgcolor =
-		props.bat.power < 0
-			? 'var(--color-pv)'
-			: props.bat.power > 0
-				? 'var(--color-battery)'
-				: 'var(--color-menu)'
-	return { 'background-color': bgcolor }
+const statusbg = computed(() => {
+	return props.bat.power < 0
+		? 'var(--color-pv)'
+		: props.bat.power > 0
+			? 'var(--color-battery)'
+			: 'var(--color-menu)'
 })
 </script>
 

packages/modules/web_themes/colors/source/src/components/batteryList/BatteryList.vue

@@ -11,15 +11,18 @@ Hagen */
 			<span class="fas fa-car-battery me-2" style="color: var(--color-battery)"
 				>&nbsp;</span
 			>
-			<span class="sh-title py-4">Speicher</span>
+			<span>Speicher</span>
 		</template>
 		<template #buttons>
-			<span class="badge rounded-pill battery-mode me-2" :style="statusstyle">{{
-				batteryState
-			}}</span>
-			<span class="badge socpill rounded-pill">
-				<BatterySymbol :soc="globalData.batterySoc"></BatterySymbol>
-			</span>
+			<WbBadge :bgcolor="statusbg" color="black">
+				{{ batteryState }}
+			</WbBadge>
+			<WbBadge bgcolor="var(--color-battery)" color="black">
+				<BatterySymbol
+					color="black"
+					:soc="globalData.batterySoc"
+				></BatterySymbol>
+			</WbBadge>
 		</template>
 		<div class="px-3 subgrid grid-12">
 			<InfoItem heading="Leistung:" class="grid-left grid-col-4">
@@ -49,6 +52,7 @@ import { computed } from 'vue'
 import { formatWatt, formatWattH } from '@/assets/js/helpers'
 import { batteries } from './model'
 import BLBattery from './BLBattery.vue'
+import WbBadge from '../shared/WbBadge.vue'
 
 const batteryState = computed(() => {
 	if (sourceSummary.batOut.power > 0) {
@@ -63,14 +67,12 @@ const powerstring = computed(() => {
 	return formatWatt(sourceSummary.batOut.power + usageSummary.batIn.power)
 })
 
-const statusstyle = computed(() => {
-	const bgcolor =
-		sourceSummary.batOut.power > 0
-			? 'var(--color-pv)'
-			: usageSummary.batIn.power > 0
-				? 'var(--color-battery)'
-				: 'var(--color-menu)'
-	return { 'background-color': bgcolor }
+const statusbg = computed(() => {
+	return sourceSummary.batOut.power > 0
+		? 'var(--color-pv)'
+		: usageSummary.batIn.power > 0
+			? 'var(--color-battery)'
+			: 'var(--color-menu)'
 })
 </script>
 
@@ -90,9 +92,4 @@ const statusstyle = computed(() => {
 .todaystring {
 	color: var(--color-menu);
 }
-
-.socpill {
-	background-color: var(--color-battery);
-	color: 'var(--color-fg)';
-}
 </style>

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

@@ -12,7 +12,7 @@
 				>
 				<span
 					v-if="cp.faultState == 2"
-					class="badge rounded-pill errorbadge ms-3"
+					class="WbBadge rounded-pill errorWbBadge ms-3"
 					>Fehler</span
 				>
 			</span>
@@ -474,7 +474,7 @@ const editPrice = ref(false)
 	grid-template-columns: repeat(12, auto);
 	justify-content: space-between;
 }
-.errorbadge {
+.errorWbBadge {
 	color: var(--color-bg);
 	background-color: var(--color-evu);
 	font-size: var(--font-small);

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

@@ -1,5 +1,4 @@
 <template>
-	<!-- <div v-if="true && !globalConfig.simpleCpList" class="p-0 m-0 d-flex align-items-stretch" :class="totalWidth"> -->
 	<swiper-container
 		v-if="!props.shortlist"
 		:space-between="0"
@@ -20,8 +19,6 @@
 			</div>
 		</swiper-slide>
 	</swiper-container>
-	<!-- </div> -->
-	<!-- <CPSimpleList v-if="props.shortlist" /> -->
 	<CpSimpleList2 v-if="props.shortlist" />
 </template>
 

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

@@ -56,7 +56,7 @@
 					<span>{{ chargePowerString }}</span>
 
 					<span class="d-flex align-items-center me-1">
-						<span class="badge phasesInUse rounded-pill">
+						<span class="WbBadge phasesInUse rounded-pill">
 							{{ chargePhasesString }}</span
 						>
 						<span>

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

@@ -3,7 +3,9 @@
 		<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 ms-2"
+				<span
+					v-if="etData.active"
+					class="WbBadge rounded-pill priceWbBadge ms-2"
 					>Strompreis: {{ etData.etCurrentPriceString }}</span
 				>
 			</div>
@@ -69,7 +71,7 @@ const chargepointsToDisplay = computed(() => {
 	border-spacing: 1rem;
 	background-color: var(--color-bg);
 }
-.pricebadge {
+.priceWbBadge {
 	background-color: var(--color-menu);
 	font-weight: normal;
 }

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

@@ -5,13 +5,9 @@
 			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 mb-1 ms-2"
-					>Strompreis: {{ etData.etCurrentPriceString }}</span
-				>
-			</div>
+			<WbBadge v-if="etData.active" color="white"
+				>Strompreis: {{ etData.etCurrentPriceString }}</WbBadge
+			>
 		</template>
 		<div
 			v-for="(cp, index) in chargepointsToDisplay"
@@ -28,6 +24,7 @@ import { computed } from 'vue'
 import { chargePoints } from '../model'
 import WbWidgetFlex from '@/components/shared/WbWidgetFlex.vue'
 import CpsListItem2 from './CpsListItem2.vue'
+import WbBadge from '@/components/shared/WbBadge.vue'
 import { etData } from '@/components/priceChart/model'
 const chargepointsToDisplay = computed(() => {
 	return Object.values(chargePoints)
@@ -59,7 +56,7 @@ const chargepointsToDisplay = computed(() => {
 	background-color: var(--color-bg);
 }
 
-.pricebadge {
+.priceWbBadge {
 	background-color: var(--color-menu);
 	font-weight: normal;
 }

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

@@ -3,7 +3,10 @@
 		<template #title>
 			<div class="d-flex align-items-center">
 				<span class="cpname">{{ chargepoint.name }} </span>
-				<span class="badge rounded-pill statusbadge mx-2" :style="statusColor">
+				<span
+					class="WbBadge rounded-pill statusWbBadge mx-2"
+					:style="statusColor"
+				>
 					<i :class="statusIcon" class="me-1" />
 					{{ statusString }}</span
 				>
@@ -12,7 +15,7 @@
 		<template #buttons>
 			<div class="d-flex float-right justify-content-end align-items-center">
 				<span
-					class="badge rounded-pill modebadge mx-2"
+					class="WbBadge rounded-pill modeWbBadge mx-2"
 					type="button"
 					:style="modeStyle"
 					data-bs-toggle="modal"
@@ -65,7 +68,7 @@
 						<span>{{ chargePowerString }}</span>
 
 						<span class="d-flex align-items-center">
-							<span class="badge phasesInUse rounded-pill">
+							<span class="WbBadge phasesInUse rounded-pill">
 								{{ chargePhasesString }}</span
 							>
 							<span>
@@ -301,7 +304,7 @@ const statusString = computed(() => {
 	color: var(--color-fg);
 }
 
-.statusbadge {
+.statusWbBadge {
 	background-color: var(--color-bg);
 	font-weight: bold;
 	font-size: var(--font-verysmall);

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

@@ -146,7 +146,7 @@ export function processVehicleMessages(topic: string, message: string) {
 				v.visible = false
 			}
 			vehicles[index] = v
-			// console.info('New vehicle created: ' + index)
+			console.info('New vehicle created: ' + index)
 		}
 		if (topic.match(/^openwb\/vehicle\/[0-9]+\/name$/i)) {
 			// set car Name for charge point

packages/modules/web_themes/colors/source/src/components/counterList/ClCounter.vue

@@ -4,17 +4,10 @@
 			<span class="countername">{{ counter.name }} </span>
 		</template>
 		<template #buttons>
-			<div class="d-flex float-right justify-content-end align-items-center">
-				<span
-					v-if="props.counter.power != 0"
-					class="badge rounded-pill modebadge mx-2"
-					:style="modestyle"
-					>{{ modestring }}</span
-				>
-				<span class="badge rounded-pill idbadge mx-2"
-					>ID: {{ props.counter.id }}</span
-				>
-			</div>
+			<WbBadge v-if="props.counter.power != 0" :bgcolor="modebg" color="white">
+				{{ modestring }}
+			</WbBadge>
+			<WbBadge color="var(--color-bg)"> ID: {{ props.counter.id }} </WbBadge>
 		</template>
 		<div class="subgrid pt-1">
 			<InfoItem heading="Leistung:" :small="true" class="grid-left grid-col-4">
@@ -36,6 +29,7 @@
 <script setup lang="ts">
 import InfoItem from '../shared/InfoItem.vue'
 import WbSubwidget from '../shared/WbSubwidget.vue'
+import WbBadge from '../shared/WbBadge.vue'
 import type { Counter } from './model'
 import FormatWattH from '../shared/FormatWattH.vue'
 import FormatWatt from '../shared/FormatWatt.vue'
@@ -52,18 +46,16 @@ const modestring = computed(() => {
 	}
 })
 
-const modestyle = computed(() => {
-	let col = ''
+const modebg = computed(() => {
 	if (props.counter.power > 0) {
-		col = 'var(--color-evu)'
+		return 'var(--color-evu)'
 	} else {
-		col = 'var(--color-pv)'
+		return 'var(--color-pv)'
 	}
-	return { 'background-color': col, 'font-weight': 'normal' }
 })
 </script>
 <style scoped>
-.idbadge {
+.idWbBadge {
 	background-color: var(--color-menu);
 	font-weight: normal;
 }

packages/modules/web_themes/colors/source/src/components/counterList/CounterList.vue

@@ -30,7 +30,7 @@ import { counters } from './model'
 	font-weight: normal;
 }
 
-.tempbadge {
+.tempWbBadge {
 	background-color: var(--color-battery);
 	color: var(--color-bg);
 	font-size: var(--font-verysmall);

packages/modules/web_themes/colors/source/src/components/inverterList/IlInverter.vue

@@ -6,13 +6,9 @@
 			</span>
 		</template>
 		<template #buttons>
-			<div class="d-flex float-right justify-content-end align-items-center">
-				<span
-					v-if="props.inverter.power < 0"
-					class="my-0 badge rounded-pill modebadge mx-1"
-					>{{ formatWatt(-props.inverter.power) }}
-				</span>
-			</div>
+			<WbBadge v-if="props.inverter.power < 0" bgcolor="var(--color-pv)"
+				>{{ formatWatt(-props.inverter.power) }}
+			</WbBadge>
 		</template>
 		<div class="subgrid pt-1">
 			<InfoItem heading="Heute:" :small="false" class="grid-col-4">
@@ -32,6 +28,7 @@ import InfoItem from '../shared/InfoItem.vue'
 import WbSubwidget from '../shared/WbSubwidget.vue'
 import type { PvSystem } from '@/assets/js/types'
 import FormatWattH from '../shared/FormatWattH.vue'
+import WbBadge from '../shared/WbBadge.vue'
 import { computed } from 'vue'
 import { formatWatt } from '@/assets/js/helpers'
 const props = defineProps<{
@@ -43,7 +40,7 @@ const invertercolor = computed(() => {
 })
 </script>
 <style scoped>
-.modebadge {
+.modeWbBadge {
 	background-color: var(--color-pv);
 	color: var(--color-bg);
 	font-size: var(--font-verysmall);

packages/modules/web_themes/colors/source/src/components/inverterList/InverterList.vue

@@ -7,12 +7,9 @@
 			<span>Wechselrichter</span>
 		</template>
 		<template #buttons>
-			<span
-				v-if="sourceSummary.pv.power > 0"
-				class="badge powerbadge rounded-pill"
-			>
+			<WbBadge v-if="sourceSummary.pv.power > 0" bgcolor="var(--color-pv)">
 				{{ formatWatt(sourceSummary.pv.power) }}
-			</span>
+			</WbBadge>
 		</template>
 		<div v-for="[key, pvsystem] in pvSystems" :key="key" class="subgrid pb-2">
 			<IlInverter :inverter="pvsystem" />
@@ -23,12 +20,13 @@
 <script setup lang="ts">
 import WBWidgetFlex from '../shared/WbWidgetFlex.vue'
 import IlInverter from './IlInverter.vue'
+import WbBadge from '../shared/WbBadge.vue'
 import { pvSystems, sourceSummary } from '@/assets/js/model'
 import { formatWatt } from '@/assets/js/helpers'
 </script>
 
 <style scoped>
-.powerbadge {
+.powerWbBadge {
 	background-color: var(--color-pv);
 	color: var(--color-bg);
 	font-size: var(--font-verysmall);

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

@@ -172,6 +172,7 @@ function drawGraph(
 	graph: Selection<SVGGElement, unknown, HTMLElement, never>,
 	xScale: ScaleTime<number, number, never>,
 ) {
+	//console.log(stackedSeries.value)
 	const area0 = area()
 		.x((d, i) => xScale(graphData.data[i]['date']))
 		.y(yScale.value(0))

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

@@ -42,7 +42,7 @@
 			>
 				<span class="fa-solid fa-xl fa-chevron-circle-left arrowButton" />
 			</span>
-			<!-- Badge -->
+			<!-- badge -->
 			<span
 				v-if="editmode < 2"
 				type="button"