Update app to match library changes

package-lock.json

@@ -3477,9 +3477,9 @@
       }
     },
     "@farmmaps/common": {
-      "version": "0.0.1-prerelease.161",
+      "version": "0.0.1-prerelease.169",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.161.tgz",
+      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.169.tgz",
-      "integrity": "sha512-TroaPn57YupWnYm1NqjzhLnxOkk3DjE72ObfxAfa0Ez3qBSL54gfuo+Sp0t+zoPkjpX9R6spsA+LlLhvbWmNYg==",
+      "integrity": "sha512-qDrjZhrIU7OIUYwt6zVh7dGom8ijkjYEF2Ti6MiSQ/+qv+lyiQeAjLdKzP46XwYyp8Ap7tgYCK42kPqlemczpg==",
       "requires": {
         "angular-oauth2-oidc": "^8.0.2",
         "ngx-uploadx": "^3.3.2",
@@ -3487,9 +3487,9 @@
       }
     },
     "@farmmaps/common-map": {
-      "version": "0.0.1-prerelease.161",
+      "version": "0.0.1-prerelease.169",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.161.tgz",
+      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.169.tgz",
-      "integrity": "sha512-OhC7nyAIVq8inGWhNubGqEm47mjGjBMk4RNtD4HQ+r63Af9x6mohOWbi4A9yfoFiTRXZs+ejg+mFig319XGbsg==",
+      "integrity": "sha512-mAqFMcNFTnOffnjSzKCSKWaPfO8i6Z8tq25tP9ft3VFOcFJmqUyqBYg3uXvh03TLjRU1Vc4PPMARpQUEBxC5Ig==",
       "requires": {
         "ngx-openlayers": "1.0.0-next.13",
         "ol": "6.1.1",

package.json

@@ -20,8 +20,8 @@
     "@angular/platform-browser-dynamic": "~8.2.14",
     "@angular/router": "~8.2.14",
     "@aspnet/signalr": "^1.1.4",
-    "@farmmaps/common": ">=0.0.1-prerelease.161 <0.0.1",
+    "@farmmaps/common": ">=0.0.1-prerelease.169 <0.0.1",
-    "@farmmaps/common-map": ">=0.0.1-prerelease.161 <0.0.1",
+    "@farmmaps/common-map": ">=0.0.1-prerelease.169 <0.0.1",
     "@ng-bootstrap/ng-bootstrap": "^4.2.1",
     "@ngrx/effects": "^8.6.0",
     "@ngrx/router-store": "^8.6.0",

src/app/app-routing.module.ts

@@ -47,6 +47,10 @@ const routes = [
     {
         path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState',
         component: MapComponent       
+    },
+    {
+      path: ':queryState',
+      component: MapComponent       
   }      
    ]},
    {

src/app/menu/menu.component.html

@@ -7,20 +7,4 @@
           </div>      
         </div>
     </div>     
-    <div class="card menu-card">
-        <ul class="navbar-nav">
-          <li class="nav-item py-0">
-            <a class="nav-link" href="#" (click)="handleToggleBaseLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Base maps <i class="fa" [ngClass]="{'fa-caret-down':baseLayersCollapsed,'fa-caret-up':!baseLayersCollapsed}" aria-hidden="true"></i></a>
-            <div [ngbCollapse]="baseLayersCollapsed" class="mb-4">
-              <fm-map-layer-list [baseLayers]="true" [itemLayers]="baseLayers|async" [selectedLayer]="selectedBaseLayer|async" (onSelectLayer)="handleSelectBaseLayer($event)"></fm-map-layer-list>
-            </div>
-          </li>
-          <li class="nav-item py-0">
-            <a class="nav-link" href="#" (click)="handleToggleOverlayLayers($event)" i18n><i class="fa fa-map" aria-hidden="true"></i> Overlays <i class="fa" [ngClass]="{'fa-caret-down':overlayLayersCollapsed,'fa-caret-up':!overlayLayersCollapsed}" aria-hidden="true"></i></a>
-            <div [ngbCollapse]="overlayLayersCollapsed" class="mb-4">
-              <fm-map-layer-list [itemLayers]="overlayLayers|async" [selectedLayer]="selectedOverlayLayer|async" (onDelete)="handleOnDelete($event)" (onToggleVisibility)="handleOnToggleVisibility($event)" (onSetOpacity)="handleOnSetOpacity($event)" (onZoomToExtent)="handleZoomToExtent($event)" (onSelectLayer)="handleSelectOverlayLayer($event)"></fm-map-layer-list>
-            </div>
-          </li>
-        </ul>
-    </div>
 </div>

src/app/menu/menu.component.ts

@@ -1,77 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
-import { commonReducers, } from '@farmmaps/common';
+import {Router} from '@angular/router';
-import {  } from '@farmmaps/common-map';
+import {mapReducers,StateSerializerService} from '@farmmaps/common-map';
-import {mapReducers,mapActions,IItemLayer} from '@farmmaps/common-map';
-import { Store } from '@ngrx/store';
 import { tassign } from 'tassign';
-import { Observable } from 'rxjs';
-import {createEmpty,extend } from 'ol/extent';
 
 @Component({
   selector: 'app-menu',
   templateUrl: './menu.component.html',
   styleUrls: ['./menu.component.scss']
 })
-export class MenuComponent implements OnInit {
+export class MenuComponent {
-  public baseLayersCollapsed:boolean = true;
-  public overlayLayersCollapsed: boolean = true;
-  public overlayLayers: Observable<Array<IItemLayer>>;
-  public selectedOverlayLayer: Observable<IItemLayer>;
-  public baseLayers: Observable<Array<IItemLayer>>;
-  public selectedBaseLayer: Observable<IItemLayer>;
   
 
-  constructor( private store: Store<mapReducers.State | commonReducers.State> ) { }
+  constructor( private stateSerializerService:StateSerializerService,private router:Router ) { }
-
-  ngOnInit() {
-    this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
-    this.selectedOverlayLayer = this.store.select(mapReducers.selectGetSelectedOverlayLayer);
-    this.baseLayers = this.store.select(mapReducers.selectGetBaseLayers);
-    this.selectedBaseLayer = this.store.select(mapReducers.selectGetSelectedBaseLayer);
-  }
-
-  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);
+    var queryState = this.stateSerializerService.serialize(tassign(mapReducers.initialQueryState, query));
-    this.store.dispatch(new mapActions.DoQuery(queryState));
+    this.router.navigate(['map',queryState])
   }
-
-  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));
-  }
-
-  handleOnDelete(itemLayer: IItemLayer) {
-    this.store.dispatch(new mapActions.RemoveLayer(itemLayer));
-  }
-
-  handleZoomToExtent(itemLayer: IItemLayer) {
-    var extent =  createEmpty();
-    extend(extent, itemLayer.layer.getExtent());
-    if (extent) {
-      this.store.dispatch(new mapActions.SetExtent(extent));
-    }    
-  }
-
-  handleSelectOverlayLayer(itemLayer: IItemLayer) {
-    this.store.dispatch(new mapActions.SelectOverlayLayer(itemLayer));
-  }
-
-  handleSelectBaseLayer(itemLayer: IItemLayer) {
-    this.store.dispatch(new mapActions.SelectBaseLayer(itemLayer));
-  }
-
 }