Merge remote-tracking branch 'origin/dev' into dev

src/app/app.module.ts

@@ -6,6 +6,7 @@ import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
 import { ListComponent } from './list/list.component';
 import { DetailComponent } from './detail/detail.component';
+import {FormsModule} from "@angular/forms";
 
 @NgModule({
   declarations: [
@@ -16,7 +17,8 @@ import { DetailComponent } from './detail/detail.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/home/home.component.css

@@ -1,20 +1,32 @@
-input{
+.search {
-  width: 500px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+input {
   display: flex;
   justify-content: center;
   align-items: center;
-  position: absolute;
+}
-  top: 30%;
+
-  left: 50%;
+.list {
-  right: 50%;
+  width: 500px;
-  bottom: 50%;
+  justify-content: center;
-  transform: translate(-50%, -50%);
+  align-items: center;
+  align-content: center;
 }
 
 .bg-image {
-  background-image: url('/assets/mountains.png');
+  background-image: url('/src/assets/img/mountains.png');
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   height: 100vh;
 }
+
+.sun {
+  width: 10%;
+  height: auto;
+}

src/app/home/home.component.html

@@ -1,4 +1,14 @@
-<div class="bg-image">
+<div [ngClass]="{'background-color': backgroundColor}">
-  <input type="text" placeholder="Type here" class="input input-bordered input-primary w-full max-w-xs" />
+  <div class="bg-image">
-</div>
+    <div class="search">
+      <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">
 
+      <ul class="list">
+        <li *ngFor="let luogo of luoghiPopup | async">{{luogo.nome}}</li>
+      </ul>
+
+    </div>
+  </div>
+</div>

src/app/home/home.component.ts

@@ -1,18 +1,99 @@
-import {Component, OnInit} from '@angular/core';
+import {AfterContentInit, AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {debounceTime, distinctUntilChanged, fromEvent, Subject} from "rxjs";
+
+interface Luogo {
+  nome: string;
+  latitudine: number;
+  longitudine: number;
+}
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent implements OnInit, AfterViewInit {
+
+  luoghiPopup: Subject<Luogo[]> = new Subject<Luogo[]>()
+
   latitude: number | undefined;
   longitude: number | undefined;
-  ngOnInit(): void {
+  backgroundColor: string | undefined;
-    navigator.geolocation.getCurrentPosition(position => {
+
-      this.latitude = position.coords.latitude;
+  luoghi: Luogo[] = [
-      this.longitude = position.coords.longitude;
+    {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}
+  ];
+  luoghiFiltrati: Luogo[] = [];
+  luogoSelezionato: string = '';
+  suggerimentoAttivo: boolean = false;
+  suggerimento: string = '';
+  completamento: string = 'ciao';
+
+  @ViewChild('myInput') myInput?: ElementRef;
+
+  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())))
     })
   }
 
+
+  cercaLuogo(nome: string){
+
+
+
+    setTimeout(() => {
+
+    }, 1000);
+    this.luoghiFiltrati = this.luoghi.filter((l: Luogo) => l.nome.toLowerCase().startsWith(nome.toLowerCase()));
+    if (this.luoghiFiltrati.length > 0) {
+      this.suggerimentoAttivo = true;
+      this.suggerimento = this.luoghiFiltrati[0].nome;
+      this.completamento = stringDifference(nome, this.suggerimento);
+
+    } else {
+      this.suggerimentoAttivo = false;
+      this.suggerimento = '';
+    }
+  }
+
+  consigliaSuggerimento(nome: string) {
+    if (this.suggerimentoAttivo) {
+      this.luogoSelezionato = nome + "-"+this.completamento;
+      this.suggerimento = '';
+    }
+  }
+  selezionaSuggerimento(event: KeyboardEvent) {
+    if (event.key === 'Tab' || event.key === 'Enter') {
+      if (this.suggerimentoAttivo) {
+        this.luogoSelezionato = this.suggerimento;
+        this.suggerimentoAttivo = false;
+        this.suggerimento = '';
+      }
+    }
+  }
+
+  ngOnInit(): void {
+
+  }
+
+
 }
+
+function stringDifference(str1: string, str2: string): string {
+  let diff = '';
+  for (let i = 0; i < str2.length; i++) {
+    if (str1[i] !== str2[i]) {
+      diff += str2[i];
+    }
+  }
+  return diff;
+}
+

src/assets/data.json

@@ -0,0 +1,27 @@
+{
+  "nome": "Biasca",
+  "provincia": "TI",
+  "waypoints": [
+    {
+      "nome": "Punto 1",
+      "lat": 46.123,
+      "lon": 8.123,
+      "descrizione": "Descrizione del punto 1",
+      "foto": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+    },
+    {
+      "nome": "Punto 2",
+      "lat": 46.123,
+      "lon": 8.123,
+      "descrizione": "Descrizione del punto 2",
+      "foto": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+    },
+    {
+      "nome": "Punto 3",
+      "lat": 46.123,
+      "lon": 8.123,
+      "descrizione": "Descrizione del punto 3",
+      "foto": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+    }
+  ]
+}