[Update] 修改设置页面

src/app/app.module.ts

@@ -16,7 +16,7 @@ import {PagesComponents} from './pages/pages.component';
 import {ElementComponents} from './elements/elements.component';
 import {PageMainComponent} from '@app/pages/main/main.component';
 import {PluginModules} from './plugins/plugins';
-import {ChangLanWarningDialogComponent, RDPSolutionDialogComponent, FontDialogComponent} from './elements/nav/nav.component';
+import {ChangLanWarningDialogComponent} from './elements/nav/nav.component';
 import {ElementSettingComponent} from '@app/elements/setting/setting.component';
 import {AssetTreeDialogComponent, ManualPasswordDialogComponent} from './elements/connect/connect.component';
 
@@ -40,8 +40,6 @@ import {AssetTreeDialogComponent, ManualPasswordDialogComponent} from './element
     AssetTreeDialogComponent,
     ManualPasswordDialogComponent,
     ChangLanWarningDialogComponent,
-    RDPSolutionDialogComponent,
-    FontDialogComponent,
     PageMainComponent,
     ElementSettingComponent,
   ],

src/app/elements/asset-tree/asset-tree.component.ts

@@ -3,7 +3,7 @@ import {MatDialog} from '@angular/material';
 import {BehaviorSubject} from 'rxjs';
 import {ActivatedRoute} from '@angular/router';
 
-import {AppService, HttpService, LogService, NavService, TreeFilterService} from '@app/services';
+import {AppService, HttpService, LogService, NavService, SettingService, TreeFilterService} from '@app/services';
 import {connectEvt, translate} from '@app/globals';
 import {TreeNode, ConnectEvt} from '@app/model';
 
