frontend/config/tree.component.html

<ng-container *ngFor="let node of treeData">
<div class="subtree" *ngIf="node['info']['config'] || activeSession.statusVisibility" [class.status]="!node['info']['config']">
    <ng-container [ngSwitch]="node['info']['type']">

        <!-- leaf -->
        <ng-container *ngSwitchCase="4">
            <div #nodeContainer class="node" [class.dirty]="node['dirty']">
                <ng-container *ngFor="let indent of indentation">
                    <img *ngIf="!indent" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_cont.svg"/>
                    <img *ngIf="indent" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_empty.svg"/>
                </ng-container>
                <img *ngIf="node['last']" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_last_branch.svg"/>
                <img *ngIf="!node['last']" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_branch.svg"/>
                <img class="icon" src="assets/netopeer/icons/info.svg"
                    onmouseover="this.src='assets/netopeer/icons/info_active.svg'"
                    onmouseout="this.src='assets/netopeer/icons/info.svg'" alt="info" title="{{node['info']['dsc']}}"/>
                <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['info']['key']">
                    <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>
                <div>{{node['info']['name']}}</div> :
                <div class="value" *ngIf="!node['edit']" (click)="startEditing(node, $event.target);">{{node['value']}}</div>
                <div class="value" *ngIf="node['edit']">{{node['info']['datatype']}} <span *ngIf="node['info']['datatype'] != node['info']['datatypebase']">({{node['info']['datatypebase']}})</span></div>
                <div class="module_name">{{node['info']['module']}}</div>
            </div>
            <div #nodeContainer class="node_edit" [class.dirty]="node['dirty']" *ngIf="node['edit']">
                <ng-container *ngFor="let indent of indentation">
                    <img *ngIf="!indent" class="indentation" src="assets/netopeer/icons/tree_cont.svg"/>
                    <img *ngIf="indent" class="indentation" src="assets/netopeer/icons/tree_empty.svg"/>
                </ng-container>
                <img *ngIf="node['last']" class="indentation" src="assets/netopeer/icons/tree_empty.svg"/>
                <img *ngIf="!node['last']" class="indentation" src="assets/netopeer/icons/tree_cont.svg"/>
                <img *ngIf="node['edit']" class="icon_action" src="assets/netopeer/icons/close.svg"
                	alt="cancel" title="cancel editing" tabindex=0
                	(click)="node['edit']=false" (keyup.enter)="node['edit']=false"
                    onmouseover="this.src='assets/netopeer/icons/close_active.svg'"
                    onmouseout="this.src='assets/netopeer/icons/close.svg'" />
                <img *ngIf="node['edit']" class="icon_action icon_hidden" src="assets/netopeer/icons/confirm.svg"
                    id="{{node['path']}}_value_confirm" alt="done" title="store changes" tabindex=0
                    (click)="changeValue(node, $event.target)" (keyup.enter)="changeValue(node, $event.target)" 
                    onmouseover="this.src='assets/netopeer/icons/confirm_active.svg'"
                    onmouseout="this.src='assets/netopeer/icons/confirm.svg'"/>
                <input type="text" class="value" value="{{node['value']}}" tabindex=0
                    (keyup)="checkValue(node, $event.target)" (change)="checkValue(node, $event.target)"
                    (keyup.enter)="changeValue(node, $event.target)" (keyup.escape)="node['edit']=false"/>
            </div>
        </ng-container>

        <!-- leaflist -->
        <ng-container *ngSwitchCase="8">
            <div #nodeContainer class="node">
                <ng-container *ngFor="let indent of indentation">
                    <img *ngIf="!indent" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_cont.svg"/>
                    <img *ngIf="indent" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_empty.svg"/>
                </ng-container>
                <img *ngIf="node['last']" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_last_branch.svg"/>
                <img *ngIf="!node['last']" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_branch.svg"/>
                <img class="icon" src="assets/netopeer/icons/info.svg"
                    onmouseover="this.src='assets/netopeer/icons/info_active.svg'"
                    onmouseout="this.src='assets/netopeer/icons/info.svg'" alt="info" title="{{node['info']['dsc']}}"/>
                <div>{{node['info']['name']}}</div> :
                <div class="module_name">{{node['info']['module']}}</div>
            </div>
            <div #nodeContainer class="node" *ngFor="let value of node['value']">
                <ng-container *ngFor="let indent of indentation">
                    <img *ngIf="!indent" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_cont.svg"/>
                    <img *ngIf="indent" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_empty.svg"/>
                </ng-container>
                <img *ngIf="node['last']" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_empty.svg"/>
                <img *ngIf="!node['last']" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_cont.svg"/>
                <div class="value_standalone">{{value}}</div>
            </div>
        </ng-container>

        <!-- rest -->
        <ng-container *ngSwitchDefault>
            <div #nodeContainer class="node">
                <ng-container *ngFor="let indent of indentation">
                    <img *ngIf="!indent" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_cont.svg"/>
                    <img *ngIf="indent" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_empty.svg"/>
                </ng-container>
                <img *ngIf="node['last']" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_last_branch.svg"/>
                <img *ngIf="!node['last']" [style.height.px]="nodeContainer.offsetHeight" class="indentation" src="assets/netopeer/icons/tree_branch.svg"/>
                <img class="icon" src="assets/netopeer/icons/info.svg"
                    onmouseover="this.src='assets/netopeer/icons/info_active.svg'"
                    onmouseout="this.src='assets/netopeer/icons/info.svg'" alt="info" title="{{node['info']['dsc']}}"/>
                <ng-container *ngIf="expandable(node)">
                    <img *ngIf="hasHiddenChild(node)" (click)="expand(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="!node['children']" (click)="expand(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="node['children']" (click)="collapse(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>
                <ng-container [ngSwitch]="node['info']['type']">
                    <ng-container *ngSwitchCase="16">
                        <div>{{node['info']['name']}}<span class="node_info">* [{{node['keys']}}]</span></div>
                    </ng-container>
                    <div *ngSwitchDefault>{{node['info']['name']}}</div>
                </ng-container>
                <div class="module_name">{{node['info']['module']}}</div>
            </div>
        </ng-container>
    </ng-container>

    <div class="children" *ngIf="node['children']">
        <tree-view [treeData]="node['children']" [indentation]="inheritIndentation(node)"></tree-view>
    </div>
</div>
</ng-container>