From 58f7c99ddc311108d4b4e2a13270f1b745078867 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Mon, 6 Jan 2020 18:36:47 +0100 Subject: [PATCH 1/6] Store mapstate in localstorage --- .../src/fm-map/common-map.module.ts | 24 +++++++++++++++++-- .../fm-map/components/map/map.component.ts | 1 + 2 files changed, 23 insertions(+), 2 deletions(-) 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 1db6307..7b6b2fa 100644 --- a/projects/common-map/src/fm-map/common-map.module.ts +++ b/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): ActionReducer { + 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> = [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 { diff --git a/projects/common-map/src/fm-map/components/map/map.component.ts b/projects/common-map/src/fm-map/components/map/map.component.ts index 05159c3..7de5ad3 100644 --- a/projects/common-map/src/fm-map/components/map/map.component.ts +++ b/projects/common-map/src/fm-map/components/map/map.component.ts @@ -175,6 +175,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"); From e077aa34dfed3f46e761035c26bf1a24bf5f000d Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 7 Jan 2020 16:33:56 +0100 Subject: [PATCH 2/6] Refactor menu panel --- .../src/fm/actions/app-common.actions.ts | 11 +- .../src/fm/components/app/app.component.html | 41 ++-- .../src/fm/components/app/app.component.ts | 6 + .../src/fm/reducers/app-common.reducer.ts | 197 +++++++++--------- 4 files changed, 145 insertions(+), 110 deletions(-) diff --git a/projects/common/src/fm/actions/app-common.actions.ts b/projects/common/src/fm/actions/app-common.actions.ts index d3579f9..cb7f844 100644 --- a/projects/common/src/fm/actions/app-common.actions.ts +++ b/projects/common/src/fm/actions/app-common.actions.ts @@ -46,6 +46,8 @@ export const FAIL = '[AppCommon] Fail'; export const UPLOADEDFILECLICK = '[AppCommon] UploadedFileClick'; +export const TOGGLEMENU = '[AppCommon] ToggleMenu'; + export class InitUser implements Action { readonly type = INITUSER; @@ -212,6 +214,12 @@ export class UploadedFileClick implements Action { readonly type = UPLOADEDFILECLICK; constructor(public itemCode:string) { } } + +export class ToggleMenu implements Action { + readonly type = TOGGLEMENU; + + constructor() { } +} export type Actions = OpenModal @@ -240,4 +248,5 @@ export type Actions = OpenModal | TaskStartEvent | TaskEndEvent | TaskErrorEvent - | DeviceUpdateEvent; + | DeviceUpdateEvent + | ToggleMenu; diff --git a/projects/common/src/fm/components/app/app.component.html b/projects/common/src/fm/components/app/app.component.html index 8667157..1072e29 100644 --- a/projects/common/src/fm/components/app/app.component.html +++ b/projects/common/src/fm/components/app/app.component.html @@ -1,14 +1,27 @@ -
- -
- -
- -
+
+ +
+ +
+ +
+
+
+ +
+
+
+ +
+
+
+ + +
diff --git a/projects/common/src/fm/components/app/app.component.ts b/projects/common/src/fm/components/app/app.component.ts index b862849..2ea7e97 100644 --- a/projects/common/src/fm/components/app/app.component.ts +++ b/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; public routeLoading: Observable; + public menuVisible:Observable; 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,9 @@ export class AppComponent implements OnInit, OnDestroy { handleClick(event: MouseEvent) { this.store.dispatch(new commonActions.Escape(false,true)); } + + handleToggleMenu(event) { + this.store.dispatch(new commonActions.ToggleMenu()); + } } diff --git a/projects/common/src/fm/reducers/app-common.reducer.ts b/projects/common/src/fm/reducers/app-common.reducer.ts index 835a580..4c3c89b 100644 --- a/projects/common/src/fm/reducers/app-common.reducer.ts +++ b/projects/common/src/fm/reducers/app-common.reducer.ts @@ -1,95 +1,102 @@ -import { tassign } from 'tassign'; -import { IItemTypes} from '../models/item.types'; -import { IListItem } from '../models/list.item'; -import { IUser } from '../models/user'; -import * as appCommonActions from '../actions/app-common.actions'; -import { createSelector, createFeatureSelector, ActionReducerMap } from '@ngrx/store'; - -import { MODULE_NAME } from '../module-name'; - -export interface State { - openedModalName: string, - initialized: boolean, - rootItems: IListItem[], - itemTypes: IItemTypes, - user:IUser, - fullScreen: boolean, - routeLoading:boolean -} - -export const initialState: State = { - openedModalName: null, - initialized: false, - rootItems: [], - itemTypes: {}, - user:null, - fullScreen: true, - routeLoading: false -} - -export function reducer(state = initialState, action: appCommonActions.Actions ): State { - switch (action.type) { - case appCommonActions.INITUSERSUCCESS: { - let a = action as appCommonActions.InitUserSuccess; - return tassign(state, { user: a.user }); - } - case appCommonActions.INITROOTSUCCESS: { - let a = action as appCommonActions.InitRootSuccess; - return tassign(state, { rootItems:a.items}); - } - case appCommonActions.OPENMODAL: { - return tassign(state, { openedModalName: action.modalName }); - } - case appCommonActions.CLOSEMODAL: { - return tassign(state, { openedModalName: null }); - } - case appCommonActions.INITIALIZED: { - return tassign(state, { initialized: true }); - } - case appCommonActions.LOADITEMTYPESSUCCESS: { - let a = action as appCommonActions.LoadItemTypesSuccess; - return tassign(state, { itemTypes: a.itemTypes }); - } - case appCommonActions.FULLSCREEN: { - return tassign(state, { - fullScreen:true - }); - } - case appCommonActions.SHOWNAVBAR: { - return tassign(state, { - fullScreen: false - }); - } - case appCommonActions.STARTROUTELOADING: { - return tassign(state, { - routeLoading: true - }); - } - case appCommonActions.ENDROUTELOADING: { - return tassign(state, { - routeLoading: false - }); - } - default: { - return state; - } - } -} - -export const getOpenedModalName = (state: State) => state.openedModalName; -export const getInitialized = (state: State) => state.initialized; -export const getItemTypes = (state: State) => state.itemTypes; -export const getRootItems = (state: State) => state.rootItems; -export const getFullScreen = (state: State) => state.fullScreen; -export const getRouteLoading = (state: State) => state.routeLoading; - - -export const selectAppCommonState = createFeatureSelector(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); - +import { tassign } from 'tassign'; +import { IItemTypes} from '../models/item.types'; +import { IListItem } from '../models/list.item'; +import { IUser } from '../models/user'; +import * as appCommonActions from '../actions/app-common.actions'; +import { createSelector, createFeatureSelector, ActionReducerMap } from '@ngrx/store'; + +import { MODULE_NAME } from '../module-name'; + +export interface State { + openedModalName: string, + initialized: boolean, + rootItems: IListItem[], + itemTypes: IItemTypes, + user:IUser, + fullScreen: boolean, + routeLoading:boolean, + menuVisible: boolean, +} + +export const initialState: State = { + openedModalName: null, + initialized: false, + rootItems: [], + itemTypes: {}, + user:null, + fullScreen: true, + routeLoading: false, + menuVisible: true +} + +export function reducer(state = initialState, action: appCommonActions.Actions ): State { + switch (action.type) { + case appCommonActions.INITUSERSUCCESS: { + let a = action as appCommonActions.InitUserSuccess; + return tassign(state, { user: a.user }); + } + case appCommonActions.INITROOTSUCCESS: { + let a = action as appCommonActions.InitRootSuccess; + return tassign(state, { rootItems:a.items}); + } + case appCommonActions.OPENMODAL: { + return tassign(state, { openedModalName: action.modalName }); + } + case appCommonActions.CLOSEMODAL: { + return tassign(state, { openedModalName: null }); + } + case appCommonActions.INITIALIZED: { + return tassign(state, { initialized: true }); + } + case appCommonActions.LOADITEMTYPESSUCCESS: { + let a = action as appCommonActions.LoadItemTypesSuccess; + return tassign(state, { itemTypes: a.itemTypes }); + } + case appCommonActions.FULLSCREEN: { + return tassign(state, { + fullScreen:true + }); + } + case appCommonActions.SHOWNAVBAR: { + return tassign(state, { + fullScreen: false + }); + } + case appCommonActions.STARTROUTELOADING: { + return tassign(state, { + routeLoading: true + }); + } + case appCommonActions.ENDROUTELOADING: { + return tassign(state, { + routeLoading: false + }); + } + case appCommonActions.TOGGLEMENU: { + return tassign(state, { menuVisible: !state.menuVisible }); + } + default: { + return state; + } + } +} + +export const getOpenedModalName = (state: State) => state.openedModalName; +export const getInitialized = (state: State) => state.initialized; +export const getItemTypes = (state: State) => state.itemTypes; +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(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); + From 73550b3201bd5a48416f9d9f244f9e1e216f8b4a Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 7 Jan 2020 21:43:48 +0100 Subject: [PATCH 3/6] Some menu fixes --- .../src/fm/actions/app-common.actions.ts | 11 +- .../src/fm/components/app/app.component.html | 2 +- .../src/fm/components/app/app.component.scss | 149 ++++++------ .../src/fm/components/app/app.component.ts | 4 + .../side-panel/side-panel.component.html | 28 +-- .../side-panel/side-panel.component.scss | 213 ++++++++++-------- .../side-panel/side-panel.component.ts | 3 +- .../src/fm/reducers/app-common.reducer.ts | 7 + 8 files changed, 228 insertions(+), 189 deletions(-) diff --git a/projects/common/src/fm/actions/app-common.actions.ts b/projects/common/src/fm/actions/app-common.actions.ts index cb7f844..d982659 100644 --- a/projects/common/src/fm/actions/app-common.actions.ts +++ b/projects/common/src/fm/actions/app-common.actions.ts @@ -48,6 +48,8 @@ export const UPLOADEDFILECLICK = '[AppCommon] UploadedFileClick'; export const TOGGLEMENU = '[AppCommon] ToggleMenu'; +export const SETMENUVISIBLE = '[AppCommon] SetMenuVisible'; + export class InitUser implements Action { readonly type = INITUSER; @@ -220,6 +222,12 @@ export class ToggleMenu implements Action { constructor() { } } + +export class SetMenuVisible implements Action { + readonly type = SETMENUVISIBLE; + + constructor(public visible:boolean) { } +} export type Actions = OpenModal @@ -249,4 +257,5 @@ export type Actions = OpenModal | TaskEndEvent | TaskErrorEvent | DeviceUpdateEvent - | ToggleMenu; + | ToggleMenu + | SetMenuVisible; diff --git a/projects/common/src/fm/components/app/app.component.html b/projects/common/src/fm/components/app/app.component.html index 1072e29..66318d2 100644 --- a/projects/common/src/fm/components/app/app.component.html +++ b/projects/common/src/fm/components/app/app.component.html @@ -10,7 +10,7 @@
- +
diff --git a/projects/common/src/fm/components/app/app.component.scss b/projects/common/src/fm/components/app/app.component.scss index d54f415..efbeda2 100644 --- a/projects/common/src/fm/components/app/app.component.scss +++ b/projects/common/src/fm/components/app/app.component.scss @@ -1,72 +1,77 @@ -//@import "theme.scss"; - -/* Import Bootstrap & Fonts */ - -@import "~bootstrap/scss/bootstrap.scss"; - - -// custom styles - -.btn:focus { - box-shadow:none; -} - -.input-group > .form-control:focus { - z-index: auto; -} - -.form-control:focus { - box-shadow: none; - border-color: $input-border-color; -} - - -/* *** Overall APP Styling can go here *** - -------------------------------------------- - Note: This Component has ViewEncapsulation.None so the styles will bleed out - -*/ - -body { background: #f1f1f1; line-height: 18px; user-select:none;} - -.navbar-brand { - padding-top: .5rem; - padding-bottom: .5rem; -} - -.app { - width:100vw; - height:100vh; -} - -.app > .navbar { - position: absolute; - transition: top 0.5s ease-out; - top:0; - left: 0; - right: 0; - height: 3.1rem; -} - -.app > .body { - position: absolute; - transition: top 0.5s ease-out; - top: 3.1rem; - bottom: 0; - left: 0; - right: 0; - overflow:hidden; -} - -.app.fullscreen > .navbar { - top: -3.1rem; -} - -.app.fullscreen > .body { - top:0; -} - -.btn-primary, .btn-primary:hover { - color: #ffffff; -} - +//@import "theme.scss"; + +/* Import Bootstrap & Fonts */ + +@import "~bootstrap/scss/bootstrap.scss"; + + +// custom styles + +.btn:focus { + box-shadow:none; +} + +.input-group > .form-control:focus { + z-index: auto; +} + +.form-control:focus { + box-shadow: none; + border-color: $input-border-color; +} + + +/* *** Overall APP Styling can go here *** + -------------------------------------------- + Note: This Component has ViewEncapsulation.None so the styles will bleed out + +*/ + +body { background: #f1f1f1; line-height: 18px; user-select:none;} + +.navbar-brand { + padding-top: .5rem; + padding-bottom: .5rem; +} + +.app { + width:100vw; + height:100vh; +} + +.app > .navbar { + position: absolute; + transition: top 0.5s ease-out; + top:0; + left: 0; + right: 0; + height: 3.1rem; +} + +.app > .body { + position: absolute; + transition: top 0.5s ease-out; + top: 3.1rem; + bottom: 0; + left: 0; + right: 0; + overflow:hidden; +} + +.app.fullscreen > .navbar { + top: -3.1rem; +} + +.app.fullscreen > .body { + top:0; +} + +.btn-primary, .btn-primary:hover { + color: #ffffff; +} + +.menu .side-panel { + z-index: 100; + background-color: rgb(245,245,245); +} + diff --git a/projects/common/src/fm/components/app/app.component.ts b/projects/common/src/fm/components/app/app.component.ts index 2ea7e97..78c15d2 100644 --- a/projects/common/src/fm/components/app/app.component.ts +++ b/projects/common/src/fm/components/app/app.component.ts @@ -132,6 +132,10 @@ export class AppComponent implements OnInit, OnDestroy { this.store.dispatch(new commonActions.Escape(false,true)); } + handleStopBubble(event: MouseEvent) { + event.stopPropagation(); + } + handleToggleMenu(event) { this.store.dispatch(new commonActions.ToggleMenu()); } diff --git a/projects/common/src/fm/components/side-panel/side-panel.component.html b/projects/common/src/fm/components/side-panel/side-panel.component.html index 70253e1..90364aa 100644 --- a/projects/common/src/fm/components/side-panel/side-panel.component.html +++ b/projects/common/src/fm/components/side-panel/side-panel.component.html @@ -1,14 +1,14 @@ - + diff --git a/projects/common/src/fm/components/side-panel/side-panel.component.scss b/projects/common/src/fm/components/side-panel/side-panel.component.scss index d1f201b..2222f65 100644 --- a/projects/common/src/fm/components/side-panel/side-panel.component.scss +++ b/projects/common/src/fm/components/side-panel/side-panel.component.scss @@ -1,100 +1,113 @@ -.side-panel { - position: absolute; - bottom: 0px; - width: 100%; - left: 0px; - top:50%; - transition: left 0.3s, top 0.3s; - background-color: white; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); -} - -.side-panel.resizing { - transition: left 0s, top 0s; -} - -.side-panel.collapsed { - left:-22rem; -} - -.arrow { - position: absolute; - top: 1rem; - left: 100%; - background-color: inherit; - cursor:pointer; -} - -.arrow i { - transition: transform 0.3s; -} - -.collapsed .arrow i { - -webkit-transform: rotate(180deg); - transform: rotate(180deg); -} - -.side-panel.hidden { - top:100%; -} - -.content { - height:100% ; - width:100%; - overflow:hidden; - overflow-y:auto; - position: relative; - z-index: 1; - background-color: rgb(255,255,255); -} - -.resizegrip { - height:2rem; - line-height: 1rem; - display: none; - text-align: center; - position: relative; - z-index: 2; -} -div.resizegrip > div { - position: absolute; - top:0px; - height: 1rem; - width: 100%; - background-color: rgb(255,255,255); -} - -div.resizegrip > span { - position: relative; - display: inline-block; - height:0.3rem; - width:4rem; - background-color:rgba(0, 0, 0, 0.3); - top:-0.3rem; -} - -.resizeable .resizegrip { - display:block; - -} - -.resizeable .content { - height:calc(100% - 1rem); - top:-1rem; -} - -@media screen and (min-width:44rem) { - .side-panel { - top:0px; - width: 22rem; - height:100%; - left:0px; - } - - .side-panel.hidden { - width: 22rem; - left:-24rem; - height:100%; - } - -} +.side-panel { + position: absolute; + bottom: 0px; + width: 100%; + left: 0px; + top:50%; + transition: left 0.3s, top 0.3s; + background-color: white; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); +} + +.side-panel.resizing { + transition: left 0s, top 0s; +} + +.side-panel.collapsed { + left:-22rem; +} + +.arrow { + position: absolute; + top: 1rem; + left: 100%; + background-color: inherit; + cursor:pointer; +} + +.arrow i { + transition: transform 0.3s; +} + +.collapsed .arrow i { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} + +.side-panel.hidden { + top:100%; +} + +.content { + height:100% ; + width:100%; + overflow:hidden; + overflow-y:auto; + position: relative; + z-index: 1; + background-color: rgb(255,255,255); +} + +.resizegrip { + height:2rem; + line-height: 1rem; + display: none; + text-align: center; + position: relative; + z-index: 2; +} +div.resizegrip > div { + position: absolute; + top:0px; + height: 1rem; + width: 100%; + background-color: rgb(255,255,255); +} + +div.resizegrip > span { + position: relative; + display: inline-block; + height:0.3rem; + width:4rem; + background-color:rgba(0, 0, 0, 0.3); + top:-0.3rem; +} + +.resizeable .resizegrip { + display:block; + +} + +.resizeable .content { + height:calc(100% - 1rem); + top:-1rem; +} + +@media screen and (min-width:44rem) { + .side-panel { + top:0px; + width: 22rem; + height:100%; + left:0px; + } + + .side-panel.hidden { + width: 22rem; + left:-24rem; + height:100%; + } +} + + +.side-panel.left { + top:0px; + width: 22rem; + height:100%; + left:0px; +} + +.side-panel.left.hidden { + width: 22rem; + left:-24rem; + height:100%; +} \ No newline at end of file diff --git a/projects/common/src/fm/components/side-panel/side-panel.component.ts b/projects/common/src/fm/components/side-panel/side-panel.component.ts index 9d07ecc..86d0e00 100644 --- a/projects/common/src/fm/components/side-panel/side-panel.component.ts +++ b/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)) + "%"; } diff --git a/projects/common/src/fm/reducers/app-common.reducer.ts b/projects/common/src/fm/reducers/app-common.reducer.ts index 4c3c89b..1cf9c94 100644 --- a/projects/common/src/fm/reducers/app-common.reducer.ts +++ b/projects/common/src/fm/reducers/app-common.reducer.ts @@ -75,6 +75,13 @@ export function reducer(state = initialState, action: appCommonActions.Actions ) case appCommonActions.TOGGLEMENU: { return tassign(state, { menuVisible: !state.menuVisible }); } + case appCommonActions.ESCAPE: { + return tassign(state, { menuVisible: false }); + } + case appCommonActions.SETMENUVISIBLE: { + let a = action as appCommonActions.SetMenuVisible; + return tassign(state, { menuVisible: a.visible }); + } default: { return state; } From bf0dc15a0057ee2b23ad77f036a888333a007871 Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 7 Jan 2020 22:27:46 +0100 Subject: [PATCH 4/6] Refactor map for menu removal --- projects/common-map/package.json | 2 +- .../src/fm-map/actions/map.actions.ts | 478 +++++++++--------- .../src/fm-map/common-map-routing.module.ts | 58 +-- .../fm-map/components/map/map.component.html | 14 - .../fm-map/components/map/map.component.scss | 338 ++++++------- .../fm-map/components/map/map.component.ts | 3 +- .../src/fm-map/effects/map.effects.ts | 4 +- .../src/fm-map/reducers/map.reducer.ts | 14 +- 8 files changed, 437 insertions(+), 474 deletions(-) diff --git a/projects/common-map/package.json b/projects/common-map/package.json index 1051958..931ab89 100644 --- a/projects/common-map/package.json +++ b/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" } } diff --git a/projects/common-map/src/fm-map/actions/map.actions.ts b/projects/common-map/src/fm-map/actions/map.actions.ts index ce963ca..fb4b0ab 100644 --- a/projects/common-map/src/fm-map/actions/map.actions.ts +++ b/projects/common-map/src/fm-map/actions/map.actions.ts @@ -1,243 +1,235 @@ -import { Action } from '@ngrx/store'; - -import { IMapState } from '../models/map.state'; -import { IItemLayer } from '../models/item.layer'; -import { IQueryState } from '../models/query.state'; -import { IItem } from '@farmmaps/common'; -import { Feature } from 'ol'; -import { Extent } from 'ol/extent'; - -export const SETSTATE = '[Map] SetState'; -export const SETMAPSTATE = '[Map] MapState'; -export const SETVIEWEXTENT = '[Map] SetViewExtent'; -export const INIT = '[Map] Init'; -export const SETPARENT = '[Map] SetParent'; -export const STARTSEARCH = '[Map] StartSearch'; -export const STARTSEARCHSUCCESS = '[Map] StartSearchSuccess'; -export const SELECTFEATURE = '[Map] SelectFeature'; -export const SELECTITEM = '[Map] SelectItem'; -export const SELECTITEMSUCCESS = '[Map] SelectItemSuccess'; -export const ADDFEATURESUCCESS = '[Map] AddFeatureSuccess'; -export const UPDATEFEATURESUCCESS = '[Map] UpdateFeatureSuccess'; -export const EXPANDSEARCH = '[Map] ExpandSearch'; -export const COLLAPSESEARCH = '[Map] CollapseSearch'; -export const TOGGLEMENU = '[Map] ToggleMenu'; -export const SETEXTENT = '[Map] SetExtent'; -export const SETQUERYSTATE = '[Map] SetQueryState'; -export const SETTIMESPAN = '[Map] SetTimeSpan'; -export const ADDLAYER = '[Map] AddLayer'; -export const SETVISIBILITY = '[Map] SetVisibility'; -export const SETOPACITY = '[Map] SetOpacity'; -export const SETLAYERINDEX = '[Map] SetLayerIndex'; -export const REMOVELAYER = '[Map] RemoveLayer'; -export const LOADBASELAYERS = '[Map] LoadLayers'; -export const LOADBASELAYERSSUCCESS = '[Map] LoadLayersSuccess'; -export const SELECTBASELAYER = '[Map] SelectBaseLayers'; -export const SELECTOVERLAYLAYER = '[Map] SelectOverlayLayers'; -export const ZOOMTOEXTENT = '[Map] ZoomToExtent'; -export const DOQUERY = '[Map] DoQuery'; - -export class SetState implements Action { - readonly type = SETSTATE; - - constructor(public mapState: IMapState,public queryState:IQueryState) { } -} - -export class SetMapState implements Action { - readonly type = SETMAPSTATE; - - constructor(public mapState: IMapState) { } -} - -export class SetViewExtent implements Action { - readonly type = SETVIEWEXTENT; - - constructor(public extent:number[]) { } -} - -export class Init implements Action { - readonly type = INIT; - - constructor() { } -} - -export class SetParent implements Action { - readonly type = SETPARENT; - - constructor(public parentCode:string) { } -} - -export class StartSearch implements Action { - readonly type = STARTSEARCH; - - constructor(public queryState: IQueryState) { } -} - -export class StartSearchSuccess implements Action { - readonly type = STARTSEARCHSUCCESS; - - constructor(public features: Array, public query:IQueryState) { } -} - -export class SelectFeature implements Action { - readonly type = SELECTFEATURE; - - constructor(public feature:Feature) { } -} - -export class SelectItem implements Action { - readonly type = SELECTITEM; - - constructor(public itemCode:string) { } -} - -export class SelectItemSuccess implements Action { - readonly type = SELECTITEMSUCCESS; - - constructor(public item: IItem) { } -} - -export class AddFeatureSuccess implements Action { - readonly type = ADDFEATURESUCCESS; - - constructor(public feature: Feature) { } -} - -export class UpdateFeatureSuccess implements Action { - readonly type = UPDATEFEATURESUCCESS; - - constructor(public feature: Feature) { } -} - -export class ExpandSearch implements Action { - readonly type = EXPANDSEARCH; - - constructor() { } -} - -export class CollapseSearch implements Action { - readonly type = COLLAPSESEARCH; - - constructor() { } -} - -export class ToggleMenu implements Action { - readonly type = TOGGLEMENU; - - constructor() { } -} - -export class SetExtent implements Action { - readonly type = SETEXTENT; - - constructor(public extent:number[]) { } -} - -export class SetQueryState implements Action { - readonly type = SETQUERYSTATE; - - constructor(public queryState: IQueryState) { } -} - -export class SetTimeSpan implements Action { - readonly type = SETTIMESPAN; - - constructor(public startDate: Date, public endDate: Date) { } -} - -export class AddLayer implements Action { - readonly type = ADDLAYER; - - constructor(public item:IItem,public layerIndex=-1) { } -} - -export class SetVisibility implements Action { - readonly type = SETVISIBILITY; - - constructor(public itemLayer:IItemLayer,public visibility:boolean) { } -} - -export class SetOpacity implements Action { - readonly type = SETOPACITY; - - constructor(public itemLayer: IItemLayer, public opacity: number) { } -} - -export class SetLayerIndex implements Action { - readonly type = SETLAYERINDEX; - - constructor(public layerIndex: number, public itemLayer: IItemLayer = null) { } -} - -export class RemoveLayer implements Action { - readonly type = REMOVELAYER; - - constructor(public itemLayer: IItemLayer) { } -} - -export class LoadBaseLayers implements Action { - readonly type = LOADBASELAYERS; - - constructor(public projection: string) { } -} - -export class LoadBaseLayersSuccess implements Action { - readonly type = LOADBASELAYERSSUCCESS; - - constructor(public items: IItem[] ) { } -} - -export class SelectBaseLayer implements Action { - readonly type = SELECTBASELAYER; - - constructor(public itemLayer: IItemLayer) { } -} - -export class SelectOverlayLayer implements Action { - readonly type = SELECTOVERLAYLAYER; - - constructor(public itemLayer: IItemLayer) { } -} - -export class ZoomToExtent implements Action { - readonly type = ZOOMTOEXTENT; - - constructor(public itemLayer: IItemLayer) { } -} - -export class DoQuery implements Action { - readonly type = DOQUERY; - - constructor(public query:IQueryState) { } -} - -export type Actions = SetMapState - | Init - | SetParent - | StartSearch - | StartSearchSuccess - | SelectFeature - | SelectItem - | SelectItemSuccess - | AddFeatureSuccess - | UpdateFeatureSuccess - | ExpandSearch - | CollapseSearch - | ToggleMenu - | SetExtent - | SetQueryState - | SetTimeSpan - | AddLayer - | RemoveLayer - | SetVisibility - | SetOpacity - | SetLayerIndex - | LoadBaseLayers - | LoadBaseLayersSuccess - | SelectBaseLayer - | SelectOverlayLayer - | ZoomToExtent - | SetState - | SetViewExtent - | DoQuery; - +import { Action } from '@ngrx/store'; + +import { IMapState } from '../models/map.state'; +import { IItemLayer } from '../models/item.layer'; +import { IQueryState } from '../models/query.state'; +import { IItem } from '@farmmaps/common'; +import { Feature } from 'ol'; +import { Extent } from 'ol/extent'; + +export const SETSTATE = '[Map] SetState'; +export const SETMAPSTATE = '[Map] MapState'; +export const SETVIEWEXTENT = '[Map] SetViewExtent'; +export const INIT = '[Map] Init'; +export const SETPARENT = '[Map] SetParent'; +export const STARTSEARCH = '[Map] StartSearch'; +export const STARTSEARCHSUCCESS = '[Map] StartSearchSuccess'; +export const SELECTFEATURE = '[Map] SelectFeature'; +export const SELECTITEM = '[Map] SelectItem'; +export const SELECTITEMSUCCESS = '[Map] SelectItemSuccess'; +export const ADDFEATURESUCCESS = '[Map] AddFeatureSuccess'; +export const UPDATEFEATURESUCCESS = '[Map] UpdateFeatureSuccess'; +export const EXPANDSEARCH = '[Map] ExpandSearch'; +export const COLLAPSESEARCH = '[Map] CollapseSearch'; +export const SETEXTENT = '[Map] SetExtent'; +export const SETQUERYSTATE = '[Map] SetQueryState'; +export const SETTIMESPAN = '[Map] SetTimeSpan'; +export const ADDLAYER = '[Map] AddLayer'; +export const SETVISIBILITY = '[Map] SetVisibility'; +export const SETOPACITY = '[Map] SetOpacity'; +export const SETLAYERINDEX = '[Map] SetLayerIndex'; +export const REMOVELAYER = '[Map] RemoveLayer'; +export const LOADBASELAYERS = '[Map] LoadLayers'; +export const LOADBASELAYERSSUCCESS = '[Map] LoadLayersSuccess'; +export const SELECTBASELAYER = '[Map] SelectBaseLayers'; +export const SELECTOVERLAYLAYER = '[Map] SelectOverlayLayers'; +export const ZOOMTOEXTENT = '[Map] ZoomToExtent'; +export const DOQUERY = '[Map] DoQuery'; + +export class SetState implements Action { + readonly type = SETSTATE; + + constructor(public mapState: IMapState,public queryState:IQueryState) { } +} + +export class SetMapState implements Action { + readonly type = SETMAPSTATE; + + constructor(public mapState: IMapState) { } +} + +export class SetViewExtent implements Action { + readonly type = SETVIEWEXTENT; + + constructor(public extent:number[]) { } +} + +export class Init implements Action { + readonly type = INIT; + + constructor() { } +} + +export class SetParent implements Action { + readonly type = SETPARENT; + + constructor(public parentCode:string) { } +} + +export class StartSearch implements Action { + readonly type = STARTSEARCH; + + constructor(public queryState: IQueryState) { } +} + +export class StartSearchSuccess implements Action { + readonly type = STARTSEARCHSUCCESS; + + constructor(public features: Array, public query:IQueryState) { } +} + +export class SelectFeature implements Action { + readonly type = SELECTFEATURE; + + constructor(public feature:Feature) { } +} + +export class SelectItem implements Action { + readonly type = SELECTITEM; + + constructor(public itemCode:string) { } +} + +export class SelectItemSuccess implements Action { + readonly type = SELECTITEMSUCCESS; + + constructor(public item: IItem) { } +} + +export class AddFeatureSuccess implements Action { + readonly type = ADDFEATURESUCCESS; + + constructor(public feature: Feature) { } +} + +export class UpdateFeatureSuccess implements Action { + readonly type = UPDATEFEATURESUCCESS; + + constructor(public feature: Feature) { } +} + +export class ExpandSearch implements Action { + readonly type = EXPANDSEARCH; + + constructor() { } +} + +export class CollapseSearch implements Action { + readonly type = COLLAPSESEARCH; + + constructor() { } +} + +export class SetExtent implements Action { + readonly type = SETEXTENT; + + constructor(public extent:number[]) { } +} + +export class SetQueryState implements Action { + readonly type = SETQUERYSTATE; + + constructor(public queryState: IQueryState) { } +} + +export class SetTimeSpan implements Action { + readonly type = SETTIMESPAN; + + constructor(public startDate: Date, public endDate: Date) { } +} + +export class AddLayer implements Action { + readonly type = ADDLAYER; + + constructor(public item:IItem,public layerIndex=-1) { } +} + +export class SetVisibility implements Action { + readonly type = SETVISIBILITY; + + constructor(public itemLayer:IItemLayer,public visibility:boolean) { } +} + +export class SetOpacity implements Action { + readonly type = SETOPACITY; + + constructor(public itemLayer: IItemLayer, public opacity: number) { } +} + +export class SetLayerIndex implements Action { + readonly type = SETLAYERINDEX; + + constructor(public layerIndex: number, public itemLayer: IItemLayer = null) { } +} + +export class RemoveLayer implements Action { + readonly type = REMOVELAYER; + + constructor(public itemLayer: IItemLayer) { } +} + +export class LoadBaseLayers implements Action { + readonly type = LOADBASELAYERS; + + constructor(public projection: string) { } +} + +export class LoadBaseLayersSuccess implements Action { + readonly type = LOADBASELAYERSSUCCESS; + + constructor(public items: IItem[] ) { } +} + +export class SelectBaseLayer implements Action { + readonly type = SELECTBASELAYER; + + constructor(public itemLayer: IItemLayer) { } +} + +export class SelectOverlayLayer implements Action { + readonly type = SELECTOVERLAYLAYER; + + constructor(public itemLayer: IItemLayer) { } +} + +export class ZoomToExtent implements Action { + readonly type = ZOOMTOEXTENT; + + constructor(public itemLayer: IItemLayer) { } +} + +export class DoQuery implements Action { + readonly type = DOQUERY; + + constructor(public query:IQueryState) { } +} + +export type Actions = SetMapState + | Init + | SetParent + | StartSearch + | StartSearchSuccess + | SelectFeature + | SelectItem + | SelectItemSuccess + | AddFeatureSuccess + | UpdateFeatureSuccess + | ExpandSearch + | CollapseSearch + | SetExtent + | SetQueryState + | SetTimeSpan + | AddLayer + | RemoveLayer + | SetVisibility + | SetOpacity + | SetLayerIndex + | LoadBaseLayers + | LoadBaseLayersSuccess + | SelectBaseLayer + | SelectOverlayLayer + | ZoomToExtent + | SetState + | SetViewExtent + | DoQuery; + diff --git a/projects/common-map/src/fm-map/common-map-routing.module.ts b/projects/common-map/src/fm-map/common-map-routing.module.ts index 752818e..0e4b723 100644 --- a/projects/common-map/src/fm-map/common-map-routing.module.ts +++ b/projects/common-map/src/fm-map/common-map-routing.module.ts @@ -1,29 +1,29 @@ -import { NgModule } from '@angular/core'; -import { RouterModule } from '@angular/router'; -import { MapComponent } from './components/map/map.component'; -import { AuthGuard } from '@farmmaps/common'; - -const routes = [ - { - path: '', canActivateChild: [AuthGuard], children: [ - { - path: '', - component: MapComponent - } - ] - }, - { - path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState', canActivateChild: [AuthGuard], children: [ - { - path: '', - component: MapComponent - } - ] - } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class MapRoutingModule { } +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { MapComponent } from './components/map/map.component'; +import { AuthGuard } from '@farmmaps/common'; + +const routes = [ + { + path: '', canActivateChild: [AuthGuard], children: [ + { + path: '', + component: MapComponent + } + ] + }, + { + path: ':xCenter/:yCenter/:zoom/:rotation/:baseLayer/:queryState', canActivateChild: [AuthGuard], children: [ + { + path: '', + component: MapComponent + } + ] + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class MapRoutingModule { } 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 2b1aad5..fa08752 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 @@ -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 @@
- -
-
-
- -
-
-
- -
-
-
- diff --git a/projects/common-map/src/fm-map/components/map/map.component.scss b/projects/common-map/src/fm-map/components/map/map.component.scss index 6697306..4997c8a 100644 --- a/projects/common-map/src/fm-map/components/map/map.component.scss +++ b/projects/common-map/src/fm-map/components/map/map.component.scss @@ -1,171 +1,167 @@ -@import "../../_theme.scss"; -@import "~bootstrap/scss/bootstrap.scss"; - -aol-map { position:absolute;width:100%;height:100%;} - -.arrow { - top: 3rem; -} - -.popover { - max-height:22rem; - min-width:15rem; -} - -.popover-body { - max-height:19rem; - overflow:hidden; - overflow-y:auto; -} - -.card-title { - font-size:1rem; -} - -.menu-card { - margin-left:-7px; - padding-left:7px; - margin-right:-7px; - padding-right:7px; - margin-bottom:7px; -} - -.icon-top { - font-size: 6rem; - text-align: center; - height: 9.75rem; -} - -.icon-top i { - padding-top: 1.875rem; -} - -.card-title { - white-space:nowrap; - overflow:hidden; - text-overflow:ellipsis; -} - - -.control-container { - position: absolute; - right: 1em; - bottom: 1em; -} - -switch2d3d { - position: absolute; - right: 1em; - bottom: 1em; -} - -.panel-wrapper { - display: flex; - flex-direction: column; - align-items: stretch; - width: 100%; - height: 100%; -} - -.panel-top { - display: block; - height:0; -} - -.panel-bottom { - overflow:auto; - flex:1; -} - -.no-results { - font-weight:bold; -} - -.no-results > span { - font-style:italic; -} - -div.header { - display:flex; - padding-top:1em; - margin-bottom:1em; -} - -div.header button { - margin-left:1em; -} - -.logo { - overflow: hidden; - max-height: 2.5em; -} - -timespan { - position: absolute; - transition: left 0.5s; - bottom: 0; - left: 0; - right: 0; - background-color: rgba(255, 255, 255, 0.5); -} - -timespan.menuVisible { - left: 22rem; -} - -:host ::ng-deep .timespan div.clearfix { - transition: height 0.5s; -} - -:host ::ng-deep .menu .side-panel { - z-index: 100; - background-color: rgb(245,245,245); -} - -@media screen and (min-width:44rem) { - .panel-top { - height: 8.1rem; - } -} - -.map { - transition: margin-left 0.3s; -} - -.shortcut-icon { - display: inline-block; - text-align: center; - margin: 0.5rem; - cursor:pointer; -} - -.shortcut-icon > .icon { - width: 3rem; - height: 3rem; - background-color: #731e64; - display: inline-block; - text-align: center; - line-height: 3rem; - color: #ffffff; - font-size: 2rem; -} - -.shortcut-icon > .caption { - text-align: center; - width: 4rem; - overflow: hidden; - text-overflow: ellipsis; - color: theme-color(); -} - -.shortcut-icon > .farm-icon { - background-color: #731E64; -} - -.shortcut-icon > .trijntje-icon { - background-color: #FAA33F; -} - -/*.panel-visible { - margin-left:22rem; -}*/ +@import "../../_theme.scss"; +@import "~bootstrap/scss/bootstrap.scss"; + +aol-map { position:absolute;width:100%;height:100%;} + +.arrow { + top: 3rem; +} + +.popover { + max-height:22rem; + min-width:15rem; +} + +.popover-body { + max-height:19rem; + overflow:hidden; + overflow-y:auto; +} + +.card-title { + font-size:1rem; +} + +.menu-card { + margin-left:-7px; + padding-left:7px; + margin-right:-7px; + padding-right:7px; + margin-bottom:7px; +} + +.icon-top { + font-size: 6rem; + text-align: center; + height: 9.75rem; +} + +.icon-top i { + padding-top: 1.875rem; +} + +.card-title { + white-space:nowrap; + overflow:hidden; + text-overflow:ellipsis; +} + + +.control-container { + position: absolute; + right: 1em; + bottom: 1em; +} + +switch2d3d { + position: absolute; + right: 1em; + bottom: 1em; +} + +.panel-wrapper { + display: flex; + flex-direction: column; + align-items: stretch; + width: 100%; + height: 100%; +} + +.panel-top { + display: block; + height:0; +} + +.panel-bottom { + overflow:auto; + flex:1; +} + +.no-results { + font-weight:bold; +} + +.no-results > span { + font-style:italic; +} + +div.header { + display:flex; + padding-top:1em; + margin-bottom:1em; +} + +div.header button { + margin-left:1em; +} + +.logo { + overflow: hidden; + max-height: 2.5em; +} + +timespan { + position: absolute; + transition: left 0.5s; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(255, 255, 255, 0.5); +} + +timespan.menuVisible { + left: 22rem; +} + +:host ::ng-deep .timespan div.clearfix { + transition: height 0.5s; +} + + +@media screen and (min-width:44rem) { + .panel-top { + height: 8.1rem; + } +} + +.map { + transition: margin-left 0.3s; +} + +.shortcut-icon { + display: inline-block; + text-align: center; + margin: 0.5rem; + cursor:pointer; +} + +.shortcut-icon > .icon { + width: 3rem; + height: 3rem; + background-color: #731e64; + display: inline-block; + text-align: center; + line-height: 3rem; + color: #ffffff; + font-size: 2rem; +} + +.shortcut-icon > .caption { + text-align: center; + width: 4rem; + overflow: hidden; + text-overflow: ellipsis; + color: theme-color(); +} + +.shortcut-icon > .farm-icon { + background-color: #731E64; +} + +.shortcut-icon > .trijntje-icon { + background-color: #FAA33F; +} + +/*.panel-visible { + margin-left:22rem; +}*/ diff --git a/projects/common-map/src/fm-map/components/map/map.component.ts b/projects/common-map/src/fm-map/components/map/map.component.ts index 7de5ad3..c90b02e 100644 --- a/projects/common-map/src/fm-map/components/map/map.component.ts +++ b/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); @@ -213,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) { diff --git a/projects/common-map/src/fm-map/effects/map.effects.ts b/projects/common-map/src/fm-map/effects/map.effects.ts index b5643e6..cf35add 100644 --- a/projects/common-map/src/fm-map/effects/map.effects.ts +++ b/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)]; } })); 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 228ee9c..9374631 100644 --- a/projects/common-map/src/fm-map/reducers/map.reducer.ts +++ b/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, - menuVisible: boolean, + searchMinified: boolean, extent: number[], baseLayers: Array overlayLayers: Array, @@ -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, - menuVisible:false + searchMinified: true }); } 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); From 6ad23d280de6fe14a7f14572c47954669faf6e7a Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 7 Jan 2020 22:31:27 +0100 Subject: [PATCH 5/6] Fix build --- src/app/app-routing.module.ts | 36 ++++++++++++++++++----------------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 4290ee8..e6dab15 100644 --- a/src/app/app-routing.module.ts +++ b/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, - children:[ - { - path: '', - component: LogoComponent, - outlet: 'side-panel-logo' - }, - { - path: '', - component: MenuComponent, - outlet: 'side-panel-menu' - } - ] - } - ]}, + component: MapComponent + } + ]} ]; @NgModule({ From c52497af59b2899064cb5c196a64afb188bf19aa Mon Sep 17 00:00:00 2001 From: Willem Dantuma Date: Tue, 7 Jan 2020 22:31:56 +0100 Subject: [PATCH 6/6] Fix build --- package-lock.json | 10 ++++------ package.json | 4 ++-- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9fd0d54..fd6c6cb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1997,9 +1997,9 @@ } }, "@farmmaps/common": { - "version": "0.0.1-prerelease.103", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.103.tgz", - "integrity": "sha512-QI2OZLcM073Q6yN4dQlVCYueMhPLavl5nrzHttfZmdXlMyeFFZwzQaEUArbEdCuXsRX65qqvs6N4p+B97NGQ5A==", + "version": "0.0.1-prerelease.109", + "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common/-/common-0.0.1-prerelease.109.tgz", + "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", - "resolved": "https://repository.akkerweb.nl/repository/npm-group/@farmmaps/common-map/-/common-map-0.0.1-prerelease.103.tgz", - "integrity": "sha512-ID4fMP3JNiUoUayPy1Zj8ZkciwuQxLhl9AnwdrAIw4fbYoNqnNI7cnj2QiF/QWlZL3IqvVpP8RUa3irN0zFoKw==", + "version": "file:dist/common-map", "requires": { "ngx-openlayers": "1.0.0-next.13", "ol": "^6.0.0", diff --git a/package.json b/package.json index 13f15d6..e1acbf5 100644 --- a/package.json +++ b/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-map": ">=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.109 <0.0.1", "@ng-bootstrap/ng-bootstrap": "^4.2.1", "@ngrx/effects": "^8.2.0", "@ngrx/router-store": "^8.2.0",