⬆️ upgrade HSL to v9.2

.gitignore

@@ -2,3 +2,4 @@ node_modules
 build
 dist
 .vs
+.angular

package.json

@@ -27,22 +27,24 @@
   },
   "homepage": "https://git.lesprojekt.cz/jmacura/fieldcalc-frontend/README.md",
   "dependencies": {
-    "hslayers-ng": "^7.1.0"
+    "hslayers-ng": "9.2.0"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^12.1.3",
-    "@angular-devkit/build-angular": "^12.2.13",
-    "@angular-eslint/builder": "^13.0.1",
-    "@angular-eslint/eslint-plugin": "^13.0.1",
-    "@angular-eslint/eslint-plugin-template": "^13.0.1",
-    "@angular-eslint/template-parser": "^13.0.1",
-    "@angular/cli": "^12.2.13",
+    "@angular-builders/custom-webpack": "^13.0.0",
+    "@angular-devkit/build-angular": "^13.3.3",
+    "@angular-eslint/builder": "^13.2.1",
+    "@angular-eslint/eslint-plugin": "^13.2.1",
+    "@angular-eslint/eslint-plugin-template": "^13.5.0",
+    "@angular-eslint/schematics": "^13.2.1",
+    "@angular-eslint/template-parser": "^13.5.0",
+    "@angular/cli": "~13.3.5",
+    "@angular/compiler-cli": "~13.3.7",
     "@types/karma-jasmine": "^4.0.2",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
-    "eslint": "^8.4.1",
+    "eslint": "^8.17.0",
     "eslint-config-openlayers": "14.0.0",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-tsdoc": "^0.2.14",
-    "karma-jasmine": "^4.0.1"
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-tsdoc": "^0.2.16",
+    "karma-jasmine": "~5.0.1"
   }
 }

src/app/app.component.scss

@@ -0,0 +1,4 @@
+hslayers {
+  display: block;
+  height: calc(var(--vh, 1vh) * 100);
+}

src/app/app.component.ts

@@ -33,7 +33,7 @@ export class AppComponent {
     private hsToastService: HsToastService
   ) {
     /* Create new button in the sidebar */
-    this.hsSidebarService.buttons.push({
+    this.hsSidebarService.addButton({
       panel: 'calculator',
       module: 'calculator',
       order: 0,

src/app/app.service.ts

@@ -19,7 +19,7 @@ import {
   HsSidebarService,
 } from 'hslayers-ng';
 
-import i18n from './translations.json';
+import {translationOverrides} from "./translations";
 import {CalculatorService} from './calculator/calculator.service';
 import {imageWmsTLayer} from './calculator/image-wms-t-layer';
 
@@ -96,7 +96,7 @@ export class AppService {
           '&COUNT=100' +
           '&outputformat=geojson' +
           '&SRSNAME=EPSG:5514' +
-          `&BBOX=${extent.join(',')}` +
+          `&BBOX=${extent ? extent.join(',') : ''}` +
           `&<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:PropertyIsEqualTo><ogc:PropertyName>kultura</ogc:PropertyName><ogc:Literal>${kulturaKod}</ogc:Literal></ogc:PropertyIsEqualTo></ogc:Filter>`
         );
         //%3Cgml:Box%3E%3Cgml:coordinates%3E${
@@ -239,7 +239,8 @@ export class AppService {
           }),
         }),
       ],
-      translationOverrides: i18n,
-    });
+      translationOverrides
+    }, 'default');
+    this.hsLanguageService.setLanguage("en", null);
   }
 }

src/app/calculator/calculator.component.html

@@ -1,10 +1,10 @@
 <div [hidden]="!isVisible()" class="card hs-main-panel">
-  <hs-panel-header name="adjuster" [title]="'CALCULATOR.panelHeader' | translate">
+  <hs-panel-header name="adjuster" [title]="hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'panelHeader')">
     <extra-buttons>
       <!-- LOADER -->
       <div class="spinner-border spinner spinner-sm mx-2" role="status"
-        title="{{ 'CALCULATOR.loading' | translate }}..." *ngIf="calcService.lpisLoading">
-        <span class="visually-hidden">{{ 'CALCULATOR.loading' | translate }}...</span>
+        title="hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'loading')" *ngIf="calcService.lpisLoading">
+        <span class="visually-hidden">{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'loading')}}...</span>
       </div>
     </extra-buttons>
   </hs-panel-header>
