Merge branch 'develop' of https://git.akkerweb.nl/FarmMaps/FarmMapsLib into develop

package-lock.json

@@ -1997,9 +1997,9 @@
       }
     },
     "@farmmaps/common": {
-      "version": "0.0.1-prerelease.103",
+      "version": "0.0.1-prerelease.109",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.103.tgz",
+      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.109.tgz",
-      "integrity": "sha512-QI2OZLcM073Q6yN4dQlVCYueMhPLavl5nrzHttfZmdXlMyeFFZwzQaEUArbEdCuXsRX65qqvs6N4p+B97NGQ5A==",
+      "integrity": "sha512-m8YA6FZLWP6EuK95HMEbnr5EFG32uaYfqWLWz9vWvyEBn+vhWc1TsZJkA1B6g4pGx3v3SoWpqhvmikicPYvf2w==",
       "requires": {
         "angular-oauth2-oidc": "^8.0.2",
         "ngx-uploadx": "^3.3.2",
@@ -2007,9 +2007,7 @@
       }
     },
     "@farmmaps/common-map": {
-      "version": "0.0.1-prerelease.103",
+      "version": "file:dist/common-map",
-      "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.103.tgz",
-      "integrity": "sha512-ID4fMP3JNiUoUayPy1Zj8ZkciwuQxLhl9AnwdrAIw4fbYoNqnNI7cnj2QiF/QWlZL3IqvVpP8RUa3irN0zFoKw==",
       "requires": {
         "ngx-openlayers": "1.0.0-next.13",
         "ol": "^6.0.0",

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.103 <0.0.1",
+    "@farmmaps/common": ">=0.0.1-prerelease.109 <0.0.1",
-    "@farmmaps/common-map": ">=0.0.1-prerelease.103 <0.0.1",
+    "@farmmaps/common-map": ">=0.0.1-prerelease.109 <0.0.1",
     "@ng-bootstrap/ng-bootstrap": "^4.2.1",
     "@ngrx/effects": "^8.2.0",
     "@ngrx/router-store": "^8.2.0",

projects/common-map/package.json

@@ -15,6 +15,6 @@
     "@ngrx/router-store": "^8.2",
     "@ngrx/store": "^8.2",
     "tassign": "^1.0.0",
-    "@farmmaps/common": ">=0.0.1-prerelease.102 <0.0.1"
+    "@farmmaps/common": ">=0.0.1-prerelease.109 <0.0.1"
   }
 }

projects/common-map/src/fm-map/actions/map.actions.ts

