FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Basic working version

Browse Source
This commit is contained in:
Willem Dantuma 2020-03-02 13:48:10 +01:00
parent 60c741d935
commit 5343a4aa98
10 changed files with 154 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
projects/common-map/src/fm-map/common-map.module.ts
View File

@ -34,6 +34,7 @@ import { AbstractItemListComponent,ItemListComponent} from './components/item-li
import { AbstractSelectedItemComponent, SelectedItemComponent } from './components/selected-item/selected-item.component';
import { SelectedItemCropfieldComponent } from './components/selected-item-cropfield/selected-item-cropfield.component';
import { SelectedItemGeotiffComponent } from './components/selected-item-geotiff/selected-item-geotiff.component';
import { SelectedItemTemporalComponent} from './components/selected-item-temporal/selected-item-temporal.component';
import {SelectedItemShapeComponent } from './components/selected-item-shape/selected-item-shape.component';
import { SelectedItemContainerComponent } from './components/selected-item-container/selected-item-container.component';
import { AbstractFeatureListFeatureComponent, FeatureListFeatureComponent } from './components/feature-list-feature/feature-list-feature.component';
@ -116,6 +117,7 @@ export {
SelectedItemComponent,
SelectedItemCropfieldComponent,
SelectedItemGeotiffComponent,
SelectedItemTemporalComponent,
SelectedItemShapeComponent,
ItemListItemComponent,
ItemListItemContainerComponent,
@ -182,6 +184,7 @@ export {
SelectedItemComponent,
SelectedItemCropfieldComponent,
SelectedItemGeotiffComponent,
SelectedItemTemporalComponent,
SelectedItemShapeComponent,
ItemListItemComponent,
ItemListItemContainerComponent,
@ -202,6 +205,7 @@ export {
SelectedItemComponent,
SelectedItemCropfieldComponent,
SelectedItemGeotiffComponent,
SelectedItemTemporalComponent,
SelectedItemShapeComponent,
ItemListComponent,
ItemListItemComponent,
@ -222,6 +226,7 @@ export {
SelectedItemComponent,
SelectedItemCropfieldComponent,
SelectedItemGeotiffComponent,
SelectedItemTemporalComponent,
SelectedItemShapeComponent,
ItemListItemComponent,
ItemListItemContainerComponent,
@ -261,6 +266,7 @@ export class AppCommonMapModule {
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemComponent, multi: true },
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemCropfieldComponent, multi: true },
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemGeotiffComponent, multi: true },
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemTemporalComponent, multi: true },
{ provide: AbstractSelectedItemComponent, useClass: SelectedItemShapeComponent, multi: true },
{ provide: AbstractItemListItemComponent, useClass: ItemListItemComponent, multi: true },
{ provide: AbstractItemListComponent, useClass: ItemListComponent, multi: true }

9
projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts
View File

@ -251,6 +251,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
}
addOrUpdateOlLayer(itemLayer:IItemLayer,index:number):Layer {
if(!itemLayer) return null;
var olLayers = this.instance.getLayers();
var layer = itemLayer.layer;
let olIndex = olLayers.getArray().indexOf(layer);
@ -284,7 +285,7 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
let selectedLayer = this.addOrUpdateOlLayer(il.selectedItemLayer,newLayers.length);
if(selectedLayer) newLayers.push(selectedLayer);
let nextLayer = this.addOrUpdateOlLayer(il.nextItemLayer,newLayers.length);
if(selectedLayer) newLayers.push(nextLayer);
if(nextLayer) newLayers.push(nextLayer);
} else {
let layer = this.addOrUpdateOlLayer(itemLayer,newLayers.length);
if(layer) newLayers.push(layer);
@ -292,10 +293,8 @@ export class ItemLayersComponent extends LayerGroupComponent implements OnChange
});
// Remove the layers that have disapeared from childrenLayers
var olLayers = this.instance.getLayers();
if (olLayers.getLength() > newLayers.length) {
for (let i = newLayers.length; i < olLayers.getLength(); i++) {
olLayers.removeAt(i);
}
while(olLayers.getLength() > newLayers.length) {
olLayers.removeAt(newLayers.length);
}
}
}

2
projects/common-map/src/fm-map/components/map/map.component.html
View File

@ -57,7 +57,7 @@
</div>
<div *ngIf="state.selectedItem;let item">
<fm-map-selected-item-container [item]="item"></fm-map-selected-item-container>
<fm-map-selected-item-container [item]="item" [itemLayer]="state.selectedItemLayer"></fm-map-selected-item-container>
</div>
<div *ngIf="state.features.length == 0" class="no-results m-2">
<div *ngIf="state.queryState.query">Cannot find <span>{{state.queryState?.query}}</span></div>

6
projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts
View File

