Add area to selected-item-cropfield
This commit is contained in:
		| @@ -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; | ||||||
|   } |   } | ||||||
| } | } | ||||||
|   | |||||||
| @@ -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> <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> | ||||||
|   | |||||||
| @@ -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); | ||||||
|  |   } | ||||||
|  | } | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user