opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refs #985 Added loading in tables and fix some test

oggui/translations
Alvaro Puente Mella 2024-10-23 10:39:42 +02:00
parent a0deb37a35
commit 87680723bc
32 changed files with 695 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
ogWebconsole/src/app/components/admin/roles/roles/roles.component.html
View File

@ -13,22 +13,34 @@
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
</mat-form-field>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let role"> {{ column.cell(role) }} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let role" style="text-align: center;">
<button mat-icon-button color="primary" (click)="editRole(role)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button mat-icon-button color="warn" (click)="deleteRole(role)" i18n="@@buttonDelete" [disabled]="role.permissions.includes('ROLE_SUPER_ADMIN')"><mat-icon>delete</mat-icon></button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div *ngIf="loading" class="loading-container">
<mat-spinner></mat-spinner>
</div>
<div *ngIf="!loading">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let role"> {{ column.cell(role) }} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let role" style="text-align: center;">
<button mat-icon-button color="primary" (click)="editRole(role)" i18n="@@editImage">
<mat-icon>edit</mat-icon>
</button>
<button mat-icon-button color="warn" (click)="deleteRole(role)" i18n="@@buttonDelete" [disabled]="role.permissions.includes('ROLE_SUPER_ADMIN')">
<mat-icon>delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<div class="paginator-container">
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"

18
ogWebconsole/src/app/components/admin/roles/roles/roles.component.ts
View File

@ -1,13 +1,12 @@
import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatDialog } from '@angular/material/dialog';
import { AddRoleModalComponent } from './add-role-modal/add-role-modal.component';
import { DeleteModalComponent } from '../../../../shared/delete_modal/delete-modal/delete-modal.component';
import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import {DataService} from "./data.service";
import {CreateCalendarComponent} from "../../../calendar/create-calendar/create-calendar.component";
import {PageEvent} from "@angular/material/paginator";
import { DataService } from "./data.service";
import { PageEvent } from "@angular/material/paginator";
import { DeleteModalComponent } from '../../../../shared/delete_modal/delete-modal/delete-modal.component';
import { AddRoleModalComponent } from './add-role-modal/add-role-modal.component';
@Component({
selector: 'app-roles',
@ -18,7 +17,7 @@ export class RolesComponent implements OnInit {
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
dataSource = new MatTableDataSource<any>();
filters: { [key: string]: string } = {};
loading:boolean = false;
loading: boolean = false;
length: number = 0;
itemsPerPage: number = 10;
page: number = 0;
@ -57,13 +56,16 @@ export class RolesComponent implements OnInit {
}
search() {
this.loading = true;
this.http.get<any>(`${this.apiUrl}?&page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
(data) => {
this.dataSource.data = data['hydra:member'];
this.length = data['hydra:totalItems'];
this.loading = false;
},
(error) => {
console.error('Error fetching commands', error);
console.error('Error fetching roles', error);
this.loading = false;
}
);
}
@ -114,7 +116,7 @@ export class RolesComponent implements OnInit {
});
}
onPageChange(event: any): void {
onPageChange(event: PageEvent): void {
this.page = event.pageIndex;
this.itemsPerPage = event.pageSize;
this.length = event.length;

37
ogWebconsole/src/app/components/admin/users/users/users.component.html
View File

@ -13,23 +13,30 @@
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
</mat-form-field>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let user"> {{ column.cell(user) }} </td>
</ng-container>
<div *ngIf="loading" class="loading-container">
<mat-spinner></mat-spinner>
</div>
<div *ngIf="!loading">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let user"> {{ column.cell(user) }} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let user" style="text-align: center;">
<button mat-icon-button color="primary" (click)="editUser(user)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button mat-icon-button color="warn" (click)="deleteUser(user)" i18n="@@buttonDelete"><mat-icon>delete</mat-icon></button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let user" style="text-align: center;">
<button mat-icon-button color="primary" (click)="editUser(user)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button mat-icon-button color="warn" (click)="deleteUser(user)" i18n="@@buttonDelete"><mat-icon>delete</mat-icon></button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div class="paginator-container">
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"

15
ogWebconsole/src/app/components/admin/users/users/users.component.ts
View File

@ -5,20 +5,18 @@ import { AddUserModalComponent } from './add-user-modal/add-user-modal.component
import { DeleteModalComponent } from '../../../../shared/delete_modal/delete-modal/delete-modal.component';
import { HttpClient } from '@angular/common/http';
import { ToastrService } from 'ngx-toastr';
import {DataService} from "./data.service";
import {AddRoleModalComponent} from "../../roles/roles/add-role-modal/add-role-modal.component";
import { DataService } from "./data.service";
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
dataSource = new MatTableDataSource<any>();
filters: { [key: string]: string } = {};
loading:boolean = false;
loading: boolean = false;
length: number = 0;
itemsPerPage: number = 10;
page: number = 0;
@ -61,13 +59,16 @@ export class UsersComponent implements OnInit {
}
search() {
this.loading = true;
this.http.get<any>(`${this.apiUrl}?&page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
(data) => {
this.dataSource.data = data['hydra:member'];
this.length = data['hydra:totalItems'];
this.loading = false;
},
(error) => {
console.error('Error fetching commands', error);
console.error('Error fetching users', error);
this.loading = false;
}
);
}
@ -78,7 +79,6 @@ export class UsersComponent implements OnInit {
dialogRef.componentInstance.userAdded.subscribe(() => {
this.search();
});
}
editUser(user: any): void {
@ -114,8 +114,6 @@ export class UsersComponent implements OnInit {
console.error('Error deleting user:', error);
}
});
} else {
console.log('User deletion cancelled');
}
});
}
@ -126,5 +124,4 @@ export class UsersComponent implements OnInit {
this.length = event.length;
this.search();
}
}

60
ogWebconsole/src/app/components/calendar/calendar.component.html
View File

