non so

package-lock.json

@@ -16,6 +16,7 @@
         "@angular/platform-browser": "^15.0.0",
         "@angular/platform-browser-dynamic": "^15.0.0",
         "@angular/router": "^15.0.0",
+        "angularx-qrcode": "^15.0.1",
         "daisyui": "^2.49.0",
         "qrcode": "^1.5.1",
         "rxjs": "~7.5.0",
@@ -3293,8 +3294,7 @@
     "node_modules/@types/node": {
       "version": "18.11.18",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
-      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
+      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
-      "dev": true
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -3311,6 +3311,14 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.0.tgz",
+      "integrity": "sha512-x5ilHXRxUPIMfjtM+1vf/GPTRWZ81nqscursm5gMznJeK9M0YnZ1c3bEvRLQ0zSSgedLx1J6MGL231ObQGGhaA==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/qs": {
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
@@ -3725,6 +3733,19 @@
         "ajv": "^8.8.2"
       }
     },
+    "node_modules/angularx-qrcode": {
+      "version": "15.0.1",
+      "resolved": "https://registry.npmjs.org/angularx-qrcode/-/angularx-qrcode-15.0.1.tgz",
+      "integrity": "sha512-CirpL2rhhYX/QZ1OSaJ/fusABjDlwl1oYBqaLRqmyie0xTbscWqTBW0DEoht2yCNGN8Wt+JmZwTLxYG6tLuWeQ==",
+      "dependencies": {
+        "@types/qrcode": "1.5.0",
+        "qrcode": "1.5.1",
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/core": "^15.0.0"
+      }
+    },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
@@ -14206,8 +14227,7 @@
     "@types/node": {
       "version": "18.11.18",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
-      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==",
+      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
-      "dev": true
     },
     "@types/parse-json": {
       "version": "4.0.0",
@@ -14224,6 +14244,14 @@
         "@types/node": "*"
       }
     },
+    "@types/qrcode": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.0.tgz",
+      "integrity": "sha512-x5ilHXRxUPIMfjtM+1vf/GPTRWZ81nqscursm5gMznJeK9M0YnZ1c3bEvRLQ0zSSgedLx1J6MGL231ObQGGhaA==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/qs": {
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
@@ -14591,6 +14619,16 @@
         "fast-deep-equal": "^3.1.3"
       }
     },
+    "angularx-qrcode": {
+      "version": "15.0.1",
+      "resolved": "https://registry.npmjs.org/angularx-qrcode/-/angularx-qrcode-15.0.1.tgz",
+      "integrity": "sha512-CirpL2rhhYX/QZ1OSaJ/fusABjDlwl1oYBqaLRqmyie0xTbscWqTBW0DEoht2yCNGN8Wt+JmZwTLxYG6tLuWeQ==",
+      "requires": {
+        "@types/qrcode": "1.5.0",
+        "qrcode": "1.5.1",
+        "tslib": "^2.3.0"
+      }
+    },
     "ansi-colors": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",

package.json

@@ -18,6 +18,7 @@
     "@angular/platform-browser": "^15.0.0",
     "@angular/platform-browser-dynamic": "^15.0.0",
     "@angular/router": "^15.0.0",
+    "angularx-qrcode": "^15.0.1",
     "daisyui": "^2.49.0",
     "qrcode": "^1.5.1",
     "rxjs": "~7.5.0",
@@ -29,7 +30,6 @@
     "@angular/cli": "~15.0.4",
     "@angular/compiler-cli": "^15.0.0",
     "@types/jasmine": "~4.3.0",
-    "@types/qrcode": "^1.5.0",
     "jasmine-core": "~4.5.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.1.0",

src/app/app.module.ts

