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

Merge remote-tracking branch 'origin/dev' into dev

Browse Source
This commit is contained in:
Joe Küng
2023-05-03 12:15:49 +02:00
parent d86cfb2e87 05324dbe5e
commit 90a8ed0719
2 changed files with 10 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,10 @@
<div> <div>
<div class="flex flex-col md:flex-row gap-0 m-5 h-full"> <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 bg-base-100 shadow-2xl">
<figure><img src="assets/testDetail/igm.png" [alt]="test.name"/></figure> <figure><img [src]="waypointInfo.img" [alt]="waypointInfo?.locationName"/></figure>
<div class="card-body"> <div class="card-body">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<h1 class="card-title font-extrabold">{{ test.name }}</h1> <h1 class="card-title font-extrabold">{{ waypointInfo?.locationName }}</h1>
<div class="font-extrabold text-end text-blue-500 flex items-center"> <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" <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"> width="19.9219" height="19.9316" *ngIf="!distance" class="mx-1">
@@ -23,11 +23,11 @@
{{distance === undefined ? '' : distance}} Km {{distance === undefined ? '' : distance}} Km
</div> </div>
</div> </div>
<p>{{ test.description }}</p> <p>{{ waypointInfo.description }}</p>
</div> </div>
</div> </div>
<div class="md:relative w-full flex items-center justify-center md:justify-start"> <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-3/4 rounded-b-lg md:rounded-r-lg shadow-2xl border-2 items-center" height="300" frameborder="" <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="" style=""
referrerpolicy="no-referrer-when-downgrade" referrerpolicy="no-referrer-when-downgrade"
[src]='embed | safe' allowfullscreen></iframe> [src]='embed | safe' allowfullscreen></iframe>

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

@@ -23,6 +23,8 @@ export class DetailComponent implements OnInit {
description: "Lorem ipsum" description: "Lorem ipsum"
} }
waypointInfo: any;
embed: any; embed: any;
cord: any; cord: any;
@@ -48,6 +50,8 @@ export class DetailComponent implements OnInit {
this.waypointService.getWaypoint(this.URLParams.location, this.URLParams.id).subscribe(waypoint => { this.waypointService.getWaypoint(this.URLParams.location, this.URLParams.id).subscribe(waypoint => {
console.log("waypoint", waypoint) console.log("waypoint", waypoint)
this.waypointInfo = waypoint;
console.log("waypointInfo", this.waypointInfo.locationName)
}); });
//this.URLParams = this.route.snapshot.url.slice(-2).map(segment => segment.path); //this.URLParams = this.route.snapshot.url.slice(-2).map(segment => segment.path);
@@ -61,7 +65,7 @@ export class DetailComponent implements OnInit {
//set interval //set interval
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.waypointInfo.lat},${this.waypointInfo.lon}`;
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);
@@ -158,40 +162,9 @@ export class DetailComponent implements OnInit {
public downloadImage(): void { public downloadImage(): void {
const link = document.createElement('a'); const link = document.createElement('a');
link.download = this.test.name; link.download = this.waypointInfo.locationName;
link.href = this.img; link.href = this.img;
link.click(); link.click();
} }
/*async addQRCodeToImage(url: string, imagePath: string, outputPath: string): Promise<void> {
// Generate QR code
const qrCode = await qrcode.toBuffer(url);
// Load input image using Sharp
const image = sharp(imagePath);
// Get input image dimensions
const { width, height } = await image.metadata();
// Resize QR code to 25% of input image height
const qrCodeHeight = Math.round(height * 0.25);
const qrCodeBuffer = await sharp(qrCode)
.resize(qrCodeHeight, qrCodeHeight)
.toBuffer();
// Composite QR code onto input image at bottom-right corner
await image.composite([
{
input: qrCodeBuffer,
gravity: 'southeast',
top: height - qrCodeHeight,
left: width - qrCodeHeight,
},
]);
// Save output image to file
await image.toFile(outputPath);
}*/
} }