First functional version
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
All checks were successful
FarmMaps.Develop/FarmMapsLib/develop This commit looks good
This commit is contained in:
Willem Dantuma
14
projects/common/src/fm/components/app/app.component.html
Normal file
14
projects/common/src/fm/components/app/app.component.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<div class="app fullscreen" (click)="handleClick($event)" [ngClass]="{'fullscreen' :(fullScreen|async)}">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<a class="navbar-brand" [routerLink]="['/']">Farm Maps <span *ngIf="routeLoading|async"><i class="fa fa-spinner fa-spin"></i></span></a>
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/map']" class="nav-link"><span><i class="fa fa-globe" aria-hidden="true"></i> Map</span></a></li>
|
||||
<li class="nav-item py-0"><a [routerLinkActive]="['active']" [routerLink]="['/explorer']" class="nav-link"><span><i class="fa fa-folder" aria-hidden="true"></i> Explorer</span></a></li>
|
||||
</ul>
|
||||
<router-outlet name="menu"></router-outlet>
|
||||
</nav>
|
||||
<div class="body">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<fm-resumable-file-upload></fm-resumable-file-upload>
|
||||
</div>
|
||||
72
projects/common/src/fm/components/app/app.component.scss
Normal file
72
projects/common/src/fm/components/app/app.component.scss
Normal file
@@ -0,0 +1,72 @@
|
||||
//@import "theme.scss";
|
||||
|
||||
/* Import Bootstrap & Fonts */
|
||||
|
||||
@import "~bootstrap/scss/bootstrap.scss";
|
||||
|
||||
|
||||
// custom styles
|
||||
|
||||
.btn:focus {
|
||||
box-shadow:none;
|
||||
}
|
||||
|
||||
.input-group > .form-control:focus {
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
box-shadow: none;
|
||||
border-color: $input-border-color;
|
||||
}
|
||||
|
||||
|
||||
/* *** Overall APP Styling can go here ***
|
||||
--------------------------------------------
|
||||
Note: This Component has ViewEncapsulation.None so the styles will bleed out
|
||||
|
||||
*/
|
||||
|
||||
body { background: #f1f1f1; line-height: 18px; user-select:none;}
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: .5rem;
|
||||
padding-bottom: .5rem;
|
||||
}
|
||||
|
||||
.app {
|
||||
width:100vw;
|
||||
height:100vh;
|
||||
}
|
||||
|
||||
.app > .navbar {
|
||||
position: absolute;
|
||||
transition: top 0.5s ease-out;
|
||||
top:0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3.1rem;
|
||||
}
|
||||
|
||||
.app > .body {
|
||||
position: absolute;
|
||||
transition: top 0.5s ease-out;
|
||||
top: 3.1rem;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.app.fullscreen > .navbar {
|
||||
top: -3.1rem;
|
||||
}
|
||||
|
||||
.app.fullscreen > .body {
|
||||
top:0;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-primary:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
129
projects/common/src/fm/components/app/app.component.ts
Normal file
129
projects/common/src/fm/components/app/app.component.ts
Normal file
@@ -0,0 +1,129 @@
|
||||
import { Component, OnInit, OnDestroy, Inject, ViewEncapsulation, RendererFactory2, PLATFORM_ID, ChangeDetectionStrategy, HostListener } from '@angular/core';
|
||||
import { Router, NavigationEnd, RouteConfigLoadStart, RouteConfigLoadEnd, ActivatedRoute, PRIMARY_OUTLET } from '@angular/router';
|
||||
import { Meta, Title, DOCUMENT, MetaDefinition } from '@angular/platform-browser';
|
||||
import { Subscription , Observable } from 'rxjs';
|
||||
import { Store, Action } from '@ngrx/store';
|
||||
|
||||
//AppCommon
|
||||
import { IEventMessage } from '../../models/event.message';
|
||||
import { IListItem} from '../../models/list.item';
|
||||
import { EventService } from '../../services/event.service';
|
||||
import * as commonActions from '../../actions/app-common.actions';
|
||||
|
||||
import * as appReducers from '../../reducers/app-common.reducer';
|
||||
|
||||
@Component({
|
||||
selector: 'fm-app',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class AppComponent implements OnInit, OnDestroy {
|
||||
|
||||
// This will go at the END of your title for example "Home - Angular Universal..." <-- after the dash (-)
|
||||
private endPageTitle: string = 'Farmmaps';
|
||||
// If no Title is provided, we'll use a default one before the dash(-)
|
||||
private defaultPageTitle: string = 'Farmmaps';
|
||||
|
||||
private routerSub$: Subscription;
|
||||
private eventSub$: Subscription;
|
||||
|
||||
public currentFolder: Observable<IListItem>;
|
||||
public folderParents: Observable<IListItem[]>;
|
||||
public browseFileElement: any;
|
||||
public browseDirectoryElement: any;
|
||||
public fileDroptarget: any;
|
||||
public fullScreen: Observable<boolean>;
|
||||
public routeLoading: Observable<boolean>;
|
||||
|
||||
constructor(
|
||||
private router: Router,
|
||||
private activatedRoute: ActivatedRoute,
|
||||
private title: Title,
|
||||
private meta: Meta,
|
||||
private store: Store<appReducers.State>,
|
||||
private eventService: EventService,
|
||||
) {
|
||||
}
|
||||
|
||||
|
||||
|
||||
getActionFromEvent(event: IEventMessage): Action {
|
||||
var action: Action = null;
|
||||
console.log(`${event.eventType} Event received`);
|
||||
switch (event.eventType) {
|
||||
case "ItemChanged": {
|
||||
action = new commonActions.ItemChangedEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "ItemAdded": {
|
||||
action = new commonActions.ItemAddedEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "ItemDeleted": {
|
||||
action = new commonActions.ItemDeletedEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "taskStart": {
|
||||
action = new commonActions.TaskStartEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "taskEnd": {
|
||||
action = new commonActions.TaskEndEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
case "taskError": {
|
||||
action = new commonActions.TaskErrorEvent(event.itemCode, event.attributes);
|
||||
break;
|
||||
}
|
||||
}
|
||||
return action;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.fullScreen = this.store.select(appReducers.selectGetFullScreen);
|
||||
this.routeLoading = this.store.select(appReducers.selectGetRouteLoading);
|
||||
this.InstallRouteEventHandler();
|
||||
this.InstallEventServiceEventHandler();
|
||||
}
|
||||
|
||||
@HostListener('document:keyup', ['$event'])
|
||||
keyUp(event: KeyboardEvent) {
|
||||
let x = event.keyCode;
|
||||
if (x === 27) {
|
||||
this.store.dispatch(new commonActions.Escape(true,false));
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
// Subscription clean-up
|
||||
if(this.routerSub$) this.routerSub$.unsubscribe();
|
||||
if(this.eventSub$) this.eventSub$.unsubscribe();
|
||||
}
|
||||
|
||||
private InstallRouteEventHandler() {
|
||||
var other = this;
|
||||
this.routerSub$ = this.router.events.subscribe(event => {
|
||||
if (event instanceof RouteConfigLoadStart) {
|
||||
other.store.dispatch(new commonActions.StartRouteLoading());
|
||||
}
|
||||
if (event instanceof RouteConfigLoadEnd) {
|
||||
other.store.dispatch(new commonActions.EndRouteLoading());
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
private InstallEventServiceEventHandler() {
|
||||
var other = this;
|
||||
this.eventSub$ = this.eventService.event.subscribe(event => {
|
||||
var action = other.getActionFromEvent(event);
|
||||
if (action) other.store.dispatch(action);
|
||||
});
|
||||
}
|
||||
|
||||
handleClick(event: MouseEvent) {
|
||||
this.store.dispatch(new commonActions.Escape(false,true));
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user