centralized "now" timer into Dashboard
This commit is contained in:
parent
b3e5ed3985
commit
1d809f13a7
@ -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>
|
||||
|
||||
@ -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 {Display, DisplayOrSeparator} from "../../../api/series/IValue";
|
||||
import {SeriesService} from "../../../api/series/series.service";
|
||||
@ -14,6 +14,9 @@ import {SeriesService} from "../../../api/series/series.service";
|
||||
})
|
||||
export class DashboardAirTileComponent {
|
||||
|
||||
@Input()
|
||||
now!: Date;
|
||||
|
||||
constructor(
|
||||
protected readonly seriesService: SeriesService,
|
||||
) {
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div class="width100">
|
||||
<app-dashboard-electricity-tile></app-dashboard-electricity-tile>
|
||||
<app-dashboard-electricity-tile [now]="now"></app-dashboard-electricity-tile>
|
||||
</div>
|
||||
|
||||
<div class="width100">
|
||||
<app-dashboard-air-tile></app-dashboard-air-tile>
|
||||
<app-dashboard-air-tile [now]="now"></app-dashboard-air-tile>
|
||||
</div>
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
import {Component} from '@angular/core';
|
||||
import {Component, OnDestroy, OnInit} from '@angular/core';
|
||||
import {JsonPipe, NgForOf} from "@angular/common";
|
||||
import {ValuesTileComponent} from "../../shared/values-tile/values-tile.component";
|
||||
import {DashboardElectricityTileComponent} from "./electricity/dashboard-electricity-tile.component";
|
||||
import {DashboardAirTileComponent} from "./air/dashboard-air-tile.component";
|
||||
import {Subscription, timer} from "rxjs";
|
||||
|
||||
const UPDATE_INTERVAL_MILLIS = 1000;
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
@ -17,6 +20,18 @@ import {DashboardAirTileComponent} from "./air/dashboard-air-tile.component";
|
||||
templateUrl: './dashboard.component.html',
|
||||
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();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 {Display, DisplayOrSeparator} from "../../../api/series/IValue";
|
||||
import {Value} from "../../../api/series/Value";
|
||||
@ -19,6 +19,9 @@ const PRODUCED_UNTIL_METER_CHANGE = 287.995;
|
||||
})
|
||||
export class DashboardElectricityTileComponent {
|
||||
|
||||
@Input()
|
||||
now!: Date;
|
||||
|
||||
constructor(
|
||||
protected readonly seriesService: SeriesService,
|
||||
) {
|
||||
|
||||
@ -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 {DecimalPipe, NgForOf, NgIf} from "@angular/common";
|
||||
import {Subscription, timer} from "rxjs";
|
||||
import {DisplayOrSeparator} from "../../api/series/IValue";
|
||||
|
||||
const UPDATE_INTERVAL_MILLIS = 5000;
|
||||
|
||||
const TOO_OLD_MILLIS = 10000;
|
||||
|
||||
@Component({
|
||||
@ -19,14 +16,21 @@ const TOO_OLD_MILLIS = 10000;
|
||||
templateUrl: './values-tile.component.html',
|
||||
styleUrl: './values-tile.component.less'
|
||||
})
|
||||
export class ValuesTileComponent implements OnInit, OnDestroy {
|
||||
|
||||
private now: Date = new Date();
|
||||
|
||||
private timer?: Subscription;
|
||||
export class ValuesTileComponent {
|
||||
|
||||
protected valid: boolean = false;
|
||||
|
||||
protected _now: Date = new Date();
|
||||
|
||||
@Input()
|
||||
set now(now: Date) {
|
||||
this._now = now;
|
||||
}
|
||||
|
||||
get now(): Date {
|
||||
return this._now;
|
||||
}
|
||||
|
||||
@Input()
|
||||
title: string = '';
|
||||
|
||||
@ -93,16 +97,7 @@ export class ValuesTileComponent implements OnInit, OnDestroy {
|
||||
return '';
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.timer = timer(0, UPDATE_INTERVAL_MILLIS).subscribe(() => this.displayUpdate());
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.timer?.unsubscribe();
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user