aggiunto salvataggio dell waypoint visitato

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

@@ -1,10 +1,18 @@
-<div>
+<div class="absolute top-0 h-screen w-screen">
-  <div class="flex flex-col md:flex-row  gap-0 m-5 h-full">
+  <div id="map" class="absolute h-screen w-screen">
-    <div class="card w-full h-full min-h-16 bg-base-100 shadow-2xl">
+    <iframe *ngIf="distance"
-      <figure><img [src]="waypointInfo.img" [alt]="waypointInfo?.locationName"/></figure>
+            class=" w-full h-full shadow-2xl pointer-events-auto"
+            height="300" frameborder=""
+            style=""
+            referrerpolicy="no-referrer-when-downgrade"
+            [src]='embed | safe' allowfullscreen></iframe>
+  </div>
+    <div class="card bg-white sm:w-fit md:w-3/4 lg:w-1/4  m-4 p-4 z-10 absolute bottom-0 bg-gray-100 bg-opacity-65 backdrop-filter backdrop-blur-lg border-2 border-gray-300 shadow-4xl rounded-sm overflow-y-auto pointer-events-auto">
+      <figure><img [src]="waypointInfo?.img ? waypointInfo.img : '/assets/testDetail/img.png'"
+                   [alt]="waypointInfo?.locationName ? waypointInfo.locationName : ''"/></figure>
       <div class="card-body">
         <div class="flex justify-between items-center">
-          <h1 class="card-title font-extrabold">{{ waypointInfo?.locationName }}</h1>
+          <h1 class="card-title font-extrabold">{{ waypointInfo?.locationName ? waypointInfo.locationName : 'Error 404' }}</h1>
           <div class="font-extrabold text-end text-blue-500 flex items-center">
             <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="19.9219" height="19.9316" *ngIf="!distance" class="mx-1">
@@ -20,17 +28,23 @@
               <path
                 d="M1.29,9.83l7.12,0c0.15,0,0.27,0.12,0.27,0.27v6.06c0,1.46,1.76,2.15,2.42,0.81l7.22-15.54c0.66-1.34-0.49-2.52-1.85-2.08L1.08,7.49C-0.14,8.06,0.1,9.82,1.29,9.83z"/>
             </svg>
-            {{distance === undefined ? '' : distance}} Km
+            {{ distance ? distance : '' }} Km
           </div>
         </div>
-        <p>{{ waypointInfo.description }}</p>
+        <p class="overflow-auto max-h-12">{{ waypointInfo?.description ? waypointInfo.description : 'pippo says that you are serching in a unknown location' }}</p>
       </div>
     </div>
-    <div class="md:relative w-full flex items-center justify-center md:justify-start">
+
-      <iframe *ngIf="distance" class="md:absolute sm:w-full md:h-3/4 md:w-full md:rounded-r-2xl shadow-2xl border-2 items-center" height="300" frameborder=""
+
-              style=""
+  <div class="404" *ngIf="!waypointInfo">
-              referrerpolicy="no-referrer-when-downgrade"
+    <h1>
-              [src]='embed | safe' allowfullscreen></iframe>
+      Oops!
+    </h1>
+    <h2>
+      404 Not Found
+    </h2>
+    <div class="error-details">
+      Sorry, an error has occured, Requested page not found!
     </div>
   </div>
 
@@ -40,7 +54,8 @@
 
   <div class="modal modal-bottom sm:modal-middle" *ngIf="img">
     <div class="modal-box">
-      <h3 class="font-bold text-lg">{{ detailTranslations.congratulations }}: {{ waypointInfo.name }}!</h3>
+      <h3 class="font-bold text-lg">Congratulations you have
+        discovred {{ waypointInfo?.locationName ? waypointInfo.locationName : '' }}!</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-400" (click)="downloadImage()">

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

@@ -2,10 +2,14 @@ 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 {detailTranslations} from "../../interface/translations";
-//import {waypointVisitedService} from "../../service/http/waypointVisited.service"
 import * as qrcode from 'qrcode';
+import {WaypointsVisitedEntity} from "../../interface/WaypointsVisitedEntity";
 import {ReadTranslateJsonService} from "../../service/language/readTranslateJson.service";
