feat: use material2 and unuse the layer-layui

.angular-cli.json

@@ -20,7 +20,6 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "../node_modules/layui-layer/dist/theme/default/layer.css",
         "../node_modules/animate.css/animate.min.css",
         "../node_modules/xterm/dist/xterm.css",
         "sass/style.scss",

mock.py

@@ -134,6 +134,33 @@ def asset_groups_assets():
           "ip": "192.168.2.6",
           "port": 22,
           "platform": "Linux",
+          "system_users_granted": [
+            {
+              "id": 1,
+              "name": "web",
+              "username": "web",
+              "protocol": "ssh",
+              "auth_method": "P",
+              "auto_push": True,
+              "priority": 10
+            },
+            {
+              "id": 2,
+              "name": "liuzheng",
+              "username": "liuzheng",
+              "protocol": "ssh",
+              "auth_method": "P",
+              "auto_push": True,
+              "priority": 10
+
+            }],
+        },
+        {
+          "id": 44,
+          "hostname": "192.168.1.6",
+          "ip": "192.168.2.6",
+          "port": 22,
+          "platform": "Linux",
           "system_users_granted": [
             {
               "id": 1,

package-lock.json

@@ -107,9 +107,9 @@
       }
     },
     "@angular/cdk": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.1.0.tgz",
-      "integrity": "sha512-xDCVx65SvxoGDMpQhaQvfP7bZhQDuX65Uk+JntPlLTiwFr7v82a+71RnzOCzNKyaNXGoIgUGcrLZpozlyqNgFg==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-5.1.1.tgz",
+      "integrity": "sha512-V8kQmwf1PhtxiiE0cS1x9SW7/VFrJ7LcL9RqxUOMmJMl8kVR43dQBEeuVOOYJlGo9LAR5ctfemlJHwd9+PoHew==",
       "requires": {
         "tslib": "1.8.1"
       }

package.json

@@ -12,8 +12,8 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "5.2.0",
-    "@angular/cdk": "^5.1.0",
+    "@angular/animations": "^5.2.0",
+    "@angular/cdk": "^5.1.1",
     "@angular/common": "5.2.0",
     "@angular/compiler": "5.2.0",
     "@angular/core": "5.2.0",
@@ -39,7 +39,6 @@
     "jquery-slimscroll": "^1.3.8",
     "jquery-sparkline": "^2.4.0",
     "jvectormap": "1.2.2",
-    "layui-layer": "git+https://github.com/jumpserver/layer.git",
     "materialize-css": "^0.100.2",
     "metismenu": "^2.5.0",
     "mstsc.js": "^0.2.4",

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

@@ -7,7 +7,7 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 
-import {Component, OnInit} from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
 import {AppService, HttpService, LogService} from '../../app.service';
 import {SearchComponent} from '../search/search.component';
 import {DataStore} from '../../globals';
@@ -15,7 +15,10 @@ import {version} from '../../../environments/environment';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 import {ElementServerMenuComponent} from '../../elements/server-menu/server-menu.component';
 import {NavList, View} from '../control/control.component';
-import {DialogService} from '../../elements/dialog/dialog.service';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
+import {logger} from 'codelyzer/util/logger';
+import {selector} from 'rxjs/operator/publish';
+import {FormControl, Validators} from '@angular/forms';
 
 
 export interface HostGroup {
@@ -83,7 +86,7 @@ export class CleftbarComponent implements OnInit {
               private _search: SearchComponent,
               private _logger: LogService,
               private _menu: ElementServerMenuComponent,
-              private _dialog: DialogService) {
+              public _dialog: MatDialog) {
     this._logger.log('nav.ts:NavComponent');
     // this._appService.getnav()
   }
@@ -116,39 +119,26 @@ 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) {
       user = this.checkPriority(host.system_users_granted);
       if (user) {
         this.login(host, user);
       } else {
-        for (const u of host.system_users_granted) {
-          options += '<option value="' + u.id + '">' + u.username + '</option>';
-        }
-        this._dialog.open({
-          title: 'Please Choose a User',
-          scrollbar: false,
-          moveOut: true,
-          moveType: 1,
-          btn: ['确定', '取消'],
-          content: '<select id="selectuser">' + options + '</select>',
-          yes: function (index, layero) {
-            const userid = jQuery('#selectuser').val();
+        const dialogRef = this._dialog.open(CleftbarComponentDialog, {
+          height: '200px',
+          width: '300px',
+          data: {users: host.system_users_granted}
+        });
+
+        dialogRef.afterClosed().subscribe(result => {
+          if (result) {
             for (let i of host.system_users_granted) {
-              if (i.id.toString() === userid.toString()) {
+              if (i.id.toString() === result.toString()) {
                 user = i;
                 break;
               }
             }
-            that.login(host, user);
-            that._dialog.close(index);
-          },
-          btn2: function (index, layero) {
-          },
-          cancel: function () {
-            // 右上角关闭回调
-            // return false 开启该代码可禁止点击该按钮关闭
+            this.login(host, user);
           }
         });
       }
@@ -202,3 +192,34 @@ export class CleftbarComponent implements OnInit {
     // this._menu.contextmenu(this.clientY, this.clientX);
   }
 }
+
+
+@Component({
+  selector: 'app-cleftbar-dialog',
+  templateUrl: 'dialog.html',
+})
+export class CleftbarComponentDialog implements OnInit {
+  UserSelectControl = new FormControl('', [Validators.required]);
+  selected: any;
+
+  constructor(public dialogRef: MatDialogRef<CleftbarComponentDialog>,
+              @Inject(MAT_DIALOG_DATA) public data: any,
+              private _logger: LogService) {
+  }
+
+  ngOnInit() {
+    this.selected = this.data.users[0].id;
+    this.UserSelectControl.setValue(this.selected);
+    // this._logger.debug(this.UserSelectControl);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  compareFn: ((f1: any, f2: any) => boolean) | null = this.compareByValue;
+
+  compareByValue(f1: any, f2: any) {
+    return f1 && f2 && f1.value === f2.value;
+  }
+}

src/app/ControlPage/cleftbar/dialog.html

+<h1 mat-dialog-title>Found {{data.users.length}} Users</h1>
+
+<mat-form-field>
+  <mat-select [(value)]="selected"
+              [compareWith]="compareFn"
+              [formControl]="UserSelectControl"
+              placeholder="Choose a User" required>
+    <mat-option *ngFor="let u of data.users" value="{{u.id}}">{{u.username}}</mat-option>
+  </mat-select>
+  <mat-error *ngIf="UserSelectControl.hasError('required')">Please choose a User</mat-error>
+
+</mat-form-field>
+<div style="float: right">
+  <button mat-raised-button (click)="onNoClick()">Cancel</button>
+  <button mat-raised-button color="primary" [mat-dialog-close]="selected" cdkFocusInitial>Confirm</button>
+</div>

src/app/MaterialModule.component.ts

+import {NgModule} from '@angular/core';
+import {
+  MatAutocompleteModule,
+  MatButtonModule,
+  MatButtonToggleModule,
+  MatCardModule,
+  MatCheckboxModule,
+  MatChipsModule,
+  MatDatepickerModule,
+  MatDialogModule,
+  MatExpansionModule,
+  MatGridListModule,
+  MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatMenuModule,
+  MatNativeDateModule,
+  MatPaginatorModule,
+  MatProgressBarModule,
+  MatProgressSpinnerModule,
+  MatRadioModule,
+  MatRippleModule,
+  MatSelectModule,
+  MatSidenavModule,
+  MatSliderModule,
+  MatSlideToggleModule,
+  MatSnackBarModule,
+  MatSortModule,
+  MatTableModule,
+  MatTabsModule,
+  MatToolbarModule,
+  MatTooltipModule,
+  MatStepperModule,
+} from '@angular/material';
+import {CdkTableModule} from '@angular/cdk/table';
+
+@NgModule({
+  exports: [
+    CdkTableModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatStepperModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatSortModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+  ]
+})
+export class MaterialModule {
+}

src/app/app.component.css

+
 app-element-nav {
   font-family: 'Roboto', sans-serif;
   font-size: 13px;

src/app/app.module.ts

-/**
- * Created by liuzheng on 2017/8/30.
- */
-
 /**
  * app 模块
  *
@@ -11,13 +7,15 @@
  */
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
-import {FormsModule} from '@angular/forms'; // <-- NgModel lives here
+import {FormsModule, ReactiveFormsModule} from '@angular/forms'; // <-- NgModel lives here
 import {LoggerModule, NGXLogger, NgxLoggerLevel} from 'ngx-logger';
 import {HttpClientModule} from '@angular/common/http';
 
 import {AppRoutingModule} from './app-routing.module';
 
 import {AppComponent} from './app.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+
 // service
 import {AppService, HttpService, LogService, UUIDService} from './app.service';
 import {DialogService} from './elements/dialog/dialog.service';
@@ -35,7 +33,7 @@ import {ElementIframeComponent} from './elements/iframe/iframe.component';
 import {LoginComponent} from './BasicPage/login/login.component';
 import {IleftbarComponent} from './IndexPage/ileftbar/ileftbar.component';
 import {SearchComponent, SearchFilter} from './ControlPage/search/search.component';
-import {CleftbarComponent} from './ControlPage/cleftbar/cleftbar.component';
+import {CleftbarComponent, CleftbarComponentDialog} from './ControlPage/cleftbar/cleftbar.component';
 import {ControlComponent} from './ControlPage/control/control.component';
 import {ControlnavComponent} from './ControlPage/control/controlnav/controlnav.component';
 import {ControlPageComponent} from './ControlPage/controlpage.component';
@@ -51,18 +49,20 @@ 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 {NgProgressModule} from 'ngx-progressbar';
-import {TestPageComponent} from './test-page/test-page.component';
-import { BlankPageComponent } from './blank-page/blank-page.component';
-
-// import {NgxLayerModule} from 'ngx-layer';
+import {TestPageComponent, TestPageComponentDialog} from './test-page/test-page.component';
+import {BlankPageComponent} from './blank-page/blank-page.component';
+import {MaterialModule} from './MaterialModule.component';
 
 @NgModule({
   imports: [
     BrowserModule,
+    BrowserAnimationsModule,
     FormsModule,
     AppRoutingModule,
     NgProgressModule,
     HttpClientModule,
+    ReactiveFormsModule,
+    MaterialModule,
     LoggerModule.forRoot({serverLoggingUrl: '/api/logs', level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR}),
     // NgxLayerModule
   ],
@@ -80,7 +80,7 @@ import { BlankPageComponent } from './blank-page/blank-page.component';
     SearchComponent,
     SearchFilter,
     IleftbarComponent,
-    CleftbarComponent,
+    CleftbarComponent, CleftbarComponentDialog,
     ControlComponent,
     ControlnavComponent,
     ControlPageComponent,
@@ -95,9 +95,13 @@ import { BlankPageComponent } from './blank-page/blank-page.component';
     MonitorPageComponent,
     LinuxComponent,
     WindowsComponent,
-    TestPageComponent,
+    TestPageComponent, TestPageComponentDialog,
     BlankPageComponent,
   ],
+  entryComponents: [
+    CleftbarComponentDialog,
+    TestPageComponentDialog
+  ],
   bootstrap: [AppComponent],
   providers: [
     // {provide: LoggerConfig, useValue: {level: LoggerLevel.WARN}},

src/app/elements/dialog/dialog.service.ts

 import {Injectable} from '@angular/core';
-import * as layer from 'layui-layer/src/layer.js';
+// import * as layer from 'layui-layer/src/layer.js';
 
 @Injectable()
 export class DialogService {
@@ -8,7 +8,7 @@ export class DialogService {
   }
 
   open(options: any) {
-    layer.open(options);
+    // layer.open(options);
   }
 
   dialog() {
@@ -29,6 +29,6 @@ export class DialogService {
   }
 
   close(index: any) {
-    layer.close(index);
+    // layer.close(index);
   }
 }

src/app/elements/footer/footer.component.ts

 /**
  * footer
  *
- *
  * @date     2017-11-07
  * @author   liuzheng <liuzheng712@gmail.com>
  */

src/app/test-page/dialog.html

+<h2 mat-dialog-title>Delete all</h2>
+<mat-dialog-content>Are you sure?</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button mat-dialog-close>No</button>
+  <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
+  <button mat-button [mat-dialog-close]="true">Yes</button>
+</mat-dialog-actions>

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

-<p>
-  test-page works!
-</p>
-<!--<ngx-layer></ngx-layer>-->
+<mat-checkbox>Check me!</mat-checkbox>
+<button mat-raised-button (click)="openDialog()">Pick one</button>

src/app/test-page/test-page.component.ts

-import {Component, OnInit} from '@angular/core';
+import {Component, Inject, OnInit} from '@angular/core';
 import {DataStore} from '../globals';
 import {DialogService} from '../elements/dialog/dialog.service';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
 
 // import {Mats, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
 
@@ -10,13 +11,41 @@ import {DialogService} from '../elements/dialog/dialog.service';
   styleUrls: ['./test-page.component.scss']
 })
 export class TestPageComponent implements OnInit {
+  name: string;
 
-  constructor(private _dialog: DialogService) {
+  constructor(private _dialog: MatDialog) {
     DataStore.NavShow = false;
   }
 
   ngOnInit() {
-    this._dialog.alert();
+    this.name = 'ssss';
+  }
+
+  openDialog(): void {
+    const dialogRef = this._dialog.open(TestPageComponentDialog, {
+      width: '251px',
+      data: {name: this.name}
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed', result);
+      // this.animal = result;
+    });
+  }
+}
+
+
+@Component({
+  selector: 'app-test-page-dialog',
+  templateUrl: 'dialog.html',
+})
+export class TestPageComponentDialog {
+  constructor(public dialogRef: MatDialogRef<TestPageComponentDialog>,
+              @Inject(MAT_DIALOG_DATA) public data: any) {
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
   }
 
 }

src/sass/style.scss

@@ -66,3 +66,7 @@ $asset-path: '../static/imgs/inspinia';
     margin: 0;
   }
 }
+
+
+
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

src/styles.css

@@ -10,6 +10,7 @@
   font-size: large;
 }
 
+
 html,
 body {
   overflow-x: hidden; /* Prevent scroll on narrow devices */