breadcrumb example

src/app/app.component.ts

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

src/app/commons/component/layout/breadcrumb/app.breadcrumb.component.html

@@ -14,16 +14,4 @@
             <li *ngIf="!last">/</li>
         </ng-template>
     </ul>
-
-    <div class="layout-breadcrumb-options">
-        <a routerLink="/" title="Backup">
-            <i class="material-icons">backup</i>
-        </a>
-        <a routerLink="/" title="Bookmark">
-            <i class="material-icons">bookmark</i>
-        </a>
-        <a routerLink="/" title="Logout">
-            <i class="material-icons">power_settings_new</i>
-        </a>
-    </div>
 </div>

src/app/commons/component/layout/breadcrumb/app.breadcrumb.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy } from '@angular/core';
 import { AppComponent } from 'app/app.component';
-import { BreadcrumbService } from './breadcrumb.service';
+import { BreadcrumbService } from 'app/commons/service/breadcrumb.service';
 import { Subscription } from 'rxjs/Subscription';
 import { MenuItem } from 'primeng/primeng';
 

src/app/commons/component/layout/breadcrumb/breadcrumb.service.ts

@@ -1,16 +0,0 @@
-import { Injectable } from '@angular/core';
-import { Subject } from 'rxjs/Subject';
-import { Observable } from 'rxjs/Observable';
-import { MenuItem } from 'primeng/primeng';
-
-@Injectable()
-export class BreadcrumbService {
-
-    private itemsSource = new Subject<MenuItem[]>();
-
-    itemsHandler = this.itemsSource.asObservable();
-
-    setItems(items: MenuItem[]) {
-        this.itemsSource.next(items);
-    }
-}

src/app/pages/infra/infra-page.component.html

@@ -3,8 +3,6 @@
         <div class="ui-g-12">
             <div class="card no-margin">
                 <of-infra-map></of-infra-map>
-                <of-infra-map></of-infra-map>
-                <of-infra-map></of-infra-map>
             </div>
         </div>
     </div>

src/app/pages/pages.component.ts

@@ -1,7 +1,8 @@
 import { Component, AfterViewInit, ElementRef, Renderer, ViewChild, OnDestroy, OnInit, NgZone } from '@angular/core';
 import { ScrollPanel } from 'primeng/primeng';
-import { Router } from '@angular/router';
+import { Router, NavigationStart } from '@angular/router';
 import { slide, fade } from './pages-animation';
