diff --git a/src/main/angular/public/electricity.svg b/src/main/angular/public/electricity.svg new file mode 100644 index 0000000..80d66dc --- /dev/null +++ b/src/main/angular/public/electricity.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + diff --git a/src/main/angular/src/app/api/series/IValue.ts b/src/main/angular/src/app/api/series/IValue.ts index 28cdb1e..52b2bb0 100644 --- a/src/main/angular/src/app/api/series/IValue.ts +++ b/src/main/angular/src/app/api/series/IValue.ts @@ -19,3 +19,5 @@ export interface IValue { readonly unit: string | null; } + +export type DisplayOrSeparator = Display | null; diff --git a/src/main/angular/src/app/pages/dashboard/dashboard.component.html b/src/main/angular/src/app/pages/dashboard/dashboard.component.html index f4dc544..83bb6c5 100644 --- a/src/main/angular/src/app/pages/dashboard/dashboard.component.html +++ b/src/main/angular/src/app/pages/dashboard/dashboard.component.html @@ -1,3 +1,3 @@
- +
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 e74edb8..7e8af9a 100644 --- a/src/main/angular/src/app/pages/dashboard/dashboard.component.ts +++ b/src/main/angular/src/app/pages/dashboard/dashboard.component.ts @@ -4,7 +4,7 @@ import {Series} from "../../api/series/Series"; import {SeriesService} from "../../api/series/series.service"; import {ValuesTileComponent} from "../../shared/values-tile/values-tile.component"; import {Value} from "../../api/series/Value"; -import {Display} from "../../api/series/IValue"; +import {Display, DisplayOrSeparator} from "../../api/series/IValue"; const PURCHASING_MUCH = 200; @@ -63,7 +63,7 @@ export class DashboardComponent implements OnInit { return old; } - getElectricitySeries(): Display[] { + getElectricitySeries(): DisplayOrSeparator[] { const consumptionPower = Value.positiveOnly(Value.plus(this.photovoltaicPower, this.gridPower)); const selfConsumed = Value.map(this.photovoltaicProduced, producedTotal => { const producedAfterChange = producedTotal - PRODUCED_UNTIL_METER_CHANGE; @@ -79,10 +79,11 @@ export class DashboardComponent implements OnInit { return [ new Display('Bezug', '', this.gridPurchased), - new Display('Produktion', '', this.photovoltaicProduced), new Display('Einspeisung', '', this.gridDelivered), - new Display('Eigenverbrauch', '', selfConsumed), - + null, + new Display('Produktion', '#006600', this.photovoltaicProduced), + new Display('Eigenverbrauch', '#006600', selfConsumed), + null, new Display('Produktion', color, this.photovoltaicPower), new Display('Netz', color, this.gridPower), new Display('Verbrauch', color, consumptionPower), diff --git a/src/main/angular/src/app/shared/values-tile/values-tile.component.html b/src/main/angular/src/app/shared/values-tile/values-tile.component.html index 5f63b48..6253463 100644 --- a/src/main/angular/src/app/shared/values-tile/values-tile.component.html +++ b/src/main/angular/src/app/shared/values-tile/values-tile.component.html @@ -1,11 +1,19 @@
-
{{ title }}
+
+ + {{ title }} +
{{ number() }}
- - - - - + + + + + + + + + +
{{ display.title }}{{ display?.iValue?.value | number:'0.0-0' }}{{ display?.iValue?.unit }}
{{ display.title }}{{ display?.iValue?.value | number:'0.0-0' }}{{ display?.iValue?.unit }}
diff --git a/src/main/angular/src/app/shared/values-tile/values-tile.component.less b/src/main/angular/src/app/shared/values-tile/values-tile.component.less index 92feeeb..799759d 100644 --- a/src/main/angular/src/app/shared/values-tile/values-tile.component.less +++ b/src/main/angular/src/app/shared/values-tile/values-tile.component.less @@ -5,34 +5,46 @@ padding: @space; border: 1px solid #ddd; border-radius: @space; -} + background-color: #fbfbfb; -.title { - font-weight: bold; - text-align: center; -} + .title { + font-weight: bold; + text-align: center; -.number { - font-style: italic; - text-align: center; - font-size: 80%; -} - -.values { - width: 100%; - - th { - text-align: left; - width: 0; + img { + height: 1.5em; + vertical-align: top; + } } - .v { - text-align: right; + .number { + font-style: italic; + text-align: center; + font-size: 80%; } - .u { - text-align: left; - width: 0; + .values { + width: 100%; + + th { + text-align: left; + width: 0; + } + + .v { + text-align: right; + } + + .u { + text-align: left; + width: 0; + } + + .spacer { + height: 1px; + background-color: lightgray; + } + } } diff --git a/src/main/angular/src/app/shared/values-tile/values-tile.component.ts b/src/main/angular/src/app/shared/values-tile/values-tile.component.ts index d300f9e..c65b0b8 100644 --- a/src/main/angular/src/app/shared/values-tile/values-tile.component.ts +++ b/src/main/angular/src/app/shared/values-tile/values-tile.component.ts @@ -2,9 +2,11 @@ import {Component, Input, OnDestroy, OnInit} from '@angular/core'; import {Series} from "../../api/series/Series"; import {DecimalPipe, NgForOf, NgIf} from "@angular/common"; import {Subscription, timer} from "rxjs"; -import {Display} from "../../api/series/IValue"; +import {DisplayOrSeparator} from "../../api/series/IValue"; -export const TOO_OLD_MILLIS = 10000; +const UPDATE_INTERVAL_MILLIS = 5000; + +const TOO_OLD_MILLIS = 10000; @Component({ selector: 'app-values-tile', @@ -29,15 +31,18 @@ export class ValuesTileComponent implements OnInit, OnDestroy { title: string = ''; @Input() - protected seriesList_: Display[] = []; + icon?: string; @Input() - set seriesList(seriesList: Display[]) { + protected seriesList_: DisplayOrSeparator[] = []; + + @Input() + set seriesList(seriesList: DisplayOrSeparator[]) { this.seriesList_ = seriesList; this.displayUpdate(); } - get seriesList(): Display[] { + get seriesList(): DisplayOrSeparator[] { return this.seriesList_; } @@ -89,7 +94,7 @@ export class ValuesTileComponent implements OnInit, OnDestroy { } ngOnInit(): void { - this.timer = timer(0, 1000).subscribe(() => this.displayUpdate()); + this.timer = timer(0, UPDATE_INTERVAL_MILLIS).subscribe(() => this.displayUpdate()); } ngOnDestroy(): void { diff --git a/src/main/angular/src/styles.less b/src/main/angular/src/styles.less index 6de11fe..546868e 100644 --- a/src/main/angular/src/styles.less +++ b/src/main/angular/src/styles.less @@ -4,7 +4,7 @@ body { font-family: sans-serif; font-size: @font; margin: 0; - overflow: hidden; + overflow-x: hidden; } div {