publish

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

@@ -9,13 +9,13 @@
 
 import {Component, OnInit} from '@angular/core';
 import {Logger} from 'angular2-logger/core';
-
 import {AppService, HttpService} from '../../app.service';
 import {SearchComponent} from '../search/search.component';
 import {DataStore} from '../../globals';
 import {version} from '../../../environments/environment';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 import * as layer from 'layui-layer/src/layer.js';
+import * as UUID from 'uuid-js/lib/uuid.js';
 import {ElementServerMenuComponent} from '../../elements/server-menu/server-menu.component';
 import {NavList, View} from '../control/control.component';
 
@@ -119,9 +119,9 @@ export class CleftbarComponent implements OnInit {
   Connect(host) {
     // console.log(host);
     let user: any;
+    let options = '';
     const that = this;
     if (host.system_users_granted.length > 1) {
-      let options = '';
       user = this.checkPriority(host.system_users_granted);
       if (user) {
         this.login(host, user);
@@ -162,8 +162,8 @@ export class CleftbarComponent implements OnInit {
   }
 
   login(host, user) {
+    const id = NavList.List.length - 1;
     if (user) {
-      const id = NavList.List.length - 1;
       NavList.List[id].nick = host.hostname;
       NavList.List[id].connected = true;
       NavList.List[id].edit = false;

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

-app-element-term, div {
+div, app-element-term, app-element-guacamole {
   height: 100%;
+}
+
+div {
   display: none;
 }
 

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

 <app-controlnav></app-controlnav>
-<!--<app-ssh></app-ssh>-->
-<!--<app-rdp></app-rdp>-->
 <div *ngFor="let m of NavList.List;let i=index"
      [ngClass]="{'active':i==NavList.Active}"
 >
   <app-element-term [host]="m.host"
                     [userid]="m.user.id"
                     [index]="i"
-                    [ngClass]="{'active':i==NavList.Active}"
                     *ngIf="m.type=='ssh'">
   </app-element-term>
+  <app-element-iframe [host]="m.host"
+                      [userid]="m.user.id"
+                      [index]="i"
+                      *ngIf="m.type=='rdp'">
+
+  </app-element-iframe>
 </div>

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

@@ -65,7 +65,6 @@ export class ControlComponent implements OnInit {
   }
 
   static TerminalDisconnect(id) {
-    console.log(id);
     if (NavList.List[id].connected) {
       NavList.List[id].connected = false;
       NavList.List[id].Term.write('\r\n\x1b[31mBye Bye!\x1b[m\r\n');
@@ -90,4 +89,7 @@ export class ControlComponent implements OnInit {
   ngOnInit() {
   }
 
+  // trackByFn(index: number, item: View) {
+  //   return item.id;
+  // }
 }

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

@@ -81,3 +81,19 @@
   padding: 5px 20px 4px 15px;
   height: 18px;
 }
+
+/*
+ *  scrollbar
+ */
+.tabs::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+  background-color: #F5F5F5;
+}
+
+.tabs::-webkit-scrollbar {
+  height: 1px;
+}
+
+.tabs::-webkit-scrollbar-thumb {
+  background-color: #19aa8d;
+}

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

@@ -42,12 +42,8 @@ export class ControlnavComponent implements OnInit {
     NavList.List[index].hide = false;
     NavList.Active = index;
     if (NavList.List[index].type === 'ssh') {
-      jQuery('app-ssh').show();
-      jQuery('app-rdp').hide();
       NavList.List[index].Term.focus();
     } else if (NavList.List[index].type === 'rdp') {
-      jQuery('app-ssh').hide();
-      jQuery('app-rdp').show();
     }
   }
 

src/app/app.module.ts

@@ -27,7 +27,7 @@ import {LoginComponent} from './BasicPage/login/login.component';
 import {ElementPopupComponent} from './elements/popup/popup.component';
 import {ElementRdpComponent} from './elements/rdp/rdp.component';
 import {ElementServerMenuComponent} from './elements/server-menu/server-menu.component';
-import {ElementGuacamoleComponent} from './elements/guacamole/guacamole.component';
+import {ElementIframeComponent} from './elements/iframe/iframe.component';
 // pages
 import {IleftbarComponent} from './IndexPage/ileftbar/ileftbar.component';
 import {SearchComponent, SearchFilter} from './ControlPage/search/search.component';
@@ -63,7 +63,7 @@ import {WindowsComponent} from './monitor-page/windows/windows.component';
     ElementInteractiveComponent,
     ElementRdpComponent,
     ElementServerMenuComponent,
-    ElementGuacamoleComponent,
+    ElementIframeComponent,
     LoginComponent,
     SearchComponent,
     SearchFilter,

src/app/elements/guacamole/guacamole.component.html

-<div>
-  <iframe src="{{target}}"></iframe>
-</div>

src/app/elements/guacamole/guacamole.component.ts

-import {Component, Input, OnInit} from '@angular/core';
-
-@Component({
-  selector: 'app-element-guacamole',
-  templateUrl: './guacamole.component.html',
-  styleUrls: ['./guacamole.component.scss']
-})
-export class ElementGuacamoleComponent implements OnInit {
-  @Input() target: string;
-
-  constructor() {
-  }
-
-  ngOnInit() {
-    this.target = '/guacamole/?asset_id=' + '&system_user_id=' + '';
-  }
-
-}

src/app/elements/iframe/iframe.component.html

+<iframe [src]="trust(target)"></iframe>

src/app/elements/iframe/iframe.component.scss

+iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background-color: white;
+}

src/app/elements/guacamole/guacamole.component.spec.ts → src/app/elements/iframe/iframe.component.spec.ts

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

src/app/elements/iframe/iframe.component.ts

+import {Component, Input, OnInit} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+import {NavList} from '../../ControlPage/control/control.component';
+
+@Component({
+  selector: 'app-element-iframe',
+  templateUrl: './iframe.component.html',
+  styleUrls: ['./iframe.component.scss']
+})
+export class ElementIframeComponent implements OnInit {
+  @Input() host: any;
+  @Input() userid: any;
+  @Input() index: number;
+  target: string;
+
+  constructor(private sanitizer: DomSanitizer) {
+  }
+
+  ngOnInit() {
+    this.target = 'http://ilz.me/';
+  }
+
+  trust(url) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+
+  Disconnect() {
+    NavList.List[this.index].connected = false;
+  }
+}

tools/build.sh

+#!/bin/bash
+
+set -ex
+
+npm run-script build
+
+rm -fr luna*
+mv dist luna
+tar czf luna.tar.gz luna
+md5 luna.tar.gz