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

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

@ -1,70 +1,78 @@
.commands-list {
margin-bottom: 20px;
}
.command-item {
cursor: pointer;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
}
.command-item:hover {
background-color: #e9e9e9;
}
.command-details {
padding: 20px;
border: 1px solid #ddd;
background-color: #f4f4f4;
border-radius: 4px;
}
.script-display {
margin-top: 20px;
background-color: #000;
color: #fff;
padding: 10px;
border-radius: 4px;
}
pre {
margin: 0;
font-family: 'Courier New', Courier, monospace;
}
.mat-elevation-z8{
margin-top: 20px;
}
tr:hover {
background-color: rgba(219, 219, 219, 0.219);
}
.detailBtn{
cursor: pointer;
}
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
}
.search-string {
flex: 2;
padding: 5px;
}
.search-boolean {
flex: 1;
padding: 5px;
}
.title {
font-size: 24px;
}
.calendar-button-row {
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
.divider {
margin: 20px 0;
}
.lists-container {
padding: 16px;
}
.imagesLists-container {
flex: 1;
}
.card.unidad-card {
height: 100%;
box-sizing: border-box;
}
table {
width: 100%;
margin-top: 50px;
}
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
}
.search-string {
flex: 2;
padding: 5px;
}
.search-boolean {
flex: 1;
padding: 5px;
}
.header-container {
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;
}
.command-groups-button-row{
margin-bottom: 10px;
}

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

