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

Add action logging and some refactoring

feature/MinimizeSolution
Willem Dantuma 2020-04-17 13:26:50 +02:00
parent 3828db341a
commit c6d7f6b0cb
4 changed files with 117 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,6 +59,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
private itemTypeSub: Subscription;
private mapStateSub: Subscription;
private queryStateSub: Subscription;
private querySub: Subscription;
public parentCode$: Observable<string> =this.store.select(mapReducers.selectGetParentCode);
public panelVisible$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelVisible);
public panelCollapsed$: Observable<boolean> = this.store.select(mapReducers.selectGetPanelCollapsed);
@ -92,7 +93,47 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
private geolocationService: GeolocationService,
private zone: NgZone,
private deviceorientationService:DeviceOrientationService) {
this.querySub = this.query$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{
if(queryState) {
let newQueryState = tassign(mapReducers.initialQueryState);
let initial = this.serializeService.serialize(newQueryState) == this.serializeService.serialize(queryState);
if(setStateCount>1 && !initial) {
console.debug(`Do Query ${setStateCount}`);
let urlparts=[];
if (queryState.itemCode && queryState.itemCode != "") {
if(queryState.itemType && queryState.itemType!= "") {
let itemType = this.itemTypeService.itemTypes[queryState.itemType];
if (itemType && itemType.viewer && itemType.viewer == "edit_in_editor" && itemType.editor) {
urlparts.push('/editor');
urlparts.push(itemType.editor);
urlparts.push('item');
urlparts.push(queryState.itemCode);
}
}
} else {
newQueryState= queryState;
}
if(urlparts.length==0 ) {
newQueryState.itemCode = queryState.itemCode;
this.replaceUrl(mapState,newQueryState,false);
} else {
this.router.navigate(urlparts);
}
}
}
});
this.mapStateSub = this.mapState$.pipe(withLatestFrom(this.queryState$),withLatestFrom(this.setStateCount$)).subscribe(([[mapState,queryState],setStateCount]) =>{
if(setStateCount>0) {
console.debug(`Mapstate ${setStateCount}`);
this.replaceUrl(mapState,queryState,true);
}
});
this.queryStateSub = this.queryState$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{
if(setStateCount>0) {
console.debug(`Querystate ${setStateCount}`);
this.replaceUrl(mapState,queryState,true);
}
})
}
@HostListener('document:keyup', ['$event'])
@ -132,44 +173,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
this.store.dispatch(new mapActions.Clear());
this.selectedFeatures$.next({x:0,y:0,features:[]});
this.selectedFeatures$.next(null);
this.query$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{
console.debug(`Do Query ${setStateCount}`);
if(setStateCount>1) {
let newQueryState = tassign(mapReducers.initialQueryState);
let urlparts=[];
if (queryState.itemCode && queryState.itemCode != "") {
if(queryState.itemType && queryState.itemType!= "") {
let itemType = this.itemTypeService.itemTypes[queryState.itemType];
if (itemType && itemType.viewer && itemType.viewer == "edit_in_editor" && itemType.editor) {
urlparts.push('/editor');
urlparts.push(itemType.editor);
urlparts.push('item');
urlparts.push(queryState.itemCode);
}
}
} else {
newQueryState= queryState;
}
if(urlparts.length==0 ) {
newQueryState.itemCode = queryState.itemCode;
this.replaceUrl(mapState,newQueryState,false);
} else {
this.router.navigate(urlparts);
}
}
});
this.mapState$.pipe(withLatestFrom(this.queryState$),withLatestFrom(this.setStateCount$)).subscribe(([[mapState,queryState],setStateCount]) =>{
console.debug(`Mapstate ${setStateCount}`);
if(setStateCount>0) {
this.replaceUrl(mapState,queryState,true);
}
});
this.queryState$.pipe(withLatestFrom(this.mapState$),withLatestFrom(this.setStateCount$)).subscribe(([[queryState,mapState],setStateCount]) =>{
console.debug(`Querystate ${setStateCount}`);
if(setStateCount>0) {
this.replaceUrl(mapState,queryState,true);
}
})
}
initCustomStyles() {
@ -213,11 +217,13 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
let queryState = params.get("queryState");
newQueryState = tassign(mapReducers.initialQueryState);
if (queryState != "") {
newQueryState = this.serializeService.deserialize(queryState);
newQueryState = this.serializeService.deserialize(queryState);
queryState = this.serializeService.serialize(newQueryState);
}
queryStateChanged = this.serializeService.serialize(lastQueryState) != queryState;
}
console.debug(newQueryState);
console.debug(queryStateChanged?"Changed":"");
let t =0;
if(setStateCount==0) t=600;
setTimeout(() => {
@ -272,6 +278,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
if(mapState.baseLayerCode!="") {
parts.push(mapState.baseLayerCode);
parts.push( this.serializeService.serialize(queryState));
console.debug("Replace url",mapState,queryState,replace);
this.router.navigate(parts, { replaceUrl: replace,relativeTo:this.route.parent });
}
}
@ -341,8 +348,10 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
}
ngOnDestroy() {
this.paramSub.unsubscribe();
if (this.paramSub) this.paramSub.unsubscribe();
if (this.itemTypeSub) this.itemTypeSub.unsubscribe();
if (this.mapStateSub) this.mapStateSub.unsubscribe();
if (this.queryStateSub) this.queryStateSub.unsubscribe(); }
if (this.queryStateSub) this.queryStateSub.unsubscribe();
if (this.querySub) this.querySub.unsubscribe();
}
}

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

