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

Refactoring for landingpage support
All checks were successful
FarmMaps.Develop/FarmMapsLib/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
Willem Dantuma
2020-10-29 19:14:06 +01:00
parent a5ece9b453
commit 46c5f74b49
8 changed files with 145 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,14 @@
<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<button type="button" class="btn btn-outline-light" (click)="handleToggleMenu($event)"><i class="fa fa-bars" aria-hidden="true"></i></button>
<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async),'pagemode':(isPageMode|async),'appmode':!(isPageMode|async)}">
<nav class="navbar navbar-light navbar-expand bg-light navigation-clean">
<div class="header-logo pageonly"><router-outlet name="header-logo"></router-outlet></div>
<button type="button" class="btn btn-outline-secondary apponly" (click)="handleToggleMenu($event)"><i class="fa fa-bars" aria-hidden="true"></i></button>
<router-outlet name="menu" class="ml-4"></router-outlet>
<div class="collapse navbar-collapse pageonly">
<a class="btn btn-primary ml-auto" role="button" [routerLink]="['/map']">
<span *ngIf="(user|async)==null" i18n>Sign in</span>
<span *ngIf="(user|async)!=null" i18n>To app</span>
</a>
</div>
</nav>
<div class="body">
<router-outlet></router-outlet>
@@ -11,7 +18,7 @@
<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 flex-grow-1 logo" (click)="handleHome($event)"><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">
@@ -23,10 +30,10 @@
<ng-container *ngIf="showUploadProgress">
<fm-resumable-file-upload></fm-resumable-file-upload>
</ng-container>
<div class="user-menu">
<div class="user-menu apponly">
<fm-user-menu [user]="user|async" [showMenu]="accountMenuVisible|async"></fm-user-menu>
</div>
<div class="healthstatus-container online" [ngClass]="{'online' :(isOnline|async)}">
<div class="healthstatus-container online apponly" [ngClass]="{'online' :(isOnline|async)}">
<div class="healthstatus alert alert-danger m-0" >
<span i18n>Not connected, make sure your device has an active internet connection</span>
</div>

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

