centralized "now" timer into Dashboard

This commit is contained in:
Patrick Haßel 2024-10-18 11:23:03 +02:00
parent b3e5ed3985
commit 1d809f13a7
7 changed files with 42 additions and 26 deletions

View File

@ -1 +1 @@
<app-values-tile title="Luft" icon="air.svg" [displayList]="getDisplayList()"></app-values-tile> <app-values-tile title="Luft" icon="air.svg" [displayList]="getDisplayList()" [now]="now"></app-values-tile>

View File

@ -1,4 +1,4 @@
import {Component} from '@angular/core'; import {Component, Input} from '@angular/core';
import {ValuesTileComponent} from "../../../shared/values-tile/values-tile.component"; import {ValuesTileComponent} from "../../../shared/values-tile/values-tile.component";
import {Display, DisplayOrSeparator} from "../../../api/series/IValue"; import {Display, DisplayOrSeparator} from "../../../api/series/IValue";
import {SeriesService} from "../../../api/series/series.service"; import {SeriesService} from "../../../api/series/series.service";
@ -14,6 +14,9 @@ import {SeriesService} from "../../../api/series/series.service";
}) })
export class DashboardAirTileComponent { export class DashboardAirTileComponent {
@Input()
now!: Date;
constructor( constructor(
protected readonly seriesService: SeriesService, protected readonly seriesService: SeriesService,
) { ) {

View File

@ -1,7 +1,7 @@
<div class="width100"> <div class="width100">
<app-dashboard-electricity-tile></app-dashboard-electricity-tile> <app-dashboard-electricity-tile [now]="now"></app-dashboard-electricity-tile>
</div> </div>
<div class="width100"> <div class="width100">
<app-dashboard-air-tile></app-dashboard-air-tile> <app-dashboard-air-tile [now]="now"></app-dashboard-air-tile>
</div> </div>

View File

@ -1,8 +1,11 @@
import {Component} from '@angular/core'; import {Component, OnDestroy, OnInit} from '@angular/core';
import {JsonPipe, NgForOf} from "@angular/common"; import {JsonPipe, NgForOf} from "@angular/common";
import {ValuesTileComponent} from "../../shared/values-tile/values-tile.component"; import {ValuesTileComponent} from "../../shared/values-tile/values-tile.component";
import {DashboardElectricityTileComponent} from "./electricity/dashboard-electricity-tile.component"; import {DashboardElectricityTileComponent} from "./electricity/dashboard-electricity-tile.component";
import {DashboardAirTileComponent} from "./air/dashboard-air-tile.component"; import {DashboardAirTileComponent} from "./air/dashboard-air-tile.component";
import {Subscription, timer} from "rxjs";
const UPDATE_INTERVAL_MILLIS = 1000;
@Component({ @Component({
selector: 'app-dashboard', selector: 'app-dashboard',
@ -17,6 +20,18 @@ import {DashboardAirTileComponent} from "./air/dashboard-air-tile.component";
templateUrl: './dashboard.component.html', templateUrl: './dashboard.component.html',
styleUrl: './dashboard.component.less' styleUrl: './dashboard.component.less'
}) })
export class DashboardComponent { export class DashboardComponent implements OnInit, OnDestroy {
protected now: Date = new Date();
private timer?: Subscription;
ngOnInit(): void {
this.timer = timer(0, UPDATE_INTERVAL_MILLIS).subscribe(() => this.now = new Date());
}
ngOnDestroy(): void {
this.timer?.unsubscribe();
}
} }

View File

@ -1 +1 @@
<app-values-tile title="Elektrizität" icon="electricity.svg" [displayList]="getDisplayList()"></app-values-tile> <app-values-tile title="Elektrizität" icon="electricity.svg" [displayList]="getDisplayList()" [now]="now"></app-values-tile>

View File

@ -1,4 +1,4 @@
import {Component} from '@angular/core'; import {Component, Input} from '@angular/core';
import {ValuesTileComponent} from "../../../shared/values-tile/values-tile.component"; import {ValuesTileComponent} from "../../../shared/values-tile/values-tile.component";
import {Display, DisplayOrSeparator} from "../../../api/series/IValue"; import {Display, DisplayOrSeparator} from "../../../api/series/IValue";
import {Value} from "../../../api/series/Value"; import {Value} from "../../../api/series/Value";
@ -19,6 +19,9 @@ const PRODUCED_UNTIL_METER_CHANGE = 287.995;
}) })
export class DashboardElectricityTileComponent { export class DashboardElectricityTileComponent {
@Input()
now!: Date;
constructor( constructor(
protected readonly seriesService: SeriesService, protected readonly seriesService: SeriesService,
) { ) {

View File

@ -1,11 +1,8 @@
import {Component, Input, OnDestroy, OnInit} from '@angular/core'; import {Component, Input} from '@angular/core';
import {Series} from "../../api/series/Series"; import {Series} from "../../api/series/Series";
import {DecimalPipe, NgForOf, NgIf} from "@angular/common"; import {DecimalPipe, NgForOf, NgIf} from "@angular/common";
import {Subscription, timer} from "rxjs";
import {DisplayOrSeparator} from "../../api/series/IValue"; import {DisplayOrSeparator} from "../../api/series/IValue";
const UPDATE_INTERVAL_MILLIS = 5000;
const TOO_OLD_MILLIS = 10000; const TOO_OLD_MILLIS = 10000;
@Component({ @Component({
@ -19,14 +16,21 @@ const TOO_OLD_MILLIS = 10000;
templateUrl: './values-tile.component.html', templateUrl: './values-tile.component.html',
styleUrl: './values-tile.component.less' styleUrl: './values-tile.component.less'
}) })
export class ValuesTileComponent implements OnInit, OnDestroy { export class ValuesTileComponent {
private now: Date = new Date();
private timer?: Subscription;
protected valid: boolean = false; protected valid: boolean = false;
protected _now: Date = new Date();
@Input()
set now(now: Date) {
this._now = now;
}
get now(): Date {
return this._now;
}
@Input() @Input()
title: string = ''; title: string = '';
@ -93,16 +97,7 @@ export class ValuesTileComponent implements OnInit, OnDestroy {
return ''; return '';
} }
ngOnInit(): void {
this.timer = timer(0, UPDATE_INTERVAL_MILLIS).subscribe(() => this.displayUpdate());
}
ngOnDestroy(): void {
this.timer?.unsubscribe();
}
private displayUpdate() { private displayUpdate() {
this.now = new Date();
this.valid = this.displayList.some(d => !!d && !!d.iValue && !!d.iValue.date && (this.now.getTime() - d.iValue.date.getTime()) <= TOO_OLD_MILLIS) this.valid = this.displayList.some(d => !!d && !!d.iValue && !!d.iValue.date && (this.now.getTime() - d.iValue.date.getTime()) <= TOO_OLD_MILLIS)
} }