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

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

<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 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 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 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 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" [disabled]="selectedItems.length === 0" type="button" label="Save" icon="ui-icon-close"
        pButton (click)="saveTargets()"></button>

</p-panel>


<p-dialog header="Title" [(visible)]="displayTargetDone" [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>