@@ -13,11 +13,11 @@
       <!-- FIELD & INDEX SELECTION PART -->
       <div *ngIf="!noFieldSelected(); else noField">
         <p *ngIf="data.selectedFieldsProperties.length === 1; else moreFields">
-          {{ 'CALCULATOR.selectedField' | translate}} {{data.selectedFieldsProperties[0]?.['id_dpb'] ?? '?'}}
+          {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectedField')}} {{data.selectedFieldsProperties[0]?.['id_dpb'] ?? '?'}}
         </p>
         <ng-template #moreFields>
           <p>
-            {{ 'CALCULATOR.selectedFields' | translate}}
+            {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectedFields')}}
             <span *ngFor="let props of data.selectedFieldsProperties; last as isLast">
               {{props?.['id_dpb'] ?? '?'}}<ng-container *ngIf="!isLast">,</ng-container>
             </span>
@@ -26,43 +26,40 @@
       </div>
       <ng-template #noField>
         <div>
-          <p class="p-1 text-info">{{ 'CALCULATOR.selectField' | translate}}</p>
+          <p class="p-1 text-info">{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectField')}}</p>
         </div>
       </ng-template>
-      <p class="p-1 text-warning" *ngIf="!lpisWfsVisible"><i class="icon-warning-sign"></i>&nbsp;{{ 'CALCULATOR.zoomIn' | translate}}</p>
-      <!--<div *ngIf="noFieldSelected()">
-        <p class="p-1 text-info">{{ 'CALCULATOR.selectMore' | translate}}</p>
-      </div>-->
+      <p class="p-1 text-warning" *ngIf="!lpisWfsVisible"><i class="icon-warning-sign"></i>&nbsp;{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'zoomIn')}}</p>
       <div class="form-group">
-        {{ 'CALCULATOR.selectIndex' | translate}}:&emsp;
+        {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectIndex')}}:&emsp;
         <select class="form-select" [(ngModel)]="data.selectedProduct" (ngModelChange)="resetDate()">
-          <option selected disabled [ngValue]="null">{{ 'CALCULATOR.selectIndexHint' | translate}}</option>
+          <option selected disabled [ngValue]="null">{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectIndexHint')}}</option>
           <option *ngFor="let product of calcService.AVAILABLE_PRODUCTS" [ngValue]="product">{{product}}</option>
         </select>
       </div>
       <div class="form-group">
-        <label>{{ 'CALCULATOR.selectQuantiles' | translate }}:&emsp;{{calcService.quantileCount}}</label>
+        <label>{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectQuantiles')}}:&emsp;{{calcService.quantileCount}}</label>
         <input type="range" min="2" max="10" step="1" [(ngModel)]="calcService.quantileCount" class="form-range">
       </div>
       <div class="form-group">
         <label>
-          {{ 'CALCULATOR.selectBlur' | translate}}:&emsp;{{calcService.blurValue}}&nbsp;px <span *ngIf="calcService.blurValue === 0">({{ 'CALCULATOR.blurNone' | translate}})</span>
+          {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectBlur')}}:&emsp;{{calcService.blurValue}}&nbsp;px <span *ngIf="calcService.blurValue === 0">({{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'blurNone')}})</span>
         </label>
         <input type="range" min="{{calcService.BLUR_MIN_VALUE}}" max="{{calcService.BLUR_MAX_VALUE}}" step="1"
                [(ngModel)]="calcService.blurValue" class="form-range">
       </div>
       <div class="form-group d-flex m-auto">
         <button type="button" class="btn btn-secondary form-control" (click)="getDates()" [disabled]="noFieldSelected() || noProductSelected()">
-          {{ 'CALCULATOR.getDates' | translate}}
+          {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'getDates')}}
           <div class="spinner-border spinner-sm mx-2" role="status" *ngIf="calcService.datesLoading" aria-hidden="true">
-            <span class="visually-hidden">{{ 'CALCULATOR.loading' | translate }}...</span>
+            <span class="visually-hidden">{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'loading')}}...</span>
           </div>
         </button>
         <!-- LOADER -->
       </div>
       <!-- DATE SELECTION PART -->
       <div [hidden]="noDates()">
-        {{ 'CALCULATOR.selectDate' | translate}}:&emsp;
+        {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectDate')}}:&emsp;
         <select class="form-select" [(ngModel)]="calcService.selectedDate" (ngModelChange)="updateRangeSlider($event)">
           <option *ngFor="let date of calcService.availableDates" [ngValue]="date">{{date}}</option>
         </select>
@@ -90,7 +87,7 @@
           }}
           <!-- 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>
