Ogboot edit template textarea

ogWebconsole/src/app/components/pxe/pxe/edit-pxe-template/edit-pxe-template.component.html

@@ -1,51 +1,24 @@
-<h2>Editar Plantilla PXE</h2>
+<form [formGroup]="templateForm" (ngSubmit)="onCreate()">
-<mat-horizontal-stepper [linear]="true" #stepper>
+  <h2>Editar Plantilla PXE</h2>
-  <mat-step [stepControl]="firstFormGroup">
+
-    <form [formGroup]="firstFormGroup">
+  <mat-form-field appearance="fill">
-      <ng-template matStepLabel>Nombre de la plantilla</ng-template>
+    <mat-label>Nombre de la Plantilla</mat-label>
-      <mat-form-field>
+    <input matInput formControlName="name" placeholder="Introduce el nombre de la plantilla">
-        <mat-label>Nombre de la Plantilla</mat-label>
+    <mat-error *ngIf="templateForm.get('name')?.hasError('required')">
-        <input matInput formControlName="name" placeholder="Nombre de la plantilla" required />
+      El nombre de la plantilla es requerido.
-      </mat-form-field>
+    </mat-error>
-      <div>
+  </mat-form-field>
-        <button mat-button matStepperNext>Continuar</button>
+
-      </div>
+  <mat-form-field appearance="fill">
-    </form>
+    <mat-label>Contenido de la Plantilla</mat-label>
-  </mat-step>
+    <textarea matInput formControlName="templateContent" rows="20" placeholder="Introduce el contenido de la plantilla"></textarea>
-  <mat-step [stepControl]="secondFormGroup">
+    <mat-error *ngIf="templateForm.get('templateContent')?.hasError('required')">
-    <form [formGroup]="secondFormGroup">
+      El contenido de la plantilla es requerido.
-      <ng-template matStepLabel>Configurar parámetros</ng-template>
+    </mat-error>
-      <mat-form-field appearance="fill">
+  </mat-form-field>
-        <mat-label>Tiempo de espera (en segundos)</mat-label>
+
-        <input matInput formControlName="timeout" type="number" required />
+  <mat-dialog-actions align="end">
-      </mat-form-field>
+    <button mat-button type="button" (click)="onCancel()">Cancelar</button>
-      <mat-form-field appearance="fill">
+    <button mat-raised-button color="primary" type="submit" [disabled]="!templateForm.valid">Crear</button>
-        <mat-label>Estilo de tiempo de espera</mat-label>
+  </mat-dialog-actions>
-        <mat-select formControlName="timeoutStyle" required>
+</form>
-          <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>

ogWebconsole/src/app/components/pxe/pxe/edit-pxe-template/edit-pxe-template.component.ts

@@ -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 {
+export class EditPxeTemplateComponent implements OnInit {
-  firstFormGroup!: FormGroup;
+  templateForm!: FormGroup;
-  secondFormGroup!: FormGroup;
-  previewContent: string = '';
 
   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({
+    // Configuración del formulario con los campos requeridos
-      name: [this.data.name, Validators.required],
+    console.log(this.data);
-    });
+    this.templateForm = this.fb.group({
-
+      name: [this.data.name || '', Validators.required], // Utilizar datos existentes o cadena vacía
-    const parsedContent = this.parseTemplateContent(this.data.templateContent);
+      templateContent: [this.data.templateContent || '', Validators.required]
-    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();
     });
   }
 
-  parseTemplateContent(templateContent: string): any {
+  onCreate(): void {
-    const lines = templateContent.split('\n');
+    if (this.templateForm.valid) {
-    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) {
       const updatedTemplate = {
-        name: this.firstFormGroup.value.name,
+        name: this.templateForm.value.name,
-        templateContent: "this.previewContent.trim()",
+        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
   }
 }