detail html new data

package.json

@@ -19,7 +19,6 @@
     "@angular/platform-browser-dynamic": "^15.0.0",
     "@angular/router": "^15.0.0",
     "angularx-qrcode": "^15.0.1",
-    "canvas": "^2.11.2",
     "daisyui": "^2.49.0",
     "deepl": "^1.0.13",
     "geolib": "^3.3.3",

src/app/component/detail/detail.component.html

@@ -1,6 +1,6 @@
 <div>
   <div class="flex flex-col md:flex-row  gap-0 m-5 h-full">
-    <div class="card w-full h-full bg-base-100 shadow-2xl">
+    <div class="card w-full h-full min-h-16 bg-base-100 shadow-2xl">
       <figure><img [src]="waypointInfo.img" [alt]="waypointInfo?.locationName"/></figure>
       <div class="card-body">
         <div class="flex justify-between items-center">

src/app/component/detail/detail.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
 import {ActivatedRoute} from "@angular/router";
 import {positionService} from "../../service/position.service";
 import {WaypointService} from "../../service/http/waypoint.service"
+//import {waypointVisitedService} from "../../service/http/waypointVisited.service"
 import * as qrcode from 'qrcode';
 @Component({
   selector: 'app-detail',
@@ -43,6 +44,7 @@ export class DetailComponent implements OnInit {
   async ngOnInit() {
     this.route.params.subscribe(params => {
       this.URLParams = params;
+      console.log("params", params);
     });
 
 
@@ -68,9 +70,11 @@ export class DetailComponent implements OnInit {
       this.embed = `https://www.google.com/maps/embed/v1/directions?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&origin=${this.cord.lat},${this.cord.lon}&destination=${this.waypointInfo.lat},${this.waypointInfo.lon}`;
       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);
+        this.distance = this.positionService.getDistanceBetweenCoordinates(this.cord?.lat, this.cord?.lon, this.waypointInfo.lat, this.waypointInfo.lon);
         if (this.distance < 0.05) {
           this.generateQR()
+
+          //this.waypointVisitedService.createWaypointVisited()
           // implement this nex line in angular ts
           this.myModal.nativeElement.checked = true;
         }
@@ -143,13 +147,13 @@ export class DetailComponent implements OnInit {
   async generateQR() {
     console.log("generating QR code");
     console.log(this.URLParams.value);
-    let url = `http://localhost:4200/location/${this.URLParams.value.location}/${this.URLParams.value.id}`;
+    let url = `http://localhost:4200/location/${this.URLParams.location}/${this.URLParams.id}`;
 
     let qrCode = await this.generateQRCode(url);
 
     console.log(qrCode);
 
-    const imageUrl = 'assets/testDetail/img.jpg';
+    const imageUrl = this.waypointInfo.img;
 
     this.addSvgToImage(imageUrl, qrCode).then((outputImageUrl) => {
       this.img = outputImageUrl // Output the URL of the output image

src/app/service/position.service.ts

@@ -38,7 +38,7 @@ export class positionService {
           const lat = position.coords.latitude;
           const lon = position.coords.longitude;
           this.cord = {lat, lon};
-          console.log("cordinate: ", this.cord);
+          //console.log("cordinate: ", this.cord);
           resolve(this.cord);
         }, (error) => {
           reject(error);
@@ -54,7 +54,7 @@ export class positionService {
   getLocationWithoutPromise(): any {
     this.getLocation().then((cord) => {
       this.lastCord = cord;
-      console.log("lastCord service: ", this.lastCord);
+      //console.log("lastCord service: ", this.lastCord);
     });
     return this.lastCord;
   }