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

PXEbootFile modal

oggui/ogboot
Alvaro Puente Mella 2024-08-19 20:04:50 +02:00
parent 45e1679e83
commit 71edd42b34
9 changed files with 226 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ogWebconsole/src/app/app.module.ts
View File

@ -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,

8
ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.html
View File

@ -2,8 +2,8 @@
<div class="button-column">
<button mat-flat-button color="primary" class="button-action button-encender" i18n="@@power-on-button" (click)="onSend()">Encender</button>
<button mat-flat-button color="accent" class="button-action button-apagar" i18n="@@power-off-button" (click)="onSend()">Apagar</button>
<button mat-flat-button color="warn" class="button-action button-resetear" i18n="@@reset-button">Resetear</button>
<button mat-flat-button class="button-action button-otros-1" i18n="@@other-actions-1">Otras acciones 1</button>
<button mat-flat-button class="button-action button-otros-2" i18n="@@other-actions-2">Otras acciones 2</button>
<button mat-flat-button class="button-action button-otros-3" i18n="@@other-actions-3">Otras acciones 3</button>
<button mat-flat-button color="primary" class="button-action button-resetear" i18n="@@reset-button">Resetear</button>
<button mat-flat-button color="primary" (click)="onPxeBootFile()">Añadir fichero PXE</button>
</div>

17
ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts
View File

@ -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<AcctionsModalComponent>,
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();
});
}
}

2
ogWebconsole/src/app/components/groups/groups.component.html
View File

@ -261,7 +261,7 @@
<mat-card class="result-card">
<mat-checkbox
[checked]="isSelected(result.name)"
(change)="onCheckboxChange($event, result.name)">
(change)="onCheckboxChange($event, result.name, result.uuid)">
</mat-checkbox>
<mat-card-title>{{ result.name }}</mat-card-title>
<mat-card-content>

6
ogWebconsole/src/app/components/groups/groups.component.ts
View File

@ -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) {

91
ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.css 100644
View File

@ -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;
}

21
ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.html 100644
View File

@ -0,0 +1,21 @@
<div class="create-PxeBootFile-container">
<h1 mat-dialog-title>Añadir Cliente</h1>
<div class="mat-dialog-content">
<mat-form-field appearance="fill">
<mat-label>Seleccione una plantilla PXE</mat-label>
<mat-select [(value)]="selectedPxeTemplate">
<mat-option *ngFor="let template of pxeTemplates" [value]="template.uuid">
{{ template.name }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<span>
Clientes: {{ getClientesNames() }}
</span>
<div class="mat-dialog-actions">
<button mat-button (click)="onCancel()">Cancelar</button>
<button mat-button color="primary" (click)="onAdd()">Añadir</button>
</div>
</div>

23
ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.spec.ts 100644
View File

@ -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<CreatePxeBootFileComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [CreatePxeBootFileComponent]
})
.compileComponents();
fixture = TestBed.createComponent(CreatePxeBootFileComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

70
ogWebconsole/src/app/components/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component.ts 100644
View File

@ -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<CreatePxeBootFileComponent>,
@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');
}
}
}