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

@@ -1,30 +1,43 @@
-import { Component, Input, Injectable, OnInit } from '@angular/core';
+import { Component, Input, Injectable, OnInit } from '@angular/core';
-import { Location } from '@angular/common';
+import { Location } from '@angular/common';
-import { Feature } from 'ol';
+import { Feature } from 'ol';
-import { Store } from '@ngrx/store';
+import { Store } from '@ngrx/store';
-import * as mapReducers from '../../reducers/map.reducer';
+import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers, ItemTypeService, IItem, Item, ItemService, FolderService, IListItem} from '@farmmaps/common';
+import { commonReducers, ItemTypeService, IItem, Item, ItemService, FolderService, IListItem} from '@farmmaps/common';
-import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
+import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
-import { ForItemType } from '../for-item/for-itemtype.decorator';
+import { ForItemType } from '../for-item/for-itemtype.decorator';
-import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
+import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
-import { Observable } from 'rxjs';
+import { Observable } from 'rxjs';
-
+import {GeoJSON} from 'ol/format';
-
+import {getArea} from 'ol/sphere';
-@ForItemType("vnd.farmmaps.itemtype.cropfield")
+
-@Injectable()
+
-@Component({
+@ForItemType("vnd.farmmaps.itemtype.cropfield")
-  selector: 'fm-map-selected-item-cropfield',
+@Injectable()
-  templateUrl: './selected-item-cropfield.component.html',
+@Component({
-  styleUrls: ['./selected-item-cropfield.component.scss']
+  selector: 'fm-map-selected-item-cropfield',
-})
+  templateUrl: './selected-item-cropfield.component.html',
-export class SelectedItemCropfieldComponent extends AbstractSelectedItemComponent implements OnInit{
+  styleUrls: ['./selected-item-cropfield.component.scss']
-
+})
-  public items: Observable<IListItem[]>;
+export class SelectedItemCropfieldComponent extends AbstractSelectedItemComponent implements OnInit{
-
+
-  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
+  public items: Observable<IListItem[]>;
-    super(store, itemTypeService,location,router);
+
-  }
+  constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
-  ngOnInit() {
+    super(store, itemTypeService,location,router);
-    this.items = this.folderService$.getItems(this.item.code, 0, 1000);
+  }
-  }
+
-}
+  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);
+  }
+}