⬆️ upgrade HSL to v9

.gitignore

@@ -28,6 +28,7 @@ build/Release
 # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
 node_modules
 
+.angular
 build
 static
 pidfile

angular.json

@@ -7,7 +7,7 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "sass"
+          "style": "scss"
         }
       },
       "root": "",
@@ -36,9 +36,7 @@
             ],
             "preserveSymlinks": true,
             "styles": [
-              "./node_modules/ol/ol.css",
-              "./node_modules/hslayers-ng/src/css/hslayers-bootstrap.scss",
-              "./node_modules/hslayers-ng/src/css/whhg-font/css/whhg.css"
+              "./node_modules/hslayers-ng/css/hslayers-ng.css"
             ],
             "scripts": [],
             "vendorChunk": true,
@@ -49,6 +47,14 @@
             "namedChunks": true
           },
           "configurations": {
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            },
             "production": {
               "fileReplacements": [
                 {
@@ -77,15 +83,19 @@
               ]
             }
           },
-          "defaultConfiguration": ""
+          "defaultConfiguration": "production"
         },
         "serve": {
+          "defaultConfiguration": "development",
           "builder": "@angular-builders/custom-webpack:dev-server",
           "options": {
             "port": 8080,
             "browserTarget": "attractiveness:build"
           },
           "configurations": {
+            "development": {
+              "browserTarget": "attractiveness:build:development"
+            },
             "production": {
               "browserTarget": "attractiveness:build:production"
             }

package.json

@@ -5,10 +5,11 @@
   "main": "build/index.html",
   "scripts": {
     "build": "ng build --configuration production",
-    "build-dev": "ng build",
+    "build-dev": "ng build --configuration development",
+    "dev": "npm run start-dev",
     "serve": "npm run start-dev",
     "start": "npx http-server ./build -p 8080",
-    "start-dev": "ng serve --configuration production --disable-host-check",
+    "start-dev": "ng serve --disable-host-check",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -27,62 +28,21 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@angular/cdk": "^12.2.10",
-    "@angular/common": "^12.2.10",
-    "@angular/compiler": "^12.2.10",
-    "@angular/core": "^12.2.10",
-    "@angular/forms": "^12.2.10",
-    "@angular/localize": "^12.2.10",
-    "@angular/platform-browser": "^12.2.10",
-    "@angular/platform-browser-dynamic": "^12.2.10",
-    "@ng-bootstrap/ng-bootstrap": "^10.0.0",
-    "@ngx-translate/core": "^13.0.0",
-    "@ngx-translate/http-loader": "^6.0.0",
-    "bootstrap": "^5.1.3",
-    "csvtojson": "^2.0.10",
-    "dayjs": "^1.10.7",
-    "deepmerge": "^4.2.2",
-    "geostyler-openlayers-parser": "^3.0.0",
-    "geostyler-sld-parser": "^3.0.1",
-    "geostyler-style": "^5.0.0",
-    "hslayers-ng": "https://gitpkg.now.sh/hslayers/hslayers-ng/projects/hslayers?develop",
-    "hsv2rgb": "^1.1.0",
-    "http-server": "^0.12.3",
-    "ngx-color": "^7.2.0",
-    "ngx-cookie-service": "^12.0.3",
-    "ol": "6.7",
-    "ol-popup": "^4.0.0",
-    "proj4": "2.7",
-    "queue": "^6.0.2",
-    "resumablejs": "^1.1.0",
-    "rxjs": "6.6",
-    "share-api-polyfill": "^1.0.20",
-    "ts-sync-request": "^1.4.1",
-    "tslib": "^2.3.1",
-    "xml-js": "^1.6.11",
-    "zone.js": "^0.11.4"
+    "hslayers-ng": "^9.2.0",
+    "hsv2rgb": "^1.1.0"
   },
   "devDependencies": {
-    "@angular-builders/custom-webpack": "^12.1.3",
-    "@angular-devkit/build-angular": "^12.2.10",
-    "@angular-eslint/builder": "^12.5.0",
-    "@angular-eslint/eslint-plugin": "^12.5.0",
-    "@angular-eslint/eslint-plugin-template": "^12.5.0",
-    "@angular-eslint/schematics": "^12.5.0",
-    "@angular-eslint/template-parser": "^12.5.0",
-    "@angular/cli": "^12.2.10",
-    "@angular/compiler-cli": "^12.2.10",
-    "@angularclass/hmr": "^3.0.0",
-    "eslint": "^7.10.0",
-    "eslint-config-openlayers": "^14.0.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
+    "@angular-builders/custom-webpack": "^13.1.0",
+    "@angular-devkit/build-angular": "^13.3.9",
+    "@angular-eslint/builder": "^13.5.0",
+    "@angular-eslint/eslint-plugin": "^13.5.0",
+    "@angular-eslint/eslint-plugin-template": "^13.5.0",
+    "@angular-eslint/template-parser": "^13.5.0",
+    "@angular/cli": "~13.3.9",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "eslint": "^8.20.0",
+    "eslint-config-openlayers": "14.0.0",
     "file-loader": "^6.2.0",
-    "ng-packagr": "^12.2.3",
-    "sass": "^1.32.7",
-    "typescript": "4.2",
-    "webpack": "^4.46.0",
-    "webpack-dev-server": "^3.11.2"
+    "http-server": "^0.12.3"
   }
 }

src/adjuster/adjuster-loader.component.html

@@ -1,10 +1,10 @@
 <div class="loader-splash" *ngIf="adjusterService.isInProcess()">
   <div class="center-block">
-    <h1 [hidden]="!adjusterService.isLoading()">{{'ADJUSTER.loadingData' | translate}}</h1>
-    <h1 [hidden]="!adjusterService.isCalculatingRAI()">{{'ADJUSTER.calcAttractivity' | translate}}</h1>
-    <h1 [hidden]="!adjusterService.isClustering()">{{'ADJUSTER.calcClusters' | translate}}</h1>
+    <h1 [hidden]="!adjusterService.isLoading()">{{'ADJUSTER.loadingData' | translateHs: {app: 'default'} }}</h1>
+    <h1 [hidden]="!adjusterService.isCalculatingRAI()">{{'ADJUSTER.calcAttractivity' | translateHs: {app: 'default'} }}</h1>
+    <h1 [hidden]="!adjusterService.isClustering()">{{'ADJUSTER.calcClusters' | translateHs: {app: 'default'} }}</h1>
     <div class="spinner-border spinner" role="status">
-      <span class="visually-hidden">{{'ADJUSTER.loading' | translate}}...</span>
+      <span class="visually-hidden">{{'ADJUSTER.loading' | translateHs: {app: 'default'} }}...</span>
     </div>
   </div>
 </div>

src/adjuster/adjuster-presets.service.ts

@@ -79,7 +79,7 @@ export class AdjusterPresetsService {
   }
 
   getLabelInCurrentLang(labels: Label[]) {
-    return this.getLabelInLang(labels, this.hsLanguageService.getCurrentLanguageCode());
+    return this.getLabelInLang(labels, this.hsLanguageService.getCurrentLanguageCode('default'));
   }
 
   getLabelInLang(labels: Label[], lang: string) {

src/adjuster/adjuster.component.html

@@ -1,50 +1,50 @@
 <div [hidden]="!isVisible()" class="card mainpanel">
-  <hs-panel-header name="adjuster" [title]="'ADJUSTER.adjustFactors' | translate"></hs-panel-header>
+  <hs-panel-header name="adjuster" [title]="'ADJUSTER.adjustFactors' | translateHs: {app: 'default'} "></hs-panel-header>
   <div class="card-body">
     <div class="p-2 center-block">
       <div class="d-flex flex-row">
         <div>
           <button type="button" class="btn btn-primary btn-lg" (click)="adjusterService.apply()"
-            [disabled]="adjusterService.isInProcess() || noDataSelected() || noOperationSelected() ">{{'ADJUSTER.calculate' | translate}}</button>
+            [disabled]="adjusterService.isInProcess() || noDataSelected() || noOperationSelected() ">{{'ADJUSTER.calculate' | translateHs: {app: 'default'} }}</button>
         </div>
         <div>
           <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
             [ngClass]="adjusterService.allowIndex ? 'hs-checkmark' : 'hs-uncheckmark'"
             (click)="adjusterService.allowIndex = !adjusterService.allowIndex; $event.stopPropagation()"></button>
-          <label class="ps-2 text-secondary">{{'ADJUSTER.index' | translate}}</label>
+          <label class="ps-2 text-secondary">{{'ADJUSTER.index' | translateHs: {app: 'default'} }}</label>
         </div>
         <div>
           <button type="button" class="btn btn-sm btn-light hs-lm-item-visibility"
             [ngClass]="adjusterService.allowClusters ? 'hs-checkmark' : 'hs-uncheckmark'"
             (click)="adjusterService.allowClusters = !adjusterService.allowClusters; $event.stopPropagation()"></button>
-            <label class="ps-2 text-secondary">{{'ADJUSTER.clusters' | translate}}</label>
+            <label class="ps-2 text-secondary">{{'ADJUSTER.clusters' | translateHs: {app: 'default'} }}</label>
         </div>
       </div>
-      <div class="text-warning pt-2" [hidden]="!noDataSelected() || errorMsg">{{'ADJUSTER.noDataSelectedMsg' | translate}}</div>
-      <div class="text-danger pt-2" [hidden]="!errorMsg">{{'ADJUSTER.serverError' | translate}}: {{errorMsg}}</div>
+      <div class="text-warning pt-2" [hidden]="!noDataSelected() || errorMsg">{{'ADJUSTER.noDataSelectedMsg' | translateHs: {app: 'default'} }}</div>
+      <div class="text-danger pt-2" [hidden]="!errorMsg">{{'ADJUSTER.serverError' | translateHs: {app: 'default'} }}: {{errorMsg}}</div>
     </div>
     <div class="p-2 center-block">
-      {{'ADJUSTER.myRoleIs' | translate}}:&emsp;
+      {{'ADJUSTER.myRoleIs' | translateHs: {app: 'default'} }}:&emsp;
       <select class="form-select" [(ngModel)]="adjusterPresetsService.activeRole" (ngModelChange)="adjusterPresetsService.pickProblem($event)">
         <option *ngFor="let role of adjusterPresetsService.roles" [ngValue]="role">{{getLabelInCurrentLang(role.labels)}}</option>
       </select>
-      {{'ADJUSTER.myProblemIs' | translate}}:&emsp;
+      {{'ADJUSTER.myProblemIs' | translateHs: {app: 'default'} }}:&emsp;
       <select class="form-select" [(ngModel)]="adjusterPresetsService.activeProblem" (ngModelChange)="adjusterPresetsService.applyProblem($event)">
         <option *ngFor="let problem of adjusterPresetsService.getActiveRoleProblems()" [ngValue]="problem">{{getLabelInCurrentLang(problem.labels)}}</option>
       </select>
     </div>
     <button class="btn btn-secondary btn-sm" aria-expanded="false" aria-controls="advancedOptions" (click)="showAdvancedOptions = !showAdvancedOptions">
       <span class="glyphicon cursor-pointer" [ngClass]="showAdvancedOptions ? 'icon-chevron-down' : 'icon-chevron-right'"></span>
-      {{'ADJUSTER.advanced' | translate}}
+      {{'ADJUSTER.advanced' | translateHs: {app: 'default'} }}
     </button>
     <div class="p-2 center-block" [hidden]="!showAdvancedOptions">
-      {{'ADJUSTER.classifyBySchema' | translate}}:&emsp;
+      {{'ADJUSTER.classifyBySchema' | translateHs: {app: 'default'} }}:&emsp;
       <select class="form-select" [(ngModel)]="adjusterPresetsService.activeSchema" (ngModelChange)="adjusterPresetsService.changeSchema($event)">
         <option *ngFor="let schema of adjusterPresetsService.schemas" [ngValue]="schema">{{getLabelInCurrentLang(schema.labels)}}</option>
       </select>
     </div>
     <div class="p-2 center-block" [hidden]="!adjusterService.allowClusters">
-      <div class="pt-2 text-secondary">{{'ADJUSTER.numberOfClusters' | translate}}: {{adjusterService.numberOfClusters}}</div>
+      <div class="pt-2 text-secondary">{{'ADJUSTER.numberOfClusters' | translateHs: {app: 'default'} }}: {{adjusterService.numberOfClusters}}</div>
       <input type="range" class="form-range" [(ngModel)]="adjusterService.numberOfClusters" min="5" max="15" step="1">
     </div>
     <div *ngFor="let factor of adjusterService.factors">
@@ -52,8 +52,8 @@
     </div>
     <hr>
     <div class="pt-3 center-block" [hidden]="!adjusterService.clustersLoaded()">
-      {{'ADJUSTER.layerManagerLink1' | translate}}<br>
-      {{'ADJUSTER.layerManagerLink2' | translate}} <a href="" (click)="hsLayoutService.setMainPanel('layermanager');$event.preventDefault();">{{'ADJUSTER.layerManagerLinkLMName' | translate}}</a>
+      {{'ADJUSTER.layerManagerLink1' | translateHs: {app: 'default'} }}<br>
+      {{'ADJUSTER.layerManagerLink2' | translateHs: {app: 'default'} }} <a href="" (click)="hsLayoutService.setMainPanel('layermanager', 'default');$event.preventDefault();">{{'ADJUSTER.layerManagerLinkLMName' | translateHs: {app: 'default'} }}</a>
     </div>
   </div>
 </div>

src/adjuster/adjuster.component.ts

@@ -1,8 +1,6 @@
 import {Component, OnInit, ViewRef} from '@angular/core';
 
-import {HsDialogContainerService} from 'hslayers-ng';
-import {HsLayoutService} from 'hslayers-ng';
-import {HsPanelComponent} from 'hslayers-ng';
+import {HsDialogContainerService, HsLayoutService, HsPanelBaseComponent} from 'hslayers-ng';
 
 //import {AdjusterEventService} from './adjuster-event.service';
 import {AdjusterLoaderComponent} from './adjuster-loader.component';
@@ -14,7 +12,7 @@ import {AdjusterService} from './adjuster.service';
   templateUrl: './adjuster.component.html',
   styleUrls: ['./adjuster.component.scss'],
 })