@@ -11,18 +11,17 @@ import {HttpClientModule} from "@angular/common/http";
 import { SafePipe } from './pipes/safe.pipe';
 
 @NgModule({
-    declarations: [
+  declarations: [
-        AppComponent,
+    AppComponent,
-        HomeComponent,
+    HomeComponent,
-        ListComponent,
+    ListComponent,
-        DetailComponent,
+    DetailComponent,
-        SafePipe
+    SafePipe
-    ],
+  ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    FormsModule,
+    FormsModule
-    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/detail/detail.component.css

@@ -3,3 +3,7 @@
   font-weight: bold;
   margin-bottom: 0.5em;
 }
+
+button {
+  margin: 1em;
+}

src/app/detail/detail.component.html

@@ -3,15 +3,21 @@
   <p>{{test.description}}</p>
   <p ng-model="showNav" *ngIf="showNav">Distanza: {{distance}}</p>
   <div id="nav" ng-model="showNav" *ngIf="showNav">
-    <!--<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1708.0829920038827!2d8.790506152417485!3d46.16602530670125!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4785c833c36e0bd5%3A0x427d483133d7c1a0!2sCPT%20Locarno%20(SPAI%20%E2%80%93%20MPT)%20-%20Centro%20professionale%20tecnico%20Locarno!5e0!3m2!1sit!2sch!4v1675246087183!5m2!1sit!2sch" width="650" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
-    <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d912.8193347586248!2d8.796584272413714!3d46.158022715772375!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sit!2sch!4v1678192674449!5m2!1sit!2sch" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>-->
     <iframe
-      width="450"
+      width="500"
-      height="250"
+      height="300"
       frameborder="0" style="border:0"
       referrerpolicy="no-referrer-when-downgrade"
       [src]='embed | safe'
       allowfullscreen>
     </iframe>
   </div>
+  <button (click)="generateQRCode()">
+    <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>
 </div>

src/app/detail/detail.component.ts

@@ -1,69 +1,78 @@
+import {Location} from "@angular/common";
 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from "@angular/router";
 import {CalculateDistanceService} from "../service/calculateDistance.service";
 
+import * as QRCode from 'qrcode';
+
 @Component({
   selector: 'app-detail',
   templateUrl: './detail.component.html',
   styleUrls: ['./detail.component.css']
 })
+
 export class DetailComponent implements OnInit {
+
   private location: string | undefined;
   private id: number | undefined;
 
-  constructor(private route: ActivatedRoute , private calculateDistanceService: CalculateDistanceService) {
+  constructor(private route: ActivatedRoute, private calculateDistanceService: CalculateDistanceService) {}
-  }
 
   ngOnInit(): void {
+    // Ascoltare i parametri passati nell'url
     this.route.params.subscribe(params => {
       this.location = params['location'];
       this.id = params['id'];
     })
     console.log(this.location);
     console.log(this.id);
+    // Recupera la posizione dell'utente
     this.getLocation();
   }
 
+  // Definizione della destinazione del viaggio (sostituire con dati reali)
   test = {
     name: 'SPAI',
-    cordinates: '46.15187077044123,8.799829438699243',
+    cordinates: '46.175248719308,8.79395345868349',
-    lat: 46.15187077044123,
+    lat: 46.175248719308,
-    lng: 8.799829438699243,
+    lng: 8.79395345868349,
     description: "Lorem ipsum"
   }
 
-  embed = `https://www.google.com/maps/embed/v1/place?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&q=${this.test.lat},${this.test.lng}`
-
   cord = {
     lat: 0,
     lng: 0
   }
 
-  showNav = true;
+  showNav = false;
   distance: number | undefined;
   displayedDistance = 0;
+  embed: string = ``;
 
+  // Recupera la posizione dell'utente
   getLocation() {
     console.log(this.embed)
     console.log("get location");
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition((position) => {
+        this.showNav = true;
         this.cord.lat = position.coords.latitude;
         this.cord.lng = position.coords.longitude;
         console.log(this.cord);
+        this.embed = `https://www.google.com/maps/embed/v1/directions?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&origin=${this.cord.lat},${this.cord.lng}&destination=${this.test.lat},${this.test.lng}&mode=walking`
         this.checkDistanceTimer();
       })
     } else {
-      alert("Geolocation is not supported by this browser.");
+      alert("Geolocation non è supportato dal tuo browser.");
     }
   }
 
+  // Verifica la distanza tra la posizione dell'utente e la destinazione
   checkDistanceTimer() {
-    //set interval
     let lat1 = this.cord.lat;
     let lon1 = this.cord.lng;
-    let lat2 = this.test.cordinates.split(",")[0];
+    let lat2 = this.test.lat;
-    let lon2 = this.test.cordinates.split(",")[1];
+    let lon2 = this.test.lng;
     let intervalID = setInterval(() => {
       if (this.showNav) {
         this.distance = this.calculateDistanceService.getDistanceBetweenCoordinates(lat1, lon1, +lat2, +lon2);
@@ -72,7 +81,6 @@ export class DetailComponent implements OnInit {
           this.showNav = false;
           this.displayedDistance = Math.round(this.distance * 100) / 100;
         }
-
         if (this.distance < 0.05) {
           this.showNav = false;
           clearInterval(intervalID);
@@ -83,5 +91,12 @@ export class DetailComponent implements OnInit {
     }, 1000);
   }
 
-  ///
+  generateQRCode(): void {
+    alert("QR Code generato")
+    // Generate a QR code of the current URL and set it as the QR code image
+    QRCode.toDataURL("", {errorCorrectionLevel: 'H'}, (err, url) => {
+      //this.qrCodeImage = url;
+      console.log(url);
+    });
+  }
 }