FarmMaps/FarmMapsLib
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'develop' of https://git.akkerweb.nl/FarmMaps/FarmMapsLib into develop
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
Details

Browse Source
This commit is contained in:
Peter Bastiani 2020-01-08 10:28:15 +01:00
commit 2c3c8fbff2
20 changed files with 856 additions and 798 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
package-lock.json generated
View File

@ -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",

4
package.json
View File

@ -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",

2
projects/common-map/package.json
View File

@ -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"
}
}

8
projects/common-map/src/fm-map/actions/map.actions.ts
View File

@ -21,7 +21,6 @@ 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';
@ -121,12 +120,6 @@ export class CollapseSearch implements Action {
constructor() { }
}
export class ToggleMenu implements Action {
readonly type = TOGGLEMENU;
constructor() { }
}
export class SetExtent implements Action {
readonly type = SETEXTENT;
@ -223,7 +216,6 @@ export type Actions = SetMapState
| UpdateFeatureSuccess
| ExpandSearch
| CollapseSearch
| ToggleMenu
| SetExtent
| SetQueryState
| SetTimeSpan

24
projects/common-map/src/fm-map/common-map.module.ts
View File

@ -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 {

14
projects/common-map/src/fm-map/components/map/map.component.html
View File

@ -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>

4
projects/common-map/src/fm-map/components/map/map.component.scss
View File

@ -117,10 +117,6 @@ timespan.menuVisible {
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 {

4
projects/common-map/src/fm-map/components/map/map.component.ts
View File

@ -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) {

4
projects/common-map/src/fm-map/effects/map.effects.ts
View File

@ -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)];
}
}));

12
projects/common-map/src/fm-map/reducers/map.reducer.ts
View File

@ -45,7 +45,6 @@ export interface State {
clearEnabled: boolean,
searchCollapsed: 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,
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);

20
projects/common/src/fm/actions/app-common.actions.ts
View File

@ -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;
@ -213,6 +217,18 @@ export class UploadedFileClick implements Action {
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
| InitRoot
@ -240,4 +256,6 @@ export type Actions = OpenModal
| TaskStartEvent
| TaskEndEvent
| TaskErrorEvent
| DeviceUpdateEvent;
| DeviceUpdateEvent
| ToggleMenu
| SetMenuVisible;

13
projects/common/src/fm/components/app/app.component.html
View File

@ -10,5 +10,18 @@
<div class="body">
<router-outlet></router-outlet>
</div>
<fm-side-panel [visible]="menuVisible|async" [left]="true" class="menu" (click)="handleStopBubble($event)">
<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>

5
projects/common/src/fm/components/app/app.component.scss
View File

@ -70,3 +70,8 @@ body { background: #f1f1f1; line-height: 18px; user-select:none;}
color: #ffffff;
}
.menu .side-panel {
z-index: 100;
background-color: rgb(245,245,245);
}

10
projects/common/src/fm/components/app/app.component.ts
View File

@ -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());
}
}

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

@ -1,4 +1,4 @@
<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)">
<i class="fa fa-chevron-left" aria-hidden="true"></i>
</div>

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

@ -96,5 +96,18 @@ div.resizegrip > span {
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%;
}

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

@ -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)) + "%";
}

18
projects/common/src/fm/reducers/app-common.reducer.ts
View File

@ -14,7 +14,8 @@ export interface State {
itemTypes: IItemTypes,
user:IUser,
fullScreen: boolean,
routeLoading:boolean
routeLoading:boolean,
menuVisible: boolean,
}
export const initialState: State = {
@ -24,7 +25,8 @@ export const initialState: State = {
itemTypes: {},
user:null,
fullScreen: true,
routeLoading: false
routeLoading: false,
menuVisible: true
}
export function reducer(state = initialState, action: appCommonActions.Actions ): State {
@ -70,6 +72,16 @@ export function reducer(state = initialState, action: appCommonActions.Actions )
routeLoading: false
});
}
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;
}
@ -82,6 +94,7 @@ 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<State>(MODULE_NAME);
@ -92,4 +105,5 @@ export const selectGetItemTypes = createSelector(selectAppCommonState, getItemTy
export const selectGetRootItems = createSelector(selectAppCommonState, getRootItems);
export const selectGetFullScreen = createSelector(selectAppCommonState, getFullScreen);
export const selectGetRouteLoading = createSelector(selectAppCommonState, getRouteLoading);
export const SelectGetMenuVisible = createSelector(selectAppCommonState,getMenuVisible);

32
src/app/app-routing.module.ts
View File

@ -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,7 +7,21 @@ 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',
@ -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({