@@ -3,6 +3,7 @@
@import "~bootstrap/scss/bootstrap.scss";
// custom styles
.btn:focus {
@@ -25,7 +26,7 @@
*/
body { background: #f1f1f1; line-height: 18px; user-select:none;}
body { background: #f1f1f1; line-height: 18px; user-select:none;font-family: Lato,Helvetica Neue,Helvetica,Arial,sans-serif;}
.navbar-brand {
padding-top: .5rem;
@@ -53,7 +54,20 @@ body { background: #f1f1f1; line-height: 18px; user-select:none;}
bottom: 0;
left: 0;
right: 0;
overflow:hidden;
overflow: hidden;
}
.app.pagemode > .body {
overflow: initial;
position: relative;
}
.app.pagemode .apponly {
display: none !important;
}
.app.appmode .pageonly {
display: none !important;
}
.app.fullscreen > .navbar {
@@ -77,6 +91,10 @@ body { background: #f1f1f1; line-height: 18px; user-select:none;}
margin-left: 1rem;
}
.header-logo {
height:2em;
}
.user-menu {
transition: top 0.5s ease-out;
position: absolute;

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

@@ -1,17 +1,20 @@
import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID, ChangeDetectionStrategy, HostListener, Input } from '@angular/core';
import { Router, NavigationStart, NavigationEnd, RouteConfigLoadStart, RouteConfigLoadEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
import { Meta, Title, MetaDefinition } from '@angular/platform-browser';import { DOCUMENT } from "@angular/common";
import { Subscription , Observable } from 'rxjs';
import { distinctUntilChanged} from 'rxjs/operators';
import { Meta, Title, MetaDefinition } from '@angular/platform-browser'; import { DOCUMENT } from "@angular/common";
import { Subscription, Observable } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';
import { Store, Action } from '@ngrx/store';
import { IUser } from '../../models/user';
import { OAuthService, OAuthErrorEvent } from 'angular-oauth2-oidc';
//AppCommon
import { IEventMessage } from '../../models/event.message';
import { IListItem} from '../../models/list.item';
import { IListItem } from '../../models/list.item';
import { EventService } from '../../services/event.service';
import * as commonActions from '../../actions/app-common.actions';
import { ItemTypeService } from '../../services/itemtype.service';
import * as commonActions from '../../actions/app-common.actions';
import { HealthCheckService } from '../../services/healthcheck.service';
import { AppConfig } from '../../shared/app.config';
import * as appReducers from '../../reducers/app-common.reducer';
@@ -34,34 +37,29 @@ export class AppComponent implements OnInit, OnDestroy {
public currentFolder: Observable<IListItem>;
public folderParents: Observable<IListItem[]>;
public fullScreen: Observable<boolean>;
public isOnline: Observable<boolean>;
public routeLoading: Observable<boolean>;
public menuVisible: Observable<boolean>;
public accountMenuVisible: Observable<boolean>;
public user:Observable<IUser>;
@Input() showUploadProgress: boolean =true;
public fullScreen: Observable<boolean> = this.store$.select(appReducers.selectGetFullScreen);
public isOnline: Observable<boolean> = this.store$.select(appReducers.SelectGetIsOnline);
public routeLoading: Observable<boolean> = this.store$.select(appReducers.selectGetRouteLoading);
public menuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetMenuVisible);
public accountMenuVisible: Observable<boolean> = this.store$.select(appReducers.SelectGetAccountMenuVisible);
public user: Observable<IUser> = this.store$.select(appReducers.SelectGetUser);
public isPageMode: Observable<boolean> = this.store$.select(appReducers.SelectGetIsPageMode);
@Input() showUploadProgress: boolean = true;
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private title: Title,
private meta: Meta,
private store: Store<appReducers.State>,
private eventService: EventService,
private healthCheckService: HealthCheckService
) {
//check health every 30 seconds
this.healthCheckService.check(30000).pipe(distinctUntilChanged()).subscribe((online) => {
if(online) {
this.store.dispatch(new commonActions.Online());
} else {
this.store.dispatch(new commonActions.Offline());
}
});
public router: Router,
private activatedRoute$: ActivatedRoute,
private title$: Title,
private meta$: Meta,
private store$: Store<appReducers.State>,
private eventService$: EventService,
private healthCheckService$: HealthCheckService,
private itemTypeService$: ItemTypeService,
private oauthService$: OAuthService,
private appConfig$: AppConfig
) {
}
getActionFromEvent(event: IEventMessage): Action {
var action: Action = null;
@@ -104,64 +102,98 @@ export class AppComponent implements OnInit, OnDestroy {
}
ngOnInit() {
this.fullScreen = this.store.select(appReducers.selectGetFullScreen);
this.isOnline = this.store.select(appReducers.SelectGetIsOnline);
this.routeLoading = this.store.select(appReducers.selectGetRouteLoading);
this.menuVisible = this.store.select(appReducers.SelectGetMenuVisible);
this.accountMenuVisible = this.store.select(appReducers.SelectGetAccountMenuVisible);
this.user = this.store.select(appReducers.SelectGetUser);
this.InstallRouteEventHandler();
this.InstallEventServiceEventHandler();
this.InstallAuthenticationEventHandler();
this.InstallHealthCheck();
//load item types
this.itemTypeService$.load(this.appConfig$)
}
@HostListener('document:keyup', ['$event'])
onKeyUp(event: KeyboardEvent) {
let x = event.keyCode;
if (x === 27) {
this.store.dispatch(new commonActions.Escape(true,false));
}
}
this.store$.dispatch(new commonActions.Escape(true, false));
}
}
ngOnDestroy() {
// Subscription clean-up
if(this.routerSub$) this.routerSub$.unsubscribe();
if(this.eventSub$) this.eventSub$.unsubscribe();
if (this.routerSub$) this.routerSub$.unsubscribe();
if (this.eventSub$) this.eventSub$.unsubscribe();
}
private InstallAuthenticationEventHandler() {
// auth event handler
this.oauthService$.events.subscribe((event) => {
console.debug(event.type);
if (event.type == 'token_error' || event.type == 'silent_refresh_timeout' || event.type == 'logout') {
let e = event as OAuthErrorEvent;
let p = e.params as any;
if (event.type == 'silent_refresh_timeout' || event.type == 'logout' || (p.error && p.error == 'login_required')) {
console.debug("Session expired");
this.router.navigate(['loggedout'], { queryParams: { redirectTo: this.router.url } });
}
}
});
}
private InstallRouteEventHandler() {
var other = this;
this.routerSub$ = this.router.events.subscribe(event => {
if (event instanceof RouteConfigLoadStart) {
other.store.dispatch(new commonActions.StartRouteLoading());
other.store$.dispatch(new commonActions.StartRouteLoading());
}
if (event instanceof NavigationEnd && (event.url == "/" || event.url.startsWith("/content") )) {
other.store$.dispatch(new commonActions.SetPageMode(true));
} else if (event instanceof NavigationEnd) {
other.store$.dispatch(new commonActions.SetPageMode(false));
}
if (event instanceof RouteConfigLoadEnd) {
other.store.dispatch(new commonActions.EndRouteLoading());
}
if(event instanceof NavigationStart) {
other.store.dispatch(new commonActions.SetMenuVisible(false));
other.store$.dispatch(new commonActions.EndRouteLoading());
}
});
if (event instanceof NavigationStart) {
other.store$.dispatch(new commonActions.SetMenuVisible(false));
}
});
}
private InstallEventServiceEventHandler() {
var other = this;
this.eventSub$ = this.eventService.event.subscribe(event => {
this.eventSub$ = this.eventService$.event.subscribe(event => {
var action = other.getActionFromEvent(event);
if (action) other.store.dispatch(action);
if (action) other.store$.dispatch(action);
});
}
private InstallHealthCheck() {
//check health every 30 seconds
this.healthCheckService$.check(30000).pipe(distinctUntilChanged()).subscribe((online) => {
if (online) {
this.store$.dispatch(new commonActions.Online());
} else {
this.store$.dispatch(new commonActions.Offline());
}
});
}
handleClick(event: MouseEvent) {
this.store.dispatch(new commonActions.Escape(false,true));
}
this.store$.dispatch(new commonActions.Escape(false, true));
}
handleStopBubble(event: MouseEvent) {
event.stopPropagation();
}
}
handleToggleMenu(event:MouseEvent) {
handleToggleMenu(event: MouseEvent) {
event.stopPropagation();
this.store.dispatch(new commonActions.ToggleMenu());
this.store$.dispatch(new commonActions.ToggleMenu());
}
handleHome(event: MouseEvent) {
this.router.navigate(['/']);
}
}