fix the previous commit

src/app/home/home.component.css

@@ -1,6 +1,52 @@
-input{
-  width: 40%;
+.search {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  position: absolute;
+  top: 35%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+input {
   display: flex;
   justify-content: center;
   align-items: center;
 }
+
+#list {
+  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 {
+
+}
+
+.inputElements{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  gap: 20px;
+}
+
+.bg-image {
+  background-image: url('src/assets/img/mountains.png');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  height: 100vh;
+}
+
+#translate{
+  margin: 100px 10px 10px 10px;
+}

src/app/home/home.component.html

@@ -1,2 +1,58 @@
-<input type="text" placeholder="Type here" class="input input-bordered input-primary w-full max-w-xs" />
+<div [ngClass]="{'background-color': backgroundColor}">
 
+  <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>
+      <span>{{translations.alertMessage}}</span>
+    </div>
+  </div>
+
+  <div class="dropdown dropdown-hover">
+    <label tabindex="0" class="btn m-1 bg-black border-neutral text-base-100">{{translations.translate}}</label>
+    <ul tabindex="0" class="dropdown-content menu p-2 shadow rounded-box w-52">
+      <li (click)="switchLanguage('DE')"><a>DE</a></li>
+      <li (click)="switchLanguage('FR')"><a>FR</a></li>
+      <li (click)="switchLanguage('IT')"><a>IT</a></li>
+    </ul>
+  </div>
+
+  <div class="bg-image">
+    <div class="search">
+
+      <div class="inputElements">
+        <input #myInput type="text" [(ngModel)]="luogoSelezionato" (keyup)="cercaLuogo(myInput.value)"
+               (keydown)="selezionaSuggerimento($event)" placeholder="{{translations.searchPlaceholder}}"
+               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"
+          (click)="onSearch()">
+          {{translations.searchButton}}
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path
+              d="M18.125,15.804l-4.038-4.037c0.675-1.079,1.012-2.308,1.01-3.534C15.089,4.62,12.199,1.75,8.584,1.75C4.815,1.75,1.982,4.726,2,8.286c0.021,3.577,2.908,6.549,6.578,6.549c1.241,0,2.417-0.347,3.44-0.985l4.032,4.026c0.167,0.166,0.43,0.166,0.596,0l1.479-1.478C18.292,16.234,18.292,15.968,18.125,15.804 M8.578,13.99c-3.198,0-5.716-2.593-5.733-5.71c-0.017-3.084,2.438-5.686,5.74-5.686c3.197,0,5.625,2.493,5.64,5.624C14.242,11.548,11.621,13.99,8.578,13.99 M16.349,16.981l-3.637-3.635c0.131-0.11,0.721-0.695,0.876-0.884l3.642,3.639L16.349,16.981z"></path>
+          </svg>
+        </button>
+
+      </div>
+    </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>{{translations.menuPlaces}}</span>
+        </li>
+
+        <li *ngFor="let luogo of locations" (click)="luogoSelezionato=luogo.location; cercaLuogo(luogo.location)">
+          {{luogo.location}}
+        </li>
+
+      </ul>
+    </ng-container>
+  </div>
+</div>

src/app/home/home.component.spec.ts

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { HomeComponent } from './home.component';
-
-describe('HomeComponent', () => {
-  let component: HomeComponent;
-  let fixture: ComponentFixture<HomeComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ HomeComponent ]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(HomeComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/home/home.component.ts

@@ -1,10 +1,139 @@
-import { Component } from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {BehaviorSubject, distinctUntilChanged, fromEvent, Observable, Subject, Subscription} from "rxjs";
+import {ReadjsonService} from "../service/readjson.service";
+import {Locations} from "../interface/data";
+import {Router} from "@angular/router";
+import { TranslateService } from '../service/translate.service';
+import {ReadTranslateJsonService} from "../service/readTranslateJsonService";
+import {homeTranslations} from "../interface/translations";
+
+
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
+  @ViewChild('myInput') myInput?: ElementRef;
 
+  public locationsPopup: Subject<Locations[]> = new Subject<Locations[]>()
+
+  subs: Subscription[] = [];
+  backgroundColor: string | undefined;
+  locations: Locations[] = [];
+  allert: boolean = false;
+  locationsFiltrati: Locations[] = [];
+  luogoSelezionato: string = '';
+  suggerimentoAttivo: boolean = false;
+  suggerimento: string = '';
+  completamento: string = '';
+  translations: homeTranslations = {} as homeTranslations;
+
+
+  constructor(private readjsonService: ReadjsonService, private router: Router, private translateService: TranslateService, private readTranslationJsonService: ReadTranslateJsonService) {
+  }
+
+  ngOnInit(): void {
+    this.translations = this.readTranslationJsonService.getHomeTranslations();
+    console.log("translations loaded", this.translations)
+
+    this.readjsonService.getLocations().subscribe(data => {
+      for (let i = 0; i < data.length; i++) {
+        this.locations.push(<Locations>data[i])
+        console.log(data[i])
+      }
+    });
+
+
+    this.allert = false;
+    console.log("home init");
+  }
+
+  ngOnDestroy() {
+    this.subs.forEach(sub => sub.unsubscribe())
+  }
+
+
+  ngAfterViewInit() {
+
+    if (this.locations != undefined) {
+      fromEvent(this.myInput?.nativeElement, 'focus').pipe(
+        // debounceTime(500), decommentarlo se bisogna fare una chiamata http
+        distinctUntilChanged()
+      ).subscribe((val: any) => {
+        this.locationsPopup.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.locationsPopup.next(this.locations.filter(l => l.location.toLowerCase().startsWith(val.target.value.toLowerCase())))
+    })
+  }
+
+  cercaLuogo(locations: string) {
+    setTimeout(() => {
+    }, 1000);
+    this.locationsFiltrati = this.locations.filter((l: Locations) => l.location.toLowerCase().startsWith(locations.toLowerCase()));
+    if (this.locationsFiltrati.length > 0) {
+      this.suggerimentoAttivo = true;
+      this.suggerimento = this.locationsFiltrati[0].location;
+      this.completamento = stringDifference(locations, this.suggerimento);
+    } else {
+      this.suggerimentoAttivo = false;
+      this.suggerimento = '';
+    }
+    this.myInput?.nativeElement.focus();
+  }
+
+  selezionaSuggerimento(event: KeyboardEvent) {
+    if (event.key === 'Tab' || event.key === 'Enter') {
+      if (this.suggerimentoAttivo) {
+        this.luogoSelezionato = this.suggerimento;
+        this.suggerimentoAttivo = false;
+        this.suggerimento = '';
+      }
+    }
+  }
+
+
+  luoghiNear() {
+    return null;
+  }
+
+  onSearch(): void {
+    if (this.luogoSelezionato === '') {
+      this.allert = true;
+      setTimeout(() => {
+        this.allert = false;
+      }, 3000);
+      return;
+    } else {
+      const nomeLocation = encodeURIComponent(this.luogoSelezionato);
+      this.router.navigate(['/location', nomeLocation]);
+    }
+  }
+
+  async switchLanguage(lang: string) {
+    this.translations.translate = await this.translateService.getData(this.translations.translate, lang);
+    this.translations.menuPlaces = await this.translateService.getData(this.translations.menuPlaces, lang);
+    this.translations.alertMessage = await this.translateService.getData(this.translations.alertMessage, lang);
+    this.translations.searchPlaceholder = await this.translateService.getData(this.translations.searchPlaceholder, lang);
+    this.translations.searchButton = await this.translateService.getData(this.translations.searchButton, lang);
+  }
+}
+
+
+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;
 }