update

.gitignore

@@ -41,3 +41,5 @@ yarn-error.log
 # System Files
 .DS_Store
 Thumbs.db
+
+src/assets/

src/app/BasicPage/nav.html

 <nav class="navbar navbar-toggleable-md fixed-top navbar-inverse bg-inverse" *ngIf="User.logined">
-      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <a class="navbar-brand" href="#">Navbar</a>
+  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
+          data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false"
+          aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+  <a class="navbar-brand" routerLink="">Navbar</a>
 
-      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
-        <ul class="navbar-nav mr-auto">
-          <li class="nav-item active">
-            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link" href="#">Link</a>
-          </li>
-          <li class="nav-item">
-            <a class="nav-link disabled" href="#">Disabled</a>
-          </li>
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-            <div class="dropdown-menu" aria-labelledby="dropdown01">
-              <a class="dropdown-item" href="#">Action</a>
-              <a class="dropdown-item" href="#">Another action</a>
-              <a class="dropdown-item" href="#">Something else here</a>
-            </div>
-          </li>
-        </ul>
-        <form class="form-inline my-2 my-lg-0">
-          <input class="form-control mr-sm-2" type="text" placeholder="Search">
-          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-        </form>
-      </div>
-    </nav>
+  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item active">
+        <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>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link disabled" href="#">Disabled</a>
+      </li>
+      <li class="nav-item dropdown">
+        <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown"
+           aria-haspopup="true" aria-expanded="false">Dropdown</a>
+        <div class="dropdown-menu" aria-labelledby="dropdown01">
+          <a class="dropdown-item" href="#">Action</a>
+          <a class="dropdown-item" href="#">Another action</a>
+          <a class="dropdown-item" href="#">Something else here</a>
+        </div>
+      </li>
+    </ul>
+    <form class="form-inline my-2 my-lg-0">
+      <input class="form-control mr-sm-2" type="text" placeholder="Search">
+      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+    </form>
+  </div>
+</nav>

src/app/TerminalPage/leftbar.ts

@@ -2,19 +2,20 @@ import {Component} from '@angular/core';
 import {Logger} from 'angular2-logger/core';
 
 import {AppService, DataStore} from '../app.service';
-
+import {TerminalComponent} from './terminal';
 
 //noinspection TypeScriptValidateTypes
 @Component({
   selector: 'term-leftbar',
   templateUrl: './leftbar.html',
   styleUrls: ['../../../node_modules/filetree-css/filetree.css', './leftbar.css'],
+  providers: [TerminalComponent]
 
 })
 
 
 export class TermLeftBar {
-  // DataStore = DataStore;
+  DataStore = DataStore;
   HostGroups = [
     {
       name: "msa-us",
@@ -28,13 +29,14 @@ export class TermLeftBar {
     }];
 
   constructor(private _appService: AppService,
+              private _term: TerminalComponent,
               private _logger: Logger) {
     this._logger.log('nav.ts:NavComponent');
     // this._appService.getnav()
   }
 
   TerminalConnect() {
-    this._appService.TerminalConnect("sss");
+    this._term.TerminalConnect("sss");
   }
 
 }

src/app/TerminalPage/terminal.css

@@ -31,9 +31,8 @@
   box-sizing: content-box;
 }
 
-#tabs ul li.active div {
-  height: 100%;
-  width: 100%;
+#tabs ul li.active {
+  box-sizing: border-box;
   border-bottom: 3px solid #7f3f98 !important;
 }
 
@@ -49,7 +48,6 @@
   cursor: default;
   width: 115px;
   height: 21px;
-  position: absolute;
 }
 
 #tabs ul li a.close {
