💄 tune GUI of the calc panel

src/app/calculator/calculator.component.html

@@ -1,4 +1,4 @@
-<div [hidden]="!isVisible()" class="card mainpanel">
+<div [hidden]="!isVisible()" class="card hs-main-panel">
   <hs-panel-header name="adjuster" [title]="'CALCULATOR.panelHeader' | translate">
     <extra-buttons>
       <!-- LOADER -->
@@ -9,7 +9,7 @@
     </extra-buttons>
   </hs-panel-header>
   <div class="card-body">
-    <div class="p-2 center-block">
+    <div class="p-4 m-auto">
       <!-- FIELD & INDEX SELECTION PART -->
       <div *ngIf="!noFieldSelected(); else noField">
         <p *ngIf="data.selectedFieldsProperties.length === 1; else moreFields">
@@ -27,38 +27,38 @@
       <ng-template #noField>
         <div>
           <p class="p-1 text-info">{{ 'CALCULATOR.selectField' | translate}}</p>
-          </div>
+        </div>
       </ng-template>
       <p class="p-1 text-warning" *ngIf="!lpisWfsVisible"><i class="icon-warning-sign"></i>&nbsp;{{ 'CALCULATOR.zoomIn' | translate}}</p>
-      <div>
+      <!--<div *ngIf="noFieldSelected()">
         <p class="p-1 text-info">{{ 'CALCULATOR.selectMore' | translate}}</p>
-      </div>
-      <div>
-        {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectQuantiles', {quantileCount:
-        calcService.quantileCount})}}:&emsp;
-        <input type="range" min="2" max="10" step="1" [(ngModel)]="calcService.quantileCount">
-      </div>
-      <div>
-        {{ 'CALCULATOR.selectBlur' | translate}}:&emsp;{{calcService.blurValue}}&nbsp;px <span
-          *ngIf="calcService.blurValue === 0">({{ 'CALCULATOR.blurNone' | translate}})</span>
-        <input type="range" min="{{calcService.BLUR_MIN_VALUE}}" max="{{calcService.BLUR_MAX_VALUE}}" step="1"
-          [(ngModel)]="calcService.blurValue">
-      </div>
-      <div>
+      </div>-->
+      <div class="form-group">
         {{ 'CALCULATOR.selectIndex' | translate}}:&emsp;
         <select class="form-select" [(ngModel)]="data.selectedProduct" (ngModelChange)="resetDate()">
+          <option selected disabled [ngValue]="null">{{ 'CALCULATOR.selectIndexHint' | translate}}</option>
           <option *ngFor="let product of calcService.AVAILABLE_PRODUCTS" [ngValue]="product">{{product}}</option>
         </select>
       </div>
-      <div class="d-flex">
-        <div>
-          <button type="button" class="btn btn-primary btn-lg" (click)="getDates()"
-            [disabled]="noFieldSelected() || noProductSelected()">{{ 'CALCULATOR.getDates' | translate}}</button>
-        </div>
+      <div class="form-group">
+        <label>{{ 'CALCULATOR.selectQuantiles' | translate }}:&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>
+        </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}}
+          <div class="spinner-border spinner-sm mx-2" role="status" *ngIf="calcService.datesLoading" aria-hidden="true">
+            <span class="visually-hidden">{{ 'CALCULATOR.loading' | translate }}...</span>
+          </div>
+        </button>
         <!-- LOADER -->
-        <div class="spinner-border spinner mx-2" role="status" *ngIf="calcService.datesLoading" aria-hidden="true">
-          <span class="visually-hidden">{{ 'CALCULATOR.loading' | translate }}...</span>
-        </div>
       </div>
       <!-- DATE SELECTION PART -->
       <div [hidden]="noDates()">
@@ -67,11 +67,18 @@
           <option *ngFor="let date of calcService.availableDates" [ngValue]="date">{{date}}</option>
         </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>
+
         <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>
+        <button type="button" class="btn btn-primary btn-lg" (click)="getZones()" [disabled]="noDateSelected()">
+          {{
+          'CALCULATOR.getZones' | translate
+          }}
+        </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>

