From 3ebba88398d6c80b5d706a3583344432aa9dc722 Mon Sep 17 00:00:00 2001
From: grata <aramis.grata@bluewin.ch>
Date: Tue, 18 Apr 2023 09:43:00 +0200
Subject: [PATCH] Added Translations

---
 package-lock.json                           | 92 ++++++++++++++++-----
 src/app/app.module.ts                       |  2 +-
 src/app/home/home.component.html            | 22 +++--
 src/app/home/home.component.ts              | 73 +++++-----------
 src/app/interface/translations.ts           |  9 ++
 src/app/service/readTranslateJsonService.ts | 27 ++++++
 src/app/service/readjson.service.ts         |  4 -
 src/app/service/translate.service.ts        | 21 ++---
 src/assets/i18n/en.json                     |  8 ++
 9 files changed, 156 insertions(+), 102 deletions(-)
 create mode 100644 src/app/interface/translations.ts
 create mode 100644 src/app/service/readTranslateJsonService.ts
 create mode 100644 src/assets/i18n/en.json

diff --git a/package-lock.json b/package-lock.json
index 73cac9b..1932ad0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "@angular/router": "^15.0.0",
         "angularx-qrcode": "^15.0.1",
         "daisyui": "^2.49.0",
+        "deepl": "^1.0.13",
         "qrcode": "^1.5.1",
         "rxjs": "~7.5.0",
         "tslib": "^2.3.0",
@@ -28,7 +29,6 @@
         "@angular/cli": "~15.0.4",
         "@angular/compiler-cli": "^15.0.0",
         "@types/jasmine": "~4.3.0",
-        "@types/qrcode": "^1.5.0",
         "jasmine-core": "~4.5.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.1.0",
@@ -2853,6 +2853,18 @@
         "webpack": "^5.54.0"
       }
     },
+    "node_modules/@ngx-translate/core": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-14.0.0.tgz",
+      "integrity": "sha512-UevdwNCXMRCdJv//0kC8h2eSfmi02r29xeE8E9gJ1Al4D4jEJ7eiLPdjslTMc21oJNGguqqWeEVjf64SFtvw2w==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=13.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -3302,15 +3314,6 @@
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
       "dev": true
     },
-    "node_modules/@types/qrcode": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.0.tgz",
-      "integrity": "sha512-x5ilHXRxUPIMfjtM+1vf/GPTRWZ81nqscursm5gMznJeK9M0YnZ1c3bEvRLQ0zSSgedLx1J6MGL231ObQGGhaA==",
-      "dev": true,
-      "dependencies": {
-        "@types/node": "*"
-      }
-    },
     "node_modules/@types/qrcode": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.0.tgz",
@@ -3885,6 +3888,14 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "dependencies": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
     "node_modules/babel-loader": {
       "version": "9.1.2",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.2.tgz",
@@ -4989,6 +5000,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/deepl": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/deepl/-/deepl-1.0.13.tgz",
+      "integrity": "sha512-ieaHKo+Y2u1jTpbX3SkhFGaOLgXB20gYoLqPhqtjxr612GC9wSMUqrHIfhvQzpevTVcI6H4kgElXActg3DHnqg==",
+      "dependencies": {
+        "axios": "^0.21.1",
+        "querystring": "^0.2.0"
+      }
+    },
     "node_modules/default-gateway": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
@@ -5839,7 +5859,6 @@
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
       "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true,
       "funding": [
         {
           "type": "individual",
@@ -9707,6 +9726,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/querystring": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
+      "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==",
+      "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -13874,6 +13902,14 @@
       "dev": true,
       "requires": {}
     },
+    "@ngx-translate/core": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-14.0.0.tgz",
+      "integrity": "sha512-UevdwNCXMRCdJv//0kC8h2eSfmi02r29xeE8E9gJ1Al4D4jEJ7eiLPdjslTMc21oJNGguqqWeEVjf64SFtvw2w==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -14235,15 +14271,6 @@
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
       "dev": true
     },
