JoeKung/Progetto-m152-Angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added deepL translation api and made little improvements

Browse Source
This commit is contained in:
grata
2023-04-15 15:13:07 +02:00
parent 4815707b89
commit 8bf52dff8d
6 changed files with 83 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/home/home.component.css
View File

@@ -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;
}

55
src/app/home/home.component.html
View File

@@ -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>

53
src/app/home/home.component.ts
View File

@@ -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++) {