miglioramento localizzazione e finito lo style

src/app/detail/detail.component.css

@@ -1,9 +1 @@
-.titolo {
-  font-size: 1.5em;
-  font-weight: bold;
-  margin-bottom: 0.5em;
-}
 
-button {
-  margin: 1em;
-}

src/app/detail/detail.component.html

@@ -1,38 +1,18 @@
-<!--
-  <div class="infos">
-    <h1 class="titolo">{{test.name}}</h1>
-    <p>{{test.description}}</p>
-  </div>
-
-  <div class="nav">
-    <p ng-model="showNav" *ngIf="showNav">Distanza: {{distance}}</p>
-    <div id="nav" ng-model="showNav" *ngIf="showNav">
-      <iframe
-        width="500"
-        height="300"
-        frameborder="0" style="border:0"
-        referrerpolicy="no-referrer-when-downgrade"
-        [src]='embed | safe '
-        allowfullscreen>
-      </iframe>
-    </div>
-  </div>
-
-  <div class="image">
-    <img src="assets/testDetail/img.jpg" alt="image">
-  </div>-->
 <div>
-  <div class="grid grid-cols-2 gap-4">
+  <div class="flex flex-col md:flex-row  gap-0 m-5 h-full">
-    <div class="card w-96 bg-base-100 shadow-xl m-4">
+    <div class="card w-full h-full bg-base-100 shadow-2xl">
-      <figure><img src="assets/testDetail/img.png" [alt]="test.name"/></figure>
+      <figure><img src="assets/testDetail/igm.png" [alt]="test.name"/></figure>
       <div class="card-body">
         <div class="flex justify-between items-center">
           <h1 class="card-title font-extrabold">{{ test.name }}</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">
+            <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">
               <g>
                 <rect height="19.9316" opacity="0" width="19.9219" x="0" y="0"/>
-                <path d="M4.85352 11.0156L9.95117 11.0156C10.332 11.0156 10.6348 10.7227 10.6348 10.332L10.6348 3.75C10.6348 3.36914 10.332 3.07617 9.95117 3.07617C9.57031 3.07617 9.27734 3.36914 9.27734 3.75L9.27734 9.6582L4.85352 9.6582C4.46289 9.6582 4.16992 9.95117 4.16992 10.332C4.16992 10.7227 4.46289 11.0156 4.85352 11.0156ZM9.96094 19.9219C15.4102 19.9219 19.9219 15.4004 19.9219 9.96094C19.9219 4.51172 15.4004 0 9.95117 0C4.51172 0 0 4.51172 0 9.96094C0 15.4004 4.52148 19.9219 9.96094 19.9219ZM9.96094 18.2617C5.35156 18.2617 1.66992 14.5703 1.66992 9.96094C1.66992 5.35156 5.3418 1.66016 9.95117 1.66016C14.5605 1.66016 18.2617 5.35156 18.2617 9.96094C18.2617 14.5703 14.5703 18.2617 9.96094 18.2617Z" fill="currentcolor" fill-opacity="0.85"/>
+                <path
+                  d="M4.85352 11.0156L9.95117 11.0156C10.332 11.0156 10.6348 10.7227 10.6348 10.332L10.6348 3.75C10.6348 3.36914 10.332 3.07617 9.95117 3.07617C9.57031 3.07617 9.27734 3.36914 9.27734 3.75L9.27734 9.6582L4.85352 9.6582C4.46289 9.6582 4.16992 9.95117 4.16992 10.332C4.16992 10.7227 4.46289 11.0156 4.85352 11.0156ZM9.96094 19.9219C15.4102 19.9219 19.9219 15.4004 19.9219 9.96094C19.9219 4.51172 15.4004 0 9.95117 0C4.51172 0 0 4.51172 0 9.96094C0 15.4004 4.52148 19.9219 9.96094 19.9219ZM9.96094 18.2617C5.35156 18.2617 1.66992 14.5703 1.66992 9.96094C1.66992 5.35156 5.3418 1.66016 9.95117 1.66016C14.5605 1.66016 18.2617 5.35156 18.2617 9.96094C18.2617 14.5703 14.5703 18.2617 9.96094 18.2617Z"
+                  fill="currentcolor" fill-opacity="0.85"/>
               </g>
             </svg>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.44 18.4" width="18" height="18" fill="currentColor"
@@ -46,12 +26,11 @@
         <p>{{ test.description }}</p>
       </div>
     </div>
