Colors theme: fixes and enhancements

packages/modules/web_themes/colors/source/src/assets/css/style.css

@@ -201,18 +201,12 @@ body>.container-fluid {
 	--color-ctr7: #c19a6b;
 	--color-ctr8: #987654;
 	--color-ctr9: #f4a460;
-	/* consumers use a petrol color scheme */
-	--color-consumers: #009696;
-	--color-consumer1: #009696; 
-	--color-consumer2: #00b4cc;
-	--color-consumer3: #008c9e;
-	--color-consumer4: #00dffc;
-	--color-consumer5: #00ffff;
-
+	--color-consumers: #f16913;
 	--font-normal: 1.4rem;
 	--font-large: 1.6rem;
 	--font-medium: 1.2rem;
 	--font-small: 1rem;
+	--font-smallbadge: 0.8rem;
 	--font-verysmall: 0.7rem;
 	--font-extralarge: 1.7rem;
 	--font-settings: 16px;
@@ -257,7 +251,7 @@ body>.container-fluid {
 .theme-dark {
 	--color-bg: #333333;
 	--color-export: #b2df8a;
-	--color-axis: #666666;
+	--color-axis: #999999;
 	--color-grid: black;
 	--color-menu: #999999;
 	--color-frame: #666666;

packages/modules/web_themes/colors/source/src/assets/js/model.ts

@@ -344,14 +344,6 @@ export const sourceSummary: { [key: string]: PowerItem } = reactive({
 	pv: createPowerItem('pv', PowerItemType.pvSummary),
 	batOut: createPowerItem('batOut', PowerItemType.batterySummary),
 })
-/* export const usageSummary: { [key: string]: PowerItem } = reactive({
-	evuOut: createPowerItem('evuOut', PowerItemType.counter),
-	charging: createPowerItem('charging', PowerItemType.chargeSummary),
-	devices: createPowerItem('devices', PowerItemType.deviceSummary),
-	counters: createPowerItem('counters', PowerItemType.counterSummary),
-	batIn: createPowerItem('batIn', PowerItemType.batterySummary),
-	house: createPowerItem('house', PowerItemType.house),
-}) */
 export const globalData = reactive(new GlobalData())
 export const etPriceList = ref('')
 export const energyMeterNeedsRedraw = ref(false)

packages/modules/web_themes/colors/source/src/components/NavigationBar.vue

@@ -44,57 +44,52 @@
 							>
 						</div>
 					</div>
-					<div class="nav-item dropdown">
-						<a
-							id="settingsDropdown"
-							class="nav-link"
-							href="#"
-							role="button"
-							data-bs-toggle="dropdown"
-							aria-expanded="false"
-							>Einstellungen <span class="fa-solid fa-caret-down" />
-						</a>
-						<div class="dropdown-menu" aria-labelledby="settingsDropdown">
-							<a
-								id="navSettings"
-								class="nav-link"
-								href="../../settings/index.html"
-								>openWB</a
-							>
-							<a
-								class="nav-link"
-								data-bs-toggle="collapse"
-								data-bs-target="#themesettings"
-								aria-expanded="false"
-								aria-controls="themeSettings"
-							>
-								<span
-									>Look&amp;Feel<span class="fa-solid fa-caret-down" />
-								</span>
-							</a>
-						</div>
-					</div>
+					<a
+						id="settingsDropdown"
+						class="nav-link"
+						href="#"
+						role="button"
+						data-bs-toggle="modal"
+						:data-bs-target="'#' + themeSettingsModalId"
+						aria-expanded="false"
+					>
+						Einstellungen
+					</a>
 				</div>
 			</div>
 		</div>
 	</nav>
 	<div :class="containerclass">
 		<hr class="m-0 p-0 mb-2" />
 	</div>
+
+	<ModalComponent :modal-id="themeSettingsModalId">
+		<template #title>Look &amp; Feel</template>
+		<ThemeSettings @reset-arcs="handleResetArcs" />
+	</ModalComponent>
 </template>
 
 <script setup lang="ts">
 import { globalConfig } from '@/assets/js/themeConfig'
 import { computed, onBeforeUnmount, onMounted } from 'vue'
 import { formatCurrentTime } from '@/assets/js/helpers'
 import { currentTime } from '@/assets/js/model'
+import ThemeSettings from '@/views/ThemeSettings.vue'
+import ModalComponent from '@/components/shared/ModalComponent.vue'
+import { resetArcs } from '@/assets/js/themeConfig'
 
 let interval: ReturnType<typeof setInterval>
 
+const themeSettingsModalId = 'themeSettingsModal'
+
 const containerclass = computed(() => {
 	return globalConfig.fluidDisplay ? 'container-fluid' : 'container-lg'
 })
 
+function handleResetArcs() {
+	resetArcs()
+}
+
 onMounted(() => {
 	interval = setInterval(() => {
 		currentTime.value = new Date()

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

@@ -7,7 +7,7 @@ Hagen */
 			<span class="battery-title">{{ bat.name }}</span>
 		</template>
 		<template #buttons>
-			<WbBadge :bgcolor="statusbg">{{ batteryState }}</WbBadge>
+			<WbBadge :small="true" :bgcolor="statusbg">{{ batteryState }}</WbBadge>
 		</template>
 		<div class="subgrid pt-1">
 			<InfoItem heading="Ladestand:" :small="true" class="grid-left grid-col-4">

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

@@ -64,7 +64,7 @@ const batteryState = computed(() => {
 	} else if (registry.getPower('batIn') > 0) {
 		return `Lädt (${formatWatt(registry.getPower('batIn'))})`
 	} else {
-		return `Bereit:`
+		return `Bereit`
 	}
 })
 

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

@@ -10,11 +10,18 @@
 					<span class="fa-solid fa-charging-station">&nbsp;</span>
 					{{ props.chargepoint.name }}</span
 				>
-				<span
-					v-if="cp.faultState == 2"
-					class="WbBadge rounded-pill errorWbBadge ms-3"
-					>Fehler</span
-				>
+				<span class="ms-2">
+					<i
+						v-if="cp.faultState === 0"
+						@click="showInfo = !showInfo"
+						class="fa-solid fa-xs fa-circle-info"
+					/>
+					<i
+						v-if="cp.faultState != 0"
+						@click="showFault = !showFault"
+						class="fa-solid fa-sm fa-triangle-exclamation"
+					/>
+				</span>
 			</span>
 		</template>
 
@@ -25,7 +32,23 @@
 		</template>
 
 		<!-- Chargepoint info -->
-		<div v-if="!configmode">
+		<div v-if="!configmode" class="subgrid">
+			<transition name="status-fade">
+				<div
+					v-if="showInfo"
+					class="statustext status-entry py-1 px-2 mb-2 rounded shadow"
+				>
+					{{ cp.stateStr }}
+				</div>
+			</transition>
+			<transition name="status-fade">
+				<div
+					v-if="showFault"
+					class="faulttext status-entry p-1 mb-2 rounded shadow"
+				>
+					{{ cp.faultStr }}
+				</div>
+			</transition>
 			<div class="grid12" @click="configmode = !configmode">
 				<!-- Status information -->
 				<InfoItem heading="Status:" class="grid-col-4 grid-left">
@@ -38,9 +61,7 @@
 				<InfoItem heading="Geladen:" class="grid-col-4 grid-center">
 					<FormatWattH :watt-h="chargepoint.dailyYield" />
 				</InfoItem>
-				<InfoItem heading="Priorität:" class="grid-col-4 grid-right">
-					{{ chargepoint.priority }}
-				</InfoItem>
+				<div class="grid-col-4">&nbsp;</div>
 			</div>
 		</div>
 		<div v-if="configmode" class="row m-0 mt-0 p-0">
@@ -106,6 +127,8 @@ const props = defineProps<{
 }>()
 const cp = ref(props.chargepoint)
 const configmode = ref(false)
+const showInfo = ref(false)
+const showFault = ref(false)
 
 // computed
 const statusString = computed(() => {
@@ -157,9 +180,11 @@ function toggleConfigMode() {
 .fa-ellipsis-vertical {
 	color: var(--color-menu);
 }
+
 .fa-circle-check {
 	color: var(--color-menu);
 }
+
 .errorWbBadge {
 	color: var(--color-bg);
 	background-color: var(--color-evu);
@@ -172,4 +197,58 @@ function toggleConfigMode() {
 	grid-column: 11 / span 2;
 	font-size: var(--font-settings-button);
 }
+
+.statustext {
+	grid-column: 1 / 13;
+	justify-self: center;
+	font-size: var(--font-small);
+	color: black;
+	background: var(--color-menu);
+}
+
+.faulttext {
+	grid-column: 1 / 13;
+	border: 1px solid var(--color-battery);
+	justify-self: center;
+	font-size: var(--font-small);
+	color: black;
+	background: var(--color-battery);
+}
+
+.status-entry {
+	overflow: hidden;
+	transform-origin: top center;
+	will-change: opacity, transform;
+}
+
+.status-fade-enter-active,
+.status-fade-leave-active {
+	transition:
+		opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
+		transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.status-fade-enter-from {
+	opacity: 0;
+	transform: translateY(-6px) scaleY(0.96);
+}
+
+.status-fade-leave-to {
+	opacity: 0;
+	transform: translateY(-4px) scaleY(0.94);
+}
+
+.status-fade-enter-to,
+.status-fade-leave-from {
+	opacity: 1;
+	transform: translateY(0) scaleY(1);
+}
+
+.fa-circle-info {
+	color: var(--color-menu);
+}
+
+.fa-triangle-exclamation {
+	color: var(--color-battery);
+}
 </style>

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

@@ -18,6 +18,9 @@
 			/>
 		</h3>
 		<div class="d-flex align-items-center">
+			<WbBadge bgcolor="var(--color-menu)">
+				Prio:&nbsp;{{ chargepoint.priority }}
+			</WbBadge>
 			<WbBadge v-if="chargepoint.isSocConfigured" :bgcolor="batcolor">
 				<BatterySymbol :soc="soc ?? 0" color="var(--color-bg)" class="me-2" />
 				<i
@@ -77,7 +80,7 @@
 				:watt-h="Math.max(chargepoint.chargedSincePlugged, 0)"
 			></FormatWattH>
 		</InfoItem>
-		<InfoItem heading="gel. Reichw.:" class="grid-col-4">
+		<InfoItem heading="gel. Reichw.:" class="grid-col-4 grid-center">
 			{{ chargedRangeString }}
 		</InfoItem>
 
@@ -93,6 +96,7 @@
 			}}
 			km
 		</InfoItem>
+		<div v-else class="grid-col-4 grid-right">&nbsp;</div>
 		<div
 			v-if="editSoc"
 			class="socEditor rounded mt-2 d-flex flex-column align-items-center grid-col-12 grid-left"

packages/modules/web_themes/colors/source/src/components/chargePointList/cpConfig/PriceCalculator.vue

@@ -98,7 +98,6 @@ const currentSoc = ref(cp.value?.soc ?? 0)
 var targetSoc = ref(currentSoc.value < 80 ? 80 : 100)
 const bufferMinutes = ref(30)
 const evTemplate = computed(() => evTemplates[cp.value?.evTemplate])
-//const chargeTemplate = computed(() => chargeTemplates[cp.value?.evTemplate])
 
 const price = computed({
 	get() {

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

@@ -25,7 +25,7 @@ export class ChargePoint implements PowerItem {
 	private _isLocked = false
 	private _connectedVehicle = 0
 	chargeTemplate: ChargeTemplate | null = null
-	evTemplate = 0
+	_evTemplate = 0
 	private _chargeMode = ChargeMode.pv_charging
 	private _hasPriority = false
 	currentPlan = ''
@@ -369,6 +369,14 @@ export class ChargePoint implements PowerItem {
 	get priority() {
 		return vehicles[this.connectedVehicle]?.priority ?? 0
 	}
+	get evTemplate() {
+		// get this from teh connected vehicle, if any
+		if (vehicles[this.connectedVehicle]) {
+			return vehicles[this.connectedVehicle].evTemplateId
+		} else {
+			return 0
+		}
+	}
 }
 export class Vehicle {
 	id: number
@@ -570,22 +578,28 @@ export function resetChargePoints() {
 
 export const topVehicles = computed(() => {
 	let result: number[] = []
-	const connectedVehicles = Object.values(chargePoints)
+	const connectedVehiclesWithSoc = Object.values(chargePoints)
 		.filter(
 			(cp) =>
 				vehicles[cp.connectedVehicle] &&
 				vehicles[cp.connectedVehicle].isSocConfigured,
 		)
 		.map((cp) => cp.connectedVehicle)
 	const otherVehicles = Object.values(vehicles).filter(
-		(v) => v.visible && v.isSocConfigured && !connectedVehicles.includes(v.id),
-	) // only show vehicles with configured soc and that are visible
-	result = connectedVehicles.concat(otherVehicles.map((v) => v.id)).slice(0, 2)
-	if (result.length == 0) {
+		(v) =>
+			v.visible &&
+			v.isSocConfigured &&
+			!connectedVehiclesWithSoc.includes(v.id),
+	)
+	result = connectedVehiclesWithSoc
+		.concat(otherVehicles.map((v) => v.id))
+		.slice(0, 4)
+	/*if (result.length == 0) {
 		result = [-1, -1]
-	} else if (result.length == 1) {
+	} */ /*else if (result.length == 1) {
 		result.push(-1)
-	}
+	}*/
+	console.log(result)
 	return result
 })
 export const chargeLimitModes = [