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" [style]="{width: '100%'}" 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>

      <div style="margin-top: 8px">
      <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>

      <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>
  
        <div style="margin-top: 8px">
        <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>
      </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> -->

          <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"
            [sourceStyle]="{'height':'300px'}" [targetStyle]="{'height':'300px'}">
            <ng-template let-car 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">{{car.name}}</div>
              </div>
            </ng-template>
          </p-pickList>

    </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>
    </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>
      <p-tree [value]="treeNodes" selectionMode="checkbox" [(selection)]="filesTree4"></p-tree>
      <div>Selected Nodes:
        <span *ngFor="let file of filesTree4">{{file.label}} </span>
      </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="Save" icon="fa-check"></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>
  </mat-dialog-actions> -->
</div>