.gitignore

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

package.json

@@ -27,22 +27,26 @@
   },
   "homepage": "https://git.lesprojekt.cz/jmacura/fieldcalc-frontend/README.md",
   "dependencies": {
-    "hslayers-ng": "^7.1.0"
+    "bootstrap": "^5.1.3",
+    "hslayers-ng": "9.2.0",
+    "ngx-bootstrap": "^8.0.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.module.ts

@@ -4,10 +4,11 @@ import {NgModule} from '@angular/core';
 import {AppComponent} from './app.component';
 import {CalculatorModule} from './calculator/calculator.module';
 import {HslayersModule} from 'hslayers-ng';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 @NgModule({
   declarations: [AppComponent],
-  imports: [BrowserModule, HslayersModule, CalculatorModule],
+  imports: [BrowserModule, HslayersModule, CalculatorModule, BrowserAnimationsModule],
   providers: [],
   bootstrap: [AppComponent],
 })

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,63 +26,69 @@
       </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;
-        <select class="form-select" [(ngModel)]="calcService.selectedDate" (ngModelChange)="updateRangeSlider($event)">
+        {{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>
+        </select>-->
         <!-- TODO: date-picker instead of select -->
 
-        <ngb-datepicker #dp [(ngModel)]="calcService.selectedDateCalendar"></ngb-datepicker>
-        <button class="btn btn-sm btn-outline-primary me-2" (click)="calcService.selectToday()">Select Today</button>
+        <ngb-datepicker #dp [(ngModel)]="calcService.selectedDateCalendar" (ngModelChange)="updateSelectedDate($event)" 
+                        [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]="hasTask(date)">
+            {{ date.day }}
+          </span>
+        </ng-template>
 
-        <fc-date-range-slider [values]="calcService.availableDates"></fc-date-range-slider>
+        <!--<fc-date-range-slider [values]="calcService.availableDates"></fc-date-range-slider>-->
       </div>
       <div class="d-flex" *ngIf="!noDates()">
-        <button type="button" class="btn btn-primary btn-lg" (click)="getZones()" [disabled]="noDateSelected()">
-          {{
-          'CALCULATOR.getZones' | translate
-          }}
+        <button type="button" class="btn btn-primary form-control" (click)="getZones()" [disabled]="noDateSelected()">
+          {{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>
+          </div>
         </button>
-        <!-- LOADER -->
-        <div class="spinner-border spinner mx-2" role="status" *ngIf="calcService.zonesLoading" aria-hidden="true">
-          <span class="visually-hidden">{{ 'CALCULATOR.loading' | translate }}...</span>
-        </div>
       </div>
     </div>
   </div>

src/app/calculator/calculator.component.scss

@@ -13,3 +13,33 @@
     width: 1rem;
     height: 1rem;
 }
+
+.custom-day {
+  color: #F0F0F0;
+  pointer-events: none;
+}
+
+.has-task {
+  background-color: #0dcaf0;
+  padding: 0px 5px;
+  border-radius: 5px;
+  color: #000000;
+}
+
+ngb-datepicker-navigation-select > .form-select {
+  height: 2.5rem;
+}
+
+.ngb-dp-day {
+  width: 4rem !important;
+}
+
+.ngb-dp-day > div {
+  width: 4rem !important;
+/*  height: 4rem !important;
+  line-height: 4rem !important;
+*/}
+
+.ngb-dp-weekday {
+  width: 4rem !important;
+}

src/app/calculator/calculator.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit, ViewRef} from '@angular/core';
+import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
+import { BehaviorSubject } from 'rxjs';
 
 import {
   HsLanguageService,
@@ -23,6 +25,7 @@ export class CalculatorComponent implements HsPanelComponent, OnInit {
   lpisWfsVisible: boolean;
   name: 'calculator';
   viewRef: ViewRef;
+  isVisible$ = new BehaviorSubject<boolean>(true);
 
   constructor(
     public calcService: CalculatorService,
@@ -90,4 +93,23 @@ export class CalculatorComponent implements HsPanelComponent, OnInit {
   updateRangeSlider(value: string) {
     this.calcService.dateCalendarSelects.next({date: value});
   }
+
+  updateSelectedDate(value: NgbDateStruct) {
+    this.calcService.selectedDate = value.year + '-' + value.month + '-' + value.day;
+  }
+
+  isWeekend(date: NgbDateStruct) {
+    return date.day > 5;
+  }
+
+  hasTask(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;
+      }); // date.year == 2022 && date.month == 6 && date.day == 16;
+      return found.length > 0;
+    }
+
+    return false;
+  }
 }

src/app/calculator/calculator.service.ts

@@ -60,16 +60,12 @@ 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);
       });
     });
   }
 
-  selectToday() {
-    this.selectedDateCalendar = this.calendar.getToday();
-  }
-
   noDates(): boolean {
     return this.availableDates === undefined;
   }
