🐛 change the way symbology is assigned to zones so symbolizer loads it

src/app/calculator/calculator.component.html

@@ -68,21 +68,31 @@
         </select>
         <!-- TODO: date-picker instead of select -->
 
-        <ngb-datepicker #dp [(ngModel)]="calcService.selectedDateCalendar"></ngb-datepicker>
-        <button class="btn btn-sm btn-outline-primary me-2" (click)="calcService.selectToday()">Select Today</button>
+        <ngb-datepicker #dp [(ngModel)]="calcService.selectedDateCalendar" (ngModelChange)="updateSelectedDate($event)" [dayTemplate]="customDay"></ngb-datepicker>
+        <ng-template #customDay let-date="date" let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled" let-focused="focused">
+          <span class="custom-day lol"
+                [class.focused]="focused"
+                [class.bg-primary]="selected"
+                [class.hidden]="date.month !== currentMonth"
+                [class.text-muted]="disabled"
+                [class.has-task]="hasTask(date)">
+            {{ date.day }}
+          </span>
+        </ng-template>
+        <!--<button class="btn btn-sm btn-outline-primary me-2" (click)="calcService.selectToday()">Select Today</button>-->
 
         <fc-date-range-slider [values]="calcService.availableDates"></fc-date-range-slider>
       </div>
       <div class="d-flex" *ngIf="!noDates()">
-        <button type="button" class="btn btn-primary btn-lg" (click)="getZones()" [disabled]="noDateSelected()">
+        <button type="button" class="btn btn-primary form-control" (click)="getZones()" [disabled]="noDateSelected()">
           {{
           'CALCULATOR.getZones' | translate
           }}
+          <!-- LOADER -->
+          <div class="spinner-border spinner-sm mx-2" role="status" *ngIf="calcService.zonesLoading" aria-hidden="true">
+            <span class="visually-hidden">{{ 'CALCULATOR.loading' | translate }}...</span>
+          </div>
         </button>
-        <!-- LOADER -->
-        <div class="spinner-border spinner mx-2" role="status" *ngIf="calcService.zonesLoading" aria-hidden="true">
-          <span class="visually-hidden">{{ 'CALCULATOR.loading' | translate }}...</span>
-        </div>
       </div>
     </div>
   </div>

src/app/calculator/calculator.component.scss

@@ -13,3 +13,15 @@
     width: 1rem;
     height: 1rem;
 }
+
+.custom-day {
+  color: #F0F0F0;
+  pointer-events: none;
+}
+
+.has-task {
+  background-color: aquamarine;
+  padding: 7px;
+  border-radius: 15px;
+  color: #000000;
+}

