diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 8b68d9a..562fa63 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,12 +15,14 @@ import { SafePipe } from './pipes/safe.pipe'; AppComponent, HomeComponent, ListComponent, - DetailComponent + DetailComponent, + SafePipe ], 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 dc153b2..739fff8 100644 --- a/src/app/home/home.component.css +++ b/src/app/home/home.component.css @@ -26,7 +26,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 1564364..566c284 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,12 +1,14 @@
+
+ +
-
    -
  • {{luogo.nome}}
    • +
  • {{luogo.location}}
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 11176a5..d16e4f1 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,11 +1,12 @@ -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"; interface Luogo { - nome: string; - latitudine: number; - longitudine: number; + location: string; + lat: number; + lon: number; } @Component({ @@ -14,6 +15,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[] = [] @@ -21,63 +25,114 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy { latitude: number | undefined; longitude: number | undefined; backgroundColor: 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; suggerimento: string = ''; completamento: string = 'ciao'; - @ViewChild('myInput') myInput?: ElementRef; - - - constructor(private service: ReadjsonService) {} + constructor(private service: ReadjsonService) { + } ngOnInit(): void { + console.log("home init"); this.subs.push(this.service.getLocation("Lugano").subscribe(val => console.log(val))) } + 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()) + ))}) + + fromEvent(this.myInput?.nativeElement, 'input') + .pipe( + // debounceTime(500), decommentarlo se bisogna fare una chiamata http + distinctUntilChanged() + ).subscribe((val: any) => { + this.luoghiPopup.next(this.luoghi.filter(l => l.location.toLowerCase().startsWith(val.target.value.toLowerCase()))) + }) + } + ngOnDestroy() { this.subs.forEach(sub => sub.unsubscribe()) } - ngAfterViewInit() { - fromEvent(this.myInput?.nativeElement, 'input') - .pipe( - // 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()))) - }) + 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); } - cercaLuogo(nome: string){ - setTimeout(() => { + 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(); + } + + 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 = ''; } - 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(); - }); -});