+import { BreadcrumbService } from '../commons/service/breadcrumb.service';
 enum MenuOrientation {
   STATIC,
   OVERLAY,
@@ -60,7 +61,13 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit {
 
   rippleMouseDownListener: any;
 
-  constructor(public renderer: Renderer, public zone: NgZone, private router: Router) {
+  constructor(public renderer: Renderer, public zone: NgZone, private router: Router, private breadcrumbService: BreadcrumbService) {
+    router.events.subscribe((val) => {
+      console.log(val);
+      if (val instanceof NavigationStart) {
+        breadcrumbService.setItems(null);
+      }
+  });
   }
 
   ngOnInit() {

src/app/pages/pages.module.ts

@@ -8,8 +8,7 @@ import { AppFooterComponent } from 'app/commons/component/layout/footer/app.foot
 import { AppBreadcrumbComponent } from 'app/commons/component/layout/breadcrumb/app.breadcrumb.component';
 import { AppRightpanelComponent } from 'app/commons/component/layout/right-panel/app.rightpanel.component';
 import { AppInlineProfileComponent } from 'app/commons/component/layout/profile/app.profile.component';
-import { BreadcrumbService } from 'app/commons/component/layout/breadcrumb/breadcrumb.service';
-
+import { BreadcrumbService } from 'app/commons/service/breadcrumb.service';
 import {
   LocalizationModule,
 } from 'angular-l10n';

src/app/pages/probes/download/download-page.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
+import { BreadcrumbService } from '../../../commons/service/breadcrumb.service';
 
 @Component({
   selector: 'of-pages-download',
@@ -11,8 +12,14 @@ export class ProbeDownloadPageComponent implements OnInit {
 
   constructor(
     private router: Router,
-    private route: ActivatedRoute
-  ) { }
+    private route: ActivatedRoute,
+    private breadcrumbService: BreadcrumbService
+  ) {
+    breadcrumbService.setItems([
+      { label: 'Probe', routerLink: ['/probe/list'] },
+      { label: 'Download', routerLink: ['/probe/download'] },
+    ]);
+  }
 
   ngOnInit() {
     this.route.params.subscribe((params: any) => {

src/app/pages/probes/noauth-probe/noauth-probe-page-routing.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { NoAuthProbePageComponent } from './noauth-probe-page.component';
 import { ProbeListComponent } from 'packages/probe/component/list/list.component';
-import { ListComponent } from 'packages/noauth/component/list/list.component';
+import { NoAuthProbeListComponent } from 'packages/noauth/component/list/list.component';
 import { ProbeDownloadComponent } from 'packages/probe/component/download/download.component';
 
 const routes: Routes = [

src/app/pages/probes/noauth-probe/noauth-probe-page.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { BreadcrumbService } from 'app/commons/service/breadcrumb.service';
 
 @Component({
   selector: 'of-pages-noauth-probe',
@@ -7,7 +8,11 @@ import { Component, OnInit } from '@angular/core';
 export class NoAuthProbePageComponent {
 
   constructor(
+    private breadcrumbService: BreadcrumbService
   ) {
+    breadcrumbService.setItems([
+      { label: 'Probe', routerLink: ['/probe/list'] },
+      { label: 'Unauthroized', routerLink: ['/probe/noauth'] },
+    ]);
   }
-
 }

src/app/pages/probes/probe/probe-page.component.ts

@@ -3,6 +3,7 @@ import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
 import { Subscription } from 'rxjs/Subscription';
 import { Probe } from '@overflow/commons-typescript/model/probe';
 import { Target } from '@overflow/commons-typescript/model/target';
+import { BreadcrumbService } from 'app/commons/service/breadcrumb.service';
 
 @Component({
   selector: 'of-pages-probe',
@@ -14,11 +15,20 @@ export class ProbePageComponent {
 
   constructor(
     private router: Router,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private breadcrumbService: BreadcrumbService
   ) {
     this.route.params.subscribe(params => {
       this.isDetail = params['id'] ? true : false;
     });
+
+    this.breadcrumbService.setItems([
+      { label: 'Probe', routerLink: ['/probe/list'],  }
+    ]);
+  }
+
+  test() {
+    alert('test');
   }
 
   onProbeSelect(probe: Probe) {

src/packages/noauth/component/index.ts

@@ -1,5 +1,5 @@
-import { ListComponent } from './list/list.component';
+import { NoAuthProbeListComponent } from './list/list.component';
 
 export const COMPONENTS = [
-    ListComponent,
+    NoAuthProbeListComponent,
 ];

src/packages/noauth/component/list/list.component.ts

@@ -8,7 +8,7 @@ import { MessageService } from 'primeng/components/common/messageservice';
   templateUrl: './list.component.html',
   providers: [ConfirmationService, MessageService]
 })
-export class ListComponent {
+export class NoAuthProbeListComponent {
   @Input() noauthProbes: NoAuthProbe[];
   @Output() accept = new EventEmitter<NoAuthProbe>();
   @Output() deny = new EventEmitter<NoAuthProbe>();

src/packages/noauth/container/index.ts

@@ -1,5 +1,5 @@
-import { ListContainerComponent } from './list/list-container.component';
+import { NoAuthProbeListContainerComponent } from './list/list-container.component';
 
 export const CONTAINER_COMPONENTS = [
-  ListContainerComponent,
+  NoAuthProbeListContainerComponent,
 ];

src/packages/noauth/container/list/list-container.component.ts

@@ -17,7 +17,7 @@ import { MessageService } from 'primeng/components/common/messageservice';
   templateUrl: './list-container.component.html',
   providers: [ConfirmationService, MessageService]
 })
-export class ListContainerComponent implements OnInit, AfterContentInit, OnDestroy {
+export class NoAuthProbeListContainerComponent implements OnInit, AfterContentInit, OnDestroy {
   noauthProbes$: Observable<NoAuthProbe[]>;
 
   constructor(