ADD: Update Time Intervall

src/app/app.html

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

src/app/app.ts

@@ -1,4 +1,4 @@
-import { Component, signal } from '@angular/core';
+import {Component, signal, ViewChild} from '@angular/core';
 import {RouterLink, RouterOutlet} from '@angular/router';
 import {MatToolbar} from '@angular/material/toolbar';
 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 {StationList} from './station-list/station-list';
 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';
 
 @Component({
@@ -17,4 +17,11 @@ import {Diagrams} from './components/diagrams/diagrams';
 })
 export class App {
   protected readonly title = signal('WetterHub');
+  @ViewChild('diagrams') diagrams?: Diagrams
+
+  onChangeTimeInterval(timeResolution: TimeResolution) {
+    if(this.diagrams) {
+      this.diagrams.updateTimeResolution(timeResolution);
+    }
+  }
 }

src/app/components/diagrams/diagrams.ts

@@ -47,12 +47,28 @@ export class Diagrams {
     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() {
     const stationIds = this.activeStations.map(s => s.id);
     const now = new Date().toISOString();
 
     this.api.getMeasurementsMeasurementsGet(
-      stationIds, undefined, this.timeIntervalStart, now, this.resolution
+      stationIds, undefined, this.timeIntervalStart, now, this.measurementResolution
     ).subscribe(data => {
       this.measurements = data;
       this.buildCharts();