member_webapp/@overflow/discovery/component/search-result.component.html

<of-block-progressbar [target]="content" [pending]="!finished"></of-block-progressbar>

<div class="ui-discovery">
    <p-panel #content [showHeader]="false" class="block-panel">

        <p-messages [(value)]="msgs"></p-messages>

        <p-tree [value]="zoneNode" layout="vertical">
            <!-- ZONE node template -->
            <ng-template let-node pTemplate="ZONE">
                <div>
                    {{node.label}}
                </div>
            </ng-template>

            <!-- HOST node template -->
            <ng-template let-node pTemplate="HOST">
                <div @discoveryResultAnim>
                    <div *ngIf="checkHighlight(node.label, 0) else unhighlightHost">
                        <p-toggleButton [disabled]="checkExistTarget(node.data.target)" onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check"
                            offIcon="fa-square" [style]="{'width':'200px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton>
                    </div>

                    <ng-template #unhighlightHost>
                        <p-toggleButton [disabled]="checkExistTarget(node.data.target)" onLabel="{{node.label}}" offLabel="{{node.label}}" onIcon="fa-check"
                            offIcon="fa-square" [style]="{'width':'200px', 'opacity': '0.2'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton>
                    </ng-template>
                </div>
            </ng-template>

            <!-- SERVICE node template -->
            <ng-template let-node pTemplate="SERVICE">
                <div @discoveryResultAnim>
                    <div *ngIf="checkHighlight(node.data.name, 1) else unhighlightServ">
                        <p-toggleButton [disabled]="checkExistTarget(node.data.target)" onLabel="{{node.label}} {{node.data.portType}}" offLabel="{{node.label}} {{node.data.portType}} {{node.data.portNumber}}"
                            onIcon="fa-check" offIcon="fa-square" [style]="{'width':'300px'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton>
                    </div>

                    <ng-template #unhighlightServ>
                        <p-toggleButton [disabled]="checkExistTarget(node.data.target)" onLabel="{{node.label}} {{node.data.portType}}" offLabel="{{node.label}} {{node.data.portType}} {{node.data.portNumber}}"
                            onIcon="fa-check" offIcon="fa-square" [style]="{'width':'300px', 'opacity': '0.2'}" (onChange)="onTargetSelect($event, node)"></p-toggleButton>
                    </ng-template>

                </div>
            </ng-template>
        </p-tree>

        <button class="ui-button-width-fit ui-float-right ui-top-space-10" [disabled]="selectedItems.length === 0" type="button"
            label="Save" icon="ui-icon-close" pButton (click)="saveTargets()"></button>

    </p-panel>
</div>


<p-dialog header="Title" [(visible)]="targetSaved" [modal]="true" [responsive]="true" [width]="600" [minWidth]="200" [minY]="70"
    [closeOnEscape]="false">
    <span>Target 지정이 완료되었습니다. 이어서 Sensor를 등록하시면 좋겠다능</span>
    <p-footer>
        <button type="button" pButton label="메인으로"></button>
        <button type="button" pButton label="Target으로"></button>
        <button type="button" pButton label="InfraMap으로"></button>
    </p-footer>
</p-dialog>