First functional version

projects/common-map/src/fm-map/components/map/map.component.html

@@ -2,12 +2,10 @@
   <div>
 
   </div>
-  <ng-container *ngIf="(mapState$|async) as mapState">
-          <aol-view [zoom]="mapState.zoom" [rotation]="mapState.rotation">
-              <aol-coordinate [x]="mapState.xCenter" [y]="mapState.yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
-              <fm-map-zoom-to-extent [extent]="extent$|async" [animate]="true"></fm-map-zoom-to-extent>
-            </aol-view>
-  </ng-container>    
+  <aol-view [zoom]="(mapState|async).zoom" [rotation]="(mapState|async).rotation">
+     <aol-coordinate [x]="(mapState|async).xCenter" [y]="(mapState|async).yCenter" [srid]="'EPSG:4326'"></aol-coordinate>
+     <fm-map-zoom-to-extent [extent]="extent|async" [animate]="true"></fm-map-zoom-to-extent>
+  </aol-view>
   <aol-interaction-default></aol-interaction-default>
   <aol-interaction-dragrotateandzoom></aol-interaction-dragrotateandzoom>
   <fm-map-item-layers [itemLayers]="baseLayers|async"></fm-map-item-layers>

projects/common-map/src/fm-map/components/map/map.component.ts

@@ -38,7 +38,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   title: string = 'Map';
   public openedModalName: Observable<string>;
   public itemTypes: Observable<{ [id: string]: IItemType }>;
-  public mapState$: Observable<IMapState>;
+  public mapState: Observable<IMapState>;
   public features: Observable<Array<Feature>>;
   public overlayLayers: Observable<Array<IItemLayer>>;
   public selectedOverlayLayer: Observable<IItemLayer>;
@@ -67,7 +67,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   public position: Observable<Position>;
   public baseLayersCollapsed:boolean = true;
   public overlayLayersCollapsed: boolean = true;
