feat: contextmenu, todo fix it full functional

package-lock.json

@@ -62,6 +62,14 @@
         "tslib": "1.7.1"
       }
     },
+    "@angular/cdk": {
+      "version": "2.0.0-beta.12",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-2.0.0-beta.12.tgz",
+      "integrity": "sha1-OiQ8tiuT9OA5EgunD5ANyeI1Yi4=",
+      "requires": {
+        "tslib": "1.7.1"
+      }
+    },
     "@angular/cli": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-1.5.2.tgz",
@@ -7059,6 +7067,11 @@
       "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-1.9.3.tgz",
       "integrity": "sha512-beoKQGJEFwdg0ctIpGb+vx4PTPkyqHrA5tBAEbnUn7ZlTjjfA6533QYGv3qVoKPDNkkHmLA3lRjWKxEMYepCdg=="
     },
+    "ngx-contextmenu": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/ngx-contextmenu/-/ngx-contextmenu-4.1.1.tgz",
+      "integrity": "sha512-XSmZxFUV1+sedMwRGvSvzZAAiOCuhb9jtzBNRjoVn5nDFx70IrjalIUiZUsWiDjj0TUMTNpAY8g9+glOdsjnCg=="
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",

package.json

@@ -13,6 +13,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^4.2.4",
+    "@angular/cdk": "^2.0.0-beta.12",
     "@angular/common": "^4.2.4",
     "@angular/compiler": "^4.2.4",
     "@angular/core": "^4.2.4",
@@ -44,6 +45,7 @@
     "ng2-charts": "^1.5.0",
     "ng2-cookies": "^1.0.12",
     "ngx-bootstrap": "^1.6.6",
+    "ngx-contextmenu": "^4.1.1",
     "node": "^9.3.0",
     "npm": "^5.6.0",
     "npm-font-open-sans": "^1.1.0",

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

@@ -9,7 +9,7 @@
       <input type="checkbox" id="hostgroup-{{i}}">
       <label for="hostgroup-{{i}}">{{hostGroup.name}}</label>
       <ul [ngClass]="{'insearch': q }">
-        <li *ngFor="let host of hostGroup.assets_granted | SearchFilter: q" (click)="Connect(host)">
+        <li *ngFor="let host of hostGroup.assets_granted | SearchFilter: q" (click)="Connect(host)" (contextmenu)="onRightClick($event)">
           <i class="fa" [ngClass]="'fa-'+(host.platform||'undefined').toLowerCase()" id="fa-{{i}}"></i>
           {{host.hostname}}
         </li>
@@ -20,3 +20,4 @@
 <div class="footer">
   Version <strong>{{version}}</strong>
 </div>
+<!--<app-element-server-menu></app-element-server-menu>-->

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

