feat: rdp element

src/app/app.module.ts

@@ -45,7 +45,7 @@ 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 {ElementRdpComponent} from './elements/rdp/rdp.component';
 
 @NgModule({
   imports: [
@@ -61,6 +61,7 @@ import {WindowsComponent} from './monitor-page/windows/windows.component';
     ElementPopupComponent,
     ElementTermComponent,
     ElementInteractiveComponent,
+    ElementRdpComponent,
     LoginComponent,
     RdpComponent,
     SshComponent,

src/app/elements/rdp/rdp.component.html

+<canvas #rdp></canvas>

src/app/rdppage/rdppage.component.spec.ts → src/app/elements/rdp/rdp.component.spec.ts

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

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

@@ -4,35 +4,40 @@
  * @date     2017-11-24
  * @author   liuzheng <liuzheng712@gmail.com>
  */
-import {Component, OnInit} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Params} from '@angular/router';
-import {DataStore} from '../globals';
+import {DataStore} from '../../globals';
 
 declare let Mstsc: any;
 
 @Component({
-  selector: 'app-rdppage',
-  templateUrl: './rdppage.component.html',
-  styleUrls: ['./rdppage.component.css']
+  selector: 'app-element-rdp',
+  templateUrl: './rdp.component.html',
+  styleUrls: ['./rdp.component.scss']
 })
-export class RdppageComponent implements OnInit {
+export class ElementRdpComponent implements OnInit, AfterViewInit {
+  @ViewChild('rdp') el: ElementRef;
 
   constructor(private activatedRoute: ActivatedRoute) {
     DataStore.NavShow = false;
   }
 
   ngOnInit() {
+  }
+
+  ngAfterViewInit() {
+
     let token: string;
     this.activatedRoute.params.subscribe((params: Params) => {
       token = params['token'];
     });
 
-    const canvas = Mstsc.$('canvas');
+    const canvas = Mstsc.$(this.el.nativeElement);
     canvas.style.display = 'inline';
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
 
-    const client = Mstsc.client.create(Mstsc.$('canvas'));
+    const client = Mstsc.client.create(Mstsc.$(this.el.nativeElement));
     client.connect(token, 'socket.io');
   }
 

src/app/rdppage/rdppage.component.html

-<canvas id="canvas"></canvas>