fixed discovery setting

src/packages/discovery/component/setting/setting.component.html

@@ -13,21 +13,21 @@
 
       <div class="ui-g" style="width:250px;margin-bottom:10px">
         <div class="ui-g-12">
-          <p-checkbox name="group1" value="host" label="Host" [(ngModel)]="selectedCities" inputId="la"></p-checkbox>
+          <p-checkbox name="group1" value="host" label="Host"  inputId="la" [(ngModel)]="hostChecked" (onChange)="handleHostCheckChange($event)"></p-checkbox>
         </div>
       </div>
 
       <div class="ui-g form-group">
         <div class="ui-g-12 ui-md-4">
           <span class="ui-float-label">
-            <input id="float-input" type="text" size="30" pInputText> 
+            <input id="float-input" type="text" size="30" pInputText [(ngModel)]="startIP"> 
             <label for="float-input">Start Ip</label>
         </span>
   
         </div>
         <div class="ui-g-12 ui-md-4">
           <span class="ui-float-label">
-            <input id="float-input" type="text" size="30" pInputText> 
+            <input id="float-input" type="text" size="30" pInputText [(ngModel)]="endIP"> 
             <label for="float-input">End Ip</label>
         </span>
         </div>
@@ -37,21 +37,26 @@
      
       <div class="ui-g" style="width:250px;margin-bottom:10px">
           <div class="ui-g-12">
-            <p-checkbox name="group1" value="port" label="Port" [(ngModel)]="selectedCities" inputId="la"></p-checkbox>
+            <p-checkbox name="group1" value="port" label="Port" [(ngModel)]="portChecked" inputId="la" (onChange)="handlePortCheckChange($event)"></p-checkbox>
           </div>
+          TCP &nbsp;
+          <p-inputSwitch [(ngModel)]="tcpChecked"></p-inputSwitch>
+          UDP &nbsp;
+          <p-inputSwitch [(ngModel)]="udpChecked"></p-inputSwitch>
+
         </div>
 
         <div class="ui-g form-group">
           <div class="ui-g-12 ui-md-4">
               <span class="ui-float-label">
-                  <input id="float-input" type="text" size="30" pInputText> 
+                  <input id="float-input" type="text" size="30" pInputText  [(ngModel)]="startPort"> 
                   <label for="float-input">Start Port</label>
               </span>
           </div>
 
           <div class="ui-g-12 ui-md-4">
               <span class="ui-float-label">
-                  <input id="float-input" type="text" size="30" pInputText> 
+                  <input id="float-input" type="text" size="30" pInputText [(ngModel)]="endPort"> 
                   <label for="float-input">End Port</label>
               </span>
           </div>
@@ -63,19 +68,25 @@
               Cars
             </p-header>
           </p-listbox> -->
+          <div>
+              <div class="ui-g-12">
+                  <p-checkbox name="group1" value="service" label="Service" [(ngModel)]="serviceChecked" inputId="la" (onChange)="handleServiceCheckChange($event)"></p-checkbox>
+                </div>
 
-          <p-pickList [source]="serviceItems" [target]="targetCars" sourceHeader="Available" targetHeader="Selected" [responsive]="true"
+          
-            filterBy="brand" dragdrop="true" dragdropScope="cars" sourceFilterPlaceholder="Search by brand" targetFilterPlaceholder="Search by brand"
+          <p-pickList [source]="serviceItems" [target]="includeServices" sourceHeader="Available" targetHeader="Selected" [responsive]="true"
+            filterBy="brand" dragdrop="true" dragdropScope="services" sourceFilterPlaceholder="Search by brand" targetFilterPlaceholder="Search by brand"
             [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}">
-            <ng-template let-car pTemplate="item">
+            <ng-template let-service pTemplate="item">
               <div class="ui-helper-clearfix">
-                <!-- <img src="assets/showcase/images/demo/car/{{car.brand}}.png" style="display:inline-block;margin:2px 0 2px 2px" width="48"> -->
+                <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{service.name}}</div>
-                <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.name}}</div>
               </div>
             </ng-template>
           </p-pickList>
 
         </div>
+
+    </div>
     <p-footer>
         <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary" (click)="closeDialog()"></button>
         <button pButton type="button" label="Start" icon="fa-check" (click)="discovery()"></button>

src/packages/discovery/component/setting/setting.component.ts