@ -13,54 +13,40 @@
<mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
</mat-form-field>
</div>
<table mat-table [dataSource]="commandGroups" class="mat-elevation-z8">
<!-- Nombre del grupo columna -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Nombre del grupo </th>
<td mat-cell *matCellDef="let group"> {{ group.name }} </td>
</ng-container>
<!-- Creado por columna -->
<ng-container matColumnDef="createdBy">
<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>
<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>
<ng-container *ngIf="column.columnDef === 'commands'">
<button mat-button [matMenuTriggerFor]="menu">Ver comandos</button>
<mat-menu #menu="matMenu">
<button mat-menu-item (click)="viewGroupDetails(group)">
<mat-icon>info</mat-icon>
<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 mat-menu-item *ngFor="let command of commandGroup.commands">
{{ command.name }}
</button>
</mat-menu>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</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 class="paginator-container">
<mat-paginator [length]="length"
[pageSize]="itemsPerPage"
@ -69,4 +55,3 @@
(page)="onPageChange($event)">
</mat-paginator>
</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 { 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";
@Component({
selector: 'app-commands-groups',
@ -13,13 +15,36 @@ import { DeleteModalComponent } from '../../../shared/delete_modal/delete-modal/
})
export class CommandsGroupsComponent implements OnInit {
baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
commandGroups: any[] = [];
dataSource = new MatTableDataSource<any>();
filters: { [key: string]: string | boolean } = {};
length: number = 0;
itemsPerPage: number = 10;
page: number = 1;
pageSizeOptions: number[] = [5, 10, 20, 40, 100];
displayedColumns: string[] = ['name', 'createdBy', 'createdAt', 'actions'];
itemsPerPage: number = 20;
page: number = 0;
pageSizeOptions: number[] = [10, 20, 40, 100];
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`;
constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) {}
@ -29,9 +54,9 @@ export class CommandsGroupsComponent implements OnInit {
}
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) => {
this.commandGroups = data['hydra:member'];
this.dataSource.data = data['hydra:member'];
this.length = data['hydra:totalItems'];
},
(error) => {
@ -82,6 +107,7 @@ export class CommandsGroupsComponent implements OnInit {
onPageChange(event: any): void {
this.page = event.pageIndex;
this.itemsPerPage = event.pageSize;
this.length = event.length;
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;
max-width: 800px; /* Ancho máximo del contenedor */
margin: auto; /* Centra el contenedor en la pantalla */
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 {
@ -54,7 +56,6 @@
background-color: #fff;
border-radius: 4px;
margin-bottom: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.remove-icon {
@ -78,7 +79,7 @@
width: 48%;
display: flex;
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 {

22
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>Grupo de Comandos</h2>
<h2 mat-dialog-title>{{ editing ? 'Editar' : 'Crear' }} grupo de comando</h2>
<mat-dialog-content class="form-container">
<form class="command-group-form" (ngSubmit)="onSubmit()">
<mat-form-field>
<mat-label>Nombre del Grupo</mat-label>
@ -18,7 +17,7 @@
<th mat-header-cell *matHeaderCellDef> Nombre </th>
<td mat-cell *matCellDef="let command"> {{ command.name }} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Acciones </th>
<td mat-cell *matCellDef="let command">
@ -27,7 +26,7 @@
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['name', 'actions']"></tr>
<tr mat-row *matRowDef="let row; columns: ['name', 'actions'];"></tr>
</table>
@ -51,10 +50,11 @@
</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>
</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>

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

@ -1,63 +1,63 @@
.detail-command-group-container {
padding: 20px;
}
.mat-card {
margin: 20px 0;
border-radius: 4px;
border: 1px solid #ccc;
}
.mat-card-header {
background-color: #f5f5f5;
border-bottom: 1px solid #ddd;
}
.mat-card-title {
font-size: 20px;
font-weight: bold;
}
.mat-card-subtitle {
font-size: 14px;
color: #666;
}
.mat-card-content {
padding: 20px;
}
h3 {
margin-top: 20px;
font-size: 18px;
}
table {
width: 100%;
margin-top: 10px;
}
th.mat-header-cell {
background-color: #f5f5f5;
font-weight: bold;
border-bottom: 2px solid #ccc;
}
td.mat-cell {
padding: 10px;
border-bottom: 1px solid #ddd;
}
tr:hover {
background-color: rgba(219, 219, 219, 0.5);
}
.mat-card-actions {
display: flex;
justify-content: flex-end;
padding: 10px 20px;
}
button {
background-color: #3f51b5; /* Color primario */
color: white;
@ -66,20 +66,20 @@
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #2c387e; /* Color primario oscuro */
}
@media (max-width: 600px) {
.mat-card {
margin: 10px 0;
}
h3 {
font-size: 16px;
}
button {
width: 100%;
margin-top: 10px;
@ -98,34 +98,34 @@
.create-command-group-container {
padding: 20px;
}
.command-group-form {
display: flex;
flex-direction: column;
}
.command-selection {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.available-commands, .selected-commands {
width: 48%;
}
.selected-commands-list {
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
background-color: #f9f9f9;
}
.commands-container {
display: flex;
flex-direction: column;
}
.command-item {
display: flex;
align-items: center;
@ -134,22 +134,20 @@
background-color: #fff;
border-radius: 4px;
margin-bottom: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.remove-icon {
cursor: pointer;
color: #f44336;
color: #f44336;
}
.chevron-icon {
margin: 0 10px;
color: #666;
}
.command-group-actions {
margin-top: 20px;
display: flex;
justify-content: space-between;
}

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

@ -1,74 +1,78 @@
.task-button-row{
margin-bottom: 10px;
.title {
font-size: 24px;
}
.commands-list {
margin-bottom: 20px;
}
.command-item {
cursor: pointer;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
}
.command-item:hover {
background-color: #e9e9e9;
}
.command-details {
padding: 20px;
border: 1px solid #ddd;
background-color: #f4f4f4;
border-radius: 4px;
}
.script-display {
margin-top: 20px;
background-color: #000;
color: #fff;
padding: 10px;
border-radius: 4px;
}
pre {
margin: 0;
font-family: 'Courier New', Courier, monospace;
}
.mat-elevation-z8{
margin-top: 20px;
}
tr:hover {
background-color: rgba(219, 219, 219, 0.219);
}
.detailBtn{
cursor: pointer;
}
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
}
.search-string {
flex: 2;
padding: 5px;
}
.search-boolean {
flex: 1;
padding: 5px;
}
.calendar-button-row {
display: flex;
justify-content: flex-start;
margin-top: 16px;
}
.divider {
margin: 20px 0;
}
.lists-container {
padding: 16px;
}
.imagesLists-container {
flex: 1;
}
.card.unidad-card {
height: 100%;
box-sizing: border-box;
}
table {
width: 100%;
margin-top: 50px;
}
.search-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 5px;
box-sizing: border-box;
}
.search-string {
flex: 2;
padding: 5px;
}
.search-boolean {
flex: 1;
padding: 5px;
}
.header-container {
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;
}
.command-groups-button-row{
margin-bottom: 10px;
}

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

@ -5,6 +5,8 @@
</div>
</div>
<mat-divider class="divider"></mat-divider>
<div class="search-container">
<mat-form-field appearance="fill" class="search-string">
<mat-label>Buscar tarea</mat-label>
@ -41,25 +43,13 @@
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef> Acciones </th>
<td mat-cell *matCellDef="let task">
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
<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>
<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>
</ng-container>
@ -71,4 +61,4 @@
[pageSize]="itemsPerPage"
[pageSizeOptions]="pageSizeOptions"
(page)="onPageChange($event)">
</mat-paginator>
</mat-paginator>

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

@ -19,7 +19,7 @@ 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'];
private apiUrl = `${this.baseUrl}/command-tasks`;
constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) {}
@ -54,13 +54,13 @@ export class CommandsTaskComponent implements OnInit {
openCreateTaskModal(): void {
this.dialog.open(CreateTaskComponent, {
width: '600px',
width: '800px',
}).afterClosed().subscribe(() => this.loadTasks());
}
editTask(task: any): void {
this.dialog.open(CreateTaskComponent, {
width: '600px',
width: '800px',
data: { task },
}).afterClosed().subscribe(() => this.loadTasks());
}
@ -68,7 +68,7 @@ export class CommandsTaskComponent implements OnInit {
deleteTask(task: any): void {
this.dialog.open(DeleteModalComponent, {
width: '300px',
data: { name: task.createdBy },
data: { name: task.createdBy },
}).afterClosed().subscribe((result) => {
if (result) {
this.http.delete(`${this.apiUrl}/${task.uuid}`).subscribe({
@ -85,7 +85,7 @@ export class CommandsTaskComponent implements OnInit {
}
onPageChange(event: any): void {
this.page = event.pageIndex + 1;
this.page = event.pageIndex + 1;
this.itemsPerPage = event.pageSize;
this.loadTasks();
}

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

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