@@ -83,7 +79,7 @@ export class CalculatorService {
     try {
       const data = await this.httpClient
         .get<{dates: string[]}>(
-          (this.proxyEnabled() ? this.hsConfig.proxyPrefix : '') +
+          (this.proxyEnabled() ? this.hsConfig.apps.default.proxyPrefix : '') +
             this.SERVICE_BASE_URL +
             'get_dates?' +
             'product=' +
@@ -135,7 +131,7 @@ export class CalculatorService {
     try {
       const data = await this.httpClient
         .post(
-          (this.proxyEnabled() ? this.hsConfig.proxyPrefix : '') +
+          (this.proxyEnabled() ? this.hsConfig.apps.default.proxyPrefix : '') +
             this.SERVICE_BASE_URL +
             'get_zones',
           {
@@ -156,7 +152,7 @@ export class CalculatorService {
         .toPromise();
       console.log('data received!', data);
       this._zonesLoading = false;
-      this.zonesService.updateZones(data, {quantileCount: this.quantileCount});
+      await this.zonesService.updateZones(data, {quantileCount: this.quantileCount});
       this.updateImageBackground(this.selectedDate);
     } catch (err) {
       this._zonesLoading = false;
@@ -189,6 +185,6 @@ export class CalculatorService {
   }
 
   private proxyEnabled(): boolean {
-    return this.hsConfig.useProxy === undefined || this.hsConfig.useProxy;
+    return this.hsConfig.apps.default.useProxy === undefined || this.hsConfig.apps.default.useProxy;
   }
 }

src/app/calculator/field.service.ts

@@ -19,11 +19,9 @@ export class FieldService {
     private hsMapService: HsMapService
   ) {
     this.hsEventBus.vectorQueryFeatureSelection.subscribe((data) => {
-      const features = data.selector
-        .getFeatures()
-        .getArray()
-        .filter((feature) => this.isValidGeometry(feature))
-        .filter((feature) => this.isValidLayer(feature));
+      const features = data.selector.getFeatures().getArray();
+      //  .filter((feature) => this.isValidGeometry(feature))
+      //  .filter((feature) => this.isValidLayer(feature));
       if (features.length === 0) {
         return;
       }
@@ -78,7 +76,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

@@ -4,8 +4,11 @@ import {Geometry} from 'ol/geom';
 import {Injectable} from '@angular/core';
 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} from 'hslayers-ng';
+import { HsAddDataService, HsLayerManagerService, HsStylerService, HsLayerExt } from 'hslayers-ng';
+import { AppComponent } from '../app.component';
 
 @Injectable({providedIn: 'root'})
 export class ZonesService {
@@ -93,8 +96,13 @@ export class ZonesService {
     this.QUANTILE_COLORS_9,
     this.QUANTILE_COLORS_10,
   ] as const;
+  sldParser: SLDParser;
+
+  constructor(
+    private hsLayerManagerService: HsLayerManagerService,
+    private hsAddDataService: HsAddDataService,
+    private hsStylerService: HsStylerService) {
 
-  constructor(private hsAddDataService: HsAddDataService) {
     this.zonesStyle = (feature) =>
       new Style({
         fill: new Fill({
@@ -102,33 +110,74 @@ export class ZonesService {
         }),
         stroke: new Stroke(),
       });
+
+    this.sldParser = new SLDParser();
   }
 
-  updateZones(zones, {quantileCount}): void {
-    if (!this.zonesLayer) {
-      this.zonesSource = new VectorSource();
-      this.zonesLayer = new VectorLayer({
-        properties: {
-          title: 'Zones',
-          path: 'Results',
-          popUp: {
-            attributes: ['quantile'],
-          },
-        },
-        style: this.zonesStyle,
-        source: this.zonesSource,
-      });
-      this.hsAddDataService.addLayer(this.zonesLayer);
+  async updateZones(zones, {quantileCount}): Promise<void> {
+    if (this.zonesLayer) {
+      this.hsLayerManagerService.get(null).map.removeLayer(this.zonesLayer);
     }
+
+    this.zonesSource = new VectorSource();
+    this.zonesLayer = new VectorLayer({
+      properties: {
+        title: 'Zones',
+        path: 'Results',
+        popUp: {
+          attributes: ['quantile'],
+        },
+      },
+      //style: this.zonesStyle,
+      source: this.zonesSource,
+    });
+    this.hsAddDataService.addLayer(this.zonesLayer, null);
+    
     this.zonesSource.clear();
     this.updateZonesStyle(quantileCount);
-    this.zonesLayer.setStyle(this.zonesStyle);
+
+    let zonesStyleObj = { name: 'Zones', rules: [] };
+    zonesStyleObj.rules = this.getSymbolizerRules(quantileCount);
+    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.setStyle(style);
     this.zonesSource.addFeatures(
       new GeoJSON().readFeatures(zones, {
         dataProjection: 'EPSG:4326',
         featureProjection: 'EPSG:5514',
       })
     );
+    this.hsStylerService.get('default').styleObject = zonesStyleObj;
+    this.hsStylerService.get('default').layer = this.zonesLayer;
+    this.hsStylerService.save('default');
+    //this.updateZonesStyle(quantileCount);
+  }
+
+  private getSymbolizerRules(classes: number): Array<any> {
+    const colorRamp = this.QUANTILE_COLORS_MATRIX[classes - 2];
+    let rules = [];
+
+    for (let i = 0; i < colorRamp.length; i++) {
+      let ruleIdx = (i + 1).toString();
+
+      rules[i] = {
+        name: ruleIdx,
+        filter: ["==", "quantile", ruleIdx],
+        symbolizers: [
+          {
+            kind: "Fill",
+            color: colorRamp[i],
+          //  opacity: 0,
+          //  outlineColor: "#505050",
+          //  outlineWidth: 1
+          }
+        ]
+      };
+    }
+
+    return rules;
   }
 
   private updateZonesStyle(classes: number) {

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.'
+    }
+  }
+};

src/styles.scss

@@ -1 +1,7 @@
 /* You can add global styles to this file, and also import other style files */
+
+/* Importing Bootstrap SCSS file. */
+@import "~bootstrap/scss/bootstrap";
+
+/* Importing Datepicker SCSS file. */
+@import "node_modules/ngx-bootstrap/datepicker/bs-datepicker";