diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index d292388..7d03c60 100644 --- a/src/app/app-routing.module.ts +++ b/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: 'error', loadChildren: './pages/error/error-page.module#ErrorPageModule' }, - { path: '**', redirectTo: 'error' }, + // { 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 dc76cd0..e196998 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: ['/probe/list'] }, + { label: 'Probes', icon: 'dock', routerLink: ['/probe'] }, ] }, { diff --git a/src/app/pages/pages-animation.ts b/src/app/pages/pages-animation.ts index feffd96..8678874 100644 --- a/src/app/pages/pages-animation.ts +++ b/src/app/pages/pages-animation.ts @@ -5,19 +5,55 @@ import { style, query, stagger, - keyframes + keyframes, + state, + group, } from '@angular/animations'; -export const fadeAnimation = trigger('fadeAnimation', [ +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}) + 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 }) ]) ]); + +export const slideAnimation = trigger('pageRouteAnim', [ + trigger('slideInOutAnimation', [ + state('*', style({ + position: 'fixed', + color: 'rgb(3, 109, 99)', + textAlign: 'center', + paddingTop: '5%', + backgroundColor: 'rgba(0, 240, 252, 0.38)', + top: 0, + left: 0, + right: 0, + bottom: 0 + }) + ), + transition(':enter', [ + style({ + transform: 'translateX(-100%)', + backgroundColor: 'rgba(0, 240, 252, 0.38)' + }), + animate('500ms', style({ + transform: 'translateX(0%)', + backgroundColor: 'rgba(0, 240, 252, 0.38)' + })) + ]), + transition(':leave', [ + animate('500ms', style({ + transform: 'translateX(-100%)', + backgroundColor: 'rgba(0, 240, 252, 0.38)' + })) + ]) + ]) +]); + diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts index dac7098..ecf72d9 100644 --- a/src/app/pages/pages-routing.module.ts +++ b/src/app/pages/pages-routing.module.ts @@ -8,8 +8,8 @@ const routes: Routes = [ component: PagesComponent, children: [ { path: '', redirectTo: 'home' }, - { path: 'home', loadChildren: './home/home-page.module#HomePageModule', data: { animation: 'home'} }, - { path: 'probe', loadChildren: './probe/probe-page.module#ProbePageModule', data: { animation: 'probe'} }, + { path: 'home', loadChildren: './home/home-page.module#HomePageModule' }, + { path: 'probe', loadChildren: './probes/probes-page.module#ProbesPageModule' }, // { path: 'sensors', loadChildren: './sensors/sensors-page.module#SensorsPageModule' }, // { path: 'sensor', loadChildren: './sensor/sensor-page.module#SensorPageModule' }, // { path: 'map', loadChildren: './infra/infra-page.module#InfraPageModule' }, diff --git a/src/app/pages/pages.component.html b/src/app/pages/pages.component.html index 085fe45..eb06939 100644 --- a/src/app/pages/pages.component.html +++ b/src/app/pages/pages.component.html @@ -20,8 +20,8 @@
-
- +
+
diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index b809fef..103d36a 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'; +import { slideAnimation, fadeAnimation } from './pages-animation'; enum MenuOrientation { STATIC, OVERLAY, @@ -13,7 +13,7 @@ enum MenuOrientation { selector: 'of-pages', templateUrl: './pages.component.html', styleUrls: ['./pages.component.scss'], - animations: [ fadeAnimation ] + animations: [fadeAnimation] }) export class PagesComponent implements AfterViewInit, OnDestroy, OnInit { layoutCompact = true; @@ -327,8 +327,9 @@ export class PagesComponent implements AfterViewInit, OnDestroy, OnInit { layoutLink.href = 'assets/layout/css/layout-' + theme + '.css'; } - prepRouteState(outlet: any) { - return outlet.activatedRouteData['animation'] || 'firstPage'; + 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 646fcd9..0000000 --- a/src/app/pages/probe/probe-page-routing.module.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { NgModule } from '@angular/core'; -import { Routes, RouterModule } from '@angular/router'; -import { ProbePageComponent } from './probe-page.component'; - -import { ProbeListComponent } from './probe/list.component'; -import { ProbeDetailComponent } from './probe/detail.component'; - -import { DownloadComponent } from 'packages/probe/component/download/download.component'; - -const routes: Routes = [ - { - path: '', - component: ProbePageComponent, - children: [ - { path: 'list', component: ProbeListComponent }, - { 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 }, - ] - }, -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule] -}) -export class ProbePageRoutingModule { } diff --git a/src/app/pages/probe/probe/detail.component.html b/src/app/pages/probe/probe/detail.component.html deleted file mode 100644 index 1782169..0000000 --- a/src/app/pages/probe/probe/detail.component.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/pages/probe/probe/detail.component.ts b/src/app/pages/probe/probe/detail.component.ts deleted file mode 100644 index 0519f8e..0000000 --- a/src/app/pages/probe/probe/detail.component.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { Component } from '@angular/core'; - -@Component({ - selector: 'of-pages-probe-detail', - templateUrl: './detail.component.html', -}) -export class ProbeDetailComponent { - - constructor( - ) { } - -} diff --git a/src/app/pages/probe/probe/list.component.html b/src/app/pages/probe/probe/list.component.html deleted file mode 100644 index ad78266..0000000 --- a/src/app/pages/probe/probe/list.component.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/pages/probe/probe/list.component.ts b/src/app/pages/probe/probe/list.component.ts deleted file mode 100644 index 0a98870..0000000 --- a/src/app/pages/probe/probe/list.component.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { Component } from '@angular/core'; -import { Router } from '@angular/router'; -import { Probe } from '@overflow/commons-typescript/model/probe'; - -@Component({ - selector: 'of-pages-probe-list', - templateUrl: './list.component.html', -}) -export class ProbeListComponent { - - constructor( - private router: Router, - ) { } - - onProbeSelect(probe: Probe) { - this.router.navigate(['probe', probe.id, 'info']); - } -} diff --git a/src/app/pages/probe/download/download-page-routing.module.ts b/src/app/pages/probes/download/download-page-routing.module.ts similarity index 100% rename from src/app/pages/probe/download/download-page-routing.module.ts rename to src/app/pages/probes/download/download-page-routing.module.ts diff --git a/src/app/pages/probe/download/download-page.component.html b/src/app/pages/probes/download/download-page.component.html similarity index 100% rename from src/app/pages/probe/download/download-page.component.html rename to src/app/pages/probes/download/download-page.component.html diff --git a/src/app/pages/probe/download/download-page.component.ts b/src/app/pages/probes/download/download-page.component.ts similarity index 100% rename from src/app/pages/probe/download/download-page.component.ts rename to src/app/pages/probes/download/download-page.component.ts diff --git a/src/app/pages/probe/download/download-page.module.ts b/src/app/pages/probes/download/download-page.module.ts similarity index 100% rename from src/app/pages/probe/download/download-page.module.ts rename to src/app/pages/probes/download/download-page.module.ts diff --git a/src/app/pages/probe/noauth-probe/noauth-probe-page-routing.module.ts b/src/app/pages/probes/noauth-probe/noauth-probe-page-routing.module.ts similarity index 100% rename from src/app/pages/probe/noauth-probe/noauth-probe-page-routing.module.ts rename to src/app/pages/probes/noauth-probe/noauth-probe-page-routing.module.ts diff --git a/src/app/pages/probe/noauth-probe/noauth-probe-page.component.html b/src/app/pages/probes/noauth-probe/noauth-probe-page.component.html similarity index 100% rename from src/app/pages/probe/noauth-probe/noauth-probe-page.component.html rename to src/app/pages/probes/noauth-probe/noauth-probe-page.component.html diff --git a/src/app/pages/probe/noauth-probe/noauth-probe-page.component.ts b/src/app/pages/probes/noauth-probe/noauth-probe-page.component.ts similarity index 100% rename from src/app/pages/probe/noauth-probe/noauth-probe-page.component.ts rename to src/app/pages/probes/noauth-probe/noauth-probe-page.component.ts diff --git a/src/app/pages/probe/noauth-probe/noauth-probe-page.module.ts b/src/app/pages/probes/noauth-probe/noauth-probe-page.module.ts similarity index 100% rename from src/app/pages/probe/noauth-probe/noauth-probe-page.module.ts rename to src/app/pages/probes/noauth-probe/noauth-probe-page.module.ts 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..dba82e0 --- /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: null, + }, +]; + +@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..8c83707 --- /dev/null +++ b/src/app/pages/probes/probe/probe-page.component.html @@ -0,0 +1 @@ +probe page module \ 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..d34db4c --- /dev/null +++ b/src/app/pages/probes/probe/probe-page.component.ts @@ -0,0 +1,17 @@ +import { Component } from '@angular/core'; +import { Router, ActivatedRoute } from '@angular/router'; + +@Component({ + selector: 'of-pages-probe', + templateUrl: './probe-page.component.html', +}) +export class ProbePageComponent { + + private index; + + constructor( + private router: Router, + private route: ActivatedRoute + ) { } + +} diff --git a/src/app/pages/probe/probe-page.module.ts b/src/app/pages/probes/probe/probe-page.module.ts similarity index 52% rename from src/app/pages/probe/probe-page.module.ts rename to src/app/pages/probes/probe/probe-page.module.ts index 08326ff..cd0f4f8 100644 --- a/src/app/pages/probe/probe-page.module.ts +++ b/src/app/pages/probes/probe/probe-page.module.ts @@ -1,27 +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'; -import { ProbeListComponent } from './probe/list.component'; -import { ProbeDetailComponent } from './probe/detail.component'; @NgModule({ imports: [ CommonModule, ProbePageRoutingModule, - PrimeNGModules, - ProbeModule, - TabbarModule, + ProbeModule ], - declarations: [ - ProbePageComponent, - ProbeListComponent, - ProbeDetailComponent - ] + 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 new file mode 100644 index 0000000..e1dc101 --- /dev/null +++ b/src/app/pages/probes/probes-page-routing.module.ts @@ -0,0 +1,26 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { ProbesPageComponent } from './probes-page.component'; + +import { DownloadComponent } from 'packages/probe/component/download/download.component'; + +const routes: Routes = [ + { + path: '', + component: ProbesPageComponent, + // 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 ProbesPageRoutingModule { } diff --git a/src/app/pages/probe/probe-page.component.html b/src/app/pages/probes/probes-page.component.html similarity index 100% rename from src/app/pages/probe/probe-page.component.html rename to src/app/pages/probes/probes-page.component.html diff --git a/src/app/pages/probe/probe-page.component.spec.ts b/src/app/pages/probes/probes-page.component.spec.ts similarity index 60% rename from src/app/pages/probe/probe-page.component.spec.ts rename to src/app/pages/probes/probes-page.component.spec.ts index 7e72ea9..34d3d1c 100644 --- a/src/app/pages/probe/probe-page.component.spec.ts +++ b/src/app/pages/probes/probes-page.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { ProbePageComponent } from './probe-page.component'; +import { ProbesPageComponent } from './probes-page.component'; describe('ProbeComponent', () => { - let component: ProbePageComponent; - let fixture: ComponentFixture; + let component: ProbesPageComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ ProbePageComponent ] + declarations: [ ProbesPageComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(ProbePageComponent); + fixture = TestBed.createComponent(ProbesPageComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/pages/probe/probe-page.component.ts b/src/app/pages/probes/probes-page.component.ts similarity index 83% rename from src/app/pages/probe/probe-page.component.ts rename to src/app/pages/probes/probes-page.component.ts index d6b031f..a9fe632 100644 --- a/src/app/pages/probe/probe-page.component.ts +++ b/src/app/pages/probes/probes-page.component.ts @@ -3,10 +3,10 @@ import { Router, NavigationEnd } from '@angular/router'; import { Subscription } from 'rxjs/Subscription'; @Component({ - selector: 'of-pages-probe', - templateUrl: './probe-page.component.html', + selector: 'of-pages-probes', + templateUrl: './probes-page.component.html', }) -export class ProbePageComponent implements OnDestroy { +export class ProbesPageComponent implements OnDestroy { private tabs = undefined; private routerSubscription$: Subscription; @@ -27,13 +27,13 @@ export class ProbePageComponent implements OnDestroy { generateTabMenu(event: NavigationEnd) { try { - const parsedUrl = event.url.split('probe/')[1].split('/')[0]; + const parsedUrl = event.url.split('probes/')[1].split('/')[0]; switch (parsedUrl) { case 'list': case 'noauth': case 'download': this.tabs = [ - { label: 'PROBES', routerLink: ['/probe/list'] }, + { label: 'Probe', routerLink: ['/probe/list'] }, { label: 'UNAUTHORIZED', routerLink: ['/probe/noauth'] }, { label: 'DOWNLOAD', routerLink: ['/probe/download'] }, ]; diff --git a/src/app/pages/probes/probes-page.module.ts b/src/app/pages/probes/probes-page.module.ts new file mode 100644 index 0000000..ecadf19 --- /dev/null +++ b/src/app/pages/probes/probes-page.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { ProbesPageComponent } from './probes-page.component'; +import { ProbesPageRoutingModule } from './probes-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, + ProbesPageRoutingModule, + PrimeNGModules, + ProbeModule, + TabbarModule, + ], + declarations: [ + ProbesPageComponent, + ] +}) +export class ProbesPageModule { } diff --git a/src/packages/probe/component/index.ts b/src/packages/probe/component/index.ts index 4efee54..8ccee88 100644 --- a/src/packages/probe/component/index.ts +++ b/src/packages/probe/component/index.ts @@ -1,6 +1,13 @@ import { DetailComponent } from './detail/detail.component'; import { ListComponent } from './list/list.component'; import { DownloadComponent } 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, 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..26e6c93 --- /dev/null +++ b/src/packages/probe/container/probe-detail-container.html @@ -0,0 +1 @@ +Probe Detail Container \ 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: [