♻️ detach field manipulation into separate service

src/app/app.component.ts

@@ -12,7 +12,7 @@ import {HsConfig, HsEventBusService, HsToastService} from 'hslayers-ng';
 
 import i18n from './translations.json';
 import {AppService} from './app.service';
-import {CalculatorService} from './calculator/calculator.service';
+import {FieldService} from './calculator/field.service';
 
 proj4.defs(
   'EPSG:3045',
@@ -35,7 +35,7 @@ export class AppComponent {
   title = 'hslayers-application';
   constructor(
     private appService: AppService,
-    private calculatorService: CalculatorService,
+    private fieldService: FieldService,
     /* Inject here all modules from HSLayers-NG which you intend to use */
     public hsConfig: HsConfig,
     private hsEventBusService: HsEventBusService,
@@ -147,7 +147,7 @@ export class AppComponent {
             sld: fieldSld,
             //path: 'User generated',
           },
-          source: this.calculatorService.field,
+          source: this.fieldService.field,
         }),
       ],
       translationOverrides: i18n,

src/app/calculator/calculator.component.ts

@@ -1,8 +1,10 @@
 import {Component, ViewRef} from '@angular/core';
 
+// eslint-disable-next-line import/named
 import {HsLayoutService, HsPanelComponent} from 'hslayers-ng';
 
 import {CalculatorService, Index} from './calculator.service';
