feat: good update

package-lock.json

@@ -5308,7 +5308,7 @@
     "is-my-json-valid": {
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.16.1.tgz",
-      "integrity": "sha1-WoRnd+LCYg0eaRBOXToDsfYIjxE=",
+      "integrity": "sha512-ochPsqWS1WXj8ZnMIV0vnNXooaMhp7cyL4FMSIPKTtnV0Ha/T19G2b9kkhcNsabV9bxYkze7/aLZJb/bYuFduQ==",
       "dev": true,
       "requires": {
         "generate-function": "2.0.0",

src/app/app.module.ts

@@ -19,6 +19,8 @@ import {AppRoutingModule} from './app-routing.module';
 
 import {AppComponent} from './app.component';
 import {ElementFooterComponent} from './elements/footer/footer.component';
+import {ElementTermComponent} from './elements/term/term.component';
+
 
 import {ElementNavComponent} from './elements/nav/nav.component';
 import {LoginComponent} from './BasicPage/login/login.component';
@@ -56,6 +58,7 @@ import {WindowsComponent} from './monitor-page/windows/windows.component';
     ElementNavComponent,
     ElementFooterComponent,
     ElementPopupComponent,
+    ElementTermComponent,
     LoginComponent,
     RdpComponent,
     SshComponent,

src/app/elements/term/term.component.css

+
+div {
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+}
+
+
+.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%;
+}
+
+div.terminal div span {
+  min-width: 12px;
+}

src/app/elements/term/term.component.html

+<div #term></div>

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

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

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

+import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
+import {ElementRef, Renderer2} from '@angular/core';
+import {term} from '../../globals';
+
+declare let jQuery: any;
+declare let Terminal: any;
+
+@Component({
+  selector: 'app-element-term',
+  templateUrl: './term.component.html',
+  styleUrls: ['./term.component.css']
+})
+export class ElementTermComponent implements OnInit, AfterViewInit {
+
+  @ViewChild('term') el: ElementRef;
+
+  constructor(private rd: Renderer2) {
+  }
+
+  ngOnInit() {
+
+  }
+
+  ngAfterViewInit() {
+    term.col = Math.floor(jQuery(this.el.nativeElement).width() / jQuery('#liuzheng').width() * 8) - 3;
+    term.row = Math.floor(jQuery(this.el.nativeElement).height() / jQuery('#liuzheng').height()) - 5;
+    term.term = new Terminal({
+      cols: term.col,
+      rows: term.row,
+      useStyle: true,
+      screenKeys: true,
+    });
+    term.term.open(this.el.nativeElement, true);
+    const that = this;
+    window.onresize = function () {
+      term.col = Math.floor(jQuery(that.el.nativeElement).width() / jQuery('#liuzheng').width() * 8) - 3;
+      term.row = Math.floor(jQuery(that.el.nativeElement).height() / jQuery('#liuzheng').height()) - 5;
+
+      if (term.col < 80) {
+        term.col = 80;
+      }
+      if (term.row < 24) {
+        term.row = 24;
+      }
+      term.term.resize(term.col, term.row);
+    };
+  }
+
+}

src/app/globals.ts

 'use strict';
 import * as io from 'socket.io-client';
 
+declare let Terminal: any;
+
+export let term: {
+  term: any;
+  col: number;
+  row: number;
+} = {
+  term: Terminal(),
+  col: 80,
+  row: 24,
+};
 export const sep = '/';
 export const version = '22.22.2';
 export let Video: {
@@ -77,7 +88,7 @@ export let DataStore: {
   leftbarshow: true,
   windowsize: [],
 };
-export let CSRF: string = '';
+export let CSRF = '';
 
 export let Browser: {
   userAgent: string;
@@ -101,7 +112,7 @@ export let Browser: {
   vendor: navigator.vendor,
 };
 
-export class wsEvent {
+export let wsEvent: {
   event: string;
   data: any;
-}
+};

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>
+<app-element-term></app-element-term>

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

@@ -9,36 +9,12 @@ declare let Terminal: any;
   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/replay-page/json/json.component.html

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

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

 import {Component, OnInit} from '@angular/core';
 import {Video} from '../../globals';
+import {term} from '../../globals';
 
 declare let jQuery: any;
-declare let Terminal: any;
 
 @Component({
   selector: 'app-json',
@@ -10,7 +10,6 @@ declare let Terminal: any;
   styleUrls: ['./json.component.css']
 })
 export class JsonComponent implements OnInit {
-  term: any;
   speed = 1;
   setPercent = 0;
   toggle = false;
@@ -25,30 +24,6 @@ export class JsonComponent implements OnInit {
   }
 
   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);
-    };
   }
 
 
@@ -68,7 +43,7 @@ export class JsonComponent implements OnInit {
 
   restart() {
     clearInterval(this.timer);
-    this.term.reset();
+    term.term.reset();
     this.time = 1;
     this.pos = 0;
     this.toggle = true;
@@ -94,7 +69,7 @@ export class JsonComponent implements OnInit {
     // document.getElementById('beforeScrubberText').innerHTML = this.buildTimeString(this.time);
     for (; that.pos < Video.timelist.length; that.pos++) {
       if (Video.timelist[that.pos] * 1000 <= that.time) {
-        this.term.write(Video.json[Video.timelist[that.pos].toString()]);
+        term.term.write(Video.json[Video.timelist[that.pos].toString()]);
       } else {
         break;
       }
@@ -116,11 +91,11 @@ export class JsonComponent implements OnInit {
 
   rununil() {
     this.pos = 0;
-    this.term.reset();
+    term.term.reset();
     this.toggle = false;
     for (; this.pos < Video.timelist.length; this.pos++) {
       if (Video.timelist[this.pos] * 1000 <= this.setPercent / 100 * Video.totalTime) {
-        this.term.write(Video.json[Video.timelist[this.pos].toString()]);
+        term.term.write(Video.json[Video.timelist[this.pos].toString()]);
       } else {
         break;
       }