@ -13,35 +13,43 @@
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
</mat-form-field>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let image" >
<ng-container *ngIf="column.columnDef === 'isDefault' || column.columnDef === 'installed'">
<mat-icon [color]="image[column.columnDef] ? 'primary' : 'warn'">
{{ image[column.columnDef] ? 'check_circle' : 'cancel' }}
</mat-icon>
</ng-container>
<ng-container *ngIf="column.columnDef !== 'isDefault' && column.columnDef !== 'installed' && column.columnDef !== 'downloadUrl'">
{{ column.cell(image) }}
</ng-container>
</td>
</ng-container>
<div *ngIf="loading" class="loading-container">
<mat-spinner></mat-spinner>
</div>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let calendar" style="text-align: center;">
<button mat-icon-button color="primary" (click)="editCalendar(calendar)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button *ngIf="!syncUds" mat-icon-button color="primary" (click)="sync(calendar)"><mat-icon>sync</mat-icon></button>
<button *ngIf="syncUds" mat-icon-button color="primary"><mat-spinner diameter="24"></mat-spinner></button>
<button mat-icon-button color="warn" (click)="deleteCalendar(calendar)" i18n="@@buttonDelete"><mat-icon>delete</mat-icon></button>
</td>
</ng-container>
<div *ngIf="!loading">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let image" >
<ng-container *ngIf="column.columnDef === 'isDefault' || column.columnDef === 'installed'">
<mat-icon [color]="image[column.columnDef] ? 'primary' : 'warn'">
{{ image[column.columnDef] ? 'check_circle' : 'cancel' }}
</mat-icon>
</ng-container>
<ng-container *ngIf="column.columnDef !== 'isDefault' && column.columnDef !== 'installed' && column.columnDef !== 'downloadUrl'">
{{ column.cell(image) }}
</ng-container>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let calendar" style="text-align: center;">
<button mat-icon-button color="primary" (click)="editCalendar(calendar)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button *ngIf="!syncUds" mat-icon-button color="primary" (click)="sync(calendar)"><mat-icon>sync</mat-icon></button>
<button *ngIf="syncUds" mat-icon-button color="primary"><mat-spinner diameter="24"></mat-spinner></button>
<button mat-icon-button color="warn" (click)="deleteCalendar(calendar)" i18n="@@buttonDelete"><mat-icon>delete</mat-icon></button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div class="paginator-container">
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"

6
ogWebconsole/src/app/components/calendar/calendar.component.spec.ts
View File

