Merge pull request 'add html file upload via base64 for menus' (#52) from menu-creation into main

Reviewed-on: #52

CHANGELOG.md

@@ -1,4 +1,11 @@
 # Changelog
+## [1.2.1] - 2026-03-11
+### Added
+- Se ha añadido la funcionalidad para poder adjuntar un fichero HTML local en la creación/edición de menús, codificándolo y enviándolo en Base64 de forma transparente.
+
+### Improved
+- Se ha mejorado la UX integrando el campo de subida de ficheros en el formulario de menús (`create-menu`) utilizando la estética nativa de Angular Material.
+
 ## [1.2.0] - 2025-10-21
 ### Added
 - Se ha añadido una nueva funcionalidad la cual permite poder borrar varios equipos a la vez.

ogWebconsole/src/app/components/menus/create-menu/create-menu.component.html

@@ -15,13 +15,21 @@
         <input matInput formControlName="publicUrl" name="description">
       </mat-form-field>
 
+      <mat-form-field appearance="fill" class="form-field" (click)="fileInput.click()"
+        style="cursor: pointer; margin-top: 15px;">
+        <mat-label>Suba el fichero que se usará como menú</mat-label>
+        <input matInput [value]="selectedFile ? selectedFile.name : 'Ningún fichero seleccionado'" readonly
+          placeholder="Seleccionar fichero" style="cursor: pointer; pointer-events: none;" tabindex="-1">
+        <input hidden (change)="onFileSelected($event)" #fileInput type="file">
+      </mat-form-field>
+
       <mat-form-field appearance="fill" class="form-field">
         <mat-label>Resolución</mat-label>
         <mat-select formControlName="resolution" name="resolution">
           <mat-option value="769">640×480 (8-bit - 256 colores)</mat-option>
           <mat-option value="771">800×600 (8-bit - 256 colores)</mat-option>
           <mat-option value="773">1024×768 (8-bit - 256 colores)</mat-option>
-          <mat-option value="775">1280×1024 (8-bit - 256 colores)</mat-option>     
+          <mat-option value="775">1280×1024 (8-bit - 256 colores)</mat-option>
           <mat-option value="784">640×480 (16-bit - 65k colores)</mat-option>
           <mat-option value="787">800×600 (16-bit - 65k colores)</mat-option>
           <mat-option value="791">1024×768 (16-bit - 65k colores)</mat-option>
@@ -41,6 +49,7 @@
       <mat-checkbox formControlName="isDefault" name="isDefault">
         {{ 'defaultMenuLabel' | translate }}
       </mat-checkbox>
+
     </form>
 
     <!-- Iframe -->

ogWebconsole/src/app/components/menus/create-menu/create-menu.component.ts

@@ -18,6 +18,8 @@ export class CreateMenuComponent implements OnInit {
   menuId: string | null = null;
   softwareProfiles: any[] = [];
   safeUrl: SafeResourceUrl | null = null;
+  selectedFile: File | null = null;
+  fileContent: string | null = null;
 
   constructor(
     private fb: FormBuilder,
@@ -48,6 +50,25 @@ export class CreateMenuComponent implements OnInit {
     }
   }
 
+  onFileSelected(event: any): void {
+    const file = event.target.files[0];
+    if (file) {
+      this.selectedFile = file;
+
+      const reader = new FileReader();
+      reader.onload = (e: any) => {
+        // e.target.result será un string en formato 'data:text/html;base64,.....'
+        // Nos quedamos solo con la parte Base64 dividiendo por la coma
+        const base64String = e.target.result.split(',')[1];
+        this.fileContent = base64String;
+      };
+      reader.readAsDataURL(file);
+    } else {
+      this.selectedFile = null;
+      this.fileContent = null;
+    }
+  }
+
   ngOnInit() {
     if (this.data) {
       this.load()
@@ -74,7 +95,7 @@ export class CreateMenuComponent implements OnInit {
   }
 
   save(): void {
-    const payload = {
+    const payload: any = {
       name: this.menuForm.value.name,
       publicUrl: this.menuForm.value.publicUrl,
       resolution: this.menuForm.value.resolution,
@@ -82,6 +103,10 @@ export class CreateMenuComponent implements OnInit {
       isDefault: this.menuForm.value.isDefault,
     };
 
+    if (this.fileContent) {
+      payload.menuHtmlContent = this.fileContent;
+    }
+
     if (this.menuId) {
       this.http.put(`${this.baseUrl}${this.menuId}`, payload).subscribe(
         (response) => {