✨ add live data about the reservoir

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

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

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

@@ -8,9 +8,27 @@ import {IrrigationService} from './irrigation.service';
   styleUrls: ['../app.component.scss'],
 })
 export class IrrigationInfoComponent implements OnInit {
+  dataLoaded = false;
+  currentReservoirData: {
+    area: number;
+    timestamp: string;
+    elevation: number;
+    volume: number;
+  };
+
   constructor(private irrigationService: IrrigationService) {}
 
   ngOnInit() {
-    this.irrigationService.getValues();
+    this.irrigationService.getValues().subscribe((data: any) => {
+      console.log(data);
+      const reservoirProps = data.features[0]?.properties;
+      this.currentReservoirData = {
+        area: reservoirProps.area,
+        timestamp: reservoirProps.datetime,
+        elevation: reservoirProps.elevation,
+        volume: reservoirProps.volume,
+      };
+      this.dataLoaded = true;
+    });
   }
 }

src/app/irrigation/irrigation.module.ts

@@ -1,9 +1,10 @@
+import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 
 import {IrrigationInfoComponent} from './irrigation-info.component';
 
 @NgModule({
-  imports: [],
+  imports: [CommonModule],
   exports: [IrrigationInfoComponent],
   declarations: [IrrigationInfoComponent],
   providers: [],

src/app/irrigation/irrigation.service.ts

@@ -13,7 +13,7 @@ export class IrrigationService {
       'FORMAT': 'image/png',
       'QUERY_LAYERS': 'water_surface_latest',
       'LAYERS': 'water_surface_latest',
-      'INFO_FORMAT': 'text/plain',
+      'INFO_FORMAT': 'application/json',
       'I': 100,
       'J': 129,
       'WIDTH': 256,
@@ -23,13 +23,11 @@ export class IrrigationService {
       'BBOX':
         '2037505.4259696566,6130861.164697416,2038728.4184222193,6132084.157149979',
     };
-    this.httpClient
-      .get('https://www.gis.atapex.sk/geoserver/agrihub/wms', {
+    return this.httpClient.get(
+      'https://www.gis.atapex.sk/geoserver/agrihub/wms',
+      {
         params,
-        responseType: 'text',
-      })
-      .subscribe((data) => {
-        console.log(data);
-      });
+      }
+    );
   }
 }