feat: search in json

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

@@ -59,7 +59,13 @@
   }
 }
 
-app-search {
+.search {
   border-left-width: 0;
-  border-bottom: gold 7px inset;
+  border-bottom: gold 2px inset;
+}
+
+.left-search {
+  padding-left: 14px;
+  width: 100%;
+  border: none;
 }

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

 <div id="sidebar">
-  <app-search></app-search>
+  <div class="search">
+    <input class="left-search" placeholder=" Search ..." maxlength="2048" name="q" autocomplete="off"
+           title="Search"
+           type="text" tabindex="1" spellcheck="false" autofocus [(ngModel)]="q" (keyup.enter)="Search(q)"
+           (ngModelChange)="modelChange($event)">
+  </div>
   <ul class="filetree">
-    <li *ngFor="let hostGroup of HostGroups; let i = index ">
+    <li *ngFor="let hostGroup of HostGroups ; let i = index ">
       <input type="checkbox" id="hostgroup-{{i}}">
       <label for="hostgroup-{{i}}">{{hostGroup.name}}</label>
       <ul>
-        <li *ngFor="let host of hostGroup.children" (click)="Connect(host)">{{host.name}}</li>
+        <li *ngFor="let host of hostGroup.children | SearchFilter: q" (click)="Connect(host)">{{host.name}}</li>
       </ul>
     </li>
   </ul>

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

@@ -12,7 +12,8 @@ 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 {RdpComponent} from '../control/rdp/rdp.component';
+import {SearchComponent} from "../search/search.component";
 
 declare let layer: any;
 declare let jQuery: any;
@@ -33,11 +34,12 @@ export class Host {
   selector: 'app-cleftbar',
   templateUrl: './cleftbar.component.html',
   styleUrls: ['./cleftbar.component.css'],
-  providers: [SshComponent, RdpComponent]
+  providers: [SshComponent, RdpComponent, SearchComponent]
 })
 export class CleftbarComponent implements OnInit {
   DataStore = DataStore;
   HostGroups: Array<HostGroup>;
+  q: string;
 
   static Reload() {
   }
@@ -52,6 +54,7 @@ export class CleftbarComponent implements OnInit {
               private _term: SshComponent,
               private _rdp: RdpComponent,
               private _http: HttpService,
+              private _search: SearchComponent,
               private _logger: Logger) {
     this._logger.log('nav.ts:NavComponent');
     // this._appService.getnav()
@@ -65,7 +68,6 @@ export class CleftbarComponent implements OnInit {
       });
   }
 
-
   Connect(host) {
     console.log(host);
     let username: string;
@@ -109,4 +111,8 @@ export class CleftbarComponent implements OnInit {
     }
   }
 
+  Search(q) {
+    this._search.Search(q)
+  }
+
 }

src/app/ControlPage/search/search.component.html

 <input class="left-search" placeholder=" Search ..." maxlength="2048" name="q" autocomplete="off"
        title="Search"
-       type="text" tabindex="1" spellcheck="false" autofocus [(ngModel)]="q" (keyup.enter)="search()"
+       type="text" tabindex="1" spellcheck="false" autofocus [(ngModel)]="q" (keyup.enter)="Search(q)"
        (ngModelChange)="modelChange($event)">

src/app/ControlPage/search/search.component.ts

@@ -5,10 +5,13 @@
  * @date     2017-11-07
  * @author   liuzheng <liuzheng712@gmail.com>
  */
-import {Component, OnChanges, Input} from '@angular/core';
+import {Component, OnChanges, Input, Pipe, PipeTransform} from '@angular/core';
+
 import {Logger} from 'angular2-logger/core';
 
