Colors theme: Fixes

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

@@ -71,15 +71,27 @@ class HistoricSummary {
 		this._items[key] = createPowerItem(key)
 	}
 	setEnergy(cat: string, val: number) {
+		if (!this.keys().includes(cat)) {
+			this.addItem(cat)
+		}
 		this._items[cat].energy = val
 	}
 	setEnergyPv(cat: string, val: number) {
+		if (!this.keys().includes(cat)) {
+			this.addItem(cat)
+		}
 		this._items[cat].energyPv = val
 	}
 	setEnergyBat(cat: string, val: number) {
+		if (!this.keys().includes(cat)) {
+			this.addItem(cat)
+		}
 		this._items[cat].energyBat = val
 	}
 	setPvPercentage(cat: string, val: number) {
+		if (!this.keys().includes(cat)) {
+			this.addItem(cat)
+		}
 		this._items[cat].pvPercentage = val
 	}
 	calculateHouseEnergy() {

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

@@ -0,0 +1,133 @@
+<template>
+	<WbSubwidget :titlecolor="device.color" :fullwidth="true">
+		<template #title>
+			{{ device.name }}
+		</template>
+		<template #buttons>
+			<div class="d-flex float-right justify-content-end align-items-center">
+				<span
+					v-for="(temp, idx) in device.temp"
+					:key="idx"
+					class="p-0 m-0 align-items-center d-flex"
+				>
+					<span v-if="temp < 300" class="my-0 badge rounded-pill tempbadge mx-1"
+						>{{ formatTemp(temp) }}
+					</span>
+				</span>
+				<span
+					v-if="props.device.canSwitch"
+					:class="switchIcon"
+					:style="switchStyle"
+					class="fa statusbutton mr-2 ms-4"
+					@click="statusButtonClicked"
+				/>
+				<span
+					v-if="props.device.canSwitch"
+					class="badge rounded-pill modebutton mx-2"
+					@click="modeButtonClicked"
+					>{{ deviceMode }}</span
+				>
+			</div>
+		</template>
+		<div class="row m-1 mt-0 p-0">
+			<div class="col m-0 mb-1 p-0 d-flex justify-content-between">
+				<InfoItem heading="Leistung:">
+					<FormatWatt :watt="device.power" />
+				</InfoItem>
+				<InfoItem heading="Energie:">
+					<FormatWattH :watt-h="device.energy" />
+				</InfoItem>
+				<InfoItem heading="Laufzeit:">
+					{{ formatTime(device.runningTime) }}
+				</InfoItem>
+			</div>
+		</div>
+	</WbSubwidget>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { type ShDevice, shDevices } from './model'
+import { formatTime, formatTemp } from '@/assets/js/helpers'
+import WbSubwidget from '../shared/WbSubwidget.vue'
+import InfoItem from '../shared/InfoItem.vue'
+import FormatWatt from '../shared/FormatWatt.vue'
+import FormatWattH from '../shared/FormatWattH.vue'
+import { updateServer } from '@/assets/js/sendMessages'
+const props = defineProps<{
+	device: ShDevice
+}>()
+
+const switchIcon = computed(() => {
+	return props.device.status == 'on'
+		? 'fa-toggle-on'
+		: props.device.status == 'waiting'
+		? 'fa-spinner fa-spin'
+		: 'fa-toggle-off'
+})
+const switchStyle = computed(() => {
+	let swColor = 'var(--color-switchRed)'
+
+	switch (props.device.status) {
+		case 'on':
+			swColor = 'var(--color-switchGreen)'
+			break
+		case 'detection':
+			swColor = 'var(--color-switchBlue)'
+			break
+		case 'timeout':
+			swColor = 'var(--color-switchWhite)'
+			break
+		case 'waiting':
+			swColor = 'var(--color-menu)'
+			break
+		default:
+			swColor = 'var(--color-switchRed)'
+	}
+
+	return { color: swColor }
+})
+function statusButtonClicked() {
+	if (!props.device.isAutomatic) {
+		if (props.device.status == 'on') {
+			updateServer('shSwitchOn', 0, props.device.id)
+		} else {
+			updateServer('shSwitchOn', 1, props.device.id)
+		}
+		shDevices[props.device.id].status = 'waiting'
+	}
+}
+function modeButtonClicked() {
+	if (props.device.isAutomatic) {
+		updateServer('shSetManual', 1, props.device.id)
+	} else {
+		updateServer('shSetManual', 0, props.device.id)
+	}
+}
+const deviceMode = computed(() => {
+	if (props.device.isAutomatic) {
+		return 'Auto'
+	} else {
+		return 'Man'
+	}
+})
+</script>
+
+<style scoped>
+.statusbutton {
+	font-size: var(--font-large);
+}
+
+.modebutton {
+	background-color: var(--color-menu);
+	font-size: var(--font-verysmall);
+	font-weight: normal;
+}
+
+.tempbadge {
+	background-color: var(--color-battery);
+	color: var(--color-bg);
+	font-size: var(--font-verysmall);
+	font-weight: normal;
+}
+</style>

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

@@ -0,0 +1,46 @@
+import { reactive } from 'vue'
+import { savePrefs } from '@/assets/js/themeConfig'
+export class ShDevice {
+	id: number
+	name = 'Gerät'
+	power = 0
+	status = 'off'
+	energy = 0
+	runningTime = 0
+	configured = false
+	private _showInGraph = true
+	color = 'white'
+	canSwitch = false
+	countAsHouse = false
+	energyPv = 0
+	energyBat = 0
+	pvPercentage = 0
+	tempConfigured = 0
+	temp = [300.0, 300.0, 300.0]
+	on = false
+	isAutomatic = true
+	icon = ''
+	constructor(index: number) {
+		this.id = index
+	}
+	get showInGraph() {
+		return this._showInGraph
+	}
+	set showInGraph(val: boolean) {
+		this._showInGraph = val
+		savePrefs()
+	}
+}
+
+export const shDevices: { [key: number]: ShDevice } = reactive({})
+
+export function addShDevice(shIndex: number) {
+	if (!(shIndex in shDevices)) {
+		shDevices[shIndex] = new ShDevice(shIndex)
+		shDevices[shIndex].color =
+			'var(--color-sh' + Object.values(shDevices).length + ')'
+		// console.info('Added sh device ' + shIndex)
+	} else {
+		console.info('Duplicate sh device message: ' + shIndex)
+	}
+}

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

@@ -113,7 +113,7 @@ const vrange = computed(() => {
 const ticklength = computed(
 	() => graphData.graphMode == 'month' || graphData.graphMode == 'year',
 )
-	? -props.width - props.margin.right
+	? -props.width - props.margin.right - 22
 	: -props.width
 
 const yAxisGenerator = computed(() => {

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

@@ -83,19 +83,6 @@ const xScale = computed(() => {
 		return scaleTime().range([0, 0])
 	}
 })
-/* const xScaleMonth = computed(() => {
-	let e = extent(graphData.data, (d) => d.date)
-	console.log(e)
-	if (e[1]) {
-		return scaleBand<number>()
-			.domain([1,e[1]])
-			// .domain(Array.from({ length: graphData.data.length }, (v, k) => k))
-			.paddingInner(0.4)
-			.range([0, props.width + props.margin.right])
-		} else {
-			return scaleBand<number>().range([0,0])
-		}
-}) */
 
 const drawAxis1 = computed(() => {
 	let axis = select<AxisContainerElement, number>('g#PGXAxis')
@@ -131,7 +118,7 @@ const drawAxis1 = computed(() => {
 		.attr('y', 12)
 		.attr('fill', 'var(--color-axis)')
 		.attr('font-size', fontsize)
-		.text(graphData.graphMode == 'year' ? 'MWh' : 'kWh')
+		.text(graphData.graphMode == 'year' ? 'MW' : 'kW')
 		.attr('text-anchor', 'start')
 	return 'PGXAxis.vue'
 })

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

@@ -324,9 +324,6 @@ 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) {
@@ -406,9 +403,9 @@ export const xScaleMonth = computed(() => {
 	const e = extent(graphData.data, (d) => d.date)
 	if (e[1]) {
 		return scaleBand<number>()
-			.domain(Array.from({ length: e[1] + 1 }, (v, k) => k + 1))
+			.domain(Array.from({ length: e[1] }, (v, k) => k + 1))
 			.paddingInner(0.4)
-			.range([0, width])
+			.range([0, width - margin.left - 2])
 	} else {
 		return scaleBand<number>().range([0, 0])
 	}

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

@@ -164,62 +164,3 @@ function transformRow(currentRow: RawDayGraphDataItem): GraphDataItem {
 	}
 	return currentItem
 }
-/* function updateEnergyValues(totals: RawDayGraphDataItem) {
-	console.log(totals)
-	if (Object.entries(totals).length > 0) {
-	Object.entries(totals.counter).forEach(([id, values]) => {
-		if (gridCounters.length == 0 || gridCounters.includes(id)) {
-			historicSummary.items.evuIn.energy += values.imported
-			historicSummary.items.evuOut.energy += values.exported
-		}
-	})
-	historicSummary.items.pv.energy = totals.pv.all.exported
-	if (totals.bat.all) {
-		historicSummary.items.batIn.energy = totals.bat.all.imported
-		historicSummary.items.batOut.energy = totals.bat.all.exported
-	}
-	Object.entries(totals.cp).forEach(([id, values]) => {
-		if (id == 'all') {
-			historicSummary.setEnergy('charging', values.imported)
-		} else {
-			historicSummary.setEnergy(id, values.imported)
-		}
-	})
-	historicSummary.setEnergy('devices', 0)
-	Object.entries(totals.sh).forEach(([id, values]) => {
-		historicSummary.setEnergy(id, values.imported)
-		const idNumber = id.substring(2)
-		if (!shDevices[+idNumber].countAsHouse) {
-			historicSummary.items.devices.energy += values.imported
-		}
-	})
-	if (totals.hc && totals.hc.all) {
-		historicSummary.setEnergy('house', totals.hc.all.imported)
-	} else {
-		historicSummary.calculateHouseEnergy()
-	}
-	historicSummary.keys().map((cat) => {
-		if (!nonPvCategories.includes(cat)) {
-			historicSummary.setPvPercentage(
-				cat,
-				Math.round(
-					((historicSummary.items[cat].energyPv +
-						historicSummary.items[cat].energyBat) /
-						historicSummary.items[cat].energy) *
-					100,
-				),
-			)
-			if (consumerCategories.includes(cat)) {
-				if (graphData.graphMode != 'today') {
-				usageSummary[cat].energy = historicSummary.items[cat].energy
-				}
-				usageSummary[cat].energyPv = historicSummary.items[cat].energyPv
-				usageSummary[cat].energyBat = historicSummary.items[cat].energyBat
-				usageSummary[cat].pvPercentage = historicSummary.items[cat].pvPercentage
-			}
-		}
-	})
-}
-console.log(sourceSummary)
-	energyMeterNeedsRedraw.value = true
-} */

packages/modules/web_themes/colors/source/src/views/ColorsTheme.vue

@@ -218,19 +218,28 @@ function toggleMqViewer() {
 onMounted(() => {
 	init()
 	window.addEventListener('resize', updateDimensions)
+	window.document.addEventListener('visibilitychange', visibilityChange)
 	msgInit()
 })
+
+function visibilityChange() {
+	if (!document.hidden) {
+		msgInit()
+	}
+}
 </script>
 
 <style scoped>
 .nav-tabs {
 	border-bottom: 0.5px solid var(--color-menu);
 	background-color: var(--color-bg);
 }
+
 .nav-tabs .nav-link {
 	color: var(--color-menu);
 	opacity: 0.5;
 }
+
 .nav-tabs .nav-link.disabled {
 	color: var(--color-axis);
 	border: 0.5px solid var(--color-axis);
@@ -244,18 +253,23 @@ onMounted(() => {
 	border-bottom: 0px solid var(--color-menu);
 	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
 }
+
 .fa-circle-info {
 	color: var(--color-fg);
 }
+
 .fa-charging-station {
 	color: var(--color-charging);
 }
+
 .fa-car-battery {
 	color: var(--color-battery);
 }
+
 .fa-plug {
 	color: var(--color-devices);
 }
+
 .fa-money-bill-1-wave {
 	color: var(--color-pv);
 }

packages/modules/web_themes/colors/web/index.html

@@ -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-4e3f10be.js"></script>
+  <script type="module" crossorigin src="/openWB/web/themes/colors/assets/index-0fe73fa4.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">
+  <link rel="stylesheet" href="/openWB/web/themes/colors/assets/index-ad4978cd.css">
 </head>
 
 <body>