@@ -1,243 +1,235 @@
-import { Action } from '@ngrx/store';
+import { Action } from '@ngrx/store';
-
+
-import { IMapState } from '../models/map.state';
+import { IMapState } from '../models/map.state';
-import { IItemLayer } from '../models/item.layer';
+import { IItemLayer } from '../models/item.layer';
-import { IQueryState } from '../models/query.state';
+import { IQueryState } from '../models/query.state';
-import { IItem } from '@farmmaps/common';
+import { IItem } from '@farmmaps/common';
-import { Feature } from 'ol';
+import { Feature } from 'ol';
-import { Extent } from 'ol/extent';
+import { Extent } from 'ol/extent';
-
+
-export const SETSTATE = '[Map] SetState';
+export const SETSTATE = '[Map] SetState';
-export const SETMAPSTATE = '[Map] MapState';
+export const SETMAPSTATE = '[Map] MapState';
-export const SETVIEWEXTENT = '[Map] SetViewExtent';
+export const SETVIEWEXTENT = '[Map] SetViewExtent';
-export const INIT = '[Map] Init';
+export const INIT = '[Map] Init';
-export const SETPARENT = '[Map] SetParent';
+export const SETPARENT = '[Map] SetParent';
-export const STARTSEARCH = '[Map] StartSearch';
+export const STARTSEARCH = '[Map] StartSearch';
-export const STARTSEARCHSUCCESS = '[Map] StartSearchSuccess';
+export const STARTSEARCHSUCCESS = '[Map] StartSearchSuccess';
-export const SELECTFEATURE = '[Map] SelectFeature';
+export const SELECTFEATURE = '[Map] SelectFeature';
-export const SELECTITEM = '[Map] SelectItem';
+export const SELECTITEM = '[Map] SelectItem';
-export const SELECTITEMSUCCESS = '[Map] SelectItemSuccess';
+export const SELECTITEMSUCCESS = '[Map] SelectItemSuccess';
-export const ADDFEATURESUCCESS = '[Map] AddFeatureSuccess';
+export const ADDFEATURESUCCESS = '[Map] AddFeatureSuccess';
-export const UPDATEFEATURESUCCESS = '[Map] UpdateFeatureSuccess';
+export const UPDATEFEATURESUCCESS = '[Map] UpdateFeatureSuccess';
-export const EXPANDSEARCH = '[Map] ExpandSearch';
+export const EXPANDSEARCH = '[Map] ExpandSearch';
-export const COLLAPSESEARCH = '[Map] CollapseSearch';
+export const COLLAPSESEARCH = '[Map] CollapseSearch';
-export const TOGGLEMENU = '[Map] ToggleMenu';
+export const SETEXTENT = '[Map] SetExtent';
-export const SETEXTENT = '[Map] SetExtent';
+export const SETQUERYSTATE = '[Map] SetQueryState';
-export const SETQUERYSTATE = '[Map] SetQueryState';
+export const SETTIMESPAN = '[Map] SetTimeSpan';
-export const SETTIMESPAN = '[Map] SetTimeSpan';
+export const ADDLAYER = '[Map] AddLayer';
-export const ADDLAYER = '[Map] AddLayer';
+export const SETVISIBILITY = '[Map] SetVisibility';
-export const SETVISIBILITY = '[Map] SetVisibility';
+export const SETOPACITY = '[Map] SetOpacity';
-export const SETOPACITY = '[Map] SetOpacity';
+export const SETLAYERINDEX = '[Map] SetLayerIndex';
-export const SETLAYERINDEX = '[Map] SetLayerIndex';
+export const REMOVELAYER = '[Map] RemoveLayer';
-export const REMOVELAYER = '[Map] RemoveLayer';
+export const LOADBASELAYERS = '[Map] LoadLayers';
-export const LOADBASELAYERS = '[Map] LoadLayers';
+export const LOADBASELAYERSSUCCESS = '[Map] LoadLayersSuccess';
-export const LOADBASELAYERSSUCCESS = '[Map] LoadLayersSuccess';
+export const SELECTBASELAYER = '[Map] SelectBaseLayers';
-export const SELECTBASELAYER = '[Map] SelectBaseLayers';
+export const SELECTOVERLAYLAYER = '[Map] SelectOverlayLayers';
-export const SELECTOVERLAYLAYER = '[Map] SelectOverlayLayers';
+export const ZOOMTOEXTENT = '[Map] ZoomToExtent';
-export const ZOOMTOEXTENT = '[Map] ZoomToExtent';
+export const DOQUERY = '[Map] DoQuery';
-export const DOQUERY = '[Map] DoQuery';
+
-
+export class SetState implements Action {
-export class SetState implements Action {
+  readonly type = SETSTATE;
-  readonly type = SETSTATE;
+
-
+  constructor(public mapState: IMapState,public queryState:IQueryState) { }
-  constructor(public mapState: IMapState,public queryState:IQueryState) { }
+}
-}
+
-
+export class SetMapState implements Action {
-export class SetMapState implements Action {
+  readonly type = SETMAPSTATE;
-  readonly type = SETMAPSTATE;
+
-
+  constructor(public mapState: IMapState) { }
-  constructor(public mapState: IMapState) { }
+}
-}
+
-
+export class SetViewExtent implements Action {
-export class SetViewExtent implements Action {
+  readonly type = SETVIEWEXTENT;
-  readonly type = SETVIEWEXTENT;
+
-
+  constructor(public extent:number[]) { }
-  constructor(public extent:number[]) { }
+}
-}
+
-
+export class Init implements Action {
-export class Init implements Action {
+  readonly type = INIT;
-  readonly type = INIT;
+
-
+  constructor() { }
-  constructor() { }
+}
-}
+
-
+export class SetParent implements Action {
-export class SetParent implements Action {
+  readonly type = SETPARENT;
-  readonly type = SETPARENT;
+
-
+  constructor(public parentCode:string) { }
-  constructor(public parentCode:string) { }
+}
-}
+
-
+export class StartSearch implements Action {
-export class StartSearch implements Action {
+  readonly type = STARTSEARCH;
-  readonly type = STARTSEARCH;
+
-
+  constructor(public queryState: IQueryState) { }
-  constructor(public queryState: IQueryState) { }
+}
-}
+
-
+export class StartSearchSuccess implements Action {
-export class StartSearchSuccess implements Action {
+  readonly type = STARTSEARCHSUCCESS;
-  readonly type = STARTSEARCHSUCCESS;
+
-
+  constructor(public features: Array<Feature>, public query:IQueryState) { }
-  constructor(public features: Array<Feature>, public query:IQueryState) { }
+}
-}
+
-
+export class SelectFeature implements Action {
-export class SelectFeature implements Action {
+  readonly type = SELECTFEATURE;
-  readonly type = SELECTFEATURE;
+
-
+  constructor(public feature:Feature) { }
-  constructor(public feature:Feature) { }
+}
-}
+
-
+export class SelectItem implements Action {
-export class SelectItem implements Action {
+  readonly type = SELECTITEM;
-  readonly type = SELECTITEM;
+
-
+  constructor(public itemCode:string) { }
-  constructor(public itemCode:string) { }
+}
-}
+
-
+export class SelectItemSuccess implements Action {
-export class SelectItemSuccess implements Action {
+  readonly type = SELECTITEMSUCCESS;
-  readonly type = SELECTITEMSUCCESS;
+
-
+  constructor(public item: IItem) { }
-  constructor(public item: IItem) { }
+}
-}
+
-
+export class AddFeatureSuccess implements Action {
-export class AddFeatureSuccess implements Action {
+  readonly type = ADDFEATURESUCCESS;
-  readonly type = ADDFEATURESUCCESS;
+
-
+  constructor(public feature: Feature) { }
-  constructor(public feature: Feature) { }
+}
-}
+
-
+export class UpdateFeatureSuccess implements Action {
-export class UpdateFeatureSuccess implements Action {
+  readonly type = UPDATEFEATURESUCCESS;
-  readonly type = UPDATEFEATURESUCCESS;
+
-
+  constructor(public feature: Feature) { }
-  constructor(public feature: Feature) { }
+}
-}
+
-
+export class ExpandSearch implements Action {
-export class ExpandSearch implements Action {
+  readonly type = EXPANDSEARCH;
-  readonly type = EXPANDSEARCH;
+
-
+  constructor() { }
-  constructor() { }
+}
-}
+
-
+export class CollapseSearch implements Action {
-export class CollapseSearch implements Action {
+  readonly type = COLLAPSESEARCH;
-  readonly type = COLLAPSESEARCH;
+
-
+  constructor() { }
-  constructor() { }
+}
-}
+
-
+export class SetExtent implements Action {
-export class ToggleMenu implements Action {
+  readonly type = SETEXTENT;
-  readonly type = TOGGLEMENU;
+
-
+  constructor(public extent:number[]) { }
-  constructor() { }
+}
-}
+
-
+export class SetQueryState implements Action {
-export class SetExtent implements Action {
+  readonly type = SETQUERYSTATE;
-  readonly type = SETEXTENT;
+
-
+  constructor(public queryState: IQueryState) { }
-  constructor(public extent:number[]) { }
+}
-}
+
-
+export class SetTimeSpan implements Action {
-export class SetQueryState implements Action {
+    readonly type = SETTIMESPAN;
-  readonly type = SETQUERYSTATE;
+
-
+    constructor(public startDate: Date, public endDate: Date) { }
-  constructor(public queryState: IQueryState) { }
+}
-}
+
-
+export class AddLayer implements Action {
-export class SetTimeSpan implements Action {
+  readonly type = ADDLAYER;
-    readonly type = SETTIMESPAN;
+
-
+  constructor(public item:IItem,public layerIndex=-1) { }
-    constructor(public startDate: Date, public endDate: Date) { }
+}
-}
+
-
+export class SetVisibility implements Action {
-export class AddLayer implements Action {
+  readonly type = SETVISIBILITY;
-  readonly type = ADDLAYER;
+
-
+  constructor(public itemLayer:IItemLayer,public visibility:boolean) { }
-  constructor(public item:IItem,public layerIndex=-1) { }
+}
-}
+
-
+export class SetOpacity implements Action {
-export class SetVisibility implements Action {
+  readonly type = SETOPACITY;
-  readonly type = SETVISIBILITY;
+
-
+  constructor(public itemLayer: IItemLayer, public opacity: number) { }
-  constructor(public itemLayer:IItemLayer,public visibility:boolean) { }
+}
-}
+
-
+export class SetLayerIndex implements Action {
-export class SetOpacity implements Action {
+  readonly type = SETLAYERINDEX;
-  readonly type = SETOPACITY;
+
-
+  constructor(public layerIndex: number, public itemLayer: IItemLayer = null) { }
-  constructor(public itemLayer: IItemLayer, public opacity: number) { }
+}
-}
+
-
+export class RemoveLayer implements Action {
-export class SetLayerIndex implements Action {
+  readonly type = REMOVELAYER;
-  readonly type = SETLAYERINDEX;
+
-
+  constructor(public itemLayer: IItemLayer) { }
-  constructor(public layerIndex: number, public itemLayer: IItemLayer = null) { }
+}
-}
+
-
+export class LoadBaseLayers implements Action {
-export class RemoveLayer implements Action {
+  readonly type = LOADBASELAYERS;
-  readonly type = REMOVELAYER;
+
-
+  constructor(public projection: string) { }
-  constructor(public itemLayer: IItemLayer) { }
+}
-}
+
-
+export class LoadBaseLayersSuccess implements Action {
-export class LoadBaseLayers implements Action {
+  readonly type = LOADBASELAYERSSUCCESS;
-  readonly type = LOADBASELAYERS;
+
-
+  constructor(public items: IItem[] ) { }
-  constructor(public projection: string) { }
+}
-}
+
-
+export class SelectBaseLayer implements Action {
-export class LoadBaseLayersSuccess implements Action {
+  readonly type = SELECTBASELAYER;
-  readonly type = LOADBASELAYERSSUCCESS;
+
-
+  constructor(public itemLayer: IItemLayer) { }
-  constructor(public items: IItem[] ) { }
+}
-}
+
-
+export class SelectOverlayLayer implements Action {
-export class SelectBaseLayer implements Action {
+  readonly type = SELECTOVERLAYLAYER;
-  readonly type = SELECTBASELAYER;
+
-
+  constructor(public itemLayer: IItemLayer) { }
-  constructor(public itemLayer: IItemLayer) { }
+}
-}
+
-
+export class ZoomToExtent implements Action {
-export class SelectOverlayLayer implements Action {
+  readonly type = ZOOMTOEXTENT;
-  readonly type = SELECTOVERLAYLAYER;
+
-
+  constructor(public itemLayer: IItemLayer) { }
-  constructor(public itemLayer: IItemLayer) { }
+}
-}
+
-
+export class DoQuery implements Action {
-export class ZoomToExtent implements Action {
+  readonly type = DOQUERY;
-  readonly type = ZOOMTOEXTENT;
+
-
+  constructor(public query:IQueryState) { }
-  constructor(public itemLayer: IItemLayer) { }
+}
-}
+
-
+export type Actions = SetMapState
-export class DoQuery implements Action {
+  | Init
-  readonly type = DOQUERY;
+  | SetParent
-
+  | StartSearch
-  constructor(public query:IQueryState) { }
+  | StartSearchSuccess
-}
+  | SelectFeature
-
+  | SelectItem
-export type Actions = SetMapState
+  | SelectItemSuccess
-  | Init
+  | AddFeatureSuccess
-  | SetParent
+  | UpdateFeatureSuccess
-  | StartSearch
+  | ExpandSearch
-  | StartSearchSuccess
+  | CollapseSearch
-  | SelectFeature
+  | SetExtent
-  | SelectItem
+  | SetQueryState
-  | SelectItemSuccess
+  | SetTimeSpan
-  | AddFeatureSuccess
+  | AddLayer
-  | UpdateFeatureSuccess
+  | RemoveLayer
-  | ExpandSearch
+  | SetVisibility
-  | CollapseSearch
+  | SetOpacity
-  | ToggleMenu
+  | SetLayerIndex
-  | SetExtent
+  | LoadBaseLayers
-  | SetQueryState
+  | LoadBaseLayersSuccess
-  | SetTimeSpan
+  | SelectBaseLayer
-  | AddLayer
+  | SelectOverlayLayer
-  | RemoveLayer
+  | ZoomToExtent
-  | SetVisibility
+  | SetState
-  | SetOpacity
+  | SetViewExtent
-  | SetLayerIndex
+  | DoQuery;
-  | LoadBaseLayers
+
-  | LoadBaseLayersSuccess
-  | SelectBaseLayer
-  | SelectOverlayLayer
-  | ZoomToExtent
-  | SetState
-  | SetViewExtent
-  | DoQuery;
-

