oggui/ogWebconsole/src/app/components/groups/groups.component.html

353 lines
22 KiB
HTML

<mat-tab-group>
<mat-tab label="General">
<div class="header-container">
<h2 class="title" i18n="@@adminGroupsTitle">Administrar grupos</h2>
<div class="groups-button-row">
<button mat-flat-button color="primary" (click)="addOU($event)" i18n="@@newOrganizationalUnitButton">Nueva Unidad Organizativa</button>
<button mat-flat-button color="primary" (click)="addClient($event)" i18n="@@newClientButton">Nuevo Cliente</button>
<button mat-raised-button (click)="openBottomSheet()" i18n="@@legendButton">Leyenda</button>
</div>
<div class="classroomBtn-container">
<button mat-flat-button class="roomMap-btn" color="accent" (click)="roomMap()" *ngIf="selectedDetail && selectedDetail.type === 'classroom'" i18n="@@classroomMapButton">Plano de aula</button>
</div>
</div>
<div class="search-container">
<mat-form-field appearance="fill">
<mat-label i18n="@@searchLabel">Búsqueda</mat-label>
<input matInput placeholder="Búsqueda" [(ngModel)]="searchTerm" (keyup.enter)="search()" i18n-placeholder="@@searchPlaceholder">
<mat-icon matSuffix>search</mat-icon>
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar entre las unidades organizativas</mat-hint>
</mat-form-field>
</div>
<div class="groupLists-container">
<mat-card class="card unidad-card">
<mat-card-title i18n="@@organizationalUnitTitle">Unidad organizativa</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()">menu</mat-icon>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="onTreeClick($event, unidad)">
<mat-icon
class="edit-icon"
#tooltip="matTooltip"
matTooltip="Visualizar en forma de arbol"
matTooltipHideDelay="0"
i18n="@@viewTreeTooltip">account_tree
</mat-icon>
<span i18n="@@viewTreeMenu">Ver organigrama</span>
</button>
<button mat-menu-item (click)="onEditClick($event, unidad.type, unidad.uuid)">
<mat-icon
class="edit-icon"
#tooltip="matTooltip"
matTooltip="Editar unidad organizativa"
matTooltipHideDelay="0"
i18n="@@editUnitTooltip">edit
</mat-icon>
<span i18n="@@editUnitMenu">Editar</span>
</button>
<button mat-menu-item (click)="onShowClick($event, unidad)">
<mat-icon
class="edit-icon"
#tooltip="matTooltip"
matTooltip="Visualizar unidad organizativa"
matTooltipHideDelay="0"
i18n="@@viewUnitTool">visibility
</mat-icon>
<span i18n="@@viewUnitMenu">Visualizar datos</span>
</button>
<button mat-menu-item (click)="addOU($event, unidad)">
<mat-icon
class="edit-icon"
#tooltip="matTooltip"
matTooltip="Crear unidad organizativa interna"
matTooltipHideDelay="0"
i18n="@@addInternalUnitTool">add_home_work
</mat-icon>
<span i18n="@@addInternalUnitMenu">Añadir unidad organizativa</span>
</button>
<button mat-menu-item (click)="addClient($event, unidad)">
<mat-icon
class="edit-icon"
#tooltip="matTooltip"
matTooltip="Crear cliente en esta unidad organizativa"
matTooltipHideDelay="0"
i18n="@@addClientDevice">devices
</mat-icon>
<span i18n="@@addClientMenu">Crear cliente</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 i18n="@@internalElementsTitle">Elementos internos</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>
<mat-list *ngIf="!loadingChildren">
<div *ngIf="children.length === 0" class="empty-list">
<mat-icon>info</mat-icon>
<span i18n="@@noInternalElementsMessage">No hay elementos internos</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}}
<span class="actions">
<mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">menu</mat-icon>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="onEditClick($event, child.type, child.uuid)">
<mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Editar elemento" matTooltipHideDelay="0" i18n="@@editElementTooltip">edit</mat-icon>
<span i18n="@@editElementMenu">Editar</span>
</button>
<button *ngIf="child.type !== 'client'" mat-menu-item (click)="onShowClick($event, child)">
<mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Visualizar unidad organizativa" matTooltipHideDelay="0" i18n="@@viewUnitTooltip">visibility</mat-icon>
<span i18n="@@viewUnitMenu">Visualizar datos</span>
</button>
<button *ngIf="child.type !== 'client'" mat-menu-item (click)="addOU($event, child)">
<mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Crear unidad organizativa interna" matTooltipHideDelay="0" i18n="@@addInternalUnitTooltip">add_home_work</mat-icon>
<span i18n="@@addInternalUnitMenu">Añadir unidad organizativa</span>
</button>
<button *ngIf="child.type !== 'client'" mat-menu-item (click)="addClient($event, child)">
<mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Crear cliente en esta unidad organizativa" matTooltipHideDelay="0" i18n="@@addClientTooltip">devices</mat-icon>
<span i18n="@@addClientMenu">Crear cliente</span>
</button>
<button mat-menu-item (click)="onDeleteClick($event, child.uuid, child.name, child.type)">
<mat-icon class="delete-icon" #tooltip="matTooltip" matTooltip="Borrar elemento" matTooltipHideDelay="0" i18n="@@deleteElementTooltip">delete</mat-icon>
<span i18n="@@deleteElementMenu">Borrar elemento</span>
</button>
</mat-menu>
</span>
</div>
</mat-list-item>
</mat-list>
</mat-card-content>
</mat-card>
</div>
</mat-tab>
<mat-tab i18n-label label="Búsqueda avanzada" >
<h2 class="title" i18n="@@searchTitle">Búsqueda</h2>
<div class="container">
<div class="header">
<mat-form-field>
<mat-label i18n="@@selectFilterLabel">Seleccione filtro</mat-label>
<mat-select (selectionChange)="loadSelectedFilter($event.value)">
<mat-option *ngFor="let savedFilter of savedFilterNames" [value]="savedFilter">
{{ savedFilter[0] }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<mat-divider class="divider"></mat-divider>
<div class="main-content">
<div class="filters">
<mat-form-field>
<mat-label i18n="@@selectOptionLabel">Selecciona una opción</mat-label>
<mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">
<mat-option value="ou" i18n="@@organizationalUnitsOption">Unidades organizativas</mat-option>
<mat-option value="client" i18n="@@clientsOption">Clientes</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-label i18n="@@nameLabel">Nombre</mat-label>
<input matInput placeholder="Unidad organizativa" (input)="applyFilter()" [(ngModel)]="filterName" i18n-placeholder="@@namePlaceholder">
</mat-form-field>
<!-- FILTROS UNIDAD ORGANIZATIVA-->
<ng-container *ngIf="selectedFilter1 === 'ou'">
<mat-form-field [disabled]="selectedFilter1 === 'ou'">
<mat-label i18n="@@unitTypeLabel">Tipo de unidad</mat-label>
<mat-select [(value)]="selectedFilter2" (selectionChange)="applyFilter()">
<mat-option value="organizational-unit" i18n="@@organizationalUnitOption">Unidad organizativa</mat-option>
<mat-option value="classroom-group" i18n="@@classroomsGroupOption">Grupos de aulas</mat-option>
<mat-option value="classroom" i18n="@@classroomOption">Aulas</mat-option>
<mat-option value="client-group" i18n="@@clientGroupOption">Grupos de clientes</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label i18n="@@floorLabel" class="temp_filter">Planta</mat-label>
<mat-select [(value)]="selectedFilter1">
<mat-option value="none" i18n="@@noneOption">Ninguno</mat-option>
<mat-option value="option1" i18n="@@option1">Planta 1</mat-option>
<mat-option value="option2" i18n="@@option2">Planta 2</mat-option>
<mat-option value="option3" i18n="@@option3">Planta 3</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
<!-- FILTROS CLIENTES -->
<ng-container *ngIf="selectedFilter1 === 'client'">
<mat-form-field>
<mat-label i18n="@@selectAnotherOptionLabel" class="temp_filter">Sistema Operativo</mat-label>
<mat-select multiple [(value)]="selectedFilterOS" >
<mat-option value="none" i18n="@@noneOption">Ninguno</mat-option>
<mat-option value="Windows 10 Education 1803 64 bits">Windows 10 Education 1803 64 bits</mat-option>
<mat-option value="Ubuntu 18.04.1 LTS 64 bits">Ubuntu 18.04.1 LTS 64 bits</mat-option>
<mat-option value="Ubuntu 16.04.4 LTS 64 bits">Ubuntu 16.04.4 LTS 64 bits</mat-option>
<mat-option value="DATA">DATA</mat-option>
<mat-option value="Windows Boot loader">Windows Boot loader</mat-option>
<mat-option value="Windows 7 Professional">Windows 7 Professional</mat-option>
<mat-option value="OpenGnsys Live">OpenGnsys Live</mat-option>
<mat-option value="Ubuntu 18.04 LTS 64 bits">Ubuntu 18.04 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Education 1709 64 bits">Windows 10 Education 1709 64 bits</mat-option>
<mat-option value="Windows 7 Enterprise 64 bits">Windows 7 Enterprise 64 bits</mat-option>
<mat-option value="Windows 10 Education 1607 64 bits">Windows 10 Education 1607 64 bits</mat-option>
<mat-option value="Ubuntu 16.04.5 LTS 64 bits">Ubuntu 16.04.5 LTS 64 bits</mat-option>
<mat-option value="Ubuntu 16.04.2 LTS 64 bits">Ubuntu 16.04.2 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Education 64 bits">Windows 10 Education 64 bits</mat-option>
<mat-option value="CentOS release 6.3 (Final) 64 bits">CentOS release 6.3 (Final) 64 bits</mat-option>
<mat-option value="Ubuntu 16.04.1 LTS 64 bits">Ubuntu 16.04.1 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Enterprise 1803 64 bits">Windows 10 Enterprise 1803 64 bits</mat-option>
<mat-option value="Ubuntu 16.04.3 LTS 64 bits">Ubuntu 16.04.3 LTS 64 bits</mat-option>
<mat-option value="Ubuntu precise (12.04.4 LTS)">Ubuntu precise (12.04.4 LTS)</mat-option>
<mat-option value="GRUB2 Loader">GRUB2 Loader</mat-option>
<mat-option value="Mac OS X 10.9.5 64 bits">Mac OS X 10.9.5 64 bits</mat-option>
<mat-option value="Mac OS X 10.8.3 recovery">Mac OS X 10.8.3 recovery</mat-option>
<mat-option value="Mac OS X 10.13.6">Mac OS X 10.13.6</mat-option>
<mat-option value="Windows 10 Education 1703 64 bits">Windows 10 Education 1703 64 bits</mat-option>
<mat-option value="Windows 7 Professional 64 bits">Windows 7 Professional 64 bits</mat-option>
<mat-option value="Ubuntu 14.04.4 LTS 64 bits">Ubuntu 14.04.4 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Education 1511 64 bits">Windows 10 Education 1511 64 bits</mat-option>
<mat-option value="Ubuntu 18.04.2 LTS 64 bits">Ubuntu 18.04.2 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Education 1809 64 bits">Windows 10 Education 1809 64 bits</mat-option>
<mat-option value="Ubuntu 16.04.6 LTS 64 bits">Ubuntu 16.04.6 LTS 64 bits</mat-option>
<mat-option value="Ubuntu 14.04.5 LTS 64 bits">Ubuntu 14.04.5 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Education 1903 64 bits">Windows 10 Education 1903 64 bits</mat-option>
<mat-option value="Windows 10 Enterprise 1903 64 bits">Windows 10 Enterprise 1903 64 bits</mat-option>
<mat-option value="Windows 10 Pro 1903 64 bits">Windows 10 Pro 1903 64 bits</mat-option>
<mat-option value="Ubuntu 18.04.3 LTS 64 bits">Ubuntu 18.04.3 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Education 1909 64 bits">Windows 10 Education 1909 64 bits</mat-option>
<mat-option value="Ubuntu 18.04.3 LTS">Ubuntu 18.04.3 LTS</mat-option>
<mat-option value="Windows 10 Enterprise 1909 64 bits">Windows 10 Enterprise 1909 64 bits</mat-option>
<mat-option value="Ubuntu 18.04.4 LTS 64 bits">Ubuntu 18.04.4 LTS 64 bits</mat-option>
<mat-option value="Windows Boot loader 64 bits">Windows Boot loader 64 bits</mat-option>
<mat-option value="Windows 10 Education 2004 64 bits">Windows 10 Education 2004 64 bits</mat-option>
<mat-option value="Ubuntu 20.04 LTS 64 bits">Ubuntu 20.04 LTS 64 bits</mat-option>
<mat-option value="Ubuntu 20.04.1 LTS 64 bits">Ubuntu 20.04.1 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Enterprise LTSC 2019 Evaluation 1809 64 bits">Windows 10 Enterprise LTSC 2019 Evaluation 1809 64 bits</mat-option>
<mat-option value="Ubuntu 18.04.5 LTS 64 bits">Ubuntu 18.04.5 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Education 2009 64 bits">Windows 10 Education 2009 64 bits</mat-option>
<mat-option value="Ubuntu 20.04.2 LTS 64 bits">Ubuntu 20.04.2 LTS 64 bits</mat-option>
<mat-option value="GRUB2 Loader 64 bits">GRUB2 Loader 64 bits</mat-option>
<mat-option value="Windows 10 Education 2009">Windows 10 Education 2009</mat-option>
<mat-option value="Debian GNU/Linux 8 (jessie) 64 bits">Debian GNU/Linux 8 (jessie) 64 bits</mat-option>
<mat-option value="Windows 10 Enterprise 2009 64 bits">Windows 10 Enterprise 2009 64 bits</mat-option>
<mat-option value="Windows 10 Pro 2009 64 bits">Windows 10 Pro 2009 64 bits</mat-option>
<mat-option value="Windows 10 Pro 1909 64 bits">Windows 10 Pro 1909 64 bits</mat-option>
<mat-option value="Windows 10 Home 2009 64 bits">Windows 10 Home 2009 64 bits</mat-option>
<mat-option value="Ubuntu 20.04.3 LTS 64 bits">Ubuntu 20.04.3 LTS 64 bits</mat-option>
<mat-option value="Ubuntu 20.04.4 LTS 64 bits">Ubuntu 20.04.4 LTS 64 bits</mat-option>
<mat-option value="Microsoft Windows XP">Microsoft Windows XP</mat-option>
<mat-option value="Ubuntu 22.04 LTS 64 bits">Ubuntu 22.04 LTS 64 bits</mat-option>
<mat-option value="Ubuntu 22.04.1 LTS 64 bits">Ubuntu 22.04.1 LTS 64 bits</mat-option>
<mat-option value="EducaAndOS 20.04 64 bits">EducaAndOS 20.04 64 bits</mat-option>
<mat-option value="Ubuntu 20.04.5 LTS 64 bits">Ubuntu 20.04.5 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Pro N 2009 64 bits">Windows 10 Pro N 2009 64 bits</mat-option>
<mat-option value="Guadalinex Edu 20.04 64 bits">Guadalinex Edu 20.04 64 bits</mat-option>
<mat-option value="Ubuntu 18.04.6 LTS 64 bits">Ubuntu 18.04.6 LTS 64 bits</mat-option>
<mat-option value="elementary OS 6 Odin 64 bits">elementary OS 6 Odin 64 bits</mat-option>
<mat-option value="Ubuntu 22.04.2 LTS 64 bits">Ubuntu 22.04.2 LTS 64 bits</mat-option>
<mat-option value="Ubuntu 22.04.3 LTS 64 bits">Ubuntu 22.04.3 LTS 64 bits</mat-option>
<mat-option value="Windows 10 Pro for Workstations 2009 64 bits">Windows 10 Pro for Workstations 2009 64 bits</mat-option>
<mat-option value="Ubuntu 23.10 64 bits">Ubuntu 23.10 64 bits</mat-option>
<mat-option value="Ubuntu 22.04.4 LTS 64 bits">Ubuntu 22.04.4 LTS 64 bits</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<mat-label i18n="@@selectStateLabel" class="temp_filter">Estado</mat-label>
<mat-select multiple [(value)]="selectedFilterStatus">
<mat-option value="off" i18n="@@offOption">off</mat-option>
<mat-option value="initializing" i18n="@@initializingOption">initializing</mat-option>
<mat-option value="oglive" i18n="@@ogliveOption">oglive</mat-option>
<mat-option value="busy" i18n="@@busyOption">busy</mat-option>
<mat-option value="linux" i18n="@@linuxOption">linux</mat-option>
<mat-option value="linux_session" i18n="@@linuxSessionOption">linux_session</mat-option>
<mat-option value="macos" i18n="@@macosOption">macos</mat-option>
<mat-option value="windows" i18n="@@windowsOption">windows</mat-option>
<mat-option value="windows_session" i18n="@@windowsSessionOption">windows_session</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="example-full-width">
<mat-label class="temp_filter">IP</mat-label>
<input matInput placeholder="Dírección IP" i18n [(ngModel)]="filterIP">
</mat-form-field>
<mat-form-field class="example-full-width" >
<mat-label class="temp_filter">MAC</mat-label>
<input matInput placeholder="Dírección IP" i18n [(ngModel)]="filterMAC">
</mat-form-field>
</ng-container>
<button mat-raised-button color="primary" (click)="saveFilters()" i18n="@@saveFiltersButton">Guardar Filtros</button>
<button mat-raised-button color="accent" (click)="sendActions()" i18n="@@sendFiltersButton" [disabled]="selectedElements.length === 0">Enviar Acción</button>
</div>
<div class="results">
<ng-container *ngIf="filteredResults && filteredResults.length > 0; else noResults">
<mat-grid-list cols="4" rowHeight="1:1">
<mat-grid-tile *ngFor="let result of filteredResults">
<mat-card class="result-card">
<mat-checkbox (change)="onCheckboxChange($event, result.name)"></mat-checkbox>
<mat-card-title>{{ result.name }}</mat-card-title>
<mat-card-content>
<p>{{ result.type }}</p>
<p *ngIf="result.type !== 'client'" i18n="@@internalUnits">Unidades internas: {{ result.type !== 'client' ? result.children.length : 0}}</p>
<p *ngIf="result.type !== 'client'" i18n="@@clients">Clientes: {{ result.type !== 'client' ? result.clients.length : 0}}</p>
</mat-card-content>
</mat-card>
</mat-grid-tile>
</mat-grid-list>
<div class="paginator-container">
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"
[pageIndex]="page"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
</mat-paginator>
</div>
</ng-container>
<ng-template #noResults>
<p i18n="@@noResultsMessage">No hay resultados para mostrar.</p>
</ng-template>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>