feat: update the hole framework

package-lock.json

@@ -13566,6 +13566,11 @@
       "version": "0.8.20",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.20.tgz",
       "integrity": "sha512-FXlA37ErSXCMy5RNBcGFgCI/Zivqzr0D19GuvDxhcYIJc7xkFp6c29DKyODJu0Zo+EMyur/WPPgcBh1EHjB9jA=="
+    },
+    "ztree-v3": {
+      "version": "3.5.17",
+      "resolved": "https://registry.npmjs.org/ztree-v3/-/ztree-v3-3.5.17.tgz",
+      "integrity": "sha1-fO1PmNrpdFZjzL+0MXIAEKSnjKo="
     }
   }
 }

package.json

@@ -25,7 +25,6 @@
     "@angular/router": "5.2.0",
     "@swimlane/ngx-datatable": "^11.1.7",
     "ajv": "^6.2.1",
-    "angular-tree-component": "^7.1.0",
     "animate.css": "^3.5.2",
     "body-parser": "^1.18.2",
     "bootstrap": "^4.0.0-beta.3",

proxy.conf.json

 {
   "/api": {
-    "target": "http://127.0.0.1:8088",
+    "target": "http://127.0.0.1:5000",
     "secure": false
   },
   "/luna/i18n": {

src/app/ControlPage/control/controlnav/controlnav.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ControlnavComponent } from './controlnav.component';
-
-describe('ControlnavComponent', () => {
-  let component: ControlnavComponent;
-  let fixture: ComponentFixture<ControlnavComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ControlnavComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ControlnavComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/ControlPage/controlpage.component.html

-<div class="container-fluid row">
-  <app-cleftbar class="col-md-2" *ngIf="DataStore.leftbarshow"></app-cleftbar>
-  <app-control [ngClass]="{'col-md-10':DataStore.leftbarshow,'col-md-12':!DataStore.leftbarshow}"></app-control>
-</div>

src/app/IndexPage/index-page.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { IndexPageComponent } from './index-page.component';
-
-describe('IndexPageComponent', () => {
-  let component: IndexPageComponent;
-  let fixture: ComponentFixture<IndexPageComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ IndexPageComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(IndexPageComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/app-routing.module.ts

-/**
- * app路由
- *
- *
- * @date     2017-11-07
- * @author   liuzheng <liuzheng712@gmail.com>
- */
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-import {environment} from '../environments/environment';
-
-import {NotFoundComponent} from './BasicPage/not-found/not-found.component';
-import {LoginComponent} from './BasicPage/login/login.component';
-import {ControlPageComponent} from './ControlPage/controlpage.component';
-import {ReplayPageComponent} from './replay-page/replay-page.component';
-import {MonitorPageComponent} from './monitor-page/monitor-page.component';
-import {ElementServerMenuComponent} from './elements/server-menu/server-menu.component';
-import {BlankPageComponent} from './blank-page/blank-page.component';
-import {TestPageComponent} from './test-page/test-page.component';
-import {SettingPageComponent} from './setting-page/setting-page.component';
-import {ConnectPageComponent} from './connect-page/connect-page.component';
-
-const appRoutes: Routes = [
-  // {path: 'users/login', component: LoginComponent},
-  {path: 'replay/:token', component: ReplayPageComponent},
-  {path: 'monitor/:token', component: MonitorPageComponent},
-  {path: 'test', component: TestPageComponent},
-  {path: 'connect', component: ConnectPageComponent},
-  // {path: 'setting', component: SettingPageComponent},
-  {path: 'undefined', component: BlankPageComponent},
-  {path: '', component: ControlPageComponent},
-  {path: '**', component: NotFoundComponent}
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot(
-      appRoutes,
-      {enableTracing: !environment.production} // <-- debugging purposes only
-    )
-  ],
-  exports: [
-    RouterModule
-  ]
-})
-export class AppRoutingModule {
-}

src/app/app.component.css

 
-app-element-nav {
+elements-nav {
   font-family: 'Roboto', sans-serif;
   font-size: 13px;
   font-weight: 300;
@@ -22,7 +22,7 @@ nav {
   width: 100%;
 }
 
-app-element-interactive {
+elements-interactive {
   position: absolute;
   display: inline-block;
   bottom: 120px;

src/app/app.component.html

 <ng-progress></ng-progress>
-<app-element-nav *ngIf="DataStore.NavShow"></app-element-nav>
+<elements-nav *ngIf="DataStore.NavShow"></elements-nav>
 <router-outlet></router-outlet>
-<!--<app-element-interactive></app-element-interactive>-->
+<!--<elements-interactive></elements-interactive>-->

src/app/app.module.ts

@@ -11,123 +11,53 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms'; // <-- NgModel
 import {LoggerModule, NGXLogger, NgxLoggerLevel} from 'ngx-logger';
 import {HttpClientModule} from '@angular/common/http';
 
-import {AppRoutingModule} from './app-routing.module';
+import {AppRouterModule} from './router/router.module';
 
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import { TreeModule } from 'angular-tree-component';
+import {TreeModule} from 'angular-tree-component';
 
 // service
 import {AppService, HttpService, LocalStorageService, LogService, UUIDService} from './app.service';
-import {DialogService, ElementDialogAlertComponent} from './elements/dialog/dialog.service';
 
-// Elements
-import {ElementFooterComponent} from './elements/footer/footer.component';
-import {ElementTermComponent} from './elements/term/term.component';
-import {ElementInteractiveComponent} from './elements/interactive/interactive.component';
-import {ChangLanWarningDialogComponent, ElementNavComponent} from './elements/nav/nav.component';
-import {ElementPopupComponent} from './elements/popup/popup.component';
-import {ElementRdpComponent} from './elements/rdp/rdp.component';
-import {ElementServerMenuComponent} from './elements/server-menu/server-menu.component';
-import {ElementIframeComponent} from './elements/iframe/iframe.component';
-import {ElementElfinderComponent} from './elements/elfinder/elfinder.component';
-import {ElementSettingsComponent} from './elements/settings/settings.component';
 
-// pages
-import {LoginComponent} from './BasicPage/login/login.component';
-import {IleftbarComponent} from './IndexPage/ileftbar/ileftbar.component';
-import {SearchComponent, SearchFilter} from './ControlPage/search/search.component';
-import {CleftbarComponent, CleftbarDialogComponent} from './ControlPage/cleftbar/cleftbar.component';
-import {ControlComponent} from './ControlPage/control/control.component';
-import {ControlnavComponent} from './ControlPage/control/controlnav/controlnav.component';
-import {ControlPageComponent} from './ControlPage/controlpage.component';
-import {IndexPageComponent} from './IndexPage/index-page.component';
-import {NotFoundComponent} from './BasicPage/not-found/not-found.component';
-import {ReplayPageComponent} from './replay-page/replay-page.component';
-import {Mp4Component} from './replay-page/mp4/mp4.component';
-import {JsonComponent} from './replay-page/json/json.component';
-import {UtcDatePipe} from './app.pipe';
-import {MonitorPageComponent} from './monitor-page/monitor-page.component';
-import {LinuxComponent} from './monitor-page/linux/linux.component';
-import {WindowsComponent} from './monitor-page/windows/windows.component';
 import {NgProgressModule} from 'ngx-progressbar';
 import {TestPageComponent} from './test-page/test-page.component';
-import {BlankPageComponent} from './blank-page/blank-page.component';
-import {MaterialModule} from './MaterialModule.component';
+import {MaterialModule} from './plugins/MaterialModule.component';
 import {CookieService} from 'ngx-cookie-service';
 import {NgxDatatableModule} from '@swimlane/ngx-datatable';
-import {ElementTableComponent} from './elements/table/table.component';
-import {SettingPageComponent} from './setting-page/setting-page.component';
-import {ElementLeftbarComponent} from './elements/leftbar/leftbar.component';
-import {ElementOfooterComponent} from './elements/ofooter/ofooter.component';
-import {SettingPageBasicComponent} from './setting-page/basic/basic.component';
-import {SettingPageEmailComponent} from './setting-page/email/email.component';
-import {SettingPageLdapComponent} from './setting-page/ldap/ldap.component';
-import {SettingPageTerminalComponent} from './setting-page/terminal/terminal.component';
-import {SettingPageS3Component} from './setting-page/s3/s3.component';
-import {TransPipe} from './trans.pipe';
 import {MAT_LABEL_GLOBAL_OPTIONS} from '@angular/material';
-import {ElementGuacamoleComponent} from './elements/guacamole/guacamole.component';
-import {ConnectPageComponent} from './connect-page/connect-page.component';
+
+
+import {Pipes} from './pipes/pipes';
+import {PagesComponents} from './pages/pages.component';
+import {ElementComponents} from './elements/elements.component';
+import {ChangLanWarningDialogComponent} from './elements/nav/nav.component';
+import {CleftbarDialogComponent} from './pages/control/cleftbar/cleftbar.component';
+import {DialogService, ElementDialogAlertComponent} from './elements/dialog/dialog.service';
+import {pluginModules} from './plugins/plugins';
+
 
 @NgModule({
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     FormsModule,
-    AppRoutingModule,
     NgProgressModule,
     HttpClientModule,
     ReactiveFormsModule,
-    MaterialModule,
     LoggerModule.forRoot({serverLoggingUrl: '/api/logs', level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR}),
     NgxDatatableModule,
-    TreeModule
+    TreeModule,
+    AppRouterModule,
+    ...pluginModules
   ],
   declarations: [
     AppComponent,
-    ElementNavComponent, ChangLanWarningDialogComponent,
-    ElementFooterComponent,
-    ElementPopupComponent,
-    ElementTermComponent,
-    ElementInteractiveComponent,
-    ElementRdpComponent,
-    ElementServerMenuComponent,
-    ElementIframeComponent,
-    ElementDialogAlertComponent,
-    ElementTableComponent,
-    ElementLeftbarComponent,
-    ElementOfooterComponent,
-    ElementGuacamoleComponent,
-    ElementElfinderComponent,
-    ElementSettingsComponent,
-    LoginComponent,
-    SearchComponent,
-    SearchFilter,
-    IleftbarComponent,
-    CleftbarComponent, CleftbarDialogComponent,
-    ControlComponent,
-    ControlnavComponent,
-    ControlPageComponent,
-    IndexPageComponent,
-    NotFoundComponent,
-    ReplayPageComponent,
-    Mp4Component,
-    JsonComponent,
-    UtcDatePipe,
-    MonitorPageComponent,
-    LinuxComponent,
-    WindowsComponent,
     TestPageComponent,
-    BlankPageComponent,
-    SettingPageComponent,
-    SettingPageBasicComponent,
-    SettingPageEmailComponent,
-    SettingPageLdapComponent,
-    SettingPageTerminalComponent,
-    SettingPageS3Component,
-    TransPipe,
-    ConnectPageComponent,
+    ...Pipes,
+    ...ElementComponents,
+    ...PagesComponents
   ],
   entryComponents: [
     CleftbarDialogComponent,

src/app/app.service.ts

@@ -14,7 +14,7 @@ import {DataStore, User, Browser, i18n} from './globals';
 import {environment} from '../environments/environment';
 import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
 import {NGXLogger} from 'ngx-logger';
-import {HostGroup} from './ControlPage/cleftbar/cleftbar.component';
+import {HostGroup} from './pages/control/cleftbar/cleftbar.component';
 import * as UUID from 'uuid-js/lib/uuid.js';
 
 declare function unescape(s: string): string;
@@ -139,7 +139,6 @@ export class HttpService {
       .set('user-only', '1')
       .set('token', token);
     return this.http.get('/api/users/v1/connection-token/', {params: params});
-
   }
 
 }

src/app/elements/asset-tree/asset-tree.component.html

+<div class="overflow">
+  <ul class="filetree">
+    <li *ngFor="let hostGroup of HostGroups ; let i = index ">
+      <input type="checkbox" id="hostgroup-{{i}}">
+      <label for="hostgroup-{{i}}" matTooltip="{{hostGroup.name}}" [matTooltipPosition]="TooltipPosition">{{hostGroup.name}}</label>
+      <ul [ngClass]="{'insearch': q }">
+        <li *ngFor="let host of hostGroup.assets_granted  " (click)="Connect(host)"
+            (contextmenu)="onRightClick($event)" matTooltip="{{host.hostname}}"
+            [matTooltipPosition]="TooltipPosition">
+          <i class="fa" [ngClass]="'fa-'+(host.platform||'undefined').toLowerCase()" id="fa-{{i}}"></i>
+          {{host.hostname}}
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>

src/app/monitor-page/monitor-page.component.spec.ts → src/app/elements/asset-tree/asset-tree.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MonitorPageComponent } from './monitor-page.component';
+import { ElementAssetTreeComponent } from './asset-tree.component';
 
-describe('MonitorPageComponent', () => {
-  let component: MonitorPageComponent;
-  let fixture: ComponentFixture<MonitorPageComponent>;
+describe('R ', () => {
+  let component: ElementAssetTreeComponent;
+  let fixture: ComponentFixture<ElementAssetTreeComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ MonitorPageComponent ]
+      declarations: [ ElementAssetTreeComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(MonitorPageComponent);
+    fixture = TestBed.createComponent(ElementAssetTreeComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/elements/asset-tree/asset-tree.component.ts

+import {Component, OnInit} from '@angular/core';
+import {HttpService} from '../../app.service';
+import * as jQuery from 'jquery/dist/jquery.min.js';
+
+@Component({
+  selector: 'elements-asset-tree',
+  templateUrl: './asset-tree.component.html',
+  styleUrls: ['./asset-tree.component.scss']
+})
+export class ElementAssetTreeComponent implements OnInit {
+
+  constructor(private _http: HttpService) {
+
+
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/elements/dialog/dialog.service.ts

@@ -43,7 +43,7 @@ export class DialogService {
 
 
 @Component({
-  selector: 'app-alert',
+  selector: 'elements-alert',
   templateUrl: 'alert.html',
   styleUrls: ['./alert.scss']
 })

src/app/elements/elements.component.ts

+// Elements
+import {ElementTableComponent} from './table/table.component';
+import {ElementLeftbarComponent} from './leftbar/leftbar.component';
+import {ElementOfooterComponent} from './ofooter/ofooter.component';
+import {ElementFooterComponent} from './footer/footer.component';
+import {ElementTermComponent} from './term/term.component';
+import {ElementInteractiveComponent} from './interactive/interactive.component';
+import {ChangLanWarningDialogComponent, ElementNavComponent} from './nav/nav.component';
+import {ElementPopupComponent} from './popup/popup.component';
+import {ElementRdpComponent} from './rdp/rdp.component';
+import {ElementServerMenuComponent} from './server-menu/server-menu.component';
+import {ElementIframeComponent} from './iframe/iframe.component';
+import {ElementElfinderComponent} from './elfinder/elfinder.component';
+import {ElementSettingsComponent} from './settings/settings.component';
+import {ElementDialogAlertComponent} from './dialog/dialog.service';
+import {ElementGuacamoleComponent} from './guacamole/guacamole.component';
+
+export const ElementComponents = [
+  ElementLeftbarComponent,
+  ElementOfooterComponent,
+  ElementTableComponent,
+  ElementFooterComponent,
+  ElementTermComponent,
+  ElementInteractiveComponent,
+  ElementNavComponent, ChangLanWarningDialogComponent,
+  ElementPopupComponent,
+  ElementRdpComponent,
+  ElementServerMenuComponent,
+  ElementIframeComponent,
+  ElementElfinderComponent,
+  ElementSettingsComponent,
+  ElementDialogAlertComponent,
+  ElementGuacamoleComponent
+];

src/app/elements/elfinder/elfinder.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 // import * as elfinder from 'elfinder/js/elfinder.min.js';
 
 @Component({
-  selector: 'app-element-elfinder',
+  selector: 'elements-elfinder',
   templateUrl: './elfinder.component.html',
   styleUrls: ['./elfinder.component.scss']
 })

src/app/elements/footer/footer.component.ts

@@ -10,7 +10,7 @@ import {DataStore, User} from '../../globals';
 import {version} from '../../../environments/environment';
 
 @Component({
-  selector: 'app-element-footer',
+  selector: 'elements-footer',
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.css']
 })

src/app/elements/guacamole/guacamole.component.ts

@@ -4,10 +4,10 @@ import {HttpService, LogService} from '../../app.service';
 import {DataStore, User} from '../../globals';
 import {DomSanitizer} from '@angular/platform-browser';
 import {environment} from '../../../environments/environment';
-import {NavList} from '../../ControlPage/control/control.component';
+import {NavList} from '../../pages/control/control/control.component';
 
 @Component({
-  selector: 'app-element-guacamole',
+  selector: 'elements-guacamole',
   templateUrl: './guacamole.component.html',
   styleUrls: ['./guacamole.component.scss']
 })

src/app/elements/iframe/iframe.component.ts

 import {Component, Input, OnInit} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
-import {NavList} from '../../ControlPage/control/control.component';
+import {NavList} from '../../pages/control/control/control.component';
 
 import {User, DataStore} from '../../globals';
 import {HttpService, LogService} from '../../app.service';
@@ -8,7 +8,7 @@ import {environment} from '../../../environments/environment';
 import {CookieService} from 'ngx-cookie-service';
 
 @Component({
-  selector: 'app-element-iframe',
+  selector: 'elements-iframe',
   templateUrl: './iframe.component.html',
   styleUrls: ['./iframe.component.scss']
 })

src/app/elements/interactive/interactive.component.ts

 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-element-interactive',
+  selector: 'elements-interactive',
   templateUrl: './interactive.component.html',
   styleUrls: ['./interactive.component.scss']
 })

src/app/elements/leftbar/leftbar.component.ts

@@ -3,7 +3,7 @@ import {FormBuilder, FormGroup} from '@angular/forms';
 import {Router} from '@angular/router';
 
 @Component({
-  selector: 'app-element-leftbar',
+  selector: 'elements-leftbar',
   templateUrl: './leftbar.component.html',
   styleUrls: ['./leftbar.component.scss']
 })

src/app/elements/nav/nav.component.ts

@@ -7,8 +7,8 @@
  */
 import {Component, Inject, OnInit} from '@angular/core';
 import {AppService, HttpService, LocalStorageService, LogService} from '../../app.service';
-import {CleftbarComponent} from '../../ControlPage/cleftbar/cleftbar.component';
-import {ControlComponent, NavList, View} from '../../ControlPage/control/control.component';
+import {CleftbarComponent} from '../../pages/control/cleftbar/cleftbar.component';
+import {ControlComponent, NavList, View} from '../../pages/control/control/control.component';
 import {DataStore, i18n} from '../../globals';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
@@ -17,7 +17,7 @@ import {FormControl, Validators} from '@angular/forms';
 declare let layer: any;
 
 @Component({
-  selector: 'app-element-nav',
+  selector: 'elements-nav',
   templateUrl: './nav.component.html',
   styleUrls: ['./nav.component.css'],
 })
@@ -26,7 +26,7 @@ export class ElementNavComponent implements OnInit {
   ChangeLanWarningDialog: any;
 
   static Hide() {
-    jQuery('app-element-nav').hide();
+    jQuery('elements-nav').hide();
   }
 
   constructor(private _appService: AppService,
@@ -357,7 +357,7 @@ export class ElementNavComponent implements OnInit {
 
 
 @Component({
-  selector: 'app-element-nav-dialog',
+  selector: 'elements-nav-dialog',
   templateUrl: 'changeLanWarning.html',
 })
 export class ChangLanWarningDialogComponent implements OnInit {

src/app/elements/ofooter/ofooter.component.ts

@@ -3,7 +3,7 @@ import {version} from '../../../environments/environment';
 import {DataStore} from '../../globals';
 
 @Component({
-  selector: 'app-element-ofooter',
+  selector: 'elements-ofooter',
   templateUrl: './ofooter.component.html',
   styleUrls: ['./ofooter.component.scss']
 })

src/app/elements/popup/popup.component.ts

 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-element-popup',
+  selector: 'elements-popup',
   templateUrl: './popup.component.html',
   styleUrls: ['./popup.component.css']
 })

src/app/elements/rdp/rdp.component.ts

@@ -11,7 +11,7 @@ import {DataStore} from '../../globals';
 declare let Mstsc: any;
 
 @Component({
-  selector: 'app-element-rdp',
+  selector: 'elements-rdp',
   templateUrl: './rdp.component.html',
   styleUrls: ['./rdp.component.scss']
 })

src/app/elements/server-menu/server-menu.component.ts

@@ -9,7 +9,7 @@ export class Menu {
 }
 
 @Component({
-  selector: 'app-element-server-menu',
+  selector: 'elements-server-menu',
   templateUrl: './server-menu.component.html',
   styleUrls: ['./server-menu.component.scss'],
 })

src/app/elements/settings/settings.component.ts

 import {Component, Input, OnInit} from '@angular/core';
 
 @Component({
-  selector: 'app-element-settings',
+  selector: 'elements-settings',
   templateUrl: './settings.component.html',
   styleUrls: ['./settings.component.scss']
 })

src/app/elements/table/table.component.ts

@@ -28,7 +28,7 @@ export let Config: {
 };
 
 @Component({
-  selector: 'app-element-table',
+  selector: 'elements-table',
   templateUrl: './table.component.html',
   styleUrls: ['./table.component.scss']
 })

src/app/elements/term/term.component.ts

 import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
 import {ElementRef} from '@angular/core';
 import {term, Terminal, TermWS} from '../../globals';
-import {NavList} from '../../ControlPage/control/control.component';
+import {NavList} from '../../pages/control/control/control.component';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 import {UUIDService} from '../../app.service';
 import {CookieService} from 'ngx-cookie-service';
 
 @Component({
-  selector: 'app-element-term',
+  selector: 'elements-term',
   templateUrl: './term.component.html',
   styleUrls: ['./term.component.css']
 })

src/app/monitor-page/monitor-page.component.html

-<app-monitor-linux></app-monitor-linux>

src/app/blank-page/blank-page.component.spec.ts → src/app/pages/blank/blank.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { BlankPageComponent } from './blank-page.component';
+import { PagesBlankComponent } from './blank.component';
 
-describe('BlankPageComponent', () => {
-  let component: BlankPageComponent;
-  let fixture: ComponentFixture<BlankPageComponent>;
+describe('PagesBlankComponent', () => {
+  let component: PagesBlankComponent;
+  let fixture: ComponentFixture<PagesBlankComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ BlankPageComponent ]
+      declarations: [ PagesBlankComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(BlankPageComponent);
+    fixture = TestBed.createComponent(PagesBlankComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/blank-page/blank-page.component.ts → src/app/pages/blank/blank.component.ts

 import {Component, OnInit} from '@angular/core';
-import {DataStore} from '../globals';
+import {DataStore} from '../../globals';
 
 @Component({
-  selector: 'app-blank-page',
-  templateUrl: './blank-page.component.html',
-  styleUrls: ['./blank-page.component.scss']
+  selector: 'pages-blank',
+  templateUrl: './blank.component.html',
+  styleUrls: ['./blank.component.scss']
 })
-export class BlankPageComponent implements OnInit {
+export class PagesBlankComponent implements OnInit {
 
   constructor() {
     DataStore.NavShow = false;

src/app/connect-page/connect-page.component.html → src/app/pages/connect/connect.component.html

-<app-element-term
+<elements-term
   [token]="token"
   [index]="0"
   *ngIf="system =='linux'">
-</app-element-term>
-<app-element-guacamole
+</elements-term>
+<elements-guacamole
   [target]="target"
   [index]="0"
   *ngIf="system=='windows' && target">
-</app-element-guacamole>
+</elements-guacamole>

src/app/connect-page/connect-page.component.spec.ts → src/app/pages/connect/connect.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ConnectPageComponent } from './connect-page.component';
+import { PagesConnectComponent } from './connect.component';
 
 describe('ConnectPageComponent', () => {
-  let component: ConnectPageComponent;
-  let fixture: ComponentFixture<ConnectPageComponent>;
+  let component: PagesConnectComponent;
+  let fixture: ComponentFixture<PagesConnectComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ConnectPageComponent ]
+      declarations: [ PagesConnectComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ConnectPageComponent);
+    fixture = TestBed.createComponent(PagesConnectComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/connect-page/connect-page.component.ts → src/app/pages/connect/connect.component.ts

 import {Component, OnInit} from '@angular/core';
-import {AppService, HttpService, LocalStorageService} from '../app.service';
-import {DataStore} from '../globals';
+import {AppService, HttpService, LocalStorageService} from '../../app.service';
+import {DataStore} from '../../globals';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 
 @Component({
-  selector: 'app-connect-page',
-  templateUrl: './connect-page.component.html',
-  styleUrls: ['./connect-page.component.scss']
+  selector: 'pages-connect',
+  templateUrl: './connect.component.html',
+  styleUrls: ['./connect.component.scss']
 })
-export class ConnectPageComponent implements OnInit {
+export class PagesConnectComponent implements OnInit {
   token: string;
   system: string;
   authToken: string;

src/app/ControlPage/cleftbar/cleftbar.component.html → src/app/pages/control/cleftbar/cleftbar.component.html

@@ -25,4 +25,4 @@
 <div class="footer">
   Version <strong>{{version}}</strong>
 </div>
-<!--<app-element-server-menu></app-element-server-menu>-->
+<!--<elements-server-menu></elements-server-menu>-->

src/app/ControlPage/cleftbar/cleftbar.component.ts → src/app/pages/control/cleftbar/cleftbar.component.ts

@@ -8,15 +8,15 @@
  */
 
 import {Component, Inject, OnInit} from '@angular/core';
-import {AppService, HttpService, LogService} from '../../app.service';
+import {AppService, HttpService, LogService} from '../../../app.service';
 import {SearchComponent} from '../search/search.component';
-import {DataStore} from '../../globals';
-import {version} from '../../../environments/environment';
-import {ElementServerMenuComponent} from '../../elements/server-menu/server-menu.component';
+import {DataStore} from '../../../globals';
+import {version} from '../../../../environments/environment';
 import {NavList, View} from '../control/control.component';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
 import {FormControl, Validators} from '@angular/forms';
-import {DialogService} from '../../elements/dialog/dialog.service';
+import {ElementServerMenuComponent} from '../../../elements/server-menu/server-menu.component';
+import {DialogService} from '../../../elements/dialog/dialog.service';
 
 
 export interface HostGroup {
@@ -32,7 +32,7 @@ export class Host {
 }
 
 @Component({
-  selector: 'app-cleftbar',
+  selector: 'pages-control-cleftbar',
   templateUrl: './cleftbar.component.html',
   styleUrls: ['./cleftbar.component.css'],
   providers: [SearchComponent, ElementServerMenuComponent]

src/app/ControlPage/controlpage.component.css → src/app/pages/control/control.component.css

@@ -11,12 +11,12 @@ div {
   position: initial;
 }
 
-app-cleftbar {
+pages-control-cleftbar {
   padding: 0;
   background: #2f2a2a;
   color: #d6cbcb;
 }
 
-app-control {
+pages-control-control {
   padding: 0;
 }

src/app/pages/control/control.component.html

+<div class="container-fluid row">
+  <pages-control-cleftbar class="col-md-2" *ngIf="DataStore.leftbarshow"></pages-control-cleftbar>
+  <pages-control-control [ngClass]="{'col-md-10':DataStore.leftbarshow,'col-md-12':!DataStore.leftbarshow}"></pages-control-control>
+</div>

src/app/ControlPage/controlpage.component.spec.ts → src/app/pages/control/control.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ControlPageComponent } from './controlpage.component';
+import { PagesControlComponent } from './control.component';
 
 describe('ControlPageComponent', () => {
-  let component: ControlPageComponent;
-  let fixture: ComponentFixture<ControlPageComponent>;
+  let component: PagesControlComponent;
+  let fixture: ComponentFixture<PagesControlComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ControlPageComponent ]
+      declarations: [ PagesControlComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ControlPageComponent);
+    fixture = TestBed.createComponent(PagesControlComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/ControlPage/controlpage.component.ts → src/app/pages/control/control.component.ts

@@ -6,15 +6,15 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 import {Component, OnInit} from '@angular/core';
-import {AppService} from '../app.service';
-import {DataStore, User} from '../globals';
+import {AppService} from '../../app.service';
+import {DataStore, User} from '../../globals';
 
 @Component({
-  selector: 'app-controllpage',
-  templateUrl: './controlpage.component.html',
-  styleUrls: ['./controlpage.component.css'],
+  selector: 'pages-control',
+  templateUrl: './control.component.html',
+  styleUrls: ['./control.component.css'],
 })
-export class ControlPageComponent implements OnInit {
+export class PagesControlComponent implements OnInit {
   DataStore = DataStore;
   User = User;
 

src/app/ControlPage/control/control.component.css → src/app/pages/control/control/control.component.css

-div, app-element-term, app-element-iframe {
+div, elements-term, elements-iframe {
   height: 100%;
   padding-bottom: 30px;
 }

src/app/ControlPage/control/control.component.html → src/app/pages/control/control/control.component.html

-<app-controlnav></app-controlnav>
+<pages-control-nav></pages-control-nav>
 <div *ngFor="let m of NavList.List;let i=index"
      [ngClass]="{'active':i==NavList.Active}"
 >
-  <app-element-term [index]="i"
+  <elements-term [index]="i"
                     [host]="m.host"
                     [userid]="m.user.id"
                     *ngIf="m.type=='ssh'">
-  </app-element-term>
-  <app-element-guacamole [index]="i"
+  </elements-term>
+  <elements-guacamole [index]="i"
                          [host]="m.host"
                          [userid]="m.user.id"
                          *ngIf="m.type=='rdp'">
-  </app-element-guacamole>
-  <app-element-settings [index]="i"
+  </elements-guacamole>
+  <elements-settings [index]="i"
                         *ngIf="m.type=='settings'">
-  </app-element-settings>
+  </elements-settings>
 </div>

src/app/ControlPage/control/control.component.ts → src/app/pages/control/control/control.component.ts

@@ -8,7 +8,7 @@
  */
 
 import {Component, OnInit} from '@angular/core';
-import {TermWS} from '../../globals';
+import {TermWS} from '../../../globals';
 
 // export class Term {
 //   machine: string;
@@ -41,7 +41,7 @@ export let NavList: {
 };
 
 @Component({
-  selector: 'app-control',
+  selector: 'pages-control-control',
   templateUrl: './control.component.html',
   styleUrls: ['./control.component.css']
 })

src/app/pages/control/control/controlnav/nav.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PagesControlNavComponent } from './nav.component';
+
+describe('ControlPagesControlNavComponent', () => {
+  let component: PagesControlNavComponent;
+  let fixture: ComponentFixture<PagesControlNavComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PagesControlNavComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PagesControlNavComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/ControlPage/control/controlnav/controlnav.component.ts → src/app/pages/control/control/controlnav/nav.component.ts

@@ -12,12 +12,12 @@ import {ControlComponent, NavList} from '../control.component';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 
 @Component({
-  selector: 'app-controlnav',
-  templateUrl: './controlnav.component.html',
-  styleUrls: ['./controlnav.component.css'],
+  selector: 'pages-control-nav',
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.css'],
 })
-export class ControlnavComponent implements OnInit {
-  setActive = ControlnavComponent.setActive;
+export class PagesControlNavComponent implements OnInit {
+  setActive = PagesControlNavComponent.setActive;
   NavList = NavList;
 
   static checkActive(index) {
@@ -31,7 +31,7 @@ export class ControlnavComponent implements OnInit {
     } else {
       NavList.Active = index;
     }
-    ControlnavComponent.setActive(NavList.Active);
+    PagesControlNavComponent.setActive(NavList.Active);
   }
 
   static setActive(index) {
@@ -65,7 +65,7 @@ export class ControlnavComponent implements OnInit {
       ControlComponent.TerminalDisconnect(index);
     }
     NavList.List.splice(index, 1);
-    ControlnavComponent.checkActive(index);
+    PagesControlNavComponent.checkActive(index);
   }
 
   scrollleft() {

src/app/ControlPage/search/search.component.ts → src/app/pages/control/search/search.component.ts

@@ -7,7 +7,7 @@
  */
 import {Component, OnChanges, Input, Pipe, PipeTransform} from '@angular/core';
 
-import {AppService, HttpService, LogService} from '../../app.service';
+import {AppService, HttpService, LogService} from '../../../app.service';
 
 export let Q = '';
 

src/app/IndexPage/ileftbar/ileftbar.component.ts → src/app/pages/index/ileftbar/ileftbar.component.ts

@@ -6,10 +6,10 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 import {Component, OnInit} from '@angular/core';
-import {AppService, LogService} from '../../app.service';
+import {AppService, LogService} from '../../../app.service';
 
 @Component({
-  selector: 'app-ileftbar',
+  selector: 'pages-ileftbar',
   templateUrl: './ileftbar.component.html',
   styleUrls: ['./ileftbar.component.css']
 })

src/app/BasicPage/login/login.component.spec.ts → src/app/pages/index/index.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LoginComponent } from './login.component';
+import { PagesIndexComponent } from './index.component';
 
-describe('LoginComponent', () => {
-  let component: LoginComponent;
-  let fixture: ComponentFixture<LoginComponent>;
+describe('PagesIndexComponent', () => {
+  let component: PagesIndexComponent;
+  let fixture: ComponentFixture<PagesIndexComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ LoginComponent ]
+      declarations: [ PagesIndexComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(LoginComponent);
+    fixture = TestBed.createComponent(PagesIndexComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/IndexPage/index-page.component.ts → src/app/pages/index/index.component.ts

@@ -6,15 +6,15 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 import {Component, OnInit} from '@angular/core';
-import {AppService} from '../app.service';
-import {User} from '../globals';
+import {AppService} from '../../app.service';
+import {User} from '../../globals';
 
 @Component({
-  selector: 'app-index-page',
-  templateUrl: './index-page.component.html',
-  styleUrls: ['./index-page.component.css'],
+  selector: 'pages-index',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.css'],
 })
-export class IndexPageComponent implements OnInit {
+export class PagesIndexComponent implements OnInit {
   User = User;
 
   constructor() {

src/app/BasicPage/not-found/not-found.component.spec.ts → src/app/pages/login/login.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { NotFoundComponent } from './not-found.component';
+import { PagesLoginComponent } from './login.component';
 
-describe('NotFoundComponent', () => {
-  let component: NotFoundComponent;
-  let fixture: ComponentFixture<NotFoundComponent>;
+describe('PagesLoginComponent', () => {
+  let component: PagesLoginComponent;
+  let fixture: ComponentFixture<PagesLoginComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ NotFoundComponent ]
+      declarations: [ PagesLoginComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(NotFoundComponent);
+    fixture = TestBed.createComponent(PagesLoginComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/BasicPage/login/login.component.ts → src/app/pages/login/login.component.ts

@@ -13,11 +13,11 @@ import {DataStore, User} from '../../globals';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 
 @Component({
-  selector: 'app-login',
+  selector: 'pages-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css'],
 })
-export class LoginComponent implements OnInit {
+export class PagesLoginComponent implements OnInit {
   DataStore = DataStore;
   User = User;
   loginBotton = 'login to your account';

src/app/monitor-page/linux/linux.component.html → src/app/pages/monitor/linux/linux.component.html

-<app-element-term
+<elements-term
   [index]="0"
   [monitor]="token"
-></app-element-term>
+></elements-term>

src/app/pages/monitor/linux/linux.component.spec.ts

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

src/app/monitor-page/linux/linux.component.ts → src/app/pages/monitor/linux/linux.component.ts

 import {Component, OnInit} from '@angular/core';
-import {Monitor} from '../../globals';
+import {Monitor} from '../../../globals';
 
 @Component({
-  selector: 'app-monitor-linux',
+  selector: 'pages-monitor-linux',
   templateUrl: './linux.component.html',
   styleUrls: ['./linux.component.css']
 })
-export class LinuxComponent implements OnInit {
+export class PagesMonitorLinuxComponent implements OnInit {
   token: string;
 
   constructor() {

src/app/pages/monitor/monitor.component.html

+<pages-monitor-linux></pages-monitor-linux>

src/app/monitor-page/linux/linux.component.spec.ts → src/app/pages/monitor/monitor.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LinuxComponent } from './linux.component';
+import { PagesMonitorComponent } from './monitor.component';
 
-describe('LinuxComponent', () => {
-  let component: LinuxComponent;
-  let fixture: ComponentFixture<LinuxComponent>;
+describe('PagesMonitorComponent', () => {
+  let component: PagesMonitorComponent;
+  let fixture: ComponentFixture<PagesMonitorComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ LinuxComponent ]
+      declarations: [ PagesMonitorComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(LinuxComponent);
+    fixture = TestBed.createComponent(PagesMonitorComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/monitor-page/monitor-page.component.ts → src/app/pages/monitor/monitor.component.ts

 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Params} from '@angular/router';
-import {DataStore, Monitor} from '../globals';
+import {DataStore, Monitor} from '../../globals';
 
 @Component({
-  selector: 'app-monitor-page',
-  templateUrl: './monitor-page.component.html',
-  styleUrls: ['./monitor-page.component.css']
+  selector: 'pages-monitor',
+  templateUrl: './monitor.component.html',
+  styleUrls: ['./monitor.component.css']
 })
-export class MonitorPageComponent implements OnInit {
+export class PagesMonitorComponent implements OnInit {
 
   constructor(private activatedRoute: ActivatedRoute) {
     DataStore.NavShow = false;

src/app/monitor-page/windows/windows.component.spec.ts → src/app/pages/monitor/windows/windows.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { WindowsComponent } from './windows.component';
+import { PagesMonitorWindowsComponent } from './windows.component';
 
-describe('WindowsComponent', () => {
-  let component: WindowsComponent;
-  let fixture: ComponentFixture<WindowsComponent>;
+describe('PagesMonitorWindowsComponent', () => {
+  let component: PagesMonitorWindowsComponent;
+  let fixture: ComponentFixture<PagesMonitorWindowsComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ WindowsComponent ]
+      declarations: [ PagesMonitorWindowsComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(WindowsComponent);
+    fixture = TestBed.createComponent(PagesMonitorWindowsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/monitor-page/windows/windows.component.ts → src/app/pages/monitor/windows/windows.component.ts

 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-windows',
+  selector: 'pages-monitor-windows',
   templateUrl: './windows.component.html',
   styleUrls: ['./windows.component.css']
 })
-export class WindowsComponent implements OnInit {
+export class PagesMonitorWindowsComponent implements OnInit {
 
   constructor() { }
 

src/app/pages/not-found/not-found.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PagesNotFoundComponent } from './not-found.component';
+
+describe('PagesNotFoundComponent', () => {
+  let component: PagesNotFoundComponent;
+  let fixture: ComponentFixture<PagesNotFoundComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PagesNotFoundComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PagesNotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/BasicPage/not-found/not-found.component.ts → src/app/pages/not-found/not-found.component.ts

@@ -2,11 +2,11 @@ import {Component, OnInit} from '@angular/core';
 import {DataStore} from '../../globals';
 
 @Component({
-  selector: 'app-not-found',
+  selector: 'pages-not-found',
   templateUrl: './not-found.component.html',
   styleUrls: ['./not-found.component.css']
 })
-export class NotFoundComponent implements OnInit {
+export class PagesNotFoundComponent implements OnInit {
 
   constructor() {
 

src/app/pages/pages.component.ts

+import {PagesBlankComponent} from './blank/blank.component';
+import {PagesConnectComponent} from './connect/connect.component';
+import {PagesControlComponent} from './control/control.component';
+import {PagesIndexComponent} from './index/index.component';
+import {PagesMonitorComponent} from './monitor/monitor.component';
+import {PagesReplayComponent} from './replay/replay.component';
+// import {PagesSettingComponent} from './setting/setting.component';
+import {PagesNotFoundComponent} from './not-found/not-found.component';
+import {PagesLoginComponent} from './login/login.component';
+import {CleftbarComponent, CleftbarDialogComponent} from './control/cleftbar/cleftbar.component';
+import {Mp4Component} from './replay/mp4/mp4.component';
+import {JsonComponent} from './replay/json/json.component';
+import {ControlComponent} from './control/control/control.component';
+import {PagesControlNavComponent} from './control/control/controlnav/nav.component';
+import {SearchComponent, SearchFilter} from './control/search/search.component';
+import {PagesMonitorLinuxComponent} from './monitor/linux/linux.component';
+import {PagesMonitorWindowsComponent} from './monitor/windows/windows.component';
+
+export const PagesComponents = [
+  PagesBlankComponent,
+  PagesConnectComponent,
+  PagesControlComponent, ControlComponent, PagesControlNavComponent,
+  CleftbarComponent, CleftbarDialogComponent,
+  PagesIndexComponent,
+  PagesMonitorComponent,
+  PagesReplayComponent, Mp4Component, JsonComponent,
+  // PagesSettingComponent,
+  PagesNotFoundComponent,
+  PagesLoginComponent,
+  SearchComponent,
+  SearchFilter,
+  PagesMonitorLinuxComponent,
+  PagesMonitorWindowsComponent
+];

src/app/replay-page/json/json.component.css → src/app/pages/replay/json/json.component.css

@@ -22,7 +22,7 @@
   min-width: 12px;
 }
 
-app-element-term {
+elements-term {
   position: absolute;
   width: 100%;
   height: 100%;

src/app/replay-page/json/json.component.html → src/app/pages/replay/json/json.component.html

@@ -33,5 +33,5 @@
   {{time | utcDate | date:"HH:mm:ss"}}
 </div>
 
-<app-element-term></app-element-term>
+<elements-term></elements-term>
 <!--<asciinema-player></asciinema-player>-->

src/app/replay-page/json/json.component.ts → src/app/pages/replay/json/json.component.ts

 import {Component, Input, OnInit} from '@angular/core';
-import {Video, term} from '../../globals';
-import {HttpService, LogService} from '../../app.service';
+import {Video, term} from '../../../globals';
+import {HttpService, LogService} from '../../../app.service';
 
 @Component({
   selector: 'app-replay-json',

src/app/replay-page/mp4/mp4.component.ts → src/app/pages/replay/mp4/mp4.component.ts

 import {Component, Input, OnInit} from '@angular/core';
-import {Video} from '../../globals';
+import {Video} from '../../../globals';
 
 @Component({
   selector: 'app-replay-mp4',

src/app/replay-page/replay-page.component.spec.ts → src/app/pages/replay/replay.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { ReplayPageComponent } from './replay-page.component';
+import { PagesReplayComponent } from './replay-page.component';
 
 describe('ReplayPageComponent', () => {
-  let component: ReplayPageComponent;
-  let fixture: ComponentFixture<ReplayPageComponent>;
+  let component: PagesReplayComponent;
+  let fixture: ComponentFixture<PagesReplayComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ReplayPageComponent ]
+      declarations: [ PagesReplayComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(ReplayPageComponent);
+    fixture = TestBed.createComponent(PagesReplayComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/replay-page/replay-page.component.ts → src/app/pages/replay/replay.component.ts

 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Params} from '@angular/router';
-import {HttpService, LogService} from '../app.service';
-import {Video, DataStore} from '../globals';
+import {HttpService, LogService} from '../../app.service';
+import {Video, DataStore} from '../../globals';
 
 @Component({
-  selector: 'app-replay-page',
-  templateUrl: './replay-page.component.html',
-  styleUrls: ['./replay-page.component.css']
+  selector: 'pages-replay',
+  templateUrl: './replay.component.html',
+  styleUrls: ['./replay.component.css']
 })
-export class ReplayPageComponent implements OnInit {
+export class PagesReplayComponent implements OnInit {
 
   constructor(private activatedRoute: ActivatedRoute,
               private _http: HttpService,

src/app/setting-page/setting-page.component.html → src/app/pages/setting/setting.component.html

 <div class="pace-done">
-  <app-element-leftbar></app-element-leftbar>
+  <elements-leftbar></elements-leftbar>
   <mat-card class="content">
     <mat-tab-group>
       <mat-tab label="{{'Basic setting'|trans}}">
@@ -16,5 +16,5 @@
       </mat-tab>
     </mat-tab-group>
   </mat-card>
-  <app-element-ofooter></app-element-ofooter>
+  <elements-ofooter></elements-ofooter>
 </div>

src/app/setting-page/setting-page.component.spec.ts → src/app/pages/setting/setting.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SettingPageComponent } from './setting-page.component';
+import { PagesSettingComponent } from './setting.component';
 
 describe('SettingPageComponent', () => {
-  let component: SettingPageComponent;
-  let fixture: ComponentFixture<SettingPageComponent>;
+  let component: PagesSettingComponent;
+  let fixture: ComponentFixture<PagesSettingComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SettingPageComponent ]
+      declarations: [ PagesSettingComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SettingPageComponent);
+    fixture = TestBed.createComponent(PagesSettingComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/pages/setting/setting.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'pages-setting',
+  templateUrl: './setting.component.html',
+  styleUrls: ['./setting.component.scss']
+})
+export class PagesSettingComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/app.pipe.ts → src/app/pipes/date.pipe.ts

 import {Pipe, PipeTransform} from '@angular/core';
 
+
 @Pipe({
   name: 'utcDate'
 })

src/app/pipes/pipes.ts

+import {TransPipe} from './trans.pipe';
+import {UtcDatePipe} from './date.pipe';
+
+export const Pipes = [
+  UtcDatePipe,
+  TransPipe
+];

src/app/trans.pipe.ts → src/app/pipes/trans.pipe.ts

 import {Pipe, PipeTransform} from '@angular/core';
-import {i18n} from './globals';
+import {i18n} from '../globals';
 
 @Pipe({
   name: 'trans'

src/app/plugins/plugins.ts

+import {MaterialModule} from './MaterialModule.component';
+
+export const pluginModules = [
+  MaterialModule
+];
+
+

src/app/router/router.module.ts

+/**
+ * app路由
+ *
+ *
+ * @date     2017-11-07
+ * @author   liuzheng <liuzheng712@gmail.com>
+ */
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {environment} from '../../environments/environment';
+
+import {PagesBlankComponent} from '../pages/blank/blank.component';
+import {TestPageComponent} from '../test-page/test-page.component';
+// import {PagesSettingComponent} from '../pages/setting/setting.component';
+import {PagesConnectComponent} from '../pages/connect/connect.component';
+import {PagesReplayComponent} from '../pages/replay/replay.component';
+import {PagesControlComponent} from '../pages/control/control.component';
+import {PagesNotFoundComponent} from '../pages/not-found/not-found.component';
+import {PagesMonitorComponent} from '../pages/monitor/monitor.component';
+
+
+const appRoutes: Routes = [
+  // {path: 'users/login', component: LoginComponent},
+  {path: 'replay/:token', component: PagesReplayComponent},
+  {path: 'monitor/:token', component: PagesMonitorComponent},
+  {path: 'test', component: TestPageComponent},
+  {path: 'connect', component: PagesConnectComponent},
+  // {path: 'setting', component: PagesSettingComponent},
+  {path: 'undefined', component: PagesBlankComponent},
+  {path: '', component: PagesControlComponent},
+  {path: '**', component: PagesNotFoundComponent}
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(
+      appRoutes,
+      {enableTracing: false} // <-- debugging purposes only
+      // {enableTracing: !environment.production} // <-- debugging purposes only
+    )
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRouterModule {
+}

src/app/setting-page/setting-page.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-setting-page',
-  templateUrl: './setting-page.component.html',
-  styleUrls: ['./setting-page.component.scss']
-})
-export class SettingPageComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/main.ts

-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import {enableProdMode} from '@angular/core';
+import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
+import {AppModule} from './app/app.module';
+import {environment} from './environments/environment';
 
 if (environment.production) {
   enableProdMode();

tslint.json

@@ -117,13 +117,23 @@
     "directive-selector": [
       true,
       "attribute",
-      "app",
-      "camelCase"
+      [
+        "elements",
+        "pages",
+        "app"
+      ],
+      "camelCase",
+      "elements",
+      "pages"
     ],
     "component-selector": [
       true,
       "element",
-      "app",
+      [
+        "elements",
+        "pages",
+        "app"
+      ],
       "kebab-case"
     ],
     "use-input-property-decorator": true,