-import {AppService, DataStore} from '../../app.service';
+import {AppService, DataStore, HttpService} from '../../app.service';
+
+export let Q: string = '';
 
 @Component({
   selector: 'app-search',
@@ -18,23 +21,52 @@ import {AppService, DataStore} from '../../app.service';
 export class SearchComponent implements OnChanges {
 
   @Input() input;
-  q: string;
-
+  searchrequest: any;
 
   constructor(private _appService: AppService,
+              private _http: HttpService,
               private _logger: Logger) {
     this._logger.log('LeftbarComponent.ts:SearchBar');
   }
 
   ngOnChanges(changes) {
-    this.q = changes.input.currentValue;
+    Q = changes.input.currentValue;
   }
 
   modelChange($event) {
-    this._appService.Search(this.q)
+    this.Search(Q)
   }
 
-  search() {
-    this._appService.Search(this.q)
+  public Search(q) {
+    if (this.searchrequest) {
+      this.searchrequest.unsubscribe();
+    }
+    this.searchrequest = this._http.get('/api/search?q=' + q)
+      .map(res => res.json())
+      .subscribe(
+        data => {
+          this._logger.log(data);
+        },
+        err => {
+          this._logger.error(err);
+        },
+        () => {
+        }
+      );
+    this._logger.log(q)
+  }
+}
+
+
+@Pipe({name: 'SearchFilter'})
+export class SearchFilter implements PipeTransform {
+  transform(value: any, input: string) {
+    if (input) {
+      input = input.toLowerCase();
+      return value.filter(function (el: any) {
+        return el.name.toLowerCase().indexOf(input) > -1;
+      })
+    }
+    return value;
   }
 }

src/app/app.module.ts

@@ -24,7 +24,7 @@ import {LoginComponent} from './BasicPage/login/login.component';
 import {FooterComponent} from './BasicPage/footer/footer.component';
 
 import {IleftbarComponent} from './IndexPage/ileftbar/ileftbar.component';
-import {SearchComponent} from './ControlPage/search/search.component';
+import {SearchComponent, SearchFilter} from './ControlPage/search/search.component';
 import {CleftbarComponent} from './ControlPage/cleftbar/cleftbar.component';
 import {ControlComponent} from './ControlPage/control/control.component';
 import {ControlnavComponent} from './ControlPage/control/controlnav/controlnav.component';
@@ -32,8 +32,8 @@ import {RdpComponent} from './ControlPage/control/rdp/rdp.component';
 import {SshComponent} from './ControlPage/control/ssh/ssh.component';
 import {ControlPageComponent} from './ControlPage/controlpage.component';
 import {IndexPageComponent} from './IndexPage/index-page.component';
-import { NotFoundComponent } from './BasicPage/not-found/not-found.component';
-import { PopupComponent } from './BasicPage/popup/popup.component';
+import {NotFoundComponent} from './BasicPage/not-found/not-found.component';
+import {PopupComponent} from './BasicPage/popup/popup.component';
 
 
 @NgModule({
@@ -52,6 +52,7 @@ import { PopupComponent } from './BasicPage/popup/popup.component';
     RdpComponent,
     SshComponent,
     SearchComponent,
+    SearchFilter,
     IleftbarComponent,
     CleftbarComponent,
     ControlComponent,

src/app/app.service.ts

@@ -179,7 +179,6 @@ export class HttpService {
 @Injectable()
 export class AppService implements OnInit {
   // user:User = user  ;
-  searchrequest: any;
 
   constructor(private _http: HttpService,
               private _router: Router,
@@ -264,24 +263,7 @@ export class AppService implements OnInit {
     this._http.post('/api/browser', JSON.stringify(Browser)).map(res => res.json()).subscribe()
   }
 
-  Search(q) {
-    if (this.searchrequest) {
-      this.searchrequest.unsubscribe();
-    }
-    this.searchrequest = this._http.get('/api/search?q=' + q)
-      .map(res => res.json())
-      .subscribe(
-        data => {
-          this._logger.log(data);
-        },
-        err => {
-          this._logger.error(err);
-        },
-        () => {
-        }
-      );
-    this._logger.log(q)
-  }
+
 
 //
 //