From 2498d9faa89220577f698a35ddd18427d3d373bb Mon Sep 17 00:00:00 2001
From: jmbardallo <juanmanuel.bardallo@sic.uhu.es>
Date: Thu, 23 Apr 2026 14:12:23 +0200
Subject: [PATCH] =?UTF-8?q?Configuraci=C3=B3n=20multiidioma,=20se=20lee=20?=
 =?UTF-8?q?un=20array=20del=20fichero=20config.json=20con=20los=20idiomas?=
 =?UTF-8?q?=20disponibles=20y=20busca=20el=20fichero=20correspondiente=20e?=
 =?UTF-8?q?n=20locales,=20creado=20menu=20en=20la=20barra=20superior=20par?=
 =?UTF-8?q?a=20cambiar=20de=20idioma?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ogWebconsole/src/app/app.component.ts         |   2 +-
 .../app/layout/header/header.component.css    |  30 ++++
 .../app/layout/header/header.component.html   | 135 +++++++++++-------
 .../src/app/layout/header/header.component.ts |  23 ++-
 .../src/app/services/config.service.ts        |  10 +-
 ogWebconsole/src/locale/en.json               |   5 +-
 ogWebconsole/src/locale/es.json               |   5 +-
 7 files changed, 148 insertions(+), 62 deletions(-)

diff --git a/ogWebconsole/src/app/app.component.ts b/ogWebconsole/src/app/app.component.ts
index d681b66..c39354c 100644
--- a/ogWebconsole/src/app/app.component.ts
+++ b/ogWebconsole/src/app/app.component.ts
@@ -13,6 +13,6 @@ export class AppComponent {
     this.translateService.use(savedLanguage);
   }
   ngOnInit() {
-  sessionStorage.setItem('language', 'es');
+    // Language is already handled in constructor
   }
 }
diff --git a/ogWebconsole/src/app/layout/header/header.component.css b/ogWebconsole/src/app/layout/header/header.component.css
index e186ef8..20b7aec 100644
--- a/ogWebconsole/src/app/layout/header/header.component.css
+++ b/ogWebconsole/src/app/layout/header/header.component.css
@@ -171,3 +171,33 @@ mat-toolbar button[mat-icon-button]:hover {
     right: 8px;
   }
 }
+
+.language-button {
+  display: flex !important;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #5f5f5f !important;
+  border-radius: 6px !important;
+  padding: 0 12px !important;
+  color: #495057 !important;
+  background: #fafafa !important;
+  transition: all 0.2s ease-in-out !important;
+  font-weight: 500 !important;
+  height: 40px !important;
+}
+
+.language-button:hover {
+  background-color: #f8f9fa !important;
+  border-color: #adb5bd !important;
+}
+
+.language-button mat-icon {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+  margin: 0 !important;
+}
+
+.language-button .mat-icon:last-child {
+  margin-left: -4px !important;
+}
diff --git a/ogWebconsole/src/app/layout/header/header.component.html b/ogWebconsole/src/app/layout/header/header.component.html
index 3cef5db..83805e2 100644
--- a/ogWebconsole/src/app/layout/header/header.component.html
+++ b/ogWebconsole/src/app/layout/header/header.component.html
@@ -8,67 +8,96 @@
     matTooltipShowDelay="1000">
   </span>
 
