- ![]()
+ ![]()
diff --git a/projects/common-map/src/lib/components/feature-list-feature/feature-list-feature.component.ts b/projects/common-map/src/lib/components/feature-list-feature/feature-list-feature.component.ts
index a1e8c4f..d8576ff 100644
--- a/projects/common-map/src/lib/components/feature-list-feature/feature-list-feature.component.ts
+++ b/projects/common-map/src/lib/components/feature-list-feature/feature-list-feature.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, Injectable} from '@angular/core';
import { Feature } from 'ol';
import { Store } from '@ngrx/store';
import * as mapReducers from '../../reducers/map.reducer';
-import { commonReducers,ItemTypeService } from '@farmmaps/common';
+import { commonReducers,ItemTypeService,AppConfig } from '@farmmaps/common';
@@ -10,7 +10,7 @@ import { commonReducers,ItemTypeService } from '@farmmaps/common';
export abstract class AbstractFeatureListFeatureComponent {
@Input() feature: Feature
- constructor(public store: Store, public itemTypeService: ItemTypeService) {
+ constructor(public store: Store, public itemTypeService: ItemTypeService,public config:AppConfig) {
}
}
@@ -22,7 +22,7 @@ export abstract class AbstractFeatureListFeatureComponent {
})
export class FeatureListFeatureComponent extends AbstractFeatureListFeatureComponent {
- constructor(store: Store, itemTypeService: ItemTypeService) {
- super(store, itemTypeService);
+ constructor(store: Store, itemTypeService: ItemTypeService, config:AppConfig) {
+ super(store, itemTypeService,config);
}
}
diff --git a/projects/common-map/src/lib/components/map/map.component.ts b/projects/common-map/src/lib/components/map/map.component.ts
index dcea912..5df667f 100644
--- a/projects/common-map/src/lib/components/map/map.component.ts
+++ b/projects/common-map/src/lib/components/map/map.component.ts
@@ -225,7 +225,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
replaceUrl(mapState: IMapState, queryState: IQueryState, replace: boolean = true) {
//console.log(`Replace url :${mapState.baseLayerCode}`)
- this.router.navigate([".", mapState.xCenter.toFixed(5), mapState.yCenter.toFixed(5), mapState.zoom, mapState.rotation.toFixed(2), mapState.baseLayerCode, this.serializeService.serialize(queryState)], { replaceUrl: replace,relativeTo:this.route.parent.parent });
+ this.router.navigate([".", mapState.xCenter.toFixed(5), mapState.yCenter.toFixed(5), mapState.zoom, mapState.rotation.toFixed(2), mapState.baseLayerCode, this.serializeService.serialize(queryState)], { replaceUrl: replace,relativeTo:this.route.parent });
}
handleOnMoveEnd(event) {
@@ -251,8 +251,6 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
this.store.dispatch(new mapActions.CollapseSearch());
}
-
-
handleOnDownload(event) {
}
diff --git a/projects/common-map/src/lib/map.component.ts b/projects/common-map/src/lib/map.component.ts
new file mode 100644
index 0000000..7b9ba15
--- /dev/null
+++ b/projects/common-map/src/lib/map.component.ts
@@ -0,0 +1,297 @@
+import { Component, OnInit, OnDestroy, HostListener, Inject, ViewChild, AfterViewInit } from '@angular/core';
+import { Location } from '@angular/common';
+import { Observable, Subject, Subscription,combineLatest, from } from 'rxjs';
+import { debounce, withLatestFrom, first, combineAll } from 'rxjs/operators';
+import { Router, ActivatedRoute, ParamMap, Event } from '@angular/router';
+import { Store } from '@ngrx/store';
+//import { proj,Map } from 'openlayers';
+
+// Map
+import * as mapReducers from './reducers/map.reducer';
+import * as mapActions from './actions/map.actions';
+import { IMapState,ISelectedFeatures,IItemLayer, ItemLayer,IQueryState,IPeriodState } from './models';
+import { IDroppedFile } from './components/aol/file-drop-target/file-drop-target.component';
+import { IMetaData } from './components/meta-data-modal/meta-data-modal.component';
+import { StateSerializerService } from './services/state-serializer.service';
+import { GeolocationService} from './services/geolocation.service';
+
+// AppCommon
+import { ResumableFileUploadService, ItemTypeService } from '@farmmaps/common';
+import { IItemType, IItem } from '@farmmaps/common';
+import {commonReducers} from '@farmmaps/common';
+import {commonActions} from '@farmmaps/common';
+
+import {Feature} from 'ol';
+import {Extent,createEmpty,extend } from 'ol/extent';
+import {transform} from 'ol/proj';
+import { query } from '@angular/animations';
+import { tassign } from 'tassign';
+
+
+@Component({
+ selector: 'map',
+ templateUrl: './map.component.html',
+ styleUrls: ['./map.component.scss']
+})
+
+export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
+ title: string = 'Map';
+ public openedModalName: Observable;
+ public itemTypes: Observable<{ [id: string]: IItemType }>;
+ public mapState: Observable;
+ public features: Observable>;
+ public overlayLayers: Observable>;
+ public selectedOverlayLayer: Observable;
+ public selectedItemLayer: Observable;
+ public baseLayers: Observable>;
+ public selectedBaseLayer: Observable;
+ public projection: Observable;
+ public selectedFeatures: Subject = new Subject();
+ public droppedFile: Subject = new Subject();
+ private paramSub: Subscription;
+ private itemTypeSub: Subscription;
+ private mapStateSub: Subscription;
+ private queryStateSub: Subscription;
+ public parentCode: Observable;
+ public panelVisible: Observable;
+ public panelCollapsed: Observable;
+ public selectedFeature: Observable;
+ public selectedItem: Observable;
+ public queryState: Observable;
+ public period: Observable;
+ public clearEnabled: Observable;
+ public searchCollapsed: Observable;
+ public searchMinified: Observable;
+ public menuVisible: Observable;
+ public query: Observable;
+ public position: Observable;
+ public baseLayersCollapsed:boolean = true;
+ public overlayLayersCollapsed: boolean = true;
+ public extent: Observable;
+ @ViewChild('map') map;
+
+ constructor(private store: Store, private route: ActivatedRoute, private router: Router, private uploadService: ResumableFileUploadService, private serializeService: StateSerializerService, public itemTypeService: ItemTypeService, private location: Location, private geolocationService: GeolocationService ) {
+ }
+
+ @HostListener('document:keyup', ['$event'])
+ escapeClose(event: KeyboardEvent) {
+ let x = event.keyCode;
+ if (x === 27) {
+ this.handleCloseModal()
+ }
+ }
+
+ handleOpenModal(modalName: string) {
+ this.store.dispatch(new commonActions.OpenModal(modalName));
+ }
+
+ handleCloseModal() {
+ this.store.dispatch(new commonActions.CloseModal());
+ }
+
+ handleFileDropped(droppedFile: IDroppedFile) {
+ this.uploadService.addFiles(droppedFile.files, droppedFile.event, { parentCode:droppedFile.parentCode, geometry:droppedFile.geometry });
+ }
+
+ handleFeaturesSelected(feature: Feature) {
+ if (feature) {
+ let newQuery = tassign(mapReducers.initialQueryState, { itemCode: feature.get('code') });
+ this.store.dispatch(new mapActions.DoQuery(newQuery));
+ }
+ }
+
+ handleSearch(queryState: IQueryState) {
+ this.store.dispatch(new mapActions.DoQuery(queryState));
+ }
+
+ ngOnInit() {
+ this.store.dispatch(new mapActions.Init());
+ this.selectedFeatures.next({x:0,y:0,features:[]});
+ this.mapState = this.store.select(mapReducers.selectGetMapState);
+ this.parentCode = this.store.select(mapReducers.selectGetParentCode);
+ this.features = this.store.select(mapReducers.selectGetFeatures);
+ this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
+ this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
+ this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
+ this.projection = this.store.select(mapReducers.selectGetProjection);
+ this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
+ this.panelVisible = this.store.select(mapReducers.selectGetPanelVisible);
+ this.panelCollapsed = this.store.select(mapReducers.selectGetPanelCollapsed);
+ this.selectedFeature = this.store.select(mapReducers.selectGetSelectedFeature);
+ this.selectedItem = this.store.select(mapReducers.selectGetSelectedItem);
+ this.queryState = this.store.select(mapReducers.selectGetQueryState);
+ this.clearEnabled = this.store.select(mapReducers.selectGetClearEnabled);
+ this.searchCollapsed = this.store.select(mapReducers.selectGetSearchCollapsed);
+ this.searchMinified = this.store.select(mapReducers.selectGetSearchMinified);
+ this.menuVisible = this.store.select(mapReducers.selectGetMenuVisible);
+ this.openedModalName = this.store.select(commonReducers.selectOpenedModalName);
+ this.query = this.store.select(mapReducers.selectGetQuery);
+ this.extent = this.store.select(mapReducers.selectGetExtent);
+ this.selectedFeatures.next(null);
+ this.selectedItemLayer = this.store.select(mapReducers.selectGetSelectedItemLayer);
+ this.period = this.store.select(mapReducers.selectGetPeriod);
+ this.position = this.geolocationService.getCurrentPosition();
+
+ this.mapState.pipe(withLatestFrom(this.queryState)).subscribe((state) => {
+ this.replaceUrl(state[0], state[1], true);
+ });
+ this.query.pipe(withLatestFrom(this.mapState)).subscribe((state) => {
+ this.replaceUrl(state[1], state[0],false);
+ });
+ }
+
+ private stateSetCount: number = 0;
+ private lastQueryState: string = this.serializeService.serialize(mapReducers.initialQueryState);
+ private lastMapState: string = "";
+ ngAfterViewInit() {
+ this.paramSub = this.route.paramMap.subscribe((params: ParamMap) => {
+ //console.log("Param sub");
+ var newMapState: IMapState = null;
+ var newQueryState: IQueryState = null;
+ var mapStateChanged = false;
+ var queryStateChanged = false;
+ if (params.has("xCenter") && params.has("yCenter")) {
+ let xCenter = parseFloat(params.get("xCenter"));
+ let yCenter = parseFloat(params.get("yCenter"));
+ let zoom = parseFloat(params.get("zoom"));
+ let rotation = parseFloat(params.get("rotation"));
+ let baseLayer = params.get("baseLayer");
+ newMapState = { xCenter: xCenter, yCenter: yCenter, zoom: zoom, rotation: rotation, baseLayerCode: baseLayer }
+ mapStateChanged = this.lastMapState != JSON.stringify(newMapState) && this.stateSetCount == 0;
+ this.lastMapState = JSON.stringify(newMapState);
+ //console.log(`Base layer: ${newMapState.baseLayerCode}`)
+ }
+ if (params.has("queryState")) {
+ let queryState = params.get("queryState");
+ newQueryState = tassign(mapReducers.initialQueryState);
+ if (queryState != "") {
+ newQueryState = this.serializeService.deserialize(queryState);
+ }
+ queryStateChanged = this.lastQueryState != queryState;
+ this.lastQueryState = queryState;
+ }
+
+ if (mapStateChanged && queryStateChanged) {
+ //console.log("Both states");
+ this.store.dispatch(new mapActions.SetState(newMapState, newQueryState));
+ } else if (mapStateChanged) {
+ //console.log("Map state");
+ this.store.dispatch(new mapActions.SetMapState(newMapState));
+ } else if (queryStateChanged) {
+ //console.log("Query state");
+ this.store.dispatch(new mapActions.SetQueryState(newQueryState));
+ }
+ this.stateSetCount += 1;
+ });
+ setTimeout(() => {
+ this.map.instance.updateSize();
+ }, 500);
+ }
+
+ handleSearchCollapse(event) {
+ this.store.dispatch(new mapActions.CollapseSearch());
+ }
+
+ handleSearchExpand(event) {
+ this.store.dispatch(new mapActions.ExpandSearch());
+ }
+
+ handleToggleMenu(event) {
+ this.store.dispatch(new mapActions.ToggleMenu());
+ }
+
+ handleToggleBaseLayers(event:MouseEvent) {
+ this.baseLayersCollapsed = !this.baseLayersCollapsed;
+ event.preventDefault();
+ }
+
+ handleToggleOverlayLayers(event: MouseEvent) {
+ this.overlayLayersCollapsed = !this.overlayLayersCollapsed;
+ event.preventDefault();
+ }
+
+ handlePredefinedQuery(event: MouseEvent, query: any) {
+ event.preventDefault();
+ var queryState = tassign(mapReducers.initialQueryState, query);
+ this.store.dispatch(new mapActions.DoQuery(queryState));
+ }
+
+ handleTrijntjeClick(event: MouseEvent, query: any) {
+ event.preventDefault();
+ var queryState = tassign(mapReducers.initialQueryState, query);
+ var mapState = JSON.parse(this.lastMapState);
+ this.router.navigate(["app","trijntje" , mapState.xCenter.toFixed(5), mapState.yCenter.toFixed(5), mapState.zoom, mapState.rotation.toFixed(2), mapState.baseLayerCode, this.serializeService.serialize(queryState)], { replaceUrl: false });
+ }
+
+ replaceUrl(mapState: IMapState, queryState: IQueryState, replace: boolean = true) {
+ //console.log(`Replace url :${mapState.baseLayerCode}`)
+ this.router.navigate([".", mapState.xCenter.toFixed(5), mapState.yCenter.toFixed(5), mapState.zoom, mapState.rotation.toFixed(2), mapState.baseLayerCode, this.serializeService.serialize(queryState)], { replaceUrl: replace,relativeTo:this.route.parent.parent });
+ }
+
+ handleOnMoveEnd(event) {
+ var map = event.map;
+ var view = map.getView();
+ var rotation = view.getRotation();
+ var zoom = view.getZoom();
+ var center = transform(view.getCenter(), view.getProjection(), "EPSG:4326");
+ var extent = view.calculateExtent(this.map.instance.getSize());
+ let mapState: IMapState = { xCenter: center[0], yCenter: center[1], zoom: zoom, rotation: rotation, baseLayerCode: null };
+ let state = { mapState: mapState, extent: extent };
+ let source = from([state]);
+ source.pipe(withLatestFrom(this.selectedBaseLayer), withLatestFrom(this.queryState)).subscribe(([[state, baselayer], queryState]) => {
+ if (mapState && baselayer && queryState) {
+ let newMapState = tassign(state.mapState, { baseLayerCode: baselayer.item.code });
+ this.replaceUrl(newMapState, tassign(queryState, { bbox: queryState.bboxFilter ? state.extent : queryState.bbox }));
+ this.store.dispatch(new mapActions.SetViewExtent(state.extent));
+ }
+ });
+ }
+
+ handleOnMouseDown(event: MouseEvent) {
+ this.store.dispatch(new mapActions.CollapseSearch());
+ }
+
+
+
+ handleOnDownload(event) {
+
+ }
+
+ handleClearSearch(event) {
+ this.store.dispatch(new commonActions.Escape(true, false));
+ }
+
+ handleOnDelete(itemLayer: IItemLayer) {
+ this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
+ }
+
+ handleOnToggleVisibility(itemLayer: IItemLayer) {
+ this.store.dispatch(new mapActions.SetVisibility(itemLayer,!itemLayer.visible));
+ }
+
+ handleOnSetOpacity(event:{ layer: IItemLayer,opacity:number }) {
+ this.store.dispatch(new mapActions.SetOpacity(event.layer, event.opacity));
+ }
+
+ handleZoomToExtent(itemLayer: IItemLayer) {
+ var extent = createEmpty();
+ extend(extent, itemLayer.layer.getExtent());
+ if (extent) {
+ this.store.dispatch(new mapActions.SetExtent(extent));
+ }
+ }
+
+ handleSelectBaseLayer(itemLayer: IItemLayer) {
+ this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
+ }
+
+ handleSelectOverlayLayer(itemLayer: IItemLayer) {
+ this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer));
+ }
+
+ ngOnDestroy() {
+ this.paramSub.unsubscribe();
+ if (this.itemTypeSub) this.itemTypeSub.unsubscribe();
+ if (this.mapStateSub) this.mapStateSub.unsubscribe();
+ if (this.queryStateSub) this.queryStateSub.unsubscribe(); }
+}
diff --git a/projects/common/src/lib/services/itemtype.service.ts b/projects/common/src/lib/services/itemtype.service.ts
index 5304bb1..62fed20 100644
--- a/projects/common/src/lib/services/itemtype.service.ts
+++ b/projects/common/src/lib/services/itemtype.service.ts
@@ -15,7 +15,7 @@ export class ItemTypeService {
}
getIcon(itemType: string) {
- var icon = "fa-file-o";
+ var icon = "fa fa-file-o";
if (this.itemTypes[itemType]) icon = this.itemTypes[itemType].icon;
return icon;
}
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 86dee29..ad26c34 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,13 +1,28 @@
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
-import { AuthGuard } from '@farmmaps/common';
+import { AuthGuard,FullScreenGuard } from '@farmmaps/common';
+import { MapComponent} from '@farmmaps/common-map';
import { AppContentComponent} from './app-content.component';
import { AppSidePanelTestComponent } from './app-side-panel-test.component';
const routes = [
- { path: '', canLoad: [AuthGuard], component: AppContentComponent},
- { path: 'sidepanel', canLoad: [AuthGuard], component: AppSidePanelTestComponent}
+ {
+ path: '',
+ redirectTo: 'map',
+ pathMatch: 'full'
+ },
+ { path: 'sidepanel', canLoad: [AuthGuard], component: AppSidePanelTestComponent},
+ { path: 'map', canActivateChild: [AuthGuard],canActivate:[FullScreenGuard], children: [
+ {
+ path: '',
+ component: MapComponent
+ },
+ {
+ path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState',
+ component: MapComponent
+ }
+ ]},
];
@NgModule({
diff --git a/src/app/app.component.css b/src/app/app.component.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
new file mode 100644
index 0000000..4394fdc
--- /dev/null
+++ b/src/app/app.component.scss
@@ -0,0 +1,21 @@
+@import "theme.scss";
+
+$fa-font-path: "~font-awesome/fonts";
+@import "~bootstrap/scss/bootstrap.scss";
+@import "~font-awesome/scss/font-awesome.scss";
+
+:host ::ng-deep .btn:focus {
+ box-shadow:none;
+}
+
+:host ::ng-deep .input-group > .form-control:focus {
+ z-index: auto;
+}
+
+:host ::ng-deep .form-control:focus {
+ box-shadow: none;
+ border-color: $input-border-color;
+}
+
+
+
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3a9178e..eedc897 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
+ styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'farmmaps-lib-app';
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 73502dd..7712c5a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -10,6 +10,7 @@ import { AppComponent } from './app.component';
import { AppContentComponent } from './app-content.component';
import { AppSidePanelTestComponent } from './app-side-panel-test.component';
import { AppCommonModule } from '@farmmaps/common';
+import { AppCommonMapModule} from '@farmmaps/common-map';
import {StoreModule, Store} from '@ngrx/store';
import {EffectsModule, EffectSources} from '@ngrx/effects';
@@ -51,6 +52,7 @@ export function provideBootstrapEffects(effects: Type[]) {
imports: [
AppRoutingModule,
AppCommonModule.forRoot() ,
+ AppCommonMapModule.forRoot(),
BrowserModule,
StoreModule.forRoot({}),
EffectsModule.forRoot([])
diff --git a/src/app/theme.scss b/src/app/theme.scss
new file mode 100644
index 0000000..b44a9a8
--- /dev/null
+++ b/src/app/theme.scss
@@ -0,0 +1,3 @@
+//$theme-colors: ( "primary": #a7ce39, "secondary": #ffc800 );
+//$theme-colors: ( "primary": #a7ce39);
+
diff --git a/src/favicon.ico b/src/assets/favicon.ico
similarity index 100%
rename from src/favicon.ico
rename to src/assets/favicon.ico
diff --git a/src/assets/images/farmmapslogo.png b/src/assets/images/farmmapslogo.png
new file mode 100644
index 0000000..428742d
Binary files /dev/null and b/src/assets/images/farmmapslogo.png differ
diff --git a/src/assets/silent-refresh.html b/src/assets/silent-refresh.html
new file mode 100644
index 0000000..e65ce39
--- /dev/null
+++ b/src/assets/silent-refresh.html
@@ -0,0 +1,7 @@
+
+
+
+
+
diff --git a/src/configuration.json b/src/configuration.json
index 875949d..341b778 100644
--- a/src/configuration.json
+++ b/src/configuration.json
@@ -1,8 +1,8 @@
{
"issuer": "http://accounts.awtest.nl",
"clientId": "v1t",
- "audience": "http://localhost:8083/,http://awtest.nl/,http://aan.awtest.nl",
+ "audience": "http://farmmaps.awtest.nl/,http://awtest.nl/,http://aan.awtest.nl",
"requireHttps": false,
- "apiEndPoint": "http://localhost:8083"
+ "apiEndPoint": "http://farmmaps.awtest.nl"
}
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 3d6ee2f..083a46c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,7 +7,6 @@
-