fix getposition + qr code start

src/app/detail/detail.component.html

@@ -12,7 +12,7 @@
       allowfullscreen>
     </iframe>
   </div>
-  <button>
+  <button (click)="generateQR()">
     <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="17.334" height="23.4863">
       <g>
         <rect height="23.4863" opacity="0" width="17.334" x="0" y="0"/>
@@ -20,4 +20,5 @@
       </g>
     </svg>
   </button>
+  <img src="assets/testDetail/img.png" alt="qr">
 </div>

src/app/detail/detail.component.ts

@@ -1,6 +1,11 @@
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from "@angular/router";
 import {positionService} from "../service/position.service";
+import { getDistance } from 'geolib';
+// @ts-ignore
+import * as sharp from 'sharp';
+import * as qrcode from 'qrcode';
+import * as canvas from 'canvas';
 
 @Component({
   selector: 'app-detail',
@@ -11,6 +16,8 @@ export class DetailComponent implements OnInit {
   private location: string | undefined;
   private id: number | undefined;
 
+  private URLParams: any;
+
   test = {
     name: 'SPAI',
     cordinates: '46.15187077044123,8.799829438699243',
@@ -30,25 +37,19 @@ export class DetailComponent implements OnInit {
   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.URLParams = this.route.snapshot.url.slice(-2).map(segment => segment.path);
+    console.log(this.URLParams); // ["lugnao", "1"]
+    console.log("getting your location: wait...");
     this.cord = await this.positionService.getLocation();
-    console.log(this.cord);
+    console.log("location: ", this.cord);
     this.checkDistanceTimer();
   }
 
   checkDistanceTimer() {
     //set interval
-    let lat2 = this.test.cordinates.split(",")[0];
-    let lon2 = this.test.cordinates.split(",")[1];
     let intervalID = setInterval(() => {
       if (this.showNav) {
-        this.distance = this.positionService.getDistanceBetweenCoordinates(this.cord.lat, this.cord.lat, +lat2, +lon2);
+        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;
@@ -63,4 +64,60 @@ export class DetailComponent implements OnInit {
       }
     }, 1000);
   }
+
+  async generateQRCodeImage(url: string): Promise<Buffer> {
+    // Crea il QR code
+    const qrCode = await qrcode.toDataURL(url, { errorCorrectionLevel: "H" });
+
+    // Crea il canvas
+    const canvasInstance = canvas.createCanvas(300, 300);
+    const ctx = canvasInstance.getContext("2d");
+
+    // Carica il QR code nell'immagine
+    const qrCodeImage = await canvas.loadImage(qrCode);
+
+    // Disegna il QR code nell'immagine
+    ctx.drawImage(qrCodeImage, 0, 0, 300, 300);
+
+    // Ritorna l'immagine come buffer
+    return canvasInstance.toBuffer();
+  }
+
+  /*generateQR() {
+    console.log("generating QR code");
+    let url = `http://localhost:4200/location/${this.URLParams[0]}/${this.URLParams[1]}`;
+    //this.addQRCodeToImage(url, `assets/testDetail/img.png`, `assets/images/${url}.png`);
+    console.log(url)
+  }*/
+
+  /*async addQRCodeToImage(url: string, imagePath: string, outputPath: string): Promise<void> {
+    // Generate QR code
+    const qrCode = await qrcode.toBuffer(url);
+
+    // Load input image using Sharp
+    const image = sharp(imagePath);
+
+    // Get input image dimensions
+    const { width, height } = await image.metadata();
+
+    // Resize QR code to 25% of input image height
+    const qrCodeHeight = Math.round(height * 0.25);
+    const qrCodeBuffer = await sharp(qrCode)
+      .resize(qrCodeHeight, qrCodeHeight)
+      .toBuffer();
+
+    // Composite QR code onto input image at bottom-right corner
+    await image.composite([
+      {
+        input: qrCodeBuffer,
+        gravity: 'southeast',
+        top: height - qrCodeHeight,
+        left: width - qrCodeHeight,
+      },
+    ]);
+
+    // Save output image to file
+    await image.toFile(outputPath);
+  }*/
+
 }

src/app/service/position.service.ts

@@ -47,18 +47,20 @@ export class positionService{
   }
 
   async getLocation(): Promise<any> {
-    console.log('get location');
     return new Promise((resolve, reject) => {
       if (navigator.geolocation) {
+        const options = {
+          enableHighAccuracy: true
+        };
         navigator.geolocation.getCurrentPosition((position) => {
           const lat = position.coords.latitude;
           const lon = position.coords.longitude;
           this.cord = { lat, lon };
-          console.log(this.cord);
+          console.log("cordinate: ", this.cord);
           resolve(this.cord);
         }, (error) => {
           reject(error);
-        });
+        }, options);
       } else {
         reject('Geolocation is not supported by this browser.');
       }