🤡 mock get_zones request

src/app/calculator/calculator.component.html

@@ -21,7 +21,7 @@
       </div>
       <div>
         <button type="button" class="btn btn-primary btn-lg" (click)="getZones()"
-          [disabled]="noDates()">GET ZONES</button>
+          [disabled]="noDateSelected()">GET ZONES</button>
       </div>
     </div>
   </div>

src/app/calculator/calculator.component.ts

@@ -42,11 +42,15 @@ export class CalculatorComponent implements HsPanelComponent, OnInit {
     return this.calcService.noDates();
   }
 
+  noDateSelected(): boolean {
+    return this.data.selectedDate === undefined;
+  }
+
   getDates() {
     this.calcService.getDates({product: this.data.selectedProduct});
   }
 
   getZones() {
-    this.calcService.getZones({product: null});
+    this.calcService.getZones({product: this.data.selectedProduct, date: this.data.selectedDate});
   }
 }

src/app/calculator/calculator.service.ts

@@ -1,8 +1,11 @@
-import {Injectable} from '@angular/core';
+import {catchError} from 'rxjs/operators';
 import {HttpClient} from '@angular/common/http';
+import {Injectable} from '@angular/core';
 
 import {HsConfig} from 'hslayers-ng';
 
+import {ZonesService} from './zones.service';
+
 @Injectable({providedIn: 'root'})
 export class CalculatorService {
   availableDates: Array<string>;
@@ -11,10 +14,13 @@ export class CalculatorService {
   serviceBaseUrl = 'https://fieldcalc.lesprojekt.cz/';
   //TODO: temporary hard-coded hack
   centroid = {type: 'Point', coordinates: [16.944, 49.228]};
+  //TODO: temporarry hard-coded hack
+  field = {type: 'Polygon', coordinates: [[[17.01403296191603, 49.24858329768389], [17.014029303734432, 49.24849340104692], [17.01389198448605, 49.2484957958039], [17.013754665219444, 49.24849819039773], [17.013751007554088, 49.248408293744056], [17.013613688518262, 49.24841068816722], [17.013476369464207, 49.24841308242727], [17.013469055184203, 49.248233289084894], [17.01333173660994, 49.24823568316671], [17.01319441801745, 49.24823807708539], [17.013183448228144, 49.24796838701452], [17.013320766073623, 49.24796599311847], [17.01331710926463, 49.247876096432506], [17.013729061944726, 49.24786891378824], [17.01373271950072, 49.24795881045155], [17.0138700372733, 49.24795641590298], [17.013873695096525, 49.24804631255717], [17.014285649051903, 49.24803912791008], [17.014281990481678, 49.247949231278554], [17.014419308181342, 49.247946836077475], [17.014422967000566, 49.24803673270145], [17.015246874309636, 49.24802235802403], [17.015384192130647, 49.24801996167353], [17.01540249521542, 49.24846944450495], [17.01526517614939, 49.248471840893245], [17.01526151574496, 49.24838194432262], [17.015124196909692, 49.24838434054022], [17.015127857065117, 49.248474237118394], [17.01457858054565, 49.248483820387705], [17.014582239723282, 49.248573716994485], [17.01403296191603, 49.24858329768389]]]};
 
   constructor(
     private hsConfig: HsConfig,
-    private httpClient: HttpClient
+    private httpClient: HttpClient,
+    private zonesService: ZonesService,
     ) {
     //TODO: temporary hard-coded hack
     this.selectedField = this.centroid;
@@ -28,27 +34,52 @@ export class CalculatorService {
     return this.availableDates === undefined;
   }
 
-  getDates({product}: {product: Index}) {
-    this.httpClient
-      .get(
-        (this.proxyEnabled() ? this.hsConfig.proxyPrefix : '') +
-        this.serviceBaseUrl +
-        'get_dates?' +
-        'product=' +
-        product +
-        '&centroid=' +
-        JSON.stringify(this.centroid))
-      .subscribe((data: {dates: Array<string>}) => {
-        console.log('data received!')
-        console.log(data)
-        this.availableDates = data.dates ?? [];
-      }, (err) => {
-        console.error('Somethin fucked up!')
-        console.log(err)
-      })
+  async getDates({product}: {product: Index}) {
+    try {
+      const data = await this.httpClient
+        .get<{dates: string[]}>(
+          (this.proxyEnabled() ? this.hsConfig.proxyPrefix : '') +
+          this.serviceBaseUrl +
+          'get_dates?' +
+          'product=' +
+          product +
+          '&centroid=' +
+          JSON.stringify(this.centroid)
+        ).toPromise();
+      console.log('data received!');
+      console.log(data);
+      this.availableDates = data.dates;
+      //TODO: temporary hard-coded hack
+      this.selectedField = this.field;
+    } catch(err) {
+      console.error('Somethin fucked up!');
+      console.log(err);
+    }
+  }
+  
+  async getZones({product, date}: {product: Index, date: string}) {
+    try {
+      const data = await this.httpClient
+        .post(
+          (this.proxyEnabled() ? this.hsConfig.proxyPrefix : '') +
+          this.serviceBaseUrl +
+          'get_zones', {
+            product,
+            date,
+            format: 'geojson',
+            geometry: this.selectedField
+          }, {
+            headers: {'Content-Type': 'application/json', 'Accept': 'application/json'}
+          }
+          ).toPromise();
+      console.log('data received!');
+      console.log(data);
+      this.zonesService.updateZones(data);
+    } catch(err) {
+      console.error('Somethin fucked up!');
+      console.log(err);
+    }
   }
-
-  getZones({product}: {product: Index}) {}
 
   private proxyEnabled(): boolean {
     return this.hsConfig.useProxy === undefined || this.hsConfig.useProxy;

src/app/calculator/zones.service.ts

@@ -0,0 +1,45 @@
+import {Injectable} from '@angular/core';
+import {Vector as VectorLayer} from 'ol/layer';
+import {Vector as VectorSource} from 'ol/source';
+import {Geometry} from 'ol/geom';
+import {GeoJSON} from 'ol/format';
+import {Fill, Stroke, Style} from 'ol/style';
+
+import {HsAddDataService} from 'hslayers-ng';
+
+@Injectable({providedIn: 'root'})
+export class ZonesService {
+  zonesLayer: VectorLayer<VectorSource<Geometry>>;
+  zonesSource: VectorSource<Geometry>;
+  zonesStyle: (feature) => Style;
+  quantileColors = ['#0000ff', '#0033cc', '#006666', '#00cc33', '#00ff00'];
+
+  constructor(
+    private hsAddDataService: HsAddDataService
+  ) {
+    this.zonesStyle = (feature) => new Style({
+      fill: new Fill({
+        color: this.quantileColors[feature.get('quantile')]
+      }),
+      stroke: new Stroke()
+    })
+  }
+
+  updateZones(zones) {
+    if (!this.zonesLayer) {
+      this.zonesSource = new VectorSource();
+      this.zonesLayer = new VectorLayer({
+        properties: {
+          title: 'Zones'
+        },
+        style: this.zonesStyle,
+        source: this.zonesSource
+      });
+      this.hsAddDataService.addLayer(this.zonesLayer);
+    }
+    this.zonesSource.clear();
+    this.zonesSource.addFeatures(new GeoJSON().readFeatures(zones, {
+      dataProjection: 'EPSG:4326', featureProjection: 'EPSG:5514'
+    }));
+  }
+}