🚨 lint files

src/app/app.service.ts

@@ -119,128 +119,131 @@ export class AppService {
       console.log(evt);
     });
     /* Define and update the HsConfig configuration object */
-    this.hsConfig.update({
-      datasources: [
-        /* You need to set up Layman in order to use it. See https://github.com/LayerManager/layman */
-        /*{
+    this.hsConfig.update(
+      {
+        datasources: [
+          /* You need to set up Layman in order to use it. See https://github.com/LayerManager/layman */
+          /*{
           title: 'Layman',
           url: 'http://localhost:8087',
           user: 'anonymous',
           type: 'layman',
           liferayProtocol: 'https',
         },*/
-        {
-          title: 'Micka',
-          url: 'https://hub.sieusoil.eu/cat/csw',
-          language: 'eng',
-          type: 'micka',
-        },
-      ],
-      default_view: new View({
-        projection: this.sjtskProjection,
-        center: transform([16.964, 49.248], 'EPSG:4326', 'EPSG:5514'),
-        zoom: 14,
-      }),
-      /* Use hslayers-server if you need to proxify your requests to other services. See https://www.npmjs.com/package/hslayers-server */
-      proxyPrefix: window.location.hostname.includes('localhost')
-        ? `${window.location.protocol}//${window.location.hostname}:8085/`
-        : '/proxy/',
-      useProxy: true,
-      panelsEnabled: {
-        composition_browser: false,
-        info: false,
-        saveMap: false,
-        legend: false,
-        tripPlanner: false,
-      },
-      componentsEnabled: {
-        basemapGallery: true,
-      },
-      assetsPath: 'assets',
-      symbolizerIcons: [
-        {name: 'beach', url: '/assets/icons/beach17.svg'},
-        {name: 'bicycles', url: '/assets/icons/bicycles.svg'},
-        {name: 'coffee-shop', url: '/assets/icons/coffee-shop1.svg'},
-        {name: 'mountain', url: '/assets/icons/mountain42.svg'},
-        {name: 'warning', url: '/assets/icons/warning.svg'},
-      ],
-      popUpDisplay: 'hover',
-      default_layers: [
-        /* Baselayers */
-        new Tile({
-          source: new OSM(),
-          visible: true,
-          properties: {
-            title: 'OpenStreetMap',
-            base: true,
-            removable: false,
+          {
+            title: 'Micka',
+            url: 'https://hub.sieusoil.eu/cat/csw',
+            language: 'eng',
+            type: 'micka',
           },
+        ],
+        default_view: new View({
+          projection: this.sjtskProjection,
+          center: transform([16.964, 49.248], 'EPSG:4326', 'EPSG:5514'),
+          zoom: 14,
         }),
-        new Tile({
-          properties: {
-            title: 'Ortofoto ČÚZK',
-            base: true,
-            removable: false,
-            thumbnail: 'https://www.agrihub.sk/hsl-ng/img/orto.jpg',
-          },
-          source: new TileWMS({
-            url: 'https://geoportal.cuzk.cz/WMS_ORTOFOTO_PUB/WMService.aspx',
-            params: {
-              LAYERS: 'GR_ORTFOTORGB',
+        /* Use hslayers-server if you need to proxify your requests to other services. See https://www.npmjs.com/package/hslayers-server */
+        proxyPrefix: window.location.hostname.includes('localhost')
+          ? `${window.location.protocol}//${window.location.hostname}:8085/`
+          : '/proxy/',
+        useProxy: true,
+        panelsEnabled: {
+          composition_browser: false,
+          info: false,
+          saveMap: false,
+          legend: false,
+          tripPlanner: false,
+        },
+        componentsEnabled: {
+          basemapGallery: true,
+        },
+        assetsPath: 'assets',
+        symbolizerIcons: [
+          {name: 'beach', url: '/assets/icons/beach17.svg'},
+          {name: 'bicycles', url: '/assets/icons/bicycles.svg'},
+          {name: 'coffee-shop', url: '/assets/icons/coffee-shop1.svg'},
+          {name: 'mountain', url: '/assets/icons/mountain42.svg'},
+          {name: 'warning', url: '/assets/icons/warning.svg'},
+        ],
+        popUpDisplay: 'hover',
+        default_layers: [
+          /* Baselayers */
+          new Tile({
+            source: new OSM(),
+            visible: true,
+            properties: {
+              title: 'OpenStreetMap',
+              base: true,
+              removable: false,
             },
-            attributions: [
-              '© <a href="geoportal.cuzk.cz" target="_blank">ČÚZK</a>',
-            ],
           }),
-          visible: false,
-        }),
-        /* Thematic layers */
-        imageWmsTLayer,
-        new VectorLayer({
-          properties: {
-            title: 'LPIS (WFS)',
-            synchronize: false,
-            cluster: false,
-            inlineLegend: true,
-            editor: {
-              editable: false,
+          new Tile({
+            properties: {
+              title: 'Ortofoto ČÚZK',
+              base: true,
+              removable: false,
+              thumbnail: 'https://www.agrihub.sk/hsl-ng/img/orto.jpg',
             },
-            sld: fieldSld,
-            popUp: {
-              attributes: [
-                'id_dpb',
-                'id_uz',
-                'nkod_dpb',
-                'kultura',
-                'svazitost',
-                'vymeram',
+            source: new TileWMS({
+              url: 'https://geoportal.cuzk.cz/WMS_ORTOFOTO_PUB/WMService.aspx',
+              params: {
+                LAYERS: 'GR_ORTFOTORGB',
+              },
+              attributions: [
+                '© <a href="geoportal.cuzk.cz" target="_blank">ČÚZK</a>',
               ],
+            }),
+            visible: false,
+          }),
+          /* Thematic layers */
+          imageWmsTLayer,
+          new VectorLayer({
+            properties: {
+              title: 'LPIS (WFS)',
+              synchronize: false,
+              cluster: false,
+              inlineLegend: true,
+              editor: {
+                editable: false,
+              },
+              sld: fieldSld,
+              popUp: {
+                attributes: [
+                  'id_dpb',
+                  'id_uz',
+                  'nkod_dpb',
+                  'kultura',
+                  'svazitost',
+                  'vymeram',
+                ],
+              },
+              //path: 'User generated',
             },
-            //path: 'User generated',
-          },
-          minZoom: this.calcService.MIN_LPIS_VISIBLE_ZOOM,
-          opacity: 0.7,
-          source: lpisSource,
-        }),
-        new Tile({
-          properties: {
-            title: 'LPIS (WMS)',
-            queryCapabilities: false,
-          },
-          maxZoom: this.calcService.MIN_LPIS_VISIBLE_ZOOM,
-          source: new TileWMS({
-            url: 'https://gis.lesprojekt.cz/cgi-bin/mapserv?map=/home/dima/maps/foodie/lpis.map',
-            params: {
-              LAYERS: 'lpis_borders', //'lpis_cultures'
-              INFO_FORMAT: undefined,
-              FORMAT: 'image/png; mode=8bit',
+            minZoom: this.calcService.MIN_LPIS_VISIBLE_ZOOM,
+            opacity: 0.7,
+            source: lpisSource,
+          }),
+          new Tile({
+            properties: {
+              title: 'LPIS (WMS)',
+              queryCapabilities: false,
             },
-            crossOrigin: 'anonymous',
+            maxZoom: this.calcService.MIN_LPIS_VISIBLE_ZOOM,
+            source: new TileWMS({
+              url: 'https://gis.lesprojekt.cz/cgi-bin/mapserv?map=/home/dima/maps/foodie/lpis.map',
+              params: {
+                LAYERS: 'lpis_borders', //'lpis_cultures'
+                INFO_FORMAT: undefined,
+                FORMAT: 'image/png; mode=8bit',
+              },
+              crossOrigin: 'anonymous',
+            }),
           }),
-        }),
-      ],
-      translationOverrides: i18n,
-    }, 'default');
-    this.hsLanguageService.setLanguage("en", null);
+        ],
+        translationOverrides: i18n,
+      },
+      'default'
+    );
+    this.hsLanguageService.setLanguage('en', null);
   }
 }

src/app/calculator/calculator.component.html

@@ -1,10 +1,13 @@
 <div [hidden]="!isVisible()" class="card hs-main-panel">
-  <hs-panel-header name="adjuster" [title]="hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'panelHeader')">
+  <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="hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'loading')" *ngIf="calcService.lpisLoading">
-        <span class="visually-hidden">{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'loading')}}...</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,7 +16,8 @@
       <!-- FIELD & INDEX SELECTION PART -->
       <div *ngIf="!noFieldSelected(); else noField">
         <p *ngIf="data.selectedFieldsProperties.length === 1; else moreFields">
-          {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectedField')}} {{data.selectedFieldsProperties[0]?.['id_dpb'] ?? '?'}}
+          {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectedField')}}
+          {{data.selectedFieldsProperties[0]?.['id_dpb'] ?? '?'}}
         </p>
         <ng-template #moreFields>
           <p>
@@ -26,33 +30,43 @@
       </div>
       <ng-template #noField>
         <div>
-          <p class="p-1 text-info">{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectField')}}</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;{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'zoomIn')}}</p>
+      <p class="p-1 text-warning" *ngIf="!lpisWfsVisible"><i
+          class="icon-warning-sign"></i>&nbsp;{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR',
+        'zoomIn')}}</p>
       <div class="form-group">
         {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectIndex')}}:&emsp;
         <select class="form-select" [(ngModel)]="data.selectedProduct" (ngModelChange)="resetDate()">
-          <option selected disabled [ngValue]="null">{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectIndexHint')}}</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>{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectQuantiles')}}:&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>
-          {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectBlur')}}:&emsp;{{calcService.blurValue}}&nbsp;px <span *ngIf="calcService.blurValue === 0">({{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'blurNone')}})</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">
+          [(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()">
+        <button type="button" class="btn btn-secondary form-control" (click)="getDates()"
+          [disabled]="noFieldSelected() || noProductSelected()">
           {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'getDates')}}
           <div class="spinner-border spinner-sm mx-2" role="status" *ngIf="calcService.datesLoading" aria-hidden="true">
-            <span class="visually-hidden">{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'loading')}}...</span>
+            <span class="visually-hidden">{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR',
+              'loading')}}...</span>
           </div>
         </button>
         <!-- LOADER -->
@@ -60,15 +74,12 @@
       <!-- DATE SELECTION PART -->
       <div [hidden]="noDates()">
         <ngb-datepicker #dp [(ngModel)]="calcService.selectedDateCalendar" (ngModelChange)="updateSelectedDate($event)"
-                        [dayTemplate]="customDay" class="form-control"></ngb-datepicker>
+          [dayTemplate]="customDay" class="form-control"></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]="hasDataAvailable(date)">
+          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]="hasDataAvailable(date)">
             {{ date.day }}
           </span>
         </ng-template>