-    "@types/qrcode": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.0.tgz",
-      "integrity": "sha512-x5ilHXRxUPIMfjtM+1vf/GPTRWZ81nqscursm5gMznJeK9M0YnZ1c3bEvRLQ0zSSgedLx1J6MGL231ObQGGhaA==",
-      "dev": true,
-      "requires": {
-        "@types/node": "*"
-      }
-    },
     "@types/qrcode": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.0.tgz",
@@ -14722,6 +14749,14 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
+    "axios": {
+      "version": "0.21.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
+      "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
+      "requires": {
+        "follow-redirects": "^1.14.0"
+      }
+    },
     "babel-loader": {
       "version": "9.1.2",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.2.tgz",
@@ -15551,6 +15586,15 @@
       "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
       "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA=="
     },
+    "deepl": {
+      "version": "1.0.13",
+      "resolved": "https://registry.npmjs.org/deepl/-/deepl-1.0.13.tgz",
+      "integrity": "sha512-ieaHKo+Y2u1jTpbX3SkhFGaOLgXB20gYoLqPhqtjxr612GC9wSMUqrHIfhvQzpevTVcI6H4kgElXActg3DHnqg==",
+      "requires": {
+        "axios": "^0.21.1",
+        "querystring": "^0.2.0"
+      }
+    },
     "default-gateway": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz",
@@ -16231,8 +16275,7 @@
     "follow-redirects": {
       "version": "1.15.2",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
-      "dev": true
+      "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
     },
     "forwarded": {
       "version": "0.2.0",
@@ -19126,6 +19169,11 @@
         "side-channel": "^1.0.4"
       }
     },
+    "querystring": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz",
+      "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg=="
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 1d168cf..4a9c5f4 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -22,7 +22,7 @@ import { SafePipe } from './pipes/safe.pipe';
     BrowserModule,
     AppRoutingModule,
     FormsModule,
-    HttpClientModule
+    HttpClientModule,
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 55bc35b..480f9e9 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -7,27 +7,31 @@
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
               d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
       </svg>
-      <span>Enter a location!!</span>
+      <span>{{translations.alertMessage}}</span>
     </div>
   </div>
 
-  <button class="btn btn-outline btn-primary" id="translate" (click)="translate()">Traduci</button>
+  <div class="dropdown dropdown-hover">
+    <label tabindex="0" class="btn m-1">{{translations.translate}}</label>
+    <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 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 class="canvas nuvola">
-    <canvas #myCanvas width="100vw" class="canvas"></canvas>
-  </div> -->
   <div class="bg-image">
     <div class="search">
 
       <div class="inputElements">
         <input #myInput type="text" [(ngModel)]="luogoSelezionato" (keyup)="cercaLuogo(myInput.value)"
-               (keydown)="selezionaSuggerimento($event)" placeholder="Type here"
+               (keydown)="selezionaSuggerimento($event)" placeholder="{{translations.searchPlaceholder}}"
                class="input input-bordered input-primary btn-wide">
 
         <button
           class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary"
           (click)="onSearch()">
-          Search
+          {{translations.searchButton}}
           <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path
               d="M18.125,15.804l-4.038-4.037c0.675-1.079,1.012-2.308,1.01-3.534C15.089,4.62,12.199,1.75,8.584,1.75C4.815,1.75,1.982,4.726,2,8.286c0.021,3.577,2.908,6.549,6.578,6.549c1.241,0,2.417-0.347,3.44-0.985l4.032,4.026c0.167,0.166,0.43,0.166,0.596,0l1.479-1.478C18.292,16.234,18.292,15.968,18.125,15.804 M8.578,13.99c-3.198,0-5.716-2.593-5.733-5.71c-0.017-3.084,2.438-5.686,5.74-5.686c3.197,0,5.625,2.493,5.64,5.624C14.242,11.548,11.621,13.99,8.578,13.99 M16.349,16.981l-3.637-3.635c0.131-0.11,0.721-0.695,0.876-0.884l3.642,3.639L16.349,16.981z"></path>