@@ -94,7 +92,6 @@
 .terminal {
   border: #000 solid 5px;
   color: #f0f0f0;
-  background: #fffa90;
   box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
   white-space: nowrap;
   display: inline-block;

src/app/TerminalPage/terminal.html

@@ -3,11 +3,9 @@
     <li *ngFor="let m of DataStore.term;let i = index"
         [ngClass]="{'active':i==DataStore.termActive,'disconnected':!m.connected, 'hidden': m.closed != false}"
         id="termnav-{{i}}" (click)="setActive(i)">
-      <div>
-        <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"/>
-        <a class="close" (click)="close(i)">&times;</a>
-      </div>
+      <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"/>
+      <a class="close" (click)="close(i)">&times;</a>
     </li>
   </ul>
 </div>
@@ -18,6 +16,7 @@
   <div *ngFor="let m of DataStore.term;let i=index"
        [ngClass]="{'disconnected':!m.connected,'hidden': m.hide}" id="term-{{i}}">
   </div>
-  <div class="terminal"></div>
 </div>
-<span id="liuzheng" class="terminal" style="display: none;">liuzheng</span>
+<div class="terminal" style="position: absolute;top: -9999999px;left: -999999px;">
+  <span id="liuzheng" style="display: none;">liuzheng</span>
+</div>

src/app/TerminalPage/terminal.ts

 import {Component, OnInit} from '@angular/core';
 import {Logger} from 'angular2-logger/core';
+import * as io from 'socket.io-client';
+import {Cookie} from 'ng2-cookies/ng2-cookies';
 
 declare let jQuery: any;
+declare let Terminal: any;
 
-import {AppService, DataStore} from '../app.service';
+import {AppService, DataStore, Term} from '../app.service';
 
 
-//noinspection TypeScriptValidateTypes
 @Component({
   selector: 'term-body',
   templateUrl: './terminal.html',
-  styleUrls: ['./terminal.css']
+  styleUrls: ['./terminal.css'],
   // directives: [NgClass]
 })
 
 
-export class Terminal implements OnInit {
+export class TerminalComponent implements OnInit {
   DataStore = DataStore;
-  // portocol:string;
-  endpoint: string;
 
   constructor(private _appService: AppService,
               private _logger: Logger) {
@@ -39,7 +39,7 @@ export class Terminal implements OnInit {
   timer() {
     if (DataStore.termlist.length > 0) {
       for (let i in DataStore.termlist) {
-        this._appService.TerminalConnect(DataStore.termlist[i]);
+        this.TerminalConnect(DataStore.termlist[i]);
       }
       DataStore.termlist = []
     }
@@ -51,7 +51,7 @@ export class Terminal implements OnInit {
 
   close(i) {
     this._logger.debug(i);
-    AppService.TerminalDisconnect(i);
+    Terminal.TerminalDisconnect(i);
     DataStore.term[i].hide = true;
     DataStore.term[i].closed = true;
     DataStore.term[i].term.destroy();
@@ -89,4 +89,113 @@ export class Terminal implements OnInit {
   dblclick() {
     console.log(DataStore.term)
   }
+
+  TerminalConnect(uuid) {
+    let socket = io.connect();
+    let cols = '80';
+    let rows = '24';
+    if (Cookie.get('cols')) {
+      cols = Cookie.get('cols');
+    }
+    if (Cookie.get('rows')) {
+      rows = Cookie.get('rows');
+    }
+    Cookie.set('cols', cols, 99, '/', document.domain);
+    Cookie.set('rows', rows, 99, '/', document.domain);
+
+
+    let id = DataStore.term.length - 1;
+    DataStore.term[id].machine = 'localhost';
+    DataStore.term[id].nick = 'localhost';
+    DataStore.term[id].connected = true;
+    DataStore.term[id].socket = socket;
+    DataStore.term[id].edit = false;
+    DataStore.term[id].closed = false;
+    DataStore.term[id].term = new Terminal({
+      cols: cols,
+      rows: rows,
+      useStyle: true,
+      screenKeys: true
+    });
+    DataStore.term.push(new Term());
+    for (let m in DataStore.term) {
+      DataStore.term[m].hide = true;
+    }
+    DataStore.term[id].hide = false;
+
+    this._logger.log(DataStore.term[id + 1].closed);
+    DataStore.termActive = id;
+
+
+    // DataStore.term[id]['term'].on('title', function (title) {
+    //   document.title = title;
+    // });
+
+    DataStore.term[id].term.open(document.getElementById('term-' + id));
+
+    DataStore.term[id].term.write('\x1b[31mWelcome to Jumpserver!\x1b[m\r\n');
+
+    socket.on('connect', function () {
+      socket.emit('machine', uuid);
+
+      DataStore.term[id].term.on('data', function (data) {
+        socket.emit('data', data);
+      });
+
+
+      socket.on('data', function (data) {
+        DataStore.term[id].term.write(data);
+      });
+
+      socket.on('disconnect', function () {
+        this.TerminalDisconnect(id);
+        // DataStore.term[id]["term"].destroy();
+        // DataStore.term[id]["connected"] = false;
+      });
+
+      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 (Cookie.get('rows')) {
+          rows = parseInt(Cookie.get('rows'));
+        }
+        if (Cookie.get('cols')) {
+          cols = parseInt(Cookie.get('cols'));
+        }
+        if (col < 80) col = 80;
+        if (row < 24) row = 24;
+        if (cols == col && row == rows) {
+        } else {
+          for (let tid in DataStore.term) {
+            if (DataStore.term[tid].connected) {
+              DataStore.term[tid].socket.emit('resize', [col, row]);
+              DataStore.term[tid].term.resize(col, row);
+            }
+          }
+          Cookie.set('cols', String(col), 99, '/', document.domain);
+          Cookie.set('rows', String(row), 99, '/', document.domain);
+        }
+      };
+    });
+
+  }
+
+  static TerminalDisconnect(i) {
+    DataStore.term[i].connected = false;
+    DataStore.term[i].socket.destroy();
+    DataStore.term[i].term.write('\r\n\x1b[31mBye Bye!\x1b[m\r\n');
+  }
+
+  static TerminalDisconnectAll() {
+    alert("TerminalDisconnectAll");
+    for (let i in DataStore.term) {
+      Terminal.TerminalDisconnect(i);
+      // DataStore.term[i]["connected"] = false;
+      // DataStore.term[i]["socket"].destroy();
+      // DataStore.term[i]["term"].write('\r\n\x1b[31mBye Bye!\x1b[m\r\n');
+    }
+  }
 }

src/app/app.module.ts

@@ -22,7 +22,7 @@ import {LoginComponent} from './BasicPage/login.component';
 
 import {TermPage} from './TerminalPage/main';
 import {TermLeftBar} from './TerminalPage/leftbar';
-import {Terminal} from './TerminalPage/terminal';
+import {TerminalComponent} from './TerminalPage/terminal';
 
 
 @NgModule({
@@ -43,7 +43,7 @@ import {Terminal} from './TerminalPage/terminal';
 
     TermPage,
     TermLeftBar,
-    Terminal
+    TerminalComponent
     // HeroListComponent,
     // CrisisListComponent,
   ],

src/app/app.service.ts

@@ -8,7 +8,6 @@ import {Logger} from 'angular2-logger/core';
 import 'rxjs/add/operator/map';
 
 declare let jQuery: any;
-declare let Terminal: any;
 // declare var Clipboard: any;
 import * as io from 'socket.io-client';
 // declare let io: any;
@@ -22,8 +21,6 @@ import * as io from 'socket.io-client';
 //   }
 // }
 import {Router} from '@angular/router';
-import {logger} from "codelyzer/util/logger";
-import {log} from "util";
 
 
 // export class User {
@@ -158,9 +155,6 @@ export class AppService {
         DataStore.Nav = JSON.parse(data);
       });
       DataStore.socket.on('leftbar', function (data) {
-        if (data === 'changed') {
-          AppService.ReloadLeftbar();
-        }
       });
       // DataStore.socket.on('popup', function (data) {
       //   layer.msg(data);
@@ -298,9 +292,6 @@ export class AppService {
 //
 //   }
 //
-  static ReloadLeftbar() {
-    jQuery('#left-bar').fancytree('getTree').reload();
-  }
 
 //     setMyinfo(user:User) {
 //         // Update data store
@@ -408,114 +399,7 @@ export class AppService {
 //   //         });
 //   //
 //   // }
-  TerminalConnect(uuid) {
-    let socket = io.connect();
-    let cols = '80';
-    let rows = '24';
-    if (Cookie.get('cols')) {
-      cols = Cookie.get('cols');
-    }
-    if (Cookie.get('rows')) {
-      rows = Cookie.get('rows');
-    }
-    Cookie.set('cols', cols, 99, '/', document.domain);
-    Cookie.set('rows', rows, 99, '/', document.domain);
-
-
-    let id = DataStore.term.length - 1;
-    DataStore.term[id].machine = 'localhost';
-    DataStore.term[id].nick = 'localhost';
-    DataStore.term[id].connected = true;
-    DataStore.term[id].socket = socket;
-    DataStore.term[id].edit = false;
-    DataStore.term[id].closed = false;
-    DataStore.term[id].term = new Terminal({
-      cols: cols,
-      rows: rows,
-      useStyle: true,
-      screenKeys: true
-    });
-    DataStore.term.push(new Term());
-    for (let m in DataStore.term) {
-      DataStore.term[m].hide = true;
-    }
-    DataStore.term[id].hide = false;
-
-    this._logger.log(DataStore.term[id + 1].closed);
-    DataStore.termActive = id;
-
-
-    // DataStore.term[id]['term'].on('title', function (title) {
-    //   document.title = title;
-    // });
-
-    DataStore.term[id].term.open(document.getElementById('term-' + id));
-
-    DataStore.term[id].term.write('\x1b[31mWelcome to Jumpserver!\x1b[m\r\n');
-
-    socket.on('connect', function () {
-      socket.emit('machine', uuid);
-
-      DataStore.term[id].term.on('data', function (data) {
-        socket.emit('data', data);
-      });
-
-
-      socket.on('data', function (data) {
-        DataStore.term[id].term.write(data);
-      });
-
-      socket.on('disconnect', function () {
-        AppService.TerminalDisconnect(id);
-        // DataStore.term[id]["term"].destroy();
-        // DataStore.term[id]["connected"] = false;
-      });
-
-      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 (Cookie.get('rows')) {
-          rows = parseInt(Cookie.get('rows'));
-        }
-        if (Cookie.get('cols')) {
-          cols = parseInt(Cookie.get('cols'));
-        }
-        if (col < 80) col = 80;
-        if (row < 24) row = 24;
-        if (cols == col && row == rows) {
-        } else {
-          for (let tid in DataStore.term) {
-            if (DataStore.term[tid].connected) {
-              DataStore.term[tid].socket.emit('resize', [col, row]);
-              DataStore.term[tid].term.resize(col, row);
-            }
-          }
-          Cookie.set('cols', String(col), 99, '/', document.domain);
-          Cookie.set('rows', String(row), 99, '/', document.domain);
-        }
-      };
-    });
-
-  }
 
-  static TerminalDisconnect(i) {
-    DataStore.term[i].connected = false;
-    DataStore.term[i].socket.destroy();
-    DataStore.term[i].term.write('\r\n\x1b[31mBye Bye!\x1b[m\r\n');
-  }
-
-  static TerminalDisconnectAll() {
-    alert("TerminalDisconnectAll");
-    for (let i in DataStore.term) {
-      AppService.TerminalDisconnect(i);
-      // DataStore.term[i]["connected"] = false;
-      // DataStore.term[i]["socket"].destroy();
-      // DataStore.term[i]["term"].write('\r\n\x1b[31mBye Bye!\x1b[m\r\n');
-    }
-  }
 
 //
 //   Search(q) {

src/styles.css

@@ -17,7 +17,7 @@ body {
 }
 
 body {
-  padding-top: 70px;
+  padding-top: 56px;
 }
 
 footer {