@@ -78,7 +89,8 @@
           {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'getZones')}}
           <!-- LOADER -->
           <div class="spinner-border spinner-sm mx-2" role="status" *ngIf="calcService.zonesLoading" aria-hidden="true">
-            <span class="visually-hidden">{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'loading')}}...</span>
+            <span class="visually-hidden">{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR',
+              'loading')}}...</span>
           </div>
         </button>
       </div>

src/app/calculator/calculator.component.ts

@@ -1,6 +1,6 @@
-import { Component, OnInit, ViewRef} from '@angular/core';
-import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
-import { BehaviorSubject } from 'rxjs';
+import {BehaviorSubject} from 'rxjs';
+import {Component, OnInit, ViewRef} from '@angular/core';
+import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
 
 import {
   HsLanguageService,
@@ -33,7 +33,6 @@ export class CalculatorComponent implements HsPanelComponent, OnInit {
     public hsLanguageService: HsLanguageService,
     public hsLayoutService: HsLayoutService
   ) {
-
     this.fieldService.fieldSelects.subscribe(({features}) => {
       this.data.selectedFieldsProperties = [];
       for (const feature of features) {
@@ -92,13 +91,20 @@ export class CalculatorComponent implements HsPanelComponent, OnInit {
   }
 
   updateSelectedDate(value: NgbDateStruct) {
-    this.calcService.selectedDate = value.year + '-' + value.month + '-' + value.day;
+    this.calcService.selectedDate =
+      value.year + '-' + value.month + '-' + value.day;
   }
 
   hasDataAvailable(date: NgbDateStruct): boolean {
     if (this.calcService && this.calcService.availableDates) {
-      let found = this.calcService.availableDates.filter((item, index) => {
-        return item.indexOf(`${date.year}-${date.month.toString().padStart(2, "0")}-${date.day.toString().padStart(2, "0")}`) == 0;
+      const found = this.calcService.availableDates.filter((item, index) => {
+        return (
+          item.indexOf(
+            `${date.year}-${date.month.toString().padStart(2, '0')}-${date.day
+              .toString()
+              .padStart(2, '0')}`
+          ) == 0
+        );
       }); // date.year == 2022 && date.month == 6 && date.day == 16;
       return found.length > 0;
     }

src/app/calculator/calculator.service.ts

@@ -1,8 +1,8 @@
 import {HttpClient} from '@angular/common/http';
 import {Injectable} from '@angular/core';
+import {NgbCalendar, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
 import {Subject} from 'rxjs';
-import { catchError } from 'rxjs/operators';
-import { NgbDateStruct, NgbCalendar } from '@ng-bootstrap/ng-bootstrap';
+import {catchError} from 'rxjs/operators';
 
 import {
   HsConfig,
@@ -34,7 +34,7 @@ export class CalculatorService {
   selectedDate: string;
   selectedDateCalendar: NgbDateStruct;
   viewChanges: Subject<any> = new Subject();
-  lastError = "";
+  lastError = '';
   //selectedProduct;
   private _datesLoading: boolean;
   private _zonesLoading: boolean;
@@ -128,8 +128,8 @@ export class CalculatorService {
   /**
    * Call 'get_zones' API method
    */
-  async getZones({ product }: { product: Index }) {
-    this.lastError = "";
+  async getZones({product}: {product: Index}) {
+    this.lastError = '';
     this._zonesLoading = true;
     try {
       const data = await this.httpClient
@@ -155,13 +155,16 @@ export class CalculatorService {
         .toPromise();
       console.log('data received!', data);
       this._zonesLoading = false;
-      await this.zonesService.updateZones(data, {quantileCount: this.quantileCount});
+      await this.zonesService.updateZones(data, {
+        quantileCount: this.quantileCount,
+      });
       this.updateImageBackground(this.selectedDate);
     } catch (err) {
-      let errLoadingZones = this.hsLanguageService.getTranslationIgnoreNonExisting(
-        'CALCULATOR',
-        'errorLoadingZones'
-      );
+      const errLoadingZones =
+        this.hsLanguageService.getTranslationIgnoreNonExisting(
+          'CALCULATOR',
+          'errorLoadingZones'
+        );
       this._zonesLoading = false;
       this.hsToastService.createToastPopupMessage(
         this.hsLanguageService.getTranslationIgnoreNonExisting(
@@ -190,6 +193,9 @@ export class CalculatorService {
   }
 
   private proxyEnabled(): boolean {
-    return this.hsConfig.apps.default.useProxy === undefined || this.hsConfig.apps.default.useProxy;
+    return (
+      this.hsConfig.apps.default.useProxy === undefined ||
+      this.hsConfig.apps.default.useProxy
+    );
   }
 }

src/app/calculator/zones.service.ts

@@ -1,14 +1,19 @@
+import SLDParser from 'geostyler-sld-parser';
 import {Fill, Stroke, Style} from 'ol/style';
 import {GeoJSON} from 'ol/format';
 import {Geometry} from 'ol/geom';
 import {Injectable} from '@angular/core';
+// eslint-disable-next-line import/named
+import {StyleFunction} from 'ol/style/Style';
 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, HsLayerManagerService, HsStylerService, HsLayerExt } from 'hslayers-ng';
-import { AppComponent } from '../app.component';
+import {
+  HsAddDataService,
+  HsLayerExt,
+  HsLayerManagerService,
+  HsStylerService,
+} from 'hslayers-ng';
 
 @Injectable({providedIn: 'root'})
 export class ZonesService {
@@ -101,8 +106,8 @@ export class ZonesService {
   constructor(
     private hsLayerManagerService: HsLayerManagerService,
     private hsAddDataService: HsAddDataService,
-    private hsStylerService: HsStylerService) {
-
+    private hsStylerService: HsStylerService
+  ) {
     this.zonesStyle = (feature) =>
       new Style({
         fill: new Fill({
@@ -118,7 +123,6 @@ export class ZonesService {
     if (this.zonesLayer) {
       this.hsLayerManagerService.get(null).map.removeLayer(this.zonesLayer);
     }
-
     this.zonesSource = new VectorSource();
     this.zonesLayer = new VectorLayer({
       properties: {
@@ -131,16 +135,16 @@ export class ZonesService {
       //style: this.zonesStyle,
       source: this.zonesSource,
     });
-    
     this.zonesSource.clear();
     this.updateZonesStyle(quantileCount);
 
-    let zonesStyleObj = { name: 'Zones', rules: [] };
+    const zonesStyleObj = {name: 'Zones', rules: []};
     zonesStyleObj.rules = this.getSymbolizerRules(quantileCount);
-    const { output: sld } = await this.sldParser.writeStyle(zonesStyleObj);
+    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.set('sld', sld);
+    const style: Style | Style[] | StyleFunction =
+      await this.hsStylerService.geoStylerStyleToOlStyle(zonesStyleObj);
     this.zonesLayer.setStyle(style);
     this.zonesSource.addFeatures(
       new GeoJSON().readFeatures(zones, {
@@ -153,23 +157,23 @@ export class ZonesService {
 
   private getSymbolizerRules(classes: number): Array<any> {
     const colorRamp = this.QUANTILE_COLORS_MATRIX[classes - 2];
-    let rules = [];
+    const rules = [];
 
     for (let i = 0; i < colorRamp.length; i++) {
-      let ruleIdx = (i + 1).toString();
+      const ruleIdx = (i + 1).toString();
 
       rules[i] = {
         name: ruleIdx,
-        filter: ["==", "quantile", ruleIdx],
+        filter: ['==', 'quantile', ruleIdx],
         symbolizers: [
           {
-            kind: "Fill",
+            kind: 'Fill',
             color: colorRamp[i],
-          //  opacity: 0,
-          //  outlineColor: "#505050",
-          //  outlineWidth: 1
-          }
-        ]
+            //  opacity: 0,
+            //  outlineColor: "#505050",
+            //  outlineWidth: 1
+          },
+        ],
       };
     }