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">
                <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_action" 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']" (click)="node['edit']=true" class="icon_action" src="assets/netopeer/icons/edit.svg"
                        onmouseover="this.src='assets/netopeer/icons/edit_active.svg'"
                        onmouseout="this.src='assets/netopeer/icons/edit.svg'" alt="edit" title="edit value"/>
                    <img *ngIf="node['edit']" (click)="node['edit']=false" class="icon_action" src="assets/netopeer/icons/confirm.svg"
                        onmouseover="this.src='assets/netopeer/icons/confirm_active.svg'"
                        onmouseout="this.src='assets/netopeer/icons/confirm.svg'" alt="done" title="store value"/>
                </ng-container>
                <div>{{node['info']['name']}}</div> :
                <div class="value" *ngIf="!node['edit']">{{node['value']}}</div>
                <div class="module_name">{{node['info']['module']}}</div>
            </div>
            <div #nodeContainer class="node" *ngIf="node['edit']">
                <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">{{node['value']}}</div>
            </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>