@ -2,6 +2,7 @@ import { Component, Input, OnInit, ComponentFactoryResolver, ViewChild, SimpleCh
import { IItem } from '@farmmaps/common';
import { AbstractSelectedItemComponent, SelectedItemComponent } from '../selected-item/selected-item.component';
import { WidgetHostDirective } from '../widget-host/widget-host.directive';
import { IItemLayer } from '../../models/item.layer';
@Component({
@ -15,6 +16,7 @@ export class SelectedItemContainerComponent {
}
@Input() item: IItem;
@Input() itemLayer:IItemLayer
@ViewChild(WidgetHostDirective, { static: true }) widgetHost: WidgetHostDirective;
@ -41,11 +43,15 @@ export class SelectedItemContainerComponent {
const componentRef = viewContainerRef.createComponent(componentFactory);
(<AbstractSelectedItemComponent>componentRef.instance).item = this.item;
(<AbstractSelectedItemComponent>componentRef.instance).itemLayer = this.itemLayer;
}
ngOnChanges(changes: SimpleChanges) {
if (changes["item"] && changes["item"].currentValue) {
this.loadComponent();
}
if (changes["itemLayer"] && changes["itemLayer"].currentValue) {
this.loadComponent();
}
}
}

30
projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html Normal file
View File

@ -0,0 +1,30 @@
<div class="spacer"></div>
<div *ngIf="item;let item">
<div class="card border-0">
<div class="card-body">
<div class="mb-2"><a href="#" (click)="handleBackToList($event)" i18n>Back</a></div>
<div class="card menu-card">
<h1>{{item.name}}</h1>
</div>
<div class="legend-container" *ngIf="item?.data.layers;let layers">
<div class="card menu-card">
<div *ngIf="layers.length>1">
<select (change)="onLayerChanged($event.target.value)">
<option *ngFor="let l of layers;let layerIndex = index" [value]="layerIndex">{{l.name}}</option>
</select>
</div>
<fm-map-layer-legend [layer]="layers[selectedLayer]" [histogramenabled]="true"></fm-map-layer-legend>
</div>
</div>
<div class="card menu-card">
<ul class="p-0 mt-2">
<!--<li><a href="/api/v1/items/{{item.code}}/file" class="mt-1 mr-1" i18n><i class="fa fa-download" aria-hidden="true" title="Download"></i> Download</a></li>-->
<li *ngIf="item.isEditable"><a href="#" class="mt-1 mr-1" (click)="handleOnEdit(item)" i18n><i class="fa fa-pencil" aria-hidden="true" title="Edit"></i> Edit</a></li>
<li *ngIf="itemTypeService.isLayer(item)"><a href="#" (click)="handleAddAsLayer(item)" class="mt-1 mr-1" i18n><i class="fa fa-eye" aria-hidden="true" title="Add as layer"></i> Add as overlay</a></li>
<li *ngIf="hasNext()"><a href="#" (click)="handleNextTemporal($event)" class="mt-1 mr-1" i18n>Next</a></li>
<li *ngIf="hasPrevious()"><a href="#" (click)="handlePreviousTemporal($event)" class="mt-1 mr-1" i18n>Previous</a></li>
</ul>
</div>
</div>
</div>
</div>

41
projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.scss Normal file
View File

@ -0,0 +1,41 @@
@import "~bootstrap/scss/bootstrap.scss";
.big-icon {
width: 100%;
color: white;
font-size: 9rem;
padding: 3rem;
text-align: center;
}
.card-title {
font-size: 1rem;
}
ul {
list-style:none;
}
li {
margin-top:1rem;
}
.spacer {
display:none;
height:4rem;
}
@media screen and (min-width:44rem) {
.spacer {
display:block;
}
}
.menu-card {
margin-left: -7px;
padding-left: 7px;
margin-right: -7px;
padding-right: 7px;
margin-bottom: 7px;
}

51
projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts Normal file
View File

@ -0,0 +1,51 @@
import { Component, Injectable } from '@angular/core';
import { Location } from '@angular/common';
import { Store } from '@ngrx/store';
import * as mapReducers from '../../reducers/map.reducer';
import { commonReducers, ItemTypeService, ItemService, FolderService } from '@farmmaps/common';
import { Router } from '@angular/router';
import { ForItemType } from '../for-item/for-itemtype.decorator';
import { AbstractSelectedItemComponent } from '../selected-item/selected-item.component';
import { ITemporalItemLayer} from '../../models/item.layer';
import * as mapActions from '../../actions/map.actions';
@ForItemType("vnd.farmmaps.itemtype.temporal")
@Injectable()
@Component({
selector: 'fm-map-selected-item-temporal',
templateUrl: './selected-item-temporal.component.html',
styleUrls: ['./selected-item-temporal.component.scss']
})
export class SelectedItemTemporalComponent extends AbstractSelectedItemComponent {
constructor(store: Store<mapReducers.State | commonReducers.State>, itemTypeService: ItemTypeService, location: Location, router: Router, private itemService$: ItemService,private folderService$: FolderService) {
super(store, itemTypeService,location,router);
}
public selectedLayer: number = 0;
onLayerChanged(layerIndex: number) {
this.selectedLayer = layerIndex;
this.store.dispatch(new mapActions.SetLayerIndex(layerIndex));
}
hasNext():boolean {
let temporalItemLayer = this.itemLayer as ITemporalItemLayer;
return temporalItemLayer && temporalItemLayer.nextItemLayer != null;
}
hasPrevious():boolean {
let temporalItemLayer = this.itemLayer as ITemporalItemLayer;
return temporalItemLayer && temporalItemLayer.previousItemLayer != null;
}
handleNextTemporal(event:MouseEvent) {
this.store.dispatch(new mapActions.NextTemporal());
event.preventDefault();
}
handlePreviousTemporal(event:MouseEvent) {
this.store.dispatch(new mapActions.PreviousTemporal());
event.preventDefault();
}
}

2
projects/common-map/src/fm-map/components/selected-item/selected-item.component.ts
View File

@ -5,11 +5,13 @@ import * as mapReducers from '../../reducers/map.reducer';
import {AppConfig, commonReducers, IItem, ItemTypeService} from '@farmmaps/common';
import * as mapActions from '../../actions/map.actions';
import {Router} from '@angular/router';
import { IItemLayer } from '../../models/item.layer';
@Injectable()
export abstract class AbstractSelectedItemComponent {
@Input() item: IItem
@Input() itemLayer: IItemLayer
constructor(public store: Store<mapReducers.State | commonReducers.State>, public itemTypeService: ItemTypeService, private location: Location, private router: Router) {
}

8
projects/common-map/src/fm-map/models/item.layer.ts
View File

@ -20,8 +20,10 @@ export class ItemLayer implements IItemLayer {
public opacity: number = 1;
public layerIndex: number = -1;
constructor(item:IItem) {
constructor(item:IItem,opacity:number = 1, visible:boolean = true) {
this.item = item;
this.opacity = opacity;
this.visible = visible;
}
}
@ -38,8 +40,8 @@ export class TemporalItemLayer extends ItemLayer implements ITemporalItemLayer {
public nextItemLayer:IItemLayer = null;
public temporalItems:IItem[] = [];
constructor(item:IItem) {
super(item)
constructor(item:IItem,opacity:number = 1, visible:boolean = true) {
super(item,opacity,visible)
}
}

10
projects/common-map/src/fm-map/reducers/map.reducer.ts
View File

@ -182,7 +182,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
let selectedItemLayer=tassign(state.selectedItemLayer) as TemporalItemLayer;
selectedItemLayer.temporalItems = a.temporalItems;
selectedItemLayer.selectedItemLayer = a.temporalItems.length>0?new ItemLayer(a.temporalItems[a.temporalItems.length-1]):null;
selectedItemLayer.previousItemLayer = a.temporalItems.length>1?new ItemLayer(a.temporalItems[a.temporalItems.length-2]):null;
selectedItemLayer.previousItemLayer = a.temporalItems.length>1?new ItemLayer(a.temporalItems[a.temporalItems.length-2],0):null;
selectedItemLayer.nextItemLayer = null;
return tassign(state,{selectedItemLayer:tassign(state.selectedItemLayer,selectedItemLayer as ItemLayer)});
}
@ -194,8 +194,11 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
return state;
} else {
temporalLayer.previousItemLayer = temporalLayer.selectedItemLayer;
if( temporalLayer.previousItemLayer) temporalLayer.nextItemLayer.opacity=0;
temporalLayer.selectedItemLayer = temporalLayer.nextItemLayer;
temporalLayer.nextItemLayer = index+1 < temporalLayer.temporalItems.length? new ItemLayer(temporalLayer.temporalItems[index+1]):null;
if( temporalLayer.selectedItemLayer) temporalLayer.selectedItemLayer.opacity=1;
temporalLayer.nextItemLayer = index+1 < temporalLayer.temporalItems.length? new ItemLayer(temporalLayer.temporalItems[index+1],0):null;
if( temporalLayer.nextItemLayer) temporalLayer.nextItemLayer.opacity=0;
return tassign(state,{selectedItemLayer:tassign(state.selectedItemLayer,temporalLayer as ItemLayer)});
}
} else {
@ -210,8 +213,11 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
return state;
} else {
temporalLayer.nextItemLayer = temporalLayer.selectedItemLayer;
if( temporalLayer.nextItemLayer) temporalLayer.nextItemLayer.opacity=0;
temporalLayer.selectedItemLayer = temporalLayer.previousItemLayer;
if( temporalLayer.selectedItemLayer) temporalLayer.selectedItemLayer.opacity=1;
temporalLayer.previousItemLayer = index-1 >=0? new ItemLayer(temporalLayer.temporalItems[index-1]):null;
if( temporalLayer.previousItemLayer) temporalLayer.nextItemLayer.opacity=0;
return tassign(state,{selectedItemLayer:tassign(state.selectedItemLayer,temporalLayer as ItemLayer)});
}
} else {