frontend/config/tree-node.html

<div *ngIf="node['info']['type'] != 8 || node['first']" class="node"
    [class.dirty]="node['dirty']"
    [class.deleted]="modsService.isDeleted(node)"
    [class.moved]="modsService.isMoved(activeSession, node)"
    [class.yang-container]="node['info']['type'] == 1"
    [class.yang-leaf]="node['info']['type'] == 4"
    [class.yang-leaflist]="node['info']['type'] == 8"
    [class.yang-list]="node['info']['type'] == 16">
    <tree-indent [node]="node" [indentation]="indentation"></tree-indent>
    <img class="icon" src="assets/netopeer/icons/info.svg" alt="info" title="{{node['info']['dsc']}}"
        onmouseover="this.src='assets/netopeer/icons/info_active.svg'"
        onmouseout="this.src='assets/netopeer/icons/info.svg'"/>

    <!-- BEGIN nodetype-specific code -->
    <!-- leaf -->
    <ng-container *ngIf="node['info']['type'] == 4 || (node['new'] && node['info']['type'] == 8)">
        <ng-container *ngIf="node['info']['key']">
            <img class="icon" src="assets/netopeer/icons/key.svg" alt="key" title="list key"/>
        </ng-container>
        <ng-container *ngIf="node['info']['config'] && !node['deleted'] && (!node['info']['key'] || node['new']) && node['info']['datatypebase'] != 'empty'">
            <img *ngIf="!node['edit']" class="icon_action" src="assets/netopeer/icons/edit.svg"
                alt="edit" title="edit value" tabindex=0
                (click)="startEditing(node, $event.target);" (keyup.enter)="startEditing(node, $event.target);"
                onmouseover="this.src='assets/netopeer/icons/edit_active.svg'"
                onmouseout="this.src='assets/netopeer/icons/edit.svg'"/>
            <img *ngIf="node['edit']" class="icon" src="assets/netopeer/icons/edit.svg" alt="edit" title="editing value"/>
        </ng-container>
    </ng-container>

    <!-- container and lists -->
    <ng-container *ngIf="!node['new'] && !node['deleted'] && ((node['info']['type'] == 16 || node['info']['type'] == 1)) && treeService.expandable(node)">
        <img *ngIf="treeService.hasHiddenChild(activeSession, node)" (click)="sessionsService.expand(activeSession, node, true)"
            class="icon_action" src="assets/netopeer/icons/show_all.svg"
            onmouseover="this.src='assets/netopeer/icons/show_all_active.svg'"
            onmouseout="this.src='assets/netopeer/icons/show_all.svg'" alt="show-all" title="expand subtree"/>
        <img *ngIf="treeService.isHidden(activeSession, node)" (click)="sessionsService.expand(activeSession, node, false)"
            class="icon_action" src="assets/netopeer/icons/show_children.svg"
            onmouseover="this.src='assets/netopeer/icons/show_children_active.svg'"
            onmouseout="this.src='assets/netopeer/icons/show_children.svg'" alt="show-children" title="expand children"/>
        <img *ngIf="!treeService.isHidden(activeSession, node)" (click)="sessionsService.collapse(activeSession, node)"
            class="icon_action" src="assets/netopeer/icons/collapse.svg"  alt="collapse" title="collapse"
            onmouseover="this.src='assets/netopeer/icons/collapse_active.svg'"
            onmouseout="this.src='assets/netopeer/icons/collapse.svg'"/>
    </ng-container>

    <div class="node_info"><span class="node_name">{{node['info']['name']}}</span>
        <!-- list's keys -->
        <span *ngIf="node['info']['type'] == 16" class="keys">* [{{node['keys']}}]</span>

        <!-- leaf and leaflists -->
        <span *ngIf="node['info']['type'] == 8 || node['info']['type'] == 4">:</span>

        <!-- leaf -->
        <ng-container *ngIf="node['info']['type'] == 4">
            <span *ngIf="!node['edit']" class="value_inline" [class.keys]="!isEditable(node)" [class.editable]="isEditable(node)"
                (click)="startEditing(node, $event.target);">{{node['value']}}</span>
            <a *ngIf="node['info']['datatypebase'] == 'identityref'" class="value_inline"
                (click)="showIdentity(node)" title="open identity information in YANG Explorer">info</a>
            <span *ngIf="node['edit']" class="value_inline">{{node['info']['datatype']}}
                <span *ngIf="node['info']['datatype'] != node['info']['datatypebase']">({{node['info']['datatypebase']}})</span>
            </span>
        </ng-container>
        <ng-container *ngIf="node['info']['type'] == 8">
            <span class="value_inline">{{node['info']['datatype']}}
                <span *ngIf="node['info']['datatype'] != node['info']['datatypebase']">({{node['info']['datatypebase']}})</span>
            </span>
        </ng-container>
    </div>
    <!-- END nodetype-specific code -->

    <div class="module_name" (click)="showSchema(node)" title="open schema {{node['info']['module']}} in YANG Explorer">{{treeService.moduleName(node)}}</div>
</div>

<!-- leaf/leaf-list's edit value -->
<tree-edit *ngIf="node['edit'] && node['info']['type'] == 4" [node]="node" [indentation]="indentation" [activeSession]="activeSession"></tree-edit>

<!-- END nodetype-specific code -->

<!-- recursion - show children -->
<div class="loading" *ngIf="node['loading']">
    <netopeer-loading></netopeer-loading>
</div>
<div class="children" *ngIf="(node['children'] || node['newChildren']) && !node['deleted'] && !treeService.isHidden(activeSession, node)">
    <ng-container *ngFor="let child of treeService.childrenToShow(node)">
        <tree-view [node]="child" [indentation]="treeService.inheritIndentation(indentation, node)"></tree-view>
    </ng-container>
</div>

<!-- create new child dialog -->
<tree-create [node]="node" [activeSession]="activeSession" [indentation]="treeService.inheritIndentation(indentation, node)"></tree-create>