+import {FieldService} from './field.service';
 
 @Component({
   selector: 'calculator-panel',
@@ -17,6 +19,7 @@ export class CalculatorComponent implements HsPanelComponent {
 
   constructor(
     public calcService: CalculatorService,
+    private fieldService: FieldService,
     public hsLayoutService: HsLayoutService
   ) {}
 
@@ -25,7 +28,7 @@ export class CalculatorComponent implements HsPanelComponent {
   }
 
   noFieldSelected(): boolean {
-    return this.calcService.noFieldSelected();
+    return this.fieldService.noFieldSelected();
   }
 
   noProductSelected(): boolean {
@@ -41,10 +44,14 @@ export class CalculatorComponent implements HsPanelComponent {
   }
 
   getDates() {
+    //TODO: temporary hard-coded hack
+    this.fieldService.selectedField = this.fieldService.field;
     this.calcService.getDates({product: this.data.selectedProduct});
   }
 
   getZones() {
+    //TODO: temporary hard-coded hack
+    this.fieldService.selectedField = this.fieldService.field1GeoJSON;
     this.calcService.getZones({
       product: this.data.selectedProduct,
     });

src/app/calculator/calculator.service.ts

@@ -3,14 +3,9 @@ import {Injectable} from '@angular/core';
 import {Subject} from 'rxjs';
 import {catchError} from 'rxjs/operators';
 
-import {GeoJSON} from 'ol/format';
-import {Geometry} from 'ol/geom';
-import {Vector as VectorSource} from 'ol/source';
-import {getCenter} from 'ol/extent';
-import {transform} from 'ol/proj';
-
 import {HsConfig} from 'hslayers-ng';
 
+import {FieldService} from './field.service';
 import {ZonesService} from './zones.service';
 
 export type Index = 'EVI' | 'RVI4S1';
@@ -21,56 +16,23 @@ export class CalculatorService {
   availableProducts = ['EVI', 'RVI4S1'];
   dateRangeSelects: Subject<{date: string}> = new Subject();
   dateCalendarSelects: Subject<{date: string}> = new Subject();
-  field: VectorSource<Geometry>;
   selectedDate;
-  selectedField;
   //selectedProduct;
   serviceBaseUrl = 'https://fieldcalc.lesprojekt.cz/';
-  //TODO: temporarry hard-coded hack
-  fieldGeoJSON = {
-    type: 'Polygon',
-    coordinates: [
-      [
-        [17.008032903697003, 49.259378350222214],
-        [17.012346093160815, 49.26055145480218],
-        [17.01341275235608, 49.25661998865008],
-        [17.01578237120672, 49.251834177355896],
-        [17.01243531034079, 49.24966645404407],
-        [17.009126895621744, 49.24897297823598],
-        [17.003117114964958, 49.253454830509305],
-        [17.008032903697003, 49.259378350222214],
-      ],
-    ],
-  };
-  //[[[17.01403296191603, 49.24858329768389], [17.014029303734432, 49.24849340104692], [17.01389198448605, 49.2484957958039], [17.013754665219444, 49.24849819039773], [17.013751007554088, 49.248408293744056], [17.013613688518262, 49.24841068816722], [17.013476369464207, 49.24841308242727], [17.013469055184203, 49.248233289084894], [17.01333173660994, 49.24823568316671], [17.01319441801745, 49.24823807708539], [17.013183448228144, 49.24796838701452], [17.013320766073623, 49.24796599311847], [17.01331710926463, 49.247876096432506], [17.013729061944726, 49.24786891378824], [17.01373271950072, 49.24795881045155], [17.0138700372733, 49.24795641590298], [17.013873695096525, 49.24804631255717], [17.014285649051903, 49.24803912791008], [17.014281990481678, 49.247949231278554], [17.014419308181342, 49.247946836077475], [17.014422967000566, 49.24803673270145], [17.015246874309636, 49.24802235802403], [17.015384192130647, 49.24801996167353], [17.01540249521542, 49.24846944450495], [17.01526517614939, 49.248471840893245], [17.01526151574496, 49.24838194432262], [17.015124196909692, 49.24838434054022], [17.015127857065117, 49.248474237118394], [17.01457858054565, 49.248483820387705], [17.014582239723282, 49.248573716994485], [17.01403296191603, 49.24858329768389]]]};
   private _datesLoading: boolean;
   private _zonesLoading: boolean;
 
   constructor(
+    private fieldService: FieldService,
     private hsConfig: HsConfig,
     private httpClient: HttpClient,
     private zonesService: ZonesService
   ) {
-    //TODO: temporary hard-coded hack
-    this.field = new VectorSource({
-      features: [
-        new GeoJSON().readFeature(this.fieldGeoJSON, {
-          dataProjection: 'EPSG:4326',
-          featureProjection: 'EPSG:5514',
-        }),
-      ],
-    });
-    //TODO: temporary hard-coded hack
-    this.selectedField = this.field;
     this.dateRangeSelects.subscribe(({date}) => {
       this.selectedDate = date;
     });
   }
 
-  noFieldSelected(): boolean {
-    return this.selectedField === undefined;
-  }
-
   noDates(): boolean {
     return this.availableDates === undefined;
   }
@@ -81,8 +43,6 @@ export class CalculatorService {
   async getDates({product}: {product: Index}) {
     this.availableDates = undefined;
     this._datesLoading = true;
-    //TODO: temporary hard-coded hack
-    this.selectedField = this.field;
     try {
       const data = await this.httpClient
         .get<{dates: string[]}>(
@@ -92,7 +52,7 @@ export class CalculatorService {
             'product=' +
             product +
             '&centroid=' +
-            JSON.stringify(this.getCentroidOfField(this.selectedField))
+            JSON.stringify(this.fieldService.getSelectedFieldCentroid())
         )
         .toPromise();
       this._datesLoading = false;
@@ -110,17 +70,6 @@ export class CalculatorService {
     }
   }
 
-  getCentroidOfField(field) {
-    return {
-      type: 'Point',
-      coordinates: transform(
-        getCenter(field.getExtent()),
-        'EPSG:5514',
-        'EPSG:4326'
-      ),
-    };
-  }
-
   get datesLoading() {
     return this._datesLoading;
   }
@@ -134,8 +83,6 @@ export class CalculatorService {
    */
   async getZones({product}: {product: Index}) {
     this._zonesLoading = true;
-    //TODO: temporary hard-coded hack
-    this.selectedField = this.fieldGeoJSON;
     try {
       const data = await this.httpClient
         .post(
@@ -146,7 +93,7 @@ export class CalculatorService {
             product,
             date: this.selectedDate,
             format: 'geojson',
-            geometry: this.selectedField,
+            geometry: this.fieldService.selectedField,
           },
           {
             headers: {

src/app/calculator/field.service.ts

@@ -0,0 +1,63 @@
+import {Injectable} from '@angular/core';
+
+import {GeoJSON} from 'ol/format';
+import {Geometry} from 'ol/geom';
+import {Vector as VectorSource} from 'ol/source';
+import {getCenter} from 'ol/extent';
+import {transform} from 'ol/proj';
+
+@Injectable({providedIn: 'root'})
+export class FieldService {
+  field: VectorSource<Geometry>;
+  //TODO: temporarry hard-coded hack
+  field1GeoJSON = {
+    type: 'Polygon',
+    coordinates: [
+      [
+        [17.008032903697003, 49.259378350222214],
+        [17.012346093160815, 49.26055145480218],
+        [17.01341275235608, 49.25661998865008],
+        [17.01578237120672, 49.251834177355896],
+        [17.01243531034079, 49.24966645404407],
+        [17.009126895621744, 49.24897297823598],
+        [17.003117114964958, 49.253454830509305],
+        [17.008032903697003, 49.259378350222214],
+      ],
+    ],
+  };
+  //[[[17.01403296191603, 49.24858329768389], [17.014029303734432, 49.24849340104692], [17.01389198448605, 49.2484957958039], [17.013754665219444, 49.24849819039773], [17.013751007554088, 49.248408293744056], [17.013613688518262, 49.24841068816722], [17.013476369464207, 49.24841308242727], [17.013469055184203, 49.248233289084894], [17.01333173660994, 49.24823568316671], [17.01319441801745, 49.24823807708539], [17.013183448228144, 49.24796838701452], [17.013320766073623, 49.24796599311847], [17.01331710926463, 49.247876096432506], [17.013729061944726, 49.24786891378824], [17.01373271950072, 49.24795881045155], [17.0138700372733, 49.24795641590298], [17.013873695096525, 49.24804631255717], [17.014285649051903, 49.24803912791008], [17.014281990481678, 49.247949231278554], [17.014419308181342, 49.247946836077475], [17.014422967000566, 49.24803673270145], [17.015246874309636, 49.24802235802403], [17.015384192130647, 49.24801996167353], [17.01540249521542, 49.24846944450495], [17.01526517614939, 49.248471840893245], [17.01526151574496, 49.24838194432262], [17.015124196909692, 49.24838434054022], [17.015127857065117, 49.248474237118394], [17.01457858054565, 49.248483820387705], [17.014582239723282, 49.248573716994485], [17.01403296191603, 49.24858329768389]]]};
+  selectedField;
+
+  constructor() {
+    //TODO: temporary hard-coded hack
+    this.field = new VectorSource({
+      features: [
+        new GeoJSON().readFeature(this.field1GeoJSON, {
+          dataProjection: 'EPSG:4326',
+          featureProjection: 'EPSG:5514',
+        }),
+      ],
+    });
+    //TODO: temporary hard-coded hack
+    this.selectedField = this.field;
+  }
+
+  noFieldSelected(): boolean {
+    return this.selectedField === undefined;
+  }
+
+  getCentroidOfField(field) {
+    return {
+      type: 'Point',
+      coordinates: transform(
+        getCenter(field.getExtent()),
+        'EPSG:5514',
+        'EPSG:4326'
+      ),
+    };
+  }
+
+  getSelectedFieldCentroid() {
+    return this.getCentroidOfField(this.selectedField);
+  }
+}