Added deepL translation api and made little improvements

package.json

@@ -20,6 +20,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",

src/app/home/home.component.css

@@ -16,12 +16,15 @@ input {
 }
 
 #list {
-  width: 500px;
+  position: absolute;
+  top: 46%;
+  left: 44%;
+  transform: translate(-50%, -50%);
   justify-content: center;
   align-items: center;
   align-content: center;
   margin-top: 10px;
-
+  margin-left: 0;
 }
 
 #list > li {
@@ -44,3 +47,6 @@ input {
   height: 100vh;
 }
 
+#translate{
+  margin: 100px 10px 10px 10px;
+}

src/app/home/home.component.html

@@ -1,12 +1,18 @@
 <div [ngClass]="{'background-color': backgroundColor}">
 
-  <div class="alert alert-warning shadow-lg " *ngIf="allert">
+  <div class="alert alert-warning shadow-lg" *ngIf="allert">
     <div>
-      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><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>
+      <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none"
+           viewBox="0 0 24 24">
+        <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>
     </div>
   </div>
 
+  <button class="btn btn-outline btn-primary" id="translate" (click)="translate()">Traduci</button>
+
   <!-- <div class="canvas nuvola">
     <canvas #myCanvas width="100vw" class="canvas"></canvas>
   </div> -->
@@ -16,7 +22,7 @@
       <div class="inputElements">
         <input #myInput type="text" [(ngModel)]="luogoSelezionato" (keyup)="cercaLuogo(myInput.value)"
                (keydown)="selezionaSuggerimento($event)" placeholder="Type here"
-               class="input input-bordered input-primary w-full max-w-xs">
+               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"
@@ -29,27 +35,28 @@
         </button>
 
       </div>
-      <ng-container *ngIf="locationsPopup | async as locations;">
-        <ul *ngIf="locations.length > 0" class="menu bg-base-200 !w-fit p-2 rounded-box" id="list">
-
-          <li class="menu-title">
-            <span>Places</span>
-          </li>
-
-          <li *ngFor="let luogo of locations" (click)="luogoSelezionato=luogo.location; cercaLuogo(luogo.location)">
-            {{luogo.location}}
-          </li>
-
-          <li class="menu-title">
-            <span>Near</span>
-          </li>
-
-          <li *ngFor="let luogo of luoghiNear()">
-            {{luogo.location}}
-          </li>
-
-        </ul>
-      </ng-container>
     </div>
+    <ng-container *ngIf="locationsPopup | async as locations;">
+      <ul *ngIf="locations.length > 0" class="menu bg-base-200 p-2 rounded-box" id="list"
+          [style.width.px]="myInput.offsetWidth">
+
+        <li class="menu-title">
+          <span>Places</span>
+        </li>
+
+        <li *ngFor="let luogo of locations" (click)="luogoSelezionato=luogo.location; cercaLuogo(luogo.location)">
+          {{luogo.location}}
+        </li>
+
+        <li class="menu-title">
+          <span>Near</span>
+        </li>
+
+        <li *ngFor="let luogo of luoghiNear()">
+          {{luogo.location}}
+        </li>
+
+      </ul>
+    </ng-container>
   </div>
 </div>

src/app/home/home.component.ts

@@ -4,6 +4,7 @@ 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";
 
 interface Luogo {
   location: string;
@@ -32,14 +33,11 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   suggerimentoAttivo: boolean = false;
   suggerimento: string = '';
   completamento: string = 'ciao';
-
+  input: string = 'How are you?';
-  @ViewChild('canvas') canvasRef: ElementRef | undefined;
+  output: string = '';
-  canvas: any;
-  ctx: any;
-  img: any;
 
 
-  constructor(private readjsonService: ReadjsonService, private router: Router) {
+  constructor(private readjsonService: ReadjsonService, private router: Router, private deepLService: DeepLService) {
   }
 
   ngOnInit(): void {
@@ -51,11 +49,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     });
     this.allert = false;
     console.log("home init");
-    this.subs.push(this.readjsonService.getLocation("Lugano").subscribe(val => console.log(val)))
+    //this.subs.push(this.readjsonService.getLocation("Lugano").subscribe(val => console.log(val)))
-    const text = 'https://aramisgrata.ch'; // sostituisci con la tua stringa
-    QRCode.toDataURL(text, {errorCorrectionLevel: 'H'}, (err, url) => {
-      this.qrCodeImage = url;
-    });
   }
 
   ngOnDestroy() {
@@ -77,30 +71,6 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
       })
     }
 
-
-    this.canvas = this.canvasRef?.nativeElement;
-    if (this.canvas) {
-      this.ctx = this.canvas.getContext('2d');
-
-      this.img = new Image();
-      this.img.onload = () => {
-        this.ctx.drawImage(this.img, 0, 0);
-        const qrCode = new Image();
-        if (typeof this.qrCodeImage === "string") {
-          qrCode.src = this.qrCodeImage;
-        }
-        qrCode.onload = () => {
-          const qrCodeSize = 100;
-          const margin = 20;
-          const x = this.canvas.width - qrCodeSize - margin;
-          const y = this.canvas.height - qrCodeSize - margin;
-          this.ctx.drawImage(qrCode, x, y, qrCodeSize, qrCodeSize);
-        }
-      }
-
-      this.img.src = 'src/assets/img/mountains.png';
-    }
-
     fromEvent(this.myInput?.nativeElement, 'input')
       .pipe(
         // debounceTime(500), decommentarlo se bisogna fare una chiamata http
@@ -172,22 +142,27 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
 
   onSearch(): void {
     if (this.luogoSelezionato === '') {
-      this.allert=true;
+      this.allert = true;
       setTimeout(() => {
-        this.allert=false;
+        this.allert = false;
       }, 8000);
       return;
-    }else{
+    } else {
       const nomeLocation = encodeURIComponent(this.luogoSelezionato);
       this.router.navigate(['/location', nomeLocation]);
     }
   }
 
+  translate() {
+    this.deepLService.translate(this.input, 'DE')
+      .subscribe(response => console.log(response.translations[0].text));
+
+  }
+
   protected readonly Event = Event;
 }
 
 
-
 function stringDifference(str1: string, str2: string): string {
   let diff = '';
   for (let i = 0; i < str2.length; i++) {

src/app/service/deepL.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { environment } from '../../environments/environment';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DeepLService {
+
+  private apiUrl = 'https://api-free.deepl.com/v2/translate';
+  private apiKey = environment.deepLApiKey;
+
+  constructor(private http: HttpClient) { }
+
+  translate(text: string, targetLang: string): Observable<any> {
+    const params = new HttpParams()
+      .set('auth_key', this.apiKey)
+      .set('text', text)
+      .set('target_lang', targetLang);
+
+    return this.http.post(this.apiUrl, params);
+  }
+
+}

src/environments/environment.ts

@@ -0,0 +1,4 @@
+export const environment = {
+  production: false,
+  deepLApiKey: '197fe2d7-bda4-d41b-5f48-cba0bc644be4:fx'
+};