diff --git a/src/app/detail/detail.component.css b/src/app/detail/detail.component.css index 34d4d22..8b13789 100644 --- a/src/app/detail/detail.component.css +++ b/src/app/detail/detail.component.css @@ -1,9 +1 @@ -.titolo { - font-size: 1.5em; - font-weight: bold; - margin-bottom: 0.5em; -} -button { - margin: 1em; -} diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html index 2be4652..8e66e4d 100644 --- a/src/app/detail/detail.component.html +++ b/src/app/detail/detail.component.html @@ -1,38 +1,18 @@ -
-
-
-
+
+
+

{{ test.name }}

- + - + {{ test.description }}

- -
-
- -
+
+
diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts index cd7f203..b26b9ee 100755 --- a/src/app/detail/detail.component.ts +++ b/src/app/detail/detail.component.ts @@ -17,13 +17,13 @@ export class DetailComponent implements OnInit { test = { name: 'SPAI', - cordinates: '50.16980727184211, 10.795563727809393', - lat: 46.16243997917877, - lng: 8.787662959380318, + cordinates: '46.2295425892837, 8.74425883677592', + lat: 46.2295425892837, + 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); - 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; - this.generateQR() - // implement this nex line in angular ts - this.myModal.nativeElement.checked = true; - clearInterval(intervalID); + this.myModal.nativeElement.checked = false; + if (this.cord?.lat && this.cord?.lon) { + this.distance = this.positionService.getDistanceBetweenCoordinates(this.cord?.lat, this.cord?.lon, this.test.lat, this.test.lng); + if (this.distance < 0.05) { + //this.showNav = false; + this.generateQR() + // implement this nex line in angular ts + this.myModal.nativeElement.checked = true; + } + } else { + this.distance = undefined; } + } else { clearInterval(intervalID); } diff --git a/src/app/service/position.service.ts b/src/app/service/position.service.ts index f6597b6..55caa37 100644 --- a/src/app/service/position.service.ts +++ b/src/app/service/position.service.ts @@ -4,8 +4,8 @@ import {Cord} from "../interface/cord"; @Injectable({ providedIn: 'root' }) -export class positionService{ - cord: Cord = { lat: 0, lon: 0 }; +export class positionService { + 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; + } } diff --git a/src/assets/testDetail/igm.png b/src/assets/testDetail/igm.png new file mode 100644 index 0000000..04dec43 Binary files /dev/null and b/src/assets/testDetail/igm.png differ