feat: update

src/app/BasicPage/nav/nav.component.html

@@ -12,7 +12,7 @@
         <a class="nav-link" routerLink="">Home <span class="sr-only">(current)</span></a>
       </li>
       <li class="nav-item">
-        <a class="nav-link" routerLink="term">Term</a>
+        <a class="nav-link" routerLink="control">Control</a>
       </li>
       <li class="nav-item">
         <a class="nav-link disabled" href="#">Disabled</a>

src/app/ControlPage/cleftbar/cleftbar.component.ts

@@ -3,13 +3,14 @@ import {Logger} from 'angular2-logger/core';
 
 import {AppService, DataStore} from '../../app.service';
 import {SshComponent} from '../control/ssh/ssh.component';
+import {RdpComponent} from "../control/rdp/rdp.component";
 
 @Component({
   selector: 'app-cleftbar',
   templateUrl: './cleftbar.component.html',
   styleUrls: ['./cleftbar.component.css'],
 
-  providers: [SshComponent]
+  providers: [SshComponent, RdpComponent]
 
 })
 export class CleftbarComponent implements OnInit {
@@ -33,6 +34,7 @@ export class CleftbarComponent implements OnInit {
 
   constructor(private _appService: AppService,
               private _term: SshComponent,
+              private _rdp: RdpComponent,
               private _logger: Logger) {
     this._logger.log('nav.ts:NavComponent');
     // this._appService.getnav()
@@ -46,7 +48,7 @@ export class CleftbarComponent implements OnInit {
     if (host.type === 'ssh') {
       this._term.TerminalConnect(host.uuid);
     } else {
-
+      this._rdp.Connect()
     }
   }
 

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

 <app-controlnav></app-controlnav>
-<app-ssh></app-ssh>
+<!--<app-ssh></app-ssh>-->
+<app-rdp></app-rdp>

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

 import {Component, OnInit} from '@angular/core';
 
 export class Term {
-  nick: string;
-  edit: boolean;
   machine: string;
-  connected: boolean;
-  closed: boolean;
   socket: any;
   term: any;
-  hide: boolean;
 }
+export class Rdp {
+  machine: string;
+  token: string;
+}
+export class View {
+  nick: string;
+  type: string;
+  edit: boolean;
+  connected: boolean;
+  hide: boolean;
+  closed: boolean;
+  Rdp: Rdp;
+  Term: Term;
 
+}
 export let NavList: {
-  term: Array<Term>;
-  termlist: Array<string>;
-  termActive: number;
+  List: Array<View>;
+  Active: number;
 } = {
-  term: [new Term()],
-  termlist: [],
-  termActive: 0,
+  List: [new View()],
+  Active: 0,
 };
 
 @Component({

src/app/ControlPage/control/controlnav/controlnav.component.html

 <div id="tabs">
   <ul>
-    <li *ngFor="let m of NavList.term;let i = index"
-        [ngClass]="{'active':i==NavList.termActive,'disconnected':!m.connected, 'hidden': m.closed != false}"
+    <li *ngFor="let m of NavList.List;let i = index"
+        [ngClass]="{'active':i==NavList.Active,'disconnected':!m.connected, 'hidden': m.closed != false}"
         id="termnav-{{i}}" (click)="setActive(i)">
       <span *ngIf="!m.edit" (dblclick)="m.edit=true;setActive(i)">{{m.nick}}</span>
       <input *ngIf="m.edit" [(ngModel)]="m.nick" autofocus (blur)="m.edit=false" (keyup.enter)="m.edit=false"/>

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

 import {Component, OnInit} from '@angular/core';
 import {NavList} from '../control.component'
+declare let jQuery: any;
 
 
 @Component({
@@ -18,25 +19,32 @@ export class ControlnavComponent implements OnInit {
   }
 
   static checkActive(index) {
-    let len = NavList.term.length;
+    let len = NavList.List.length;
     if (len == 1) {
       // 唯一一个
-      NavList.termActive = 0;
+      NavList.Active = 0;
     } else if (len - 1 == index) {
       // 删了最后一个
-      NavList.termActive = len - 2;
+      NavList.Active = len - 2;
     } else {
-      NavList.termActive = index;
+      NavList.Active = index;
     }
-    ControlnavComponent.setActive(NavList.termActive)
+    ControlnavComponent.setActive(NavList.Active)
   }
 
   static setActive(index) {
-    for (let m in NavList.term) {
-      NavList.term[m].hide = true;
+    for (let m in NavList.List) {
+      NavList.List[m].hide = true;
+    }
+    NavList.List[index].hide = false;
+    NavList.Active = index;
+    if (NavList.List[index].type === "ssh") {
+      jQuery("#ssh").show();
+      jQuery("#rdp").hide()
+    } else {
+      jQuery("#ssh").hide();
+      jQuery("#rdp").show()
     }
-    NavList.term[index].hide = false;
-    NavList.termActive = index;
   }
 
 }

src/app/ControlPage/control/rdp/rdp.component.css

+#rdp {
+  width: 100%;
+  height: 100%;
+  padding: 15px;
+}
+
+#rdp > div, iframe {
+  width: 100%;
+  height: 100%;
+}
+
+iframe {
+  border: none;
+}

src/app/ControlPage/control/rdp/rdp.component.html

-<p>
-  rdp works!
-</p>
+<div id="rdp">
+  <div *ngFor="let m of NavList.List;let i=index"
+       [ngClass]="{'disconnected':!m.connected,'hidden': m.hide,'hidden':m.type!='rdp'}" id="rdp-{{i}}">
+    <iframe src="http://127.0.0.1:9250/?token=000"></iframe>
+  </div>
+</div>

src/app/ControlPage/control/rdp/rdp.component.ts

-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {NavList, View, Rdp} from '../control.component';
 
 @Component({
   selector: 'app-rdp',
@@ -6,10 +7,26 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./rdp.component.css']
 })
 export class RdpComponent implements OnInit {
+  NavList = NavList;
 
-  constructor() { }
+  constructor() {
+  }
 
   ngOnInit() {
   }
 
+  Connect() {
+    let id = NavList.List.length - 1;
+    NavList.List[id].nick = 'localhost';
+    NavList.List[id].connected = true;
+    NavList.List[id].edit = false;
+    NavList.List[id].closed = false;
+    NavList.List[id].type = "rdp";
+    NavList.List[id].Rdp = new Rdp;
+    NavList.List[id].Rdp.token = "xxx";
+    NavList.List[id].Rdp.machine = "xxx"
+
+
+  }
+
 }

src/app/ControlPage/control/ssh/ssh.component.html

 <div id="term">
-  <!--<div-->
-  <!--[ngClass]="{'disconnected':!DataStore.term[0].connected, 'hidden': i!=DataStore.termActive || DataStore.term[0].closed}"-->
-  <!--id="term-0"></div>-->
-  <div *ngFor="let m of NavList.term;let i=index"
-       [ngClass]="{'disconnected':!m.connected,'hidden': m.hide}" id="term-{{i}}">
+  <div *ngFor="let m of NavList.List;let i=index"
+       [ngClass]="{'disconnected':!m.connected,'hidden': m.hide,'hidden':m.type!='ssh'}" id="term-{{i}}">
   </div>
 </div>
 <span id="liuzheng">liuzheng</span>

src/app/ControlPage/control/ssh/ssh.component.ts

@@ -6,7 +6,7 @@ import {Cookie} from 'ng2-cookies/ng2-cookies';
 declare let jQuery: any;
 declare let Terminal: any;
 import {AppService, DataStore} from '../../../app.service';
-import {NavList, Term} from '../control.component';
+import {NavList, View, Term} from '../control.component';
 
 
 @Component({
@@ -39,46 +39,48 @@ export class SshComponent implements OnInit {
     Cookie.set('rows', rows, 99, '/', document.domain);
 
 
-    let id = NavList.term.length - 1;
-    NavList.term[id].machine = 'localhost';
-    NavList.term[id].nick = 'localhost';
-    NavList.term[id].connected = true;
-    NavList.term[id].socket = socket;
-    NavList.term[id].edit = false;
-    NavList.term[id].closed = false;
-    NavList.term[id].term = new Terminal({
+    let id = NavList.List.length - 1;
+    NavList.List[id].nick = 'localhost';
+    NavList.List[id].connected = true;
+    NavList.List[id].edit = false;
+    NavList.List[id].closed = false;
+    NavList.List[id].type = "ssh";
+    NavList.List[id].Term = new Term;
+    NavList.List[id].Term.machine = 'localhost';
+    NavList.List[id].Term.socket = socket;
+    NavList.List[id].Term.term = new Terminal({
       cols: cols,
       rows: rows,
       useStyle: true,
       screenKeys: true,
     });
-    NavList.term.push(new Term());
-    for (let m in NavList.term) {
-      NavList.term[m].hide = true;
+    NavList.List.push(new View());
+    for (let m in NavList.List) {
+      NavList.List[m].hide = true;
     }
-    NavList.term[id].hide = false;
+    NavList.List[id].hide = false;
 
-    NavList.termActive = id;
+    NavList.Active = id;
 
 
     // TermStore.term[id]['term'].on('title', function (title) {
     //   document.title = title;
     // });
 
-    NavList.term[id].term.open(document.getElementById('term-' + id), true);
+    NavList.List[id].Term.term.open(document.getElementById('term-' + id), true);
 
-    NavList.term[id].term.write('\x1b[31mWelcome to Jumpserver!\x1b[m\r\n');
+    NavList.List[id].Term.term.write('\x1b[31mWelcome to Jumpserver!\x1b[m\r\n');
 
     socket.on('connect', function () {
       socket.emit('machine', uuid);
 
-      NavList.term[id].term.on('data', function (data) {
+      NavList.List[id].Term.term.on('data', function (data) {
         socket.emit('data', data);
       });
 
 
       socket.on('data', function (data) {
-        NavList.term[id].term.write(data);
+        NavList.List[id].Term.term.write(data);
       });
 
       socket.on('disconnect', function () {
@@ -103,10 +105,10 @@ export class SshComponent implements OnInit {
         if (row < 24) row = 24;
         if (cols == col && row == rows) {
         } else {
-          for (let tid in NavList.term) {
-            if (NavList.term[tid].connected) {
-              NavList.term[tid].socket.emit('resize', [col, row]);
-              NavList.term[tid].term.resize(col, row);
+          for (let tid in NavList.List) {
+            if (NavList.List[tid].connected) {
+              NavList.List[tid].Term.socket.emit('resize', [col, row]);
+              NavList.List[tid].Term.term.resize(col, row);
             }
           }
           Cookie.set('cols', String(col), 99, '/', document.domain);
@@ -118,14 +120,14 @@ export class SshComponent implements OnInit {
   }
 
   static TerminalDisconnect(i) {
-    NavList.term[i].connected = false;
-    NavList.term[i].socket.destroy();
-    NavList.term[i].term.write('\r\n\x1b[31mBye Bye!\x1b[m\r\n');
+    NavList.List[i].connected = false;
+    NavList.List[i].Term.socket.destroy();
+    NavList.List[i].Term.term.write('\r\n\x1b[31mBye Bye!\x1b[m\r\n');
   }
 
   static TerminalDisconnectAll() {
     alert("TerminalDisconnectAll");
-    for (let i in NavList.term) {
+    for (let i in NavList.List) {
       SshComponent.TerminalDisconnect(i);
       // TermStore.term[i]["connected"] = false;
       // TermStore.term[i]["socket"].destroy();

src/app/ControlPage/controlpage.component.ts

@@ -3,8 +3,8 @@ import {AppService, DataStore, User} from '../app.service';
 
 @Component({
   selector: 'app-controllpage',
-  templateUrl: './control.component.html',
-  styleUrls: ['./control.component.css'],
+  templateUrl: './controlpage.component.html',
+  styleUrls: ['./controlpage.component.css'],
   providers: [AppService]
 
 })

src/app/app-routing.module.ts

@@ -14,7 +14,7 @@ const appRoutes: Routes = [
   // { path: 'crisis-center', component: CrisisListComponent },
   {path: 'welcome', component: IndexPageComponent}, // <-- delete this line
   {path: 'login', component: LoginComponent},
-  {path: 'term', component: ControlPageComponent},
+  {path: 'control', component: ControlPageComponent},
   {path: '', redirectTo: '/welcome', pathMatch: 'full'},
   {path: '**', component: PageNotFoundComponent}
 ];