From 71edd42b349901e4966dd667a62876f8cc15a0fb Mon Sep 17 00:00:00 2001 From: apuente Date: Mon, 19 Aug 2024 20:04:50 +0200 Subject: [PATCH] PXEbootFile modal --- ogWebconsole/src/app/app.module.ts | 4 +- .../acctions-modal.component.html | 8 +- .../acctions-modal.component.ts | 17 ++-- .../components/groups/groups.component.html | 2 +- .../app/components/groups/groups.component.ts | 6 +- .../create-pxe-boot-file.component.css | 91 +++++++++++++++++++ .../create-pxe-boot-file.component.html | 21 +++++ .../create-pxe-boot-file.component.spec.ts | 23 +++++ .../create-pxe-boot-file.component.ts | 70 ++++++++++++++ 9 files changed, 226 insertions(+), 16 deletions(-) create mode 100644 ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.css create mode 100644 ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.html create mode 100644 ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.spec.ts create mode 100644 ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.ts diff --git a/ogWebconsole/src/app/app.module.ts b/ogWebconsole/src/app/app.module.ts index 618586e..b8a5e96 100644 --- a/ogWebconsole/src/app/app.module.ts +++ b/ogWebconsole/src/app/app.module.ts @@ -82,6 +82,7 @@ import { EditPxeTemplateComponent } from './components/pxe/pxe/edit-pxe-template import { PxeBootFilesComponent } from './components/pxe-boot-files/pxe-boot-files.component'; import {MatExpansionPanel, MatExpansionPanelDescription, MatExpansionPanelTitle} from "@angular/material/expansion"; import { OgbootStatusComponent } from './components/ogboot-status/ogboot-status.component'; +import { CreatePxeBootFileComponent } from './components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component'; @NgModule({ declarations: [ @@ -124,7 +125,8 @@ import { OgbootStatusComponent } from './components/ogboot-status/ogboot-status. CreatePxeTemplateComponent, EditPxeTemplateComponent, PxeBootFilesComponent, - OgbootStatusComponent + OgbootStatusComponent, + CreatePxeBootFileComponent ], bootstrap: [AppComponent], imports: [BrowserModule, diff --git a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.html b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.html index 4530933..928f06d 100644 --- a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.html +++ b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.html @@ -2,8 +2,8 @@
- - - - + + + +
\ No newline at end of file diff --git a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts index 9d81caa..1855d16 100644 --- a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts +++ b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts @@ -1,7 +1,8 @@ // componente import { Component, Inject } from '@angular/core'; -import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog'; import { ToastrService } from 'ngx-toastr'; +import { CreatePxeBootFileComponent } from '../../pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component'; @Component({ selector: 'app-acctions-modal', templateUrl: './acctions-modal.component.html', @@ -12,18 +13,20 @@ export class AcctionsModalComponent { constructor( private toastService: ToastrService, - public dialogRef: MatDialogRef, + public dialog: MatDialog, @Inject(MAT_DIALOG_DATA) public data: any ) { this.selectedElements = data.selectedElements; } - onCancel(): void { - this.dialogRef.close(null); - } - onSend(): void { - this.toastService.success(' Acción enviada a: ' + this.selectedElements); } + + onPxeBootFile(): void { + const dialog = this.dialog.open(CreatePxeBootFileComponent, { data: this.selectedElements, width: '400px'}); + dialog.afterClosed().subscribe(() => { + this.dialog.closeAll(); + }); + } } diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html index 0baaeb6..3917cb6 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.html +++ b/ogWebconsole/src/app/components/groups/groups.component.html @@ -261,7 +261,7 @@ + (change)="onCheckboxChange($event, result.name, result.uuid)"> {{ result.name }} diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts index da86861..b3596bc 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.ts +++ b/ogWebconsole/src/app/components/groups/groups.component.ts @@ -50,7 +50,7 @@ export class GroupsComponent implements OnInit { itemsPerPage: number = 10; page: number = 1; pageSizeOptions: number[] = [5, 10, 25, 100]; - selectedElements: string[] = []; + selectedElements: any[] = []; isAllSelected: boolean = false; @@ -380,9 +380,9 @@ export class GroupsComponent implements OnInit { } - onCheckboxChange(event: any, name: string) { + onCheckboxChange(event: any, name: string, uuid: string) { if (event.checked) { - this.selectedElements.push(name); + this.selectedElements.push({ name, uuid }); } else { const index = this.selectedElements.indexOf(name); if (index > -1) { diff --git a/ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.css b/ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.css new file mode 100644 index 0000000..3b55583 --- /dev/null +++ b/ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.css @@ -0,0 +1,91 @@ +mat-form-field { + width: 100%; + margin-bottom: 16px; + padding: 5px; + } + + .button-group { + display: flex; + justify-content: space-between; + } + + button { + width: 48%; + } + + :host { + display: block; + padding: 20px; + background-color: #f5f5f5; + border-radius: 8px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); +} + +.mat-form-field { + width: 100%; + margin-bottom: 16px; +} + +.mat-step-label { + font-weight: bold; + font-size: 1.1em; +} + +button { + margin: 8px 0; +} + +.mat-stepper-header { + background-color: #fff; + padding: 16px; + border-bottom: 1px solid #e0e0e0; + border-radius: 8px 8px 0 0; +} + +.mat-stepper-horizontal-line { + border-color: #3f51b5; +} + +.mat-stepper-horizontal { + background-color: #fff; + padding: 0; + border-radius: 8px; + overflow: hidden; +} + +.mat-step-header { + background-color: #e8eaf6; + color: #3f51b5; +} + +.mat-step-header .mat-step-icon { + background-color: #3f51b5; + color: #fff; +} + +.mat-stepper-content { + padding: 16px; + background-color: #fff; + border-radius: 0 0 8px 8px; +} + +pre { + background-color: #e8eaf6; + padding: 16px; + border-radius: 4px; + font-size: 12px; + overflow-x: auto; +} + +.mat-raised-button { + margin-right: 8px; +} + +.mat-button { + margin-right: 8px; +} + +span{ + margin: 5px; + padding-bottom: 15px; +} \ No newline at end of file diff --git a/ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.html b/ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.html new file mode 100644 index 0000000..bd58857 --- /dev/null +++ b/ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.html @@ -0,0 +1,21 @@ +
+

Añadir Cliente

+
+ + Seleccione una plantilla PXE + + + {{ template.name }} + + + +
+ + Clientes: {{ getClientesNames() }} + +
+ + +
+
+ \ No newline at end of file diff --git a/ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.spec.ts b/ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.spec.ts new file mode 100644 index 0000000..3efd37c --- /dev/null +++ b/ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CreatePxeBootFileComponent } from './create-pxe-boot-file.component'; + +describe('CreatePxeBootFileComponent', () => { + let component: CreatePxeBootFileComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [CreatePxeBootFileComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(CreatePxeBootFileComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.ts b/ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.ts new file mode 100644 index 0000000..ad171c2 --- /dev/null +++ b/ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.ts @@ -0,0 +1,70 @@ +import { HttpClient } from '@angular/common/http'; +import { Component, Inject } from '@angular/core'; + +import { ToastrService } from 'ngx-toastr'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; + +@Component({ + selector: 'app-create-pxe-boot-file', + templateUrl: './create-pxe-boot-file.component.html', + styleUrls: ['./create-pxe-boot-file.component.css'] +}) +export class CreatePxeBootFileComponent { + pxeTemplates: any[] = []; + selectedPxeTemplate: string | undefined; + clientes: string[] = []; + selectedElements: any; + + constructor( + private toastService: ToastrService, + private http: HttpClient, + private dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: string[] + ) {} + + ngOnInit(): void { + this.selectedElements = this.data; + this.clientes = this.selectedElements.map((client: { uuid: any; }) => client.uuid); + this.loadPxeTemplates(); + } + + getClientesNames(): string { + return this.selectedElements.map((client: { name: any; }) => client.name).join(', '); + } + + loadPxeTemplates(): void { + this.http.get('http://127.0.0.1:8080/pxe-templates?page=1&itemsPerPage=30') + .subscribe((response: any) => { + this.pxeTemplates = response['hydra:member']; + }, error => { + console.error('Error fetching PXE templates:', error); + }); + } + + onCancel(): void { + this.dialogRef.close(); + } + + onAdd(): void { + if (this.selectedPxeTemplate) { + const payload = { + template: this.selectedPxeTemplate, + clients: this.clientes + }; + console.log('Payload:', payload); + this.http.post('http://127.0.0.1:8080/pxe-boot-files', payload) + .subscribe({ + next: response => { + this.toastService.success('PXE asignado con éxito'); + this.dialogRef.close(); + }, + error: error => { + this.toastService.error('Error enviando el payload', error); + } + }); + } else { + console.error('No se ha seleccionado ninguna plantilla PXE'); + this.toastService.error('No se ha seleccionado ninguna plantilla PXE'); + } + } +}