🐛 calendar tweaks

package-lock.json

@@ -9,7 +9,9 @@
       "version": "0.4.2",
       "license": "MIT",
       "dependencies": {
-        "hslayers-ng": "9.2.0"
+        "bootstrap": "^5.1.3",
+        "hslayers-ng": "9.2.0",
+        "ngx-bootstrap": "^8.0.0"
       },
       "devDependencies": {
         "@angular-builders/custom-webpack": "^13.0.0",
@@ -432,6 +434,21 @@
         "typescript": "*"
       }
     },
+    "node_modules/@angular/animations": {
+      "version": "13.3.11",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.3.11.tgz",
+      "integrity": "sha512-KE/3RuvixHIk9YTSwaUsezsUm9Ig9Y8rZMpHOT/8bRtzPiJ5ld2GnDHjrJgyZn7TdoP4wz4YCta5eC4ycu+KCw==",
+      "peer": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.15.0 || >=16.10.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "13.3.11"
+      }
+    },
     "node_modules/@angular/cdk": {
       "version": "13.3.9",
       "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.9.tgz",
@@ -5165,7 +5182,6 @@
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
       "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/bootstrap"
@@ -11739,6 +11755,21 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/ngx-bootstrap": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-8.0.0.tgz",
+      "integrity": "sha512-UjJ/57Pr7ctdI2L113QX1IqJPYtOMrp5Qq/RLvUT1TOwPQWPi9LXTQ/7BtipkptQjer7Fk9yueITH3Y8vD+Dmg==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/animations": "^13.0.0",
+        "@angular/common": "^13.0.0",
+        "@angular/core": "^13.0.0",
+        "@angular/forms": "^13.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/ngx-color": {
       "version": "7.3.3",
       "resolved": "https://registry.npmjs.org/ngx-color/-/ngx-color-7.3.3.tgz",
@@ -16711,6 +16742,15 @@
         "@typescript-eslint/experimental-utils": "5.27.1"
       }
     },
+    "@angular/animations": {
+      "version": "13.3.11",
+      "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-13.3.11.tgz",
+      "integrity": "sha512-KE/3RuvixHIk9YTSwaUsezsUm9Ig9Y8rZMpHOT/8bRtzPiJ5ld2GnDHjrJgyZn7TdoP4wz4YCta5eC4ycu+KCw==",
+      "peer": true,
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@angular/cdk": {
       "version": "13.3.9",
       "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-13.3.9.tgz",
@@ -20198,7 +20238,6 @@
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
       "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
-      "peer": true,
       "requires": {}
     },
     "brace-expansion": {
@@ -25098,6 +25137,14 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "ngx-bootstrap": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-8.0.0.tgz",
+      "integrity": "sha512-UjJ/57Pr7ctdI2L113QX1IqJPYtOMrp5Qq/RLvUT1TOwPQWPi9LXTQ/7BtipkptQjer7Fk9yueITH3Y8vD+Dmg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "ngx-color": {
       "version": "7.3.3",
       "resolved": "https://registry.npmjs.org/ngx-color/-/ngx-color-7.3.3.tgz",

package.json

@@ -27,7 +27,9 @@
   },
   "homepage": "https://git.lesprojekt.cz/jmacura/fieldcalc-frontend/README.md",
   "dependencies": {
-    "hslayers-ng": "9.2.0"
+    "bootstrap": "^5.1.3",
+    "hslayers-ng": "9.2.0",
+    "ngx-bootstrap": "^8.0.0"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^13.0.0",
@@ -47,4 +49,4 @@
     "eslint-plugin-tsdoc": "^0.2.16",
     "karma-jasmine": "~5.0.1"
   }
-}
+}

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/calculator/calculator.component.html

@@ -60,13 +60,15 @@
       <!-- DATE SELECTION PART -->
       <div [hidden]="noDates()">
         {{hsLanguageService.getTranslationIgnoreNonExisting('CALCULATOR', 'selectDate')}}:&emsp;
-        <select class="form-select" [(ngModel)]="calcService.selectedDate" (ngModelChange)="updateRangeSlider($event)">
+        <!--<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" (ngModelChange)="updateSelectedDate($event)" [dayTemplate]="customDay"></ngb-datepicker>
-        <ng-template #customDay let-date="date" let-currentMonth="currentMonth" let-selected="selected" let-disabled="disabled" let-focused="focused">
+        <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"
@@ -76,15 +78,12 @@
             {{ date.day }}
           </span>
         </ng-template>
-        <!--<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>
+        <!--<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()">
-          {{
-          'CALCULATOR.getZones' | translate
-          }}
+          {{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>

src/app/calculator/calculator.component.scss

@@ -20,8 +20,26 @@
 }
 
 .has-task {
-  background-color: aquamarine;
-  padding: 7px;
-  border-radius: 15px;
+  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

@@ -102,7 +102,14 @@ export class CalculatorComponent implements HsPanelComponent, OnInit {
     return date.day > 5;
   }
 
-  hasTask(date: NgbDateStruct) {
-    return date.year == 2022 && date.month == 6 && date.day == 16;
+  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

@@ -66,10 +66,6 @@ export class CalculatorService {
     });
   }
 
-  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.apps[0].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.apps[0].proxyPrefix : '') +
+          (this.proxyEnabled() ? this.hsConfig.apps.default.proxyPrefix : '') +
             this.SERVICE_BASE_URL +
             'get_zones',
           {
@@ -189,6 +185,6 @@ export class CalculatorService {
   }
 
   private proxyEnabled(): boolean {
-    return this.hsConfig.apps[0].useProxy === undefined || this.hsConfig.apps[0].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;
       }

src/app/calculator/zones.service.ts

@@ -8,6 +8,7 @@ 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';
 
 @Injectable({providedIn: 'root'})
 export class ZonesService {
@@ -140,16 +141,18 @@ export class ZonesService {
     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);
+    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.save(null);
-    this.updateZonesStyle(quantileCount);
+    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> {
@@ -166,9 +169,9 @@ export class ZonesService {
           {
             kind: "Fill",
             color: colorRamp[i],
-            opacity: 0.5,
-            outlineColor: "#505050",
-            outlineWidth: 1
+          //  opacity: 0,
+          //  outlineColor: "#505050",
+          //  outlineWidth: 1
           }
         ]
       };

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";