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

Refactor commandGroups

oggui/calendar
Manuel Aranda Rosales 2024-10-03 16:00:27 +02:00
parent 011094b232
commit a6f0d30c21
10 changed files with 271 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
ogWebconsole/src/app/components/commands/commands-groups/commands-groups.component.css
View File

@ -1,49 +1,33 @@
.commands-list { .title {
margin-bottom: 20px; font-size: 24px;
} }
.command-item { .calendar-button-row {
cursor: pointer; display: flex;
margin-bottom: 10px; justify-content: flex-start;
padding: 10px; margin-top: 16px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
} }
.command-item:hover { .divider {
background-color: #e9e9e9; margin: 20px 0;
} }
.command-details { .lists-container {
padding: 20px; padding: 16px;
border: 1px solid #ddd;
background-color: #f4f4f4;
border-radius: 4px;
} }
.script-display { .imagesLists-container {
margin-top: 20px; flex: 1;
background-color: #000;
color: #fff;
padding: 10px;
border-radius: 4px;
} }
pre { .card.unidad-card {
margin: 0; height: 100%;
font-family: 'Courier New', Courier, monospace; box-sizing: border-box;
} }
.mat-elevation-z8{ table {
margin-top: 20px; width: 100%;
} margin-top: 50px;
tr:hover {
background-color: rgba(219, 219, 219, 0.219);
}
.detailBtn{
cursor: pointer;
} }
.search-container { .search-container {
@ -65,6 +49,30 @@
padding: 5px; padding: 5px;
} }
.command-groups-button-row{ .header-container {
margin-bottom: 10px; display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
} }
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
.paginator-container {
display: flex;
justify-content: end;
margin-bottom: 30px;
}
.mat-chip-readonly-true {
background-color: #4CAF50 !important;
color: white !important;
}
.mat-chip-readonly-false {
background-color: #F44336 !important;
color: white !important;
}

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

@ -14,46 +14,32 @@
</mat-form-field> </mat-form-field>
</div> </div>
<table mat-table [dataSource]="commandGroups" class="mat-elevation-z8"> <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Nombre del grupo columna --> <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
<ng-container matColumnDef="name"> <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
<th mat-header-cell *matHeaderCellDef> Nombre del grupo </th> <td mat-cell *matCellDef="let commandGroup">
<td mat-cell *matCellDef="let group"> {{ group.name }} </td> <ng-container *ngIf="column.columnDef !== 'commands'">
{{ column.cell(commandGroup) }}
</ng-container> </ng-container>
<!-- Creado por columna --> <ng-container *ngIf="column.columnDef === 'commands'">
<ng-container matColumnDef="createdBy"> <button mat-button [matMenuTriggerFor]="menu">Ver comandos</button>
<th mat-header-cell *matHeaderCellDef> Creado por </th>
<td mat-cell *matCellDef="let group"> {{ group.createdBy }} </td>
</ng-container>
<!-- Fecha de creación columna -->
<ng-container matColumnDef="createdAt">
<th mat-header-cell *matHeaderCellDef> Fecha de creación </th>
<td mat-cell *matCellDef="let group"> {{ group.createdAt | date:'short' }} </td>
</ng-container>
<!-- Columna para el menú de acciones -->
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Acciones </th>
<td mat-cell *matCellDef="let group">
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<button mat-menu-item (click)="viewGroupDetails(group)"> <button mat-menu-item *ngFor="let command of commandGroup.commands">
<mat-icon>info</mat-icon> {{ command.name }}
<span>Detalles</span>
</button>
<button mat-menu-item (click)="editCommandGroup(group)">
<mat-icon>edit</mat-icon>
<span>Editar</span>
</button>
<button mat-menu-item (click)="deleteCommandGroup(group)">
<mat-icon>delete</mat-icon>
<span>Eliminar</span>
</button> </button>
</mat-menu> </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> </td>
</ng-container> </ng-container>
@ -69,4 +55,3 @@
(page)="onPageChange($event)"> (page)="onPageChange($event)">
</mat-paginator> </mat-paginator>
</div> </div>

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

