⬆️ upgrade HSL to 9

.editorconfig

@@ -11,5 +11,6 @@ charset = utf-8
 
 # 2 space indentation
 [*.{js,ts,html,css}]
+end_of_line = lf
 indent_style = space
 indent_size = 2

.gitignore

@@ -34,4 +34,5 @@ pidfile
 src/Attractivity.json
 src/Attractivity.csv
 /.vs
+.angular
 env.config.json

LICENSE

@@ -1,5 +1,5 @@
 MIT License
-Copyright (c) <year> <copyright holders>
+Copyright (c) 2020 Plan4All
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -1,2 +1,6 @@
-# polirural-attractiveness-cz
+# rural-attractiveness-cz
 
+Regional attractiveness application for the Czech Republic
+
+`npm i`
+`npm run dev`

angular.json

@@ -7,7 +7,7 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "sass"
+          "style": "scss"
         }
       },
       "root": "",
@@ -39,12 +39,7 @@
               "./node_modules/hslayers-ng/css/hslayers-ng.css"
             ],
             "scripts": [],
-            "vendorChunk": true,
-            "extractLicenses": false,
-            "buildOptimizer": false,
-            "sourceMap": true,
-            "optimization": false,
-            "namedChunks": true
+            "sourceMap": true
           },
           "configurations": {
             "development": {

package.json

@@ -26,26 +26,20 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "csvtojson": "^2.0.10",
-    "hslayers-ng": "^7.1.0",
-    "hsv2rgb": "^1.1.0",
-    "http-server": "^0.12.3"
+    "hslayers-ng": "^9.3.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",
-    "@angularclass/hmr": "^3.0.0",
-    "eslint": "^7.10.0",
+    "@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",
+    "eslint": "^8.20.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",
-    "file-loader": "^6.2.0"
+    "file-loader": "^6.2.0",
+    "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');$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, HsPanelBaseComponent, HsLayoutService} 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,20 +4,21 @@ 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';
 import {AdjusterLoaderComponent} from './adjuster-loader.component';
 import {AdjusterService} from './adjuster.service';
 import {DatasetListComponent} from './dataset-list/dataset-list.component';
-import { MetadataDialogComponent } from './metadata-dialog/metadata-dialog.component';
+import {MetadataDialogComponent} from './metadata-dialog/metadata-dialog.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   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

@@ -195,6 +195,7 @@ export const obce = new VectorSource({
 export const obceIndexLayer = new VectorLayer({
   properties: {
     editor: {editable: false},
+    editable: false,
     autoLegend: false,
     title: 'Obce ČR: Rural attractiveness index',
   },
@@ -228,6 +229,7 @@ const masStyle = (feature) =>
 export const masLayer = new VectorLayer({
   properties: {
     editor: {editable: false},
+    editable: false,
     title: 'MAS ČR',
     attributions: ['© NS MAS ČR, http://nsmascr.cz/o-nas/'],
     popUp: {
@@ -256,6 +258,7 @@ const okresyStyle = new Style({
 export const okresyLayer = new VectorLayer({
   properties: {
     editor: {editable: false},
+    editable: false,
     title: 'Okresy ČR',
     attributions: ['CC-BY ČÚZK, 2021'],
   },
@@ -278,6 +281,7 @@ const krajeStyle = new Style({
 export const krajeLayer = new VectorLayer({
   properties: {
     editor: {editable: false},
+    editable: false,
     title: 'Kraje ČR',
     attributions: ['CC-BY ČÚZK, 2021'],
   },
@@ -292,8 +296,8 @@ export const krajeLayer = new VectorLayer({
 
 export const AppConfig = {
   assetsPath: 'assets/hslayers-ng',
-  useProxy: false,
-  //proxyPrefix: '../8085/',
+  //useProxy: false,
+  proxyPrefix: '/proxy/',
   geonamesUser: env.geonamesUser,
   default_layers: [cartodbLayer, osmLayer, mcr500Layer, ortofotoLayer],
   popUpDisplay: 'hover' as const,
@@ -314,7 +318,8 @@ export const AppConfig = {
     },
   },
   panelWidths: {
-    datasource_selector: 400,
+    default: 450,
+    datasource_selector: 450,
   },
   panelsEnabled: {
     composition_browser: false,
@@ -329,6 +334,7 @@ export const AppConfig = {
     feature_table: false,
     draw: false,
   },
+  reverseLayerList: true,
   status_manager_url: '/statusmanager/',
   sidebarPosition: 'right',
   sizeMode: 'fullscreen',

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,
@@ -77,6 +77,7 @@ export class AppService {
       method.layer = new VectorLayer({
         properties: {
           editor: {editable: false},
+          editable: false,
           autoLegend: false,
           title: `Obce ČR: ${method.name.replace(/\((.+?)\)/g, '')} clusters`,
           attributions: ['CC-BY ČÚZK, 2021'],

tsconfig.app.json

@@ -2,12 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": ["node"],
-    "paths": {
-      "hslayers-ng": [
-        "./node_modules/hslayers-ng/src/public-api.ts"
-      ]
-    }
+    "types": ["node"]
   },
   "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,14 +11,23 @@
     "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,
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
+    "strictInjectionParameters": true,
+    "strictTemplates": true
   }
 }