adding allert onSearch button, fix redirecting

src/app/home/home.component.html

@@ -1,4 +1,13 @@
 <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>Enter a location!!</span>
+    </div>
+  </div>
+
+
   <!-- <div class="canvas nuvola">
     <canvas #myCanvas width="100vw" class="canvas"></canvas>
   </div> -->

src/app/home/home.component.ts

@@ -22,13 +22,11 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
 
   public locationsPopup: Subject<Locations[]> = new Subject<Locations[]>()
 
-  subs: Subscription[] = []
+  subs: Subscription[] = [];
-
-
   backgroundColor: string | undefined;
   qrCodeImage: string | undefined;
   locations: Locations[] = [];
-
+  allert: boolean = false;
   locationsFiltrati: Locations[] = [];
   luogoSelezionato: string = '';
   suggerimentoAttivo: boolean = false;
@@ -51,8 +49,7 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
         console.log(data[i])
       }
     });
-
+    this.allert = false;
-
     console.log("home init");
     this.subs.push(this.readjsonService.getLocation("Lugano").subscribe(val => console.log(val)))
     const text = 'https://aramisgrata.ch'; // sostituisci con la tua stringa
@@ -174,9 +171,17 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   onSearch(): void {
+    if (this.luogoSelezionato === '') {
+      this.allert=true;
+      setTimeout(() => {
+        this.allert=false;
+      }, 8000);
+      return;
+    }else{
       const nomeLocation = encodeURIComponent(this.luogoSelezionato);
       this.router.navigate(['/location', nomeLocation]);
     }
+  }
 
   protected readonly Event = Event;
 }

src/app/list/list.component.html

@@ -10,8 +10,7 @@
     <h3>
       {{waypoinst.name}}
     </h3>
-
+    <h4>Distance: }</h4>
-
   </div>
 
 </div>