@ -5,6 +5,8 @@ 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 { DetailCommandGroupComponent } from './detail-command-group/detail-command-group.component';
import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component'; import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/delete-modal.component';
import {MatTableDataSource} from "@angular/material/table";
import {DatePipe} from "@angular/common";
@Component({ @Component({
selector: 'app-commands-groups', selector: 'app-commands-groups',
@ -13,13 +15,36 @@ import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/
}) })
export class CommandsGroupsComponent implements OnInit { export class CommandsGroupsComponent implements OnInit {
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL; baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
commandGroups: any[] = []; dataSource = new MatTableDataSource<any>();
filters: { [key: string]: string | boolean } = {}; filters: { [key: string]: string | boolean } = {};
length: number = 0; length: number = 0;
itemsPerPage: number = 10; itemsPerPage: number = 20;
page: number = 1; page: number = 0;
pageSizeOptions: number[] = [5, 10, 20, 40, 100]; pageSizeOptions: number[] = [10, 20, 40, 100];
displayedColumns: string[] = ['name', 'createdBy', 'createdAt', 'actions']; datePipe: DatePipe = new DatePipe('es-ES');
columns = [
{
columnDef: 'id',
header: 'ID',
cell: (group: any) => `${group.id}`,
},
{
columnDef: 'name',
header: 'Nombre',
cell: (group: any) => `${group.name}`
},
{
columnDef: 'commands',
header: 'Lista de comandos',
cell: (group: any) => `${group.commands}`
},
{
columnDef: 'createdAt',
header: 'Fecha de creación',
cell: (group: any) => `${this.datePipe.transform(group.createdAt, 'dd/MM/yyyy hh:mm:ss')}`,
}
];
displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
private apiUrl = `${this.baseUrl}/command-groups`; private apiUrl = `${this.baseUrl}/command-groups`;
constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) {} constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) {}
@ -29,9 +54,9 @@ export class CommandsGroupsComponent implements OnInit {
} }
search(): void { search(): void {
this.http.get<any>(`${this.apiUrl}?page=${this.page}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe( this.http.get<any>(`${this.apiUrl}?page=${this.page + 1}&itemsPerPage=${this.itemsPerPage}`, { params: this.filters }).subscribe(
(data) => { (data) => {
this.commandGroups = data['hydra:member']; this.dataSource.data = data['hydra:member'];
this.length = data['hydra:totalItems']; this.length = data['hydra:totalItems'];
}, },
(error) => { (error) => {
@ -82,6 +107,7 @@ export class CommandsGroupsComponent implements OnInit {
onPageChange(event: any): void { onPageChange(event: any): void {
this.page = event.pageIndex; this.page = event.pageIndex;
this.itemsPerPage = event.pageSize; this.itemsPerPage = event.pageSize;
this.length = event.length;
this.search(); this.search();
} }
} }

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

@ -2,9 +2,11 @@
padding: 20px; padding: 20px;
max-width: 800px; /* Ancho máximo del contenedor */ max-width: 800px; /* Ancho máximo del contenedor */
margin: auto; /* Centra el contenedor en la pantalla */ margin: auto; /* Centra el contenedor en la pantalla */
background-color: #fff; /* Fondo blanco para el contenedor */ background-color: #fff; /* Fondo blanco para el contenedor */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */ }
.form-container {
padding: 40px;
} }
.command-group-form { .command-group-form {
@ -54,7 +56,6 @@
background-color: #fff; background-color: #fff;
border-radius: 4px; border-radius: 4px;
margin-bottom: 8px; margin-bottom: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} }
.remove-icon { .remove-icon {
@ -78,7 +79,7 @@
width: 48%; width: 48%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 400px; /* Limita la altura máxima para evitar desbordamiento */ max-height: 500px; /* Limita la altura máxima para evitar desbordamiento */
} }
.table-wrapper { .table-wrapper {

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

@ -1,6 +1,5 @@
<div class="create-command-group-container"> <h2 mat-dialog-title>{{ editing ? 'Editar' : 'Crear' }} grupo de comando</h2>
<h2>Grupo de Comandos</h2> <mat-dialog-content class="form-container">
<form class="command-group-form" (ngSubmit)="onSubmit()"> <form class="command-group-form" (ngSubmit)="onSubmit()">
<mat-form-field> <mat-form-field>
<mat-label>Nombre del Grupo</mat-label> <mat-label>Nombre del Grupo</mat-label>
@ -51,10 +50,11 @@
</div> </div>
</div> </div>
</div> </div>
<div class="command-group-actions">
<button mat-flat-button color="warn" (click)="close()">Cancelar</button>
<button mat-flat-button color="primary" type="submit">Guardar</button>
</div>
</form> </form>
</div> </mat-dialog-content>
<mat-dialog-actions align="end">
<button mat-button (click)="close()">Cancelar</button>
<button mat-button (click)="onSubmit()" cdkFocusInitial> Guardar </button>
</mat-dialog-actions>

2
ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.css
View File

@ -134,7 +134,6 @@
background-color: #fff; background-color: #fff;
border-radius: 4px; border-radius: 4px;
margin-bottom: 8px; margin-bottom: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
} }
.remove-icon { .remove-icon {
@ -152,4 +151,3 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }

84
ogWebconsole/src/app/components/commands/commands-task/commands-task.component.css
View File

@ -1,53 +1,33 @@
.task-button-row{ .title {
margin-bottom: 10px; font-size: 24px;
} }
.commands-list { .calendar-button-row {
margin-bottom: 20px; display: flex;
justify-content: flex-start;
margin-top: 16px;
} }
.command-item { .divider {
cursor: pointer; margin: 20px 0;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
} }
.command-item:hover { .lists-container {
background-color: #e9e9e9; padding: 16px;
} }
.command-details { .imagesLists-container {
padding: 20px; flex: 1;
border: 1px solid #ddd;
background-color: #f4f4f4;
border-radius: 4px;
} }
.script-display { .card.unidad-card {
margin-top: 20px; height: 100%;
background-color: #000; box-sizing: border-box;
color: #fff;
padding: 10px;
border-radius: 4px;
} }
pre { table {
margin: 0; width: 100%;
font-family: 'Courier New', Courier, monospace; margin-top: 50px;
}
.mat-elevation-z8{
margin-top: 20px;
}
tr:hover {
background-color: rgba(219, 219, 219, 0.219);
}
.detailBtn{
cursor: pointer;
} }
.search-container { .search-container {
@ -69,6 +49,30 @@
padding: 5px; padding: 5px;
} }
.command-groups-button-row{ .header-container {
margin-bottom: 10px; display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
} }
.mat-elevation-z8 {
box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
}
.paginator-container {
display: flex;
justify-content: end;
margin-bottom: 30px;
}
.mat-chip-readonly-true {
background-color: #4CAF50 !important;
color: white !important;
}
.mat-chip-readonly-false {
background-color: #F44336 !important;
color: white !important;
}

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

@ -5,6 +5,8 @@
</div> </div>
</div> </div>
<mat-divider class="divider"></mat-divider>
<div class="search-container"> <div class="search-container">
<mat-form-field appearance="fill" class="search-string"> <mat-form-field appearance="fill" class="search-string">
<mat-label>Buscar tarea</mat-label> <mat-label>Buscar tarea</mat-label>
@ -41,25 +43,13 @@
</ng-container> </ng-container>
<ng-container matColumnDef="actions"> <ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Acciones </th> <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
<td mat-cell *matCellDef="let task"> <td mat-cell *matCellDef="let task" style="text-align: center;">
<button mat-icon-button [matMenuTriggerFor]="menu"> <button mat-icon-button color="info" (click)="viewTaskDetails(task)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
<mat-icon>more_vert</mat-icon> <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> </button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="viewTaskDetails(task)">
<mat-icon>info</mat-icon>
<span>Detalles</span>
</button>
<button mat-menu-item (click)="editTask(task)">
<mat-icon>edit</mat-icon>
<span>Editar</span>
</button>
<button mat-menu-item (click)="deleteTask(task)">
<mat-icon>delete</mat-icon>
<span>Eliminar</span>
</button>
</mat-menu>
</td> </td>
</ng-container> </ng-container>

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

@ -54,13 +54,13 @@ export class CommandsTaskComponent implements OnInit {
openCreateTaskModal(): void { openCreateTaskModal(): void {
this.dialog.open(CreateTaskComponent, { this.dialog.open(CreateTaskComponent, {
width: '600px', width: '800px',
}).afterClosed().subscribe(() => this.loadTasks()); }).afterClosed().subscribe(() => this.loadTasks());
} }
editTask(task: any): void { editTask(task: any): void {
this.dialog.open(CreateTaskComponent, { this.dialog.open(CreateTaskComponent, {
width: '600px', width: '800px',
data: { task }, data: { task },
}).afterClosed().subscribe(() => this.loadTasks()); }).afterClosed().subscribe(() => this.loadTasks());
} }

1
ogWebconsole/src/app/components/commands/main-commands/detail-command/command-detail.component.css
View File

@ -83,7 +83,6 @@
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
background-color: #f9f9f9; background-color: #f9f9f9;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} }
.schedule-container { .schedule-container {