55 lines
2.4 KiB
HTML
55 lines
2.4 KiB
HTML
<h1 mat-dialog-title>{{ 'viewTreeTitle' | translate }}</h1>
|
|
|
|
<mat-dialog-content>
|
|
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="tree">
|
|
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
|
|
<mat-icon [ngSwitch]="node.type">
|
|
<ng-container *ngSwitchCase="'organizational-unit'">apartment</ng-container>
|
|
<ng-container *ngSwitchCase="'classrooms-group'">meeting_room</ng-container>
|
|
<ng-container *ngSwitchCase="'classroom'">school</ng-container>
|
|
<ng-container *ngSwitchCase="'client'">computer</ng-container>
|
|
<ng-container *ngSwitchCase="'clients-group'">lan</ng-container>
|
|
<ng-container *ngSwitchDefault>help_outline</ng-container>
|
|
</mat-icon>
|
|
{{ node.name }}
|
|
</mat-tree-node>
|
|
|
|
<!-- Nodo expandible -->
|
|
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
|
|
<div class="mat-tree-node">
|
|
<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name | translate">
|
|
<mat-icon class="mat-icon-rtl-mirror">
|
|
{{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
|
|
</mat-icon>
|
|
</button>
|
|
<div class="item-content">
|
|
<mat-icon [ngSwitch]="node.type">
|
|
<ng-container *ngSwitchCase="'organizational-unit'">apartment</ng-container>
|
|
<ng-container *ngSwitchCase="'classrooms-group'">meeting_room</ng-container>
|
|
<ng-container *ngSwitchCase="'classroom'">school</ng-container>
|
|
<ng-container *ngSwitchCase="'client'">computer</ng-container>
|
|
<ng-container *ngSwitchCase="'clients-group'">lan</ng-container>
|
|
<ng-container *ngSwitchDefault>help_outline</ng-container>
|
|
</mat-icon>
|
|
{{ node.name }}
|
|
</div>
|
|
</div>
|
|
|
|
<div [class.tree-invisible]="!treeControl.isExpanded(node)" role="group">
|
|
<ng-container matTreeNodeOutlet></ng-container>
|
|
<mat-list *ngIf="node.clients">
|
|
<mat-list-item *ngFor="let client of node.clients">
|
|
<mat-icon matListItemIcon>computer</mat-icon>
|
|
<span matListItemTitle>{{ client.name }}</span>
|
|
<span>{{ client.ip }} | {{ client.mac }}</span>
|
|
</mat-list-item>
|
|
</mat-list>
|
|
</div>
|
|
</mat-nested-tree-node>
|
|
</mat-tree>
|
|
</mat-dialog-content>
|
|
|
|
<mat-dialog-actions align="end">
|
|
<button mat-button (click)="close()">{{ 'closeButton' | translate }}</button>
|
|
</mat-dialog-actions>
|