src/app/calculator/calculator.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit, ViewRef} from '@angular/core';
+import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
 
 import {
   HsLanguageService,
@@ -90,4 +91,16 @@ export class CalculatorComponent implements HsPanelComponent, OnInit {
   updateRangeSlider(value: string) {
     this.calcService.dateCalendarSelects.next({date: value});
   }
+
+  updateSelectedDate(value: NgbDateStruct) {
+    this.calcService.selectedDate = value.year + '-' + value.month + '-' + value.day;
+  }
+
+  isWeekend(date: NgbDateStruct) {
+    return date.day > 5;
+  }
+
+  hasTask(date: NgbDateStruct) {
+    return date.year == 2022 && date.month == 6 && date.day == 16;
+  }
 }

src/app/calculator/calculator.service.ts

@@ -156,7 +156,7 @@ export class CalculatorService {
         .toPromise();
       console.log('data received!', data);
       this._zonesLoading = false;
-      this.zonesService.updateZones(data, {quantileCount: this.quantileCount});
+      await this.zonesService.updateZones(data, {quantileCount: this.quantileCount});
       this.updateImageBackground(this.selectedDate);
     } catch (err) {
       this._zonesLoading = false;

src/app/calculator/zones.service.ts

@@ -4,8 +4,10 @@ import {Geometry} from 'ol/geom';
 import {Injectable} from '@angular/core';
 import {Vector as VectorLayer} from 'ol/layer';
 import {Vector as VectorSource} from 'ol/source';
+import SLDParser from 'geostyler-sld-parser';
+import { StyleFunction } from 'ol/style/Style';
 
-import {HsAddDataService} from 'hslayers-ng';
+import { HsAddDataService, HsLayerManagerService, HsStylerService, HsLayerExt } from 'hslayers-ng';
 
 @Injectable({providedIn: 'root'})
 export class ZonesService {
@@ -93,8 +95,13 @@ export class ZonesService {
     this.QUANTILE_COLORS_9,
     this.QUANTILE_COLORS_10,
   ] as const;
+  sldParser: SLDParser;
+
+  constructor(
+    private hsLayerManagerService: HsLayerManagerService,
+    private hsAddDataService: HsAddDataService,
+    private hsStylerService: HsStylerService) {
 
-  constructor(private hsAddDataService: HsAddDataService) {
     this.zonesStyle = (feature) =>
       new Style({
         fill: new Fill({
@@ -102,33 +109,72 @@ export class ZonesService {
         }),
         stroke: new Stroke(),
       });
+
+    this.sldParser = new SLDParser();
   }
 
-  updateZones(zones, {quantileCount}): void {
-    if (!this.zonesLayer) {
-      this.zonesSource = new VectorSource();
-      this.zonesLayer = new VectorLayer({
-        properties: {
-          title: 'Zones',
-          path: 'Results',
-          popUp: {
-            attributes: ['quantile'],
-          },
-        },
-        style: this.zonesStyle,
-        source: this.zonesSource,
-      });
-      this.hsAddDataService.addLayer(this.zonesLayer);
+  async updateZones(zones, {quantileCount}): Promise<void> {
+    if (this.zonesLayer) {
+      this.hsLayerManagerService.map.removeLayer(this.zonesLayer);
     }
+
+    this.zonesSource = new VectorSource();
+    this.zonesLayer = new VectorLayer({
+      properties: {
+        title: 'Zones',
+        path: 'Results',
+        popUp: {
+          attributes: ['quantile'],
+        },
+      },
+      //style: this.zonesStyle,
+      source: this.zonesSource,
+    });
+    this.hsAddDataService.addLayer(this.zonesLayer);
+    
     this.zonesSource.clear();
     this.updateZonesStyle(quantileCount);
-    this.zonesLayer.setStyle(this.zonesStyle);
+
+    let zonesStyleObj = { name: 'Zones', rules: [] };
+    zonesStyleObj.rules = this.getSymbolizerRules(quantileCount);
+    const { output: sld } = await this.sldParser.writeStyle(zonesStyleObj);
+
+    this.zonesLayer.set("sld", sld);
+    //let style: Style | Style[] | StyleFunction = await this.hsStylerService.geoStylerStyleToOlStyle(zonesStyleObj);
+    //this.zonesLayer.setStyle(style);
     this.zonesSource.addFeatures(
       new GeoJSON().readFeatures(zones, {
         dataProjection: 'EPSG:4326',
         featureProjection: 'EPSG:5514',
       })
     );
+    this.hsStylerService.save();
+    this.updateZonesStyle(quantileCount);
+  }
+
+  private getSymbolizerRules(classes: number): Array<any> {
+    const colorRamp = this.QUANTILE_COLORS_MATRIX[classes - 2];
+    let rules = [];
+
+    for (let i = 0; i < colorRamp.length; i++) {
+      let ruleIdx = (i + 1).toString();
+
+      rules[i] = {
+        name: ruleIdx,
+        filter: ["==", "quantile", ruleIdx],
+        symbolizers: [
+          {
+            kind: "Fill",
+            color: colorRamp[i],
+            opacity: 0.5,
+            outlineColor: "#505050",
+            outlineWidth: 1
+          }
+        ]
+      };
+    }
+
+    return rules;
   }
 
   private updateZonesStyle(classes: number) {