use canvas for testting and added menu service for events

src/app/app-routing.module.ts

@@ -1,11 +1,13 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { AuthComponent } from './auth/auth.component';
+import { CanvasComponent } from './canvas/canvas.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 
 
 const routes: Routes = [
   {path : '', component: DashboardComponent},
+  {path : 'canvas', component: CanvasComponent},
   {path : 'dashboard', component: DashboardComponent},
   {path : 'login', component: AuthComponent}
 ];

src/app/app.component.html

@@ -1,36 +1,12 @@
 
 <div class=topMenuBar >
   <!-- <kendo-icon [name]="'photo-camera'" [size]="'medium'" style="color:yellow;float:left;"></kendo-icon> -->
-  <kendo-menu [items]="items"> 
+  <kendo-menu [items]="items" (select)="onSelect($event)"> 
     <ng-template kendoMenuItemTemplate let-item="item">
-      <fa-icon  *ngIf="hasFa(item)"  [icon]="item.fa"></fa-icon> &nbsp;
+      <fa-icon  *ngIf="menuItemHasFontawesome(item)"  [icon]="item.fa"></fa-icon> &nbsp;
       {{ item.text }} 
     </ng-template>
   </kendo-menu>
 </div>
 <router-outlet></router-outlet>
 
-
-<hr>
-
-<kendo-menu>
-  <kendo-menu-item text="My Web Site" icon="folder">
-      <kendo-menu-item text="images" icon="folder">
-        
-          <kendo-menu-item text="logo.png" icon="image"></kendo-menu-item>
-          <kendo-menu-item text="body-back.png" icon="image"></kendo-menu-item>
-          <kendo-menu-item text="my-photo.png" icon="image"></kendo-menu-item>
-      </kendo-menu-item>
-      <kendo-menu-item text="resources" icon="folder">
-          <kendo-menu-item text="pdf" icon="folder">
-              <kendo-menu-item text="prices.pdf" icon="pdf"></kendo-menu-item>
-              <kendo-menu-item text="brochure.pdf" icon="pdf"></kendo-menu-item>
-          </kendo-menu-item>
-          <kendo-menu-item text="zip" icon="folder"></kendo-menu-item>
-      </kendo-menu-item>
-      <kendo-menu-item text="about.html" icon="file"></kendo-menu-item>
-      <kendo-menu-item text="contacts.html" icon="file"></kendo-menu-item>
-      <kendo-menu-item text="index.html" icon="file"></kendo-menu-item>
-      <kendo-menu-item text="portfolio.html" icon="file"></kendo-menu-item>
-  </kendo-menu-item>
-</kendo-menu>

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 
 import { mainMenuItems } from './main-menu-items';