projects/common-map/src/fm-map/common-map-routing.module.ts

@@ -1,29 +1,29 @@
-import { NgModule } from '@angular/core';
+import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
-import { MapComponent } from './components/map/map.component';
+import { MapComponent } from './components/map/map.component';
-import { AuthGuard } from '@farmmaps/common';
+import { AuthGuard } from '@farmmaps/common';
-
+
-const routes = [
+const routes = [
-    {
+    {
-    path: '', canActivateChild: [AuthGuard], children: [
+    path: '', canActivateChild: [AuthGuard], children: [
-            {
+            {
-                path: '',
+                path: '',
-                component: MapComponent
+                component: MapComponent
-            }
+            }
-        ]
+        ]
-    },
+    },
-    {
+    {
-      path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState', canActivateChild: [AuthGuard], children: [
+      path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState', canActivateChild: [AuthGuard], children: [
-            {
+            {
-                path: '',
+                path: '',
-                component: MapComponent
+                component: MapComponent
-            }
+            }
-        ]
+        ]
-  }
+  }
-];
+];
-
+
-@NgModule({
+@NgModule({
-    imports: [RouterModule.forChild(routes)],
+    imports: [RouterModule.forChild(routes)],
-    exports: [RouterModule]
+    exports: [RouterModule]
-})
+})
-export class MapRoutingModule { }
+export class MapRoutingModule { }

projects/common-map/src/fm-map/common-map.module.ts

@@ -61,13 +61,32 @@ import { LayerVectorImageComponent } from './components/aol/layer-vector-image/l
 import { StateSerializerService } from './services/state-serializer.service';
 import { GeolocationService } from './services/geolocation.service';
 import {DeviceOrientationService} from './services/device-orientation.service';
-import { localStorageSync } from 'ngrx-store-localstorage';
 import { WidgetStatusComponent } from './components/widget-status/widget-status.component';
 import { ForChild} from './components/for-item/for-child.decorator';
 import {ForItemType } from './components/for-item/for-itemtype.decorator';
 import { ForSourceTask} from './components/for-item/for-sourcetask.decorator';
 import { PanToLocation} from './components/aol/pan-to-location/pan-to-location.component';
 
+export function LocalStorageSync(reducer: ActionReducer<any>): ActionReducer<any> {
+  const r = function(state, action) {
+    const r2 = reducer(state, action);
+
+    if(action.type == "@ngrx/store/update-reducers") {
+        let ms = window.localStorage.getItem(MODULE_NAME+"_mapState");
+        if(ms) {
+          r2["mapState"] = JSON.parse(ms);
+        }
+    }
+    if(action.type == "[Map] MapState" || action.type == "[Map] SetState") {
+        window.localStorage.setItem(MODULE_NAME + "_mapState",JSON.stringify(r2["mapState"]));
+    }
+
+    return r2;
+  };
+  return r;
+ }
+
+const metaReducers: Array<MetaReducer<any, any>> = [LocalStorageSync];
 
 export {
   mapEffects,
@@ -132,7 +151,7 @@ export {
     CommonModule,
     AngularOpenlayersModule,
     MapRoutingModule,
-    StoreModule.forFeature(MODULE_NAME, mapReducers.reducer),
+    StoreModule.forFeature(MODULE_NAME, mapReducers.reducer,{metaReducers:metaReducers}),
     EffectsModule.forFeature([mapEffects.MapEffects]),
     NgbModule,
     FormsModule,
@@ -227,6 +246,7 @@ export {
   ]
 })
 
