diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 2e30537..a0ff7c0 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -21,7 +21,8 @@ import { SafePipe } from './pipes/safe.pipe';
imports: [
BrowserModule,
AppRoutingModule,
- FormsModule
+ FormsModule,
+ HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
index 7b998d0..618f23e 100644
--- a/src/app/home/home.component.css
+++ b/src/app/home/home.component.css
@@ -36,7 +36,3 @@ input {
height: 100vh;
}
-.sun {
- width: 10%;
- height: auto;
-}
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index aad2597..3e9a5a7 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,4 +1,7 @@
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 8360af0..c955d13 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -1,12 +1,13 @@
-import { AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import { distinctUntilChanged, fromEvent, Subject, Subscription} from "rxjs";
+import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {distinctUntilChanged, fromEvent, Subject, Subscription} from "rxjs";
import {ReadjsonService} from "../service/readjson.service";
+import {Locations} from "../interface/data";
import * as QRCode from 'qrcode';
interface Luogo {
- nome: string;
- latitudine: number;
- longitudine: number;
+ location: string;
+ lat: number;
+ lon: number;
}
@Component({
@@ -15,6 +16,9 @@ interface Luogo {
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
+ @ViewChild('myInput') myInput?: ElementRef;
+ @ViewChild('myCanvas') myCanvas?: ElementRef;
+
luoghiPopup: Subject = new Subject()
subs: Subscription[] = []
@@ -23,13 +27,21 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
longitude: number | undefined;
backgroundColor: string | undefined;
qrCodeImage: string | undefined;
+ locations: Locations[] = [
+ {location: 'Locarno', region: 'Ticino', lat: 46.1704, lon: 8.7931},
+ {location: 'Lugano', region: 'Ticino', lat: 46.0037, lon: 8.9511},
+ {location: 'Luzern', region: 'Luzern', lat: 47.0502, lon: 8.3093},
+ {location: 'Lauterbrunnen', region: 'Bern', lat: 46.5939, lon: 7.9085}
+ ];
+
luoghi: Luogo[] = [
- {nome: 'Locarno', latitudine: 46.1704, longitudine: 8.7931},
- {nome: 'Lugano', latitudine: 46.0037, longitudine: 8.9511},
- {nome: 'Luzern', latitudine: 47.0502, longitudine: 8.3093},
- {nome: 'Lauterbrunnen', latitudine: 46.5939, longitudine: 7.9085}
+ {location: 'Locarno', lat: 46.1704, lon: 8.7931},
+ {location: 'Lugano', lat: 46.0037, lon: 8.9511},
+ {location: 'Luzern', lat: 47.0502, lon: 8.3093},
+ {location: 'Lauterbrunnen', lat: 46.5939, lon: 7.9085}
];
+ locationsFiltrati: Locations[] = [];
luoghiFiltrati: Luogo[] = [];
luogoSelezionato: string = '';
suggerimentoAttivo: boolean = false;
@@ -45,7 +57,9 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
constructor(private service: ReadjsonService) {}
+
ngOnInit(): void {
+ console.log("home init");
this.subs.push(this.service.getLocation("Lugano").subscribe(val => console.log(val)))
const text = 'https://aramisgrata.ch'; // sostituisci con la tua stringa
QRCode.toDataURL(text, { errorCorrectionLevel: 'H' }, (err, url) => {
@@ -53,11 +67,20 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
});
}
- ngOnDestroy() {
- this.subs.forEach(sub => sub.unsubscribe())
- }
-
ngAfterViewInit() {
+ console.log("canvas", this.myCanvas?.nativeElement);
+ const canvas = this.myCanvas?.nativeElement;
+ console.log("canvas 2", canvas);
+ if (canvas)
+ this.animateClouds(canvas);
+
+ fromEvent(this.myInput?.nativeElement, 'focus').pipe(
+ // debounceTime(500), decommentarlo se bisogna fare una chiamata http
+ distinctUntilChanged()
+ ).subscribe((val: any) => {
+ this.luoghiPopup.next(this.locations.filter(l => l.location.toLowerCase().startsWith(val.target.value.toLowerCase())
+ ))})
+
this.canvas = this.canvasRef?.nativeElement;
this.ctx = this.canvas.getContext('2d');
@@ -85,23 +108,54 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
// debounceTime(500), decommentarlo se bisogna fare una chiamata http
distinctUntilChanged()
).subscribe((val: any) => {
- this.luoghiPopup.next(this.luoghi.filter(l => l.nome.toLowerCase().startsWith(val.target.value.toLowerCase())))
+ this.luoghiPopup.next(this.luoghi.filter(l => l.location.toLowerCase().startsWith(val.target.value.toLowerCase())))
})
}
+ ngOnDestroy() {
+ this.subs.forEach(sub => sub.unsubscribe())
+ }
- cercaLuogo(nome: string){
+ animateClouds(canvas: HTMLCanvasElement): void {
+ console.log("animating clouds")
+ 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) {
+ console.log("xy:"+ x, y)
+ 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();
+ }
-
- setTimeout(() => {
-
+ cercaLuogo(locations: string){
+ setTimeout(()=>{
}, 1000);
- this.luoghiFiltrati = this.luoghi.filter((l: Luogo) => l.nome.toLowerCase().startsWith(nome.toLowerCase()));
- if (this.luoghiFiltrati.length > 0) {
+ this.locationsFiltrati = this.locations.filter((l: Locations) => l.location.toLowerCase().startsWith(locations.toLowerCase()));
+ if(this.locationsFiltrati.length > 0){
this.suggerimentoAttivo = true;
- this.suggerimento = this.luoghiFiltrati[0].nome;
- this.completamento = stringDifference(nome, this.suggerimento);
+ this.suggerimento = this.locationsFiltrati[0].location;
+ this.completamento = stringDifference(locations, this.suggerimento);
} else {
this.suggerimentoAttivo = false;
this.suggerimento = '';
@@ -109,12 +163,13 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
this.myInput?.nativeElement.focus();
}
- consigliaSuggerimento(nome: string) {
+ consigliaSuggerimento(locations: string) {
if (this.suggerimentoAttivo) {
- this.luogoSelezionato = nome + "-"+this.completamento;
+ this.luogoSelezionato = locations + "-" + this.completamento;
this.suggerimento = '';
}
}
+
selezionaSuggerimento(event: KeyboardEvent) {
if (event.key === 'Tab' || event.key === 'Enter') {
if (this.suggerimentoAttivo) {
diff --git a/src/app/interface/data.ts b/src/app/interface/data.ts
index 60c44e6..3bf9b4d 100644
--- a/src/app/interface/data.ts
+++ b/src/app/interface/data.ts
@@ -3,7 +3,7 @@ export interface Locations {
region: string;
lat: number;
lon: number;
- waypoints: waypoint[];
+ waypoints?: waypoint[];
}
export interface waypoint {
diff --git a/src/app/list/list.component.ts b/src/app/list/list.component.ts
index 4b8edf5..0b828ae 100644
--- a/src/app/list/list.component.ts
+++ b/src/app/list/list.component.ts
@@ -7,6 +7,7 @@ import {Component, OnInit} from '@angular/core';
})
export class ListComponent implements OnInit {
+
ngOnInit(): void {
}
}
diff --git a/src/app/pipes/safe.pipe.spec.ts b/src/app/pipes/safe.pipe.spec.ts
deleted file mode 100644
index 49ee0ad..0000000
--- a/src/app/pipes/safe.pipe.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { SafePipe } from './safe.pipe';
-
-describe('SafePipe', () => {
- it('create an instance', () => {
- const pipe = new SafePipe();
- expect(pipe).toBeTruthy();
- });
-});