+            <span class="visually-hidden">{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'loading')}}...</span>
           </div>
         </button>
       </div>

src/app/calculator/calculator.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit, ViewRef} from '@angular/core';
 import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+import { BehaviorSubject } from 'rxjs';
 
 import {
   HsLanguageService,
@@ -24,6 +25,7 @@ export class CalculatorComponent implements HsPanelComponent, OnInit {
   lpisWfsVisible: boolean;
   name: 'calculator';
   viewRef: ViewRef;
+  isVisible$ = new BehaviorSubject<boolean>(true);
 
   constructor(
     public calcService: CalculatorService,

src/app/calculator/calculator.service.ts

@@ -60,7 +60,7 @@ export class CalculatorService {
       this.selectedDate = undefined;
     });
     this.hsEventBus.olMapLoads.subscribe((map) => {
-      map.getView().on('change:resolution', (evt) => {
+      map.map.getView().on('change:resolution', (evt) => {
         this.viewChanges.next(evt.target);
       });
     });
@@ -83,7 +83,7 @@ export class CalculatorService {
     try {
       const data = await this.httpClient
         .get<{dates: string[]}>(
-          (this.proxyEnabled() ? this.hsConfig.proxyPrefix : '') +
+          (this.proxyEnabled() ? this.hsConfig.apps[0].proxyPrefix : '') +
             this.SERVICE_BASE_URL +
             'get_dates?' +
             'product=' +
@@ -135,7 +135,7 @@ export class CalculatorService {
     try {
       const data = await this.httpClient
         .post(
-          (this.proxyEnabled() ? this.hsConfig.proxyPrefix : '') +
+          (this.proxyEnabled() ? this.hsConfig.apps[0].proxyPrefix : '') +
             this.SERVICE_BASE_URL +
             'get_zones',
           {
@@ -189,6 +189,6 @@ export class CalculatorService {
   }
 
   private proxyEnabled(): boolean {
-    return this.hsConfig.useProxy === undefined || this.hsConfig.useProxy;
+    return this.hsConfig.apps[0].useProxy === undefined || this.hsConfig.apps[0].useProxy;
   }
 }

src/app/calculator/field.service.ts

@@ -78,7 +78,7 @@ export class FieldService {
    * Check whether user clicked into one of selectable layers
    */
   isValidLayer(feature) {
-    const layer = this.hsMapService.getLayerForFeature(feature);
+    const layer = this.hsMapService.getLayerForFeature(feature, null);
     return this.SELECTABLE_LAYERS.includes(layer.get('title'));
   }
 

src/app/calculator/zones.service.ts

@@ -115,7 +115,7 @@ export class ZonesService {
 
   async updateZones(zones, {quantileCount}): Promise<void> {
     if (this.zonesLayer) {
-      this.hsLayerManagerService.map.removeLayer(this.zonesLayer);
+      this.hsLayerManagerService.get(null).map.removeLayer(this.zonesLayer);
     }
 
     this.zonesSource = new VectorSource();
@@ -130,7 +130,7 @@ export class ZonesService {
       //style: this.zonesStyle,
       source: this.zonesSource,
     });
-    this.hsAddDataService.addLayer(this.zonesLayer);
+    this.hsAddDataService.addLayer(this.zonesLayer, null);
     
     this.zonesSource.clear();
     this.updateZonesStyle(quantileCount);
@@ -148,7 +148,7 @@ export class ZonesService {
         featureProjection: 'EPSG:5514',
       })
     );
-    this.hsStylerService.save();
+    this.hsStylerService.save(null);
     this.updateZonesStyle(quantileCount);
   }
 

src/app/translations.json

@@ -1,48 +0,0 @@
-{
-  "cs": {
-    "CALCULATOR": {
-      "blurNone": "žádné",
-      "getDates": "VYBRAT DATUM",
-      "getZones": "ZÍSKAT ZÓNY",
-      "errorLoading": "Chyba při načítání dat",
-      "errorLoadingDates": "Nebylo možné načíst seznam možných dat ze serveru. Zkuste to prosím později.",
-      "errorLoadingZones": "Nebylo možné načíst zóny pole ze serveru. Zkuste to prosím později.",
-      "loading": "Načítám",
-      "panelHeader": "Výpočet indexů pole",
-      "selectBlur": "Vyhlazení hran zón",
-      "selectDate": "Chci datum",
-      "selectField": "Vyberte pole kliknutím do mapy. Více polí můžete vybrat podržením klávesy SHIFT.",
-      "selectMore": "Více polí můžete vybrat podržením klávesy SHIFT",
-      "selectedField": "Vybráno pole",
-      "selectedFields": "Vybrána pole",
-      "selectFieldAndIndex": "Nejprve vyberte index a pole v mapě",
-      "selectIndex": "Vypočítat index",
-      "selectIndexHint": "Vyberte z dostupných indexů",
-      "selectQuantiles": "Počet kvantilů",
-      "zoomIn": "Pro výběr pole je potřeba mapu přiblížit."
-    }
-  },
-  "en": {
-    "CALCULATOR": {
-      "blurNone": "none",
-      "getDates": "GET DATES",
-      "getZones": "GET ZONES",
-      "errorLoading": "Error loading data",
-      "errorLoadingDates": "It was not possible to load available dates from the server. Please, try again later.",
-      "errorLoadingZones": "It was not possible to load field zones from the server. Please, try again later.",
-      "loading": "Loading",
-      "panelHeader": "Field calculation",
-      "selectBlur": "Smoothing zone edges",
-      "selectDate": "I want a date",
-      "selectField": "Select a field by clicking in the map. You can select more fields by press and holding the SHIFT key.",
-      "selectMore": "You can select more fields by press and holding the SHIFT key",
-      "selectedField": "Selected field",
-      "selectedFields": "Selected fields",
-      "selectFieldAndIndex": "Select an index and a field in the map to continue",
-      "selectIndex": "Calculate index",
-      "selectIndexHint": "Select one of the available indices",
-      "selectQuantiles": "Quantiles count",
-      "zoomIn": "In order to select the field, you must zoom the map in."
-    }
-  }
-}

src/app/translations.ts

@@ -0,0 +1,48 @@
+export const translationOverrides = {
+  cs: {
+    CALCULATOR: {
+      blurNone: 'žádné',
+      getDates: 'VYBRAT DATUM',
+      getZones: 'ZÍSKAT ZÓNY',
+      errorLoading: 'Chyba při načítání dat',
+      errorLoadingDates: 'Nebylo možné načíst seznam možných dat ze serveru. Zkuste to prosím později.',
+      errorLoadingZones: 'Nebylo možné načíst zóny pole ze serveru. Zkuste to prosím později.',
+      loading: 'Načítám',
+      panelHeader: 'Výpočet indexů pole',
+      selectBlur: 'Vyhlazení hran zón',
+      selectDate: 'Chci datum',
+      selectField: 'Vyberte pole kliknutím do mapy. Více polí můžete vybrat podržením klávesy SHIFT.',
+      selectMore: 'Více polí můžete vybrat podržením klávesy SHIFT',
+      selectedField: 'Vybráno pole',
+      selectedFields: 'Vybrána pole',
+      selectFieldAndIndex: 'Nejprve vyberte index a pole v mapě',
+      selectIndex: 'Vypočítat index',
+      selectIndexHint: 'Vyberte z dostupných indexů',
+      selectQuantiles: 'Počet kvantilů',
+      zoomIn: 'Pro výběr pole je potřeba mapu přiblížit.'
+    }
+  },
+  en: {
+    CALCULATOR: {
+      blurNone: 'none',
+      getDates: 'GET DATES',
+      getZones: 'GET ZONES',
+      errorLoading: 'Error loading data',
+      errorLoadingDates: 'It was not possible to load available dates from the server. Please, try again later.',
+      errorLoadingZones: 'It was not possible to load field zones from the server. Please, try again later.',
+      loading: 'Loading',
+      panelHeader: 'Field calculation',
+      selectBlur: 'Smoothing zone edges',
+      selectDate: 'I want a date',
+      selectField: 'Select a field by clicking in the map. You can select more fields by press and holding the SHIFT key.',
+      selectMore: 'You can select more fields by press and holding the SHIFT key',
+      selectedField: 'Selected field',
+      selectedFields: 'Selected fields',
+      selectFieldAndIndex: 'Select an index and a field in the map to continue',
+      selectIndex: 'Calculate index',
+      selectIndexHint: 'Select one of the available indices',
+      selectQuantiles: 'Quantiles count',
+      zoomIn: 'In order to select the field, you must zoom the map in.'
+    }
+  }
+};