✨ allow select multiple fields

.vscode/settings.json

@@ -18,5 +18,10 @@
     "titleBar.inactiveBackground": "#b7bb9c99",
     "titleBar.inactiveForeground": "#15202b99"
   },
-  "peacock.color": "#b7bb9c"
+  "peacock.color": "#b7bb9c",
+  "cSpell.words": [
+    "LPIS",
+    "quantile",
+    "quantiles"
+  ]
 }

src/app/calculator/calculator.component.html

@@ -4,9 +4,17 @@
     <div class="p-2 center-block">
       <!-- FIELD & INDEX SELECTION PART -->
       <div *ngIf="!noFieldSelected(); else noField">
-        <p>
-          {{ 'CALCULATOR.selectedField' | translate}} {{data.selectedFieldProperties?.['id_dpb'] ?? '?'}}
+        <p *ngIf="data.selectedFieldsProperties.length === 1; else moreFields">
+          {{ 'CALCULATOR.selectedField' | translate}} {{data.selectedFieldsProperties[0]?.['id_dpb'] ?? '?'}}
         </p>
+        <ng-template #moreFields>
+          <p>
+            {{ 'CALCULATOR.selectedFields' | translate}}
+            <span *ngFor="let props of data.selectedFieldsProperties; last as isLast">
+              {{props?.['id_dpb'] ?? '?'}}<ng-container *ngIf="!isLast">,</ng-container>
+            </span>
+          </p>
+        </ng-template>
       </div>
       <ng-template #noField>
         <div>
@@ -14,6 +22,9 @@
         </div>
       </ng-template>
       <div>
+        <p class="p-1 text-info">{{ 'CALCULATOR.selectMore' | translate}}</p>
+      </div>
+      <div>
         {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectQuantiles', {quantileCount: calcService.quantileCount})}}:&emsp;
         <input type="range" min="2" max="10" step="1" [(ngModel)]="calcService.quantileCount">
       </div>

src/app/calculator/calculator.component.ts

@@ -18,7 +18,7 @@ import {FieldService} from './field.service';
 export class CalculatorComponent implements HsPanelComponent {
   data: {
     selectedProduct: Index;
-    selectedFieldProperties: {[x: string]: any};
+    selectedFieldsProperties: {[x: string]: any}[];
   };
   name: 'calculator';
   viewRef: ViewRef;
@@ -29,8 +29,11 @@ export class CalculatorComponent implements HsPanelComponent {
     public hsLanguageService: HsLanguageService,
     public hsLayoutService: HsLayoutService
   ) {
-    this.fieldService.fieldSelects.subscribe(({feature}) => {
-      this.data.selectedFieldProperties = feature.getProperties();
+    this.fieldService.fieldSelects.subscribe(({features}) => {
+      this.data.selectedFieldsProperties = [];
+      for (const feature of features) {
+        this.data.selectedFieldsProperties.push(feature.getProperties());
+      }
     });
   }
 
@@ -59,7 +62,6 @@ export class CalculatorComponent implements HsPanelComponent {
   }
 
   getZones() {
-    console.log(this.fieldService.selectedField);
     this.calcService.getZones({
       product: this.data.selectedProduct,
     });

src/app/calculator/calculator.service.ts

@@ -36,7 +36,7 @@ export class CalculatorService {
     /**
      * When new field is selected, clean all other params
      */
-    this.fieldService.fieldSelects.subscribe(({feature}) => {
+    this.fieldService.fieldSelects.subscribe(() => {
       this.availableDates = undefined;
       this.selectedDate = undefined;
     });

src/app/calculator/field.service.ts

@@ -11,27 +11,31 @@ import {HsEventBusService, HsMapService} from 'hslayers-ng';
 @Injectable({providedIn: 'root'})
 export class FieldService {
   SELECTABLE_LAYERS = ['LPIS (WFS)'] as const;
-  fieldSelects: Subject<{feature: Feature<Geometry>}> = new Subject();
-  selectedField;
+  fieldSelects: Subject<{features: Feature<Geometry>[]}> = new Subject();
+  selectedFields;
 
   constructor(
     private hsEventBus: HsEventBusService,
     private hsMapService: HsMapService
   ) {
     this.hsEventBus.vectorQueryFeatureSelection.subscribe((data) => {
-      if (
-        !this.isValidGeometry(data.feature) ||
-        !this.isValidLayer(data.feature)
-      ) {
+      const features = data.selector
+        .getFeatures()
+        .getArray()
+        .filter((feature) => this.isValidGeometry(feature))
+        .filter((feature) => this.isValidLayer(feature));
+      if (features.length === 0) {
         return;
       }
-      this.selectedField = data.feature.getGeometry() as Polygon;
-      this.fieldSelects.next({feature: data.feature});
+      this.selectedFields = features.map(
+        (feature) => feature.getGeometry() as Polygon
+      );
+      this.fieldSelects.next({features: features});
     });
   }
 
   noFieldSelected(): boolean {
-    return this.selectedField === undefined;
+    return this.selectedFields === undefined;
   }
 
   getCentroidOfField(field: Geometry) {
@@ -46,26 +50,16 @@ export class FieldService {
   }
 
   getSelectedFieldCentroid() {
-    return this.getCentroidOfField(this.selectedField);
+    return this.getCentroidOfField(this.selectedFields[0]);
   }
 
   getSelectedFieldGeoJSON() {
     return {
       type: 'FeatureCollection',
       name: 'Selected field',
-      features: [
-        {
-          type: 'Feature',
-          properties: {},
-          geometry: {
-            type: 'Polygon',
-            coordinates: this.selectedField
-              .clone()
-              .transform('EPSG:5514', 'EPSG:4326')
-              .getCoordinates(),
-          },
-        },
-      ],
+      features: this.selectedFields.map((feature) =>
+        this.getGeoJSONFromFeature(feature)
+      ),
     };
   }
 
@@ -87,4 +81,18 @@ export class FieldService {
     const layer = this.hsMapService.getLayerForFeature(feature);
     return this.SELECTABLE_LAYERS.includes(layer.get('title'));
   }
+
+  private getGeoJSONFromFeature(feature) {
+    return {
+      type: 'Feature',
+      properties: {},
+      geometry: {
+        type: 'Polygon',
+        coordinates: feature
+          .clone()
+          .transform('EPSG:5514', 'EPSG:4326')
+          .getCoordinates(),
+      },
+    };
+  }
 }

src/app/translations.json

@@ -8,7 +8,9 @@
       "selectBlur": "Chci vyhlazení",
       "selectDate": "Chci datum",
       "selectField": "Pole vyberte kliknutím do mapy. Pro výběr pole je potřeba mapu přiblížit.",
+      "selectMore": "Více polí můžete vybrat podržením klávesy SHIFT",
       "selectedField": "Vybráno pole",
+      "selectedFields": "Vybrána pole",
       "selectIndex": "Chci vypočítat index",
       "selectQuantiles": "Chci {{quantileCount}} kvantilů"
     }
@@ -22,7 +24,9 @@
       "selectBlur": "I want to blur by",
       "selectDate": "I want a date",
       "selectField": "Select a field by clicking in the map. In order to select the field, you must zoom the map in.",
+      "selectMore": "You can select more fields by pressing the SHIFT key",
       "selectedField": "Selected field",
+      "selectedFields": "Selected fields",
       "selectIndex": "I want to calculate index",
       "selectQuantiles": "I want {{quantileCount}} quantiles"
     }