+import { MenuService } from './service/menu.service';
 
 @Component({
   selector: 'app-root',
@@ -11,9 +12,18 @@ export class AppComponent {
 
   title = 'broker';
   public items: any[] = mainMenuItems;
+  
+  constructor(private menuService: MenuService){
+  }
 
-  public hasFa (item: any) : boolean {
-    //console.log(item);
+  public menuItemHasFontawesome (item: any) : boolean {
     return item.hasOwnProperty('fa');
   }
+
+  public onSelect({ item }): void {
+    if (!item.items) {
+      this.menuService.itemClicked.emit(item);
+      //console.log("emit on select : " + item.text);
+    }
+  }  
 }

src/app/app.module.ts

@@ -17,6 +17,8 @@ import { AppRoutingModule } from './app-routing.module';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { AuthComponent } from './auth/auth.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { CanvasComponent } from './canvas/canvas.component';
+import { MenuService } from './service/menu.service';
 
 
 
@@ -25,7 +27,8 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
   declarations: [
     AppComponent,
     DashboardComponent,
-    AuthComponent 
+    AuthComponent,
+    CanvasComponent 
   ],
   imports: [
     BrowserModule,
@@ -40,7 +43,7 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
     IconsModule,
     FontAwesomeModule
   ],
-  providers: [],
+  providers: [MenuService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/canvas/canvas.component.html

@@ -0,0 +1,110 @@
+<h3 style="text-align:center"> this is canvas </h3>
+<hr>
+<kendo-menu>
+    <kendo-menu-item text="My Web Site" icon="folder">
+        <kendo-menu-item text="images" icon="folder">
+          
+            <kendo-menu-item text="logo.png" icon="image"></kendo-menu-item>
+            <kendo-menu-item text="body-back.png" icon="image"></kendo-menu-item>
+            <kendo-menu-item text="my-photo.png" icon="image"></kendo-menu-item>
+        </kendo-menu-item>
+        <kendo-menu-item text="resources" icon="folder">
+            <kendo-menu-item text="pdf" icon="folder">
+                <kendo-menu-item text="prices.pdf" icon="pdf"></kendo-menu-item>
+                <kendo-menu-item text="brochure.pdf" icon="pdf"></kendo-menu-item>
+            </kendo-menu-item>
+            <kendo-menu-item text="zip" icon="folder"></kendo-menu-item>
+        </kendo-menu-item>
+        <kendo-menu-item text="about.html" icon="file"></kendo-menu-item>
+        <kendo-menu-item text="contacts.html" icon="file"></kendo-menu-item>
+        <kendo-menu-item text="index.html" icon="file"></kendo-menu-item>
+        <kendo-menu-item text="portfolio.html" icon="file"></kendo-menu-item>
+    </kendo-menu-item>
+  </kendo-menu>
+  <kendo-icon [name]="'photo-camera'" [size]="'medium'"></kendo-icon>
+
+  <hr> 
+
+<kendo-grid [data]="gridData" >
+    <kendo-grid-column field="ProductID" title="ID" width="40">
+    </kendo-grid-column>
+    <kendo-grid-column field="ProductName" title="Name" width="250">
+    </kendo-grid-column>
+    <kendo-grid-column field="Category.CategoryName" title="Category">
+    </kendo-grid-column>
+    <kendo-grid-column field="UnitPrice" title="Price" width="80">
+    </kendo-grid-column>
+    <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
+    </kendo-grid-column>
+    <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
+        <ng-template kendoGridCellTemplate let-dataItem>
+            <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
+        </ng-template>
+    </kendo-grid-column>
+</kendo-grid>
+
+<hr>
+<div class="example-wrapper" style="opacity:1;">
+    <button kendoButton *ngIf="!dialogOpened && !windowOpened" (click)="open('dialog')">Open dialog</button>
+    <button kendoButton *ngIf="!dialogOpened && !windowOpened" (click)="open('window')">Open window</button>
+    
+    <kendo-dialog title="Please confirm" *ngIf="dialogOpened" (close)="close('dialog')" [minWidth]="250" [width]="650">
+        <p style="margin: 30px; text-align: center;">Are you sure you want to
+        continue?</p>
+        
+
+        <div class="example-wrapper">
+            <div class="row">
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>ColorGradient</p>
+                    <kendo-colorgradient [value]="'#7e16c8'"></kendo-colorgradient>
+                </div>
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>ColorPalette</p>
+                    <kendo-colorpalette [tileSize]="30"></kendo-colorpalette>
+                </div>
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>ColorPicker</p>
+                    <kendo-colorpicker [value]="'#7e16c8'"></kendo-colorpicker>
+                </div>
+                <div class="col-xs-12 col-sm-6 example-col">
+                    <p>MaskedTextBox</p>
+                    <kendo-maskedtextbox
+                        [mask]="'9-000'"
+                    ></kendo-maskedtextbox>
+                </div>
+            </div>
+         </div>
+ 
+
+        <kendo-menu>
+            <kendo-menu-item text="My Web Site" icon="folder">
+                <kendo-menu-item text="images" icon="folder">
+                    <kendo-menu-item text="logo.png" icon="image"></kendo-menu-item>
+                    <kendo-menu-item text="body-back.png" icon="image"></kendo-menu-item>
+                    <kendo-menu-item text="my-photo.png" icon="image"></kendo-menu-item>
+                </kendo-menu-item>
+                <kendo-menu-item text="resources" icon="folder">
+                    <kendo-menu-item text="pdf" icon="folder">
+                        <kendo-menu-item text="prices.pdf" icon="pdf"></kendo-menu-item>
+                        <kendo-menu-item text="brochure.pdf" icon="pdf"></kendo-menu-item>
+                    </kendo-menu-item>
+                    <kendo-menu-item text="zip" icon="folder"></kendo-menu-item>
+                </kendo-menu-item>
+                <kendo-menu-item text="about.html" icon="file"></kendo-menu-item>
+                <kendo-menu-item text="contacts.html" icon="file"></kendo-menu-item>
+                <kendo-menu-item text="index.html" icon="file"></kendo-menu-item>
+                <kendo-menu-item text="portfolio.html" icon="file"></kendo-menu-item>
+            </kendo-menu-item>
+          </kendo-menu>
+
+        <kendo-dialog-actions>
+            <button kendoButton (click)="action('no')">No</button>
+            <button kendoButton (click)="action('yes')" primary="true">Yes</button>
+        </kendo-dialog-actions>
+    </kendo-dialog>
+
+    <kendo-window [minWidth]="200" [minHeight]="125" title="About" *ngIf="windowOpened" (close)="close('window')">
+      <p style="text-align: center;">Additional info</p>
+     </kendo-window>
+  </div>

src/app/canvas/canvas.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CanvasComponent } from './canvas.component';
+
+describe('CanvasComponent', () => {
+  let component: CanvasComponent;
+  let fixture: ComponentFixture<CanvasComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ CanvasComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CanvasComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/canvas/canvas.component.ts

@@ -0,0 +1,41 @@
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { sampleProducts } from '../models/sample_product';
+import { MenuService } from '../service/menu.service';
+
+@Component({
+  selector: 'app-canvas',
+  templateUrl: './canvas.component.html',
+  styleUrls: ['./canvas.component.scss']
+})
+
+export class CanvasComponent implements OnInit, OnDestroy {
+  public gridData: any[] = sampleProducts;
+  public dialogOpened = false;
+  public windowOpened = false;
+
+  constructor(private menuService: MenuService) { }
+
+  ngOnInit(): void {
+    this.menuService.itemClicked.subscribe(
+       (item:any) =>{
+         console.log(item);
+       }
+    );
+  }
+  ngOnDestroy(): void{
+    this.menuService.itemClicked.unsubscribe(); 
+  }
+
+  public close(component) {
+    this[component + 'Opened'] = false;
+  }
+
+  public open(component) {
+    this[component + 'Opened'] = true;
+  }
+
+  public action(status) {
+    console.log(`Dialog result: ${status}`);
+    this.dialogOpened = false;
+  }
+}

src/app/canvas/dist/canvas.component.js

@@ -0,0 +1,46 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+exports.__esModule = true;
+exports.CanvasComponent = void 0;
+var core_1 = require("@angular/core");
+var sample_product_1 = require("../models/sample_product");
+var CanvasComponent = /** @class */ (function () {
+    function CanvasComponent(menuService) {
+        this.menuService = menuService;
+        this.gridData = sample_product_1.sampleProducts;
+        this.dialogOpened = false;
+        this.windowOpened = false;
+    }
+    CanvasComponent.prototype.ngOnInit = function () {
+        this.menuService.itemClicked.subscribe(function (item) {
+            console.log(item);
+        });
+    };
+    CanvasComponent.prototype.ngOnDestroy = function () {
+        this.menuService.itemClicked.unsubscribe();
+    };
+    CanvasComponent.prototype.close = function (component) {
+        this[component + 'Opened'] = false;
+    };
+    CanvasComponent.prototype.open = function (component) {
+        this[component + 'Opened'] = true;
+    };
+    CanvasComponent.prototype.action = function (status) {
+        console.log("Dialog result: " + status);
+        this.dialogOpened = false;
+    };
+    CanvasComponent = __decorate([
+        core_1.Component({
+            selector: 'app-canvas',
+            templateUrl: './canvas.component.html',
+            styleUrls: ['./canvas.component.scss']
+        })
+    ], CanvasComponent);
+    return CanvasComponent;
+}());
+exports.CanvasComponent = CanvasComponent;

src/app/dashboard/dashboard.component.html

@@ -1,96 +1,10 @@
 <p>dashboard works!</p>
 
-<kendo-icon [name]="'photo-camera'" [size]="'medium'"></kendo-icon>
 
 
 
-<hr> 
-
-<kendo-grid [data]="gridData" >
-    <kendo-grid-column field="ProductID" title="ID" width="40">
-    </kendo-grid-column>
-    <kendo-grid-column field="ProductName" title="Name" width="250">
-    </kendo-grid-column>
-    <kendo-grid-column field="Category.CategoryName" title="Category">
-    </kendo-grid-column>
-    <kendo-grid-column field="UnitPrice" title="Price" width="80">
-    </kendo-grid-column>
-    <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
-    </kendo-grid-column>
-    <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
-        <ng-template kendoGridCellTemplate let-dataItem>
-            <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
-        </ng-template>
-    </kendo-grid-column>
-</kendo-grid>
-
-
 <!-- <div #target class="target">
     <p class="placeholder">Right-click to open Context menu</p>
   </div>
   <kendo-contextmenu [target]="target" [items]="items">  </kendo-contextmenu> -->
 
-  <div class="example-wrapper" style="opacity:1;">
-    <button kendoButton *ngIf="!dialogOpened && !windowOpened" (click)="open('dialog')">Open dialog</button>
-    <button kendoButton *ngIf="!dialogOpened && !windowOpened" (click)="open('window')">Open window</button>
-    
-    <kendo-dialog title="Please confirm" *ngIf="dialogOpened" (close)="close('dialog')" [minWidth]="250" [width]="650">
-        <p style="margin: 30px; text-align: center;">Are you sure you want to
-        continue?</p>
-        
-
-        <div class="example-wrapper">
-            <div class="row">
-                <div class="col-xs-12 col-sm-6 example-col">
-                    <p>ColorGradient</p>
-                    <kendo-colorgradient [value]="'#7e16c8'"></kendo-colorgradient>
-                </div>
-                <div class="col-xs-12 col-sm-6 example-col">
-                    <p>ColorPalette</p>
-                    <kendo-colorpalette [tileSize]="30"></kendo-colorpalette>
-                </div>
-                <div class="col-xs-12 col-sm-6 example-col">
-                    <p>ColorPicker</p>
-                    <kendo-colorpicker [value]="'#7e16c8'"></kendo-colorpicker>
-                </div>
-                <div class="col-xs-12 col-sm-6 example-col">
-                    <p>MaskedTextBox</p>
-                    <kendo-maskedtextbox
-                        [mask]="'9-000'"
-                    ></kendo-maskedtextbox>
-                </div>
-            </div>
-         </div>
- 
-
-        <kendo-menu>
-            <kendo-menu-item text="My Web Site" icon="folder">
-                <kendo-menu-item text="images" icon="folder">
-                    <kendo-menu-item text="logo.png" icon="image"></kendo-menu-item>
-                    <kendo-menu-item text="body-back.png" icon="image"></kendo-menu-item>
-                    <kendo-menu-item text="my-photo.png" icon="image"></kendo-menu-item>
-                </kendo-menu-item>
-                <kendo-menu-item text="resources" icon="folder">
-                    <kendo-menu-item text="pdf" icon="folder">
-                        <kendo-menu-item text="prices.pdf" icon="pdf"></kendo-menu-item>
-                        <kendo-menu-item text="brochure.pdf" icon="pdf"></kendo-menu-item>
-                    </kendo-menu-item>
-                    <kendo-menu-item text="zip" icon="folder"></kendo-menu-item>
-                </kendo-menu-item>
-                <kendo-menu-item text="about.html" icon="file"></kendo-menu-item>
-                <kendo-menu-item text="contacts.html" icon="file"></kendo-menu-item>
-                <kendo-menu-item text="index.html" icon="file"></kendo-menu-item>
-                <kendo-menu-item text="portfolio.html" icon="file"></kendo-menu-item>
-            </kendo-menu-item>
-          </kendo-menu>
-
-        <kendo-dialog-actions>
-            <button kendoButton (click)="action('no')">No</button>
-            <button kendoButton (click)="action('yes')" primary="true">Yes</button>
-        </kendo-dialog-actions>
-    </kendo-dialog>
-
-    <kendo-window [minWidth]="200" [minHeight]="125" title="About" *ngIf="windowOpened" (close)="close('window')">
-      <p style="text-align: center;">Additional info</p>
-     </kendo-window>
-  </div>

src/app/main-menu-items.ts

@@ -3,7 +3,8 @@ import { faChartArea, faChartPie, faIdCard, faIdCardAlt, faMoneyCheck, faUnivers
 export const mainMenuItems: any[] = [
     {
         text: '',
-        fa: faUniversity
+        fa: faUniversity,
+        url: './#canvas'
     },
     {
         text: 'SFM',
@@ -58,7 +59,7 @@ export const mainMenuItems: any[] = [
             { text: '--', separator: "true"  }, 
             { text: 'Broadcast' , icon : 'email'},
             { text: '--', separator: "true"  }, 
-            { text: 'UnPaid', icon : 'dollar' },
+            { text: 'UnPaid', fa : faMoneyCheck },
         ]
     }
 ];

src/app/service/dist/menu.service.js

@@ -0,0 +1,20 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+exports.__esModule = true;
+exports.MenuService = void 0;
+var core_1 = require("@angular/core");
+var MenuService = /** @class */ (function () {
+    function MenuService() {
+        this.itemClicked = new core_1.EventEmitter();
+    }
+    MenuService = __decorate([
+        core_1.Injectable()
+    ], MenuService);
+    return MenuService;
+}());
+exports.MenuService = MenuService;

src/app/service/menu.service.ts

@@ -0,0 +1,7 @@
+import { EventEmitter, Injectable } from '@angular/core';
+
+
+@Injectable()
+export class MenuService {
+    itemClicked = new EventEmitter <any>();
+}

src/index.html

@@ -21,11 +21,18 @@
       min-height: 100%;
       z-index: -1;
     }
+    
+    html {
+      background: url('./assets/img/body_bg.jpg') no-repeat center center fixed; 
+      -webkit-background-size: cover;
+      -moz-background-size: cover;
+      -o-background-size: cover;
+      background-size: cover;      
+    }
 
     body {
       margin: 0;
       background-size: cover;
-      background-image: url('../img/login-bg1.jpg');
     }
 
     .vimeo-container {
@@ -36,7 +43,7 @@
       position: relative;
     }
 
-    iframe {
+    iframe { 
       box-sizing: border-box;
       width: 177.77777778vh;
       height: 56.25vw;
@@ -49,8 +56,8 @@
     }
   </style>
 
-  <iframe id=bgVideo src="https://player.vimeo.com/video/468031372?background=1&controls=0" frameborder="0"
-    allow="autoplay; fullscreen" allowfullscreen></iframe>
+  <!-- <iframe id=bgVideo src="https://player.vimeo.com/video/468031372?background=1&controls=0" frameborder="0"
+    allow="autoplay; fullscreen" allowfullscreen></iframe> -->
 
 </body>