Added translation in list component

src/app/home/home.component.html

@@ -52,14 +52,6 @@
           {{luogo.location}}
         </li>
 
-        <li class="menu-title">
-          <span>{{translations.menuNear}}</span>
-        </li>
-
-        <li *ngFor="let luogo of luoghiNear()">
-          {{luogo.location}}
-        </li>
-
       </ul>
     </ng-container>
   </div>

src/app/home/home.component.ts

@@ -5,7 +5,7 @@ import {Locations} from "../interface/data";
 import {Router} from "@angular/router";
 import { TranslateService } from '../service/translate.service';
 import {ReadTranslateJsonService} from "../service/readTranslateJsonService";
-import {translations} from "../interface/translations";
+import {homeTranslations} from "../interface/translations";
 
 
 
@@ -28,15 +28,14 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   suggerimentoAttivo: boolean = false;
   suggerimento: string = '';
   completamento: string = '';
-  input: string = 'How are you?';
-  translations: translations = {} as translations;
+  translations: homeTranslations = {} as homeTranslations;
 
 
   constructor(private readjsonService: ReadjsonService, private router: Router, private translateService: TranslateService, private readTranslationJsonService: ReadTranslateJsonService) {
   }
 
   ngOnInit(): void {
-    this.translations = this.readTranslationJsonService.getData();
+    this.translations = this.readTranslationJsonService.getHomeTranslations();
     console.log("translations loaded", this.translations)
 
     this.readjsonService.getLocations().subscribe(data => {
@@ -124,7 +123,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     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.menuNear = await this.translateService.getData(this.translations.menuNear, lang);
     this.translations.searchButton = await this.translateService.getData(this.translations.searchButton, lang);
   }
 }

src/app/interface/translations.ts

@@ -1,9 +1,14 @@
-export interface translations {
+export interface homeTranslations {
   alertMessage: string;
   translate: string;
   searchButton: string;
   searchPlaceholder: string;
   menuPlaces: string;
-  menuNear: string;
+}
+
+export interface listTranslations {
+  translate: string;
+  locationName: string;
+  distance: string;
 }
 

src/app/list/list.component.html

@@ -1,13 +1,21 @@
+<div class="dropdown dropdown-hover">
+  <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>
+  </ul>
+</div>
 <div *ngIf="isNear">
   <h1>
-    Posizione {{locationParams}} non trovata
+    {{translations.locationName}}{{locationParams}}
   </h1>
   <div *ngFor="let locations of locations, let i = index">
     <h3>
       <a class="link link-primary" href="location/{{locations.location}}">{{locations.location}}</a>
     </h3>
     <div *ngIf="distance[i]">
-      <h4>Distance: {{distance[i]}} km</h4>
+      <h4>{{translations.distance}}{{distance[i]}} km</h4>
     </div>
   </div>
 </div>
@@ -21,7 +29,7 @@
       <a class="link link-primary" href="location/{{location.location}}/{{waypoinst.id}}"> {{waypoinst.name}}</a>
     </h3>
     <div *ngIf="distance[i]">
-      <h4>Distance: {{distance[i]}} km</h4>
+      <h4>{{translations.distance}}{{distance[i]}} km</h4>
     </div>
 
   </div>

src/app/list/list.component.ts

@@ -3,6 +3,9 @@ import {Locations} from "../interface/data";
 import {ReadjsonService} from "../service/readjson.service";
 import {ActivatedRoute} from "@angular/router";
 import {positionService} from "../service/position.service";
+import {listTranslations} from "../interface/translations";
+import {TranslateService} from "../service/translate.service";
+import {ReadTranslateJsonService} from "../service/readTranslateJsonService";
 
 @Component({
   selector: 'app-list',
@@ -20,11 +23,13 @@ export class ListComponent implements OnInit, OnChanges {
 
   distance: number[] = [];
 
+  translations: listTranslations = {} as listTranslations
 
-  constructor(private route: ActivatedRoute, private readjsonService: ReadjsonService, private positionService: positionService) {
+  constructor(private route: ActivatedRoute, private readjsonService: ReadjsonService, private positionService: positionService, private translateService: TranslateService, private readTranslationJsonService: ReadTranslateJsonService) {
   }
 
   async ngOnInit() {
+    this.translations = this.readTranslationJsonService.getListTransaltions();
     this.route.params.subscribe(params => {
       this.locationParams = params['location'];
     });
@@ -98,5 +103,12 @@ 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);
+
+  }
+
 
 }

src/app/service/readTranslateJsonService.ts

@@ -1,27 +1,38 @@
 import {Injectable} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
-import {translations} from "../interface/translations";
+import {homeTranslations} from "../interface/translations";
+import {listTranslations} from "../interface/translations";
 
 @Injectable({
   providedIn: 'root'
 })
 export class ReadTranslateJsonService {
-  private translationData: translations = {} as translations;
+  private homeTranslations: homeTranslations = {} as homeTranslations;
+  private listTranslation: listTranslations = {} as listTranslations;
 
   constructor(private http: HttpClient) {
-    this.http.get<translations>('assets/i18n/en.json').subscribe(data => {
-      this.translationData.alertMessage = data.alertMessage;
-      this.translationData.translate = data.translate;
-      this.translationData.searchButton = data.searchButton;
-      this.translationData.searchPlaceholder = data.searchPlaceholder;
-      this.translationData.menuPlaces = data.menuPlaces;
-      this.translationData.menuNear = data.menuNear;
-      console.log("data loaded", this.translationData)
+    this.http.get<homeTranslations>('assets/i18n/home/en.json').subscribe(data => {
+      this.homeTranslations.alertMessage = data.alertMessage;
+      this.homeTranslations.translate = data.translate;
+      this.homeTranslations.searchButton = data.searchButton;
+      this.homeTranslations.searchPlaceholder = data.searchPlaceholder;
+      this.homeTranslations.menuPlaces = data.menuPlaces;
+      console.log("data loaded", this.homeTranslations)
+    });
+
+    this.http.get<listTranslations>('assets/i18n/list/en.json').subscribe(data => {
+      this.listTranslation.translate = data.translate;
+      this.listTranslation.distance = data.distance;
+      this.listTranslation.locationName = data.locationName;
+      console.log("data loaded", this.homeTranslations)
     });
   }
 
-  getData(): translations {
-    console.log("data loaded", this.translationData)
-    return this.translationData;
+  getHomeTranslations(): homeTranslations {
+    return this.homeTranslations;
+  }
+
+  getListTransaltions(): listTranslations {
+    return this.listTranslation;
   }
 }

src/assets/i18n/home/en.json

@@ -3,6 +3,5 @@
   "translate": "Translate",
   "searchButton": "Search",
   "searchPlaceholder": "Type here...",
-  "menuPlaces": "Places",
-  "menuNear": "Near"
+  "menuPlaces": "Places"
 }

src/assets/i18n/list/en.json

@@ -0,0 +1,5 @@
+{
+  "translate": "Translate",
+  "locationName": "Position not foundß: ",
+  "distance": "Distance: "
+}