+import {CookieService} from "ngx-cookie-service";
+import {UserService} from "../../service/http/user.service";
+import {UserEntity} from "../../interface/UserEntity";
 
 @Component({
   selector: 'app-detail',
@@ -32,12 +36,11 @@ export class DetailComponent implements OnInit {
 
   img: any;
 
-  constructor(
+  iframeLoded: boolean = false;
-    private route: ActivatedRoute,
+
-    private positionService: positionService,
+  constructor(private route: ActivatedRoute, private positionService: positionService, private waypointService: WaypointService, private waypointVisitedService: WaypointVisitedService, private readTranslationJsonService: ReadTranslateJsonService,
-    private waypointService: WaypointService,
+  private userService: UserService, private cookieService: CookieService) {
-    private readTranslationJsonService: ReadTranslateJsonService,
+
-  ) {
   }
 
   async ngOnInit() {
@@ -61,22 +64,42 @@ export class DetailComponent implements OnInit {
     this.cord = await this.positionService.getLocation();
     console.log("location: ", this.cord);
     this.checkDistanceTimer();
+    console.log(this.isIframeLoaded('map'))
   }
 
+  isIframeLoaded(iframeId: string): boolean {
+    const iframe = document.getElementById(iframeId) as HTMLIFrameElement;
+    if (!iframe) {
+      throw new Error(`Iframe with ID ${iframeId} not found`);
+    } else if (iframe.contentDocument && iframe.contentDocument.readyState === 'complete') {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+
   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.waypointInfo.lat},${this.waypointInfo.lon}`;
+      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) {
+      if (this.cord && this.waypointInfo && this.cord?.lat && this.cord?.lon && this.waypointInfo?.lat && this.waypointInfo?.lon) {
         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()
+          clearInterval(intervalID);
           // implement this nex line in angular ts
           this.myModal.nativeElement.checked = true;
+          this.userService.getUser("tito").subscribe(user => {
+            if (user.id !== undefined) {
+            let waypointVisited: WaypointsVisitedEntity = {userId: user.id , waypointId: this.waypointInfo.id}
+            console.log("waypointVisited", waypointVisited)
+            this.waypointVisitedService.createWaypoint(waypointVisited)
+            }
+          })
         }
       } else {
         this.distance = undefined;
@@ -97,67 +120,73 @@ export class DetailComponent implements OnInit {
       throw new Error('Error generating QR code');
     }
   }
-
+  async addSvgToImage(imageUrl: string, svgString: string): Promise<string> {
-  addSvgToImage(imageUrl: string, svgString: string): Promise<string> {
-    return new Promise((resolve, reject) => {
     const image = new Image();
+    image.crossOrigin = 'anonymous';
     image.src = imageUrl;
 
     const svgBlob = new Blob([svgString], {type: 'image/svg+xml'});
     const svgUrl = URL.createObjectURL(svgBlob);
 
-      image.onload = () => {
     const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      throw new Error('Could not create canvas context');
+    }
+
+    try {
+      await new Promise((resolve, reject) => {
+        image.onload = () => {
           canvas.width = image.width;
           canvas.height = image.height;
 
-        const ctx = canvas.getContext('2d');
-        if (ctx) {
           ctx.drawImage(image, 0, 0);
           const svgImage = new Image();
+
+          svgImage.crossOrigin = 'anonymous';
           svgImage.src = svgUrl;
 
           svgImage.onload = () => {
-            if (ctx && svgImage) {
             const x = image.width - (image.width * 0.2 + 5);
             const y = image.height - (image.width * 0.2 + 5);
             ctx.drawImage(svgImage, x, y, image.width * 0.2, image.width * 0.2);
+
             const outputImageUrl = canvas.toDataURL('image/png');
             resolve(outputImageUrl);
-            } else {
-              reject('Error loading SVG');
-            }
           };
 
           svgImage.onerror = () => {
             reject('Error loading SVG');
           };
-        } else {
-          reject('Error creating canvas context');
-        }
         };
 
         image.onerror = () => {
           reject('Error loading image');
         };
       });
+    } catch (err) {
+      console.error(err);
     }
 
+    return canvas.toDataURL('image/png');
+  }
+
+
 
   async generateQR() {
     console.log("generating QR code");
-    console.log(this.URLParams.value);
+    //console.log(this.URLParams.value);
     let url = `http://localhost:4200/location/${this.URLParams.location}/${this.URLParams.id}`;
 
     let qrCode = await this.generateQRCode(url);
 
-    console.log(qrCode);
+    //console.log(qrCode);
 
     const imageUrl = this.waypointInfo.img;
 
     this.addSvgToImage(imageUrl, qrCode).then((outputImageUrl) => {
       this.img = outputImageUrl // Output the URL of the output image
-      console.log(outputImageUrl);
+      //console.log(outputImageUrl);
     }).catch((error) => {
       console.error(error); // Handle any errors that occur
     });

tailwind.config.js

@@ -3,5 +3,17 @@ module.exports = {
   plugins: [require("daisyui")],
   daisyui: {
     themes: ["lemonade"]
-  }
+  },
+  theme: {
+    extend: {
+      boxShadow: {
+        '4xl': '10px 35px 75px -15px rgba(0, 0, 0, 0.9)',
+      },
+    },
+  },
+  variants: {
+    extend: {
+      boxShadow: ['responsive', 'hover', 'focus', 'active'],
+    },
+  },
 }