Add menu background

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

@@ -198,9 +198,9 @@ export class MapComponent implements OnInit, OnDestroy,AfterViewInit {
       }
       this.stateSetCount += 1;
     });
-    // setTimeout(() => {
-    //   this.map.instance.updateSize();
-    // }, 500);
+    setTimeout(() => {
+      this.map.instance.updateSize();
+    }, 500);
   }
 
   handleSearchCollapse(event) {

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

@@ -1,41 +1,34 @@
-import {NgModule} from '@angular/core';
-import {RouterModule} from '@angular/router';
-
-import {AuthCallbackComponent} from './components/auth-callback/auth-callback.component';
-import {AuthCallbackGuard} from './components/auth-callback/auth-callback.guard';
-import {FullScreenGuard} from './services/full-screen-guard.service';
-import {SessionClearedComponent} from './components/session-cleared/session-cleared.component';
-import {NotFoundComponent} from './components/not-found/not-found.component';
-
-
-const routes = [
-  {
-    path: 'cb',
-    component: AuthCallbackComponent,
-    canActivate: [AuthCallbackGuard],
-  },
-  {
-    path: 'loggedout',
-    component: SessionClearedComponent,
-    canActivate: [FullScreenGuard],
-  },
-  {
-    path: '**', component: NotFoundComponent,
-    data: {
-      title: '404 - Not found',
-      meta: [{name: 'description', content: '404 - Error'}],
-      links: [],
-      // links: [
-      //  { rel: 'canonical', href: 'http://blogs.example.com/bootstrap/something' },
-      //  { rel: 'alternate', hreflang: 'es', href: 'http://es.example.com/bootstrap-demo' }
-      //]
-    },
-  },
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class AppCommonRoutingModule {
-}
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+import {AuthCallbackComponent} from './components/auth-callback/auth-callback.component';
+import {AuthCallbackGuard} from './components/auth-callback/auth-callback.guard';
+import {NavBarGuard} from './services/nav-bar-guard.service';
+import {FullScreenGuard} from './services/full-screen-guard.service';
+import {SessionClearedComponent} from './components/session-cleared/session-cleared.component';
+import {NotFoundComponent} from './components/not-found/not-found.component';
+
+
+const routes = [
+  {
+    path: 'cb',
+    component: AuthCallbackComponent,
+    canActivate: [AuthCallbackGuard],
+  },
+  {
+    path: 'loggedout',
+    component: SessionClearedComponent,
+    canActivate: [FullScreenGuard],
+  },
+  {
+    path: '**', component: NotFoundComponent,
+    canActivate: [NavBarGuard]   
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class AppCommonRoutingModule {
+}

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

@@ -29,6 +29,7 @@ import { NotImplementedComponent } from './components/not-implemented/not-implem
 import { SidePanelComponent } from './components/side-panel/side-panel.component';
 import { TimespanComponent } from './components/timespan/timespan.component';
 import { TagInputComponent } from './components/tag-input/tag-input.component';
+import {MenuBackgroundComponent} from './components/menu-background/menu-background.component';
 import {IEventMessage } from './models/event.message';
 import { IItem, Item } from './models/item';
 import {IItemType} from './models/item.type';
@@ -65,7 +66,8 @@ export {
   commonActions,
   commonReducers,
   IAuthconfigFactory,
-  AuthConfigFactory
+  AuthConfigFactory,
+  MenuBackgroundComponent
 };
 
 @NgModule({
@@ -90,7 +92,8 @@ export {
     ResumableFileUploadComponent,
     TimespanComponent,
     TagInputComponent,
-    SessionClearedComponent
+    SessionClearedComponent,
+    MenuBackgroundComponent
   ],
   exports: [
     NgbModule,
@@ -106,7 +109,8 @@ export {
     ResumableFileUploadComponent,
     TimespanComponent,
     TagInputComponent,
-    SessionClearedComponent
+    SessionClearedComponent,
+    MenuBackgroundComponent
     ]
 })
 export class AppCommonModule {

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

@@ -9,7 +9,8 @@
   </nav>
   <div class="body">
     <router-outlet></router-outlet>
-  </div>
+  </div>  
+  <fm-menu-background [visible]="menuVisible|async"></fm-menu-background>
   <fm-side-panel [visible]="menuVisible|async" [left]="true" class="menu" (click)="handleStopBubble($event)">
     <div class="container-fluid">
       <div class="body">

projects/common/src/fm/components/menu-background/menu-background.component.html

@@ -0,0 +1,3 @@
+<div class="menu-background" [ngClass]="{'show':visible}">
+
+</div>

projects/common/src/fm/components/menu-background/menu-background.component.scss

@@ -0,0 +1,17 @@
+.menu-background {
+    display: block;
+    position: absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+    opacity: 0;
+    background-color: #000000;
+    transition: opacity 0s ease-out 1s;
+    pointer-events: none;
+}
+
+.menu-background.show {
+    pointer-events: all;
+    opacity: 0.3;
+}

projects/common/src/fm/components/menu-background/menu-background.component.ts

@@ -0,0 +1,23 @@
+import { Component, OnInit,Input } from '@angular/core';
+import { Store, Action } from '@ngrx/store';
+import * as appReducers from '../../reducers/app-common.reducer';
+import * as  commonActions  from '../../actions/app-common.actions';
+
+@Component({
+    selector: 'fm-menu-background',
+    templateUrl: './menu-background.component.html',
+    styleUrls: ['./menu-background.component.scss'],
+})
+export class MenuBackgroundComponent implements OnInit {
+    @Input() visible:boolean = false;
+    constructor(private store: Store<appReducers.State>) { }
+
+    ngOnInit() { }
+
+    handleOnClick(event:MouseEvent) {
+        if(this.visible) {
+            this.store.dispatch(new commonActions.SetMenuVisible(false));
+            event.stopPropagation();
+        }
+    }
+}

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

@@ -26,7 +26,7 @@ export const initialState: State = {
   user:null,
   fullScreen: true,
   routeLoading: false,
-  menuVisible: true
+  menuVisible: false
 }
 
 export function reducer(state = initialState, action: appCommonActions.Actions ): State {

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

@@ -1,40 +1,46 @@
-import { Injectable } from '@angular/core';
-import {IItemTypes} from '../models/item.types'
-import {IItem} from '../models/item'
-import {ItemService} from '../services/item.service';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class ItemTypeService {
-    public itemTypes: IItemTypes;
-
-    constructor(itemService:ItemService) {          
-      itemService.getItemTypes().subscribe((itemTypes) => {
-        this.itemTypes = itemTypes;
-     });
-    } 
-
-     getIcon(itemType: string) {
-       var icon = "fa fa-file-o";
-       if (this.itemTypes[itemType]) icon = this.itemTypes[itemType].icon;
-       return icon;
-     }
-
-     getColor(itemType: string) {
-       var color = "#000000";
-       if (this.itemTypes[itemType]) color = this.itemTypes[itemType].iconColor;
-       return color;
-     }
-
-     hasViewer(item: IItem) {
-        let itemType: string = item.itemType;
-        if (this.itemTypes[itemType]) return this.itemTypes[itemType].viewer !== undefined;
-        return false;
-      }
-
-      isLayer(item: IItem) {
-        let itemType: string = item.itemType;
-        return itemType == "vnd.farmmaps.itemtype.geotiff.processed" || itemType == "vnd.farmmaps.itemtype.layer" || itemType == "vnd.farmmaps.itemtype.shape.processed";
-      }
+import { Injectable } from '@angular/core';
+import {IItemTypes} from '../models/item.types'
+import {IItem} from '../models/item'
+import {ItemService} from '../services/item.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ItemTypeService {
+    public itemTypes: IItemTypes;
+
+    constructor(itemService:ItemService) {          
+      itemService.getItemTypes().subscribe((itemTypes) => {
+        this.itemTypes = itemTypes;
+     });
+    } 
+
+     getIcon(itemType: string) {
+       var icon = "fa fa-file-o";
+       if (this.itemTypes[itemType]) icon = this.itemTypes[itemType].icon;
+       return icon;
+     }
+
+     getColor(itemType: string) {
+       var color = "#000000";
+       if (this.itemTypes[itemType]) color = this.itemTypes[itemType].iconColor;
+       return color;
+     }
+
+     hasViewer(item: IItem) {
+        let itemType: string = item.itemType;
+        if (this.itemTypes[itemType]) return this.itemTypes[itemType].viewer !== undefined;
+        return false;
+      }
+
+      hasEditor(item: IItem) {
+        let itemType: string = item.itemType;
+        if (this.itemTypes[itemType]) return this.itemTypes[itemType].editor !== undefined;
+        return false;
+      }
+
+      isLayer(item: IItem) {
+        let itemType: string = item.itemType;
+        return itemType == "vnd.farmmaps.itemtype.geotiff.processed" || itemType == "vnd.farmmaps.itemtype.layer" || itemType == "vnd.farmmaps.itemtype.shape.processed";
+      }
 }