From c3fc3ca3cacaf8293e7e08316336c5f3b0ab0116 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Patrick=20Ha=C3=9Fel?= Date: Mon, 21 Oct 2024 09:37:55 +0200 Subject: [PATCH] ui Value refactor --- src/main/angular/src/app/api/Value/Display.ts | 15 +++ src/main/angular/src/app/api/Value/Value.ts | 115 ++++++++++++++++++ .../src/app/api/Value/ValueConstant.ts | 12 ++ src/main/angular/src/app/api/series/IValue.ts | 23 ---- src/main/angular/src/app/api/series/Series.ts | 17 +-- src/main/angular/src/app/api/series/Value.ts | 68 ----------- .../src/app/api/series/series.service.ts | 48 ++++---- .../air/dashboard-air-tile.component.html | 2 +- .../air/dashboard-air-tile.component.ts | 34 +++--- .../pages/dashboard/dashboard.component.ts | 4 +- .../dashboard-electricity-tile.component.html | 2 +- .../dashboard-electricity-tile.component.ts | 42 +++---- .../dashboard-heating-tile.component.html | 2 +- .../dashboard-heating-tile.component.ts | 38 ++---- .../value-list.component.html} | 4 +- .../value-list.component.less} | 0 .../value-list.component.ts} | 18 +-- 17 files changed, 233 insertions(+), 211 deletions(-) create mode 100644 src/main/angular/src/app/api/Value/Display.ts create mode 100644 src/main/angular/src/app/api/Value/Value.ts create mode 100644 src/main/angular/src/app/api/Value/ValueConstant.ts delete mode 100644 src/main/angular/src/app/api/series/IValue.ts delete mode 100644 src/main/angular/src/app/api/series/Value.ts rename src/main/angular/src/app/shared/{values-tile/values-tile.component.html => value-list/value-list.component.html} (85%) rename src/main/angular/src/app/shared/{values-tile/values-tile.component.less => value-list/value-list.component.less} (100%) rename src/main/angular/src/app/shared/{values-tile/values-tile.component.ts => value-list/value-list.component.ts} (55%) diff --git a/src/main/angular/src/app/api/Value/Display.ts b/src/main/angular/src/app/api/Value/Display.ts new file mode 100644 index 0000000..51f6ab2 --- /dev/null +++ b/src/main/angular/src/app/api/Value/Display.ts @@ -0,0 +1,15 @@ +import {Value} from "./Value"; + +export class DisplayValue { + + constructor( + readonly title: string, + readonly value: Value, + readonly color: string, + ) { + // - + } + +} + +export type Display = DisplayValue | null; diff --git a/src/main/angular/src/app/api/Value/Value.ts b/src/main/angular/src/app/api/Value/Value.ts new file mode 100644 index 0000000..bdab72c --- /dev/null +++ b/src/main/angular/src/app/api/Value/Value.ts @@ -0,0 +1,115 @@ +import {ValueConstant} from "./ValueConstant"; + +export class Value { + + constructor( + readonly date: Date | null, + readonly value: number | null, + readonly unit: string | null, + ) { + // - + } + + clampNonNegative(): Value { + return this.unary(v => v > 0 ? v : 0); + } + + plus(other: Value): Value { + return this.binary(other, (a, b) => a + b); + } + + minus(other: Value): Value { + return this.binary(other, (a, b) => a - b); + } + + mul(other: Value): Value { + return this.binary(other, (a, b) => a * b); + } + + div(other: Value): Value { + return this.binary(other, (a, b) => a / b); + } + + ne(other: Value): boolean { + return this.compare(other) !== 0; + } + + eq(other: Value): boolean { + return this.compare(other) === 0; + } + + gt(other: Value): boolean { + return this.compare(other) > 0; + } + + gte(other: Value): boolean { + return this.compare(other) >= 0; + } + + lt(other: Value): boolean { + return this.compare(other) < 0; + } + + lte(other: Value): boolean { + return this.compare(other) <= 0; + } + + unary(func: (v: number) => number): Value { + if (this.value === null) { + return new Value(null, null, null); + } + const value = func(this.value); + return new Value(this.date, value, this.unit); + } + + binary(other: Value, func: (a: number, b: number) => number): Value { + if (this.date === null || this.value === null || this.unit === null) { + return new Value(null, null, other.unit || null); + } + if (other.date === null || other.value === null || other.unit === null) { + return new Value(null, null, this.unit); + } + const oldestDate = this.getOldestDate(other); + const difference = func(this.value, other.value); + return new Value(oldestDate, difference, this.unit); + } + + compare(other: Value, comparing?: (a: number, b: number) => number): number { + if (this.date === null || this.value === null || this.unit === null) { + return -1; + } + if (other.date === null || other.value === null || other.unit === null) { + return +1; + } + if (comparing === undefined) { + return this.value - other.value; + } + return comparing(this.value, other.value); + } + + color(middle: number, high: number, smallColor: string = '#23F', middleColor: string = 'orange', highColor: string = 'red'): string { + if (this.value === null) { + return ""; + } + if (Math.round(this.value) < middle) { + return smallColor; + } else if (Math.round(this.value) < high) { + return middleColor; + } + return highColor; + } + + private getOldestDate(other: Value) { + if (this.date === null || other.date === null) { + return null; + } + if (this instanceof ValueConstant === other instanceof ValueConstant) { + return this.date.getTime() < other.date.getTime() ? this.date : other.date; + } else if (this instanceof ValueConstant) { + return other.date; + } + return this.date; + } + +} + diff --git a/src/main/angular/src/app/api/Value/ValueConstant.ts b/src/main/angular/src/app/api/Value/ValueConstant.ts new file mode 100644 index 0000000..11a1536 --- /dev/null +++ b/src/main/angular/src/app/api/Value/ValueConstant.ts @@ -0,0 +1,12 @@ +import {Value} from "./Value"; + +export class ValueConstant extends Value { + + constructor( + value: number | null, + unit: string | null, + ) { + super(new Date(Date.now()), value, unit); + } + +} diff --git a/src/main/angular/src/app/api/series/IValue.ts b/src/main/angular/src/app/api/series/IValue.ts deleted file mode 100644 index 52b2bb0..0000000 --- a/src/main/angular/src/app/api/series/IValue.ts +++ /dev/null @@ -1,23 +0,0 @@ -export class Display { - - constructor( - readonly title: string, - readonly color: string, - readonly iValue: IValue | null, - ) { - // - - } - -} - -export interface IValue { - - readonly date: Date | null; - - readonly value: number | null; - - readonly unit: string | null; - -} - -export type DisplayOrSeparator = Display | null; diff --git a/src/main/angular/src/app/api/series/Series.ts b/src/main/angular/src/app/api/series/Series.ts index 7ac3bc1..7246b39 100644 --- a/src/main/angular/src/app/api/series/Series.ts +++ b/src/main/angular/src/app/api/series/Series.ts @@ -1,28 +1,21 @@ import {Period} from "./consumption/period/Period"; import {validateDate, validateNumber, validateString} from "../validators"; +import {Value} from "../Value/Value"; -import {IValue} from "./IValue"; +export class Series extends Value { -export class Series implements IValue { + static readonly EMPTY: Series = new Series(0, '', '', '', null, new Date(0), NaN); constructor( readonly id: number, readonly name: string, readonly mode: string, - readonly unit: string, + unit: string, readonly period: Period | null, readonly lastDate: Date, readonly lastValue: number, ) { - // - - } - - get date(): Date { - return this.lastDate; - } - - get value(): number { - return this.lastValue; + super(lastDate, lastValue, unit); } static fromJson(json: any): Series { diff --git a/src/main/angular/src/app/api/series/Value.ts b/src/main/angular/src/app/api/series/Value.ts deleted file mode 100644 index 8de4e7a..0000000 --- a/src/main/angular/src/app/api/series/Value.ts +++ /dev/null @@ -1,68 +0,0 @@ -import {IValue} from "./IValue"; - -type GetValue = (v: number) => number | null; - -type CombineValue = (a: number, b: number) => number; - -function dateMin(a: Date, b: Date): Date { - if (a.getTime() < b.getTime()) { - return a; - } - return b; -} - -export class Value implements IValue { - - constructor( - readonly date: Date | null, - readonly value: number | null, - readonly unit: string | null, - ) { - // - - } - - static positiveOnly(iValue: IValue | null): Value | null { - return this.map(iValue, v => v > 0 ? v : 0); - } - - static negativeOnlyToPositive(iValue: IValue | null): Value | null { - return this.map(iValue, v => v < 0 ? -v : 0); - } - - static map(iValue: IValue | null, mapping: GetValue): Value | null { - if (iValue === null || iValue.value === null) { - return null; - } - const value = mapping(iValue.value); - return new Value(iValue.date, value, iValue.unit); - } - - static plus(a: IValue | null, b: IValue | null): Value | null { - return this.bi(a, b, (a, b) => a + b); - } - - static minus(a: IValue | null, b: IValue | null): Value | null { - return this.bi(a, b, (a, b) => a - b); - } - - static mul(a: IValue | null, b: IValue | null): Value | null { - return this.bi(a, b, (a, b) => a * b); - } - - static div(a: IValue | null, b: IValue | null): Value | null { - return this.bi(a, b, (a, b) => a / b); - } - - static bi(a: IValue | null, b: IValue | null, combineValue: CombineValue) { - if (a === null) { - return new Value(null, null, b?.unit || null); - } - if (b === null) { - return new Value(null, null, a?.unit || null); - } - const oldestDate = a.date === null || b.date === null ? null : dateMin(a.date, b.date); - const difference = a.value === null || b.value === null ? null : combineValue(a.value, b.value); - return new Value(oldestDate, difference, a.unit); - } - -} diff --git a/src/main/angular/src/app/api/series/series.service.ts b/src/main/angular/src/app/api/series/series.service.ts index de2299e..69f3fff 100644 --- a/src/main/angular/src/app/api/series/series.service.ts +++ b/src/main/angular/src/app/api/series/series.service.ts @@ -11,51 +11,51 @@ export class SeriesService { public series: Series[] = []; - public gridPurchased: Series | null = null; + public gridPurchased: Series = Series.EMPTY; - public gridDelivered: Series | null = null; + public gridDelivered: Series = Series.EMPTY; - public photovoltaicProduced: Series | null = null; + public photovoltaicProduced: Series = Series.EMPTY; - public photovoltaicPower: Series | null = null; + public photovoltaicPower: Series = Series.EMPTY; - public gridPower: Series | null = null; + public gridPower: Series = Series.EMPTY; - public schlafzimmerTemperature: Series | null = null; + public schlafzimmerTemperature: Series = Series.EMPTY; - public schlafzimmerHumidityRelative: Series | null = null; + public schlafzimmerHumidityRelative: Series = Series.EMPTY; - public schlafzimmerHumidityAbsolute: Series | null = null; + public schlafzimmerHumidityAbsolute: Series = Series.EMPTY; - public outdoorTemperature: Series | null = null; + public outdoorTemperature: Series = Series.EMPTY; - public outdoorHumidityRelative: Series | null = null; + public outdoorHumidityRelative: Series = Series.EMPTY; - public outdoorHumidityAbsolute: Series | null = null; + public outdoorHumidityAbsolute: Series = Series.EMPTY; - public heatingRoomTemperature: Series | null = null; + public heatingRoomTemperature: Series = Series.EMPTY; - public heatingRoomHumidityRelative: Series | null = null; + public heatingRoomHumidityRelative: Series = Series.EMPTY; - public heatingRoomHumidityAbsolute: Series | null = null; + public heatingRoomHumidityAbsolute: Series = Series.EMPTY; - public heatingExhaustTemperature: Series | null = null; + public heatingExhaustTemperature: Series = Series.EMPTY; - public heatingBufferSupplyTemperature: Series | null = null; + public heatingBufferSupplyTemperature: Series = Series.EMPTY; - public heatingBufferReturnTemperature: Series | null = null; + public heatingBufferReturnTemperature: Series = Series.EMPTY; - public heatingBufferColdTemperature: Series | null = null; + public heatingBufferColdTemperature: Series = Series.EMPTY; - public heatingBufferInnerTemperature: Series | null = null; + public heatingBufferInnerTemperature: Series = Series.EMPTY; - public heatingBufferHotTemperature: Series | null = null; + public heatingBufferHotTemperature: Series = Series.EMPTY; - public heatingBufferCirculationTemperature: Series | null = null; + public heatingBufferCirculationTemperature: Series = Series.EMPTY; - public heatingLoopSupplyTemperature: Series | null = null; + public heatingLoopSupplyTemperature: Series = Series.EMPTY; - public heatingLoopReturnTemperature: Series | null = null; + public heatingLoopReturnTemperature: Series = Series.EMPTY; constructor( private readonly api: ApiService, @@ -100,7 +100,7 @@ export class SeriesService { this.heatingLoopReturnTemperature = this.seriesUpdate2(series, this.heatingLoopReturnTemperature, 'heating.loop.return.temperature'); } - private seriesUpdate2(fresh: Series, old: Series | null, name: string): Series | null { + private seriesUpdate2(fresh: Series, old: Series, name: string): Series { if (fresh.name !== name) { return old; } diff --git a/src/main/angular/src/app/pages/dashboard/air/dashboard-air-tile.component.html b/src/main/angular/src/app/pages/dashboard/air/dashboard-air-tile.component.html index d28a7f6..013ccf8 100644 --- a/src/main/angular/src/app/pages/dashboard/air/dashboard-air-tile.component.html +++ b/src/main/angular/src/app/pages/dashboard/air/dashboard-air-tile.component.html @@ -1 +1 @@ - + diff --git a/src/main/angular/src/app/pages/dashboard/air/dashboard-air-tile.component.ts b/src/main/angular/src/app/pages/dashboard/air/dashboard-air-tile.component.ts index ad393ab..68e64ae 100644 --- a/src/main/angular/src/app/pages/dashboard/air/dashboard-air-tile.component.ts +++ b/src/main/angular/src/app/pages/dashboard/air/dashboard-air-tile.component.ts @@ -1,13 +1,13 @@ import {Component, Input} from '@angular/core'; -import {ValuesTileComponent} from "../../../shared/values-tile/values-tile.component"; -import {Display, DisplayOrSeparator} from "../../../api/series/IValue"; +import {ValueListComponent} from "../../../shared/value-list/value-list.component"; import {SeriesService} from "../../../api/series/series.service"; +import {DisplayValue, Display} from "../../../api/Value/Display"; @Component({ selector: 'app-dashboard-air-tile', standalone: true, imports: [ - ValuesTileComponent + ValueListComponent ], templateUrl: './dashboard-air-tile.component.html', styleUrl: './dashboard-air-tile.component.less' @@ -23,29 +23,25 @@ export class DashboardAirTileComponent { // - } - getDisplayList(): DisplayOrSeparator[] { - const bedroomVent = this.seriesService.schlafzimmerHumidityAbsolute !== null && this.seriesService.schlafzimmerHumidityAbsolute.value !== null - && this.seriesService.outdoorHumidityAbsolute !== null && this.seriesService.outdoorHumidityAbsolute.value !== null - && this.seriesService.schlafzimmerHumidityAbsolute.value > this.seriesService.outdoorHumidityAbsolute.value; + getDisplayList(): Display[] { + const bedroomVent = this.seriesService.schlafzimmerHumidityAbsolute.gt(this.seriesService.outdoorHumidityAbsolute); const bedroomVentColor = bedroomVent ? 'red' : ''; - const heatingRoomVent = this.seriesService.heatingRoomHumidityAbsolute !== null && this.seriesService.heatingRoomHumidityAbsolute.value !== null - && this.seriesService.outdoorHumidityAbsolute !== null && this.seriesService.outdoorHumidityAbsolute.value !== null - && this.seriesService.heatingRoomHumidityAbsolute.value > this.seriesService.outdoorHumidityAbsolute.value; + const heatingRoomVent = this.seriesService.heatingRoomHumidityAbsolute.gt(this.seriesService.outdoorHumidityAbsolute); const heatingRoomVentColor = heatingRoomVent ? 'red' : ''; return [ - new Display('Garten Temperatur', '', this.seriesService.outdoorTemperature), - new Display('Garten Feucht. Relativ', '', this.seriesService.outdoorHumidityRelative), - new Display('Garten Feucht. Absolut', '', this.seriesService.outdoorHumidityAbsolute), + new DisplayValue('Garten Temperatur', this.seriesService.outdoorTemperature, ''), + new DisplayValue('Garten Feucht. Relativ', this.seriesService.outdoorHumidityRelative, ''), + new DisplayValue('Garten Feucht. Absolut', this.seriesService.outdoorHumidityAbsolute, ''), null, - new Display('Schlaf. Temperatur', '', this.seriesService.schlafzimmerTemperature), - new Display('Schlaf. Feucht. Relativ', '', this.seriesService.schlafzimmerHumidityRelative), - new Display('Schlaf. Feucht. Absolut', bedroomVentColor, this.seriesService.schlafzimmerHumidityAbsolute), + new DisplayValue('Schlaf. Temperatur', this.seriesService.schlafzimmerTemperature, ''), + new DisplayValue('Schlaf. Feucht. Relativ', this.seriesService.schlafzimmerHumidityRelative, ''), + new DisplayValue('Schlaf. Feucht. Absolut', this.seriesService.schlafzimmerHumidityAbsolute, bedroomVentColor), null, - new Display('Heiz. Temperatur', '', this.seriesService.heatingRoomTemperature), - new Display('Heiz. Feucht. Relativ', '', this.seriesService.heatingRoomHumidityRelative), - new Display('Heiz. Feucht. Absolut', heatingRoomVentColor, this.seriesService.heatingRoomHumidityAbsolute), + new DisplayValue('Heiz. Temperatur', this.seriesService.heatingRoomTemperature, ''), + new DisplayValue('Heiz. Feucht. Relativ', this.seriesService.heatingRoomHumidityRelative, ''), + new DisplayValue('Heiz. Feucht. Absolut', this.seriesService.heatingRoomHumidityAbsolute, heatingRoomVentColor), ]; } diff --git a/src/main/angular/src/app/pages/dashboard/dashboard.component.ts b/src/main/angular/src/app/pages/dashboard/dashboard.component.ts index fd59f6b..1029f65 100644 --- a/src/main/angular/src/app/pages/dashboard/dashboard.component.ts +++ b/src/main/angular/src/app/pages/dashboard/dashboard.component.ts @@ -1,6 +1,6 @@ import {Component, OnDestroy, OnInit} from '@angular/core'; import {JsonPipe, NgForOf} from "@angular/common"; -import {ValuesTileComponent} from "../../shared/values-tile/values-tile.component"; +import {ValueListComponent} from "../../shared/value-list/value-list.component"; import {DashboardElectricityTileComponent} from "./electricity/dashboard-electricity-tile.component"; import {DashboardAirTileComponent} from "./air/dashboard-air-tile.component"; import {Subscription, timer} from "rxjs"; @@ -13,7 +13,7 @@ const UPDATE_INTERVAL_MILLIS = 1000; standalone: true, imports: [ NgForOf, - ValuesTileComponent, + ValueListComponent, JsonPipe, DashboardElectricityTileComponent, DashboardAirTileComponent, diff --git a/src/main/angular/src/app/pages/dashboard/electricity/dashboard-electricity-tile.component.html b/src/main/angular/src/app/pages/dashboard/electricity/dashboard-electricity-tile.component.html index 639bd9c..f90796e 100644 --- a/src/main/angular/src/app/pages/dashboard/electricity/dashboard-electricity-tile.component.html +++ b/src/main/angular/src/app/pages/dashboard/electricity/dashboard-electricity-tile.component.html @@ -1 +1 @@ - + diff --git a/src/main/angular/src/app/pages/dashboard/electricity/dashboard-electricity-tile.component.ts b/src/main/angular/src/app/pages/dashboard/electricity/dashboard-electricity-tile.component.ts index 6ca1d67..f6a8bcf 100644 --- a/src/main/angular/src/app/pages/dashboard/electricity/dashboard-electricity-tile.component.ts +++ b/src/main/angular/src/app/pages/dashboard/electricity/dashboard-electricity-tile.component.ts @@ -1,18 +1,18 @@ import {Component, Input} from '@angular/core'; -import {ValuesTileComponent} from "../../../shared/values-tile/values-tile.component"; -import {Display, DisplayOrSeparator} from "../../../api/series/IValue"; -import {Value} from "../../../api/series/Value"; +import {ValueListComponent} from "../../../shared/value-list/value-list.component"; import {SeriesService} from "../../../api/series/series.service"; +import {DisplayValue, Display} from "../../../api/Value/Display"; +import {ValueConstant} from "../../../api/Value/ValueConstant"; const PURCHASING_MUCH = 200; -const PRODUCED_UNTIL_METER_CHANGE = 287.995; +const PRODUCED_BEFORE_METER_CHANGE = new ValueConstant(287.995, "kWh"); @Component({ selector: 'app-dashboard-electricity-tile', standalone: true, imports: [ - ValuesTileComponent + ValueListComponent ], templateUrl: './dashboard-electricity-tile.component.html', styleUrl: './dashboard-electricity-tile.component.less' @@ -28,30 +28,24 @@ export class DashboardElectricityTileComponent { // - } - getDisplayList(): DisplayOrSeparator[] { - const consumptionPower = Value.positiveOnly(Value.plus(this.seriesService.photovoltaicPower, this.seriesService.gridPower)); - const selfConsumed = Value.map(this.seriesService.photovoltaicProduced, producedTotal => { - if (this.seriesService.gridDelivered === null || this.seriesService.gridDelivered.value === null) { - return null; - } - const producedAfterChange = producedTotal - PRODUCED_UNTIL_METER_CHANGE; - const deliveredAfterChange = this.seriesService.gridDelivered?.value; - const selfAfterChange = producedAfterChange - deliveredAfterChange; - const selfRatio = selfAfterChange / producedAfterChange; - return selfRatio * producedTotal; - }); + getDisplayList(): Display[] { + const consumptionPower = this.seriesService.photovoltaicPower.plus(this.seriesService.gridPower).clampNonNegative(); + const producedAfterChange = this.seriesService.photovoltaicProduced.minus(PRODUCED_BEFORE_METER_CHANGE); + const selfAfterChange = producedAfterChange.minus(this.seriesService.gridDelivered); + const selfRatio = selfAfterChange.div(producedAfterChange); + const selfConsumed = selfRatio.mul(this.seriesService.photovoltaicProduced); const gridColor = this.getGridPowerColor(); const productionColor = this.getProductionPowerColor(); return [ - new Display('Bezogen', '', this.seriesService.gridPurchased), - new Display('Eingespeist', '', this.seriesService.gridDelivered), - new Display('Produziert', '', this.seriesService.photovoltaicProduced), - new Display('Selbst verbraucht', '', selfConsumed), + new DisplayValue('Bezogen', this.seriesService.gridPurchased, ''), + new DisplayValue('Eingespeist', this.seriesService.gridDelivered, ''), + new DisplayValue('Produziert', this.seriesService.photovoltaicProduced, ''), + new DisplayValue('Selbst verbraucht', selfConsumed, ''), null, - new Display('Produktion', productionColor, this.seriesService.photovoltaicPower), - new Display('Netz', gridColor, this.seriesService.gridPower), - new Display('Verbrauch', '', consumptionPower), + new DisplayValue('Produktion', this.seriesService.photovoltaicPower, productionColor), + new DisplayValue('Netz', this.seriesService.gridPower, gridColor), + new DisplayValue('Verbrauch', consumptionPower, ''), ]; } diff --git a/src/main/angular/src/app/pages/dashboard/heating/dashboard-heating-tile.component.html b/src/main/angular/src/app/pages/dashboard/heating/dashboard-heating-tile.component.html index 297c285..d773d06 100644 --- a/src/main/angular/src/app/pages/dashboard/heating/dashboard-heating-tile.component.html +++ b/src/main/angular/src/app/pages/dashboard/heating/dashboard-heating-tile.component.html @@ -1 +1 @@ - + diff --git a/src/main/angular/src/app/pages/dashboard/heating/dashboard-heating-tile.component.ts b/src/main/angular/src/app/pages/dashboard/heating/dashboard-heating-tile.component.ts index d490ca8..abcba20 100644 --- a/src/main/angular/src/app/pages/dashboard/heating/dashboard-heating-tile.component.ts +++ b/src/main/angular/src/app/pages/dashboard/heating/dashboard-heating-tile.component.ts @@ -1,7 +1,7 @@ import {Component, Input} from '@angular/core'; -import {ValuesTileComponent} from "../../../shared/values-tile/values-tile.component"; -import {Display, DisplayOrSeparator, IValue} from "../../../api/series/IValue"; +import {ValueListComponent} from "../../../shared/value-list/value-list.component"; import {SeriesService} from "../../../api/series/series.service"; +import {DisplayValue, Display} from "../../../api/Value/Display"; const WARM = 25; @@ -11,7 +11,7 @@ const HOT = 55; selector: 'app-dashboard-heating-tile', standalone: true, imports: [ - ValuesTileComponent + ValueListComponent ], templateUrl: './dashboard-heating-tile.component.html', styleUrl: './dashboard-heating-tile.component.less' @@ -27,33 +27,21 @@ export class DashboardHeatingTileComponent { // - } - getDisplayList(): DisplayOrSeparator[] { + getDisplayList(): Display[] { return [ - new Display('Abgas', this.color(WARM, HOT, this.seriesService.heatingExhaustTemperature, ''), this.seriesService.heatingExhaustTemperature), + new DisplayValue('Abgas', this.seriesService.heatingExhaustTemperature, this.seriesService.heatingExhaustTemperature.color(WARM, HOT, '')), null, - new Display('Heizkreis Vorlauf', this.color(WARM, HOT, this.seriesService.heatingLoopSupplyTemperature), this.seriesService.heatingLoopSupplyTemperature), - new Display('Heizkreis Rücklauf', this.color(WARM, HOT, this.seriesService.heatingLoopReturnTemperature), this.seriesService.heatingLoopReturnTemperature), + new DisplayValue('Heizkreis Vorlauf', this.seriesService.heatingLoopSupplyTemperature, this.seriesService.heatingLoopSupplyTemperature.color(WARM, HOT)), + new DisplayValue('Heizkreis Rücklauf', this.seriesService.heatingLoopReturnTemperature, this.seriesService.heatingLoopReturnTemperature.color(WARM, HOT)), null, - new Display('Puffer Vorlauf', this.color(WARM, HOT, this.seriesService.heatingBufferSupplyTemperature), this.seriesService.heatingBufferSupplyTemperature), - new Display('Puffer Rücklauf', this.color(WARM, HOT, this.seriesService.heatingBufferReturnTemperature), this.seriesService.heatingBufferReturnTemperature), + new DisplayValue('Puffer Vorlauf', this.seriesService.heatingBufferSupplyTemperature, this.seriesService.heatingBufferSupplyTemperature.color(WARM, HOT)), + new DisplayValue('Puffer Rücklauf', this.seriesService.heatingBufferReturnTemperature, this.seriesService.heatingBufferReturnTemperature.color(WARM, HOT)), null, - new Display('Puffer Kalt', this.color(WARM, HOT, this.seriesService.heatingBufferColdTemperature), this.seriesService.heatingBufferColdTemperature), - new Display('Puffer Speicher', this.color(WARM, HOT, this.seriesService.heatingBufferInnerTemperature), this.seriesService.heatingBufferInnerTemperature), - new Display('Puffer Warm', this.color(WARM, HOT, this.seriesService.heatingBufferHotTemperature), this.seriesService.heatingBufferHotTemperature), - new Display('Puffer Zirkulation', this.color(WARM, HOT, this.seriesService.heatingBufferCirculationTemperature), this.seriesService.heatingBufferCirculationTemperature), + new DisplayValue('Puffer Kalt', this.seriesService.heatingBufferColdTemperature, this.seriesService.heatingBufferColdTemperature.color(WARM, HOT)), + new DisplayValue('Puffer Speicher', this.seriesService.heatingBufferInnerTemperature, this.seriesService.heatingBufferInnerTemperature.color(WARM, HOT)), + new DisplayValue('Puffer Warm', this.seriesService.heatingBufferHotTemperature, this.seriesService.heatingBufferHotTemperature.color(WARM, HOT)), + new DisplayValue('Puffer Zirkulation', this.seriesService.heatingBufferCirculationTemperature, this.seriesService.heatingBufferCirculationTemperature.color(WARM, HOT)), ]; } - private color(middle: number, high: number, value: IValue | null, smallColor: string = '#23F', middleColor: string = 'orange', highColor: string = 'red'): string { - if (value === null || value.value === null) { - return ""; - } - if (Math.round(value.value) < middle) { - return smallColor; - } else if (Math.round(value.value) < high) { - return middleColor; - } - return highColor; - } - } diff --git a/src/main/angular/src/app/shared/values-tile/values-tile.component.html b/src/main/angular/src/app/shared/value-list/value-list.component.html similarity index 85% rename from src/main/angular/src/app/shared/values-tile/values-tile.component.html rename to src/main/angular/src/app/shared/value-list/value-list.component.html index e011358..449c1a0 100644 --- a/src/main/angular/src/app/shared/values-tile/values-tile.component.html +++ b/src/main/angular/src/app/shared/value-list/value-list.component.html @@ -8,10 +8,10 @@ {{ display.title }} - {{ display?.iValue?.value | number:'0.0-0' }} + {{ display?.value?.value | number:'0.0-0' }} - {{ display?.iValue?.unit }} + {{ display?.value?.unit }} diff --git a/src/main/angular/src/app/shared/values-tile/values-tile.component.less b/src/main/angular/src/app/shared/value-list/value-list.component.less similarity index 100% rename from src/main/angular/src/app/shared/values-tile/values-tile.component.less rename to src/main/angular/src/app/shared/value-list/value-list.component.less diff --git a/src/main/angular/src/app/shared/values-tile/values-tile.component.ts b/src/main/angular/src/app/shared/value-list/value-list.component.ts similarity index 55% rename from src/main/angular/src/app/shared/values-tile/values-tile.component.ts rename to src/main/angular/src/app/shared/value-list/value-list.component.ts index d9fabb9..a8087e6 100644 --- a/src/main/angular/src/app/shared/values-tile/values-tile.component.ts +++ b/src/main/angular/src/app/shared/value-list/value-list.component.ts @@ -1,19 +1,19 @@ import {Component, Input} from '@angular/core'; import {DecimalPipe, NgForOf, NgIf} from "@angular/common"; -import {DisplayOrSeparator} from "../../api/series/IValue"; +import {Display} from "../../api/Value/Display"; @Component({ - selector: 'app-values-tile', + selector: 'app-value-list', standalone: true, imports: [ NgIf, DecimalPipe, NgForOf ], - templateUrl: './values-tile.component.html', - styleUrl: './values-tile.component.less' + templateUrl: './value-list.component.html', + styleUrl: './value-list.component.less' }) -export class ValuesTileComponent { +export class ValueListComponent { protected valid: boolean = false; @@ -35,15 +35,15 @@ export class ValuesTileComponent { icon?: string; @Input() - protected displayList_: DisplayOrSeparator[] = []; + protected displayList_: Display[] = []; @Input() - set displayList(seriesList: DisplayOrSeparator[]) { + set displayList(seriesList: Display[]) { this.displayList_ = seriesList; this.displayUpdate(); } - get displayList(): DisplayOrSeparator[] { + get displayList(): Display[] { return this.displayList_; } @@ -51,7 +51,7 @@ export class ValuesTileComponent { maxAgeSeconds: number = 10; private displayUpdate() { - this.valid = this.displayList.some(d => !!d && !!d.iValue && !!d.iValue.date && (this.now.getTime() - d.iValue.date.getTime()) <= this.maxAgeSeconds * 1000) + this.valid = this.displayList.some(d => !!d && !!d.value && !!d.value.date && (this.now.getTime() - d.value.date.getTime()) <= this.maxAgeSeconds * 1000) } }