Centralized translations

src/app/app.component.html

@@ -1,2 +1,12 @@
 <button (click)="clearAllCookies()">Logout</button>
+<div class="dropdown dropdown-hover" id="translate">
+  <label tabindex="0" class="btn m-1 bg-black border-neutral text-base-100"
+         id="translateLabel">{{homeTranslations.translate}}</label>
+  <ul tabindex="0" class="dropdown-content menu p-2 shadow rounded-box w-52" id="translateUl">
+    <li (click)="switchLanguage('DE')"><a>DE</a></li>
+    <li (click)="switchLanguage('FR')"><a>FR</a></li>
+    <li (click)="switchLanguage('IT')"><a>IT</a></li>
+    <li (click)="switchLanguage('EN')"><a>EN</a></li>
+  </ul>
+</div>
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -1,22 +1,37 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 import {CookieService} from "ngx-cookie-service";
 import {Router} from "@angular/router";
+import {homeTranslations, listTranslations, managementTranslations} from "./interface/translations";
+import {TranslateService} from "./service/language/translate.service";
+import {ReadTranslateJsonService} from "./service/language/readTranslateJson.service";
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent {
+export class AppComponent  implements OnInit{
   title = 'm-152';
 
+  homeTranslations: homeTranslations = {} as homeTranslations;
+  listTranslations: listTranslations = {} as listTranslations;
+  managementTranslation: managementTranslations = {} as managementTranslations;
+
 
   constructor(
     private cookieService: CookieService,
     private router: Router,
+    private translateService: TranslateService,
+    private readTranslationJsonService: ReadTranslateJsonService,
   ) {
   }
 
+  ngOnInit() {
+    this.homeTranslations = this.readTranslationJsonService.getHomeTranslations();
+    this.listTranslations = this.readTranslationJsonService.getListTransaltions();
+    this.managementTranslation = this.readTranslationJsonService.getManagementTranslations();
+  }
+
   clearAllCookies() {
     const allCookies = this.cookieService.getAll();
     for (const cookieName in allCookies) {
@@ -24,4 +39,44 @@ export class AppComponent {
     }
     this.router.navigate(['/login']);
   }
+
+
+  // This async function is used to switch the language of the application.
+  // It takes a language code as input and updates the translations object with new translations for various UI elements.
+  // The getData() method of the translateService is called with the current translations and the new language code.
+  // The translateService returns the translated data which is then assigned to the corresponding properties of the translations object.
+  async switchLanguage(lang: string) {
+    // Load Home Page Translations
+    this.homeTranslations.translate = await this.translateService.getData(this.homeTranslations.translate, lang);
+    this.homeTranslations.menuPlaces = await this.translateService.getData(this.homeTranslations.menuPlaces, lang);
+    this.homeTranslations.alertMessage = await this.translateService.getData(this.homeTranslations.alertMessage, lang);
+    this.homeTranslations.searchPlaceholder = await this.translateService.getData(this.homeTranslations.searchPlaceholder, lang);
+    this.homeTranslations.searchButton = await this.translateService.getData(this.homeTranslations.searchButton, lang);
+
+    // Load List Page Translations
+    this.listTranslations.distance = await this.translateService.getData(this.listTranslations.distance, lang);
+    this.listTranslations.locationName = await this.translateService.getData(this.listTranslations.locationName, lang);
+    this.listTranslations.positionNotFoundErrorMessage = await this.translateService.getData(this.listTranslations.positionNotFoundErrorMessage, lang);
+
+    // Load Management Page Translations
+    this.managementTranslation.users = await this.translateService.getData(this.managementTranslation.users, lang);
+    this.managementTranslation.locations = await this.translateService.getData(this.managementTranslation.locations, lang);
+    this.managementTranslation.waypoints = await this.translateService.getData(this.managementTranslation.waypoints, lang);
+    this.managementTranslation.name = await this.translateService.getData(this.managementTranslation.name, lang);
+    this.managementTranslation.username = await this.translateService.getData(this.managementTranslation.username, lang);
+    this.managementTranslation.password = await this.translateService.getData(this.managementTranslation.password, lang);
+    this.managementTranslation.location = await this.translateService.getData(this.managementTranslation.location, lang);
+    this.managementTranslation.region = await this.translateService.getData(this.managementTranslation.region, lang);
+    this.managementTranslation.lat = await this.translateService.getData(this.managementTranslation.lat, lang);
+    this.managementTranslation.lon = await this.translateService.getData(this.managementTranslation.lon, lang);
+    this.managementTranslation.description = await this.translateService.getData(this.managementTranslation.description, lang);
+    this.managementTranslation.locationName = await this.translateService.getData(this.managementTranslation.locationName, lang);
+    this.managementTranslation.image = await this.translateService.getData(this.managementTranslation.image, lang);
+    this.managementTranslation.translate = await this.translateService.getData(this.managementTranslation.translate, lang);
+    this.managementTranslation.addLocationButton = await this.translateService.getData(this.managementTranslation.addLocationButton, lang);
+    this.managementTranslation.addUserButton = await this.translateService.getData(this.managementTranslation.addUserButton, lang);
+    this.managementTranslation.addWaypointButton = await this.translateService.getData(this.managementTranslation.addWaypointButton, lang);
+    this.managementTranslation.add = await this.translateService.getData(this.managementTranslation.add, lang);
+    this.managementTranslation.close = await this.translateService.getData(this.managementTranslation.close, lang);
+  }
 }

src/app/component/list/list.component.html

@@ -1,13 +1,3 @@
-<div class="dropdown dropdown-hover" id="translate">
-  <label tabindex="0" class="btn m-1 bg-black border-neutral text-base-100"
-         id="translateLabel">{{translations.translate}}</label>
-  <ul tabindex="0" class="dropdown-content menu p-2 shadow rounded-box w-52" id="translateUl">
-    <li (click)="switchLanguage('DE')"><a>DE</a></li>
-    <li (click)="switchLanguage('FR')"><a>FR</a></li>
-    <li (click)="switchLanguage('IT')"><a>IT</a></li>
-    <li (click)="switchLanguage('EN')"><a>EN</a></li>
-  </ul>
-</div>
 <div *ngIf="isNear" class="container">
   <h1>
     {{translations.locationName}}{{locationParams}}

src/app/component/list/list.component.ts

@@ -35,8 +35,6 @@ export class ListComponent implements OnInit, OnChanges {
   constructor(
     private route: ActivatedRoute,
     private positionService: positionService,
-    private translateService: TranslateService,
-    private readTranslationJsonService: ReadTranslateJsonService,
     private locationService: LocationService,
     private waypointService: WaypointService,
     private cookieService: cookieService,
@@ -44,7 +42,6 @@ export class ListComponent implements OnInit, OnChanges {
   }
 
   async ngOnInit() {
-    this.translations = this.readTranslationJsonService.getListTransaltions();
     this.username =  this.cookieService.getUsername();
     this.route.params.subscribe(params => {
       this.locationParams = params['location'];
@@ -96,13 +93,6 @@ export class ListComponent implements OnInit, OnChanges {
     }, 2000);
   }
 
-  async switchLanguage(lang: string) {
-    this.translations.translate = await this.translateService.getData(this.translations.translate, lang);
-    this.translations.distance = await this.translateService.getData(this.translations.distance, lang);
-    this.translations.locationName = await this.translateService.getData(this.translations.locationName, lang);
-    this.translations.positionNotFoundErrorMessage = await this.translateService.getData(this.translations.positionNotFoundErrorMessage, lang);
-  }
-
   private checkDataPopulated(): void {
     if (this.locations && this.location) {
       console.log("Dati popolati correttamente:", this.locations, this.location);

src/app/component/management/management.component.html

@@ -1,14 +1,3 @@
-<div class="dropdown dropdown-hover" id="translate">
-  <label tabindex="0" class="btn m-1 bg-black border-neutral text-base-100"
-         id="translateLabel">{{translations.translate}}</label>
-  <ul tabindex="0" class="dropdown-content menu p-2 shadow rounded-box w-52" id="translateUl">
-    <li (click)="switchLanguage('DE')"><a>DE</a></li>
-    <li (click)="switchLanguage('FR')"><a>FR</a></li>
-    <li (click)="switchLanguage('IT')"><a>IT</a></li>
-    <li (click)="switchLanguage('EN')"><a>EN</a></li>
-  </ul>
-</div>
-
 <h1>{{translations.users}}</h1>
 <table>
   <thead>

src/app/component/management/management.component.ts

@@ -115,28 +115,4 @@ export class ManagementComponent implements OnInit {
   closeWaypointForm() {
     this.showWaypointForm = false;
   }
-
-  async switchLanguage(lang: string) {
-
-    // Man
-    this.translations.users = await this.translateService.getData(this.translations.users, lang);
-    this.translations.locations = await this.translateService.getData(this.translations.locations, lang);
-    this.translations.waypoints = await this.translateService.getData(this.translations.waypoints, lang);
-    this.translations.name = await this.translateService.getData(this.translations.name, lang);
-    this.translations.username = await this.translateService.getData(this.translations.username, lang);
-    this.translations.password = await this.translateService.getData(this.translations.password, lang);
-    this.translations.location = await this.translateService.getData(this.translations.location, lang);
-    this.translations.region = await this.translateService.getData(this.translations.region, lang);
-    this.translations.lat = await this.translateService.getData(this.translations.lat, lang);
-    this.translations.lon = await this.translateService.getData(this.translations.lon, lang);
-    this.translations.description = await this.translateService.getData(this.translations.description, lang);
-    this.translations.locationName = await this.translateService.getData(this.translations.locationName, lang);
-    this.translations.image = await this.translateService.getData(this.translations.image, lang);
-    this.translations.translate = await this.translateService.getData(this.translations.translate, lang);
-    this.translations.addLocationButton = await this.translateService.getData(this.translations.addLocationButton, lang);
-    this.translations.addUserButton = await this.translateService.getData(this.translations.addUserButton, lang);
-    this.translations.addWaypointButton = await this.translateService.getData(this.translations.addWaypointButton, lang);
-    this.translations.add = await this.translateService.getData(this.translations.add, lang);
-    this.translations.close = await this.translateService.getData(this.translations.close, lang);
-  }
 }

src/app/home/home.component.html

@@ -11,16 +11,6 @@
     </div>
   </div>
 
-  <div class="dropdown dropdown-hover" id="translate">
-    <label tabindex="0" class="btn m-1 bg-black border-neutral text-base-100">{{translations.translate}}</label>
-    <ul tabindex="0" class="dropdown-content menu p-2 shadow rounded-box w-52">
-      <li (click)="switchLanguage('DE')"><a>DE</a></li>
-      <li (click)="switchLanguage('FR')"><a>FR</a></li>
-      <li (click)="switchLanguage('IT')"><a>IT</a></li>
-      <li (click)="switchLanguage('EN')"><a>EN</a></li>
-    </ul>
-  </div >
-
   <div class="bg-image">
 
     <div class="search">

src/app/home/home.component.ts

@@ -44,7 +44,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   // Initializes the component and loads translations and locations
   ngOnInit(): void {
     this.translations = this.readTranslationJsonService.getHomeTranslations();
-    console.log("translations loaded", this.translations);
     this.username= this.cookieService.getUsername();
     this.locationService.getLocations()
       .subscribe(locations => {
@@ -130,18 +129,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
       this.router.navigate(['/location', nomeLocation]);
     }
   }
-
-  // This async function is used to switch the language of the application.
-  // It takes a language code as input and updates the translations object with new translations for various UI elements.
-  // The getData() method of the translateService is called with the current translations and the new language code.
-  // The translateService returns the translated data which is then assigned to the corresponding properties of the translations object.
-  async switchLanguage(lang: string) {
-    this.translations.translate = await this.translateService.getData(this.translations.translate, lang);
-    this.translations.menuPlaces = await this.translateService.getData(this.translations.menuPlaces, lang);
-    this.translations.alertMessage = await this.translateService.getData(this.translations.alertMessage, lang);
-    this.translations.searchPlaceholder = await this.translateService.getData(this.translations.searchPlaceholder, lang);
-    this.translations.searchButton = await this.translateService.getData(this.translations.searchButton, lang);
-  }
 }