From 5343a4aa98e198abcaaf4d5c5743a01e0af70286 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Mon, 2 Mar 2020 13:48:10 +0100 Subject: [PATCH] Basic working version --- .../src/fm-map/common-map.module.ts | 6 +++ .../aol/item-layers/item-layers.component.ts | 9 ++-- .../fm-map/components/map/map.component.html | 2 +- .../selected-item-container.component.ts | 6 +++ .../selected-item-temporal.component.html | 30 +++++++++++ .../selected-item-temporal.component.scss | 41 +++++++++++++++ .../selected-item-temporal.component.ts | 51 +++++++++++++++++++ .../selected-item/selected-item.component.ts | 2 + .../src/fm-map/models/item.layer.ts | 8 +-- .../src/fm-map/reducers/map.reducer.ts | 10 +++- 10 files changed, 154 insertions(+), 11 deletions(-) create mode 100644 projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html create mode 100644 projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.scss create mode 100644 projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts diff --git a/projects/common-map/src/fm-map/common-map.module.ts b/projects/common-map/src/fm-map/common-map.module.ts index aa84e50..2f51d1b 100644 --- a/projects/common-map/src/fm-map/common-map.module.ts +++ b/projects/common-map/src/fm-map/common-map.module.ts @@ -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 } diff --git a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts index d1b4ed8..7fa7117 100644 --- a/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts +++ b/projects/common-map/src/fm-map/components/aol/item-layers/item-layers.component.ts @@ -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); } } } diff --git a/projects/common-map/src/fm-map/components/map/map.component.html b/projects/common-map/src/fm-map/components/map/map.component.html index f6ed7ac..9567fe2 100644 --- a/projects/common-map/src/fm-map/components/map/map.component.html +++ b/projects/common-map/src/fm-map/components/map/map.component.html @@ -57,7 +57,7 @@
- +
Cannot find {{state.queryState?.query}}
diff --git a/projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts b/projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts index 5681c68..9e7ebef 100644 --- a/projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts +++ b/projects/common-map/src/fm-map/components/selected-item-container/selected-item-container.component.ts @@ -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); (componentRef.instance).item = this.item; + (componentRef.instance).itemLayer = this.itemLayer; } ngOnChanges(changes: SimpleChanges) { if (changes["item"] && changes["item"].currentValue) { this.loadComponent(); } + if (changes["itemLayer"] && changes["itemLayer"].currentValue) { + this.loadComponent(); + } } } diff --git a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html new file mode 100644 index 0000000..87afb35 --- /dev/null +++ b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.html @@ -0,0 +1,30 @@ +
+
+
+
+
Back
+
+

{{item.name}}

+
+
+
+
+ +
+ +
+
+
+ +
+
+
+
diff --git a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.scss b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.scss new file mode 100644 index 0000000..0dc571f --- /dev/null +++ b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.scss @@ -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; +} + diff --git a/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts new file mode 100644 index 0000000..1230b6d --- /dev/null +++ b/projects/common-map/src/fm-map/components/selected-item-temporal/selected-item-temporal.component.ts @@ -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, 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(); + } +} diff --git a/projects/common-map/src/fm-map/components/selected-item/selected-item.component.ts b/projects/common-map/src/fm-map/components/selected-item/selected-item.component.ts index 2fee740..9d05620 100644 --- a/projects/common-map/src/fm-map/components/selected-item/selected-item.component.ts +++ b/projects/common-map/src/fm-map/components/selected-item/selected-item.component.ts @@ -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, public itemTypeService: ItemTypeService, private location: Location, private router: Router) { } diff --git a/projects/common-map/src/fm-map/models/item.layer.ts b/projects/common-map/src/fm-map/models/item.layer.ts index b1391a7..29a5b04 100644 --- a/projects/common-map/src/fm-map/models/item.layer.ts +++ b/projects/common-map/src/fm-map/models/item.layer.ts @@ -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) } } diff --git a/projects/common-map/src/fm-map/reducers/map.reducer.ts b/projects/common-map/src/fm-map/reducers/map.reducer.ts index 47c0efd..20ef8a9 100644 --- a/projects/common-map/src/fm-map/reducers/map.reducer.ts +++ b/projects/common-map/src/fm-map/reducers/map.reducer.ts @@ -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 {