Merge branch 'develop' of https://git.akkerweb.nl/FarmMaps/FarmMapsLib into develop

projects/common-map/src/fm-map/components/feature-list-feature-cropfield/feature-list-feature-cropfield.component.ts

@@ -5,6 +5,7 @@ import * as mapReducers from '../../reducers/map.reducer';
 import { commonReducers,ItemTypeService,AppConfig } from '@farmmaps/common';
 import { AbstractFeatureListFeatureComponent } from '../feature-list-feature/feature-list-feature.component';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
+import {getArea} from 'ol/sphere';
 
 
 @ForItemType("vnd.farmmaps.itemtype.cropfield")
@@ -25,6 +26,6 @@ export class FeatureListFeatureCropfieldComponent extends AbstractFeatureListFea
     // get area from faeture if 0 calculate from polygon
     let a = feature.get('area');
     if(a) return a;
-    return (feature.getGeometry().getArea() / 10000);
+    return  getArea(feature.getGeometry(),{projectio:"EPSG:3857"}) / 10000;
   }
 }

projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.html

@@ -6,8 +6,8 @@
       <div class="card menu-card">
         <h1>Cropfield</h1>
         <h4>{{item.name}}</h4>
-        <div>{{item.data.cropTypeName}}</div>
+        <div class="card-text"><span>{{areaInHa(item)| number:'1.2-2'}} ha</span>&nbsp;<span>{{item.data.cropTypeName}}</span></div>
-        <div><span>{{item.data.startDate|date}}</span> - <span>{{item.data.endDate|date}}</span> </div>
+        <div class="card-text"><span>{{item.data.startDate|date}}</span> - <span>{{item.data.endDate|date}}</span> </div>
         <ul class="p-0 mt-2">
           <li *ngIf="item.isEditable"><a href="#" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
         </ul>

projects/common-map/src/fm-map/components/selected-item-cropfield/selected-item-cropfield.component.ts

@@ -8,6 +8,8 @@ import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
 import { ForItemType } from '../for-item/for-itemtype.decorator';
 import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
 import { Observable } from 'rxjs';
+import {GeoJSON} from 'ol/format';
+import {getArea} from 'ol/sphere';
 
 
 @ForItemType("vnd.farmmaps.itemtype.cropfield")
@@ -24,7 +26,18 @@ export class SelectedItemCropfieldComponent extends AbstractSelectedItemComponen
   constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
     super(store, itemTypeService,location,router);
   }
+
+  areaInHa(item:IItem):number {
+    if(!item) return 0;
+    // get area from faeture if 0 calculate from polygon
+    let a = item.data.area;
+    if(a) return a;
+    let format = new GeoJSON();
+    let polygon = format.readGeometry(item.geometry);
+    return getArea(polygon,{projection:"EPSG:4326"}) / 10000;
+  }
+
   ngOnInit() {
-    this.items = this.folderService$.getItems(this.item.code, 0, 1000);
+    this. items = this.folderService$.getItems(this.item.code, 0, 1000);
   }
 }