diff --git a/projects/common/src/fm/actions/app-common.actions.ts b/projects/common/src/fm/actions/app-common.actions.ts index 180f355..636d5cb 100644 --- a/projects/common/src/fm/actions/app-common.actions.ts +++ b/projects/common/src/fm/actions/app-common.actions.ts @@ -58,6 +58,10 @@ export const TOGGLEACCOUNTMENU = '[AppCommon] ToggleAccountMenu'; export const SETMENUVISIBLE = '[AppCommon] SetMenuVisible'; +export const ONLINE = '[AppCommon] Online'; + +export const OFFLINE = '[AppCommon] Offline'; + export class InitUser implements Action { readonly type = INITUSER; @@ -254,6 +258,18 @@ export class SetMenuVisible implements Action { constructor(public visible:boolean) { } } + +export class Online implements Action { + readonly type = ONLINE; + + constructor() { } +} + +export class Offline implements Action { + readonly type = OFFLINE; + + constructor() { } +} export type Actions = OpenModal @@ -287,6 +303,8 @@ export type Actions = OpenModal | SetMenuVisible | InitUserPackagesSuccess | ToggleAccountMenu - | CloseAll; + | CloseAll + | Online + | Offline; diff --git a/projects/common/src/fm/components/app/app.component.ts b/projects/common/src/fm/components/app/app.component.ts index 6d58b6a..6ac90e7 100644 --- a/projects/common/src/fm/components/app/app.component.ts +++ b/projects/common/src/fm/components/app/app.component.ts @@ -98,13 +98,23 @@ export class AppComponent implements OnInit, OnDestroy { } @HostListener('document:keyup', ['$event']) - keyUp(event: KeyboardEvent) { + onKeyUp(event: KeyboardEvent) { let x = event.keyCode; if (x === 27) { this.store.dispatch(new commonActions.Escape(true,false)); } } + @HostListener('window:online', ['$event']) + onOnline(event: Event) { + this.store.dispatch(new commonActions.Online()); + } + + @HostListener('window:offline', ['$event']) + onOffline(event: Event) { + this.store.dispatch(new commonActions.Offline()); + } + ngOnDestroy() { // Subscription clean-up if(this.routerSub$) this.routerSub$.unsubscribe(); diff --git a/projects/common/src/fm/reducers/app-common.reducer.ts b/projects/common/src/fm/reducers/app-common.reducer.ts index 09d23ec..cabd77d 100644 --- a/projects/common/src/fm/reducers/app-common.reducer.ts +++ b/projects/common/src/fm/reducers/app-common.reducer.ts @@ -18,7 +18,8 @@ export interface State { routeLoading:boolean, menuVisible: boolean, userPackages: IPackages, - accountMenuVisible: boolean + accountMenuVisible: boolean, + isOnline: boolean } export const initialState: State = { @@ -31,7 +32,8 @@ export const initialState: State = { routeLoading: false, menuVisible: false, userPackages: {}, - accountMenuVisible: false + accountMenuVisible: false, + isOnline: window.navigator.onLine } export function reducer(state = initialState, action: appCommonActions.Actions ): State { @@ -112,6 +114,12 @@ export function reducer(state = initialState, action: appCommonActions.Actions ) case appCommonActions.CLOSEALL: { return tassign(state,{accountMenuVisible:false,menuVisible:false }); } + case appCommonActions.ONLINE:{ + return tassign(state,{isOnline:true}); + } + case appCommonActions.OFFLINE:{ + return tassign(state,{isOnline:false}); + } default: { return state; } @@ -128,6 +136,7 @@ export const getMenuVisible = (state: State) => state.menuVisible; export const getUser = (state: State) => state.user; export const getUserPackages = (state: State) => state.userPackages; export const getAccountMenuVisible = (state: State) => state.accountMenuVisible; +export const getIsOnline = (state: State) => state.isOnline; export const selectAppCommonState = createFeatureSelector(MODULE_NAME); @@ -141,4 +150,5 @@ export const SelectGetMenuVisible = createSelector(selectAppCommonState,getMenuV export const SelectGetUser = createSelector(selectAppCommonState,getUser); export const SelectGetUserPackages = createSelector(selectAppCommonState,getUserPackages); export const SelectGetAccountMenuVisible = createSelector(selectAppCommonState,getAccountMenuVisible); +export const SelectGetIsOnline = createSelector(selectAppCommonState,getIsOnline);