sebastian/WetterHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD: Update Time Intervall

Browse Source
This commit is contained in:
sebastian 2026-06-30 18:02:47 +02:00
parent 651aa1b023
commit fe3e7334ce
3 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/app.html
View File

@ -16,10 +16,10 @@
<span>Einstellungen</span> <span>Einstellungen</span>
</button> </button>
<span class="example-spacer"></span> <span class="example-spacer"></span>
<button matButton="filled" style="margin-right: 1em">24h</button> <button matButton="filled" style="margin-right: 1em" (click)="onChangeTimeInterval('24h')">24h</button>
<button matButton="filled" style="margin-right: 1em">7d</button> <button matButton="filled" style="margin-right: 1em" (click)="onChangeTimeInterval('7d')">7d</button>
<button matButton="filled" style="margin-right: 1em">30d</button> <button matButton="filled" style="margin-right: 1em" (click)="onChangeTimeInterval('30d')">30d</button>
<button matButton="filled" style="margin-right: 1em">1J</button> <button matButton="filled" style="margin-right: 1em" (click)="onChangeTimeInterval('1Y')">1J</button>
</mat-toolbar> </mat-toolbar>
<mat-drawer-container class="example-container"> <mat-drawer-container class="example-container">
<mat-drawer mode="side" opened> <mat-drawer mode="side" opened>
@ -27,7 +27,7 @@
</mat-drawer> </mat-drawer>
<mat-drawer-content> <mat-drawer-content>
<app-wettter-overview></app-wettter-overview> <app-wettter-overview></app-wettter-overview>
<app-diagrams></app-diagrams> <app-diagrams #diagrams></app-diagrams>
</mat-drawer-content> </mat-drawer-content>
</mat-drawer-container> </mat-drawer-container>

11
src/app/app.ts
View File

@ -1,4 +1,4 @@
import { Component, signal } from '@angular/core'; import {Component, signal, ViewChild} from '@angular/core';
import {RouterLink, RouterOutlet} from '@angular/router'; import {RouterLink, RouterOutlet} from '@angular/router';
import {MatToolbar} from '@angular/material/toolbar'; import {MatToolbar} from '@angular/material/toolbar';
import {MatIcon} from '@angular/material/icon'; import {MatIcon} from '@angular/material/icon';
@ -6,7 +6,7 @@ import {MatButton, MatIconButton} from '@angular/material/button';
import {MatDrawer, MatDrawerContainer, MatDrawerContent} from '@angular/material/sidenav'; import {MatDrawer, MatDrawerContainer, MatDrawerContent} from '@angular/material/sidenav';
import {StationList} from './station-list/station-list'; import {StationList} from './station-list/station-list';
import {WettterOverview} from './components/wettter-overview/wettter-overview'; import {WettterOverview} from './components/wettter-overview/wettter-overview';
import {TemperatureComponent} from './components/diagrams/temperature/temperature'; import {TemperatureComponent, TimeResolution} from './components/diagrams/temperature/temperature';
import {Diagrams} from './components/diagrams/diagrams'; import {Diagrams} from './components/diagrams/diagrams';
@Component({ @Component({
@ -17,4 +17,11 @@ import {Diagrams} from './components/diagrams/diagrams';
}) })
export class App { export class App {
protected readonly title = signal('WetterHub'); protected readonly title = signal('WetterHub');
@ViewChild('diagrams') diagrams?: Diagrams
onChangeTimeInterval(timeResolution: TimeResolution) {
if(this.diagrams) {
this.diagrams.updateTimeResolution(timeResolution);
}
}
} }

18
src/app/components/diagrams/diagrams.ts
View File

@ -47,12 +47,28 @@ export class Diagrams {
return map[this.timeResolution]?.toISOString(); return map[this.timeResolution]?.toISOString();
} }
get measurementResolution() {
const map: Record<TimeResolution, MeasurementResolution> = {
'24h': 'hourly',
'7d': 'daily',
'30d': 'daily',
'1Y': 'monthly',
'All': 'yearly'
};
return map[this.timeResolution]
}
public updateTimeResolution(timeResolution: TimeResolution) {
this.timeResolution = timeResolution;
this.fetchMeasurements()
}
fetchMeasurements() { fetchMeasurements() {
const stationIds = this.activeStations.map(s => s.id); const stationIds = this.activeStations.map(s => s.id);
const now = new Date().toISOString(); const now = new Date().toISOString();
this.api.getMeasurementsMeasurementsGet( this.api.getMeasurementsMeasurementsGet(
stationIds, undefined, this.timeIntervalStart, now, this.resolution stationIds, undefined, this.timeIntervalStart, now, this.measurementResolution
).subscribe(data => { ).subscribe(data => {
this.measurements = data; this.measurements = data;
this.buildCharts(); this.buildCharts();