added share imageqr when discovred

src/app/detail/detail.component.html

@@ -12,13 +12,36 @@
       allowfullscreen>
     </iframe>
   </div>
-  <button (click)="generateQR()">
+
+  <!--<label for="my-modal-6"  (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"/>
         <path d="M3.06641 22.041L14.2676 22.041C16.3086 22.041 17.334 21.0254 17.334 19.0137L17.334 9.26758C17.334 7.25586 16.3086 6.24023 14.2676 6.24023L11.543 6.24023L11.543 7.8125L14.2383 7.8125C15.2051 7.8125 15.7617 8.33984 15.7617 9.35547L15.7617 18.9258C15.7617 19.9414 15.2051 20.4688 14.2383 20.4688L3.08594 20.4688C2.10938 20.4688 1.57227 19.9414 1.57227 18.9258L1.57227 9.35547C1.57227 8.33984 2.10938 7.8125 3.08594 7.8125L5.79102 7.8125L5.79102 6.24023L3.06641 6.24023C1.02539 6.24023 0 7.25586 0 9.26758L0 19.0137C0 21.0254 1.02539 22.041 3.06641 22.041ZM8.66211 14.3945C9.08203 14.3945 9.44336 14.043 9.44336 13.6328L9.44336 3.60352L9.38477 2.13867L10.0391 2.83203L11.5234 4.41406C11.6602 4.57031 11.8555 4.64844 12.0508 4.64844C12.4512 4.64844 12.7637 4.35547 12.7637 3.95508C12.7637 3.75 12.6758 3.59375 12.5293 3.44727L9.22852 0.263672C9.0332 0.0683594 8.86719 0 8.66211 0C8.4668 0 8.30078 0.0683594 8.0957 0.263672L4.79492 3.44727C4.64844 3.59375 4.57031 3.75 4.57031 3.95508C4.57031 4.35547 4.86328 4.64844 5.27344 4.64844C5.45898 4.64844 5.67383 4.57031 5.81055 4.41406L7.28516 2.83203L7.94922 2.13867L7.89062 3.60352L7.89062 13.6328C7.89062 14.043 8.24219 14.3945 8.66211 14.3945Z" fill="#000000"/>
       </g>
     </svg>
-  </button>
+  </label>-->
-  <img [src]="img" *ngIf="img">
+
+  <!-- Put this part before </body> tag -->
+  <input type="checkbox" id="my-modal-6" class="modal-toggle" #myModal/>
+
+  <div class="modal modal-bottom sm:modal-middle" *ngIf="img">
+    <div class="modal-box">
+      <h3 class="font-bold text-lg">Congratulations you have discovred {{ test.name }}!</h3>
+      <img class="xl:max-w-md max-h-screen py-4 m-auto" [src]="img" *ngIf="img">
+      <div class="modal-action">
+        <label for="my-modal-6" class="btn bg-white hover:bg-blue-700" (click)="downloadImage()">
+          <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"/>
+              <path
+                d="M3.06641 22.041L14.2676 22.041C16.3086 22.041 17.334 21.0254 17.334 19.0137L17.334 9.26758C17.334 7.25586 16.3086 6.24023 14.2676 6.24023L11.543 6.24023L11.543 7.8125L14.2383 7.8125C15.2051 7.8125 15.7617 8.33984 15.7617 9.35547L15.7617 18.9258C15.7617 19.9414 15.2051 20.4688 14.2383 20.4688L3.08594 20.4688C2.10938 20.4688 1.57227 19.9414 1.57227 18.9258L1.57227 9.35547C1.57227 8.33984 2.10938 7.8125 3.08594 7.8125L5.79102 7.8125L5.79102 6.24023L3.06641 6.24023C1.02539 6.24023 0 7.25586 0 9.26758L0 19.0137C0 21.0254 1.02539 22.041 3.06641 22.041ZM8.66211 14.3945C9.08203 14.3945 9.44336 14.043 9.44336 13.6328L9.44336 3.60352L9.38477 2.13867L10.0391 2.83203L11.5234 4.41406C11.6602 4.57031 11.8555 4.64844 12.0508 4.64844C12.4512 4.64844 12.7637 4.35547 12.7637 3.95508C12.7637 3.75 12.6758 3.59375 12.5293 3.44727L9.22852 0.263672C9.0332 0.0683594 8.86719 0 8.66211 0C8.4668 0 8.30078 0.0683594 8.0957 0.263672L4.79492 3.44727C4.64844 3.59375 4.57031 3.75 4.57031 3.95508C4.57031 4.35547 4.86328 4.64844 5.27344 4.64844C5.45898 4.64844 5.67383 4.57031 5.81055 4.41406L7.28516 2.83203L7.94922 2.13867L7.89062 3.60352L7.89062 13.6328C7.89062 14.043 8.24219 14.3945 8.66211 14.3945Z"
+                fill="#000000"/>
+            </g>
+          </svg>
+        </label>
+      </div>
+    </div>
+  </div>
 </div>

src/app/detail/detail.component.ts

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
 import {ActivatedRoute} from "@angular/router";
 import {positionService} from "../service/position.service";
 import * as qrcode from 'qrcode';
@@ -9,6 +9,7 @@ import * as qrcode from 'qrcode';
   styleUrls: ['./detail.component.css']
 })
 export class DetailComponent implements OnInit {
+  @ViewChild('myModal', { static: true }) myModal!: ElementRef<HTMLInputElement>;
   private location: string | undefined;
   private id: number | undefined;
 
@@ -16,9 +17,9 @@ export class DetailComponent implements OnInit {
 
   test = {
     name: 'SPAI',
-    cordinates: '46.15187077044123,8.799829438699243',
+    cordinates: '46.16980727184211, 8.795563727809393',
-    lat: 46.15187077044123,
+    lat: 46.16980727184211,
-    lng: 8.799829438699243,
+    lng: 8.795563727809393,
     description: "Lorem ipsum"
   }
 
@@ -58,6 +59,9 @@ export class DetailComponent implements OnInit {
         }
         if (this.distance < 0.05) {
           this.showNav = false;
+          this.generateQR()
+          // implement this nex line in angular ts
+          this.myModal.nativeElement.checked = true;
           clearInterval(intervalID);
         }
       } else {
@@ -97,9 +101,9 @@ export class DetailComponent implements OnInit {
 
           svgImage.onload = () => {
             if (ctx && svgImage) {
-              const x = image.width - (svgImage.width * 0.5 + 5);
+              const x = image.width - (image.width * 0.2 + 5);
-              const y = image.height - (svgImage.height * 0.5 + 5);
+              const y = image.height - (image.width * 0.2 + 5);
-              ctx.drawImage(svgImage, x, y, svgImage.width * 0.5, svgImage.height * 0.5);
+              ctx.drawImage(svgImage, x, y, image.width * 0.2, image.width * 0.2);
               const outputImageUrl = canvas.toDataURL('image/png');
               resolve(outputImageUrl);
             } else {
@@ -134,7 +138,7 @@ export class DetailComponent implements OnInit {
 
     console.log(qrCode);
 
-    const imageUrl = 'assets/testDetail/img.png';
+    const imageUrl = 'assets/testDetail/img.jpg';
 
     this.addSvgToImage(imageUrl, qrCode).then((outputImageUrl) => {
       this.img = outputImageUrl // Output the URL of the output image
@@ -145,6 +149,17 @@ export class DetailComponent implements OnInit {
 
   }
 
+  public downloadImage(): void {
+    const link = document.createElement('a');
+    link.download = this.test.name;
+    link.href = this.img;
+    link.click();
+  }
+
+
+
+
+
   /*async addQRCodeToImage(url: string, imagePath: string, outputPath: string): Promise<void> {
     // Generate QR code
     const qrCode = await qrcode.toBuffer(url);