fix: Better styling of the calendar and removal of unused components

src/app/app.service.ts

@@ -92,7 +92,7 @@ export class AppService {
           '&service=WFS' +
           '&VERSION=1.1.0' +
           '&REQUEST=GetFeature' +
-          '&TYPENAME=lpis_cultures' +
+          '&TYPENAME=lpis_borders' +
           '&COUNT=100' +
           '&outputformat=geojson' +
           '&SRSNAME=EPSG:5514' +

src/app/calculator/calculator.component.html

@@ -11,7 +11,7 @@
   <div class="card-body">
     <div class="p-4 m-auto">
       <!-- FIELD & INDEX SELECTION PART -->
-      <div *ngIf="!noFieldSelected(); else noField">
+      <!--<div *ngIf="!noFieldSelected(); else noField">
         <p *ngIf="data.selectedFieldsProperties.length === 1; else moreFields">
           {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectedField')}} {{data.selectedFieldsProperties[0]?.['id_dpb'] ?? '?'}}
         </p>
@@ -23,7 +23,7 @@
             </span>
           </p>
         </ng-template>
-      </div>
+      </div>-->
       <ng-template #noField>
         <div>
           <p class="p-1 text-info">{{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectField')}}</p>
@@ -59,15 +59,9 @@
       </div>
       <!-- DATE SELECTION PART -->
       <div [hidden]="noDates()">
-        {{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>-->
-        <!-- TODO: date-picker instead of select -->
-
-        <ngb-datepicker #dp [(ngModel)]="calcService.selectedDateCalendar" (ngModelChange)="updateSelectedDate($event)" 
+        <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" 
+        <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"
@@ -78,8 +72,6 @@
             {{ date.day }}
           </span>
         </ng-template>
-
-        <!--<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 form-control" (click)="getZones()" [disabled]="noDateSelected()">
@@ -90,6 +82,7 @@
           </div>
         </button>
       </div>
+      <span class="error-message">{{calcService.lastError}}</span>
     </div>
   </div>
 </div>

src/app/calculator/calculator.component.scss

@@ -20,26 +20,15 @@
 }
 
 .has-task {
-  background-color: #0dcaf0;
+  background-color: #6c757d;
   padding: 0px 5px;
   border-radius: 5px;
-  color: #000000;
+  color: #ffffff;
 }
 
-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;
+.error-message {
+  text-align: justify;
+  display: block;
+  color: crimson;
+  padding: 1.5rem;
 }

src/app/calculator/calculator.module.ts

@@ -7,7 +7,6 @@ import {TranslateModule} from '@ngx-translate/core';
 import {HsPanelHelpersModule} from 'hslayers-ng';
 
 import {CalculatorComponent} from './calculator.component';
-import {FcDateRangeSliderComponent} from './date-range-slider/date-range-slider.component';
 
 @NgModule({
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -19,7 +18,7 @@ import {FcDateRangeSliderComponent} from './date-range-slider/date-range-slider.
     TranslateModule,
   ],
   exports: [],
-  declarations: [CalculatorComponent, FcDateRangeSliderComponent],
+  declarations: [CalculatorComponent],
   providers: [],
 })
 export class CalculatorModule {}

src/app/calculator/calculator.service.ts

@@ -34,6 +34,7 @@ export class CalculatorService {
   selectedDate: string;
   selectedDateCalendar: NgbDateStruct;
   viewChanges: Subject<any> = new Subject();
+  lastError = "";
   //selectedProduct;
   private _datesLoading: boolean;
   private _zonesLoading: boolean;
@@ -126,7 +127,8 @@ export class CalculatorService {
   /**
    * Call 'get_zones' API method
    */
-  async getZones({product}: {product: Index}) {
+  async getZones({ product }: { product: Index }) {
+    this.lastError = "";
     this._zonesLoading = true;
     try {
       const data = await this.httpClient
@@ -155,20 +157,22 @@ export class CalculatorService {
       await this.zonesService.updateZones(data, {quantileCount: this.quantileCount});
       this.updateImageBackground(this.selectedDate);
     } catch (err) {
+      let errLoadingZones = this.hsLanguageService.getTranslationIgnoreNonExisting(
+        'CALCULATOR',
+        'errorLoadingZones'
+      );
       this._zonesLoading = false;
       this.hsToastService.createToastPopupMessage(
         this.hsLanguageService.getTranslationIgnoreNonExisting(
           'CALCULATOR',
           'errorLoading'
         ),
-        this.hsLanguageService.getTranslationIgnoreNonExisting(
-          'CALCULATOR',
-          'errorLoadingZones'
-        ),
+        errLoadingZones,
         {
           toastStyleClasses: 'bg-warning text-dark',
         }
       );
+      this.lastError = errLoadingZones;
       console.error('Somethin fucked up!');
       console.log(err);
     }

src/app/calculator/date-range-slider/date-range-slider.component.html

@@ -1 +0,0 @@
-<input #slider type="range" min="{{getMinInMillis()}}" max="{{getMaxInMillis()}}" step="any" (input)="pickNearestDate($event)">

src/app/calculator/date-range-slider/date-range-slider.component.ts

@@ -1,85 +0,0 @@
-import {Component, ElementRef, Input, ViewChild} from '@angular/core';
-
-import {CalculatorService} from '../calculator.service';
-
-@Component({
-  selector: 'fc-date-range-slider',
-  templateUrl: './date-range-slider.component.html',
-})
-export class FcDateRangeSliderComponent {
-  @ViewChild('slider') sliderElement: ElementRef;
-  @Input() values: Array<string>;
-
-  constructor(public calcService: CalculatorService) {
-    this.calcService.dateCalendarSelects.subscribe(({date}) => {
-      this.sliderElement.nativeElement.value =
-        this.parseISOLocal(date).getTime();
-    });
-  }
-
-  getMinInMillis() {
-    return this.parseISOLocal(this.getFirstDate()).getTime();
-  }
-
-  getMaxInMillis() {
-    return this.parseISOLocal(this.getLastDate()).getTime();
-  }
-
-  getFirstDate() {
-    return this.values?.[0] ?? '2000-01-01';
-  }
-
-  getLastDate() {
-    return this.values?.slice(-1)?.pop() ?? '3000-01-01';
-  }
-
-  // Inspired by https://stackoverflow.com/questions/8584902/get-the-closest-number-out-of-an-array
-  pickNearestDate(selected) {
-    selected = selected.target.value;
-    const nearestDate = this.values
-      .map((val) => this.parseISOLocal(val).getTime())
-      .reduce((prev, curr) => {
-        return Math.abs(curr - selected) < Math.abs(prev - selected)
-          ? curr
-          : prev;
-      });
-    this.calcService.dateRangeSelects.next({
-      date: this.dateToISOLocal(nearestDate),
-    });
-  }
-
-  // Format date as YYYY-MM-DD
-  // Inspired by https://stackoverflow.com/questions/58153053/how-can-i-create-a-slider-that-would-display-date-and-is-there-a-way-to-make-ma
-  private dateToISOLocal(dateInMillis: number) {
-    const date = new Date(dateInMillis);
-    const form = (n) => ('0' + n).slice(-2);
-    return (
-      date.getFullYear() +
-      '-' +
-      form(date.getMonth() + 1) +
-      '-' +
-      form(date.getDate()) +
-      'T' +
-      form(date.getHours()) +
-      ':' +
-      form(date.getMinutes()) +
-      ':' +
-      form(date.getSeconds())
-    );
-  }
-
-  // Parse date in YYYY-MM-DD format as local date
-  // Inspired by https://stackoverflow.com/questions/58153053/how-can-i-create-a-slider-that-would-display-date-and-is-there-a-way-to-make-ma
-  private parseISOLocal(s: string) {
-    const [y, m, d] = s.split('T')[0].split('-');
-    const [hh, mm, ss] = s.split('T')[1]?.split(':') ?? [0, 0, 0];
-    return new Date(
-      Number(y),
-      Number(m) - 1,
-      Number(d),
-      Number(hh),
-      Number(mm),
-      Number(ss)
-    );
-  }
-}

src/app/translations.ts

@@ -6,7 +6,7 @@ export const translationOverrides = {
       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.',
+      errorLoadingZones: 'Nebylo možné načíst zóny pole ze serveru. Pravděpodobně z důvodu přílišné oblačnosti snímku. Zkuste jiný datum.',
       loading: 'Načítám',
       panelHeader: 'Výpočet indexů pole',
       selectBlur: 'Vyhlazení hran zón',
@@ -29,7 +29,7 @@ export const translationOverrides = {
       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.',
+      errorLoadingZones: 'It was not possible to load field zones from the server. This is probably due to the high cloudiness of the source image. Try another date.',
       loading: 'Loading',
       panelHeader: 'Field calculation',
       selectBlur: 'Smoothing zone edges',

src/index.html

@@ -6,6 +6,35 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css">
+  <style>
+
+    ngb-datepicker-navigation-select > .form-select {
+      height: 2.5rem !important;
+    }
+
+    .ngb-dp-day {
+      width: 3.3rem !important;
+    }
+
+    .ngb-dp-weekday {
+      width: 3.1rem !important;
+    }
+
+    .bs-datepicker-body table.days span {
+      background-color: purple;
+    }
+
+    .bs-datepicker-body table.days span.disabled {
+      background-color: white !important;
+    }
+
+    .ngb-dp-weekdays {
+      color: #025797;
+      font-weight: 200;
+      max-width: 22rem;
+    }
+  </style>
 </head>
 <body style="margin: 0;">
   <application-root></application-root>