From 3bb31360d65a82a4f94e77534f7852ac03688caf Mon Sep 17 00:00:00 2001
From: grata <aramis.grata@bluewin.ch>
Date: Fri, 14 Apr 2023 21:12:17 +0200
Subject: [PATCH] Added search button and onClick function to redirect to the
 location list

---
 src/app/home/home.component.css  |  8 ++++++++
 src/app/home/home.component.html | 25 +++++++++++++++++++------
 src/app/home/home.component.ts   | 10 +++++++++-
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/src/app/home/home.component.css b/src/app/home/home.component.css
index 618f23e..ecdbbe3 100644
--- a/src/app/home/home.component.css
+++ b/src/app/home/home.component.css
@@ -28,6 +28,14 @@ input {
 
 }
 
+.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;
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 05f3d1d..c929979 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -1,13 +1,26 @@
 <div [ngClass]="{'background-color': backgroundColor}">
-  <div class="canvas nuvola">
+  <!-- <div class="canvas nuvola">
     <canvas #myCanvas width="100vw" class="canvas"></canvas>
-  </div>
+  </div> -->
   <div class="bg-image">
     <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">
 
+      <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">
+
+        <button
+          class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary"
+          (click)="onSearch()">
+          Search
+          <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>
       <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">
 
@@ -15,7 +28,7 @@
             <span>Places</span>
           </li>
 
-          <li *ngFor="let luogo of locations" (click)="luogoSelezionato=luogo.location; cercaLuogo(luogo.location)" >
+          <li *ngFor="let luogo of locations" (click)="luogoSelezionato=luogo.location; cercaLuogo(luogo.location)">
             {{luogo.location}}
           </li>
 
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index b1ab091..f74c8d6 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -3,6 +3,7 @@ import {distinctUntilChanged, fromEvent, Observable, Subject, Subscription} from
 import {ReadjsonService} from "../service/readjson.service";
 import {Locations} from "../interface/data";
 import * as QRCode from 'qrcode';
+import {Router} from "@angular/router";
 
 interface Luogo {
   location: string;
@@ -40,7 +41,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   img: any;
 
 
-  constructor(private readjsonService: ReadjsonService) {
+  constructor(private readjsonService: ReadjsonService, private router: Router) {
   }
 
   ngOnInit(): void {
@@ -172,9 +173,16 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     return null;
   }
 
+  onSearch(): void {
+    const nomeLocation = encodeURIComponent(this.luogoSelezionato);
+    this.router.navigate(['/location', nomeLocation]);
+  }
+
   protected readonly Event = Event;
 }
 
+
+
 function stringDifference(str1: string, str2: string): string {
   let diff = '';
   for (let i = 0; i < str2.length; i++) {