feat: add monitor page

.angular-cli.json

@@ -25,7 +25,6 @@
         "../node_modules/xterm/dist/xterm.css",
         "../node_modules/layui-layer/dist/theme/default/layer.css",
         "../node_modules/animate.css/animate.min.css",
-        "../node_modules/xterm/src/xterm.css",
         "assets/inspinia/style.scss",
         "styles.css"
       ],

src/app/app-routing.module.ts

@@ -9,19 +9,20 @@ import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 import {environment} from '../environments/environment';
 
-import {IndexPageComponent} from './IndexPage/index-page.component';
 import {NotFoundComponent} from './BasicPage/not-found/not-found.component';
 import {LoginComponent} from './BasicPage/login/login.component';
 import {ControlPageComponent} from './ControlPage/controlpage.component';
 import {RdppageComponent} from './rdppage/rdppage.component';
 import {TermpageComponent} from './termpage/termpage.component';
 import {ReplayPageComponent} from './replay-page/replay-page.component';
+import {MonitorPageComponent} from './monitor-page/monitor-page.component';
 
 const appRoutes: Routes = [
   {path: 'users/login', component: LoginComponent},
   {path: 'rdp/:token', component: RdppageComponent},
   {path: 'term/:token', component: TermpageComponent},
   {path: 'replay/:token', component: ReplayPageComponent},
+  {path: 'monitor/:token', component: MonitorPageComponent},
   {path: '', component: ControlPageComponent},
   {path: '**', component: NotFoundComponent}
 ];

src/app/app.module.ts

@@ -40,6 +40,9 @@ 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';
 
 
 @NgModule({
@@ -72,8 +75,9 @@ import {UtcDatePipe} from './app.pipe';
     Mp4Component,
     JsonComponent,
     UtcDatePipe,
-    // HeroListComponent,
-    // CrisisListComponent,
+    MonitorPageComponent,
+    LinuxComponent,
+    WindowsComponent,
   ],
   bootstrap: [AppComponent],
   providers: [

src/app/monitor-page/linux/linux.component.css

+
+#term {
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+}
+
+#term > div {
+  height: 100%;
+}
+
+.terminal {
+  border: #000 solid 5px;
+  color: #f0f0f0;
+  box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
+  white-space: nowrap;
+  display: inline-block;
+  height: 100%;
+}
+
+#term .terminal div span {
+  min-width: 12px;
+}

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

+<div id="term"></div>

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

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

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

+import {Component, OnInit} from '@angular/core';
+
+declare let jQuery: any;
+declare let Terminal: any;
+
+@Component({
+  selector: 'app-monitor-linux',
+  templateUrl: './linux.component.html',
+  styleUrls: ['./linux.component.css']
+})
+export class LinuxComponent implements OnInit {
+  term: any;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+    let col: number;
+    let row: number;
+    col = Math.floor(jQuery('#term').width() / jQuery('#liuzheng').width() * 8) - 3;
+    row = Math.floor(jQuery('#term').height() / jQuery('#liuzheng').height()) - 5;
+    this.term = new Terminal({
+      cols: col,
+      rows: row,
+      useStyle: true,
+      screenKeys: true,
+    });
+    this.term.open(document.getElementById('term'), true);
+    const that = this;
+    window.onresize = function () {
+      col = Math.floor(jQuery('#term').width() / jQuery('#liuzheng').width() * 8) - 3;
+      row = Math.floor(jQuery('#term').height() / jQuery('#liuzheng').height()) - 5;
+
+      if (col < 80) {
+        col = 80;
+      }
+      if (row < 24) {
+        row = 24;
+      }
+      that.term.resize(col, row);
+    };
+  }
+
+
+}

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

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

src/app/monitor-page/monitor-page.component.spec.ts

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

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

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

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

+<p>
+  windows works!
+</p>

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

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

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

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

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

@@ -25,8 +25,10 @@ export class JsonComponent implements OnInit {
   }
 
   ngOnInit() {
-    let col = Math.floor(jQuery('#term').width() / jQuery('#liuzheng').width() * 8) - 3;
-    let row = Math.floor(jQuery('#term').height() / jQuery('#liuzheng').height()) - 5;
+    let col: number;
+    let row: number;
+    col = Math.floor(jQuery('#term').width() / jQuery('#liuzheng').width() * 8) - 3;
+    row = Math.floor(jQuery('#term').height() / jQuery('#liuzheng').height()) - 5;
     this.term = new Terminal({
       cols: col,
       rows: row,
@@ -36,8 +38,8 @@ export class JsonComponent implements OnInit {
     this.term.open(document.getElementById('term'), true);
     const that = this;
     window.onresize = function () {
-      let col = Math.floor(jQuery('#term').width() / jQuery('#liuzheng').width() * 8) - 3;
-      let row = Math.floor(jQuery('#term').height() / jQuery('#liuzheng').height()) - 5;
+      col = Math.floor(jQuery('#term').width() / jQuery('#liuzheng').width() * 8) - 3;
+      row = Math.floor(jQuery('#term').height() / jQuery('#liuzheng').height()) - 5;
 
       if (col < 80) {
         col = 80;