feat: tree update

app.js

@@ -188,6 +188,7 @@ server.run = function (options) {
               "hostname": "192.168.1.6",
               "ip": "192.168.2.6",
               "port": 22,
+              "system": "windows",
               "system_users": [
                 {
                   "id": 1,
@@ -204,6 +205,7 @@ server.run = function (options) {
               "hostname": "testserver123",
               "ip": "123.57.183.135",
               "port": 8022,
+              "system": "linux",
               "system_users": [
                 {
                   "id": 1,

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

@@ -6,10 +6,29 @@
   font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 }
 
+.filetree {
+  padding-left: 20px;
+}
+
 .filetree input[type="checkbox"] {
   display: none;
 }
 
+.filetree input[type=checkbox] + label:before {
+  font-family: FontAwesome;
+  display: inline-block;
+}
+
+.filetree input[type=checkbox] + label:before {
+  content: "\f1b3";
+  letter-spacing: 10px;
+  width: 30px;
+}
+
+.filetree input[type=checkbox]:checked + label:before {
+  content: "\f085";
+}
+
 .filetree ul {
   height: 0;
   overflow: hidden;
@@ -26,40 +45,10 @@
 }
 
 .filetree label {
-  padding-left: 33px;
   line-height: 33px;
   display: inline-block;
 }
 
-/**
- * Icon
- * */
-.filetree label {
-  background-image: url('./icon.png');
-  background-repeat: no-repeat;
-}
-
-.filetree input[type="checkbox"] + label {
-  background-position: 0 0;
-  width: 100%;
-  height: 33px;
-}
-
-.filetree input[type="checkbox"]:checked + label {
-  background-position: 0 -33px;
-  width: 100%;
-  height: 30px;
-}
-
-@media screen and (-webkit-min-device-pixel-ratio: 1.0), screen and (min--moz-device-pixel-ratio: 1.0), screen and (-o-min-device-pixel-ratio: 100/100), screen and (min-device-pixel-ratio: 1.0), screen and (min-resolution: 1.0dppx) {
-  filetree label {
-    background-image: url('./icon.png');
-    -webkit-background-size: 33px 63px;
-    -moz-background-size: 33px 63px;
-    background-size: 33px 63px;
-  }
-}
-
 .search {
   border-left-width: 0;
   border-bottom: gold 2px inset;
@@ -71,4 +60,5 @@
   border: none;
   height: 28px;
   background: #2f2a2a;
+  color: #ffffff;
 }

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

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

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

@@ -13,7 +13,7 @@ import {Logger} from 'angular2-logger/core';
 import {AppService, DataStore, HttpService} from '../../app.service';
 import {SshComponent} from '../control/ssh/ssh.component';
 import {RdpComponent} from '../control/rdp/rdp.component';
-import {SearchComponent} from "../search/search.component";
+import {SearchComponent} from '../search/search.component';
 
 declare let layer: any;
 declare let jQuery: any;
@@ -47,31 +47,31 @@ export class CleftbarComponent implements OnInit {
   static Hide() {
     DataStore.leftbarshow = false;
     DataStore.Nav.map(function (value, i) {
-      for (var ii in value["children"]) {
-        if (DataStore.Nav[i]["children"][ii]["id"] === "HindLeftManager") {
-          DataStore.Nav[i]["children"][ii] = {
-            "id": "ShowLeftManager",
-            "click": "ShowLeft",
-            "name": "Show left manager"
+      for (var ii in value['children']) {
+        if (DataStore.Nav[i]['children'][ii]['id'] === 'HindLeftManager') {
+          DataStore.Nav[i]['children'][ii] = {
+            'id': 'ShowLeftManager',
+            'click': 'ShowLeft',
+            'name': 'Show left manager'
+          };
         }
       }
-      }
-    })
+    });
   }
 
   static Show() {
     DataStore.leftbarshow = true;
     DataStore.Nav.map(function (value, i) {
-      for (var ii in value["children"]) {
-        if (DataStore.Nav[i]["children"][ii]["id"] === "ShowLeftManager") {
-          DataStore.Nav[i]["children"][ii] = {
-            "id": "HindLeftManager",
-            "click": "HideLeft",
-            "name": "Hind left manager"
+      for (var ii in value['children']) {
+        if (DataStore.Nav[i]['children'][ii]['id'] === 'ShowLeftManager') {
+          DataStore.Nav[i]['children'][ii] = {
+            'id': 'HindLeftManager',
+            'click': 'HideLeft',
+            'name': 'Hind left manager'
+          };
         }
       }
-      }
-    })
+    });
   }
 
   constructor(private _appService: AppService,
@@ -96,47 +96,47 @@ export class CleftbarComponent implements OnInit {
     console.log(host);
     let username: string;
     if (host.system_users.length > 1) {
-      let options = "";
+      let options = '';
       for (let u of host.system_users) {
-        options += "<option value='" + u.username + "'>" + u.username + "</option>"
+        options += '<option value="' + u.username + '">' + u.username + '</option>';
       }
       layer.open({
         title: 'Please Choose a User',
         scrollbar: false,
         moveOut: true,
         moveType: 1,
-        btn: ["确定", "取消"],
-        content: "<select id='selectuser'>" + options + "</select>",
+        btn: ['确定', '取消'],
+        content: '<select id="selectuser">' + options + '</select>',
         yes: function (index, layero) {
-          username = jQuery("#selectuser").val();
+          username = jQuery('#selectuser').val();
           layer.close(index);
         },
         btn2: function (index, layero) {
         },
         cancel: function () {
-          //右上角关闭回调
-          //return false 开启该代码可禁止点击该按钮关闭
+          // 右上角关闭回调
+          // return false 开启该代码可禁止点击该按钮关闭
         }
       });
     } else if (host.system_users.length === 1) {
-      username = host.system_users[0].username
+      username = host.system_users[0].username;
     }
-    if (username === "") {
-      return
+    if (username === '') {
+      return;
     }
     if (host.type === 'ssh') {
-      jQuery("app-ssh").show();
-      jQuery("app-rdp").hide();
+      jQuery('app-ssh').show();
+      jQuery('app-rdp').hide();
       this._term.TerminalConnect(host, username);
     } else {
-      jQuery("app-ssh").hide();
-      jQuery("app-rdp").show();
+      jQuery('app-ssh').hide();
+      jQuery('app-rdp').show();
       this._rdp.Connect(host, username);
     }
   }
 
   Search(q) {
-    this._search.Search(q)
+    this._search.Search(q);
   }
 
 }