JoeKung/Progetto-m152-Angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

miglioramento localizzazione e finito lo style

Browse Source
This commit is contained in:
tito
2023-05-03 11:05:43 +02:00
parent 3aa6f513d3
commit 639d2abc75
1 changed files with 30 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/app/component/detail/detail.component.ts
View File

@@ -1,15 +1,15 @@
import {Component, OnInit, ViewChild, ElementRef} from '@angular/core'; import {Component, OnInit, ViewChild, ElementRef} from '@angular/core';
import {ActivatedRoute} from "@angular/router"; import {ActivatedRoute} from "@angular/router";
import {positionService} from "../../service/position.service"; import {positionService} from "../../service/position.service";
import {WaypointService} from "../../service/http/waypoint.service"
import * as qrcode from 'qrcode'; import * as qrcode from 'qrcode';
@Component({ @Component({
selector: 'app-detail', selector: 'app-detail',
templateUrl: './detail.component.html', templateUrl: './detail.component.html',
styleUrls: ['./detail.component.css'] styleUrls: ['./detail.component.css']
}) })
export class DetailComponent implements OnInit { export class DetailComponent implements OnInit {
@ViewChild('myModal', { static: true }) myModal!: ElementRef<HTMLInputElement>; @ViewChild('myModal', {static: true}) myModal!: ElementRef<HTMLInputElement>;
private location: string | undefined; private location: string | undefined;
private id: number | undefined; private id: number | undefined;
@@ -27,18 +27,28 @@ export class DetailComponent implements OnInit {
cord: any; cord: any;
/*
showNav = true; showNav = true;
*/
distance: number | undefined; distance: number | undefined;
displayedDistance = 0; displayedDistance = 0;
img: any; img: any;
constructor(private route: ActivatedRoute , private positionService: positionService) {} constructor(private route: ActivatedRoute, private positionService: positionService, private waypointService: WaypointService) {
}
async ngOnInit(){ async ngOnInit() {
this.URLParams = this.route.params this.route.params.subscribe(params => {
this.URLParams = params;
});
console.log(this.URLParams.location); // {location: "lugano", id: "1"}
console.log("params", this.URLParams.location); // {location: "lugano", id: "1"}
this.waypointService.getWaypoint(this.URLParams.location, this.URLParams.id).subscribe(waypoint => {
console.log("waypoint", waypoint)
});
//this.URLParams = this.route.snapshot.url.slice(-2).map(segment => segment.path); //this.URLParams = this.route.snapshot.url.slice(-2).map(segment => segment.path);
console.log("getting your location: wait..."); console.log("getting your location: wait...");
@@ -52,29 +62,27 @@ export class DetailComponent implements OnInit {
let intervalID = setInterval(() => { let intervalID = setInterval(() => {
this.cord = this.positionService.getLocationWithoutPromise(); 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.test.lat},${this.test.lng}`; this.embed = `https://www.google.com/maps/embed/v1/directions?key=AIzaSyBJL4FWmG032BG6KXxTb4faxpO_ccyaP3o&origin=${this.cord.lat},${this.cord.lon}&destination=${this.test.lat},${this.test.lng}`;
if (this.showNav) { this.myModal.nativeElement.checked = false;
this.myModal.nativeElement.checked = false; if (this.cord?.lat && this.cord?.lon) {
if (this.cord?.lat && this.cord?.lon) { this.distance = this.positionService.getDistanceBetweenCoordinates(this.cord?.lat, this.cord?.lon, this.test.lat, this.test.lng);
this.distance = this.positionService.getDistanceBetweenCoordinates(this.cord?.lat, this.cord?.lon, this.test.lat, this.test.lng); if (this.distance < 0.05) {
if (this.distance < 0.05) { this.generateQR()
//this.showNav = false; // implement this nex line in angular ts
this.generateQR() this.myModal.nativeElement.checked = true;
// implement this nex line in angular ts
this.myModal.nativeElement.checked = true;
}
} else {
this.distance = undefined;
} }
} else { } else {
clearInterval(intervalID); this.distance = undefined;
} }
}, 1000); }, 1000);
} }
async generateQRCode(url: string) { async generateQRCode(url: string) {
try { try {
const string = await qrcode.toString(url, { errorCorrectionLevel: 'H', margin: 1, color: { dark: '#000000FF', light: '#FFFFFFFF' } }); const string = await qrcode.toString(url, {
errorCorrectionLevel: 'H',
margin: 1,
color: {dark: '#000000FF', light: '#FFFFFFFF'}
});
return string; return string;
} catch (error) { } catch (error) {
console.error(error); console.error(error);
@@ -87,7 +95,7 @@ export class DetailComponent implements OnInit {
const image = new Image(); const image = new Image();
image.src = imageUrl; image.src = imageUrl;
const svgBlob = new Blob([svgString], { type: 'image/svg+xml' }); const svgBlob = new Blob([svgString], {type: 'image/svg+xml'});
const svgUrl = URL.createObjectURL(svgBlob); const svgUrl = URL.createObjectURL(svgBlob);
image.onload = () => { image.onload = () => {
@@ -128,9 +136,6 @@ export class DetailComponent implements OnInit {
} }
async generateQR() { async generateQR() {
console.log("generating QR code"); console.log("generating QR code");
console.log(this.URLParams.value); console.log(this.URLParams.value);
@@ -159,9 +164,6 @@ export class DetailComponent implements OnInit {
} }
/*async addQRCodeToImage(url: string, imagePath: string, outputPath: string): Promise<void> { /*async addQRCodeToImage(url: string, imagePath: string, outputPath: string): Promise<void> {
// Generate QR code // Generate QR code
const qrCode = await qrcode.toBuffer(url); const qrCode = await qrcode.toBuffer(url);