@@ -18,6 +18,7 @@ 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 {ElementServerMenuComponent} from '../../elements/server-menu/server-menu.component';
 
 
 export class HostGroup {
@@ -36,13 +37,16 @@ export class Host {
   selector: 'app-cleftbar',
   templateUrl: './cleftbar.component.html',
   styleUrls: ['./cleftbar.component.css'],
-  providers: [SshComponent, RdpComponent, SearchComponent]
+  providers: [SshComponent, RdpComponent, SearchComponent, ElementServerMenuComponent]
 })
 export class CleftbarComponent implements OnInit {
   DataStore = DataStore;
   HostGroups: Array<HostGroup>;
   version = version;
   q: string;
+  event: MouseEvent;
+  clientX = 0;
+  clientY = 0;
 
   static Reload() {
   }
@@ -82,7 +86,8 @@ export class CleftbarComponent implements OnInit {
               private _rdp: RdpComponent,
               private _http: HttpService,
               private _search: SearchComponent,
-              private _logger: Logger) {
+              private _logger: Logger,
+              private _menu: ElementServerMenuComponent) {
     this._logger.log('nav.ts:NavComponent');
     // this._appService.getnav()
   }
@@ -124,7 +129,7 @@ export class CleftbarComponent implements OnInit {
       if (user) {
         this.login(host, user);
       } else {
-        for (let u of host.system_users_granted) {
+        for (const u of host.system_users_granted) {
           options += '<option value="' + u.id + '">' + u.username + '</option>';
         }
         layer.open({
@@ -191,7 +196,7 @@ export class CleftbarComponent implements OnInit {
   checkPriority(sysUsers) {
     let priority: number = -1;
     let user: any;
-    for (let u of sysUsers) {
+    for (const u of sysUsers) {
       if (u.priority > priority) {
         user = u;
         priority = u.priority;
@@ -206,4 +211,10 @@ export class CleftbarComponent implements OnInit {
     this._search.Search(q);
   }
 
+  onRightClick(event: MouseEvent): void {
+    this.clientX = event.clientX;
+    this.clientY = event.clientY;
+    // console.log(this.clientX, this.clientY);
+    // this._menu.contextmenu(this.clientY, this.clientX);
+  }
 }

src/app/app-routing.module.ts

@@ -16,6 +16,7 @@ import {ReplayPageComponent} from './replay-page/replay-page.component';
 import {MonitorPageComponent} from './monitor-page/monitor-page.component';
 import {RdpPageComponent} from './rdp-page/rdp-page.component';
 import {TermPageComponent} from './term-page/term-page.component';
+import {ElementServerMenuComponent} from './elements/server-menu/server-menu.component';
 
 const appRoutes: Routes = [
   {path: 'users/login', component: LoginComponent},
@@ -23,6 +24,7 @@ const appRoutes: Routes = [
   {path: 'term/:token', component: TermPageComponent},
   {path: 'replay/:token', component: ReplayPageComponent},
   {path: 'monitor/:token', component: MonitorPageComponent},
+  {path: 'test', component: ElementServerMenuComponent},
   {path: '', component: ControlPageComponent},
   {path: '**', component: NotFoundComponent}
 ];

src/app/app.module.ts

@@ -46,6 +46,7 @@ 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';
+import {ElementServerMenuComponent} from './elements/server-menu/server-menu.component';
 
 @NgModule({
   imports: [
@@ -62,6 +63,7 @@ import {ElementRdpComponent} from './elements/rdp/rdp.component';
     ElementTermComponent,
     ElementInteractiveComponent,
     ElementRdpComponent,
+    ElementServerMenuComponent,
     LoginComponent,
     RdpComponent,
     SshComponent,

src/app/elements/server-menu/server-menu.component.html

+<div class="ES-menu" [ngStyle]="{'top':top,'left':left}">
+  <ul class="dropdown-content">
+    <li [ngClass]="m.type" *ngFor="let m of MenuList">
+      <a (click)="m.action" *ngIf="m.type!='line'">{{m.name}}</a>
+    </li>
+  </ul>
+</div>

src/app/elements/server-menu/server-menu.component.scss

+.ES-menu {
+  display: block;
+  width: 120px;
+  background-color: #2f2a2a;
+  position: absolute;
+}
+
+.ES-menu ul {
+  list-style-type: none;
+  line-height: 24px;
+}
+
+.ES-menu li {
+  display: inline-block;
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown:hover {
+  background-color: #2d2828;
+}
+
+.dropdown-content {
+  position: absolute;
+  background-color: black;
+  color: #c6bcbc;
+  padding: 4px 0;
+  z-index: 999;
+  float: none;
+  list-style: none;
+  line-height: normal;
+  direction: ltr;
+  width: auto;
+  top: auto;
+  left: 0px;
+  margin-left: 0px;
+  margin-top: 0px;
+  min-width: 150px;
+}
+
+.ES-menu:hover .dropdown-content {
+  display: block;
+}
+
+.ES-menu .dropdown-content li {
+  float: left;
+  display: flex;
+}
+
+.ES-menu .dropdown-content li a {
+  padding: 6px 14px 6px 14px;
+  white-space: nowrap;
+  font-family: 'Roboto', sans-serif;
+  font-size: 13px;
+  font-weight: 300;
+  position: relative;
+  text-decoration: none;
+  min-width: 150px;
+  line-height: normal;
+}
+
+.ES-menu .dropdown-content li a span {
+  float: right;
+}
+
+.dropdown-content li:hover {
+  background-color: #3a3333;
+  color: black;
+  width: 100%;
+}
+
+.dropdown-content li.disabled:hover {
+  background-color: black;
+}
+
+.dropdown-content li.disabled a {
+  color: #c5babc;
+}
+
+.dropdown-content li.disabled a:hover {
+  cursor: default;
+  color: #c5babc;
+}
+
+.ES-menu a {
+  color: #f0f0f1;
+  text-align: center;
+  text-decoration: none;
+  padding: 6px 15px 6px 15px;
+
+}
+
+.ES-menu a:hover {
+  color: #fff;
+  cursor: pointer
+}
+
+.ES-menu .line {
+  height: 1px;
+  width: 100%;
+  background-color: white;
+}

src/app/elements/server-menu/server-menu.component.spec.ts

+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ElementServerMenuComponent } from './server-menu.component';
+
+describe('ElementServerMenuComponent', () => {
+  let component: ElementServerMenuComponent;
+  let fixture: ComponentFixture<ElementServerMenuComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ElementServerMenuComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ElementServerMenuComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/elements/server-menu/server-menu.component.ts

+import {Component, OnInit} from '@angular/core';
+
+export class Menu {
+  name: string;
+  type: string;
+  action: any;
+}
+
+@Component({
+  selector: 'app-element-server-menu',
+  templateUrl: './server-menu.component.html',
+  styleUrls: ['./server-menu.component.scss']
+})
+export class ElementServerMenuComponent implements OnInit {
+  MenuList: Array<any>;
+  top: number;
+  left: number;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+    const m = new Menu();
+    const line = new Menu();
+    m.action = '';
+    m.name = 'test';
+    m.type = 'lll';
+    line.type = 'line';
+    this.MenuList = [m, m, line, m, m];
+  }
+
+  public contextmenu(top: number, left: number) {
+    this.top = top;
+    this.left = left;
+  }
+
+}