feat: add webterminal single page

src/app/termpage/termpage.component.css

+#term {
+  width: 100%;
+  height: 100%;
+}
+
+#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;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+}
+
+#term .terminal div span {
+  min-width: 12px;
+}
+
+#liuzheng {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  font-size: 11px !important;
+  padding-bottom: 16px !important;
+  font-family: 'Monaco', iosevka !important;
+}

src/app/termpage/termpage.component.html

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

src/app/termpage/termpage.component.spec.ts

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

src/app/termpage/termpage.component.ts

+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Params} from '@angular/router';
+import {DataStore} from "../app.service";
+import * as io from 'socket.io-client';
+
+declare let jQuery: any;
+declare let Terminal: any;
+
+@Component({
+  selector: 'app-termpage',
+  templateUrl: './termpage.component.html',
+  styleUrls: ['./termpage.component.css']
+})
+export class TermpageComponent implements OnInit {
+  constructor(private activatedRoute: ActivatedRoute) {
+    DataStore.NavShow = false;
+
+  }
+
+  ngOnInit() {
+    let token: string;
+    this.activatedRoute.params.subscribe((params: Params) => {
+      token = params['token'];
+    });
+    let socket = io.connect();
+    let term = new Terminal({
+      cols: '80',
+      rows: '24',
+      useStyle: true,
+      screenKeys: true,
+    });
+
+    socket.on('connect', function () {
+      socket.emit('token', token);
+
+      term.on('data', function (data) {
+        socket.emit('data', data);
+      });
+
+
+      socket.on('data', function (data) {
+        term.write(data);
+      });
+
+      socket.on('disconnect', function () {
+        term.destroy();
+      });
+
+      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;
+        let rows = 24;
+        let cols = 80;
+
+
+        if (col < 80) col = 80;
+        if (row < 24) row = 24;
+        if (cols == col && row == rows) {
+        } else {
+          socket.emit('resize', [col, row]);
+          term.resize(col, row);
+        }
+      };
+      jQuery(window).resize();
+    });
+
+  }
+
+}