@@ -43,6 +43,7 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy {
   rightClickSelectNode: any;
   hasLoginTo = false;
   treeFilterSubscription: any;
+  isLoadTreeAsync: boolean;
 
   constructor(private _appSvc: AppService,
               private _treeFilterSvc: TreeFilterService,
@@ -50,10 +51,11 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy {
               public _logger: LogService,
               private activatedRoute: ActivatedRoute,
               private _http: HttpService,
-              private _navSvc: NavService
+              private settingSvc: SettingService
   ) {}
 
   ngOnInit() {
+    this.isLoadTreeAsync = this.settingSvc.isLoadTreeAsync();
     this.initTree();
     document.addEventListener('click', this.hideRMenu.bind(this), false);
 
@@ -90,7 +92,7 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy {
       onClick: this.onAssetsNodeClick.bind(this),
       onRightClick: this.onRightClick.bind(this)
     };
-    if (this._navSvc.treeLoadAsync) {
+    if (this.isLoadTreeAsync) {
       setting['async'] = {
         enable: true,
         url: '/api/perms/v1/users/nodes/children-with-assets/tree/?cache_policy=1',
@@ -99,7 +101,7 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy {
       };
     }
 
-    this._http.getMyGrantedNodes(this._navSvc.treeLoadAsync, refresh).subscribe(resp => {
+    this._http.getMyGrantedNodes(this.isLoadTreeAsync, refresh).subscribe(resp => {
       const assetsTree = $.fn.zTree.init($('#assetsTree'), setting, resp);
       this.assetsTree = assetsTree;
       this.rootNodeAddDom(assetsTree, () => {
@@ -258,7 +260,7 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy {
   }
 
   filterAssets(keyword) {
-    if (this._navSvc.treeLoadAsync) {
+    if (this.isLoadTreeAsync) {
       this._logger.debug('Filter assets server');
       this.filterAssetsServer(keyword);
     } else {

src/app/elements/connect/connect.component.ts

 import {Component, OnInit, Output, Inject, OnDestroy, EventEmitter} from '@angular/core';
 import 'rxjs/add/operator/toPromise';
 import {connectEvt} from '@app/globals';
-import {AppService, HttpService, LogService, NavService} from '@app/services';
+import {AppService, HttpService, LogService, NavService, SettingService} from '@app/services';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
 import {FormControl, Validators} from '@angular/forms';
 import {ActivatedRoute} from '@angular/router';
@@ -21,7 +21,7 @@ export class ElementConnectComponent implements OnInit, OnDestroy {
   constructor(private _appSvc: AppService,
               public _dialog: MatDialog,
               public _logger: LogService,
-              private _navSrv: NavService,
+              private settingSvc: SettingService,
               private activatedRoute: ActivatedRoute,
               private _http: HttpService,
   ) {
@@ -117,7 +117,7 @@ export class ElementConnectComponent implements OnInit, OnDestroy {
   }
 
   manualSetUserAuthLoginIfNeed(user: SystemUser): Promise<SystemUser> {
-    if (!user || user.login_mode !== 'manual' || user.protocol !== 'rdp' || this._navSrv.skipAllManualPassword) {
+    if (!user || user.login_mode !== 'manual' || user.protocol !== 'rdp' || this.settingSvc.isSkipAllManualPassword()) {
       return Promise.resolve(user);
     }
     user = Object.assign({}, user);

src/app/elements/elements.component.ts

@@ -13,7 +13,6 @@ import {ElementDialogAlertComponent} from './dialog/dialog.service';
 import {ElementGuacamoleComponent} from './guacamole/guacamole.component';
 import {ElementSshTermComponent} from './ssh-term/ssh-term.component';
 import {ElementConnectComponent, AssetTreeDialogComponent, ManualPasswordDialogComponent} from './connect/connect.component';
-import {RDPSolutionDialogComponent, FontDialogComponent} from './nav/nav.component';
 import {ElementSftpComponent} from '@app/elements/sftp/sftp.component';
 import {ElementSettingComponent} from '@app/elements/setting/setting.component';
 
@@ -37,7 +36,5 @@ export const ElementComponents = [
   AssetTreeDialogComponent,
   ChangLanWarningDialogComponent,
   ManualPasswordDialogComponent,
-  RDPSolutionDialogComponent,
-  FontDialogComponent,
   ElementSettingComponent
 ];

src/app/elements/nav/fontDialog.html

-<h1 mat-dialog-title>{{"Set font"|trans}}</h1>
-
-<mat-form-field>
-  <input matInput placeholder='{{"Font size"|trans}}' name="fontSize" type="number" min="5" max="60" [(ngModel)]="fontSize">
-</mat-form-field>
-<div style="float: right">
-  <button mat-raised-button (click)="onNoClick()">{{"Cancel"|trans}}</button>
-  <button mat-raised-button color="primary" [disabled]="!isValid()" (click)="onSubmit()">{{"Confirm"|trans}}</button>
-</div>

src/app/elements/nav/nav.component.ts

@@ -110,34 +110,6 @@ export class ElementNavComponent implements OnInit {
         window.open('https://market.aliyun.com/products/53690006/cmgj026011.html?spm=5176.730005.0.0.cY2io1');
         break;
       }
-      case 'SetResolution': {
-        const dialog = this._dialog.open(
-          RDPSolutionDialogComponent,
-          {
-            height: '200px',
-            width: '300px'
-          });
-        dialog.afterClosed().subscribe(result => {
-          if (result) {
-            console.log(result);
-          }
-        });
-        break;
-      }
-      case 'SetFont': {
-        const dialog = this._dialog.open(
-          FontDialogComponent,
-          {
-            height: '200px',
-            width: '300px'
-          });
-        dialog.afterClosed().subscribe(result => {
-          if (result) {
-            console.log(result);
-          }
-        });
-        break;
-      }
       case 'English': {
         const dialog = this._dialog.open(
           ChangLanWarningDialogComponent,
@@ -178,16 +150,6 @@ export class ElementNavComponent implements OnInit {
         });
         break;
       }
-      case 'LoadTreeAsync': {
-        this._navSvc.treeLoadAsync = !this._navSvc.treeLoadAsync;
-        this.refreshNav();
-        break;
-      }
-      case 'SkipManualPassword': {
-        this._navSvc.skipAllManualPassword = !this._navSvc.skipAllManualPassword;
-        this.refreshNav();
-        break;
-      }
       default: {
         break;
       }
@@ -226,16 +188,6 @@ export class ElementNavComponent implements OnInit {
           name: 'Show left manager',
           hide: DataStore.showLeftBar
         },
-        {
-          id: 'RDPResolution',
-          click: 'SetResolution',
-          name: 'RDP Resolution'
-        },
-        {
-          id: 'Font',
-          click: 'SetFont',
-          name: 'Font'
-        },
         {
           id: 'SplitVertical',
           href: '',
@@ -259,30 +211,6 @@ export class ElementNavComponent implements OnInit {
           click: 'FullScreen',
           name: 'Full Screen'
         },
-        {
-          id: 'LoadTreeAsync',
-          click: 'LoadTreeAsync',
-          name: 'Load Tree Async',
-          hide: this._navSvc.treeLoadAsync
-        },
-        {
-          id: 'LoadTreeSync',
-          click: 'LoadTreeAsync',
-          name: 'Load Tree Sync',
-          hide: !this._navSvc.treeLoadAsync
-        },
-        {
-          id: 'SkipManualPassword',
-          click: 'SkipManualPassword',
-          name: 'Skip manual password',
-          hide: this._navSvc.skipAllManualPassword
-        },
-        {
-          id: 'ShowManualPassword',
-          click: 'SkipManualPassword',
-          name: 'Show manual password',
-          hide: !this._navSvc.skipAllManualPassword
-        }
       ]
     }, {
       id: 'Help',
@@ -359,7 +287,7 @@ export class ElementNavComponent implements OnInit {
     const dialog = this._dialog.open(
       ElementSettingComponent,
       {
-        height: '300px',
+        height: '370px',
         width: '400px',
       });
     dialog.afterClosed().subscribe(result => {
@@ -389,71 +317,3 @@ export class ChangLanWarningDialogComponent implements OnInit {
   }
 }
 
-@Component({
-  selector: 'elements-rdp-solution-dialog',
-  templateUrl: 'rdpSolutionDialog.html',
-  styles: ['.mat-form-field { width: 100%; }']
-})
-export class RDPSolutionDialogComponent implements OnInit {
-  solutions = ['Auto', '1024x768', '1366x768', '1400x900'];
-  solution: string;
-  cacheKey = 'rdpSolution';
-
-  constructor(public dialogRef: MatDialogRef<RDPSolutionDialogComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: any) {
-  }
-
-  ngOnInit() {
-    this.solution = localStorage.getItem(this.cacheKey) || 'Auto';
-  }
-
-  setSolution(value: string) {
-    localStorage.setItem(this.cacheKey, value);
-  }
-
-  onSubmit() {
-    this.setSolution(this.solution);
-    this.dialogRef.close();
-  }
-
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
-}
-
-@Component({
-  selector: 'elements-font-size-dialog',
-  templateUrl: 'fontDialog.html',
-  styles: ['.mat-form-field { width: 100%; }'],
-})
-export class FontDialogComponent implements OnInit {
-  fontSize: string;
-  solution: string;
-  cacheKey = 'fontSize';
-
-  constructor(public dialogRef: MatDialogRef<FontDialogComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: any) {
-  }
-
-  ngOnInit() {
-    this.fontSize = localStorage.getItem(this.cacheKey) || '14';
-  }
-
-  setFontSize(value: string) {
-    localStorage.setItem(this.cacheKey, value);
-  }
-
-  isValid() {
-    const size = parseInt(this.fontSize, 10);
-    return size > 5 && size < 60;
-  }
-
-  onSubmit() {
-    this.setFontSize(this.fontSize);
-    this.dialogRef.close();
-  }
-
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
-}

src/app/elements/nav/rdpSolutionDialog.html

-<h1 mat-dialog-title>{{"Set RDP solution"|trans}}</h1>
-
-<mat-form-field>
-  <mat-select [(value)]="solution"
-    placeholder="{{'Select a solution'|trans}}" >
-    <mat-option *ngFor="let s of solutions"  value="{{s}}">{{s}}</mat-option>
-  </mat-select>
-</mat-form-field>
-<div style="float: right">
-  <button mat-raised-button (click)="onNoClick()">{{"Cancel"|trans}}</button>
-  <button mat-raised-button color="primary" (click)="onSubmit()">{{"Confirm"|trans}}</button>
-</div>

src/app/elements/setting/setting.component.html

@@ -11,6 +11,21 @@
   <input [(value)]="setting.fontSize" matInput placeholder='{{"Font size"|trans}}' name="fontSize" type="number" min="5" max="60" >
 </mat-form-field>
 
+<mat-form-field>
+  <mat-select [(value)]="setting.isLoadTreeAsync"
+    placeholder="{{'Load tree async'|trans }}" >
+    <mat-option *ngFor="let s of boolChoices"  value="{{s.value}}">{{s.name|trans}}</mat-option>
+  </mat-select>
+</mat-form-field>
+
+<mat-form-field>
+  <mat-select [(value)]="setting.isSkipAllManualPassword"
+    placeholder="{{'Skip manual password'|trans }}" >
+    <mat-option *ngFor="let s of boolChoices"  value="{{s.value}}">{{s.name|trans}}</mat-option>
+  </mat-select>
+</mat-form-field>
+
+
 <div style="float: right">
   <button mat-raised-button (click)="onNoClick()">{{"Cancel"|trans}}</button>
   <button mat-raised-button color="primary" (click)="onSubmit()">{{"Confirm"|trans}}</button>

src/app/elements/setting/setting.component.ts

@@ -11,6 +11,7 @@ import {Setting} from '@app/model';
 })
 export class ElementSettingComponent implements OnInit {
   solutionsChoices = ['Auto', '1024x768', '1366x768', '1400x900'];
+  boolChoices = [{name: 'Yes', value: '1'}, {name: 'No', value: '0'}];
   setting: Setting;
 
   constructor(public dialogRef: MatDialogRef<ElementSettingComponent>,
@@ -20,10 +21,10 @@ export class ElementSettingComponent implements OnInit {
 
   ngOnInit() {
     this.setting = this.settingSrv.setting;
-    console.log(this.setting);
   }
 
   onSubmit() {
+    this.settingSrv.save();
     this.dialogRef.close();
   }
 

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

 import {Component, Input, OnInit, OnDestroy } from '@angular/core';
 import {Terminal} from 'xterm';
 import {View} from '@app/model';
-import {LogService, UUIDService} from '@app/services';
+import {LogService, SettingService, UUIDService} from '@app/services';
 import {Socket} from '@app/utils/socket';
 import {getWsSocket, translate} from '@app/globals';
 
@@ -23,7 +23,7 @@ export class ElementSshTermComponent implements OnInit, OnDestroy {
   ws: Socket;
   roomID: string;
 
-  constructor(private _uuid: UUIDService, private _logger: LogService) {
+  constructor(private _uuid: UUIDService, private _logger: LogService, private settingSvc: SettingService) {
   }
 
   ngOnInit() {
@@ -37,10 +37,10 @@ export class ElementSshTermComponent implements OnInit, OnDestroy {
   }
 
   newTerm() {
-    const fontSize = localStorage.getItem('fontSize') || '14';
+    const fontSize = this.settingSvc.setting.fontSize;
     this.term = new Terminal({
       fontFamily: 'monaco, Consolas, "Lucida Console", monospace',
-      fontSize: parseInt(fontSize, 10),
+      fontSize: fontSize,
       rightClickSelectsWord: true,
       theme: {
         background: '#1f1b1b'

src/app/model.ts

@@ -190,6 +190,6 @@ export class Monitor {
 export class Setting {
   rdpSolution: string = '1024x768';
   fontSize: number = 14;
-  isLoadTreeAsync: boolean = true;
-  isSkipAllManualPassword: boolean = false;
+  isLoadTreeAsync: string = '1';
+  isSkipAllManualPassword: string = '0';
 }

src/app/services/http.ts

@@ -2,13 +2,14 @@ import {Injectable} from '@angular/core';
 import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
 import {Browser, DataStore} from '@app/globals';
 import {GuacObjAddResp, SystemUser, TreeNode, User as _User} from '@app/model';
+import {SettingService} from './setting';
 
 
 @Injectable()
 export class HttpService {
   headers = new HttpHeaders();
 
-  constructor(private http: HttpClient) {
+  constructor(private http: HttpClient, private settingSrv: SettingService) {
   }
 
   get(url: string, options?: any) {
@@ -117,7 +118,7 @@ export class HttpService {
       systemUserPassword = btoa(systemUserPassword);
       body = body.set('username', systemUserUsername).set('password', systemUserPassword);
     }
-    const solution = localStorage.getItem('rdpSolution') || 'Auto';
+    const solution = this.settingSrv.setting.rdpSolution || 'Auto';
     if (solution !== 'Auto') {
       const width = solution.split('x')[0];
       const height = solution.split('x')[1];
@@ -146,7 +147,7 @@ export class HttpService {
       systemUserPassword = btoa(systemUserPassword);
       body = body.set('username', systemUserUsername).set('password', systemUserPassword);
     }
-    const solution = localStorage.getItem('rdpSolution') || 'Auto';
+    const solution = this.settingSrv.setting.rdpSolution || 'Auto';
     if (solution !== 'Auto') {
       const width = solution.split('x')[0];
       const height = solution.split('x')[1];
@@ -167,7 +168,7 @@ export class HttpService {
     let params = new HttpParams()
       .set('asset_token', assetToken)
       .set('token', token);
-    const solution = localStorage.getItem('rdpSolution') || 'Auto';
+    const solution = this.settingSrv.setting.rdpSolution || 'Auto';
     if (solution !== 'Auto') {
       const width = solution.split('x')[0];
       const height = solution.split('x')[1];

src/app/services/setting.ts

@@ -10,7 +10,11 @@ export class SettingService {
   constructor(private store: LocalStorageService) {
     const settingData = this.store.get(this.settingKey);
     if (settingData) {
-      this.setting = JSON.parse(settingData) as Setting;
+      try {
+        this.setting = JSON.parse(settingData) as Setting;
+      } catch (e) {
+        this.setting = new Setting();
+      }
     } else {
       this.setting = new Setting();
     }
@@ -21,11 +25,11 @@ export class SettingService {
     this.store.set(this.settingKey, settingData);
   }
 
-  isLoadTreeAsync() {
-    return this.setting.isLoadTreeAsync;
+  isLoadTreeAsync(): boolean {
+    return this.setting.isLoadTreeAsync === '1';
   }
 
-  isSkipAllManualPassword() {
-    return this.setting.isSkipAllManualPassword;
+  isSkipAllManualPassword(): boolean {
+    return this.setting.isSkipAllManualPassword === '1';
   }
 }

src/assets/i18n/zh.json

@@ -71,5 +71,8 @@
   "show manual password": "显示手动密码窗",
   "skip manual password": "跳过手动密码窗",
   "tab list": "窗口列表",
-  "open in new window": "新窗口打开"
+  "open in new window": "新窗口打开",
+  "setting": "设置",
+  "yes": "是",
+  "no": "否"
 }

src/sass/style.scss

@@ -6,7 +6,7 @@ $fa-font-path: '~font-awesome/fonts';
 // Todo: 去掉依赖
 @import '~bootstrap/scss/bootstrap';
 
-//@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
 //$FontPathOpenSans: '~npm-font-open-sans/fonts';
 //@import '~npm-font-open-sans/open-sans';
 //$roboto-font-path: '~roboto-fontface/fonts';