-  public extent$: Observable<Extent>;
+  public extent: Observable<Extent>;
   @ViewChild('map') map;
   
   constructor(private store: Store<mapReducers.State | commonReducers.State>, private route: ActivatedRoute, private router: Router, private uploadService: ResumableFileUploadService, private serializeService: StateSerializerService, public itemTypeService: ItemTypeService, private location: Location, private geolocationService: GeolocationService ) {
@@ -107,7 +107,7 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
   ngOnInit() {
     this.store.dispatch(new mapActions.Init());
     this.selectedFeatures.next({x:0,y:0,features:[]});
-    this.mapState$ = this.store.select(mapReducers.selectGetMapState);
+    this.mapState = this.store.select(mapReducers.selectGetMapState);
     this.parentCode = this.store.select(mapReducers.selectGetParentCode);
     this.features = this.store.select(mapReducers.selectGetFeatures);
     this.overlayLayers = this.store.select(mapReducers.selectGetOverlayLayers);
@@ -126,16 +126,16 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
     this.menuVisible = this.store.select(mapReducers.selectGetMenuVisible);
     this.openedModalName = this.store.select(commonReducers.selectOpenedModalName);
     this.query = this.store.select(mapReducers.selectGetQuery);
-    this.extent$ = this.store.select(mapReducers.selectGetExtent);
+    this.extent = this.store.select(mapReducers.selectGetExtent);
     this.selectedFeatures.next(null);
     this.selectedItemLayer = this.store.select(mapReducers.selectGetSelectedItemLayer);
     this.period = this.store.select(mapReducers.selectGetPeriod);
     this.position = this.geolocationService.getCurrentPosition();
 
-    this.mapState$.pipe(withLatestFrom(this.queryState)).subscribe((state) => {
+    this.mapState.pipe(withLatestFrom(this.queryState)).subscribe((state) => {
       this.replaceUrl(state[0], state[1], true);
     });
-    this.query.pipe(withLatestFrom(this.mapState$)).subscribe((state) => {
+    this.query.pipe(withLatestFrom(this.mapState)).subscribe((state) => {
       this.replaceUrl(state[1], state[0],false);
     });
   }

projects/common-map/src/fm-map/services/geolocation.service.ts

@@ -22,7 +22,6 @@ export class GeolocationService {
       navigator.geolocation.watchPosition(
         (position: Position) => {
           observer.next(position);
-          observer.complete();
         },
         (error: PositionError) => {
           console.log('Geolocation service: ' + error.message);

projects/common/package.json

@@ -18,6 +18,7 @@
     "@ngrx/store": "^7.2",
     "tassign": "^1.0.0",
     "bootstrap": "^4.3.1",
-    "@aspnet/signalr": "^1.1.4"
+    "@aspnet/signalr": "^1.1.4",
+    "font-awesome": "^4.7.0"
   }
 }

projects/common/src/fm/common.module.ts

@@ -32,6 +32,7 @@ import { AuthGuard } from './services/auth-guard.service';
 import { NavBarGuard } from './services/nav-bar-guard.service';
 import { FullScreenGuard } from './services/full-screen-guard.service';
 import { SafePipe } from './shared/safe.pipe';
+import { AppComponent} from './components/app/app.component';
 import { AuthCallbackComponent } from './components/auth-callback/auth-callback.component';
 import { AuthCallbackGuard } from './components/auth-callback/auth-callback.guard';
 import { SessionClearedComponent } from './components/session-cleared/session-cleared.component';
@@ -70,6 +71,7 @@ export {FolderService,
   SafePipe,
   AuthCallbackComponent,
   AuthCallbackGuard,
+  AppComponent,
   SessionClearedComponent,
   ResumableFileUploadService,
   ResumableFileUploadComponent,
@@ -108,6 +110,7 @@ export {FolderService,
     DatePipe
   ],
   declarations: [
+    AppComponent,
     AuthCallbackComponent,
     SidePanelComponent,
     SafePipe,
@@ -121,6 +124,7 @@ export {FolderService,
     NgbModule,
     UploadxModule,
     CommonModule,
+    AppComponent,
     ResumableFileUploadComponent, 
     AuthCallbackComponent,
     SidePanelComponent,

projects/common/src/fm/components/app/app.component.html

@@ -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>

projects/common/src/fm/components/app/app.component.scss

@@ -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;
+}
+

projects/common/src/fm/components/app/app.component.ts

@@ -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));
+  }  
+}
+

projects/common/src/fm/reducers/app-common.reducer.ts

@@ -12,7 +12,9 @@ export interface State {
   initialized: boolean,
   rootItems: IListItem[],
   itemTypes: IItemTypes,
-  user:IUser
+  user:IUser,
+  fullScreen: boolean,
+  routeLoading:boolean
 }
 
 export const initialState: State = {
@@ -20,7 +22,9 @@ export const initialState: State = {
   initialized: false,
   rootItems: [],
   itemTypes: {},
-  user:null
+  user:null,
+  fullScreen: true,
+  routeLoading: false
 }
 
 export function reducer(state = initialState, action: appCommonActions.Actions ): State {
@@ -46,6 +50,26 @@ export function reducer(state = initialState, action: appCommonActions.Actions )
       let a = action as appCommonActions.LoadItemTypesSuccess;
       return tassign(state, { itemTypes: a.itemTypes });
     }
+    case appCommonActions.FULLSCREEN: {
+      return tassign(state, {
+        fullScreen:true
+      });
+    }
+    case appCommonActions.SHOWNAVBAR: {
+      return tassign(state, {
+        fullScreen: false
+      });
+    }
+    case appCommonActions.STARTROUTELOADING: {
+      return tassign(state, {
+        routeLoading: true
+      });
+    }
+    case appCommonActions.ENDROUTELOADING: {
+      return tassign(state, {
+        routeLoading: false
+      });
+    }
     default: {
       return state;
     }
@@ -56,6 +80,9 @@ export const getOpenedModalName = (state: State) => state.openedModalName;
 export const getInitialized = (state: State) => state.initialized;
 export const getItemTypes = (state: State) => state.itemTypes;
 export const getRootItems = (state: State) => state.rootItems;
+export const getFullScreen = (state: State) => state.fullScreen;
+export const getRouteLoading = (state: State) => state.routeLoading;
+
 
 export const selectAppCommonState = createFeatureSelector<State>(MODULE_NAME);
 
@@ -63,3 +90,6 @@ export const selectOpenedModalName = createSelector(selectAppCommonState, getOpe
 export const selectGetInitialized = createSelector(selectAppCommonState, getInitialized);
 export const selectGetItemTypes = createSelector(selectAppCommonState, getItemTypes);
 export const selectGetRootItems = createSelector(selectAppCommonState, getRootItems);
+export const selectGetFullScreen = createSelector(selectAppCommonState, getFullScreen);
+export const selectGetRouteLoading = createSelector(selectAppCommonState, getRouteLoading);
+

projects/common/src/fm/services/event.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { IEventMessage } from '../models/event.message';
 import { Subject } from 'rxjs';
 import { OAuthService } from 'angular-oauth2-oidc';
-import { HubConnection, HubConnectionBuilder, LogLevel } from '@aspnet/signalr';
+import { HubConnection, HubConnectionBuilder, LogLevel ,HttpTransportType} from '@aspnet/signalr';
 import { AppConfig } from "../shared/app.config";
 
 
@@ -15,15 +15,21 @@ export class EventService {
     
   constructor(private oauthService: OAuthService, private appConfig: AppConfig) {
     this._apiEndPoint = appConfig.getConfig("apiEndPoint");
-    this._connection = new HubConnectionBuilder().withUrl(`${ this._apiEndPoint}/eventHub`).configureLogging(LogLevel.Information).build();
+    this._connection = new HubConnectionBuilder().withUrl(`${ this._apiEndPoint}/eventHub`,
+    { transport: HttpTransportType.WebSockets,
+      // accessTokenFactory: () => {
+      //   return oauthService.getAccessToken();
+      // },
+      skipNegotiation:true 
+    }).configureLogging(LogLevel.Information).build();
+    this._connection.on('event', eventMessage => {
+      this.event.next(eventMessage);
+    });
     this._connection.start().then(() => {
       var accessToken = oauthService.getAccessToken();
       if (accessToken) {
         this._connection.send('authenticate', oauthService.getAccessToken());
       }
-    });
-    this._connection.on('event', eventMessage => {
-      this.event.next(eventMessage);
-    });
+    });    
   }
 } 

src/app/app-content.component.ts

@@ -1,8 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-content',
-  template: '<div style="display:block;width:100%;height:200px;" >Hello daar<input type="file" [uploadx]="{chunkSize:2097152}" /> </div><fm-resumable-file-upload></fm-resumable-file-upload>'  
-})
-export class AppContentComponent {
-}

src/app/app-routing.module.ts

@@ -3,8 +3,6 @@ import { RouterModule } from '@angular/router';
 
 import { AuthGuard,FullScreenGuard } from '@farmmaps/common';
 import { MapComponent} from '@farmmaps/common-map';
-import { AppContentComponent} from './app-content.component';
-import { AppSidePanelTestComponent } from './app-side-panel-test.component';
 
 const routes = [
   {
@@ -12,7 +10,6 @@ const routes = [
     redirectTo: 'map',
     pathMatch: 'full'
   },
-  { path: 'sidepanel', canLoad: [AuthGuard], component: AppSidePanelTestComponent},
   { path: 'map', canActivateChild: [AuthGuard],canActivate:[FullScreenGuard], children: [
     {
         path: '',

src/app/app-side-panel-test.component.ts

@@ -1,29 +0,0 @@
-import { Component ,ChangeDetectorRef } from '@angular/core';
-
-
-
-@Component({
-  selector: 'app-side-panel-test',
-  template: '<div><a (click)="handleOpen($event)" href="#">open</a> <fm-side-panel [resizeable]="true" [visible]="show"><a (click)="handleClose($event)" href="#">close</a></fm-side-panel></div>'  
-})
-export class AppSidePanelTestComponent {
-
-  public show:boolean = false;
-
-  constructor(public cr:ChangeDetectorRef ) {
-
-  }
-
-  handleClose(event:MouseEvent) {
-    event.preventDefault();
-    this.show=false;
-    //this.cr.detectChanges();
-  }
-
-  handleOpen(event:MouseEvent)
-  {
-    event.preventDefault();
-    this.show=true;
-    //this.cr.detectChanges();
-  }
-}

src/app/app.component.html

@@ -1,3 +1,3 @@
-<div style="position:absolute;display: block;width:100%;height:100%;overflow: hidden;"><router-outlet></router-outlet></div>
+<fm-app></fm-app>
 
 

src/app/app.component.scss

@@ -1,27 +0,0 @@
-@import "theme.scss";
-
-$fa-font-path: "~font-awesome/fonts";
-@import "~bootstrap/scss/bootstrap.scss";
-@import "~font-awesome/scss/font-awesome.scss";
-
-:host ::ng-deep .btn:focus {
-  box-shadow:none;
-}
-
-:host ::ng-deep .input-group > .form-control:focus {
-  z-index: auto;
-}
-
-:host ::ng-deep .form-control:focus {
-  box-shadow: none;
-  border-color: $input-border-color;
-}
-
-:host ::ng-deep body { 
-    background: #f1f1f1;
-    line-height: 18px; 
-    user-select:none;
-}
-
-
-

src/app/app.component.ts

@@ -5,6 +5,6 @@ import { Component } from '@angular/core';
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppRootComponent {
   title = 'farmmaps-lib-app';
 }

src/app/app.module.ts

@@ -6,12 +6,11 @@ import {
 } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 
-import { AppComponent } from './app.component';
-import { AppContentComponent } from './app-content.component';
-import { AppSidePanelTestComponent } from './app-side-panel-test.component';
-import { AppCommonModule } from '@farmmaps/common';
+import { AppCommonModule,  } from '@farmmaps/common';
 import { AppCommonMapModule} from '@farmmaps/common-map';
 
+import {AppRootComponent} from './app.component';
+
 import {StoreModule, Store} from '@ngrx/store';
 import {EffectsModule, EffectSources} from '@ngrx/effects';
 import { StoreRouterConnectingModule} from '@ngrx/router-store';
@@ -45,9 +44,7 @@ export function provideBootstrapEffects(effects: Type<any>[]) {
 
 @NgModule({
   declarations: [
-    AppComponent,
-    AppContentComponent,
-    AppSidePanelTestComponent
+    AppRootComponent
   ],
   imports: [
     AppRoutingModule,
@@ -58,6 +55,6 @@ export function provideBootstrapEffects(effects: Type<any>[]) {
     EffectsModule.forRoot([])
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppRootComponent]
 })
 export class AppModule { }

src/configuration.json

@@ -1,7 +1,7 @@
 {
     "issuer": "http://accounts.awtest.nl",
     "clientId": "v1t",
-    "audience": "http://farmmaps.awtest.nl/,http://awtest.nl/,http://aan.awtest.nl",
+    "audience": "http://farmmaps.awtest.nl/",
     "requireHttps": false,
     "apiEndPoint": "http://farmmaps.awtest.nl"
   }