Merged in dev (pull request #26)

Dev

mock.py

@@ -108,7 +108,7 @@ def asset_groups_assets():
           "hostname": "192.168.1.6",
           "ip": "192.168.2.6",
           "port": 22,
-          "system": "linux",
+          "plantform": "Linux",
           "system_users_granted": [
             {
               "id": 1,
@@ -117,6 +117,14 @@ def asset_groups_assets():
               "protocol": "ssh",
               "auth_method": "P",
               "auto_push": True
+            },
+            {
+              "id": 2,
+              "name": "liuzheng",
+              "username": "liuzheng",
+              "protocol": "ssh",
+              "auth_method": "P",
+              "auto_push": True
             }
           ]
         },
@@ -125,7 +133,7 @@ def asset_groups_assets():
           "hostname": "windows server",
           "ip": "123.57.183.135",
           "port": 3389,
-          "system": "windows",
+          "plantform": "Windows",
           "assets_granted": [
             {
               "id": 1,

package-lock.json

@@ -6170,6 +6170,9 @@
         "graceful-fs": "4.1.11"
       }
     },
+    "layui-layer": {
+      "version": "git+https://github.com/jumpserver/layer.git#c568876741b64556df9916ed678a6106e1e82899"
+    },
     "lazy-cache": {
       "version": "0.2.7",
       "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-0.2.7.tgz",

src/app/ControlPage/cleftbar/cleftbar.component.css

@@ -34,7 +34,7 @@ label {
   overflow: hidden;
 }
 
-.filetree > li input:checked ~ ul {
+.filetree > li input:checked ~ ul , .filetree > li ul.insearch{
   height: auto;
 }
 
@@ -75,3 +75,11 @@ label {
 .fa.fa-undefined:before {
   content: "\f26c";
 }
+
+.fa.fa-Linux:before {
+  content: "\f17c";
+}
+
+.fa.fa-Windows:before {
+  content: "\f17a";
+}

src/app/ControlPage/cleftbar/cleftbar.component.html

@@ -8,9 +8,9 @@
     <li *ngFor="let hostGroup of HostGroups | SearchFilter: q; let i = index ">
       <input type="checkbox" id="hostgroup-{{i}}">
       <label for="hostgroup-{{i}}">{{hostGroup.name}}</label>
-      <ul>
+      <ul [ngClass]="{'insearch': q }">
         <li *ngFor="let host of hostGroup.assets_granted | SearchFilter: q" (click)="Connect(host)">
-          <i class="fa" [ngClass]="'fa-'+host.system" id="fa-{{i}}"></i>
+          <i class="fa" [ngClass]="'fa-'+host.plantform" id="fa-{{i}}"></i>
           {{host.hostname}}
         </li>
       </ul>

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

@@ -98,6 +98,7 @@ export class CleftbarComponent implements OnInit {
   Connect(host) {
     // console.log(host);
     let userid: string;
+    const that = this;
     if (host.system_users_granted.length > 1) {
       let options = '';
       for (let u of host.system_users_granted) {
@@ -112,6 +113,7 @@ export class CleftbarComponent implements OnInit {
         content: '<select id="selectuser">' + options + '</select>',
         yes: function (index, layero) {
           userid = jQuery('#selectuser').val();
+          that.login(host, userid);
           layer.close(index);
         },
         btn2: function (index, layero) {
@@ -123,15 +125,19 @@ export class CleftbarComponent implements OnInit {
       });
     } else if (host.system_users_granted.length === 1) {
       userid = host.system_users_granted[0].id;
+      this.login(host, userid);
     }
+  }
+
+  login(host, userid) {
     if (userid === '') {
       return;
     }
-    if (host.system === 'linux') {
+    if (host.plantform === 'Linux') {
       jQuery('app-ssh').show();
       jQuery('app-rdp').hide();
       this._term.TerminalConnect(host, userid);
-    } else if (host.system === 'windows') {
+    } else if (host.plantform === 'Windows') {
       jQuery('app-ssh').hide();
       jQuery('app-rdp').show();
       this._rdp.Connect(host, userid);

src/app/elements/nav/nav.component.html

 <div class="nav">
   <ul>
-    <li><a [routerLink]="['Index']"><img src="static/imgs/logo.png" height="26px"/></a>
+    <li><a [routerLink]="['']"><img src="static/imgs/logo.png" height="26px"/></a>
     </li>
     <li *ngFor="let v of DataStore.Nav" [ngClass]="{'dropdown': v.children}">
       <a>{{v.name}}</a>

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

@@ -2,7 +2,6 @@ import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
 import {ElementRef, Renderer2} from '@angular/core';
 import {term} from '../../globals';
 import {Terminal} from '../../globals';
-import * as jQuery from 'jquery/dist/jquery.min.js';
 
 @Component({
   selector: 'app-element-term',
@@ -21,8 +20,10 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   }
 
   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.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.col = 90;
+    term.row = 90;
     term.term = Terminal({
       cols: term.col,
       rows: term.row,
@@ -30,19 +31,19 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
       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);
-    };
+    // 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/replay-page/json/json.component.css

@@ -21,3 +21,7 @@
 #term .terminal div span {
   min-width: 12px;
 }
+
+app-element-term {
+  position: absolute;
+}

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

-<!--<button type="button" class="btn">-->
-<!--<i class="fa fa-stop" aria-hidden="true"></i>-->
-<!--</button>-->
-<!--<button type="button" class="btn">-->
-<!--<i class="fa fa-step-backward" aria-hidden="true"></i>-->
-<!--</button>-->
-<!--<button type="button" class="btn">-->
-<!--<i class="fa fa-backward" aria-hidden="true"></i>-->
-<!--</button>-->
-<button type="button" class="btn" (click)="pause()">
-  <i class="fa" aria-hidden="true" [ngClass]="{'fa-play':!toggle,'fa-pause': toggle}"></i>
-</button>
-<!--<button type="button" class="btn">-->
-<!--<i class="fa fa-forward" aria-hidden="true"></i>-->
-<!--</button>-->
-<!--<button type="button" class="btn">-->
-<!--<i class="fa fa-step-forward" aria-hidden="true"></i>-->
-<!--</button>-->
-<!--<button type="button" class="btn">-->
-<!--<i class="fa fa-expand" aria-hidden="true"></i>-->
-<!--</button>-->
-<!--<button type="button" class="btn">-->
-<!--<i class="fa fa-compress" aria-hidden="true"></i>-->
-<!--</button>-->
-<button type="button" class="btn" (click)="restart()">
-  <i class="fa fa-repeat" aria-hidden="true"></i>
-</button>
+<div>
 
-<input id="scrubber" type="range" [(ngModel)]="setPercent" min=0 max=100 (mousedown)="stop()" (mouseup)="rununil()"/>
+  <!--<button type="button" class="btn">-->
+  <!--<i class="fa fa-stop" aria-hidden="true"></i>-->
+  <!--</button>-->
+  <!--<button type="button" class="btn">-->
+  <!--<i class="fa fa-step-backward" aria-hidden="true"></i>-->
+  <!--</button>-->
+  <!--<button type="button" class="btn">-->
+  <!--<i class="fa fa-backward" aria-hidden="true"></i>-->
+  <!--</button>-->
+  <button type="button" class="btn" (click)="pause()">
+    <i class="fa" aria-hidden="true" [ngClass]="{'fa-play':!toggle,'fa-pause': toggle}"></i>
+  </button>
+  <!--<button type="button" class="btn">-->
+  <!--<i class="fa fa-forward" aria-hidden="true"></i>-->
+  <!--</button>-->
+  <!--<button type="button" class="btn">-->
+  <!--<i class="fa fa-step-forward" aria-hidden="true"></i>-->
+  <!--</button>-->
+  <!--<button type="button" class="btn">-->
+  <!--<i class="fa fa-expand" aria-hidden="true"></i>-->
+  <!--</button>-->
+  <!--<button type="button" class="btn">-->
+  <!--<i class="fa fa-compress" aria-hidden="true"></i>-->
+  <!--</button>-->
+  <button type="button" class="btn" (click)="restart()">
+    <i class="fa fa-repeat" aria-hidden="true"></i>
+  </button>
 
-{{time | utcDate | date:"HH:mm:ss"}}
+  <input id="scrubber" type="range" [(ngModel)]="setPercent" min=0 max=100 (mousedown)="stop()" (mouseup)="rununil()"/>
+
+  {{time | utcDate | date:"HH:mm:ss"}}
+</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 {AfterViewInit, Component, OnInit} from '@angular/core';
 import {Video} from '../../globals';
 import {term} from '../../globals';
 
@@ -9,7 +9,7 @@ import * as jQuery from 'jquery/dist/jquery.min.js';
   templateUrl: './json.component.html',
   styleUrls: ['./json.component.css']
 })
-export class JsonComponent implements OnInit {
+export class JsonComponent implements OnInit, AfterViewInit {
   speed = 1;
   setPercent = 0;
   toggle = false;
@@ -24,6 +24,9 @@ export class JsonComponent implements OnInit {
   }
 
   ngOnInit() {
+  }
+
+  ngAfterViewInit() {
     this.restart();
   }
 

src/app/replay-page/replay-page.component.html

-<app-mp4 *ngIf='Video.type=="mp4"'></app-mp4>
-<app-json *ngIf='Video.type=="json"'></app-json>
+<app-json></app-json>