157 lines
8.4 KiB
HTML
157 lines
8.4 KiB
HTML
<mat-tab-group (selectedTabChange)="onTabChange($event)">
|
|
<mat-tab label="{{ 'generalTabLabel' | translate }}">
|
|
<div class="header-container" joyrideStep="tabsStep" text="{{ 'tabsStepText' | translate }}">
|
|
<button mat-icon-button color="primary" (click)="iniciarTour()">
|
|
<mat-icon>help</mat-icon>
|
|
</button>
|
|
<h2 class="title" joyrideStep="groupsTitleStepText" text="{{ 'groupsTitleStepText' | translate }}">{{ 'adminGroupsTitle' | translate }}</h2>
|
|
<div class="groups-button-row" joyrideStep="addStep" text="{{ 'groupsAddStepText' | translate }}">
|
|
<button mat-flat-button color="primary" (click)="addOU($event)" matTooltip="{{ 'newOrganizationalUnitTooltip' | translate }}" matTooltipShowDelay="1000">{{ 'newOrganizationalUnitButton' | translate }}</button>
|
|
<button mat-flat-button color="primary" (click)="addClient($event)" matTooltipShowDelay="1000">{{ 'newClientButton' | translate }}</button>
|
|
<button mat-raised-button (click)="openBottomSheet()" joyrideStep="keyStep" text="{{ 'keyStepText' | translate }}" matTooltipShowDelay="1000">{{ 'legendButton' | translate }}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="groupLists-container">
|
|
<mat-card class="card unidad-card" joyrideStep="unitStep" text="{{ 'unitStepText' | translate }}" matTooltipShowDelay="1000" matTooltipPosition="above">
|
|
<mat-card-title>{{ 'organizationalUnitTitle' | translate }}</mat-card-title>
|
|
<mat-card-content>
|
|
<mat-spinner *ngIf="loading"></mat-spinner>
|
|
<mat-list *ngIf="!loading">
|
|
<mat-list-item *ngFor="let unidad of organizationalUnits" [ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}" (click)="onSelectUnidad(unidad)">
|
|
<div class="item-content">
|
|
<mat-icon>apartment</mat-icon>
|
|
{{ unidad.name }}
|
|
<span class="actions">
|
|
<mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">more_vert</mat-icon>
|
|
<mat-menu #menu="matMenu">
|
|
<button mat-menu-item (click)="onTreeClick($event, unidad)">
|
|
<mat-icon matTooltip="{{ 'viewTreeTooltip' | translate }}" matTooltipHideDelay="0">account_tree</mat-icon>
|
|
<span>{{ 'viewTreeMenu' | translate }}</span>
|
|
</button>
|
|
|
|
<button mat-menu-item (click)="onEditClick($event, unidad.type, unidad.uuid)">
|
|
<mat-icon matTooltip="{{ 'editUnitTooltip' | translate }}" matTooltipHideDelay="0">edit</mat-icon>
|
|
<span>{{ 'editUnitMenu' | translate }}</span>
|
|
</button>
|
|
|
|
<button mat-menu-item (click)="onShowClick($event, unidad)">
|
|
<mat-icon matTooltip="{{ 'viewUnitTooltip' | translate }}" matTooltipHideDelay="0">visibility</mat-icon>
|
|
<span>{{ 'viewUnitMenu' | translate }}</span>
|
|
</button>
|
|
|
|
<button mat-menu-item (click)="addOU($event, unidad)">
|
|
<mat-icon matTooltip="{{ 'addInternalUnitTooltip' | translate }}" matTooltipHideDelay="0">add_home_work</mat-icon>
|
|
<span>{{ 'addInternalUnitMenu' | translate }}</span>
|
|
</button>
|
|
|
|
<button mat-menu-item (click)="addClient($event, unidad)">
|
|
<mat-icon matTooltip="{{ 'addClientTooltip' | translate }}" matTooltipHideDelay="0">devices</mat-icon>
|
|
<span>{{ 'addClientMenu' | translate }}</span>
|
|
</button>
|
|
</mat-menu>
|
|
</span>
|
|
</div>
|
|
</mat-list-item>
|
|
</mat-list>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
|
|
<mat-card class="card elements-card">
|
|
<mat-card-title>
|
|
<div class="title-with-breadcrumb">
|
|
<span>{{ 'internalElementsTitle' | translate }}</span>
|
|
<mat-card-subtitle>
|
|
<ng-container *ngFor="let crumb of breadcrumb; let i = index">
|
|
<a (click)="navigateToBreadcrumb(i)">{{ crumb }}</a>
|
|
<span *ngIf="i < breadcrumb.length - 1"> > </span>
|
|
</ng-container>
|
|
</mat-card-subtitle>
|
|
</div>
|
|
</mat-card-title>
|
|
<mat-card-content class="element-content">
|
|
<mat-spinner *ngIf="loadingChildren"></mat-spinner>
|
|
|
|
<!-- Mostrar lista normal si no es un aula -->
|
|
<mat-list *ngIf="!loadingChildren && selectedDetail?.type !== 'classroom'">
|
|
<div *ngIf="children.length === 0" class="empty-list">
|
|
<mat-icon>info</mat-icon>
|
|
<span>{{ 'noInternalElementsMessage' | translate }}</span>
|
|
</div>
|
|
<mat-list-item *ngFor="let child of children"
|
|
[ngClass]="{'selected-item': child === selectedUnidad, 'clickable-item': true}"
|
|
(click)="onSelectChild(child)">
|
|
<div class="item-content">
|
|
<mat-icon [ngSwitch]="child.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>
|
|
{{ child.name }}
|
|
<div class="actions">
|
|
<mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">more_vert</mat-icon>
|
|
<mat-menu #menu="matMenu">
|
|
<button mat-menu-item (click)="onEditClick($event, child.type, child.uuid)">
|
|
<mat-icon>edit</mat-icon>
|
|
<span>{{ 'editElementMenu' | translate }}</span>
|
|
</button>
|
|
<button mat-menu-item (click)="onDeleteClick($event, child.uuid, child.name, child.type)">
|
|
<mat-icon>delete</mat-icon>
|
|
<span>{{ 'deleteElementMenu' | translate }}</span>
|
|
</button>
|
|
</mat-menu>
|
|
</div>
|
|
</div>
|
|
</mat-list-item>
|
|
</mat-list>
|
|
|
|
<!-- Mostrar cuadrícula si es un aula -->
|
|
<div *ngIf="selectedDetail?.type === 'classroom'" class="classroom-grid">
|
|
<div *ngFor="let pc of selectedDetail.clients" class="classroom-item">
|
|
<mat-card class="classroom-card" [ngClass]="{
|
|
'card-og-live': pc.status === 'og-live',
|
|
'card-busy': pc.status === 'busy',
|
|
'card-windows': pc.status === 'windows' || pc.status === 'windows-session',
|
|
'card-linux': pc.status === 'linux' || pc.status === 'linux-session',
|
|
'card-macos': pc.status === 'macos',
|
|
'card-off': pc.status === 'off'
|
|
}">
|
|
<mat-card-header>
|
|
<mat-card-title class="client-name">{{ pc.name }}</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content>
|
|
<p class="client-text">{{ pc.ip }}</p>
|
|
<p class="client-text">{{ pc.mac }}</p>
|
|
</mat-card-content>
|
|
<mat-card-actions align="end">
|
|
<button mat-icon-button color="primary" (click)="onEditClick($event, 'client', pc.uuid)">
|
|
<mat-icon>edit</mat-icon>
|
|
</button>
|
|
<button mat-icon-button color="warn" (click)="onDeleteClick($event, pc.uuid, pc.name, 'client')">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</mat-card-actions>
|
|
</mat-card>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</div>
|
|
</mat-tab>
|
|
|
|
<mat-tab label="{{ 'advancedSearchTabLabel' | translate }}">
|
|
<app-advanced-search></app-advanced-search>
|
|
</mat-tab>
|
|
|
|
<mat-tab label="{{ 'clientsTabLabel' | translate }}">
|
|
<app-client-tab-view #clientTab></app-client-tab-view>
|
|
</mat-tab>
|
|
|
|
<mat-tab label="{{ 'organizationalUnitsTabLabel' | translate }}">
|
|
<app-organizational-unit-tab-view #organizationalUnitTab></app-organizational-unit-tab-view>
|
|
</mat-tab>
|
|
</mat-tab-group>
|