aggiunto salvataggio dell waypoint visitato

src/app/component/detail/detail.component.html

@@ -1,10 +1,18 @@
-<div>
-  <div class="flex flex-col md:flex-row  gap-0 m-5 h-full">
-    <div class="card w-full h-full min-h-16 bg-base-100 shadow-2xl">
-      <figure><img [src]="waypointInfo.img" [alt]="waypointInfo?.locationName"/></figure>
+<div class="absolute top-0 h-screen w-screen">
+  <div id="map" class="absolute h-screen w-screen">
+    <iframe *ngIf="distance"
+            class=" w-full h-full shadow-2xl pointer-events-auto"
+            height="300" frameborder=""
+            style=""
+            referrerpolicy="no-referrer-when-downgrade"
+            [src]='embed | safe' allowfullscreen></iframe>
+  </div>
+    <div class="card bg-white sm:w-fit md:w-3/4 lg:w-1/4  m-4 p-4 z-10 absolute bottom-0 bg-gray-100 bg-opacity-65 backdrop-filter backdrop-blur-lg border-2 border-gray-300 shadow-4xl rounded-sm overflow-y-auto pointer-events-auto">
+      <figure><img [src]="waypointInfo?.img ? waypointInfo.img : '/assets/testDetail/img.png'"
+                   [alt]="waypointInfo?.locationName ? waypointInfo.locationName : ''"/></figure>
       <div class="card-body">
         <div class="flex justify-between items-center">
-          <h1 class="card-title font-extrabold">{{ waypointInfo?.locationName }}</h1>
+          <h1 class="card-title font-extrabold">{{ waypointInfo?.locationName ? waypointInfo.locationName : 'Error 404' }}</h1>
           <div class="font-extrabold text-end text-blue-500 flex items-center">
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="19.9219" height="19.9316" *ngIf="!distance" class="mx-1">
@@ -20,17 +28,23 @@
               <path
                 d="M1.29,9.83l7.12,0c0.15,0,0.27,0.12,0.27,0.27v6.06c0,1.46,1.76,2.15,2.42,0.81l7.22-15.54c0.66-1.34-0.49-2.52-1.85-2.08L1.08,7.49C-0.14,8.06,0.1,9.82,1.29,9.83z"/>
             </svg>
-            {{distance === undefined ? '' : distance}} Km
+            {{ distance ? distance : '' }} Km
           </div>
         </div>
-        <p>{{ waypointInfo.description }}</p>
+        <p class="overflow-auto max-h-12">{{ waypointInfo?.description ? waypointInfo.description : 'pippo says that you are serching in a unknown location' }}</p>
       </div>
     </div>
-    <div class="md:relative w-full flex items-center justify-center md:justify-start">
-      <iframe *ngIf="distance" class="md:absolute sm:w-full md:h-3/4 md:w-full md:rounded-r-2xl shadow-2xl border-2 items-center" height="300" frameborder=""
-              style=""
-              referrerpolicy="no-referrer-when-downgrade"
-              [src]='embed | safe' allowfullscreen></iframe>
+
+
+  <div class="404" *ngIf="!waypointInfo">
+    <h1>
+      Oops!
+    </h1>
+    <h2>
+      404 Not Found
+    </h2>
+    <div class="error-details">
+      Sorry, an error has occured, Requested page not found!
     </div>
   </div>
 
@@ -40,7 +54,8 @@
 
   <div class="modal modal-bottom sm:modal-middle" *ngIf="img">
     <div class="modal-box">
-      <h3 class="font-bold text-lg">{{ detailTranslations.congratulations }}: {{ waypointInfo.name }}!</h3>
+      <h3 class="font-bold text-lg">Congratulations you have
+        discovred {{ waypointInfo?.locationName ? waypointInfo.locationName : '' }}!</h3>
       <img class="xl:max-w-md max-h-screen py-4 m-auto" [src]="img" *ngIf="img">
       <div class="modal-action">
         <label for="my-modal-6" class="btn bg-white hover:bg-blue-400" (click)="downloadImage()">