✨ add forecast

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

@@ -2,5 +2,15 @@
   <hs-panel-header name="forecast" [title]="'Irrigation forecast'">
   </hs-panel-header>
   <div class="card-body">
+    <table *ngIf="forecastLoaded; else loading">
+      <tr *ngFor="let day of data.forecast">
+        <td>{{day}}</td>
+      </tr>
+    </table>
+    <ng-template #loading>
+      <div class="spinner-border spinner mx-2" role="status" aria-hidden="true">
+      </div>
+      <div class="text-info">Loading forecast, please wait a second ...</div>
+    </ng-template>
   </div>
 </div>

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

@@ -0,0 +1,15 @@
+@import "bootstrap/scss/functions";
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/spinners";
+
+.spinner {
+    width: 3rem;
+    height: 3rem;
+    color: #77bbff;
+}
+
+.spinner-sm {
+    width: 1rem;
+    height: 1rem;
+}

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

@@ -1,4 +1,5 @@
-import {Component, ViewRef} from '@angular/core';
+// eslint-disable-next-line import/named
+import {Component, OnInit, ViewRef} from '@angular/core';
 
 import {
   HsLanguageService,
@@ -7,25 +8,57 @@ import {
   HsPanelComponent,
 } from 'hslayers-ng';
 
-import {IrrigationService} from './irrigation.service';
+import {IrrigationForecastService} from './irrigation-forecast.service';
+
+export type ForecastModel = {
+  0: number;
+  1: number;
+  2: number;
+  3: number;
+  4: number;
+  5: number;
+  6: number;
+  7: number;
+};
+
+export type ForecastFlatModel = number[];
 
 @Component({
   selector: 'irrigation-forecast-panel',
   templateUrl: './irrigation-forecast-panel.component.html',
-  styleUrls: ['../app.component.scss'],
+  styleUrls: ['./irrigation-forecast-panel.component.scss'],
 })
-export class IrrigationForecastPanelComponent implements HsPanelComponent {
-  data;
+export class IrrigationForecastPanelComponent
+  implements HsPanelComponent, OnInit
+{
+  forecastLoaded = false;
+  data: {
+    forecast: ForecastFlatModel;
+  };
   name: 'forecast';
   viewRef: ViewRef;
 
   constructor(
-    public irrigationService: IrrigationService,
+    public irrigationForecastService: IrrigationForecastService,
     public hsLanguageService: HsLanguageService,
-    public hsLayoutService: HsLayoutService
+    private hsLayoutService: HsLayoutService
   ) {}
 
+  ngOnInit(): void {
+    this.getForecast();
+  }
+
   isVisible(): boolean {
     return this.hsLayoutService.panelVisible('forecast');
   }
+
+  getForecast() {
+    this.irrigationForecastService
+      .getForecast()
+      .subscribe((data: ForecastModel) => {
+        console.log('forecast', data);
+        this.data.forecast = Object.values(data);
+        this.forecastLoaded = true;
+      });
+  }
 }

src/app/irrigation/irrigation-forecast.service.ts

@@ -0,0 +1,11 @@
+import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
+
+@Injectable({providedIn: 'root'})
+export class IrrigationForecastService {
+  constructor(private httpClient: HttpClient) {}
+
+  getForecast() {
+    return this.httpClient.get('https://www.gis.atapex.sk/agrihub_forecast/');
+  }
+}

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

@@ -1,6 +1,6 @@
 // eslint-disable-next-line import/named
 import {Component, OnInit} from '@angular/core';
-import {IrrigationService} from './irrigation.service';
+import {IrrigationInfoService} from './irrigation-info.service';
 
 @Component({
   selector: 'irrigation-info',
@@ -16,11 +16,11 @@ export class IrrigationInfoComponent implements OnInit {
     volume: number;
   };
 
-  constructor(private irrigationService: IrrigationService) {}
+  constructor(private irrigationService: IrrigationInfoService) {}
 
   ngOnInit() {
     this.irrigationService.getValues().subscribe((data: any) => {
-      console.log(data);
+      console.log('info', data);
       const reservoirProps = data.features[0]?.properties;
       this.currentReservoirData = {
         area: reservoirProps.area,

src/app/irrigation/irrigation.service.ts → src/app/irrigation/irrigation-info.service.ts

@@ -2,7 +2,7 @@ import {HttpClient} from '@angular/common/http';
 import {Injectable} from '@angular/core';
 
 @Injectable({providedIn: 'root'})
-export class IrrigationService {
+export class IrrigationInfoService {
   constructor(private httpClient: HttpClient) {}
 
   getValues() {

src/app/irrigation/reservoir-history-panel.component.ts

@@ -7,7 +7,7 @@ import {
   HsPanelComponent,
 } from 'hslayers-ng';
 
-import {IrrigationService} from './irrigation.service';
+import {IrrigationInfoService} from './irrigation-info.service';
 
 @Component({
   selector: 'reservoir-history-panel',
@@ -20,7 +20,7 @@ export class ReservoirHistoryPanelComponent implements HsPanelComponent {
   viewRef: ViewRef;
 
   constructor(
-    public irrigationService: IrrigationService,
+    public irrigationService: IrrigationInfoService,
     public hsLanguageService: HsLanguageService,
     public hsLayoutService: HsLayoutService
   ) {}