creazione pagina detail

src/app/detail/detail.component.html

@@ -1 +1,9 @@
-<p>detail works!</p>
+<div>
+  <h1>{{test.name}}</h1>
+  <p>{{test.description}}</p>
+  <p>lat:{{cord.lat}}, lang:{{cord.lng}}</p>
+  <p>distanza:{{distance}}</p>
+  <div id="nav" ng-model="showNav" *ngIf="showNav">
+    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1708.0829920038827!2d8.790506152417485!3d46.16602530670125!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4785c833c36e0bd5%3A0x427d483133d7c1a0!2sCPT%20Locarno%20(SPAI%20%E2%80%93%20MPT)%20-%20Centro%20professionale%20tecnico%20Locarno!5e0!3m2!1sit!2sch!4v1675246087183!5m2!1sit!2sch" width="650" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+  </div>
+</div>

src/app/detail/detail.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import {interval} from "rxjs";
 
 @Component({
   selector: 'app-detail',
@@ -8,6 +9,70 @@ import { Component, OnInit } from '@angular/core';
 export class DetailComponent implements OnInit{
 
   ngOnInit(): void {
+    this.getLocation();
+  }
+   test = {
+    name: 'SPAI',
+    cordinates: "46.165262,8.791225",
+     description: "Lorem ipsum"
    }
 
+   cord = {
+    lat: 0,
+    lng: 0
+   }
+
+   showNav = true;
+  distance = 0;
+   getLocation() {
+     console.log("get location");
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition((position) => {
+        this.cord.lat = position.coords.latitude;
+        this.cord.lng = position.coords.longitude;
+        console.log(this.cord);
+        this.checkDistanceTimer();
+      })
+      }else {
+      alert("Geolocation is not supported by this browser.");
+    }
+  }
+
+  checkDistanceTimer() {
+     //set interval
+    let lat1 = this.cord.lat;
+    let lon1 = this.cord.lng;
+    let lat2 = this.test.cordinates.split(",")[0];
+    let lon2 = this.test.cordinates.split(",")[1];
+    let intervalID = setInterval(() => {
+      if(this.showNav){
+        this.distance = this.getDistanceBetweenCoordinates(lat1, lon1, +lat2, +lon2);
+        console.log(this.distance);
+        if(this.distance < 0.05){
+          this.showNav = false;
+          clearInterval(intervalID);
+        }
+      }else{
+        clearInterval(intervalID);
+      }
+    } , 1000);
+  }
+
+  getDistanceBetweenCoordinates(lat1: number, lon1: number, lat2: number, lon2: number) {
+    const earthRadius = 6371; // Radius of the earth in km
+    const dLat = this.deg2rad(lat2 - lat1);  // deg2rad below
+    const dLon = this.deg2rad(lon2 - lon1);
+    const a =
+      Math.sin(dLat/2) * Math.sin(dLat/2) +
+      Math.cos(this.deg2rad(lat1)) * Math.cos(this.deg2rad(lat2)) *
+      Math.sin(dLon/2) * Math.sin(dLon/2)
+    ;
+    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
+    const distance = earthRadius * c; // Distance in km
+    return distance;
+  }
+
+  deg2rad(deg: number) {
+    return deg * (Math.PI/180)
+  }
 }