@ -10,8 +10,9 @@ import { MatButtonModule } from '@angular/material/button';
import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatTooltipModule } from '@angular/material/tooltip';
import { FormsModule } from '@angular/forms'; // Importa FormsModule para ngModel
import { FormsModule } from '@angular/forms';
import { CalendarComponent } from './calendar.component';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
describe('CalendarComponent', () => {
let component: CalendarComponent;
@ -32,7 +33,8 @@ describe('CalendarComponent', () => {
MatTableModule,
MatPaginatorModule,
MatTooltipModule,
FormsModule // Añade FormsModule aquí para que ngModel funcione
FormsModule,
MatProgressSpinner
]
})
.compileComponents();

25
ogWebconsole/src/app/components/calendar/calendar.component.ts
View File

@ -1,13 +1,13 @@
import {Component, OnInit, signal} from '@angular/core';
import {MatTableDataSource} from "@angular/material/table";
import {DatePipe} from "@angular/common";
import {MatDialog} from "@angular/material/dialog";
import {HttpClient} from "@angular/common/http";
import {DataService} from "./data.service";
import {ToastrService} from "ngx-toastr";
import {PageEvent} from "@angular/material/paginator";
import {CreateCalendarComponent} from "./create-calendar/create-calendar.component";
import {DeleteModalComponent} from "../../shared/delete_modal/delete-modal/delete-modal.component";
import { Component, OnInit, signal } from '@angular/core';
import { MatTableDataSource } from "@angular/material/table";
import { DatePipe } from "@angular/common";
import { MatDialog } from "@angular/material/dialog";
import { HttpClient } from "@angular/common/http";
import { DataService } from "./data.service";
import { ToastrService } from "ngx-toastr";
import { PageEvent } from "@angular/material/paginator";
import { CreateCalendarComponent } from "./create-calendar/create-calendar.component";
import { DeleteModalComponent } from "../../shared/delete_modal/delete-modal/delete-modal.component";
@Component({
selector: 'app-calendar',
@ -22,7 +22,7 @@ export class CalendarComponent implements OnInit {
itemsPerPage: number = 10;
page: number = 1;
pageSizeOptions: number[] = [5, 10, 20, 40, 100];
loading:boolean = false;
loading: boolean = false;
filters: { [key: string]: string } = {};
alertMessage: string | null = null;
readonly panelOpenState = signal(false);
@ -148,13 +148,16 @@ export class CalendarComponent implements OnInit {
}
applyFilter() {
this.loading = true;
this.http.get<any>(`${this.apiUrl}?page=${this.page}&itemsPerPage=${this.itemsPerPage}`).subscribe({
next: (response) => {
this.dataSource.data = response['hydra:member'];
this.length = response['hydra:totalItems'];
this.loading = false;
},
error: (error) => {
console.error('Error al cargar las imágenes:', error);
this.loading = false;
}
});
}

106
ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.html
View File

@ -1,57 +1,63 @@
<div class="header-container">
<h2 class="title" i18n="@@adminCommandGroupsTitle">Administrar Grupos de Comandos</h2>
<div class="command-groups-button-row">
<button mat-flat-button color="primary" (click)="openCreateCommandGroupModal()">Añadir Grupo de Comandos</button>
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div class="search-container">
<mat-form-field appearance="fill" class="search-string">
<mat-label i18n="@@searchLabel">Buscar nombre de grupo</mat-label>
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="search()" i18n-placeholder="@@searchPlaceholder">
<mat-icon matSuffix>search</mat-icon>
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
</mat-form-field>
<h2 class="title" i18n="@@adminCommandGroupsTitle">Administrar Grupos de Comandos</h2>
<div class="command-groups-button-row">
<button mat-flat-button color="primary" (click)="openCreateCommandGroupModal()">Añadir Grupo de Comandos</button>
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div class="search-container">
<mat-form-field appearance="fill" class="search-string">
<mat-label i18n="@@searchLabel">Buscar nombre de grupo</mat-label>
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="search()" i18n-placeholder="@@searchPlaceholder">
<mat-icon matSuffix>search</mat-icon>
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
</mat-form-field>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let commandGroup">
<ng-container *ngIf="column.columnDef !== 'commands'">
{{ column.cell(commandGroup) }}
</ng-container>
<div *ngIf="loading" class="loading-container">
<mat-spinner></mat-spinner>
</div>
<ng-container *ngIf="column.columnDef === 'commands'">
<button mat-button [matMenuTriggerFor]="menu">Ver comandos</button>
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let command of commandGroup.commands">
{{ command.name }}
</button>
</mat-menu>
</ng-container>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let client" style="text-align: center;">
<button mat-icon-button color="info" (click)="viewGroupDetails(client)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
<button mat-icon-button color="primary" (click)="editCommandGroup(client)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button mat-icon-button color="warn" (click)="deleteCommandGroup(client)">
<mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
</button>
</td>
</ng-container>
<div *ngIf="!loading">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let commandGroup">
<ng-container *ngIf="column.columnDef !== 'commands'">
{{ column.cell(commandGroup) }}
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<ng-container *ngIf="column.columnDef === 'commands'">
<button mat-button [matMenuTriggerFor]="menu">Ver comandos</button>
<mat-menu #menu="matMenu">
<button mat-menu-item *ngFor="let command of commandGroup.commands">
{{ command.name }}
</button>
</mat-menu>
</ng-container>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let client" style="text-align: center;">
<button mat-icon-button color="info" (click)="viewGroupDetails(client)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
<button mat-icon-button color="primary" (click)="editCommandGroup(client)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button mat-icon-button color="warn" (click)="deleteCommandGroup(client)">
<mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<div class="paginator-container">
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"
[pageIndex]="page"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
</mat-paginator>
</div>
<div class="paginator-container">
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"
[pageIndex]="page"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
</mat-paginator>
</div>

10
ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.ts
View File

@ -2,11 +2,11 @@ import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatDialog } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
import { CreateCommandGroupComponent } from './create-command-group/create-command-group.component'
import { CreateCommandGroupComponent } from './create-command-group/create-command-group.component';
import { DetailCommandGroupComponent } from './detail-command-group/detail-command-group.component';
import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
import {MatTableDataSource} from "@angular/material/table";
import {DatePipe} from "@angular/common";
import { MatTableDataSource } from "@angular/material/table";
import { DatePipe } from "@angular/common";
@Component({
selector: 'app-commands-groups',
@ -22,6 +22,7 @@ export class CommandsGroupsComponent implements OnInit {
page: number = 0;
pageSizeOptions: number[] = [10, 20, 40, 100];
datePipe: DatePipe = new DatePipe('es-ES');
loading: boolean = false;
columns = [
{
columnDef: 'id',
@ -54,13 +55,16 @@ export class CommandsGroupsComponent implements OnInit {
}
search(): void {
this.loading = true;
this.http.get<any>(`${this.apiUrl}?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
(data) => {
this.dataSource.data = data['hydra:member'];
this.length = data['hydra:totalItems'];
this.loading = false;
},
(error) => {
console.error('Error fetching command groups', error);
this.loading = false;
}
);
}

9
ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html
View File

@ -1,6 +1,10 @@
<h2 mat-dialog-title>{{ editing ? 'Editar' : 'Crear' }} grupo de comando</h2>
<mat-dialog-content class="form-container">
<form class="command-group-form" (ngSubmit)="onSubmit()">
<div *ngIf="loading" class="loading-container">
<mat-spinner></mat-spinner>
</div>
<form *ngIf="!loading" class="command-group-form" (ngSubmit)="onSubmit()">
<mat-form-field>
<mat-label>Nombre del Grupo</mat-label>
<input matInput [(ngModel)]="groupName" name="groupName" required />
@ -11,7 +15,7 @@
<div class="command-selection">
<div class="available-commands">
<h3>Comandos Disponibles</h3>
<div class="table-wrapper"> <!-- Agregar este contenedor -->
<div class="table-wrapper">
<table mat-table [dataSource]="availableCommands" class="mat-elevation-z8">
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Nombre </th>
@ -57,4 +61,3 @@
<button mat-button (click)="close()">Cancelar</button>
<button mat-button (click)="onSubmit()" cdkFocusInitial> Guardar </button>
</mat-dialog-actions>

4
ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.ts
View File

@ -15,6 +15,7 @@ export class CreateCommandGroupComponent implements OnInit {
groupName: string = '';
enabled: boolean = true;
editing: boolean = false;
loading: boolean = false;
private apiUrl = `${this.baseUrl}/commands`;
constructor(
@ -34,12 +35,15 @@ export class CreateCommandGroupComponent implements OnInit {
}
loadAvailableCommands(): void {
this.loading = true;
this.http.get<any>(this.apiUrl).subscribe(
(data) => {
this.availableCommands = data['hydra:member'];
this.loading = false;
},
(error) => {
console.error('Error fetching available commands', error);
this.loading = false;
}
);
}

18
ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.html
View File

@ -1,16 +1,21 @@
<div class="detail-command-group-container">
<h2>Detalles del Grupo de Comandos</h2>
<mat-card>
<!-- Indicador de carga -->
<div *ngIf="loading" class="loading-container">
<mat-spinner></mat-spinner>
</div>
<mat-card *ngIf="!loading">
<mat-card-header>
<mat-card-title>{{ data.name }}</mat-card-title>
<mat-card-subtitle>Creado por: {{ data.createdBy }}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p><strong>ID del Grupo:</strong> {{ data.uuid }}</p>
<p><strong>Fecha de Creación:</strong> {{ data.createdAt | date:'short' }}</p>
<h3>Comandos Incluidos:</h3>
<table mat-table [dataSource]="data.commands" class="mat-elevation-z8">
<ng-container matColumnDef="name">
@ -27,11 +32,10 @@
<tr mat-row *matRowDef="let row; columns: ['name', 'uuid'];"></tr>
</table>
</mat-card-content>
</mat-card>
<!-- Sección para seleccionar clientes -->
<div class="additional-section" *ngIf="showClientSelect">
<div class="additional-section" *ngIf="showClientSelect && !loading">
<form [formGroup]="form">
<h4>Selecciona los clientes:</h4>
<mat-form-field appearance="fill">
@ -48,7 +52,7 @@
</form>
</div>
<div class="command-group-actions">
<div class="command-group-actions" *ngIf="!loading">
<button mat-flat-button color="primary" (click)="toggleClientSelect()">
{{ showClientSelect ? 'Ejecutar' : 'Programar Ejecución' }}
</button>

27
ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.ts
View File

@ -13,8 +13,9 @@ export class DetailCommandGroupComponent implements OnInit {
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
form!: FormGroup;
clients: any[] = [];
showClientSelect = false; // Ocultar selección de clientes inicialmente
showClientSelect = false;
canExecute = false;
loading: boolean = false;
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
@ -29,17 +30,28 @@ export class DetailCommandGroupComponent implements OnInit {
selectedClients: [[], Validators.required],
});
// Obtener la lista de clientes
this.http.get<any>(`${this.baseUrl}/clients?page=1&itemsPerPage=30`).subscribe(response => {
this.clients = response['hydra:member'];
this.loadClients();
}
loadClients(): void {
this.loading = true;
this.http.get<any>(`${this.baseUrl}/clients?page=1&itemsPerPage=30`).subscribe({
next: (response) => {
this.clients = response['hydra:member'];
this.loading = false;
},
error: (error) => {
console.error('Error fetching clients:', error);
this.loading = false;
}
});
}
toggleClientSelect(): void {
if (!this.showClientSelect) {
this.showClientSelect = true; // Mostrar selección de clientes
this.showClientSelect = true;
} else {
this.execute(); // Ejecutar si ya está visible
this.execute();
}
}
@ -50,13 +62,16 @@ export class DetailCommandGroupComponent implements OnInit {
};
const apiUrl = `${this.baseUrl}/command-groups/${this.data.uuid}/execute`;
this.loading = true;
this.http.post(apiUrl, payload).subscribe({
next: () => {
this.dialogRef.close();
this.toastService.success('Grupo de comandos ejecutado exitosamente');
this.loading = false;
},
error: (error) => {
console.error('Error ejecutando grupo de comandos:', error);
this.loading = false;
}
});
} else {

74
ogWebconsole/src/app/components/commands/commands-task/commands-task.component.html
View File

@ -16,46 +16,52 @@
</mat-form-field>
</div>
<table mat-table [dataSource]="tasks" class="mat-elevation-z8">
<ng-container matColumnDef="taskid">
<th mat-header-cell *matHeaderCellDef> Id</th>
<td mat-cell *matCellDef="let task"> {{ task.id }} </td>
</ng-container>
<div *ngIf="loading" class="loading-container">
<mat-spinner></mat-spinner>
</div>
<ng-container matColumnDef="notes">
<th mat-header-cell *matHeaderCellDef> Info</th>
<td mat-cell *matCellDef="let task"> {{ task.notes }} </td>
</ng-container>
<div *ngIf="!loading">
<table mat-table [dataSource]="tasks" class="mat-elevation-z8">
<ng-container matColumnDef="taskid">
<th mat-header-cell *matHeaderCellDef> Id</th>
<td mat-cell *matCellDef="let task"> {{ task.id }} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Creado por </th>
<td mat-cell *matCellDef="let task"> {{ task.createdBy }} </td>
</ng-container>
<ng-container matColumnDef="notes">
<th mat-header-cell *matHeaderCellDef> Info</th>
<td mat-cell *matCellDef="let task"> {{ task.notes }} </td>
</ng-container>
<ng-container matColumnDef="scheduledDate">
<th mat-header-cell *matHeaderCellDef> Fecha de Ejecución </th>
<td mat-cell *matCellDef="let task"> {{ task.dateTime | date:'short' }} </td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Creado por </th>
<td mat-cell *matCellDef="let task"> {{ task.createdBy }} </td>
</ng-container>
<ng-container matColumnDef="enabled">
<th mat-header-cell *matHeaderCellDef> Estado </th>
<td mat-cell *matCellDef="let task"> {{ task.enabled ? 'Habilitado' : 'Deshabilitado' }} </td>
</ng-container>
<ng-container matColumnDef="scheduledDate">
<th mat-header-cell *matHeaderCellDef> Fecha de Ejecución </th>
<td mat-cell *matCellDef="let task"> {{ task.dateTime | date:'short' }} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let task" style="text-align: center;">
<button mat-icon-button color="info" (click)="viewTaskDetails(task)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
<button mat-icon-button color="primary" (click)="editTask(task)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button mat-icon-button color="warn" (click)="deleteTask(task)">
<mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
</button>
</td>
</ng-container>
<ng-container matColumnDef="enabled">
<th mat-header-cell *matHeaderCellDef> Estado </th>
<td mat-cell *matCellDef="let task"> {{ task.enabled ? 'Habilitado' : 'Deshabilitado' }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let task" style="text-align: center;">
<button mat-icon-button color="info" (click)="viewTaskDetails(task)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
<button mat-icon-button color="primary" (click)="editTask(task)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button mat-icon-button color="warn" (click)="deleteTask(task)">
<mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"

8
ogWebconsole/src/app/components/commands/commands-task/commands-task.component.ts
View File

@ -19,7 +19,8 @@ export class CommandsTaskComponent implements OnInit {
itemsPerPage: number = 10;
page: number = 1;
pageSizeOptions: number[] = [5, 10, 20, 40, 100];
displayedColumns: string[] = ['taskid','notes','name', 'scheduledDate', 'enabled', 'actions'];
displayedColumns: string[] = ['taskid', 'notes', 'name', 'scheduledDate', 'enabled', 'actions'];
loading: boolean = false;
private apiUrl = `${this.baseUrl}/command-tasks`;
constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) {}
@ -34,13 +35,16 @@ export class CommandsTaskComponent implements OnInit {
}
loadTasks(): void {
this.loading = true;
this.http.get<any>(`${this.apiUrl}?page=${this.page}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
(data) => {
this.tasks = data['hydra:member'];
this.length = data['hydra:totalItems'];
this.loading = false;
},
(error) => {
console.error('Error fetching tasks', error);
this.loading = false;
}
);
}
@ -48,7 +52,7 @@ export class CommandsTaskComponent implements OnInit {
viewTaskDetails(task: any): void {
this.dialog.open(DetailTaskComponent, {
width: '800px',
data: {task},
data: { task },
}).afterClosed().subscribe(() => this.loadTasks());
}

4
ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.ts
View File

@ -13,11 +13,9 @@ export class DetailTaskComponent {
public dialogRef: MatDialogRef<DetailTaskComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
) {
this.task = data.task; // Asignamos la tarea que viene en el modal
console.log('tasaas',this.task);
this.task = data.task;
}
// Método opcional para cerrar el modal
closeDialog(): void {
this.dialogRef.close();
}

86
ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.html
View File

@ -5,6 +5,7 @@
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div class="search-container">
<mat-form-field appearance="fill" class="search-select">
<input type="text" matInput [formControl]="clientControl" [matAutocomplete]="clientAuto" placeholder="Seleccione un cliente">
@ -15,7 +16,6 @@
</mat-autocomplete>
</mat-form-field>
<!-- Autocomplete para seleccionar un comando -->
<mat-form-field appearance="fill" class="search-select">
<input type="text" matInput [formControl]="commandControl" [matAutocomplete]="commandAuto" placeholder="Seleccione un comando">
<mat-autocomplete #commandAuto="matAutocomplete" [displayWith]="displayFnCommand" (optionSelected)="onOptionCommandSelected($event.option.value)">
@ -26,19 +26,79 @@
</mat-form-field>
</div>
<table mat-table [dataSource]="traces" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let trace" >
<ng-container >
{{ column.cell(trace) }}
</ng-container>
</td>
</ng-container>
<!-- Indicador de carga -->
<div *ngIf="loading" class="loading-container">
<mat-spinner></mat-spinner>
</div>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<!-- Tabla de trazas -->
<div *ngIf="!loading">
<table mat-table [dataSource]="traces" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let trace">
{{ column.cell(trace) }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<div class="paginator-container">
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"
[pageIndex]="page"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
</mat-paginator>
</div>
<div class="header-container">
<h2 class="title" i18n="@@adminCommandsTitle">Trazas de comandos y procedimientos</h2>
<div class="images-button-row">
<button mat-flat-button color="primary" (click)="resetFilters()">Reiniciar filtros</button>
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div class="search-container">
<mat-form-field appearance="fill" class="search-select">
<input type="text" matInput [formControl]="clientControl" [matAutocomplete]="clientAuto" placeholder="Seleccione un cliente">
<mat-autocomplete #clientAuto="matAutocomplete" [displayWith]="displayFnClient" (optionSelected)="onOptionClientSelected($event.option.value)">
<mat-option *ngFor="let client of filteredClients | async" [value]="client">
{{ client.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field appearance="fill" class="search-select">
<input type="text" matInput [formControl]="commandControl" [matAutocomplete]="commandAuto" placeholder="Seleccione un comando">
<mat-autocomplete #commandAuto="matAutocomplete" [displayWith]="displayFnCommand" (optionSelected)="onOptionCommandSelected($event.option.value)">
<mat-option *ngFor="let command of filteredCommands | async" [value]="command">
{{ command.name }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div *ngIf="loading" class="loading-container">
<mat-spinner></mat-spinner>
</div>
<div *ngIf="!loading">
<table mat-table [dataSource]="traces" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let trace">
{{ column.cell(trace) }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<div class="paginator-container">
<mat-paginator [length]="length"

23
ogWebconsole/src/app/components/commands/commands-task/task-logs/task-logs.component.ts
View File

@ -1,9 +1,9 @@
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import {Observable, startWith} from 'rxjs';
import {FormControl} from "@angular/forms";
import {map} from "rxjs/operators";
import {DatePipe} from "@angular/common";
import { Observable } from 'rxjs';
import { FormControl } from '@angular/forms';
import { map, startWith } from 'rxjs/operators';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-task-logs',
@ -46,7 +46,7 @@ export class TaskLogsComponent implements OnInit {
},
{
columnDef: 'executedAt',
header: 'Programacion de ejecución',
header: 'Programación de ejecución',
cell: (trace: any) => `${this.datePipe.transform(trace.executedAt, 'dd/MM/yyyy hh:mm:ss')}`,
},
{
@ -110,40 +110,45 @@ export class TaskLogsComponent implements OnInit {
}
loadTraces(): void {
this.loading = true;
const url = `${this.baseUrl}/traces?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`;
this.http.get<any>(url, { params: this.filters }).subscribe(
(data) => {
this.traces = data['hydra:member'];
this.length = data['hydra:totalItems'];
this.groupedTraces = this.groupByCommandId(this.traces);
this.loading = false;
},
(error) => {
console.error('Error fetching traces', error);
this.loading = false;
}
);
}
loadCommands() {
this.http.get<any>( `${this.baseUrl}/commands?&page=1&itemsPerPage=10000`).subscribe(
this.loading = true;
this.http.get<any>(`${this.baseUrl}/commands?&page=1&itemsPerPage=10000`).subscribe(
response => {
this.commands = response['hydra:member'];
this.loading = false;
},
error => {
console.error('Error fetching parent units:', error);
console.error('Error fetching commands:', error);
this.loading = false;
}
);
}
loadClients() {
this.http.get<any>( `${this.baseUrl}/clients?&page=1&itemsPerPage=10000`).subscribe(
this.loading = true;
this.http.get<any>(`${this.baseUrl}/clients?&page=1&itemsPerPage=10000`).subscribe(
response => {
this.clients = response['hydra:member'];
this.loading = false;
},
error => {
console.error('Error fetching parent units:', error);
console.error('Error fetching clients:', error);
this.loading = false;
}
);

57
ogWebconsole/src/app/components/commands/main-commands/commands.component.html
View File

@ -5,6 +5,7 @@
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div class="search-container">
<mat-form-field appearance="fill" class="search-string">
<mat-label i18n="@@searchLabel">Buscar nombre de comando</mat-label>
@ -14,34 +15,38 @@
</mat-form-field>
</div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let command" >
<ng-container *ngIf="column.columnDef !== 'readOnly'">
{{ column.cell(command) }}
</ng-container>
<ng-container *ngIf="column.columnDef === 'readOnly'" >
<mat-chip *ngIf="command.readOnly" class="mat-chip-readonly-true"><mat-icon style="color:white;">check</mat-icon></mat-chip>
<mat-chip *ngIf="!command.readOnly" class="mat-chip-readonly-false"> <mat-icon style="color:white;">close</mat-icon></mat-chip>
</ng-container>
</td>
</ng-container>
<div *ngIf="loading" class="loading-container">
<mat-spinner></mat-spinner>
</div>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let client" style="text-align: center;">
<button mat-icon-button color="info" (click)="viewDetails($event, client)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
<button mat-icon-button color="primary" (click)="editCommand($event, client)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button mat-icon-button color="warn" (click)="deleteCommand($event, client)">
<mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
</button>
</td>
</ng-container>
<div *ngIf="!loading">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<td mat-cell *matCellDef="let command">
<ng-container *ngIf="column.columnDef !== 'readOnly'">
{{ column.cell(command) }}
</ng-container>
<ng-container *ngIf="column.columnDef === 'readOnly'">
<mat-chip *ngIf="command.readOnly" class="mat-chip-readonly-true"><mat-icon style="color:white;">check</mat-icon></mat-chip>
<mat-chip *ngIf="!command.readOnly" class="mat-chip-readonly-false"><mat-icon style="color:white;">close</mat-icon></mat-chip>
</ng-container>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let client" style="text-align: center;">
<button mat-icon-button color="info" (click)="viewDetails($event, client)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
<button mat-icon-button color="primary" (click)="editCommand($event, client)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
<button mat-icon-button color="warn" (click)="deleteCommand($event, client)"><mat-icon i18n="@@deleteElementTooltip">delete</mat-icon></button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
<div class="paginator-container">
<mat-paginator [length]="length"

12
ogWebconsole/src/app/components/commands/main-commands/commands.component.ts
View File

@ -5,8 +5,8 @@ import { ToastrService } from 'ngx-toastr';
import { CommandDetailComponent } from './detail-command/command-detail.component';
import { CreateCommandComponent } from './create-command/create-command.component';
import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
import {MatTableDataSource} from "@angular/material/table";
import {DatePipe} from "@angular/common";
import { MatTableDataSource } from '@angular/material/table';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-commands',
@ -22,6 +22,7 @@ export class CommandsComponent implements OnInit {
page: number = 0;
pageSizeOptions: number[] = [10, 20, 40, 100];
datePipe: DatePipe = new DatePipe('es-ES');
loading: boolean = false;
columns = [
{
columnDef: 'id',
@ -54,13 +55,16 @@ export class CommandsComponent implements OnInit {
}
search(): void {
this.http.get<any>(`${this.apiUrl}?page=${this.page +1 }&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
this.loading = true;
this.http.get<any>(`${this.apiUrl}?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
(data) => {
this.dataSource.data = data['hydra:member'];
this.length = data['hydra:totalItems'];
this.loading = false;
},
(error) => {
console.error('Error fetching commands', error);
this.loading = false;
}
);
}
@ -87,7 +91,7 @@ export class CommandsComponent implements OnInit {
}).afterClosed().subscribe(() => this.search());
}
deleteCommand(event: MouseEvent,command: any): void {
deleteCommand(event: MouseEvent, command: any): void {
event.stopPropagation();
this.dialog.open(DeleteModalComponent, {
width: '300px',

19
ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html
View File

@ -1,4 +1,14 @@
<div class="client-info">
<div class="header-container">
<h2 class="title">Administrar Cliente</h2>
</div>
<mat-divider class="divider"></mat-divider>
<div *ngIf="loading" class="loading-container">
<mat-spinner></mat-spinner>
</div>
<div *ngIf="!loading" class="client-info">
<div class="info-section">
<mat-tab-group dynamicHeight>
<mat-tab label="Datos generales">
@ -30,8 +40,8 @@
<div class="second-section">
<div class="buttons-row">
<button mat-flat-button color="primary" (click)="togglePartitionAssistant()">Asistente a particionado</button>
<button mat-flat-button color="primary" (click)="showBootImage()">Restaurar imagen</button>
<button mat-flat-button color="primary" (click)="togglePartitionAssistant()" [disabled]="isDiskUsageEmpty">Asistente particionado</button>
<button mat-flat-button color="primary" (click)="showBootImage()" [disabled]="isDiskUsageEmpty">Restaurar imagen</button>
</div>
<div class="info-section">
@ -61,10 +71,9 @@
</div>
</div>
<div class="assistants-container" *ngIf="isPartitionAssistantVisible" #assistantContainer>
<app-partition-assistant [data]="clientData" [clientUuid]="clientUuid"></app-partition-assistant>
</div>
<div class="assistants-container" *ngIf="isBootImageVisible" #assistantContainer>
<div *ngIf="isBootImageVisible" #assistantContainer>
<app-restore-image [data]="clientData"></app-restore-image>
</div>

13
ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts
View File

@ -1,5 +1,6 @@
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
interface ClientInfo {
property: string;
value: any;
@ -18,11 +19,12 @@ export class ClientMainViewComponent implements OnInit {
isPartitionAssistantVisible: boolean = false;
isBootImageVisible: boolean = false;
isDiskUsageVisible: boolean = true;
generalData: ClientInfo[] = [];
networkData: ClientInfo[] = [];
classroomData: ClientInfo[] = [];
diskUsageData: any[] = [];
isDiskUsageEmpty: boolean = true;
loading: boolean = true; // Variable para controlar el estado de carga
constructor(private http: HttpClient) {
const url = window.location.href;
@ -36,6 +38,7 @@ export class ClientMainViewComponent implements OnInit {
this.updateNetworkData();
this.updateClassroomData();
this.calculateDiskUsage();
this.loading = false; // Desactivar el estado de carga cuando los datos se hayan procesado
}
updateGeneralData() {
@ -52,6 +55,7 @@ export class ClientMainViewComponent implements OnInit {
{ property: 'Creado por', value: this.clientData?.createdBy || '' }
];
}
updateNetworkData() {
this.networkData = [
{ property: 'Perfil hardware', value: this.clientData?.hardwareProfile?.description || '' },
@ -95,7 +99,7 @@ export class ClientMainViewComponent implements OnInit {
if (partition.partitionNumber === 0) {
diskData!.total = partition.size / (1024 * 1024);
} else {
diskData!.used += partition.size / (1024 * 1024);
diskData!.used += partition.size / (1024 * 1024);
}
});
@ -103,15 +107,16 @@ export class ClientMainViewComponent implements OnInit {
const percentage = total > 0 ? Math.round((used / total) * 100) : 0;
return { diskNumber, total, used, percentage };
});
this.isDiskUsageEmpty = this.diskUsageData.length === 0;
}
togglePartitionAssistant() {
this.isPartitionAssistantVisible = !this.isPartitionAssistantVisible;
this.isBootImageVisible = false
this.isBootImageVisible = false;
if (this.isPartitionAssistantVisible) {
setTimeout(() => {
this.assistantContainer.nativeElement.scrollIntoView({ behavior: 'smooth' });
}, 0);
}, 200);
}
}

7
ogWebconsole/src/app/components/groups/components/client-tab-view/client-tab-view.component.html
View File

@ -34,6 +34,12 @@
</mat-select>
</mat-form-field>
</div>
<div *ngIf="!loading" class="loading-container">
<mat-spinner></mat-spinner>
</div>
<div *ngIf="loading">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
@ -78,3 +84,4 @@
(page)="onPageChange($event)">
</mat-paginator>
</div>
</div>

35
ogWebconsole/src/app/components/ogboot/pxe/add-clients-to-pxe/add-clients-to-pxe.component.spec.ts
View File

@ -1,6 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { AddClientsToPxeComponent } from './add-clients-to-pxe.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatOptionModule } from '@angular/material/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
describe('AddClientsToPxeComponent', () => {
let component: AddClientsToPxeComponent;
@ -8,7 +23,25 @@ describe('AddClientsToPxeComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [AddClientsToPxeComponent]
declarations: [AddClientsToPxeComponent],
imports: [
HttpClientTestingModule,
ToastrModule.forRoot(),
BrowserAnimationsModule,
MatDividerModule,
MatFormFieldModule,
MatInputModule,
MatIconModule,
MatButtonModule,
MatTableModule,
MatPaginatorModule,
MatTooltipModule,
FormsModule,
MatProgressSpinner,
MatOptionModule,
ReactiveFormsModule,
MatSelectModule
]
})
.compileComponents();

37
ogWebconsole/src/app/components/ogboot/pxe/clients/clients.component.spec.ts
View File

@ -1,6 +1,22 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ClientsComponent } from './clients.component';
import { MatInputModule } from '@angular/material/input';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatOptionModule } from '@angular/material/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
import { MatDialogRef } from '@angular/material/dialog';
describe('ClientsComponent', () => {
let component: ClientsComponent;
@ -8,7 +24,26 @@ describe('ClientsComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ClientsComponent]
declarations: [ClientsComponent],
imports: [
HttpClientTestingModule,
ToastrModule.forRoot(),
BrowserAnimationsModule,
MatDividerModule,
MatFormFieldModule,
MatInputModule,
MatIconModule,
MatButtonModule,
MatTableModule,
MatPaginatorModule,
MatTooltipModule,
FormsModule,
MatProgressSpinner,
MatOptionModule,
ReactiveFormsModule,
MatSelectModule,
MatDialogRef
]
})
.compileComponents();

35
ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/server-info-dialog/server-info-dialog.component.spec.ts
View File

@ -1,6 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ServerInfoDialogComponent } from './server-info-dialog.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatOptionModule } from '@angular/material/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
describe('ServerInfoDialogComponent', () => {
let component: ServerInfoDialogComponent;
@ -8,7 +23,25 @@ describe('ServerInfoDialogComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ServerInfoDialogComponent]
declarations: [ServerInfoDialogComponent],
imports: [
HttpClientTestingModule,
ToastrModule.forRoot(),
BrowserAnimationsModule,
MatDividerModule,
MatFormFieldModule,
MatInputModule,
MatIconModule,
MatButtonModule,
MatTableModule,
MatPaginatorModule,
MatTooltipModule,
FormsModule,
MatProgressSpinner,
MatOptionModule,
ReactiveFormsModule,
MatSelectModule
]
})
.compileComponents();

30
ogWebconsole/src/app/components/operative-system/operative-system.component.spec.ts
View File

@ -1,6 +1,19 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { OperativeSystemComponent } from './operative-system.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
describe('OperativeSystemComponent', () => {
let component: OperativeSystemComponent;
@ -8,7 +21,22 @@ describe('OperativeSystemComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [OperativeSystemComponent]
declarations: [OperativeSystemComponent],
imports: [
HttpClientTestingModule,
ToastrModule.forRoot(),
BrowserAnimationsModule,
MatDividerModule,
MatFormFieldModule,
MatInputModule,
MatIconModule,
MatButtonModule,
MatTableModule,
MatPaginatorModule,
MatTooltipModule,
FormsModule,
MatProgressSpinner
]
})
.compileComponents();

35
ogWebconsole/src/app/components/software-profile/software-profile.component.spec.ts
View File

@ -1,6 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SoftwareProfileComponent } from './software-profile.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatOptionModule } from '@angular/material/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
describe('SoftwareProfileComponent', () => {
let component: SoftwareProfileComponent;
@ -8,7 +23,25 @@ describe('SoftwareProfileComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [SoftwareProfileComponent]
declarations: [SoftwareProfileComponent],
imports: [
HttpClientTestingModule,
ToastrModule.forRoot(),
BrowserAnimationsModule,
MatDividerModule,
MatFormFieldModule,
MatInputModule,
MatIconModule,
MatButtonModule,
MatTableModule,
MatPaginatorModule,
MatTooltipModule,
FormsModule,
MatProgressSpinner,
MatOptionModule,
ReactiveFormsModule,
MatSelectModule
]
})
.compileComponents();

35
ogWebconsole/src/app/components/software/create-software/create-software.component.spec.ts
View File

@ -1,6 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CreateSoftwareComponent } from './create-software.component';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatOptionModule } from '@angular/material/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
describe('CreateSoftwareComponent', () => {
let component: CreateSoftwareComponent;
@ -8,7 +23,25 @@ describe('CreateSoftwareComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [CreateSoftwareComponent]
declarations: [CreateSoftwareComponent],
imports: [
HttpClientTestingModule,
ToastrModule.forRoot(),
BrowserAnimationsModule,
MatDividerModule,
MatFormFieldModule,
MatInputModule,
MatIconModule,
MatButtonModule,
MatTableModule,
MatPaginatorModule,
MatTooltipModule,
FormsModule,
MatProgressSpinner,
MatOptionModule,
ReactiveFormsModule,
MatSelectModule
]
})
.compileComponents();

4
ogWebconsole/src/app/components/software/software.component.html
View File

@ -8,13 +8,13 @@
<div class="search-container">
<mat-form-field appearance="fill" class="search-string">
<mat-label i18n="@@searchLabel">Buscar nombre de software</mat-label>
<input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="search()" i18n-placeholder="@@searchPlaceholder">
<input matInput name="searchBar" placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="search()" i18n-placeholder="@@searchPlaceholder">
<mat-icon matSuffix>search</mat-icon>
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
</mat-form-field>
<mat-form-field appearance="fill" class="search-boolean">
<mat-label i18n="@@searchLabel">Buscar por tipo</mat-label>
<mat-select [(ngModel)]="filters['type']" (selectionChange)="search()" placeholder="Seleccionar opción">
<mat-select name="searchType" [(ngModel)]="filters['type']" (selectionChange)="search()" placeholder="Seleccionar opción">
<mat-option [value]="'application'">Aplicación</mat-option>
<mat-option [value]="'operative-system'">Sistema operativo</mat-option>
<mat-option [value]="'file'">Sistema de ficheros</mat-option>

37
ogWebconsole/src/app/components/software/software.component.spec.ts
View File

@ -1,6 +1,21 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SoftwareComponent } from './software.component';
import { MatDividerModule } from '@angular/material/divider';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinner } from '@angular/material/progress-spinner';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
import { MatOptionModule } from '@angular/material/core';
import { ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
describe('SoftwareComponent', () => {
let component: SoftwareComponent;
@ -8,7 +23,25 @@ describe('SoftwareComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [SoftwareComponent]
declarations: [SoftwareComponent],
imports: [
HttpClientTestingModule,
ToastrModule.forRoot(),
BrowserAnimationsModule,
MatDividerModule,
MatFormFieldModule,
MatInputModule,
MatIconModule,
MatButtonModule,
MatTableModule,
MatPaginatorModule,
MatTooltipModule,
FormsModule,
MatProgressSpinner,
MatOptionModule,
ReactiveFormsModule,
MatSelectModule
]
})
.compileComponents();

32
ogWebconsole/src/styles.css
View File

@ -2,3 +2,35 @@
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
/* Clase general para el contenedor de carga */
.loading-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
background-color: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
width: 100vw;
height: 100vh;
}
/* Spinner de Angular Material */
.mat-spinner {
width: 100px;
height: 100px;
}
/* Texto que acompaña al spinner */
.loading-container p {
margin-top: 20px;
font-size: 1.2rem;
font-weight: bold;
color: #555;
}