-  <div class="navbar-actions-row" *ngIf="!isSmallScreen">
-    <button routerLink="/commands-logs" mat-button>
-      <mat-icon class="trace-button" >notifications</mat-icon>
-    </button>
-
-    <div class="navbar-buttons-row">
-      <a class="ordinary-button download-agent-button" href="https://ognproject.evlt.uma.es/ogagent/" target="_blank" rel="noopener noreferrer"
-        [matTooltip]="'downloadOgAgent' | translate" matTooltipShowDelay="1000">
-        <mat-icon class="download-icon">download</mat-icon>
-        {{ 'downloadAgent' | translate }}
-      </a>
-
-      <button class="ordinary-button" (click)="showGlobalStatus()">
-        {{ 'GlobalStatus' | translate }}
+  @if (!isSmallScreen) {
+    <div class="navbar-actions-row">
+      <button routerLink="/commands-logs" mat-button>
+        <mat-icon class="trace-button" >notifications</mat-icon>
       </button>
 
-      <button class="ordinary-button" *ngIf="auth.userCategory === 'super-admin'" [matMenuTriggerFor]="menu"
-        [matTooltip]="'manageUsersAndRolesDesc' | translate" matTooltipShowDelay="1000">
-        {{ 'Administration' | translate }}
-      </button>
+      <div class="navbar-buttons-row">
+        <a class="ordinary-button download-agent-button" href="https://ognproject.evlt.uma.es/ogagent/" target="_blank" rel="noopener noreferrer"
+          [matTooltip]="'downloadOgAgent' | translate" matTooltipShowDelay="1000">
+          <mat-icon class="download-icon">download</mat-icon>
+          {{ 'downloadAgent' | translate }}
+        </a>
 
-      <button class="ordinary-button" (click)="editUser()" *ngIf="auth.userCategory !== 'super-admin'"
-        [matTooltip]="'editUserTooltip' | translate" matTooltipShowDelay="1000">
-        {{ 'changePassword' | translate }}
-      </button>
+        <button class="ordinary-button" (click)="showGlobalStatus()">
+          {{ 'GlobalStatus' | translate }}
+        </button>
 
-      <button class="logout-button" (click)="logOut()" [matTooltip]="'logoutTooltip' | translate"
+        @if (auth.userCategory === 'super-admin') {
+          <button class="ordinary-button" [matMenuTriggerFor]="menu"
+            [matTooltip]="'manageUsersAndRolesDesc' | translate" matTooltipShowDelay="1000">
+            {{ 'Administration' | translate }}
+          </button>
+        }
+
+        @if (auth.userCategory !== 'super-admin') {
+          <button class="ordinary-button" (click)="editUser()"
+            [matTooltip]="'editUserTooltip' | translate" matTooltipShowDelay="1000">
+            {{ 'changePassword' | translate }}
+          </button>
+        }
+
+        <button mat-button [matMenuTriggerFor]="langMenu" class="language-button">
+          <mat-icon>language</mat-icon>
+          {{ 'labelLanguage' | translate }}
+          <mat-icon iconPositionEnd>arrow_drop_down</mat-icon>
+        </button>
+
+        <button class="logout-button" (click)="logOut()" [matTooltip]="'logoutTooltip' | translate"
+          matTooltipShowDelay="1000">
+          {{ 'logout' | translate }}
+        </button>
+      </div>
+    </div>
+  }
+
+  <mat-menu #langMenu="matMenu">
+    @for (lang of availableLanguages; track lang.code) {
+      <button mat-menu-item (click)="switchLanguage(lang.code)" [disabled]="getCurrentLanguage() === lang.code">
+        <span>{{ lang.label }}</span>
+      </button>
+    }
+  </mat-menu>
+
+  <!-- Menú desplegable para pantallas pequeñas -->
+  @if (isSmallScreen) {
+    <div class="isSmallScreenButtons">
+      <button class="trace-button" routerLink="/commands-logs" mat-button>
+        <mat-icon>notifications</mat-icon>
+      </button>
+      <button class="smallScreenMenubutton" mat-icon-button [matMenuTriggerFor]="smallScreenMenu" [matTooltip]="'labelOptions' | translate" matTooltipShowDelay="1000">
+        <mat-icon>menu</mat-icon>
+      </button>
+      <mat-menu #smallScreenMenu="matMenu">
+        <a mat-menu-item href="https://ognproject.evlt.uma.es/ogagent/" target="_blank" rel="noopener noreferrer">
+          <mat-icon>download</mat-icon>
+          {{ 'downloadAgent' | translate }}
+        </a>
+        <button mat-menu-item (click)="showGlobalStatus()">
+          {{ 'GlobalStatus' | translate }}
+        </button>
+        @if (auth.userCategory === 'super-admin') {
+          <button mat-menu-item [matMenuTriggerFor]="menu">
+            {{ 'Administration' | translate }}
+          </button>
+          <button mat-menu-item (click)="editUser()">
+            {{ 'changePassword' | translate }}
+          </button>
+        }
+        <mat-divider></mat-divider>
+        <button mat-menu-item [matMenuTriggerFor]="langMenu">
+          <mat-icon>language</mat-icon>
+          {{ 'labelLanguage' | translate }}
+        </button>
+      </mat-menu>
+      <button class="logout-button" routerLink="/auth/login" [matTooltip]="'logoutTooltip' | translate"
         matTooltipShowDelay="1000">
         {{ 'logout' | translate }}
       </button>
     </div>
-  </div>
-
-  <!-- Menú desplegable para pantallas pequeñas -->
-  <div *ngIf="isSmallScreen" class="isSmallScreenButtons">
-    <button class="trace-button" routerLink="/commands-logs" mat-button>
-      <mat-icon>notifications</mat-icon>
-    </button>
-    <button class="smallScreenMenubutton" mat-icon-button [matMenuTriggerFor]="smallScreenMenu" [matTooltip]="'labelOptions' | translate" matTooltipShowDelay="1000">
-      <mat-icon>menu</mat-icon>
-    </button>
-    <mat-menu #smallScreenMenu="matMenu">
-      <a mat-menu-item href="https://ognproject.evlt.uma.es/ogagent/" target="_blank" rel="noopener noreferrer">
-        <mat-icon>download</mat-icon>
-        {{ 'downloadAgent' | translate }}
-      </a>
-      <button mat-menu-item (click)="showGlobalStatus()">
-        {{ 'GlobalStatus' | translate }}
-      </button>
-      <button mat-menu-item *ngIf="auth.userCategory === 'super-admin'" [matMenuTriggerFor]="menu">
-        {{ 'Administration' | translate }}
-      </button>
-      <button mat-menu-item *ngIf="auth.userCategory === 'super-admin'" (click)="editUser()">
-        {{ 'changePassword' | translate }}
-      </button>
-    </mat-menu>
-    <button class="logout-button" routerLink="/auth/login" [matTooltip]="'logoutTooltip' | translate"
-      matTooltipShowDelay="1000">
-      {{ 'logout' | translate }}
-    </button>
-  </div>
+  }
 
   <mat-menu #menu="matMenu">
     <button mat-menu-item routerLink="/users" [matTooltip]="'viewAndManageUsers' | translate"
