Colors theme: Bug Fixes, enhancements

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

@@ -82,6 +82,10 @@ export function formatTime(seconds: number) {
 		return minutes + ' min'
 	}
 }
+export function formatCurrentTime(d: Date) {
+	return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+}
+
 export function formatDate(d: Date, mode: string = 'day') {
 	switch (mode) {
 		case 'day':

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

@@ -129,3 +129,5 @@ export function correctHouseConsumption() {
 	usageSummary.house.power =
 		usageSummary.house.power - usageSummary.devices.power
 }
+
+export const currentTime = ref(new Date())

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

@@ -25,7 +25,7 @@ export class Config {
 	private _preferWideBoxes = false
 	private _maxPower = 4000
 	private _fluidDisplay = false
-	private _showClock = false
+	private _showClock = 'no'
 	private _debug: boolean = false
 	isEtEnabled: boolean = false
 	etPrice: number = 20.5
@@ -171,12 +171,12 @@ export class Config {
 	get showClock() {
 		return this._showClock
 	}
-	set showClock(on: boolean) {
-		this._showClock = on
+	set showClock(mode: string) {
+		this._showClock = mode
 		savePrefs()
 	}
-	setShowClock(on: boolean) {
-		this._showClock = on
+	setShowClock(mode: string) {
+		this._showClock = mode
 	}
 	get debug() {
 		return this._debug
@@ -321,7 +321,7 @@ interface Preferences {
 	animation?: boolean
 	wideB?: boolean
 	fluidD?: boolean
-	clock?: boolean
+	clock?: string
 }
 
 function writeCookie() {

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

@@ -1,13 +1,13 @@
 <template>
 	<!-- Fixed navbar -->
-	<nav class="navbar navbar-expand-lg px-3 mb-0">
+	<nav class="navbar navbar-expand-lg px-0 mb-0">
 		<div :class="containerclass">
 			<a href="/" class="navbar-brand"><span>openWB</span></a>
 			<span
-				v-if="globalConfig.showClock"
+				v-if="globalConfig.showClock == 'navbar'"
 				class="position-absolute-50 navbar-text ms-4 navbar-time"
 				:style="{ color: 'var(--color-menu)' }"
-				>{{ formatTime(currentTime) }}</span
+				>{{ formatCurrentTime(currentTime) }}</span
 			>
 			<button
 				class="navbar-toggler togglebutton ps-5"
@@ -85,17 +85,16 @@
 
 <script setup lang="ts">
 import { globalConfig } from '@/assets/js/themeConfig'
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted } from 'vue'
+import { formatCurrentTime } from '@/assets/js/helpers'
+import { currentTime } from '@/assets/js/model'
 
 let interval: ReturnType<typeof setInterval>
-const currentTime = ref(new Date())
 
 const containerclass = computed(() => {
 	return globalConfig.fluidDisplay ? 'container-fluid' : 'container-lg'
 })
-function formatTime(d: Date) {
-	return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
-}
+
 onMounted(() => {
 	interval = setInterval(() => {
 		;(currentTime.value = new Date()), 1000

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

@@ -33,7 +33,6 @@ export const batterySummary = reactive(new BatterySummary())
 export function addBattery(index: number) {
 	if (!(index in batteries)) {
 		batteries[index] = new Battery(index)
-		console.info('Added battery ' + index)
 	} else {
 		console.info('Duplicate battery message: ' + index)
 	}

packages/modules/web_themes/colors/source/src/components/buttonBar/ButtonBar.vue

@@ -4,7 +4,14 @@ Hagen */ // ButtonBar.vue // Display configuration buttons for all chargepoints
 	<div class="row p-0 mt-0 mb-1 m-0">
 		<div class="col p-0 m-0">
 			<div class="container-fluid p-0 m-0">
-				<div class="row p-0 m-0 d-flex justify-content-center">
+				<div
+					class="row p-0 m-0 d-flex justify-content-center align-items-center"
+				>
+					<span
+						v-if="globalConfig.showClock == 'buttonbar'"
+						class="col time-display"
+						>{{ formatCurrentTime(currentTime) }}</span
+					>
 					<BbChargeButton
 						v-for="(cp, index) in chargePoints"
 						:key="index"
@@ -19,7 +26,16 @@ Hagen */ // ButtonBar.vue // Display configuration buttons for all chargepoints
 
 <script setup lang="ts">
 import { chargePoints } from '../chargePointList/model'
+import { globalConfig } from '@/assets/js/themeConfig'
+import { currentTime } from '@/assets/js/model'
+import { formatCurrentTime } from '@/assets/js/helpers'
 import BbChargeButton from './BbChargeButton.vue'
 </script>
 
-<style></style>
+<style scoped>
+.time-display {
+	font-weight: bold;
+	color: var(--color-menu);
+	font-size: var(--font-normal);
+}
+</style>

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

@@ -52,12 +52,15 @@
 					<InfoItem heading="Leistung:">
 						<FormatWatt :watt="props.chargepoint.power" />
 					</InfoItem>
-					<InfoItem heading="Stromstärke:">
-						{{ chargeAmpereString }}
+					<InfoItem heading="Strom:">
+						{{ realChargeAmpereString }}
 					</InfoItem>
 					<InfoItem heading="Phasen:">
 						{{ props.chargepoint.phasesInUse }}
 					</InfoItem>
+					<InfoItem heading="Sollstrom:">
+						<span class="targetCurrent">{{ chargeAmpereString }}</span>
+					</InfoItem>
 				</div>
 			</div>
 			<!-- Chargemode buttons -->
@@ -124,7 +127,7 @@
 							<i
 								v-if="chargepoint.isSocConfigured && !chargepoint.isSocManual"
 								type="button"
-								class="fa-solid fa-sm fa-sync"
+								class="fa-solid fa-sm"
 								:class="
 									chargepoint.waitingForSoc ? 'fa-spinner fa-spin' : 'fa-sync'
 								"
@@ -234,6 +237,13 @@ const chargeAmpereString = computed(() => {
 		) + ' A'
 	)
 })
+const realChargeAmpereString = computed(() => {
+	return (
+		(Math.round(props.chargepoint.realCurrent * 10) / 10).toLocaleString(
+			undefined,
+		) + ' A'
+	)
+})
 const chargedRangeString = computed(() => {
 	return (
 		Math.round(props.chargepoint.rangeCharged).toString() +
@@ -384,4 +394,8 @@ const manualSoc = computed({
 .socEditor {
 	border: 1px solid var(--color-menu);
 }
+
+.targetCurrent {
+	color: var(--color-menu);
+}
 </style>

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

@@ -15,7 +15,7 @@
 		</ConfigItem>
 		<hr v-if="cp.instantChargeLimitMode != 'none'" />
 		<!-- Limit Mode -->
-		<ConfigItem title="Begrenzung" icon="fa-hand">
+		<ConfigItem title="Begrenzung" icon="fa-hand" :fullwidth="true">
 			<RadioInput
 				v-model="cp.instantChargeLimitMode"
 				:options="instantChargeLimitModes.map((e) => [e.name, e.id])"
@@ -26,6 +26,7 @@
 			v-if="cp.instantChargeLimitMode == 'soc'"
 			title="Maximaler SoC"
 			icon="fa-sliders"
+			:fullwidth="true"
 		>
 			<RangeInput
 				id="maxSoc"
@@ -42,10 +43,11 @@
 			v-if="cp.instantChargeLimitMode == 'amount'"
 			title="Zu ladende Energie"
 			icon="fa-sliders"
+			:fullwidth="true"
 		>
 			<RangeInput
 				id="maxEnergy"
-				v-model="cp.instantMaxEnergy"
+				v-model="energyLimit"
 				:min="0"
 				:max="100"
 				:step="1"
@@ -57,7 +59,7 @@
 
 <script setup lang="ts">
 // import { eventBus } from '@/main.js'
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import type { ChargePoint } from '../model'
 import ConfigItem from '../../shared/ConfigItem.vue'
 import RangeInput from '@/components/shared/RangeInput.vue'
@@ -71,6 +73,14 @@ const instantChargeLimitModes = [
 	{ name: 'EV-SoC', id: 'soc' },
 	{ name: 'Energiemenge', id: 'amount' },
 ]
+const energyLimit = computed ({
+	get() {
+		return cp.value.instantMaxEnergy / 1000
+	},
+	set(limit:number) {
+		cp.value.instantMaxEnergy = limit * 1000
+	}
+})
 // methods
 </script>
 

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

@@ -56,8 +56,12 @@ const props = defineProps<{
 	chargeTemplateId: number
 }>()
 const plans = computed(() => {
-	let result = Object.values(timeChargingPlans[props.chargeTemplateId])
-	return result ?? []
+	if (timeChargingPlans[props.chargeTemplateId]) {
+		let result = Object.values(timeChargingPlans[props.chargeTemplateId])
+		return result ?? []
+	} else {
+		return []
+	}
 })
 function switchStyle(key: number) {
 	const style = plans.value[key].active