diff --git a/package.json b/package.json index 1c274d4..5e8162c 100644 --- a/package.json +++ b/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", diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css index ecdbbe3..bc6241b 100644 --- a/src/app/home/home.component.css +++ b/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; +} diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 25ef5fe..55bc35b 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,12 +1,18 @@
-
+
- + + + Enter a location!!
+ + @@ -16,7 +22,7 @@
+ class="input input-bordered input-primary btn-wide">
- - -
+ + +
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index c8d3e5a..c796e47 100644 --- a/src/app/home/home.component.ts +++ b/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'; - - @ViewChild('canvas') canvasRef: ElementRef | undefined; - canvas: any; - ctx: any; - img: any; + input: string = 'How are you?'; + output: string = ''; - 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))) - const text = 'https://aramisgrata.ch'; // sostituisci con la tua stringa - QRCode.toDataURL(text, {errorCorrectionLevel: 'H'}, (err, url) => { - this.qrCodeImage = url; - }); + //this.subs.push(this.readjsonService.getLocation("Lugano").subscribe(val => console.log(val))) } 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++) { diff --git a/src/app/service/deepL.service.ts b/src/app/service/deepL.service.ts new file mode 100644 index 0000000..537b4e9 --- /dev/null +++ b/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 { + const params = new HttpParams() + .set('auth_key', this.apiKey) + .set('text', text) + .set('target_lang', targetLang); + + return this.http.post(this.apiUrl, params); + } + +} diff --git a/src/environments/environment.ts b/src/environments/environment.ts new file mode 100644 index 0000000..49d0fb1 --- /dev/null +++ b/src/environments/environment.ts @@ -0,0 +1,4 @@ +export const environment = { + production: false, + deepLApiKey: '197fe2d7-bda4-d41b-5f48-cba0bc644be4:fx' +};