Add area to selected-item-cropfield

This commit is contained in:
Willem Dantuma 2020-02-25 15:14:29 +01:00
parent d3b10d46ad
commit 38c8def43a
3 changed files with 47 additions and 33 deletions

View File

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

View File

@ -6,8 +6,8 @@
<div class="card menu-card"> <div class="card menu-card">
<h1>Cropfield</h1> <h1>Cropfield</h1>
<h4>{{item.name}}</h4> <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"> <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> <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> </ul>

View File

@ -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);
}
}