@@ -41,7 +45,7 @@
           [style.width.px]="myInput.offsetWidth">
 
         <li class="menu-title">
-          <span>Places</span>
+          <span>{{translations.menuPlaces}}</span>
         </li>
 
         <li *ngFor="let luogo of locations" (click)="luogoSelezionato=luogo.location; cercaLuogo(luogo.location)">
@@ -49,7 +53,7 @@
         </li>
 
         <li class="menu-title">
-          <span>Near</span>
+          <span>{{translations.menuNear}}</span>
         </li>
 
         <li *ngFor="let luogo of luoghiNear()">
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index c796e47..f37da4e 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,16 +1,13 @@
 import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import {distinctUntilChanged, fromEvent, Observable, Subject, Subscription} from "rxjs";
+import {BehaviorSubject, distinctUntilChanged, fromEvent, Observable, Subject, Subscription} from "rxjs";
 import {ReadjsonService} from "../service/readjson.service";
 import {Locations} from "../interface/data";
-import * as QRCode from 'qrcode';
 import {Router} from "@angular/router";
-import {DeepLService} from "../service/deepL.service";
+import { TranslateService } from '../service/translate.service';
+import {ReadTranslateJsonService} from "../service/readTranslateJsonService";
+import {translations} from "../interface/translations";
+
 
-interface Luogo {
-  location: string;
-  lat: number;
-  lon: number;
-}
 
 @Component({
   selector: 'app-home',
@@ -19,37 +16,39 @@ interface Luogo {
 })
 export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('myInput') myInput?: ElementRef;
-  @ViewChild('myCanvas') myCanvas?: ElementRef<HTMLCanvasElement>;
 
   public locationsPopup: Subject<Locations[]> = new Subject<Locations[]>()
 
   subs: Subscription[] = [];
   backgroundColor: string | undefined;
-  qrCodeImage: string | undefined;
   locations: Locations[] = [];
   allert: boolean = false;
   locationsFiltrati: Locations[] = [];
   luogoSelezionato: string = '';
   suggerimentoAttivo: boolean = false;
   suggerimento: string = '';
-  completamento: string = 'ciao';
+  completamento: string = '';
   input: string = 'How are you?';
-  output: string = '';
+  translations: translations = {} as translations;
 
 
-  constructor(private readjsonService: ReadjsonService, private router: Router, private deepLService: DeepLService) {
+  constructor(private readjsonService: ReadjsonService, private router: Router, private translateService: TranslateService, private readTranslationJsonService: ReadTranslateJsonService) {
   }
 
   ngOnInit(): void {
+    this.translations = this.readTranslationJsonService.getData();
+    console.log("translations loaded", this.translations)
+
     this.readjsonService.getLocations().subscribe(data => {
       for (let i = 0; i < data.length; i++) {
         this.locations.push(<Locations>data[i])
         console.log(data[i])
       }
     });
+
+
     this.allert = false;
     console.log("home init");
-    //this.subs.push(this.readjsonService.getLocation("Lugano").subscribe(val => console.log(val)))
   }
 
   ngOnDestroy() {
@@ -58,9 +57,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
 
 
   ngAfterViewInit() {
-    const canvas = this.myCanvas?.nativeElement;
-    if (canvas)
-      this.animateClouds(canvas);
 
     if (this.locations != undefined) {
       fromEvent(this.myInput?.nativeElement, 'focus').pipe(
@@ -80,36 +76,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     })
   }
 
-  animateClouds(canvas: HTMLCanvasElement): void {
-    let x = -200;
-    let y = 100;
-    let speed = 2;
-    let rand = 30;
-    let ctx = canvas.getContext("2d");
-    canvas.width = window.innerWidth;
-    setInterval(() => {
-      if (ctx) {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        this.drawCloud(x, y, ctx);
-        x += speed;
-        if (x > canvas.width + 200) {
-          x = -200;
-        }
-      }
-      rand = Math.round(Math.random() * (10 - 500)) + 10
-    }, rand);
-  }
-
-  drawCloud(x: number, y: number, ctx: CanvasRenderingContext2D) {
-    ctx.beginPath();
-    ctx.arc(x, y, 50, 0, 2 * Math.PI);
-    ctx.arc(x + 25, y - 25, 50, 0, 2 * Math.PI);
-    ctx.arc(x + 75, y - 25, 50, 0, 2 * Math.PI);
-    ctx.arc(x + 50, y, 50, 0, 2 * Math.PI);
-    ctx.fillStyle = "#87CEEB";
-    ctx.fill();
-  }
-
   cercaLuogo(locations: string) {
     setTimeout(() => {
     }, 1000);
@@ -153,13 +119,14 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
-  translate() {
-    this.deepLService.translate(this.input, 'DE')
-      .subscribe(response => console.log(response.translations[0].text));
-
+  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.menuNear = await this.translateService.getData(this.translations.menuNear, lang);
+    this.translations.searchButton = await this.translateService.getData(this.translations.searchButton, lang);
   }
-
-  protected readonly Event = Event;
 }
 
 
diff --git a/src/app/interface/translations.ts b/src/app/interface/translations.ts
new file mode 100644
index 0000000..f143521
--- /dev/null
+++ b/src/app/interface/translations.ts
@@ -0,0 +1,9 @@
+export interface translations {
+  alertMessage: string;
+  translate: string;
+  searchButton: string;
+  searchPlaceholder: string;
+  menuPlaces: string;
+  menuNear: string;
+}
+
diff --git a/src/app/service/readTranslateJsonService.ts b/src/app/service/readTranslateJsonService.ts
new file mode 100644
index 0000000..3a2f38b
--- /dev/null
+++ b/src/app/service/readTranslateJsonService.ts
@@ -0,0 +1,27 @@
+import {Injectable} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {translations} from "../interface/translations";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ReadTranslateJsonService {
+  private translationData: translations = {} as translations;
+
+  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)
+    });
+  }
+
+  getData(): translations {
+    console.log("data loaded", this.translationData)
+    return this.translationData;
+  }
+}
diff --git a/src/app/service/readjson.service.ts b/src/app/service/readjson.service.ts
index da27017..af834a9 100644
--- a/src/app/service/readjson.service.ts
+++ b/src/app/service/readjson.service.ts
@@ -53,8 +53,4 @@ export class ReadjsonService{
       tap(data => console.log("data requested", data))
     );
   }