-export class AdjusterComponent implements HsPanelComponent, OnInit {
+export class AdjusterComponent extends HsPanelBaseComponent implements OnInit {
   name = 'adjuster';
   data: any;
   //descriptionVisible: boolean;
@@ -29,6 +27,7 @@ export class AdjusterComponent implements HsPanelComponent, OnInit {
     public hsDialogContainerService: HsDialogContainerService,
     public hsLayoutService: HsLayoutService
   ) {
+    super(hsLayoutService);
     //this.descriptionVisible = false;
     //this.method = this.adjusterService.method;
     /*this.adjusterEventService.clustersLoaded.subscribe(({success, err}) => {

src/adjuster/adjuster.module.ts

@@ -4,7 +4,7 @@ import {FormsModule} from '@angular/forms';
 import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
 import {TranslateModule} from '@ngx-translate/core';
 
-import {HsPanelHelpersModule} from 'hslayers-ng';
+import {HsLanguageModule, HsPanelHelpersModule} from 'hslayers-ng';
 
 import {AdjusterComponent} from './adjuster.component';
 import {AdjusterEventService} from './adjuster-event.service';
@@ -18,6 +18,7 @@ import { MetadataDialogComponent } from './metadata-dialog/metadata-dialog.compo
   imports: [
     CommonModule,
     FormsModule,
+    HsLanguageModule,
     HsPanelHelpersModule,
     NgbModule,
     TranslateModule,

src/adjuster/metadata-dialog/metadata-dialog.component.html

@@ -6,37 +6,37 @@
           <span>{{ data.title }}</span>
         </h4>
         <button type="button" (click)="close()" class="btn-close" data-dismiss="modal">
-          <span aria-hidden="true">&times;</span><span class="visually-hidden">{{ "COMMON.close" | translate }}</span>
+          <span aria-hidden="true">&times;</span><span class="visually-hidden">{{ "COMMON.close" | translateHs: {app: 'default'} }}</span>
         </button>
       </div>
       <div class="modal-body" style="max-height: 600px; overflow-y: auto">
         <div class="row">
           <div class="col-md-3">
-            <b>{{ "METADATA.coverage" | translate }}</b>
+            <b>{{ "METADATA.coverage" | translateHs: {app: 'default'} }}</b>
           </div>
           <div class="col-md-9">{{data.coverage}}</div>
         </div>
         <div class="row">
           <div class="col-md-3">
-            <b>{{ "METADATA.LoD" | translate }}</b>
+            <b>{{ "METADATA.LoD" | translateHs: {app: 'default'} }}</b>
           </div>
           <div class="col-md-9">{{data.lod}}</div>
         </div>
         <div class="row">
           <div class="col-md-3">
-            <b>{{ "METADATA.update" | translate }}</b>
+            <b>{{ "METADATA.update" | translateHs: {app: 'default'} }}</b>
           </div>
           <div class="col-md-9">{{data.update}}</div>
         </div>
         <div class="row">
           <div class="col-md-3">
-            <b>{{ "METADATA.source" | translate }}</b>
+            <b>{{ "METADATA.source" | translateHs: {app: 'default'} }}</b>
           </div>
           <div class="col-md-9">{{data.source}}</div>
         </div>
         <div class="row">
           <div class="col-md-3">
-            <b>{{ "COMMON.url" | translate }}</b>
+            <b>{{ "COMMON.url" | translateHs: {app: 'default'} }}</b>
           </div>
           <div class="col-md-9"><a [href]="data.link" target="_blank">{{data.link}}</a></div>
         </div>
@@ -44,11 +44,11 @@
       <!--div class="modal-footer">
         <div class="btn-group" role="group">
           <button class="btn btn-secondary" (click)="shareOnSocial()">
-            <i class="icon-share-alt"></i> {{'COMMON.share' | translate}}
+            <i class="icon-share-alt"></i> {{'COMMON.share' | translateHs: {app: 'default'} }}
           </button>
         </div>
         <button type="button" class="btn btn-secondary" (click)="close()"
-          data-dismiss="modal">{{'COMMON.close' | translate}}</button>
+          data-dismiss="modal">{{'COMMON.close' | translateHs: {app: 'default'} }}</button>
       </div-->
     </div>
   </div>

src/app.config.ts

@@ -179,7 +179,7 @@ export const AppConfig = {
   //proxyPrefix: '../8085/',
   geonamesUser: env.geonamesUser,
   default_layers: [cartodbLayer, osmLayer],
-  popUpDisplay: 'hover',
+  popUpDisplay: 'hover' as const,
   project_name: 'erra/map',
   default_view: new View({
     //projection: sjtskProjection,

src/app.service.ts

@@ -35,7 +35,7 @@ export class AppService {
     public hsPanelContainerService: HsPanelContainerService,
     public hsSidebarService: HsSidebarService
   ) {
-    this.hsSidebarService.buttons.push({
+    this.hsSidebarService.addButton({
       panel: 'adjuster',
       module: 'pra.adjuster',
       order: 0,

tsconfig.app.json

@@ -3,11 +3,6 @@
   "compilerOptions": {
     "outDir": "./out-tsc/app",
     "types": ["node"],
-    "paths": {
-      "hslayers-ng": [
-        "./node_modules/hslayers-ng/src/public-api.ts"
-      ]
-    }
   },
   "files": [
     "src/main.ts",
@@ -15,7 +10,6 @@
   ],
   "include": [
     "./**/*.d.ts",
-    "./node_modules/hslayers-ng/src/**/*.ts"
   ],
   "exclude": [
     "./node_modules/hslayers-ng/src/**/*.spec.ts",

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "compileOnSave": false,
+  "compileOnSave": true,
   "compilerOptions": {
     "allowJs": false,
     "allowSyntheticDefaultImports": true,
@@ -11,10 +11,19 @@
     "experimentalDecorators": true,
     "importHelpers": true,
     "lib": ["es2018", "dom"],
+    "module": "es2020",
+    "moduleResolution": "node",
+    "paths": {
+      "@angular/*": [ "node_modules/@angular/*" ],
+      "rxjs/*": [ "node_modules/rxjs/*" ],
+      "ol/*": ["node_modules/ol/*"],
+      "hslayers-ng/*": ["node_modules/hslayers/*"],
+      "@ngx-translate/*": ["node_modules/@ngx-translate/*"]
+    },
     "resolveJsonModule": true,
     "sourceMap": true,
     "skipLibCheck": true,
-    "target": "es5",
+    "target": "es2015",
   },
   "angularCompilerOptions": {
     "enableResourceInlining": true,