position service

src/app/detail/detail.component.html

@@ -10,7 +10,7 @@
       height="250"
       frameborder="0" style="border:0"
       referrerpolicy="no-referrer-when-downgrade"
-      [src]='embed | safe'
+      [src]='embed | safe '
       allowfullscreen>
     </iframe>
   </div>

src/app/detail/detail.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from "@angular/router";
-import {CalculateDistanceService} from "../service/calculateDistance.service";
+import {positionService} from "../service/position.service";
 
 @Component({
   selector: 'app-detail',
@@ -11,19 +11,6 @@ export class DetailComponent implements OnInit {
   private location: string | undefined;
   private id: number | undefined;
 
-  constructor(private route: ActivatedRoute , private calculateDistanceService: CalculateDistanceService) {
-  }
-
-  ngOnInit(): void {
-    this.route.params.subscribe(params => {
-      this.location = params['location'];
-      this.id = params['id'];
-    })
-    console.log(this.location);
-    console.log(this.id);
-    this.getLocation();
-  }
-
   test = {
     name: 'SPAI',
     cordinates: '46.15187077044123,8.799829438699243',
@@ -34,45 +21,38 @@ export class DetailComponent implements OnInit {
 
   embed = `https://www.google.com/maps/embed/v1/place?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&q=${this.test.lat},${this.test.lng}`
 
-  cord = {
+  cord: any;
-    lat: 0,
-    lng: 0
-  }
 
   showNav = true;
   distance: number | undefined;
   displayedDistance = 0;
 
-  getLocation() {
+  constructor(private route: ActivatedRoute , private positionService: positionService) {}
-    console.log(this.embed)
+
-    console.log("get location");
+  async ngOnInit(){
-    if (navigator.geolocation) {
+    this.route.params.subscribe(params => {
-      navigator.geolocation.getCurrentPosition((position) => {
+      this.location = params['location'];
-        this.cord.lat = position.coords.latitude;
+      this.id = params['id'];
-        this.cord.lng = position.coords.longitude;
+    })
-        console.log(this.cord);
+    console.log(this.location);
-        this.checkDistanceTimer();
+    console.log(this.id);
-      })
+    console.log(this.embed);
-    } else {
+    this.cord = await this.positionService.getLocation();
-      alert("Geolocation is not supported by this browser.");
+    this.checkDistanceTimer();
-    }
   }
 
   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.calculateDistanceService.getDistanceBetweenCoordinates(lat1, lon1, +lat2, +lon2);
+        this.distance = this.positionService.getDistanceBetweenCoordinates(this.cord.lat, this.cord.lat, +lat2, +lon2);
         console.log(this.distance);
         if (this.distance == 0) {
           this.showNav = false;
           this.displayedDistance = Math.round(this.distance * 100) / 100;
         }
-
         if (this.distance < 0.05) {
           this.showNav = false;
           clearInterval(intervalID);
@@ -82,6 +62,4 @@ export class DetailComponent implements OnInit {
       }
     }, 1000);
   }
-
-  ///
 }

src/app/interface/cord.ts

@@ -0,0 +1,4 @@
+export interface Cord {
+  lat: number;
+  lon: number;
+}

src/app/service/calculateDistance.service.ts

@@ -1,25 +0,0 @@
-import {Injectable} from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class CalculateDistanceService{
-  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));
-    // Distance in km
-    return earthRadius * c;
-  }
-
-  deg2rad(deg: number) {
-    return deg * (Math.PI / 180)
-  }
-
-}

src/app/service/position.service.ts

@@ -0,0 +1,52 @@
+import {Injectable} from '@angular/core';
+import{Cord} from "../interface/cord";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class positionService{
+  cord: Cord = { lat: 0, lon: 0 };
+
+  getDistanceBetweenCoordinates(lat1: number | undefined, lon1: number | undefined, lat2: number, lon2: number) {
+    if (lat1 === undefined || lon1 === undefined) {
+      console.log('lat1 or lon1 is undefined')
+      return 0;
+    }else{
+      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));
+      // Distance in km
+      return earthRadius * c;
+    }
+  }
+
+  deg2rad(deg: number) {
+    return deg * (Math.PI / 180)
+  }
+
+  async getLocation() {
+    console.log('get location');
+    return new Promise((resolve, reject) => {
+      if (navigator.geolocation) {
+        navigator.geolocation.getCurrentPosition((position) => {
+          const lat = position.coords.latitude;
+          const lon = position.coords.longitude;
+          this.cord = { lat, lon };
+          console.log(this.cord);
+          resolve(this.cord);
+        }, (error) => {
+          reject(error);
+        });
+      } else {
+        reject('Geolocation is not supported by this browser.');
+      }
+    });
+  }
+
+}