+
 export class AppCommonMapModule {
   static forRoot(): ModuleWithProviders {
     return {

projects/common-map/src/fm-map/components/map/map.component.html

@@ -13,7 +13,6 @@
   searchMinified:searchMinified$|async,
   selectedItem:selectedItem$|async,
   queryState:queryState$|async,
-  menuVisible:menuVisible$|async,
   searchCollapsed:searchCollapsed$|async,
   clearEnabled:clearEnabled$|async,
   period:period$|async,
@@ -64,19 +63,6 @@
       </div>
     </div>
   </fm-side-panel>
-  <fm-side-panel [visible]="state.menuVisible" class="menu">
-    <div class="container-fluid">
-      <div class="body">
-        <div class="d-flex flex-row">
-          <div class="mt-2 mb-2 flex-grow-1 logo"><router-outlet name="side-panel-logo"></router-outlet></div>
-          <div class="mt-2 mb-2 ml-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
-        </div>
-        <div class="d-flex flex-column cards"> 
-            <router-outlet name="side-panel-menu"></router-outlet>          
-        </div>      
-    </div>
-    </div>
-  </fm-side-panel>
 </ng-container>
 
 

projects/common-map/src/fm-map/components/map/map.component.scss

@@ -1,171 +1,167 @@
-@import "../../_theme.scss";
+@import "../../_theme.scss";
-@import "~bootstrap/scss/bootstrap.scss";
+@import "~bootstrap/scss/bootstrap.scss";
-
+
-aol-map { position:absolute;width:100%;height:100%;}
+aol-map { position:absolute;width:100%;height:100%;}
-
+
-.arrow {
+.arrow {
-  top: 3rem;
+  top: 3rem;
-}
+}
-
+
-.popover {
+.popover {
-  max-height:22rem;
+  max-height:22rem;
-  min-width:15rem;
+  min-width:15rem;
-}
+}
-
+
-.popover-body {
+.popover-body {
-  max-height:19rem;
+  max-height:19rem;
-  overflow:hidden;
+  overflow:hidden;
-  overflow-y:auto;
+  overflow-y:auto;
-}
+}
-
+
-.card-title {
+.card-title {
-  font-size:1rem;
+  font-size:1rem;
-}
+}
-
+
-.menu-card {
+.menu-card {
-  margin-left:-7px;
+  margin-left:-7px;
-  padding-left:7px;
+  padding-left:7px;
-  margin-right:-7px;
+  margin-right:-7px;
-  padding-right:7px;
+  padding-right:7px;
-  margin-bottom:7px;
+  margin-bottom:7px;
-}
+}
-
+
-.icon-top {
+.icon-top {
-  font-size: 6rem;
+  font-size: 6rem;
-  text-align: center;
+  text-align: center;
-  height: 9.75rem;
+  height: 9.75rem;
-}
+}
-
+
-.icon-top i {
+.icon-top i {
-  padding-top: 1.875rem;
+  padding-top: 1.875rem;
-}
+}
-
+
-.card-title {
+.card-title {
-  white-space:nowrap;
+  white-space:nowrap;
-  overflow:hidden;
+  overflow:hidden;
-  text-overflow:ellipsis;
+  text-overflow:ellipsis;
-}
+}
-
+
-
+
-.control-container {
+.control-container {
-  position: absolute;
+  position: absolute;
-  right: 1em;
+  right: 1em;
-  bottom: 1em;
+  bottom: 1em;
-}
+}
-
+
-switch2d3d {
+switch2d3d {
-  position: absolute;
+  position: absolute;
-  right: 1em;
+  right: 1em;
-  bottom: 1em;
+  bottom: 1em;
-}
+}
-
+
-.panel-wrapper {
+.panel-wrapper {
-  display: flex;
+  display: flex;
-  flex-direction: column;
+  flex-direction: column;
-  align-items: stretch;
+  align-items: stretch;
-  width: 100%;
+  width: 100%;
-  height: 100%;
+  height: 100%;
-}
+}
-
+
-.panel-top {
+.panel-top {
-  display: block;
+  display: block;
-  height:0;
+  height:0;
-}
+}
-
+
-.panel-bottom {
+.panel-bottom {
-  overflow:auto;
+  overflow:auto;
-  flex:1;
+  flex:1;
-}
+}
-
+
-.no-results {
+.no-results {
-  font-weight:bold;
+  font-weight:bold;
-}
+}
-
+
-.no-results > span {
+.no-results > span {
-  font-style:italic;
+  font-style:italic;
-}
+}
-
+
-div.header {
+div.header {
-  display:flex;
+  display:flex;
-  padding-top:1em;
+  padding-top:1em;
-  margin-bottom:1em;
+  margin-bottom:1em;
-}
+}
-
+
-div.header button {
+div.header button {
-  margin-left:1em;
+  margin-left:1em;
-}
+}
-
+
-.logo {
+.logo {
-  overflow: hidden;
+  overflow: hidden;
-  max-height: 2.5em;
+  max-height: 2.5em;
-}
+}
-
+
-timespan {
+timespan {
-  position: absolute;
+  position: absolute;
-  transition: left 0.5s;
+  transition: left 0.5s;
-  bottom: 0;
+  bottom: 0;
-  left: 0;
+  left: 0;
-  right: 0;
+  right: 0;
-  background-color: rgba(255, 255, 255, 0.5);  
+  background-color: rgba(255, 255, 255, 0.5);  
-}
+}
-
+
-timespan.menuVisible {
+timespan.menuVisible {
-  left: 22rem;
+  left: 22rem;
-}
+}
-
+
-:host ::ng-deep .timespan div.clearfix {
+:host ::ng-deep .timespan div.clearfix {
-  transition: height 0.5s;
+  transition: height 0.5s;
-}
+}
-
+
-:host ::ng-deep .menu .side-panel {
+
-  z-index: 100;
+@media screen and (min-width:44rem) {
-  background-color: rgb(245,245,245);
+  .panel-top {
-}
+    height: 8.1rem;
-
+  }
-@media screen and (min-width:44rem) {
+}
-  .panel-top {
+
-    height: 8.1rem;
+.map {
-  }
+  transition: margin-left 0.3s;
-}
+}
-
+
-.map {
+.shortcut-icon {
-  transition: margin-left 0.3s;
+  display: inline-block;
-}
+  text-align: center;
-
+  margin: 0.5rem;
-.shortcut-icon {
+  cursor:pointer;
-  display: inline-block;
+}
-  text-align: center;
+
-  margin: 0.5rem;
+.shortcut-icon > .icon {
-  cursor:pointer;
+  width: 3rem;
-}
+  height: 3rem;
-
+  background-color: #731e64;
-.shortcut-icon > .icon {
+  display: inline-block;
-  width: 3rem;
+  text-align: center;
-  height: 3rem;
+  line-height: 3rem;
-  background-color: #731e64;
+  color: #ffffff;
-  display: inline-block;
+  font-size: 2rem;
-  text-align: center;
+}
-  line-height: 3rem;
+
-  color: #ffffff;
+.shortcut-icon > .caption {
-  font-size: 2rem;
+  text-align: center;
-}
+  width: 4rem;
-
+  overflow: hidden;
-.shortcut-icon > .caption {
+  text-overflow: ellipsis;
-  text-align: center;
+  color: theme-color();
-  width: 4rem;
+}
-  overflow: hidden;
+
-  text-overflow: ellipsis;
+.shortcut-icon > .farm-icon {
-  color: theme-color();
+  background-color: #731E64;
-}
+}
-
+
-.shortcut-icon > .farm-icon {
+.shortcut-icon > .trijntje-icon {
-  background-color: #731E64;
+  background-color: #FAA33F;
-}
+}
-
+
-.shortcut-icon > .trijntje-icon {
+/*.panel-visible {
-  background-color: #FAA33F;
+  margin-left:22rem;
-}
+}*/
-
-/*.panel-visible {
-  margin-left:22rem;
-}*/

projects/common-map/src/fm-map/components/map/map.component.ts

@@ -138,7 +138,6 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     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);
@@ -175,6 +174,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
         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);
+        window.localStorage.setItem("FarmMapsCommonMap_mapState",this.lastMapState);
       }
       if (params.has("queryState")) {
         let queryState = params.get("queryState");
@@ -212,7 +212,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   }
 
   handleToggleMenu(event) {
-    this.store.dispatch(new mapActions.ToggleMenu());
+    this.store.dispatch(new commonActions.ToggleMenu());
   }
 
   handleToggleBaseLayers(event:MouseEvent) {

projects/common-map/src/fm-map/effects/map.effects.ts

@@ -104,7 +104,7 @@ export class MapEffects {
     ofType(mapActions.STARTSEARCHSUCCESS),
     mergeMap((action: mapActions.StartSearchSuccess) => {
       if (action.query.bboxFilter) {
-        return [];
+        return [new commonActions.SetMenuVisible(false)];
       } else { 
       var extent = createEmpty();
 
@@ -114,7 +114,7 @@ export class MapEffects {
         }
       }
       //return [];
-      return of(new mapActions.SetExtent(extent));
+      return [new mapActions.SetExtent(extent),new commonActions.SetMenuVisible(false)];
     }
     }));
 

projects/common-map/src/fm-map/reducers/map.reducer.ts

@@ -44,8 +44,7 @@ export interface State {
   selectedItem:IItem,
   clearEnabled: boolean,
   searchCollapsed: boolean,
-  searchMinified: boolean,
+  searchMinified: boolean, 
-  menuVisible: boolean,
   extent: number[],
   baseLayers: Array<IItemLayer>
   overlayLayers: Array<IItemLayer>,
@@ -79,7 +78,6 @@ export const initialState: State = {
   clearEnabled: false,
   searchCollapsed: true,
   searchMinified:false,
-  menuVisible: true,
   extent: null,
   baseLayers: [],
   overlayLayers: [],
@@ -165,8 +163,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
         selectedItemLayer:null,
         queryState: tassign(a.queryState),
         searchCollapsed: false,
-        searchMinified: true,
+        searchMinified: true
-        menuVisible:false
       });
     }
     case mapActions.DOQUERY: {
@@ -181,7 +178,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
       return tassign(state, {
         panelVisible: true,
         selectedFeature: a.feature,
-        menuVisible: false,
         extent: a.feature.getGeometry().getExtent(),
         searchCollapsed: false,
         clearEnabled:true,
@@ -207,9 +203,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
     case mapActions.COLLAPSESEARCH: {
       return tassign(state, { searchCollapsed: state.panelVisible ? false: true});
     }
-    case mapActions.TOGGLEMENU: {
-      return tassign(state, { menuVisible: !state.menuVisible });
-    }
     case mapActions.SETEXTENT: {
       let a = action as mapActions.SetExtent;    
       return tassign(state, { extent: a.extent });
@@ -310,7 +303,6 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
           clearEnabled: false,
           searchCollapsed: true,
           searchMinified: false,
-          menuVisible:false,
           features: [],
           query:initialState.query
         });
@@ -335,7 +327,6 @@ export const getQueryState = (state: State) => state.queryState;
 export const getClearEnabled = (state: State) => state.clearEnabled;
 export const getSearchCollapsed = (state: State) => state.searchCollapsed;
 export const getSearchMinified = (state: State) => state.searchMinified;
-export const getMenuVisible = (state: State) => state.menuVisible;
 export const getExtent = (state: State) => state.extent;
 export const getOverlayLayers = (state: State) => state.overlayLayers;
 export const getBaseLayers = (state: State) => state.baseLayers;
@@ -358,7 +349,6 @@ export const selectGetQueryState = createSelector(selectMapState, getQueryState)
 export const selectGetClearEnabled = createSelector(selectMapState, getClearEnabled);
 export const selectGetSearchCollapsed = createSelector(selectMapState, getSearchCollapsed);
 export const selectGetSearchMinified = createSelector(selectMapState, getSearchMinified);
-export const selectGetMenuVisible = createSelector(selectMapState, getMenuVisible);
 export const selectGetExtent = createSelector(selectMapState, getExtent);
 export const selectGetOverlayLayers = createSelector(selectMapState, getOverlayLayers);
 export const selectGetBaseLayers = createSelector(selectMapState, getBaseLayers);

projects/common/src/fm/actions/app-common.actions.ts

@@ -46,6 +46,10 @@ export const FAIL = '[AppCommon] Fail';
 
 export const UPLOADEDFILECLICK = '[AppCommon] UploadedFileClick';
 
+export const TOGGLEMENU = '[AppCommon] ToggleMenu';
+
+export const SETMENUVISIBLE = '[AppCommon] SetMenuVisible';
+
 export class InitUser implements Action {
   readonly type = INITUSER;
 
@@ -212,6 +216,18 @@ export class UploadedFileClick implements Action {
   readonly type = UPLOADEDFILECLICK;
   constructor(public itemCode:string) { }
 }
+
+export class ToggleMenu implements Action {
+  readonly type = TOGGLEMENU;
+
+  constructor() { }
+}
+
+export class SetMenuVisible implements Action {
+  readonly type = SETMENUVISIBLE;
+
+  constructor(public visible:boolean) { }
+}
   
 
 export type Actions = OpenModal
@@ -240,4 +256,6 @@ export type Actions = OpenModal
   | TaskStartEvent
   | TaskEndEvent
   | TaskErrorEvent
-  | DeviceUpdateEvent;
+  | DeviceUpdateEvent
+  | ToggleMenu
+  | SetMenuVisible;

projects/common/src/fm/components/app/app.component.html

@@ -1,14 +1,27 @@
-<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}">
+<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}">
-  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
-    <a class="navbar-brand" [routerLink]="['/']">Farm Maps <span *ngIf="routeLoading|async"><i class="fa fa-spinner fa-spin"></i></span></a>
+    <a class="navbar-brand" [routerLink]="['/']">Farm Maps <span *ngIf="routeLoading|async"><i class="fa fa-spinner fa-spin"></i></span></a>
-    <ul class="navbar-nav">
+    <ul class="navbar-nav">
-      <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/map']" class="nav-link"><span><i class="fa fa-globe" aria-hidden="true"></i> Map</span></a></li>
+      <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/map']" class="nav-link"><span><i class="fa fa-globe" aria-hidden="true"></i> Map</span></a></li>
-      <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer']" class="nav-link"><span><i class="fa fa-folder" aria-hidden="true"></i> Explorer</span></a></li>
+      <li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer']" class="nav-link"><span><i class="fa fa-folder" aria-hidden="true"></i> Explorer</span></a></li>
-    </ul>
+    </ul>
-    <router-outlet name="menu"></router-outlet>
+    <router-outlet name="menu"></router-outlet>
-  </nav>
+  </nav>
-  <div class="body">
+  <div class="body">
-    <router-outlet></router-outlet>
+    <router-outlet></router-outlet>
-  </div>
+  </div>
-  <fm-resumable-file-upload></fm-resumable-file-upload>
+  <fm-side-panel [visible]="menuVisible|async" [left]="true" class="menu" (click)="handleStopBubble($event)">
-</div>
+    <div class="container-fluid">
+      <div class="body">
+        <div class="d-flex flex-row">
+          <div class="mt-2 mb-2 flex-grow-1 logo"><router-outlet name="side-panel-logo"></router-outlet></div>
+          <div class="mt-2 mb-2 ml-2"><button type="button" class="btn btn-outline-secondary" (click)="handleToggleMenu($event)"><i class="fa fa-times" aria-hidden="true"></i></button></div>
+        </div>
+        <div class="d-flex flex-column cards"> 
+            <router-outlet name="side-panel-menu"></router-outlet>          
+        </div>      
+    </div>
+    </div>
+  </fm-side-panel>
+  <fm-resumable-file-upload></fm-resumable-file-upload>
+</div>

projects/common/src/fm/components/app/app.component.scss

@@ -1,72 +1,77 @@
-//@import "theme.scss";
+//@import "theme.scss";
-
+
-/* Import Bootstrap & Fonts */
+/* Import Bootstrap & Fonts */
-
+
-@import "~bootstrap/scss/bootstrap.scss";
+@import "~bootstrap/scss/bootstrap.scss";
-
+
-
+
-// custom styles
+// custom styles
-
+
-.btn:focus {
+.btn:focus {
-  box-shadow:none;
+  box-shadow:none;
-}
+}
-
+
-.input-group > .form-control:focus {
+.input-group > .form-control:focus {
-  z-index: auto;
+  z-index: auto;
-}
+}
-
+
-.form-control:focus {
+.form-control:focus {
-  box-shadow: none;
+  box-shadow: none;
-  border-color: $input-border-color;
+  border-color: $input-border-color;
-}
+}
-
+
-
+
-/* *** Overall APP Styling can go here ***
+/* *** Overall APP Styling can go here ***
-   --------------------------------------------
+   --------------------------------------------
-   Note: This Component has ViewEncapsulation.None so the styles will bleed out
+   Note: This Component has ViewEncapsulation.None so the styles will bleed out
-
+
-*/
+*/
-
+
-body { background: #f1f1f1; line-height: 18px; user-select:none;}
+body { background: #f1f1f1; line-height: 18px; user-select:none;}
-
+
-.navbar-brand {
+.navbar-brand {
-  padding-top: .5rem;
+  padding-top: .5rem;
-  padding-bottom: .5rem;
+  padding-bottom: .5rem;
-}
+}
-
+
-.app {
+.app {
-  width:100vw;
+  width:100vw;
-  height:100vh;
+  height:100vh;
-}
+}
-
+
-.app > .navbar {
+.app > .navbar {
-  position: absolute;
+  position: absolute;
-  transition: top 0.5s ease-out;
+  transition: top 0.5s ease-out;
-  top:0;
+  top:0;
-  left: 0;
+  left: 0;
-  right: 0;
+  right: 0;
-  height: 3.1rem;
+  height: 3.1rem;
-}
+}
-
+
-.app > .body {
+.app > .body {
-  position: absolute;
+  position: absolute;
-  transition: top 0.5s ease-out;
+  transition: top 0.5s ease-out;
-  top: 3.1rem;
+  top: 3.1rem;
-  bottom: 0;
+  bottom: 0;
-  left: 0;
+  left: 0;
-  right: 0;
+  right: 0;
-  overflow:hidden;
+  overflow:hidden;
-}
+}
-
+
-.app.fullscreen > .navbar {
+.app.fullscreen > .navbar {
-  top: -3.1rem;
+  top: -3.1rem;
-}
+}
-
+
-.app.fullscreen > .body {
+.app.fullscreen > .body {
-  top:0;
+  top:0;
-}
+}
-
+
-.btn-primary, .btn-primary:hover {
+.btn-primary, .btn-primary:hover {
-  color: #ffffff;
+  color: #ffffff;
-}
+}
-
+
+.menu .side-panel {
+  z-index: 100;
+  background-color: rgb(245,245,245);
+}
+

projects/common/src/fm/components/app/app.component.ts

@@ -36,6 +36,7 @@ export class AppComponent implements OnInit, OnDestroy {
   public fileDroptarget: any;
   public fullScreen: Observable<boolean>;
   public routeLoading: Observable<boolean>;
+  public menuVisible:Observable<boolean>;
 
   constructor(
     private router: Router,
@@ -88,6 +89,7 @@ export class AppComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.fullScreen = this.store.select(appReducers.selectGetFullScreen);
     this.routeLoading = this.store.select(appReducers.selectGetRouteLoading);
+    this.menuVisible = this.store.select(appReducers.SelectGetMenuVisible);
     this.InstallRouteEventHandler();
     this.InstallEventServiceEventHandler();
   }
@@ -129,5 +131,13 @@ export class AppComponent implements OnInit, OnDestroy {
   handleClick(event: MouseEvent) {
     this.store.dispatch(new commonActions.Escape(false,true));
   }  
+
+  handleStopBubble(event: MouseEvent) {
+    event.stopPropagation();
+  }  
+
+  handleToggleMenu(event) {
+    this.store.dispatch(new commonActions.ToggleMenu());
+  }
 }
 

projects/common/src/fm/components/side-panel/side-panel.component.html

@@ -1,14 +1,14 @@
-<div class="side-panel hidden collapsed" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing }" [ngStyle]="{'top':top}">
+<div class="side-panel hidden collapsed left" [ngClass]="{'hidden':!visible,'collapsed':collapsed,'resizeable':(resizeable && mobile),'resizing':resizing,'left':left}" [ngStyle]="{'top':top}">
-  <div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
+  <div *ngIf="collapsable" class="arrow rounded-right p-2" (click)="handleToggleClick($event)">
-    <i class="fa fa-chevron-left" aria-hidden="true"></i>
+    <i class="fa fa-chevron-left" aria-hidden="true"></i>
-  </div>
+  </div>
-  <div  draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">
+  <div  draggable="true" class="resizegrip" (dragstart)="handleStartGripDrag($event)" (touchstart)="handleStartGripDrag($event)" (dragend)="handleEndGripDrag()" (touchend)="handleEndGripDrag()" (drag)="handleGripDrag($event)" (touchmove)="handleGripDrag($event)">
-    <div></div>
+    <div></div>
-     <span class="rounded"></span>
+     <span class="rounded"></span>
-  </div>
+  </div>
-  <div class="content">
+  <div class="content">
-    <ng-content>
+    <ng-content>
-
+
-    </ng-content>
+    </ng-content>
-  </div>
+  </div>
-</div>
+</div>

projects/common/src/fm/components/side-panel/side-panel.component.scss

@@ -1,100 +1,113 @@
-.side-panel {
+.side-panel {
-  position: absolute;
+  position: absolute;
-  bottom: 0px;
+  bottom: 0px;
-  width: 100%;
+  width: 100%;
-  left: 0px;
+  left: 0px;
-  top:50%;
+  top:50%;
-  transition: left 0.3s, top 0.3s;
+  transition: left 0.3s, top 0.3s;
-  background-color: white;
+  background-color: white;
-  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-}
+}
-
+
-.side-panel.resizing {
+.side-panel.resizing {
-  transition: left 0s, top 0s;
+  transition: left 0s, top 0s;
-}
+}
-
+
-.side-panel.collapsed {
+.side-panel.collapsed {
-  left:-22rem;
+  left:-22rem;
-}
+}
-
+
-.arrow {
+.arrow {
-  position: absolute;
+  position: absolute;
-  top: 1rem;
+  top: 1rem;
-  left: 100%;  
+  left: 100%;  
-  background-color: inherit;
+  background-color: inherit;
-  cursor:pointer;
+  cursor:pointer;
-}
+}
-
+
-.arrow i {
+.arrow i {
-  transition: transform 0.3s;
+  transition: transform 0.3s;
-}
+}
-
+
-.collapsed .arrow i {
+.collapsed .arrow i {
-  -webkit-transform: rotate(180deg);
+  -webkit-transform: rotate(180deg);
-  transform: rotate(180deg);
+  transform: rotate(180deg);
-}
+}
-
+
-.side-panel.hidden {
+.side-panel.hidden {
-  top:100%;
+  top:100%;
-}
+}
-
+
-.content {
+.content {
-  height:100% ;
+  height:100% ;
-  width:100%;
+  width:100%;
-  overflow:hidden;
+  overflow:hidden;
-  overflow-y:auto;
+  overflow-y:auto;
-  position: relative;
+  position: relative;
-  z-index: 1;
+  z-index: 1;
-  background-color: rgb(255,255,255);
+  background-color: rgb(255,255,255);
-}
+}
-
+
-.resizegrip {
+.resizegrip {
-  height:2rem;
+  height:2rem;
-  line-height: 1rem;
+  line-height: 1rem;
-  display: none;
+  display: none;
-  text-align: center;
+  text-align: center;
-  position: relative;
+  position: relative;
-  z-index: 2; 
+  z-index: 2; 
-}
+}
-div.resizegrip > div {
+div.resizegrip > div {
-  position: absolute;
+  position: absolute;
-  top:0px;
+  top:0px;
-  height: 1rem;
+  height: 1rem;
-  width: 100%;
+  width: 100%;
-  background-color: rgb(255,255,255);
+  background-color: rgb(255,255,255);
-}
+}
-
+
-div.resizegrip > span {
+div.resizegrip > span {
-  position: relative;
+  position: relative;
-  display: inline-block;
+  display: inline-block;
-  height:0.3rem;
+  height:0.3rem;
-  width:4rem;
+  width:4rem;
-  background-color:rgba(0, 0, 0, 0.3);
+  background-color:rgba(0, 0, 0, 0.3);
-  top:-0.3rem;
+  top:-0.3rem;
-}
+}
-
+
-.resizeable .resizegrip {
+.resizeable .resizegrip {
-  display:block;
+  display:block;
-  
+  
-}
+}
-
+
-.resizeable .content {
+.resizeable .content {
-  height:calc(100% - 1rem);
+  height:calc(100% - 1rem);
-  top:-1rem;
+  top:-1rem;
-}
+}
-
+
-@media screen and (min-width:44rem) {
+@media screen and (min-width:44rem) {
-  .side-panel {
+  .side-panel {
-    top:0px;
+    top:0px;
-    width: 22rem;
+    width: 22rem;
-    height:100%;
+    height:100%;
-    left:0px;
+    left:0px;
-  }
+  }
-
+
-  .side-panel.hidden {
+  .side-panel.hidden {
-    width: 22rem;
+    width: 22rem;
-    left:-24rem;
+    left:-24rem;
-    height:100%;
+    height:100%;
-  }
+  }  
-
+}
-}
+
+
+.side-panel.left {
+  top:0px;
+  width: 22rem;
+  height:100%;
+  left:0px;
+}
+
+.side-panel.left.hidden {
+  width: 22rem;
+  left:-24rem;
+  height:100%;
+}  

projects/common/src/fm/components/side-panel/side-panel.component.ts

@@ -12,6 +12,7 @@ export class SidePanelComponent  implements OnChanges {
   @Input() public collapsed: boolean;
   @Input() public collapsable: boolean;
   @Input() public resizeable: boolean = false;
+  @Input() public left: boolean = false;
   @ViewChild("resizeGrip", { static: false }) elementView: ElementRef;
   public mobile:boolean = true;
   private parentHeight:number = 0;
@@ -32,7 +33,7 @@ export class SidePanelComponent  implements OnChanges {
   }
 
   setTop() {
-    this.mobile = this.checkMobile();
+    this.mobile = this.checkMobile() && ! this.left;
     this.resizeTop = this.mobile?50:0;
     this.top =  (this.visible?this.resizeTop: (this.mobile? 100:0)) + "%";
   }

projects/common/src/fm/reducers/app-common.reducer.ts

@@ -1,95 +1,109 @@
-import { tassign } from 'tassign';
+import { tassign } from 'tassign';
-import { IItemTypes} from '../models/item.types';
+import { IItemTypes} from '../models/item.types';
-import { IListItem } from '../models/list.item';
+import { IListItem } from '../models/list.item';
-import { IUser } from '../models/user';
+import { IUser } from '../models/user';
-import * as appCommonActions from '../actions/app-common.actions';
+import * as appCommonActions from '../actions/app-common.actions';
-import { createSelector, createFeatureSelector, ActionReducerMap } from '@ngrx/store';
+import { createSelector, createFeatureSelector, ActionReducerMap } from '@ngrx/store';
-
+
-import { MODULE_NAME } from '../module-name';
+import { MODULE_NAME } from '../module-name';
-
+
-export interface State {
+export interface State {
-  openedModalName: string,
+  openedModalName: string,
-  initialized: boolean,
+  initialized: boolean,
-  rootItems: IListItem[],
+  rootItems: IListItem[],
-  itemTypes: IItemTypes,
+  itemTypes: IItemTypes,
-  user:IUser,
+  user:IUser,
-  fullScreen: boolean,
+  fullScreen: boolean,
-  routeLoading:boolean
+  routeLoading:boolean,
-}
+  menuVisible: boolean,
-
+}
-export const initialState: State = {
+
-  openedModalName: null,
+export const initialState: State = {
-  initialized: false,
+  openedModalName: null,
-  rootItems: [],
+  initialized: false,
-  itemTypes: {},
+  rootItems: [],
-  user:null,
+  itemTypes: {},
-  fullScreen: true,
+  user:null,
-  routeLoading: false
+  fullScreen: true,
-}
+  routeLoading: false,
-
+  menuVisible: true
-export function reducer(state = initialState, action: appCommonActions.Actions ): State {
+}
-  switch (action.type) {
+
-    case appCommonActions.INITUSERSUCCESS: {
+export function reducer(state = initialState, action: appCommonActions.Actions ): State {
-      let a = action as appCommonActions.InitUserSuccess;
+  switch (action.type) {
-      return tassign(state, { user: a.user });
+    case appCommonActions.INITUSERSUCCESS: {
-    }
+      let a = action as appCommonActions.InitUserSuccess;
-    case appCommonActions.INITROOTSUCCESS: {
+      return tassign(state, { user: a.user });
-      let a = action as appCommonActions.InitRootSuccess;
+    }
-      return tassign(state, { rootItems:a.items});
+    case appCommonActions.INITROOTSUCCESS: {
-    }
+      let a = action as appCommonActions.InitRootSuccess;
-    case appCommonActions.OPENMODAL: {
+      return tassign(state, { rootItems:a.items});
-      return tassign(state, { openedModalName: action.modalName });
+    }
-    }      
+    case appCommonActions.OPENMODAL: {
-    case appCommonActions.CLOSEMODAL: {
+      return tassign(state, { openedModalName: action.modalName });
-      return tassign(state, { openedModalName: null });
+    }      
-    }
+    case appCommonActions.CLOSEMODAL: {
-    case appCommonActions.INITIALIZED: {
+      return tassign(state, { openedModalName: null });
-      return tassign(state, { initialized: true });
+    }
-    }
+    case appCommonActions.INITIALIZED: {
-    case appCommonActions.LOADITEMTYPESSUCCESS: {
+      return tassign(state, { initialized: true });
-      let a = action as appCommonActions.LoadItemTypesSuccess;
+    }
-      return tassign(state, { itemTypes: a.itemTypes });
+    case appCommonActions.LOADITEMTYPESSUCCESS: {
-    }
+      let a = action as appCommonActions.LoadItemTypesSuccess;
-    case appCommonActions.FULLSCREEN: {
+      return tassign(state, { itemTypes: a.itemTypes });
-      return tassign(state, {
+    }
-        fullScreen:true
+    case appCommonActions.FULLSCREEN: {
-      });
+      return tassign(state, {
-    }
+        fullScreen:true
-    case appCommonActions.SHOWNAVBAR: {
+      });
-      return tassign(state, {
+    }
-        fullScreen: false
+    case appCommonActions.SHOWNAVBAR: {
-      });
+      return tassign(state, {
-    }
+        fullScreen: false
-    case appCommonActions.STARTROUTELOADING: {
+      });
-      return tassign(state, {
+    }
-        routeLoading: true
+    case appCommonActions.STARTROUTELOADING: {
-      });
+      return tassign(state, {
-    }
+        routeLoading: true
-    case appCommonActions.ENDROUTELOADING: {
+      });
-      return tassign(state, {
+    }
-        routeLoading: false
+    case appCommonActions.ENDROUTELOADING: {
-      });
+      return tassign(state, {
-    }
+        routeLoading: false
-    default: {
+      });
-      return state;
+    }
-    }
+    case appCommonActions.TOGGLEMENU: {
-  }
+      return tassign(state, { menuVisible: !state.menuVisible });
-}
+    }
-
+    case appCommonActions.ESCAPE: {
-export const getOpenedModalName = (state: State) => state.openedModalName;
+      return tassign(state, { menuVisible: false });
-export const getInitialized = (state: State) => state.initialized;
+    }
-export const getItemTypes = (state: State) => state.itemTypes;
+    case appCommonActions.SETMENUVISIBLE: {
-export const getRootItems = (state: State) => state.rootItems;
+      let a = action as appCommonActions.SetMenuVisible;
-export const getFullScreen = (state: State) => state.fullScreen;
+      return tassign(state, { menuVisible: a.visible });
-export const getRouteLoading = (state: State) => state.routeLoading;
+    }
-
+    default: {
-
+      return state;
-export const selectAppCommonState = createFeatureSelector<State>(MODULE_NAME);
+    }
-
+  }
-export const selectOpenedModalName = createSelector(selectAppCommonState, getOpenedModalName);
+}
-export const selectGetInitialized = createSelector(selectAppCommonState, getInitialized);
+
-export const selectGetItemTypes = createSelector(selectAppCommonState, getItemTypes);
+export const getOpenedModalName = (state: State) => state.openedModalName;
-export const selectGetRootItems = createSelector(selectAppCommonState, getRootItems);
+export const getInitialized = (state: State) => state.initialized;
-export const selectGetFullScreen = createSelector(selectAppCommonState, getFullScreen);
+export const getItemTypes = (state: State) => state.itemTypes;
-export const selectGetRouteLoading = createSelector(selectAppCommonState, getRouteLoading);
+export const getRootItems = (state: State) => state.rootItems;
-
+export const getFullScreen = (state: State) => state.fullScreen;
+export const getRouteLoading = (state: State) => state.routeLoading;
+export const getMenuVisible = (state: State) => state.menuVisible;
+
+
+export const selectAppCommonState = createFeatureSelector<State>(MODULE_NAME);
+
+export const selectOpenedModalName = createSelector(selectAppCommonState, getOpenedModalName);
+export const selectGetInitialized = createSelector(selectAppCommonState, getInitialized);
+export const selectGetItemTypes = createSelector(selectAppCommonState, getItemTypes);
+export const selectGetRootItems = createSelector(selectAppCommonState, getRootItems);
+export const selectGetFullScreen = createSelector(selectAppCommonState, getFullScreen);
+export const selectGetRouteLoading = createSelector(selectAppCommonState, getRouteLoading);
+export const SelectGetMenuVisible = createSelector(selectAppCommonState,getMenuVisible);
+

src/app/app-routing.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
+import { RouterModule ,UrlSegment} from '@angular/router';
 
 import { AuthGuard,FullScreenGuard } from '@farmmaps/common';
 import { MapComponent } from '@farmmaps/common-map';
@@ -7,12 +7,26 @@ import { LogoComponent } from './logo/logo.component';
 import { MenuComponent } from './menu/menu.component';
 import {NotImplementedComponent} from '@farmmaps/common';
 
+export function urlMatcher(url: UrlSegment[]) {
+  return {consumed:url};
+}
+
 const routes = [
+  {
+    path: '',
+    component: LogoComponent,
+    outlet: 'side-panel-logo'
+  },
+  {
+    path: '',
+    component: MenuComponent,
+    outlet: 'side-panel-menu'
+  },
   {
     path: '',
     redirectTo: 'map',
     pathMatch: 'full'
-  },
+  },  
   {
     path:'editor/:type/item/:itemcode',
     component: NotImplementedComponent
@@ -28,21 +42,9 @@ const routes = [
     },
     {
         path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState',
-        component: MapComponent,
+        component: MapComponent       
-        children:[
+    }    
-          {
+   ]}
-            path: '',
-            component: LogoComponent,
-            outlet: 'side-panel-logo'
-          },
-          {
-            path: '',
-            component: MenuComponent,
-            outlet: 'side-panel-menu'
-          }
-        ]
-    }
-   ]},  
 ];
 
 @NgModule({