Add action logging and some refactoring
This commit is contained in:
Willem Dantuma
parent
3828db341a
commit
c6d7f6b0cb
@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user