diff --git a/package-lock.json b/package-lock.json index 6fed08c..73cac9b 100644 --- a/package-lock.json +++ b/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==", - "dev": true + "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==" }, "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==", - "dev": true + "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==" }, "@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", diff --git a/package.json b/package.json index 147b239..1c274d4 100644 --- a/package.json +++ b/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", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a0ff7c0..38fe57c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -11,18 +11,17 @@ import {HttpClientModule} from "@angular/common/http"; import { SafePipe } from './pipes/safe.pipe'; @NgModule({ - declarations: [ - AppComponent, - HomeComponent, - ListComponent, - DetailComponent, - SafePipe - ], + declarations: [ + AppComponent, + HomeComponent, + ListComponent, + DetailComponent, + SafePipe + ], imports: [ BrowserModule, AppRoutingModule, - FormsModule, - HttpClientModule + FormsModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/detail/detail.component.css b/src/app/detail/detail.component.css index 8c4da45..34d4d22 100644 --- a/src/app/detail/detail.component.css +++ b/src/app/detail/detail.component.css @@ -3,3 +3,7 @@ font-weight: bold; margin-bottom: 0.5em; } + +button { + margin: 1em; +} diff --git a/src/app/detail/detail.component.html b/src/app/detail/detail.component.html index 7840198..c18473e 100644 --- a/src/app/detail/detail.component.html +++ b/src/app/detail/detail.component.html @@ -3,15 +3,21 @@

{{test.description}}

Distanza: {{distance}}

+ diff --git a/src/app/detail/detail.component.ts b/src/app/detail/detail.component.ts index cc3e753..47f77ed 100755 --- a/src/app/detail/detail.component.ts +++ b/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', - lat: 46.15187077044123, - lng: 8.799829438699243, + cordinates: '46.175248719308,8.79395345868349', + lat: 46.175248719308, + 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 lon2 = this.test.cordinates.split(",")[1]; + let lat2 = this.test.lat; + 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); + }); + } }