diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 3bca962..d292388 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -4,9 +4,9 @@ import { AuthGuard } from './commons/guard/auth.guard'; const routes: Routes = [ { path: '', loadChildren: './pages/pages.module#PagesModule', canActivate: [AuthGuard] }, - // { path: '', loadChildren: './pages/pages.module#PagesModule'}, { path: 'auth', loadChildren: './pages/auth/auth-page.module#AuthPageModule' }, - // { path: 'errors', loadChildren: './pages/errors/errors-page.module#ErrorsPageModule' }, + { path: 'error', loadChildren: './pages/error/error-page.module#ErrorPageModule' }, + { path: '**', redirectTo: 'error' }, ]; @NgModule({ diff --git a/src/app/commons/component/layout/menu/app.menu.component.ts b/src/app/commons/component/layout/menu/app.menu.component.ts index cdbd9f1..dc76cd0 100644 --- a/src/app/commons/component/layout/menu/app.menu.component.ts +++ b/src/app/commons/component/layout/menu/app.menu.component.ts @@ -24,7 +24,7 @@ export class AppMenuComponent implements OnInit { label: 'Infra', icon: 'all_inclusive', items: [ { label: 'Map', icon: 'map', routerLink: ['/map'] }, { label: 'Sensors', icon: 'compare_arrows', routerLink: ['/sensors'] }, - { label: 'Probes', icon: 'dock', routerLink: ['/probes/list'] }, + { label: 'Probes', icon: 'dock', routerLink: ['/probe/list'] }, ] }, { diff --git a/src/app/commons/component/layout/topbar/app.topbar.component.html b/src/app/commons/component/layout/topbar/app.topbar.component.html index 82751ef..be31aa7 100644 --- a/src/app/commons/component/layout/topbar/app.topbar.component.html +++ b/src/app/commons/component/layout/topbar/app.topbar.component.html @@ -129,7 +129,7 @@
  • notifications - + {{notificationCount}} Notifications diff --git a/src/app/commons/component/layout/topbar/app.topbar.component.ts b/src/app/commons/component/layout/topbar/app.topbar.component.ts index 38603e3..355eabd 100644 --- a/src/app/commons/component/layout/topbar/app.topbar.component.ts +++ b/src/app/commons/component/layout/topbar/app.topbar.component.ts @@ -18,7 +18,6 @@ export class AppTopbarComponent implements OnInit { } onNotiLoaded(count) { - console.log('count changed'); this.notificationCount = count; } } diff --git a/src/app/commons/service/breadcrumb.service.ts b/src/app/commons/service/breadcrumb.service.ts new file mode 100644 index 0000000..8161d9e --- /dev/null +++ b/src/app/commons/service/breadcrumb.service.ts @@ -0,0 +1,16 @@ +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(); + + itemsHandler = this.itemsSource.asObservable(); + + setItems(items: MenuItem[]) { + this.itemsSource.next(items); + } +} diff --git a/src/app/pages/error/error-page-routing.module.ts b/src/app/pages/error/error-page-routing.module.ts new file mode 100644 index 0000000..ce770d7 --- /dev/null +++ b/src/app/pages/error/error-page-routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { ErrorPageComponent } from './error-page.component'; + +const routes: Routes = [ + { + path: '', + component: ErrorPageComponent, + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ErrorPageRoutingModule { } diff --git a/src/app/pages/error/error-page.component.html b/src/app/pages/error/error-page.component.html new file mode 100644 index 0000000..e711847 --- /dev/null +++ b/src/app/pages/error/error-page.component.html @@ -0,0 +1,4 @@ +Error Page + + + diff --git a/src/app/pages/error/error-page.component.ts b/src/app/pages/error/error-page.component.ts new file mode 100644 index 0000000..c398caa --- /dev/null +++ b/src/app/pages/error/error-page.component.ts @@ -0,0 +1,24 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; + + + +@Component({ + selector: 'of-pages-error', + templateUrl: './error-page.component.html', +}) + +export class ErrorPageComponent implements OnInit { + + + constructor( + private router: Router, + ) { } + + ngOnInit() { + } + + onNavigateMain() { + this.router.navigate(['home']); + } +} diff --git a/src/app/pages/error/error-page.module.ts b/src/app/pages/error/error-page.module.ts new file mode 100644 index 0000000..17a91ee --- /dev/null +++ b/src/app/pages/error/error-page.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { ErrorPageComponent } from './error-page.component'; +import { ErrorPageRoutingModule } from './error-page-routing.module'; +import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module'; + +@NgModule({ + imports: [ + CommonModule, + ErrorPageRoutingModule, + PrimeNGModules, + ], + entryComponents: [ + ], + declarations: [ErrorPageComponent] +}) +export class ErrorPageModule { } diff --git a/src/app/pages/infra/infra-page.component.html b/src/app/pages/infra/infra-page.component.html index 12f1715..0d25047 100644 --- a/src/app/pages/infra/infra-page.component.html +++ b/src/app/pages/infra/infra-page.component.html @@ -3,6 +3,10 @@
    + + + +
    diff --git a/src/app/pages/pages-animation.ts b/src/app/pages/pages-animation.ts new file mode 100644 index 0000000..2760e2c --- /dev/null +++ b/src/app/pages/pages-animation.ts @@ -0,0 +1,27 @@ +import { + trigger, + animate, + transition, + style, + query, + stagger, + keyframes, + state, + group, +} from '@angular/animations'; + +export const fadeAnimation = trigger('pageRouteAnim', [ + transition('* => *', [ + query(':enter', + style({ opacity: 0 }), { optional: true }), + query(':enter', + stagger('300ms', [ + animate('6s ease-in', keyframes([ + style({ opacity: 0, transform: 'translateY(-75%)', offset: 0 }), + style({ opacity: .5, transform: 'translateY(35px)', offset: 0.3 }), + style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 }), + ]))]), { optional: true }) + ]) +]); + + diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index afa95f2..6b389b1 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -9,21 +9,19 @@ const routes: Routes = [ children: [ { path: '', redirectTo: 'home' }, { path: 'home', loadChildren: './home/home-page.module#HomePageModule' }, - { path: 'probes', loadChildren: './probes/probes-page.module#ProbesPageModule' }, - { path: 'probe', loadChildren: './probe/probe-page.module#ProbePageModule' }, - { path: 'sensors', loadChildren: './sensors/sensors-page.module#SensorsPageModule' }, - { path: 'sensor', loadChildren: './sensor/sensor-page.module#SensorPageModule' }, - // { path: 'discovery', loadChildren: './discovery/discovery-page.module#DiscoveryPageModule' }, - { path: 'map', loadChildren: './infra/infra-page.module#InfraPageModule' }, - { path: 'target', loadChildren: './target/target-page.module#TargetPageModule' }, - { path: 'overview', loadChildren: './overview/overview-page.module#OverviewPageModule' }, - { path: 'dashboard', loadChildren: './dashboard/dashboard-page.module#DashboardPageModule' }, - { path: 'notification', loadChildren: './notification/notification-page.module#NotificationPageModule' }, - { path: 'alert', loadChildren: './alert/alert-page.module#AlertPageModule' }, - { path: 'report', loadChildren: './report/report-page.module#ReportPageModule' }, - { path: 'log', loadChildren: './log/log-page.module#LogPageModule' }, - { path: 'account', loadChildren: './account/account-page.module#AccountPageModule' }, + { path: 'probe', loadChildren: './probes/probe-tab-page.module#ProbeTabPageModule' }, { path: 'discovery', loadChildren: './discovery/discovery-page.module#DiscoveryPageModule' }, + { path: 'map', loadChildren: './infra/infra-page.module#InfraPageModule' }, + // { path: 'sensors', loadChildren: './sensors/sensors-page.module#SensorsPageModule' }, + // { path: 'sensor', loadChildren: './sensor/sensor-page.module#SensorPageModule' }, + // { path: 'target', loadChildren: './target/target-page.module#TargetPageModule' }, + // { path: 'overview', loadChildren: './overview/overview-page.module#OverviewPageModule' }, + // { path: 'dashboard', loadChildren: './dashboard/dashboard-page.module#DashboardPageModule' }, + // { path: 'notification', loadChildren: './notification/notification-page.module#NotificationPageModule' }, + // { path: 'alert', loadChildren: './alert/alert-page.module#AlertPageModule' }, + // { path: 'report', loadChildren: './report/report-page.module#ReportPageModule' }, + // { path: 'log', loadChildren: './log/log-page.module#LogPageModule' }, + // { path: 'account', loadChildren: './account/account-page.module#AccountPageModule' }, // { path: 'settings/member', loadChildren: './settings/member/member-page.module#MemberPageModule' }, ] } diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index 01e5012..3cdd4ef 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -20,11 +20,10 @@
    -
    - +
    +
    -
    diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index 95c2f20..dba2608 100644 --- a/src/app/pages/pages.component.ts +++ b/src/app/pages/pages.component.ts @@ -1,7 +1,7 @@ import { Component, AfterViewInit, ElementRef, Renderer, ViewChild, OnDestroy, OnInit, NgZone } from '@angular/core'; import { ScrollPanel } from 'primeng/primeng'; import { Router } from '@angular/router'; - +import { fadeAnimation } from './pages-animation'; enum MenuOrientation { STATIC, OVERLAY, @@ -12,7 +12,8 @@ enum MenuOrientation { @Component({ selector: 'of-pages', templateUrl: './pages.component.html', - styleUrls: ['./pages.component.scss'] + styleUrls: ['./pages.component.scss'], + animations: [ fadeAnimation ] }) export class PagesComponent implements AfterViewInit, OnDestroy, OnInit { layoutCompact = true; @@ -59,7 +60,8 @@ 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) { + } ngOnInit() { if (this.isAuthRouteActivated()) { @@ -323,6 +325,11 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit { themeLink.href = 'assets/theme/theme-' + theme + '.css'; layoutLink.href = 'assets/layout/css/layout-' + theme + '.css'; -} + } + + prepareRouteTransition(outlet) { + const animation = outlet.activatedRouteData['animation'] || {}; + return animation['value'] || null; + } } diff --git a/src/app/pages/probe/probe-page-routing.module.ts b/src/app/pages/probe/probe-page-routing.module.ts deleted file mode 100644 index 69a82fd..0000000 --- a/src/app/pages/probe/probe-page-routing.module.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; -import { ProbePageComponent } from './probe-page.component'; -import { DetailComponent as ProbeDetailComponent } from 'packages/probe/component/detail/detail.component'; -// import { ListComponent as TargetListComponent } from 'packages/target/component/list/list.component'; - -const routes: Routes = [ - { - path: '', - component: ProbePageComponent, - children: [ - { path: ':id/info', component: ProbeDetailComponent }, - { path: ':id/targets', loadChildren: 'app/pages/targets/targets-page.module#TargetsPageModule'}, - { path: ':id/history', component: null }, - ] - } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class ProbePageRoutingModule { } diff --git a/src/app/pages/probe/probe-page.component.html b/src/app/pages/probe/probe-page.component.html deleted file mode 100644 index 0328d41..0000000 --- a/src/app/pages/probe/probe-page.component.html +++ /dev/null @@ -1,12 +0,0 @@ -
    -
    -
    -
    - -
    -
    - -
    -
    -
    -
    \ No newline at end of file diff --git a/src/app/pages/probe/probe-page.component.spec.ts b/src/app/pages/probe/probe-page.component.spec.ts deleted file mode 100644 index 7e72ea9..0000000 --- a/src/app/pages/probe/probe-page.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { ProbePageComponent } from './probe-page.component'; - -describe('ProbeComponent', () => { - let component: ProbePageComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [ ProbePageComponent ] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(ProbePageComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/pages/probe/probe-page.component.ts b/src/app/pages/probe/probe-page.component.ts deleted file mode 100644 index 6cbcc32..0000000 --- a/src/app/pages/probe/probe-page.component.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { Router, ActivatedRoute } from '@angular/router'; - -@Component({ - selector: 'of-pages-probe', - templateUrl: './probe-page.component.html', -}) -export class ProbePageComponent implements OnInit { - - tabs = undefined; - - constructor(private route: ActivatedRoute, private router: Router) { - } - - ngOnInit() { - const id = this.router.url.split('probe/')[1].split('/')[0]; - - this.tabs = [ - { label: 'INFO', routerLink: ['/probe/', id, 'info'] }, - { label: 'TARGETS', routerLink: ['/probe/', id, 'targets']}, - { label: 'HISTORY', path: ['/probe/', id, 'history'], disabled: true }, - ]; - } - -} diff --git a/src/app/pages/probes/download/download-page-routing.module.ts b/src/app/pages/probes/download/download-page-routing.module.ts new file mode 100644 index 0000000..4571de5 --- /dev/null +++ b/src/app/pages/probes/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 { } diff --git a/src/app/pages/probes/download/download-page.component.html b/src/app/pages/probes/download/download-page.component.html new file mode 100644 index 0000000..1947a35 --- /dev/null +++ b/src/app/pages/probes/download/download-page.component.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/app/pages/probes/download/download-page.component.ts b/src/app/pages/probes/download/download-page.component.ts new file mode 100644 index 0000000..8a3c71f --- /dev/null +++ b/src/app/pages/probes/download/download-page.component.ts @@ -0,0 +1,26 @@ +import { Component, OnInit } from '@angular/core'; +import { Router, ActivatedRoute } from '@angular/router'; + +@Component({ + selector: 'of-pages-download', + templateUrl: './download-page.component.html', +}) +export class ProbeDownloadPageComponent implements OnInit { + + 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]); + } +} diff --git a/src/app/pages/probes/download/download-page.module.ts b/src/app/pages/probes/download/download-page.module.ts new file mode 100644 index 0000000..ddcf90f --- /dev/null +++ b/src/app/pages/probes/download/download-page.module.ts @@ -0,0 +1,19 @@ +import { NgModule } from '@angular/core'; +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, + ProbeDownloadPageRoutingModule, + ProbeModule + ], + entryComponents: [ + ], + declarations: [ProbeDownloadPageComponent] +}) +export class ProbeDownloadPageModule { } diff --git a/src/app/pages/probes/noauth-probe/noauth-probe-page-routing.module.ts b/src/app/pages/probes/noauth-probe/noauth-probe-page-routing.module.ts new file mode 100644 index 0000000..fa6bc36 --- /dev/null +++ b/src/app/pages/probes/noauth-probe/noauth-probe-page-routing.module.ts @@ -0,0 +1,19 @@ +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 { ProbeDownloadComponent } from 'packages/probe/component/download/download.component'; + +const routes: Routes = [ + { + path: '', + component: NoAuthProbePageComponent, + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class NoAuthProbePageRoutingModule { } diff --git a/src/app/pages/probes/noauth-probe/noauth-probe-page.component.html b/src/app/pages/probes/noauth-probe/noauth-probe-page.component.html new file mode 100644 index 0000000..d5187b7 --- /dev/null +++ b/src/app/pages/probes/noauth-probe/noauth-probe-page.component.html @@ -0,0 +1,2 @@ +container로 교체 + \ No newline at end of file diff --git a/src/app/pages/probes/noauth-probe/noauth-probe-page.component.ts b/src/app/pages/probes/noauth-probe/noauth-probe-page.component.ts new file mode 100644 index 0000000..aa8cbd5 --- /dev/null +++ b/src/app/pages/probes/noauth-probe/noauth-probe-page.component.ts @@ -0,0 +1,13 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'of-pages-noauth-probe', + templateUrl: './noauth-probe-page.component.html', +}) +export class NoAuthProbePageComponent { + + constructor( + ) { + } + +} diff --git a/src/app/pages/probes/probes-page.module.ts b/src/app/pages/probes/noauth-probe/noauth-probe-page.module.ts similarity index 53% rename from src/app/pages/probes/probes-page.module.ts rename to src/app/pages/probes/noauth-probe/noauth-probe-page.module.ts index 44a7424..5023f44 100644 --- a/src/app/pages/probes/probes-page.module.ts +++ b/src/app/pages/probes/noauth-probe/noauth-probe-page.module.ts @@ -1,21 +1,19 @@ 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 { ProbesPageComponent } from './probes-page.component'; -import { ProbesPageRoutingModule } from './probes-page-routing.module'; +import { NoAuthProbePageComponent } from './noauth-probe-page.component'; +import { NoAuthProbePageRoutingModule } from './noauth-probe-page-routing.module'; import { TabbarModule } from 'app/commons/component/layout/tabbar/app.tabbar.module'; @NgModule({ imports: [ CommonModule, - ProbesPageRoutingModule, + NoAuthProbePageRoutingModule, TabbarModule, - ProbeModule, NoauthModule, ], declarations: [ - ProbesPageComponent, + NoAuthProbePageComponent, ] }) -export class ProbesPageModule { } +export class NoAuthProbePageModule { } diff --git a/src/app/pages/probes/probe-tab-page-routing.module.ts b/src/app/pages/probes/probe-tab-page-routing.module.ts new file mode 100644 index 0000000..6a5a9b1 --- /dev/null +++ b/src/app/pages/probes/probe-tab-page-routing.module.ts @@ -0,0 +1,24 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { ProbeTabPageComponent } from './probe-tab-page.component'; + +const routes: Routes = [ + { + path: '', + component: ProbeTabPageComponent, + children: [ + { path: 'list', loadChildren: './probe/probe-page.module#ProbePageModule' }, + { path: 'noauth', loadChildren: './noauth-probe/noauth-probe-page.module#NoAuthProbePageModule' }, + { path: 'download', loadChildren: './download/download-page.module#ProbeDownloadPageModule' }, + { path: ':id/info', loadChildren: './probe/probe-page.module#ProbePageModule' }, + // { path: ':id/targets', loadChildren: 'app/pages/targets/targets-page.module#TargetsPageModule'}, + { path: ':id/history', component: null }, + ] + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ProbeTabPageRoutingModule { } diff --git a/src/app/pages/probes/probes-page.component.html b/src/app/pages/probes/probe-tab-page.component.html similarity index 97% rename from src/app/pages/probes/probes-page.component.html rename to src/app/pages/probes/probe-tab-page.component.html index 0328d41..9e8130b 100644 --- a/src/app/pages/probes/probes-page.component.html +++ b/src/app/pages/probes/probe-tab-page.component.html @@ -9,4 +9,4 @@
    - \ No newline at end of file + diff --git a/src/app/pages/probes/probes-page.component.spec.ts b/src/app/pages/probes/probe-tab-page.component.spec.ts similarity index 53% rename from src/app/pages/probes/probes-page.component.spec.ts rename to src/app/pages/probes/probe-tab-page.component.spec.ts index f58adf9..cd8a544 100644 --- a/src/app/pages/probes/probes-page.component.spec.ts +++ b/src/app/pages/probes/probe-tab-page.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { ProbesPageComponent } from './probes-page.component'; +import { ProbeTabPageComponent } from './probe-tab-page.component'; -describe('ProbesComponent', () => { - let component: ProbesPageComponent; - let fixture: ComponentFixture; +describe('ProbeTabPageComponent', () => { + let component: ProbeTabPageComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ProbesPageComponent ] + declarations: [ ProbeTabPageComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(ProbesPageComponent); + fixture = TestBed.createComponent(ProbeTabPageComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/pages/probes/probe-tab-page.component.ts b/src/app/pages/probes/probe-tab-page.component.ts new file mode 100644 index 0000000..dcb761d --- /dev/null +++ b/src/app/pages/probes/probe-tab-page.component.ts @@ -0,0 +1,54 @@ +import { Component, OnDestroy } from '@angular/core'; +import { Router, NavigationEnd } from '@angular/router'; +import { Subscription } from 'rxjs/Subscription'; + +@Component({ + selector: 'of-pages-probe-tab', + templateUrl: './probe-tab-page.component.html', +}) +export class ProbeTabPageComponent implements OnDestroy { + + private tabs = undefined; + private routerSubscription$: Subscription; + + constructor( + private router: Router + ) { + this.routerSubscription$ = this.router.events.subscribe((event) => { + if (event instanceof NavigationEnd) { + this.generateTabMenu(event); + } + }); + } + + ngOnDestroy() { + this.routerSubscription$.unsubscribe(); + } + + generateTabMenu(event: NavigationEnd) { + try { + const parsedUrl = event.url.split('probe/')[1].split('/')[0]; + switch (parsedUrl) { + case 'list': + case 'noauth': + case 'download': + this.tabs = [ + { label: 'Probe', routerLink: ['/probe/list'] }, + { label: 'UNAUTHORIZED', routerLink: ['/probe/noauth'] }, + { label: 'DOWNLOAD', routerLink: ['/probe/download'] }, + ]; + break; + default: + this.tabs = [ + { label: 'INFO', routerLink: ['/probe/', parsedUrl, 'info'] }, + { label: 'TARGETS', path: ['/probe/', parsedUrl, 'targets'], disabled: true }, + { label: 'HISTORY', path: ['/probe/', parsedUrl, 'history'], disabled: true }, + ]; + break; + } + } catch { + this.router.navigate(['error']); + } + } + +} diff --git a/src/app/pages/probes/probe-tab-page.module.ts b/src/app/pages/probes/probe-tab-page.module.ts new file mode 100644 index 0000000..d530c3a --- /dev/null +++ b/src/app/pages/probes/probe-tab-page.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { ProbeTabPageComponent } from './probe-tab-page.component'; +import { ProbeTabPageRoutingModule } from './probe-tab-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'; + +@NgModule({ + imports: [ + CommonModule, + ProbeTabPageRoutingModule, + PrimeNGModules, + ProbeModule, + TabbarModule, + ], + declarations: [ + ProbeTabPageComponent, + ] +}) +export class ProbeTabPageModule { } diff --git a/src/app/pages/probes/probe/probe-page-routing.module.ts b/src/app/pages/probes/probe/probe-page-routing.module.ts new file mode 100644 index 0000000..df19980 --- /dev/null +++ b/src/app/pages/probes/probe/probe-page-routing.module.ts @@ -0,0 +1,16 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { ProbePageComponent } from './probe-page.component'; + +const routes: Routes = [ + { + path: '', + component: ProbePageComponent, + }, +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule] +}) +export class ProbePageRoutingModule { } diff --git a/src/app/pages/probes/probe/probe-page.component.html b/src/app/pages/probes/probe/probe-page.component.html new file mode 100644 index 0000000..2e426c2 --- /dev/null +++ b/src/app/pages/probes/probe/probe-page.component.html @@ -0,0 +1,7 @@ +
    + +
    + + + + \ No newline at end of file diff --git a/src/app/pages/probes/probe/probe-page.component.ts b/src/app/pages/probes/probe/probe-page.component.ts new file mode 100644 index 0000000..01110c3 --- /dev/null +++ b/src/app/pages/probes/probe/probe-page.component.ts @@ -0,0 +1,31 @@ +import { Component, OnDestroy } from '@angular/core'; +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'; + +@Component({ + selector: 'of-pages-probe', + templateUrl: './probe-page.component.html', +}) +export class ProbePageComponent { + + private isDetail: boolean; + + constructor( + private router: Router, + private route: ActivatedRoute + ) { + this.route.params.subscribe(params => { + this.isDetail = params['id'] ? true : false; + }); + } + + onProbeSelect(probe: Probe) { + this.router.navigate(['probe', probe.id, 'info']); + } + + onTargetSelect(target: Target) { + console.log(target); + } +} diff --git a/src/app/pages/probe/probe-page.module.ts b/src/app/pages/probes/probe/probe-page.module.ts similarity index 65% rename from src/app/pages/probe/probe-page.module.ts rename to src/app/pages/probes/probe/probe-page.module.ts index a292fc1..cd0f4f8 100644 --- a/src/app/pages/probe/probe-page.module.ts +++ b/src/app/pages/probes/probe/probe-page.module.ts @@ -1,23 +1,19 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -// import { ProbeModule } from 'packages/probe/probe.module'; +import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module'; import { ProbePageComponent } from './probe-page.component'; 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'; @NgModule({ imports: [ CommonModule, ProbePageRoutingModule, - PrimeNGModules, - ProbeModule, - TabbarModule + ProbeModule ], - declarations: [ - ProbePageComponent, - ] + entryComponents: [ + ], + declarations: [ProbePageComponent] }) export class ProbePageModule { } diff --git a/src/app/pages/probes/probes-page-routing.module.ts b/src/app/pages/probes/probes-page-routing.module.ts deleted file mode 100644 index da563a2..0000000 --- a/src/app/pages/probes/probes-page-routing.module.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; -import { ProbesPageComponent } from './probes-page.component'; -import { ListComponent as ProbeListComponent } from 'packages/probe/component/list/list.component'; -import { ListComponent as NoauthListComponent } from 'packages/noauth/component/list/list.component'; -import { DownloadComponent } from 'packages/probe/component/download/download.component'; - -const routes: Routes = [ - { - path: '', - component: ProbesPageComponent, - children: [ - { path: 'list', component: ProbeListComponent }, - { path: 'noauth', component: NoauthListComponent }, - { path: 'download', component: DownloadComponent }, - ] - } -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class ProbesPageRoutingModule { } diff --git a/src/app/pages/probes/probes-page.component.ts b/src/app/pages/probes/probes-page.component.ts deleted file mode 100644 index 612a93a..0000000 --- a/src/app/pages/probes/probes-page.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component, OnInit } from '@angular/core'; - -@Component({ - selector: 'of-pages-probes', - templateUrl: './probes-page.component.html', -}) -export class ProbesPageComponent { - - tabs = [ - { label: 'PROBES', routerLink: ['/probes/list'] }, - { label: 'UNAUTHORIZED', routerLink: ['/probes/noauth'] }, - { label: 'DOWNLOAD', routerLink: ['/probes/download'] }, - ]; - - - constructor() { } - -} diff --git a/src/packages/probe/component/detail/detail.component.ts b/src/packages/probe/component/detail/detail.component.ts index 2fcb6af..e871313 100644 --- a/src/packages/probe/component/detail/detail.component.ts +++ b/src/packages/probe/component/detail/detail.component.ts @@ -18,7 +18,7 @@ import { MessageService } from 'primeng/components/common/messageservice'; templateUrl: './detail.component.html', providers: [ConfirmationService, MessageService] }) -export class DetailComponent implements OnInit, AfterContentInit, OnDestroy { +export class ProbeDetailComponent implements OnInit, AfterContentInit, OnDestroy { probeSubscription$: Subscription; probe$ = this.detailStore.pipe(select(DetailSelector.select('probe'))); @@ -30,7 +30,6 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy { constructor( private route: ActivatedRoute, - private router: Router, private detailStore: Store, private modifyStore: Store, private confirmationService: ConfirmationService, @@ -88,7 +87,7 @@ export class DetailComponent implements OnInit, AfterContentInit, OnDestroy { icon: 'fa fa-trash', message: 'Are you sure to remove this Probe?', accept: () => { - this.router.navigate(['probes/list']); + // this.router.navigate(['probes/list']); }, reject: () => { } diff --git a/src/packages/probe/component/download/download.component.html b/src/packages/probe/component/download/download.component.html index 1d4fa92..a880929 100644 --- a/src/packages/probe/component/download/download.component.html +++ b/src/packages/probe/component/download/download.component.html @@ -1,17 +1,23 @@

    Download

    - + - - Content 1 + + + Complex Content to Lazy Load1 + - - Content 2 + + + Complex Content to Lazy Load2 + - Content 3 + + Complex Content to Lazy Load3 + \ No newline at end of file diff --git a/src/packages/probe/component/download/download.component.ts b/src/packages/probe/component/download/download.component.ts index a5f3e90..2368cc1 100644 --- a/src/packages/probe/component/download/download.component.ts +++ b/src/packages/probe/component/download/download.component.ts @@ -1,13 +1,21 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'of-download', templateUrl: './download.component.html', }) -export class DownloadComponent implements OnInit { +export class ProbeDownloadComponent implements OnInit { - constructor() { } + @Input() index; + @Output() select = new EventEmitter(); + + constructor( + ) { } ngOnInit() { } + + onChange(event) { + this.select.emit(event.index); + } } diff --git a/src/packages/probe/component/index.ts b/src/packages/probe/component/index.ts index 4efee54..68ba0d4 100644 --- a/src/packages/probe/component/index.ts +++ b/src/packages/probe/component/index.ts @@ -1,9 +1,16 @@ -import { DetailComponent } from './detail/detail.component'; -import { ListComponent } from './list/list.component'; -import { DownloadComponent } from './download/download.component'; +import { ProbeDetailComponent } from './detail/detail.component'; +import { ProbeListComponent } from './list/list.component'; +import { ProbeDownloadComponent } from './download/download.component'; +import { ProbeListContainerComponent } from '../container/probe-list-container'; +import { ProbeDetailContainerComponent } from '../container/probe-detail-container'; + +export const CONTAINERS = [ + ProbeListContainerComponent, + ProbeDetailContainerComponent, +]; export const COMPONENTS = [ - ListComponent, - DetailComponent, - DownloadComponent, + ProbeListComponent, + ProbeDetailComponent, + ProbeDownloadComponent, ]; diff --git a/src/packages/probe/component/list/list.component.spec.ts b/src/packages/probe/component/list/list.component.spec.ts index beacd15..28e4fe4 100644 --- a/src/packages/probe/component/list/list.component.spec.ts +++ b/src/packages/probe/component/list/list.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { ListComponent } from './list.component'; +import { ProbeListComponent } from './list.component'; describe('ListComponent', () => { - let component: ListComponent; - let fixture: ComponentFixture; + let component: ProbeListComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ListComponent ] + declarations: [ ProbeListComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(ListComponent); + fixture = TestBed.createComponent(ProbeListComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/packages/probe/component/list/list.component.ts b/src/packages/probe/component/list/list.component.ts index fcce930..58d05ec 100644 --- a/src/packages/probe/component/list/list.component.ts +++ b/src/packages/probe/component/list/list.component.ts @@ -1,6 +1,4 @@ -import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild, OnDestroy } from '@angular/core'; -import { Router } from '@angular/router'; - +import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild, OnDestroy, Output, EventEmitter } from '@angular/core'; import { Store, select } from '@ngrx/store'; import { RPCClientError } from '@loafer/ng-rpc/protocol'; @@ -16,13 +14,15 @@ import { Subscription } from 'rxjs/Subscription'; selector: 'of-probe-list', templateUrl: './list.component.html', }) -export class ListComponent implements OnInit, AfterContentInit, OnDestroy { +export class ProbeListComponent implements OnInit, AfterContentInit, OnDestroy { probeHostsSubscription$: Subscription; probeHosts$ = this.store.pipe(select(ProbeHostListSelector.select('probeHosts'))); probeHosts: ProbeHost[]; + @Output() select = new EventEmitter(); + val; + constructor( - private router: Router, private store: Store ) { } @@ -30,7 +30,6 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy { ngOnInit() { this.probeHostsSubscription$ = this.probeHosts$.subscribe( (probeHosts: ProbeHost[]) => { - console.log(probeHosts); this.probeHosts = probeHosts; }, (error: RPCClientError) => { @@ -40,14 +39,40 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy { } ngAfterContentInit() { - this.store.select(AuthSelector.select('domain')).subscribe( - (domain: Domain) => { - this.store.dispatch(new ListStore.ReadAllByDomain(domain)); + // this.store.select(AuthSelector.select('domain')).subscribe( + // (domain: Domain) => { + // this.store.dispatch(new ListStore.ReadAllByDomain(domain)); + // }, + // (error) => { + // console.log(error); + // } + // ); + + // temp + const probeHost: ProbeHost = { + id: 1, + probe: { + id: 1, + displayName: 'ddd', + cidr: 'dddd', + authorizeDate: new Date(), + authorizeMember: { + name: 'ddd' + } }, - (error) => { - console.log(error); + host: { + id: 1, + ipv4: 'aaaa', + os: { + vendor: { + name: 'dd' + } + }, } - ); + }; + this.probeHosts = []; + this.probeHosts.push(probeHost); + } ngOnDestroy() { @@ -57,7 +82,7 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy { } onRowSelect(event) { - this.router.navigate(['probe', event.data.probe.id, 'info']); + this.select.emit(event.data.probe); } getUptime(probe: Probe) { @@ -65,7 +90,6 @@ export class ListComponent implements OnInit, AfterContentInit, OnDestroy { // return 'Not Connected.'; // } // const currentDate = new Date(); - - return 'Uptime구해와'; + return 'Uptime'; } } diff --git a/src/packages/probe/container/probe-detail-container.html b/src/packages/probe/container/probe-detail-container.html new file mode 100644 index 0000000..1782169 --- /dev/null +++ b/src/packages/probe/container/probe-detail-container.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/packages/probe/container/probe-detail-container.ts b/src/packages/probe/container/probe-detail-container.ts new file mode 100644 index 0000000..ac40d86 --- /dev/null +++ b/src/packages/probe/container/probe-detail-container.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'of-probe-detail-container', + templateUrl: './probe-detail-container.html', +}) +export class ProbeDetailContainerComponent { + +} diff --git a/src/packages/probe/container/probe-list-container.html b/src/packages/probe/container/probe-list-container.html new file mode 100644 index 0000000..5212b22 --- /dev/null +++ b/src/packages/probe/container/probe-list-container.html @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/packages/probe/container/probe-list-container.ts b/src/packages/probe/container/probe-list-container.ts new file mode 100644 index 0000000..67eee65 --- /dev/null +++ b/src/packages/probe/container/probe-list-container.ts @@ -0,0 +1,14 @@ +import { Component, EventEmitter, Output } from '@angular/core'; +import { Probe } from '@overflow/commons-typescript/model/probe'; + +@Component({ + selector: 'of-probe-list-container', + templateUrl: './probe-list-container.html', +}) +export class ProbeListContainerComponent { + @Output() select = new EventEmitter(); + + onSelect(probe: Probe) { + this.select.emit(probe); + } +} diff --git a/src/packages/probe/probe.module.ts b/src/packages/probe/probe.module.ts index dc80c5e..a99cee0 100644 --- a/src/packages/probe/probe.module.ts +++ b/src/packages/probe/probe.module.ts @@ -1,7 +1,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { COMPONENTS } from './component'; +import { COMPONENTS, CONTAINERS } from './component'; import { ProbeStoreModule } from './probe-store.module'; import { SERVICES } from './service'; import { PrimeNGModules } from '../commons/prime-ng/prime-ng.module'; @@ -21,9 +21,11 @@ import { MetaCrawlerModule } from '../meta/crawler/crawler.module'; MetaCrawlerModule ], declarations: [ + CONTAINERS, COMPONENTS, ], exports: [ + CONTAINERS, COMPONENTS, ], providers: [ diff --git a/src/packages/probe/service/probe-host.service.ts b/src/packages/probe/service/probe-host.service.ts index cd5ec2c..e1cb1bb 100644 --- a/src/packages/probe/service/probe-host.service.ts +++ b/src/packages/probe/service/probe-host.service.ts @@ -16,7 +16,7 @@ export class ProbeHostService { } public readByProbe(probe: Probe): Observable { - return this.rpcService.call('ProbeHostService.readByProbe', probe); + return this.rpcService.call('ProbeHostService.readByProbe', probe); } public readAllByDomain(domain: Domain): Observable { diff --git a/src/styles.scss b/src/styles.scss index 639cd6b..a23092b 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -318,4 +318,12 @@ body .ui-progressbar .ui-progressbar-value { } .font-s{ font-size: 80%; -} \ No newline at end of file +} + + +.footer { + clear: both; + position: relative; + z-index: 10; + height: 3em; + } \ No newline at end of file