diff --git a/ogWebconsole/src/app/layout/header/header.component.ts b/ogWebconsole/src/app/layout/header/header.component.ts
index 6f8ed9d..4196b4f 100644
--- a/ogWebconsole/src/app/layout/header/header.component.ts
+++ b/ogWebconsole/src/app/layout/header/header.component.ts
@@ -1,9 +1,11 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, OnInit, Output, inject } from '@angular/core';
 import { ChangePasswordModalComponent } from '../../components/admin/users/users/change-password-modal/change-password-modal.component';
 import { MatDialog } from "@angular/material/dialog";
 import { GlobalStatusComponent } from 'src/app/components/global-status/global-status.component';
 import { BreakpointObserver } from '@angular/cdk/layout';
 import { AuthService } from '@services/auth.service';
+import { TranslateService } from '@ngx-translate/core';
+import { ConfigService } from '@services/config.service';
 
 @Component({
   selector: 'app-header',
@@ -12,6 +14,8 @@ import { AuthService } from '@services/auth.service';
 })
 
 export class HeaderComponent implements OnInit {
+  private translate = inject(TranslateService);
+  private config = inject(ConfigService);
   isSuperAdmin: boolean = false;
   isSmallScreen: boolean = false;
 
@@ -33,6 +37,14 @@ export class HeaderComponent implements OnInit {
     })
   }
 
+  get availableLanguages() {
+    const langs = this.config.languages;
+    return Object.keys(langs).map(code => ({
+      code,
+      label: langs[code]
+    }));
+  }
+
   editUser() {
     const dialogRef = this.dialog.open(ChangePasswordModalComponent, {
       data: { user: this.auth.username, uuid: this.auth.uuid },
@@ -50,4 +62,13 @@ export class HeaderComponent implements OnInit {
   logOut() {
     this.auth.logout();
   }
+
+  switchLanguage(lang: string) {
+    this.translate.use(lang);
+    localStorage.setItem('language', lang);
+  }
+
+  getCurrentLanguage(): string {
+    return this.translate.currentLang || 'es';
+  }
 }
diff --git a/ogWebconsole/src/app/services/config.service.ts b/ogWebconsole/src/app/services/config.service.ts
index 445af98..dddc808 100644
--- a/ogWebconsole/src/app/services/config.service.ts
+++ b/ogWebconsole/src/app/services/config.service.ts
@@ -26,14 +26,18 @@ export class ConfigService {
   }
 
   get apiUrl(): string {
-    return this.config.apiUrl;
+    return this.config?.apiUrl;
   }
 
   get mercureUrl(): string {
-    return this.config.mercureUrl;
+    return this.config?.mercureUrl;
   }
 
   get logUrl(): string {
-    return this.config.logUrl;
+    return this.config?.logUrl;
+  }
+
+  get languages(): { [key: string]: string } {
+    return this.config?.languages || { "es": "Español", "en": "English" };
   }
 }
\ No newline at end of file
diff --git a/ogWebconsole/src/locale/en.json b/ogWebconsole/src/locale/en.json
index 060b148..8dd2214 100644
--- a/ogWebconsole/src/locale/en.json
+++ b/ogWebconsole/src/locale/en.json
@@ -880,8 +880,9 @@
   "labelValue": "Value",
   "labelVariable": "Variable",
   "labelWeekDays": "Days of the week",
-  "langEnglish": "English",
-  "langSpanish": "Spanish",
+  "labelLanguage": "Language",
+  "langEn": "English",
+  "langEs": "Spanish",
   "Legend": "Legend",
   "limpiarAcciones": "Clear actions",
   "linuxOption": "LINUX",
diff --git a/ogWebconsole/src/locale/es.json b/ogWebconsole/src/locale/es.json
index d727c06..a2b4603 100644
--- a/ogWebconsole/src/locale/es.json
+++ b/ogWebconsole/src/locale/es.json
@@ -866,8 +866,9 @@
   "labelValue": "Valor",
   "labelVariable": "Variable",
   "labelWeekDays": "Días de la semana",
-  "langEnglish": "Inglés",
-  "langSpanish": "Español",
+  "labelLanguage": "Idioma",
+  "langEn": "Inglés",
+  "langEs": "Español",
   "Legend": "Leyenda",
   "limpiarAcciones": "Limpiar acciones",
   "linuxOption": "LINUX",