From 360b12d1c465ec6e4f990eeb5a50e5a4a9d3e59d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joe=20Ku=CC=88ng?= Date: Tue, 11 Apr 2023 22:41:44 +0200 Subject: [PATCH] position service --- src/app/detail/detail.component.html | 2 +- src/app/detail/detail.component.ts | 52 ++++++-------------- src/app/interface/cord.ts | 4 ++ src/app/service/calculateDistance.service.ts | 25 ---------- src/app/service/position.service.ts | 52 ++++++++++++++++++++ 5 files changed, 72 insertions(+), 63 deletions(-) create mode 100644 src/app/interface/cord.ts delete mode 100644 src/app/service/calculateDistance.service.ts create mode 100644 src/app/service/position.service.ts diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html index 7840198..6498d04 100644 --- a/src/app/detail/detail.component.html +++ b/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> diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts index cc3e753..524716a 100755 --- a/src/app/detail/detail.component.ts +++ b/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 = { - lat: 0, - lng: 0 - } + cord: any; showNav = true; distance: number | undefined; displayedDistance = 0; - getLocation() { - console.log(this.embed) - 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."); - } + constructor(private route: ActivatedRoute , private positionService: positionService) {} + + async ngOnInit(){ + this.route.params.subscribe(params => { + this.location = params['location']; + this.id = params['id']; + }) + console.log(this.location); + console.log(this.id); + console.log(this.embed); + this.cord = await this.positionService.getLocation(); + 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); } - - /// } diff --git a/src/app/interface/cord.ts b/src/app/interface/cord.ts new file mode 100644 index 0000000..e072952 --- /dev/null +++ b/src/app/interface/cord.ts @@ -0,0 +1,4 @@ +export interface Cord { + lat: number; + lon: number; +} diff --git a/src/app/service/calculateDistance.service.ts b/src/app/service/calculateDistance.service.ts deleted file mode 100644 index c91c0d5..0000000 --- a/src/app/service/calculateDistance.service.ts +++ /dev/null @@ -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) - } - -} diff --git a/src/app/service/position.service.ts b/src/app/service/position.service.ts new file mode 100644 index 0000000..4b974bd --- /dev/null +++ b/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.'); + } + }); + } + +}