@@ -51,12 +51,12 @@ export class SettingComponent implements OnInit, AfterContentInit {
   startPort;
   endPort;
   // private settingForm: FormGroup;
-  hostChecked = true;
+  hostChecked = ['host'];
-  portChecked = true;
+  portChecked = [];
-  serviceChecked = true;
+  serviceChecked = [];
   tcpChecked = true;
   udpChecked = true;
-  includeServices = null;
+  includeServices = [];
 
   serviceItems = [
     { name: 'SSH' },
@@ -75,22 +75,12 @@ export class SettingComponent implements OnInit, AfterContentInit {
     { name: 'NBSS' },
   ];
 
-  targetCars = [];
-
-  cities = [
-    {name: 'New York', code: 'NY'},
-    {name: 'Rome', code: 'RM'},
-    {name: 'London', code: 'LDN'},
-    {name: 'Istanbul', code: 'IST'},
-    {name: 'Paris', code: 'PRS'}
-];
 
   treeNodes = [];
   zones: Map<string, Zone> = null;
 
   checkedSet = new Set();
 
-//   treeNodes: TreeNode[] = [];
   testObj: any[] = testDiscovery;
   selectedDiscoveryResult: TreeNode[];
 
@@ -180,63 +170,73 @@ export class SettingComponent implements OnInit, AfterContentInit {
     this.endPort = '1024';
   }
 
-//   handleHostCheckChange(e: MatCheckboxChange) {
+  handleHostCheckChange(e: any) {
-//     this.hostChecked = true;
+    // console.log(e);
-//     e.source.checked = true;
+    this.hostChecked = ['host'];
-//   }
+    // e.source.checked = true;
+  }
 
-//   handlePortCheckChange(e: MatCheckboxChange) {
+  handlePortCheckChange(e: any) {
-//     this.serviceChecked = false;
+    console.log(e);
-//   }
+    this.serviceChecked = [];
+    // this.serviceChecked = false;
+  }
 
-//   handleServiceCheckChange(e: MatCheckboxChange) {
+  handleServiceCheckChange(e: any) {
-//     if (e.checked) {
+    console.log(e);
-//       this.portChecked = true;
+    if (e) {
-//     }
+      this.portChecked = ['port'];
-//   }
+    }
+  }
 
   handleServiceChange(list: any) {
     this.includeServices = list;
   }
 
   discovery() {
-    // let discoveryPort: DiscoveryPort = null;
-    // let discoveryService: DiscoveryService = null;
 
-    // if (this.serviceChecked) {
+    console.log(this.startIP);
-    //   const services = new Array();
-    //   for (const service of this.includeServices) {
-    //     services.push(service.name);
-    //   }
-    //   discoveryService = {
-    //     includeServices: services,
-    //   };
-    // }
-    // if (this.portChecked) {
-    //   discoveryPort = {
-    //     firstScanRange: this.startPort,
-    //     lastScanRange: this.endPort,
-    //     includeTCP: this.tcpChecked,
-    //     includeUDP: this.udpChecked,
-    //     excludePorts: null,
-    //     discoveryService: discoveryService
-    //   };
-    // }
-    // const discoveryZone: DiscoveryZone = {
-    //   discoveryHost: {
-    //     firstScanRange: this.startIP,
-    //     lastScanRange: this.endIP,
-    //     discoveryPort: discoveryPort,
-    //   },
-    // };
 
-    // console.log(discoveryZone);
+    console.log(this.startPort);
+    console.log(this.endPort);
+
+    let discoveryPort: DiscoveryPort = null;
+    let discoveryService: DiscoveryService = null;
+
+    if (this.serviceChecked.length > 0) {
+      const services = new Array();
+      for (const service of this.includeServices) {
+        services.push(service.name);
+      }
+      discoveryService = {
+        includeServices: services,
+      };
+    }
+    if (this.portChecked.length > 0) {
+      discoveryPort = {
+        firstScanRange: this.startPort,
+        lastScanRange: this.endPort,
+        includeTCP: this.tcpChecked,
+        includeUDP: this.udpChecked,
+        excludePorts: null,
+        discoveryService: discoveryService
+      };
+    }
+    const discoveryZone: DiscoveryZone = {
+      discoveryHost: {
+        firstScanRange: this.startIP,
+        lastScanRange: this.endIP,
+        discoveryPort: discoveryPort,
+      },
+    };
+
+    console.log(discoveryZone);
 
     // console.log('start discovery - ' + this.probe.probeKey);
     // this.discoverstore.dispatch(new DiscoverStore.DiscoverZone(
     //   { probeID: this.probe.probeKey, discoveryZone: discoveryZone }));
 
-    this.started = true;
+    // this.started = true;
   }
 
   checkDiscoveryResult(node) {