✨ add calculator panel with mocks

src/app/app.component.ts

@@ -1,6 +1,9 @@
 import {Component} from '@angular/core';
 
-import {GeoJSON} from 'ol/format';
+import proj4 from 'proj4';
+import {get as getProjection, transform} from 'ol/proj';
+import {register} from 'ol/proj/proj4';
+import {View} from 'ol';
 import {OSM, Vector as VectorSource} from 'ol/source';
 import {Tile, Vector as VectorLayer} from 'ol/layer';
 
@@ -10,51 +13,34 @@ import {
   HsToastService
 } from 'hslayers-ng';
 
+import {AppService} from './app.service';
+
+proj4.defs(
+  'EPSG:3045',
+  '+proj=utm +zone=33 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs'
+);
+proj4.defs(
+  'EPSG:5514',
+  '+proj=krovak +lat_0=49.5 +lon_0=24.83333333333333 +alpha=30.28813972222222 +k=0.9999 +x_0=0 +y_0=0 +ellps=bessel +towgs84=542.5,89.2,456.9,5.517,2.275,5.516,6.96 +units=m +no_defs'
+);
+register(proj4);
+
 @Component({
   selector: 'application-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.sass'],
 })
-export class HslayersAppComponent {
+export class AppComponent {
+  sjtskProjection = getProjection('EPSG:5514');
   /* You can name your app as you like or not at all */
   title = 'hslayers-application';
   constructor(
+    private appService: AppService,
     /* Inject here all modules from HSLayers-NG which you intend to use */
     public hsConfig: HsConfig,
     private hsEventBusService: HsEventBusService,
     private hsToastService: HsToastService,
   ) {
-    /* Define a geometry of one square polygon */
-    const geojsonObject = {
-      'type': 'FeatureCollection',
-      'crs': {
-        'type': 'name',
-        'properties': {
-          'name': 'EPSG:3857',
-        },
-      },
-      'features': [
-        {
-          'type': 'Feature',
-          'geometry': {
-            'type': 'Polygon',
-            'coordinates': [
-              [
-                [1e6, 6e6],
-                [1e6, 8e6],
-                [3e6, 8e6],
-                [3e6, 6e6],
-                [1e6, 6e6],
-              ],
-            ],
-          },
-          'properties': {
-            'name': 'Poly 1',
-            'population': Math.floor(Math.random() * 100000),
-          },
-        },
-      ],
-    };
     /* Define the polygon's style using SLD */
     const polygonSld = `<?xml version="1.0" encoding="ISO-8859-1"?>
       <StyledLayerDescriptor version="1.0.0" 
@@ -98,14 +84,22 @@ export class HslayersAppComponent {
           type: 'micka',
         },
       ],
+      default_view: new View({
+        projection: this.sjtskProjection,
+        center: transform([16.944, 49.228], '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')
+      proxyPrefix: window.location.hostname.includes('localhost')
         ? `${window.location.protocol}//${window.location.hostname}:8085/`
         : '/proxy/',
-      */
-      useProxy: false,
+      //useProxy: false,
       panelsEnabled: {
-        tripPlanner: true,
+        composition_browser: false,
+        info: false,
+        saveMap: false,
+        legend: false,
+        tripPlanner: false,
       },
       componentsEnabled: {
         basemapGallery: true,
@@ -118,7 +112,7 @@ export class HslayersAppComponent {
         {name: 'mountain', url: '/assets/icons/mountain42.svg'},
         {name: 'warning', url: '/assets/icons/warning.svg'},
       ],
-      popUpDisplay: 'hover',
+      popUpDisplay: 'none',
       default_layers: [
         /* One baselayer */
         new Tile({
@@ -133,26 +127,21 @@ export class HslayersAppComponent {
         /* One thematic layer */
         new VectorLayer({
           properties: {
-            title: 'Polygon vector layer',
+            title: 'Farma',
             synchronize: false,
             cluster: false,
             inlineLegend: true,
-            popUp: {
-              attributes: ['population'],
-            },
             editor: {
               editable: true,
               defaultAttributes: {
-                name: 'New polygon',
+                name: 'Moje farma',
                 description: 'none',
               },
             },
             sld: polygonSld,
-            path: 'User generated',
+            //path: 'User generated',
           },
-          source: new VectorSource({
-            features: new GeoJSON().readFeatures(geojsonObject),
-          }),
+          source: new VectorSource(),
         }),
       ],
     });

src/app/app.module.ts

@@ -1,13 +1,14 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 
-import {HslayersAppComponent} from './app.component';
+import {AppComponent} from './app.component';
 import {HslayersModule} from 'hslayers-ng';
+import {CalculatorModule} from './calculator/calculator.module';
 
 @NgModule({
-  declarations: [HslayersAppComponent],
-  imports: [BrowserModule, HslayersModule],
+  declarations: [AppComponent],
+  imports: [BrowserModule, HslayersModule, CalculatorModule],
   providers: [],
-  bootstrap: [HslayersAppComponent],
+  bootstrap: [AppComponent],
 })
 export class AppModule {}

src/app/app.service.ts

@@ -0,0 +1,42 @@
+import {Injectable} from '@angular/core';
+
+import {
+  HsConfig,
+  HsEventBusService,
+  HsLanguageService,
+  HsLayerManagerService,
+  HsLayoutService,
+  HsPanelContainerService,
+  HsSidebarService
+} from 'hslayers-ng';
+
+import {CalculatorComponent} from './calculator/calculator.component';
+
+@Injectable({providedIn: 'root'})
+export class AppService {
+  constructor(
+    public hsConfig: HsConfig,
+    public hsEventBus: HsEventBusService,
+    public hsLanguageService: HsLanguageService,
+    public hsLayerManagerService: HsLayerManagerService,
+    public hsLayoutService: HsLayoutService,
+    public hsPanelContainerService: HsPanelContainerService,
+    public hsSidebarService: HsSidebarService
+  ) {
+    this.hsSidebarService.buttons.push({
+      panel: 'calculator',
+      module: 'calculator',
+      order: 0,
+      title: 'Field Calculator',//() =>
+        //this.hsLanguageService.getTranslation('ADJUSTER.adjustFactors'),
+      description: 'Adjust factors for computation',
+      icon: 'icon-analytics-piechart',
+    });
+    this.hsPanelContainerService.create(CalculatorComponent, {});
+    this.hsEventBus.layoutLoads.subscribe(() => {
+      this.hsLanguageService.setLanguage('cs');
+      this.hsLayoutService.setDefaultPanel('calculator');
+    });
+  }
+  
+}

src/app/calculator/calculator.component.html

@@ -0,0 +1,28 @@
+<div [hidden]="!isVisible()" class="card mainpanel">
+  <hs-panel-header name="adjuster" [title]="'CALCULATOR.panelHeader' | translate"></hs-panel-header>
+  <div class="card-body">
+    <div class="p-2 center-block">
+      <div>
+        Chci vypočítat index:&emsp;
+        <select class="form-select" [(ngModel)]="data.selectedProduct">
+          <option *ngFor="let product of calcService.availableProducts" [ngValue]="product">{{product}}</option>
+        </select>
+      </div>
+      <div>
+        <button type="button" class="btn btn-primary btn-lg" (click)="getDates()"
+          [disabled]="noFieldSelected() || noProductSelected()">GET DATES</button>
+      </div>
+      <div [hidden]="noDates()">
+        Chci datum:&emsp;
+        <select class="form-select" [(ngModel)]="data.selectedDate">
+          <option *ngFor="let date of calcService.availableDates" [ngValue]="date">{{date}}</option>
+        </select>
+        TODO: SLIDER
+      </div>
+      <div>
+        <button type="button" class="btn btn-primary btn-lg" (click)="getZones()"
+          [disabled]="noDates()">GET ZONES</button>
+      </div>
+    </div>
+  </div>
+</div>

src/app/calculator/calculator.component.ts

@@ -0,0 +1,52 @@
+import {Component, OnInit, ViewRef} from '@angular/core';
+
+import {
+  HsLayoutService,
+  HsPanelComponent
+} from 'hslayers-ng';
+
+import {CalculatorService, Index} from './calculator.service';
+
+@Component({
+  selector: 'calculator-panel',
+  templateUrl: './calculator.component.html'
+})
+export class CalculatorComponent implements HsPanelComponent, OnInit {
+  data: {
+    selectedDate: string;
+    selectedProduct: Index;
+  };
+  name: 'calculator';
+  viewRef: ViewRef;
+
+  constructor(
+    public calcService: CalculatorService,
+    public hsLayoutService: HsLayoutService
+  ) { }
+
+  ngOnInit() {}
+
+  isVisible(): boolean {
+    return this.hsLayoutService.panelVisible('calculator');
+  }
+
+  noFieldSelected(): boolean {
+    return this.calcService.noFieldSelected();
+  }
+
+  noProductSelected(): boolean {
+    return this.data.selectedProduct === undefined;
+  }
+
+  noDates(): boolean {
+    return this.calcService.noDates();
+  }
+
+  getDates() {
+    this.calcService.getDates({product: this.data.selectedProduct});
+  }
+
+  getZones() {
+    this.calcService.getZones({product: null});
+  }
+}

src/app/calculator/calculator.module.ts

@@ -0,0 +1,24 @@
+import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
+import {TranslateModule} from '@ngx-translate/core';
+
+import {HsPanelHelpersModule} from 'hslayers-ng';
+
+import {CalculatorComponent} from './calculator.component';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [
+    CommonModule,
+    FormsModule,
+    HsPanelHelpersModule,
+    NgbModule,
+    TranslateModule,
+  ],
+  exports: [],
+  declarations: [CalculatorComponent],
+  providers: [],
+})
+export class CalculatorModule { }

src/app/calculator/calculator.service.ts

@@ -0,0 +1,58 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+
+import {HsConfig} from 'hslayers-ng';
+
+@Injectable({providedIn: 'root'})
+export class CalculatorService {
+  availableDates: Array<string>;
+  availableProducts = ['EVI', 'RVI4S1'];
+  selectedField;
+  serviceBaseUrl = 'https://fieldcalc.lesprojekt.cz/';
+  //TODO: temporary hard-coded hack
+  centroid = {type: 'Point', coordinates: [16.944, 49.228]};
+
+  constructor(
+    private hsConfig: HsConfig,
+    private httpClient: HttpClient
+    ) {
+    //TODO: temporary hard-coded hack
+    this.selectedField = this.centroid;
+  }
+  
+  noFieldSelected(): boolean {
+    return this.selectedField === undefined;
+  }
+
+  noDates(): boolean {
+    return this.availableDates === undefined;
+  }
+
+  getDates({product}: {product: Index}) {
+    this.httpClient
+      .get(
+        (this.proxyEnabled() ? this.hsConfig.proxyPrefix : '') +
+        this.serviceBaseUrl +
+        'get_dates?' +
+        'product=' +
+        product +
+        '&centroid=' +
+        JSON.stringify(this.centroid))
+      .subscribe((data: {dates: Array<string>}) => {
+        console.log('data received!')
+        console.log(data)
+        this.availableDates = data.dates ?? [];
+      }, (err) => {
+        console.error('Somethin fucked up!')
+        console.log(err)
+      })
+  }
+
+  getZones({product}: {product: Index}) {}
+
+  private proxyEnabled(): boolean {
+    return this.hsConfig.useProxy === undefined || this.hsConfig.useProxy;
+  }
+}
+
+export type Index = 'EVI' | 'RVI4S1';

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <title>HSLayers-NG application</title>
+  <title>HSLayers-NG Field Calculator</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">