-
-
-
-
 }
diff --git a/src/app/service/translate.service.ts b/src/app/service/translate.service.ts
index 14e9f2a..179d71b 100644
--- a/src/app/service/translate.service.ts
+++ b/src/app/service/translate.service.ts
@@ -1,21 +1,16 @@
-import { Injectable } from '@angular/core';
-//import { Translate } from '@google-cloud/translate/build/src/v2';
-
+import {DeepLService} from "./deepL.service";
+import {Injectable} from "@angular/core";
 
 @Injectable({
   providedIn: 'root'
 })
 export class TranslateService {
+  constructor(private deepLService: DeepLService) {
 
-  //private translate: Translate;
-
- // constructor() {
-   // this.translate = new Translate({projectId: 'Modulo-152'});
-  //}
-
-  //async translateText(text: string, target: string): Promise<string> {
-    //const [translation] = await this.translate.translate(text, target);
-  //return translation;
-  //}
+  }
 
+  async getData(input: string, lang: string): Promise<string> {
+    const response = await this.deepLService.translate(input, lang).toPromise();
+    return response.translations[0].text;
+  }
 }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
new file mode 100644
index 0000000..45961f6
--- /dev/null
+++ b/src/assets/i18n/en.json
@@ -0,0 +1,8 @@
+{
+  "alertMessage": "Enter a location!!",
+  "translate": "Translate",
+  "searchButton": "Search",
+  "searchPlaceholder": "Type here...",
+  "menuPlaces": "Places",
+  "menuNear": "Near"
+}