💄 show date to which forecast is relevant

src/app/irrigation/irrigation-forecast-panel.component.html

@@ -3,8 +3,8 @@
   </hs-panel-header>
   <div class="card-body">
     <table *ngIf="forecastLoaded; else loading">
-      <tr *ngFor="let day of data.forecast">
-        <td>{{day}}</td>
+      <tr *ngFor="let day of data.forecast; let i = index">
+        <td>{{data.days[i] | date:'EEEE, MMMM d'}}</td><td>{{day | number:'1.0-0'}}&nbsp;m<sup>3</sup></td>
       </tr>
     </table>
     <ng-template #loading>

src/app/irrigation/irrigation-forecast-panel.component.ts

@@ -33,6 +33,7 @@ export class IrrigationForecastPanelComponent
 {
   forecastLoaded = false;
   data: {
+    days;
     forecast: ForecastFlatModel;
   };
   name: 'forecast';
@@ -58,7 +59,18 @@ export class IrrigationForecastPanelComponent
       .subscribe((data: ForecastModel) => {
         console.log('forecast', data);
         this.data.forecast = Object.values(data);
+        this.data.days = this.generateDays();
         this.forecastLoaded = true;
       });
   }
+
+  generateDays() {
+    const now = new Date();
+    const days = [];
+    for (let i = 0; i <= 7; i++) {
+      days.push(now.toISOString());
+      now.setTime(now.getTime() + 24 * 60 * 60 * 1000);
+    }
+    return days;
+  }
 }

src/app/irrigation/irrigation-info.component.html

@@ -1,9 +1,9 @@
 <div class="p-2" *ngIf="dataLoaded; else loading">
-  <h1>{{currentReservoirData.volume | number:'1.0-0'}}&emsp;m3</h1>
+  <h1>{{currentReservoirData.volume | number:'1.0-0'}}&emsp;m<sup>3</sup></h1>
   <p class="text-secondary">volume of water in the reservoir</p>
   <h2>{{currentReservoirData.elevation | number:'1.3-3'}}&nbsp;m MSL</h2>
   <p class="text-secondary">water-level</p>
-  <h2>{{currentReservoirData.area | number:'1.2-2'}}&nbsp;m2</h2>
+  <h2>{{currentReservoirData.area | number:'1.2-2'}}&nbsp;m<sup>2</sup></h2>
   <p class="text-secondary">water surface</p>
   <strong>{{currentReservoirData.timestamp | date:'medium'}}</strong>
   <p class="text-secondary">latest data</p>