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

detail html new data

Browse Source
This commit is contained in:
tito
2023-05-03 15:16:54 +02:00
parent 05324dbe5e
commit cc221f1f57
4 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/component/detail/detail.component.html
View File

@@ -1,6 +1,6 @@
<div>
<div class="flex flex-col md:flex-row gap-0 m-5 h-full">
<div class="card w-full h-full bg-base-100 shadow-2xl">
<div class="card w-full h-full min-h-16 bg-base-100 shadow-2xl">
<figure><img [src]="waypointInfo.img" [alt]="waypointInfo?.locationName"/></figure>
<div class="card-body">
<div class="flex justify-between items-center">

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

@@ -2,6 +2,7 @@ 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 * as qrcode from 'qrcode';
@Component({
selector: 'app-detail',
@@ -43,6 +44,7 @@ export class DetailComponent implements OnInit {
async ngOnInit() {
this.route.params.subscribe(params => {
this.URLParams = params;
console.log("params", params);
});
@@ -68,9 +70,11 @@ export class DetailComponent implements OnInit {
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) {
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.waypointInfo.lat, this.waypointInfo.lon);
if (this.distance < 0.05) {
this.generateQR()
//this.waypointVisitedService.createWaypointVisited()
// implement this nex line in angular ts
this.myModal.nativeElement.checked = true;
}
@@ -143,13 +147,13 @@ export class DetailComponent implements OnInit {
async generateQR() {
console.log("generating QR code");
console.log(this.URLParams.value);
let url = `http://localhost:4200/location/${this.URLParams.value.location}/${this.URLParams.value.id}`;
let url = `http://localhost:4200/location/${this.URLParams.location}/${this.URLParams.id}`;
let qrCode = await this.generateQRCode(url);
console.log(qrCode);
const imageUrl = 'assets/testDetail/img.jpg';
const imageUrl = this.waypointInfo.img;
this.addSvgToImage(imageUrl, qrCode).then((outputImageUrl) => {
this.img = outputImageUrl // Output the URL of the output image

4
src/app/service/position.service.ts
View File

@@ -38,7 +38,7 @@ export class positionService {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
this.cord = {lat, lon};
console.log("cordinate: ", this.cord);
//console.log("cordinate: ", this.cord);
resolve(this.cord);
}, (error) => {
reject(error);
@@ -54,7 +54,7 @@ export class positionService {
getLocationWithoutPromise(): any {
this.getLocation().then((cord) => {
this.lastCord = cord;
console.log("lastCord service: ", this.lastCord);
//console.log("lastCord service: ", this.lastCord);
});
return this.lastCord;
}