@ -129,7 +129,7 @@ export class MapEffects {
),
catchError(error => of(new commonActions.Fail(error))));
} else {
newAction= of(new commonActions.Escape(true,false));
return [];
}
return newAction;
}));
@ -251,27 +251,39 @@ export class MapEffects {
@Effect()
setQueryState$: Observable<Action> = this.actions$.pipe(
ofType(mapActions.SETQUERYSTATE),
switchMap((action: mapActions.SetQueryState) => {
var newAction:Action;
if (action.queryState.itemCode && action.queryState.itemCode != "") {
newAction= new mapActions.SelectItem(action.queryState.itemCode);
withLatestFrom(this.store$.select(mapReducers.selectGetInSearch)),
switchMap(([action,inSearch]) => {
if(!inSearch) {
let a = action as mapActions.SetQueryState;
var newAction:Action;
if (a.queryState.itemCode && a.queryState.itemCode != "") {
newAction= new mapActions.SelectItem(a.queryState.itemCode);
} else {
newAction= new mapActions.StartSearch(a.queryState);
}
return of(newAction);
} else {
newAction= new mapActions.StartSearch(action.queryState);
return [];
}
return of(newAction);
}));
@Effect()
setState$: Observable<Action> = this.actions$.pipe(
ofType(mapActions.SETSTATE),
switchMap((action: mapActions.SetState) => {
var newAction:Action;
if (action.queryState.itemCode && action.queryState.itemCode != "") {
newAction= new mapActions.SelectItem(action.queryState.itemCode);
withLatestFrom(this.store$.select(mapReducers.selectGetInSearch)),
switchMap(([action,inSearch]) => {
if(!inSearch) {
let a = action as mapActions.SetQueryState;
var newAction:Action;
if (a.queryState.itemCode && a.queryState.itemCode != "") {
newAction= new mapActions.SelectItem(a.queryState.itemCode);
} else {
newAction= new mapActions.StartSearch(a.queryState);
}
return of(newAction);
} else {
newAction= new mapActions.StartSearch(action.queryState);
return [];
}
return of(newAction);
}));
constructor(private actions$: Actions, private store$: Store<mapReducers.State>, private folderService$: FolderService, private itemService$: ItemService,private featureIconService$:FeatureIconService,private itemTypeService$:ItemTypeService) {

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

@ -56,7 +56,8 @@ export interface State {
selectedOverlayLayer: IItemLayer,
styles:IStyles,
showLayerSwitcher:boolean,
setStateCount:number
setStateCount:number,
inSearch:boolean
}
export const initialState: State = {
@ -73,7 +74,7 @@ export const initialState: State = {
},
viewExtent:[],
queryState: tassign(initialQueryState),
query: tassign(initialQueryState),
query: null,
parentCode: null,
features: [],
panelVisible: false,
@ -92,7 +93,8 @@ export const initialState: State = {
selectedItemLayer: null,
styles: {},
showLayerSwitcher: false,
setStateCount: 0
setStateCount: 0,
inSearch:false
}
export function reducer(state = initialState, action: mapActions.Actions | commonActions.Actions | RouterNavigationAction): State {
@ -138,7 +140,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
}
return tassign(state, {
features: a.features,
extent:extent
extent:extent,
inSearch:false
});
}
case mapActions.SELECTFEATURE: {
@ -147,11 +150,15 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
selectedFeature: state.selectedItem?state.selectedFeature: a.feature
});
}
case mapActions.SELECTITEM: {
case mapActions.SELECTITEM: {
let a = action as mapActions.SelectItem;
let itemCode = state.selectedItem ? state.selectedItem.code : "";
let inSearch = (a.itemCode != itemCode || state.setStateCount == 1)
return tassign(state, {
selectedItem: null,
selectedItemLayer: null,
features:[]
features:[],
inSearch:inSearch
});
}
case mapActions.SELECTITEMSUCCESS: {
@ -164,6 +171,7 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
itemLayer = new TemporalItemLayer(a.item);
}
return tassign(state, {
inSearch:false,
selectedItem: a.item,
selectedItemLayer: itemLayer,
panelVisible: a.item != null,
@ -255,17 +263,21 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
}
case mapActions.STARTSEARCH: {
let a = action as mapActions.StartSearch;
let panelVisible = a.queryState.itemCode!=null ||a.queryState.itemType!=null||a.queryState.parentCode!=null;
return tassign(state, {
selectedItem: null,
features:[],
selectedItemLayer:null,
queryState: tassign(a.queryState),
searchCollapsed: false,
panelVisible: true,
clearEnabled: true,
searchMinified: true,
searchCollapsed: !panelVisible,
panelVisible: panelVisible,
clearEnabled: panelVisible,
searchMinified: panelVisible,
inSearch:panelVisible
});
}
case commonActions.FAIL:{
return tassign(state,{inSearch:false});
}
case mapActions.DOQUERY: {
let a = action as mapActions.DoQuery;
return tassign(state, {
@ -455,7 +467,8 @@ export function reducer(state = initialState, action: mapActions.Actions | commo
let a = action as mapActions.ShowLayerSwitcher;
return tassign(state,{showLayerSwitcher:a.show});
}
case mapActions.CLEAR:{
case commonActions.INITUSER: {
return tassign(state,{setStateCount:0,features:[],selectedFeature:null,selectedItem:null});
}
default: {
@ -487,6 +500,7 @@ export const getPeriod = (state:State) => state.period;
export const getStyles = (state:State) => state.styles;
export const getShowLayerSwitcher = (state:State) => state.showLayerSwitcher;
export const getSetStateCount = (state:State) => state.setStateCount;
export const getInSearch = (state:State) => state.inSearch;
export const selectMapState = createFeatureSelector<State>(MODULE_NAME);
export const selectGetMapState= createSelector(selectMapState, getMapState);
@ -512,5 +526,6 @@ export const selectGetPeriod = createSelector(selectMapState, getPeriod);
export const selectGetStyles = createSelector(selectMapState, getStyles);
export const selectGetShowLayerSwitcher = createSelector(selectMapState,getShowLayerSwitcher);
export const selectgetSetStateCount = createSelector(selectMapState,getSetStateCount);
export const selectGetInSearch = createSelector(selectMapState,getInSearch);

16
src/app/app.module.ts
View File

@ -11,7 +11,7 @@ import { AppCommonMapModule} from '@farmmaps/common-map';
import {AppRootComponent} from './app.component';
import {StoreModule, Store} from '@ngrx/store';
import {StoreModule, ActionReducer,MetaReducer} from '@ngrx/store';
import {EffectsModule, EffectSources} from '@ngrx/effects';
import { StoreRouterConnectingModule} from '@ngrx/router-store';
@ -48,6 +48,18 @@ export function provideBootstrapEffects(effects: Type<any>[]) {
];
}
// console.log all actions
export function debug(reducer: ActionReducer<any>): ActionReducer<any> {
return function(state, action) {
console.debug('-- State', state);
console.debug('-- Action', action);
return reducer(state, action);
};
}
export const metaReducers: MetaReducer<any>[] = [debug];
@NgModule({
declarations: [
AppRootComponent,
@ -61,7 +73,7 @@ export function provideBootstrapEffects(effects: Type<any>[]) {
AppCommonServiceModule.forRoot(),
AppCommonMapModule.forRoot(),
BrowserModule,
StoreModule.forRoot({},{runtimeChecks: { // TODO fix this should all be true
StoreModule.forRoot({},{metaReducers,runtimeChecks: { // TODO fix this should all be true
strictStateImmutability: false,
strictActionImmutability: false,
strictStateSerializability: false,