ing discovery

src/app/pages/home/home-page.component.html

@@ -1 +1,8 @@
 <p>home works</p>
+
+
+<p-dialog header="Discovery" [style]="{width: '700px'}" [(visible)]="display">
+    <of-discovery-setting></of-discovery-setting>
+</p-dialog>
+
+<button type="text" (click)="showDialog()" pButton icon="fa-external-link-square" label="Show"></button>

src/app/pages/home/home-page.component.ts

@@ -1,4 +1,7 @@
 import { Component, OnInit } from '@angular/core';
+import {DialogModule} from 'primeng/dialog';
+import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
+
 
 @Component({
   selector: 'of-pages-home',
@@ -6,9 +9,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class HomePageComponent implements OnInit {
 
+  display = false;
+
   constructor() { }
 
   ngOnInit() {
   }
 
+
+
+    showDialog() {
+        this.display = true;
+    }
+
 }

src/app/pages/home/home-page.module.ts

@@ -3,11 +3,19 @@ import { CommonModule } from '@angular/common';
 
 import { HomePageComponent } from './home-page.component';
 import { HomePageRoutingModule } from './home-page-routing.module';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
 
+import { SettingComponent as DiscoverySettingComponent } from 'packages/discovery/component/setting/setting.component';
+import { DiscoveryModule } from 'packages/discovery/discovery.module';
 @NgModule({
   imports: [
     CommonModule,
     HomePageRoutingModule,
+    PrimeNGModules,
+    DiscoveryModule
+  ],
+  entryComponents: [
+    DiscoverySettingComponent
   ],
   declarations: [HomePageComponent]
 })

src/packages/commons/prime-ng/prime-ng.module.ts

@@ -66,6 +66,8 @@ import { ToolbarModule } from 'primeng/primeng';
 import { TooltipModule } from 'primeng/primeng';
 import { TreeModule } from 'primeng/primeng';
 import { TreeTableModule } from 'primeng/primeng';
+import {CardModule} from 'primeng/card';
+
 
 const PRIME_NG_MODULES: any[] = [
   AccordionModule,
@@ -134,7 +136,8 @@ const PRIME_NG_MODULES: any[] = [
   ToolbarModule,
   TooltipModule,
   TreeModule,
-  TreeTableModule
+  TreeTableModule,
+  CardModule
 ];
 
 @NgModule({

src/packages/discovery/component/index.ts

@@ -1,5 +1,5 @@
-// import { SettingComponent } from './setting/setting.component';
+import { SettingComponent } from './setting/setting.component';
 
-// export const COMPONENTS = [
+export const COMPONENTS = [
-//   SettingComponent,
+  SettingComponent,
-// ];
+];

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

@@ -1,85 +1,92 @@
 <div *ngIf="!started">
 
-  <h2 mat-dialog-title>Discovery Setting</h2>
+  <!-- <mat-dialog-actions fxLayoutAlign="end">
-
-  <mat-dialog-content>
-
-    <mat-card>
-      <mat-card-header>
-        <mat-card-title>Zone</mat-card-title>
-        <mat-card-subtitle>{{cidr}}</mat-card-subtitle>
-      </mat-card-header>
-      <mat-card-content>
-        <!-- <form  (ngSubmit)="discovery()"> -->
-        <div>
-          <div>
-            <mat-checkbox [checked]="true" [(ngModel)]="hostChecked" (change)="handleHostCheckChange($event)">Host</mat-checkbox>
-          </div>
-          <div>
-            <mat-form-field *ngIf="hostChecked">
-              <input matInput placeholder="Start IP" type="string" [(ngModel)]="startIP">
-            </mat-form-field>
-            <mat-form-field *ngIf="hostChecked">
-              <input matInput placeholder="End IP" type="string" [(ngModel)]="endIP">
-            </mat-form-field>
-          </div>
-        </div>
-        <div>
-          <div>
-            <mat-checkbox [(ngModel)]="portChecked" (change)="handlePortCheckChange($event)">Port</mat-checkbox>
-          </div>
-          <div>
-            <div *ngIf="portChecked">
-                <mat-slide-toggle [checked]="true" [(ngModel)]="tcpChecked">TCP</mat-slide-toggle>
-                <mat-slide-toggle [checked]="true" [(ngModel)]="udpChecked">UDP</mat-slide-toggle>
-            </div>
-            <mat-form-field *ngIf="portChecked">
-              <input matInput placeholder="Start Port" type="number" [(ngModel)]="startPort">
-            </mat-form-field>
-            <mat-form-field *ngIf="portChecked">
-              <input matInput placeholder="End Port" type="number" [(ngModel)]="endPort">
-            </mat-form-field>
-          </div>
-        </div>
-        <div>
-          <div>
-            <mat-checkbox [(ngModel)]="serviceChecked" (change)="handleServiceCheckChange($event)">Service</mat-checkbox>
-          </div>
-          <div>
-            <of-input-chip *ngIf="serviceChecked" [unselectedItems]="serviceItems" (change)="handleServiceChange($event)"></of-input-chip>
-          </div>
-        </div>
-        <!-- </form> -->
-      </mat-card-content>
-    </mat-card>
-  </mat-dialog-content>
-
-
-  <mat-dialog-actions fxLayoutAlign="end">
     <button mat-button mat-dialog-close>Cancel</button>
     <button mat-button color="primary" (click)="discovery()">Start</button>
-    <!-- <button mat-raised-button type="submit" color="primary">Start</button> -->
+  </mat-dialog-actions> -->
-  </mat-dialog-actions>
+
+  <p-card title="Zone" subtitle="192.168.1.0/24" [style]="{width: '360px'}" styleClass="ui-card-shadow">
+    <p-header>
+
+    </p-header>
+    <div>
+
+      <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>
+        </div>
+      </div>
+
+      <span class="ui-float-label">
+          <input id="float-input" type="text" size="30" pInputText> 
+          <label for="float-input">Start Ip</label>
+      </span>
+
+      <span class="ui-float-label">
+          <input id="float-input" type="text" size="30" pInputText> 
+          <label for="float-input">End Ip</label>
+      </span>
+
+      <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>
+          </div>
+        </div>
+  
+        <span class="ui-float-label">
+            <input id="float-input" type="text" size="30" pInputText> 
+            <label for="float-input">Start Port</label>
+        </span>
+  
+        <span class="ui-float-label">
+            <input id="float-input" type="text" size="30" pInputText> 
+            <label for="float-input">End Port</label>
+        </span>
+
+        <p-listbox [options]="cities" [(ngModel)]="selectedCities" multiple="multiple" checkbox="checkbox" filter="filter" optionLabel="name">
+            <p-header>
+              <i class="fa fa-car"></i>
+              Cars
+            </p-header>
+          </p-listbox>
+
+    </div>
+    <p-footer>
+      <button pButton type="button" label="Save" icon="fa-check"></button>
+      <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary"></button>
+    </p-footer>
+  </p-card>
+
+
+
+
+
+
+
 
 </div>
 
 <div *ngIf="started">
-  <tree-root id="tree2" [focused]="true" [nodes]="treeNodes">
+
-    <ng-template #treeNodeFullTemplate let-node let-index="index" let-templates="templates">
+  <p-card title="Discovery Result" [style]="{width: '360px'}" styleClass="ui-card-shadow">
-      <div class="tree-node">
+    <p-header>
-        <input type="checkbox" [checked]="node.isActive" (change)="checkDiscoveryResult(node)" />
+
-        <tree-node-expander [node]="node"></tree-node-expander>
+    </p-header>
-        <div class="node-content-wrapper" [class.node-content-wrapper-active]="node.isActive" [class.node-content-wrapper-focused]="node.isFocused"
+    <div>
-          (click)="checkDiscoveryResult(node)">
+      <p-tree [value]="treeNodes" selectionMode="checkbox" [(selection)]="filesTree4"></p-tree>
-          <span [class]="node.data.className" [class.title]="true">{{ node.data.title }}</span>
+      <div>Selected Nodes:
-        </div>
+        <span *ngFor="let file of filesTree4">{{file.label}} </span>
-        <tree-node-children [node]="node" [templates]="templates"></tree-node-children>
       </div>
-    </ng-template>
+    </div>
-  </tree-root>
+    <p-footer>
-  <mat-dialog-actions fxLayoutAlign="end">
+      <button pButton type="button" label="Save" icon="fa-check"></button>
+      <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary"></button>
+    </p-footer>
+  </p-card>
+
+
+  <!-- <mat-dialog-actions fxLayoutAlign="end">
     <button mat-button mat-dialog-close>Cancel</button>
     <button mat-button color="primary" (click)="discoveryResultSave()">Save</button>
-    <!-- <button mat-raised-button type="submit" color="primary">Start</button> -->
+  </mat-dialog-actions> -->
-  </mat-dialog-actions>
 </div>

src/packages/discovery/discovery.module.ts

@@ -1,39 +1,37 @@
-// import { NgModule, Inject } from '@angular/core';
+import { NgModule, Inject } from '@angular/core';
-// import { CommonModule } from '@angular/common';
+import { CommonModule } from '@angular/common';
-// import { FormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 
-// import { MaterialModule } from 'packages/commons/material/material.module';
 
 // import { InputChipModule } from 'packages/commons/component/input-chip/input-chip.module';
 
-// import { DiscoveryStoreModule } from './discovery-store.module';
+import { DiscoveryStoreModule } from './discovery-store.module';
-// import { DiscoveryRPCModule } from './discovery-rpc.module';
+import { DiscoveryRPCModule } from './discovery-rpc.module';
-// import { DiscoveryLoggerModule } from './discovery-logger.module';
+import { DiscoveryLoggerModule } from './discovery-logger.module';
 
-// import { COMPONENTS } from './component';
+import { COMPONENTS } from './component';
-// import { SERVICES } from './service';
+import { SERVICES } from './service';
-// import { TreeModule } from 'angular-tree-component';
+import { PrimeNGModules } from 'packages/commons/prime-ng/prime-ng.module';
 
-// @NgModule({
+@NgModule({
-//   imports: [
+  imports: [
-//     CommonModule,
+    CommonModule,
-//     MaterialModule,
+    // InputChipModule,
-//     InputChipModule,
+    FormsModule,
-//     FormsModule,
+    PrimeNGModules,
-//     TreeModule,
+    DiscoveryStoreModule,
-//     DiscoveryStoreModule,
+    DiscoveryRPCModule,
-//     DiscoveryRPCModule,
+    DiscoveryLoggerModule,
-//     DiscoveryLoggerModule,
+  ],
-//   ],
+  declarations: [
-//   declarations: [
+    COMPONENTS
-//     COMPONENTS
+  ],
-//   ],
+  exports: [
-//   exports: [
+    COMPONENTS,
-//     COMPONENTS,
+  ],
-//   ],
+  providers: [
-//   providers: [
+    SERVICES,
-//     SERVICES,
+  ],
-//   ],
+})
-// })
+export class DiscoveryModule {
-// export class DiscoveryModule {
+}
-// }