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

<div *ngIf="!started">

  <!-- <mat-dialog-actions fxLayoutAlign="end">
    <button mat-button mat-dialog-close>Cancel</button>
    <button mat-button color="primary" (click)="discovery()">Start</button>
  </mat-dialog-actions> -->

  <p-card title="Zone" subtitle="192.168.1.0/24" styleClass="ui-card-shadow">
    <p-header>

    </p-header>
    <div>

      <div class="ui-g">
        <div class="ui-g-12">
          <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-6">
          <span class="ui-float-label">
            <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-6">
          <span class="ui-float-label">
            <input id="float-input" type="text" size="30" pInputText [(ngModel)]="endIP"> 
            <label for="float-input">End Ip</label>
          </span>
        </div>
      </div>

     
      <div class="ui-g">
        <div class="ui-g-12">
          <p-checkbox name="group1" value="port" label="Port" [(ngModel)]="portChecked" inputId="la" (onChange)="handlePortCheckChange($event)"></p-checkbox>
        </div>
        <div class="ui-g-12">
          <div class="ui-g-6">
            TCP &nbsp;
            <p-inputSwitch [(ngModel)]="tcpChecked"></p-inputSwitch>
          </div>
          <div class="ui-g-6">
            UDP &nbsp;
            <p-inputSwitch [(ngModel)]="udpChecked"></p-inputSwitch>
          </div>
        </div>
      </div>

      <div class="ui-g form-group">
        <div class="ui-g-12 ui-md-6">
            <span class="ui-float-label">
                <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-6">
            <span class="ui-float-label">
                <input id="float-input" type="text" size="30" pInputText [(ngModel)]="endPort"> 
                <label for="float-input">End Port</label>
            </span>
        </div>
      </div>

      <!-- <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 class="ui-g-12">
        <div class="ui-g-12 ui-g-nopad">
          <p-checkbox name="group1" value="service" label="Service" [(ngModel)]="serviceChecked" inputId="la" (onChange)="handleServiceCheckChange($event)"></p-checkbox>
        </div>

        <div class="ui-g-12">
          <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'}" [showTargetControls]="false" [showSourceControls]="false">
            <ng-template let-service pTemplate="item">
              <div class="ui-helper-clearfix">
                <div style="font-size:14px;margin:0;padding: 0;">{{service.name}}</div>
              </div>
            </ng-template>
          </p-pickList>
        </div>
      </div>

    </div>
    <p-footer>
      <div dir="rtl">
        <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="closeDialog()"></button>
        <button pButton type="button" label="Start" icon="fa-check" class="ui-button-width-fit" (click)="discovery()"></button>
      </div>
    </p-footer>
  </p-card>








</div>

<div *ngIf="started">

  <p-card title="Discovery Result" [style]="{width: '100%'}" styleClass="ui-card-shadow">
    <p-header>

    </p-header>
    <div class="ui-g-12">
      <p-tree [value]="treeNodes" selectionMode="checkbox" [(selection)]="selectedNodes"></p-tree>
    </div>
    <!-- <div class="ui-g-12">Selected Nodes:
        <span *ngFor="let file of filesTree4">{{file.label}} </span>
    </div> -->
    <p-footer>
      <div dir="rtl">
        <button pButton type="button" label="Cancel" icon="fa-close" class="ui-button-secondary ui-button-width-fit" (click)="closeDialog()"></button>
        <button pButton type="button" label="Save" icon="fa-check" class="ui-button-width-fit" (click)="discoveryResultSave()"></button>
      </div>
    </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>
  </mat-dialog-actions> -->
</div>