probe download route

src/app/app-routing.module.ts

@@ -5,8 +5,8 @@ import { AuthGuard } from './commons/guard/auth.guard';
 const routes: Routes = [
   { path: '', loadChildren: './pages/pages.module#PagesModule', canActivate: [AuthGuard]  },
   { path: 'auth', loadChildren: './pages/auth/auth-page.module#AuthPageModule' },
-  { path: '**', loadChildren: './pages/error/error-page.module#ErrorPageModule' },
   { path: 'error', loadChildren: './pages/error/error-page.module#ErrorPageModule' },
+  { path: '**', redirectTo: 'error' },
 ];
 
 @NgModule({

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

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

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

@@ -1,13 +1,14 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Language } from 'angular-l10n';
+import { MenuItem } from 'primeng/api';
 
 @Component({
   selector: 'of-tabbar',
   templateUrl: './app.tabbar.component.html',
 })
 export class TabbarComponent implements OnInit {
-  @Input() tabs: any;
+  @Input() tabs: MenuItem[];
 
   constructor(public router: Router) { }
 

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

@@ -129,7 +129,7 @@
             <li #messages [ngClass]="{'active-top-menu':app.activeTopbarItem === messages}">
                 <a href="#" (click)="app.onTopbarItemClick($event,messages)">
                     <i class="topbar-icon material-icons animated swing">notifications</i>
-                    <span class="topbar-badge animated rubberBand" *ngIf="notificationCount > 0">
+                    <span class="topbar-badge animated rubberBand" [hidden]="notificationCount == 0">
                         {{notificationCount}}
                     </span>
                     <span class="topbar-item-name">Notifications</span>

src/app/pages/pages.module.ts

@@ -8,7 +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,

src/app/pages/probe/download/download-page-routing.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ProbeDownloadPageComponent } from './download-page.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ProbeDownloadPageComponent,
+  },
+  {
+    path: ':idx',
+    component: ProbeDownloadPageComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class ProbeDownloadPageRoutingModule { }

src/app/pages/probe/download/download-page.component.html

@@ -1 +1 @@
-<div>download</div>
+<of-download (select)="onSelect($event)" [index]="index"></of-download>

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

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-
-
+import { Router, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'of-pages-download',
@@ -8,11 +7,20 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ProbeDownloadPageComponent implements OnInit {
 
-  constructor() { }
+  private index;
+
+  constructor(
+    private router: Router,
+    private route: ActivatedRoute
+  ) { }
 
   ngOnInit() {
+    this.route.params.subscribe((params: any) => {
+      this.index = params['idx'];
+    });
   }
 
-
-
+  onSelect(index) {
+    this.router.navigate(['/probe/download', index]);
+  }
 }

src/app/pages/probe/download/download-page.module.ts

@@ -3,11 +3,14 @@ import { CommonModule } from '@angular/common';
 
 import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
 import { ProbeDownloadPageComponent } from './download-page.component';
+import { ProbeDownloadPageRoutingModule } from './download-page-routing.module';
+import { ProbeModule } from 'packages/probe/probe.module';
 
 @NgModule({
   imports: [
     CommonModule,
-    PrimeNGModules,
+    ProbeDownloadPageRoutingModule,
+    ProbeModule
   ],
   entryComponents: [
   ],

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

@@ -4,8 +4,10 @@ import { Component, OnInit } from '@angular/core';
   selector: 'of-pages-noauth-probe',
   templateUrl: './noauth-probe-page.component.html',
 })
-export class NoAuthProbePageComponent  {
+export class NoAuthProbePageComponent {
 
-  constructor() { }
+  constructor(
+  ) {
+  }
 
 }

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

@@ -1,6 +1,5 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { ProbeModule } from 'packages/probe/probe.module';
 import { NoauthModule } from 'packages/noauth/noauth.module';
 import { NoAuthProbePageComponent } from './noauth-probe-page.component';
 import { NoAuthProbePageRoutingModule } from './noauth-probe-page-routing.module';
@@ -11,7 +10,6 @@ import { TabbarModule } from 'app/commons/component/layout/tabbar/app.tabbar.mod
     CommonModule,
     NoAuthProbePageRoutingModule,
     TabbarModule,
-    ProbeModule,
     NoauthModule,
   ],
   declarations: [

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

@@ -13,8 +13,8 @@ const routes: Routes = [
     component: ProbePageComponent,
     children: [
       { path: 'list', component: ProbeListComponent },
-      { path: 'noauth', loadChildren: 'app/pages/probe/noauth-probe/noauth-probe-page.module#NoAuthProbePageModule' },
-      { path: 'download', component: DownloadComponent },
+      { path: 'noauth', loadChildren: './noauth-probe/noauth-probe-page.module#NoAuthProbePageModule' },
+      { path: 'download', loadChildren: './download/download-page.module#ProbeDownloadPageModule' },
       { path: ':id/info', component: ProbeDetailComponent },
       // { path: ':id/targets', loadChildren: 'app/pages/targets/targets-page.module#TargetsPageModule'},
       { path: ':id/history', component: null },

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

@@ -11,7 +11,9 @@ export class ProbePageComponent implements OnDestroy {
   private tabs = undefined;
   private routerSubscription$: Subscription;
 
-  constructor(private router: Router) {
+  constructor(
+    private router: Router
+  ) {
     this.routerSubscription$ = this.router.events.subscribe((event) => {
       if (event instanceof NavigationEnd) {
         this.generateTabMenu(event);

src/app/pages/probe/probe-page.module.ts

@@ -7,7 +7,6 @@ import { ProbePageRoutingModule } from './probe-page-routing.module';
 import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
 import { ProbeModule } from 'packages/probe/probe.module';
 import { TabbarModule } from 'app/commons/component/layout/tabbar/app.tabbar.module';
-import { NoauthModule } from 'packages/noauth/noauth.module';
 import { ProbeListComponent } from './probe/list.component';
 import { ProbeDetailComponent } from './probe/detail.component';
 
@@ -17,7 +16,6 @@ import { ProbeDetailComponent } from './probe/detail.component';
     ProbePageRoutingModule,
     PrimeNGModules,
     ProbeModule,
-    NoauthModule,
     TabbarModule,
   ],
   declarations: [

src/packages/probe/component/download/download.component.html

@@ -1,17 +1,23 @@
 <h1>Download</h1>
-<p-tabView orientation="left">
+<p-tabView orientation="left" (onChange)="onChange($event)" [activeIndex]="index">
   <!-- 
     <p-tabPanel [header]="item.header" *ngFor="let item of items; let i = index" [selected]="i == 0">
         {{item.content}}
     </p-tabPanel>
    -->
-  <p-tabPanel header="Windows" [selected]="true">
-    Content 1
+  <p-tabPanel header="Ubuntu">
+    <ng-template pTemplate="content">
+      Complex Content to Lazy Load1
+    </ng-template>
   </p-tabPanel>
-  <p-tabPanel header="Ubuntu" >
-    Content 2
+  <p-tabPanel header="Windows" >
+    <ng-template pTemplate="content">
+      Complex Content to Lazy Load2
+    </ng-template>
   </p-tabPanel>
   <p-tabPanel header="CentOS">
-    Content 3
+    <ng-template pTemplate="content">
+      Complex Content to Lazy Load3
+    </ng-template>
   </p-tabPanel>
 </p-tabView>

src/packages/probe/component/download/download.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
   selector: 'of-download',
@@ -6,8 +6,16 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DownloadComponent implements OnInit {
 
-  constructor() { }
+  @Input() index;
+  @Output() select = new EventEmitter();
+
+  constructor(
+  ) { }
 
   ngOnInit() {
   }
+
+  onChange(event) {
+    this.select.emit(event.index);
+  }
 }