88 lines
2.3 KiB
TypeScript
Executable File
88 lines
2.3 KiB
TypeScript
Executable File
import {Component, OnInit} from '@angular/core';
|
|
import {ActivatedRoute} from "@angular/router";
|
|
import {CalculateDistanceService} from "../service/calculateDistance.service";
|
|
|
|
@Component({
|
|
selector: 'app-detail',
|
|
templateUrl: './detail.component.html',
|
|
styleUrls: ['./detail.component.css']
|
|
})
|
|
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',
|
|
lat: 46.15187077044123,
|
|
lng: 8.799829438699243,
|
|
description: "Lorem ipsum"
|
|
}
|
|
|
|
embed = `https://www.google.com/maps/embed/v1/place?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&q=${this.test.lat},${this.test.lng}`
|
|
|
|
cord = {
|
|
lat: 0,
|
|
lng: 0
|
|
}
|
|
|
|
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.");
|
|
}
|
|
}
|
|
|
|
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);
|
|
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);
|
|
}
|
|
} else {
|
|
clearInterval(intervalID);
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
///
|
|
}
|