-
+    <div class="md:relative w-full flex items-center justify-center md:justify-start">
-    <div class="nav p-4 gr col-start-2">
+      <iframe *ngIf="distance" class="md:absolute sm:w-full md:h-3/4 md:w-3/4 rounded-b-lg md:rounded-r-lg shadow-2xl border-2 items-center" height="300" frameborder=""
-      <div>
+              style=""
-        <iframe class="w-full" height="300" frameborder="0" style="border:0" referrerpolicy="no-referrer-when-downgrade"
+              referrerpolicy="no-referrer-when-downgrade"
-                [src]='embed | safe' allowfullscreen></iframe>
+              [src]='embed | safe' allowfullscreen></iframe>
-      </div>
     </div>
   </div>
 

src/app/detail/detail.component.ts

@@ -17,13 +17,13 @@ export class DetailComponent implements OnInit {
 
   test = {
     name: 'SPAI',
-    cordinates: '50.16980727184211, 10.795563727809393',
+    cordinates: '46.2295425892837, 8.74425883677592',
-    lat: 46.16243997917877,
+    lat: 46.2295425892837,
-    lng: 8.787662959380318,
+    lng: 8.74425883677592,
     description: "Lorem ipsum"
   }
 
-  embed = `https://www.google.com/maps/embed/v1/place?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&q=${this.test.lat},${this.test.lng}`
+  embed: any;
 
   cord: any;
 
@@ -47,23 +47,25 @@ export class DetailComponent implements OnInit {
     this.checkDistanceTimer();
   }
 
-  checkDistanceTimer() {
+  async checkDistanceTimer() {
     //set interval
     let intervalID = setInterval(() => {
+      this.cord = this.positionService.getLocationWithoutPromise();
+      this.embed = `https://www.google.com/maps/embed/v1/directions?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&origin=${this.cord.lat},${this.cord.lon}&destination=${this.test.lat},${this.test.lng}`;
       if (this.showNav) {
-        this.distance = this.positionService.getDistanceBetweenCoordinates(this.cord.lat, this.cord.lon, this.test.lat, this.test.lng);
+        this.myModal.nativeElement.checked = false;
-        console.log(this.distance);
+        if (this.cord?.lat && this.cord?.lon) {
-        if (this.distance == 0) {
+          this.distance = this.positionService.getDistanceBetweenCoordinates(this.cord?.lat, this.cord?.lon, this.test.lat, this.test.lng);
-          this.showNav = false;
+          if (this.distance < 0.05) {
-          this.displayedDistance = Math.round(this.distance * 100) / 100;
+            //this.showNav = false;
-        }
+            this.generateQR()
-        if (this.distance < 0.05) {
+            // implement this nex line in angular ts
-          this.showNav = false;
+            this.myModal.nativeElement.checked = true;
-          this.generateQR()
+          }
-          // implement this nex line in angular ts
+        } else {
-          this.myModal.nativeElement.checked = true;
+          this.distance = undefined;
-          clearInterval(intervalID);
         }
+
       } else {
         clearInterval(intervalID);
       }

src/app/service/position.service.ts

@@ -4,8 +4,8 @@ import {Cord} from "../interface/cord";
 @Injectable({
   providedIn: 'root'
 })
-export class positionService{
+export class positionService {
-  cord: Cord = { lat: 0, lon: 0 };
+  cord: Cord = {lat: 0, lon: 0};
 
   getDistanceBetweenCoordinates(lat1: number | undefined, lon1: number | undefined, lat2: number, lon2: number): number {
     if (lat1 === undefined || lon1 === undefined) {
@@ -37,7 +37,7 @@ export class positionService{
         navigator.geolocation.getCurrentPosition((position) => {
           const lat = position.coords.latitude;
           const lon = position.coords.longitude;
-          this.cord = { lat, lon };
+          this.cord = {lat, lon};
           console.log("cordinate: ", this.cord);
           resolve(this.cord);
         }, (error) => {
@@ -48,4 +48,14 @@ export class positionService{
       }
     });
   }
+
+  lastCord: Cord = {lat: 0, lon: 0};
+
+  getLocationWithoutPromise(): any {
+    this.getLocation().then((cord) => {
+      this.lastCord = cord;
+      console.log("lastCord service: ", this.lastCord);
+    });
+    return this.lastCord;
+  }
 }