src/app/calculator/calculator.component.ts

@@ -1,4 +1,4 @@
-import {Component, ViewRef} from '@angular/core';
+import { Component, OnInit, ViewRef} from '@angular/core';
 
 import {
   HsLanguageService,
@@ -15,7 +15,7 @@ import {FieldService} from './field.service';
   templateUrl: './calculator.component.html',
   styleUrls: ['./calculator.component.scss'],
 })
-export class CalculatorComponent implements HsPanelComponent {
+export class CalculatorComponent implements HsPanelComponent, OnInit {
   data: {
     selectedProduct: Index;
     selectedFieldsProperties: {[x: string]: any}[];
@@ -30,6 +30,7 @@ export class CalculatorComponent implements HsPanelComponent {
     public hsLanguageService: HsLanguageService,
     public hsLayoutService: HsLayoutService
   ) {
+
     this.fieldService.fieldSelects.subscribe(({features}) => {
       this.data.selectedFieldsProperties = [];
       for (const feature of features) {
@@ -44,6 +45,9 @@ export class CalculatorComponent implements HsPanelComponent {
       this.lpisWfsVisible = false;
     });
   }
+  ngOnInit() {
+    this.data.selectedProduct = null;
+  }
 
   isVisible(): boolean {
     return this.hsLayoutService.panelVisible('calculator');
@@ -54,7 +58,7 @@ export class CalculatorComponent implements HsPanelComponent {
   }
 
   noProductSelected(): boolean {
-    return this.data.selectedProduct === undefined;
+    return this.data.selectedProduct === null;
   }
 
   noDates(): boolean {

src/app/calculator/calculator.service.ts

@@ -1,7 +1,8 @@
 import {HttpClient} from '@angular/common/http';
 import {Injectable} from '@angular/core';
 import {Subject} from 'rxjs';
-import {catchError} from 'rxjs/operators';
+import { catchError } from 'rxjs/operators';
+import { NgbDateStruct, NgbCalendar } from '@ng-bootstrap/ng-bootstrap';
 
 import {
   HsConfig,
@@ -31,6 +32,7 @@ export class CalculatorService {
   lpisLoading = false;
   quantileCount = 4;
   selectedDate: string;
+  selectedDateCalendar: NgbDateStruct;
   viewChanges: Subject<any> = new Subject();
   //selectedProduct;
   private _datesLoading: boolean;
@@ -44,7 +46,8 @@ export class CalculatorService {
     private hsMapService: HsMapService,
     private hsToastService: HsToastService,
     private httpClient: HttpClient,
-    private zonesService: ZonesService
+    private zonesService: ZonesService,
+    private calendar: NgbCalendar
   ) {
     this.dateRangeSelects.subscribe(({date}) => {
       this.selectedDate = date;
@@ -63,6 +66,10 @@ export class CalculatorService {
     });
   }
 
+  selectToday() {
+    this.selectedDateCalendar = this.calendar.getToday();
+  }
+
   noDates(): boolean {
     return this.availableDates === undefined;
   }

src/app/translations.json

@@ -9,14 +9,16 @@
       "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": "Chci vyhlazení",
+      "selectBlur": "Vyhlazení hran zón",
       "selectDate": "Chci datum",
-      "selectField": "Pole vyberte kliknutím do mapy.",
+      "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",
-      "selectIndex": "Chci vypočítat index",
-      "selectQuantiles": "Chci {{quantileCount}} kvantilů",
+      "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."
     }
   },
@@ -30,14 +32,16 @@
       "errorLoadingZones": "It was not possible to load field zones from the server. Please, try again later.",
       "loading": "Loading",
       "panelHeader": "Field calculation",
-      "selectBlur": "I want to smooth by",
+      "selectBlur": "Smoothing zone edges",
       "selectDate": "I want a date",
-      "selectField": "Select a field by clicking in the map.",
+      "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",
-      "selectIndex": "I want to calculate index",
-      "selectQuantiles": "I want {{quantileCount}} quantiles",
+      "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."
     }
   }