Ogboot edit template textarea
parent
9f27849a76
commit
2310c2c0d7
|
|
@ -1,51 +1,24 @@
|
|||
<h2>Editar Plantilla PXE</h2>
|
||||
<mat-horizontal-stepper [linear]="true" #stepper>
|
||||
<mat-step [stepControl]="firstFormGroup">
|
||||
<form [formGroup]="firstFormGroup">
|
||||
<ng-template matStepLabel>Nombre de la plantilla</ng-template>
|
||||
<mat-form-field>
|
||||
<mat-label>Nombre de la Plantilla</mat-label>
|
||||
<input matInput formControlName="name" placeholder="Nombre de la plantilla" required />
|
||||
</mat-form-field>
|
||||
<div>
|
||||
<button mat-button matStepperNext>Continuar</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
<mat-step [stepControl]="secondFormGroup">
|
||||
<form [formGroup]="secondFormGroup">
|
||||
<ng-template matStepLabel>Configurar parámetros</ng-template>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Tiempo de espera (en segundos)</mat-label>
|
||||
<input matInput formControlName="timeout" type="number" required />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Estilo de tiempo de espera</mat-label>
|
||||
<mat-select formControlName="timeoutStyle" required>
|
||||
<mat-option value="hidden">Oculto</mat-option>
|
||||
<mat-option value="visible">Visible</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Directorio ISO</mat-label>
|
||||
<input matInput formControlName="isoDir" required />
|
||||
</mat-form-field>
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Argumentos del Kernel</mat-label>
|
||||
<input matInput formControlName="kernelArgs" required />
|
||||
</mat-form-field>
|
||||
<div>
|
||||
<button mat-button matStepperPrevious>Atrás</button>
|
||||
<button mat-button matStepperNext>Siguiente</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-step>
|
||||
<mat-step>
|
||||
<ng-template matStepLabel>Vista previa y guardar</ng-template>
|
||||
<pre>{{ previewContent }}</pre>
|
||||
<div class="button-group">
|
||||
<button mat-flat-button color="primary" (click)="onEdit()" >Guardar</button>
|
||||
<button mat-button matStepperPrevious>Atrás</button>
|
||||
</div>
|
||||
</mat-step>
|
||||
</mat-horizontal-stepper>
|
||||
<form [formGroup]="templateForm" (ngSubmit)="onCreate()">
|
||||
<h2>Editar Plantilla PXE</h2>
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Nombre de la Plantilla</mat-label>
|
||||
<input matInput formControlName="name" placeholder="Introduce el nombre de la plantilla">
|
||||
<mat-error *ngIf="templateForm.get('name')?.hasError('required')">
|
||||
El nombre de la plantilla es requerido.
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field appearance="fill">
|
||||
<mat-label>Contenido de la Plantilla</mat-label>
|
||||
<textarea matInput formControlName="templateContent" rows="20" placeholder="Introduce el contenido de la plantilla"></textarea>
|
||||
<mat-error *ngIf="templateForm.get('templateContent')?.hasError('required')">
|
||||
El contenido de la plantilla es requerido.
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-dialog-actions align="end">
|
||||
<button mat-button type="button" (click)="onCancel()">Cancelar</button>
|
||||
<button mat-raised-button color="primary" type="submit" [disabled]="!templateForm.valid">Crear</button>
|
||||
</mat-dialog-actions>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,112 +1,53 @@
|
|||
import { HttpClient } from '@angular/common/http';
|
||||
import { Component, Inject } from '@angular/core';
|
||||
import { Component, Inject, OnInit } from '@angular/core';
|
||||
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
|
||||
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
||||
|
||||
@Component({
|
||||
selector: 'app-edit-pxe-template',
|
||||
templateUrl: './edit-pxe-template.component.html',
|
||||
styleUrl: './edit-pxe-template.component.css'
|
||||
styleUrls: ['./edit-pxe-template.component.css'] // Corregido para 'styleUrls' plural
|
||||
})
|
||||
export class EditPxeTemplateComponent {
|
||||
firstFormGroup!: FormGroup;
|
||||
secondFormGroup!: FormGroup;
|
||||
previewContent: string = '';
|
||||
export class EditPxeTemplateComponent implements OnInit {
|
||||
templateForm!: FormGroup;
|
||||
|
||||
constructor(
|
||||
private fb: FormBuilder,
|
||||
private http: HttpClient,
|
||||
public dialogRef: MatDialogRef<EditPxeTemplateComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any
|
||||
) { }
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.firstFormGroup = this.fb.group({
|
||||
name: [this.data.name, Validators.required],
|
||||
});
|
||||
|
||||
const parsedContent = this.parseTemplateContent(this.data.templateContent);
|
||||
this.secondFormGroup = this.fb.group({
|
||||
timeout: [parsedContent.timeout, Validators.required],
|
||||
timeoutStyle: [parsedContent.timeoutStyle, Validators.required],
|
||||
isoDir: [parsedContent.isoDir, Validators.required],
|
||||
kernelArgs: [parsedContent.kernelArgs, Validators.required],
|
||||
});
|
||||
|
||||
this.updatePreviewContent();
|
||||
this.secondFormGroup.valueChanges.subscribe(() => {
|
||||
this.updatePreviewContent();
|
||||
// Configuración del formulario con los campos requeridos
|
||||
console.log(this.data);
|
||||
this.templateForm = this.fb.group({
|
||||
name: [this.data.name || '', Validators.required], // Utilizar datos existentes o cadena vacía
|
||||
templateContent: [this.data.templateContent || '', Validators.required]
|
||||
});
|
||||
}
|
||||
|
||||
parseTemplateContent(templateContent: string): any {
|
||||
const lines = templateContent.split('\n');
|
||||
let timeout = '';
|
||||
let timeoutStyle = '';
|
||||
let isoDir = '';
|
||||
let kernelArgs = '';
|
||||
|
||||
lines.forEach(line => {
|
||||
if (line.startsWith('set timeout ')) {
|
||||
timeout = line.replace('set timeout ', '').trim();
|
||||
} else if (line.startsWith('set timeout-style ')) {
|
||||
timeoutStyle = line.replace('set timeout-style ', '').trim();
|
||||
} else if (line.startsWith('set ISODIR ')) {
|
||||
isoDir = line.replace('set ISODIR ', '').trim();
|
||||
} else if (line.startsWith('set kernelargs ')) {
|
||||
kernelArgs = line.replace('set kernelargs ', '').trim();
|
||||
}
|
||||
});
|
||||
|
||||
return { timeout, timeoutStyle, isoDir, kernelArgs };
|
||||
}
|
||||
|
||||
updatePreviewContent(): void {
|
||||
const { timeout, timeoutStyle, isoDir, kernelArgs } = this.secondFormGroup.value;
|
||||
this.previewContent = `
|
||||
#!ipxe
|
||||
set timeout ${timeout}
|
||||
set timeout-style ${timeoutStyle}
|
||||
|
||||
set ISODIR ${isoDir}
|
||||
set kernelargs ${kernelArgs}
|
||||
# Menú de entrada para seleccionar OgLive
|
||||
|
||||
:try_iso
|
||||
kernel http://SERVERIP/tftpboot/\${ISODIR}/ogvmlinuz \${kernelargs} || goto fallback
|
||||
initrd http://SERVERIP/tftpboot/\${ISODIR}/oginitrd.img
|
||||
boot
|
||||
|
||||
:fallback
|
||||
echo "OgLive default"
|
||||
set ISODIR ogLive
|
||||
kernel http://SERVERIP/tftpboot/\${ISODIR}/ogvmlinuz \${kernelargs}
|
||||
initrd http://SERVERIP/tftpboot/\${ISODIR}/oginitrd.img
|
||||
boot
|
||||
`;
|
||||
}
|
||||
|
||||
onEdit(): void {
|
||||
if (this.firstFormGroup.valid && this.secondFormGroup.valid) {
|
||||
onCreate(): void {
|
||||
if (this.templateForm.valid) {
|
||||
const updatedTemplate = {
|
||||
name: this.firstFormGroup.value.name,
|
||||
templateContent: "this.previewContent.trim()",
|
||||
name: this.templateForm.value.name,
|
||||
templateContent: this.templateForm.value.templateContent
|
||||
};
|
||||
|
||||
this.http.patch(`http://127.0.0.1:8080/pxe-templates/${this.data.uuid}`, updatedTemplate)
|
||||
.subscribe({
|
||||
next: () => {
|
||||
console.log('Plantilla actualizada correctamente');
|
||||
this.dialogRef.close(true);
|
||||
this.dialogRef.close(true); // Cerrar el diálogo con éxito
|
||||
},
|
||||
error: (error) => {
|
||||
console.error('Error al actualizar la plantilla:', error);
|
||||
console.error('Error al actualizar la plantilla:', error); // Manejo de errores
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onCancel(): void {
|
||||
this.dialogRef.close();
|
||||
this.dialogRef.close(); // Cerrar el diálogo sin cambios
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue