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

aggiunto salvataggio dell waypoint visitato

Browse Source
This commit is contained in:
tito
2023-05-06 16:48:51 +02:00
parent 6866d0779f
commit 79ca5d8f98
4 changed files with 1403 additions and 4801 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6036
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@@ -1,10 +1,18 @@
<div>
<div class="flex flex-col md:flex-row gap-0 m-5 h-full">
<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="absolute top-0 h-screen w-screen">
<div id="map" class="absolute h-screen w-screen">
<iframe *ngIf="distance"
class=" w-full h-full shadow-2xl pointer-events-auto"
height="300" frameborder=""
style=""
referrerpolicy="no-referrer-when-downgrade"
[src]='embed | safe' allowfullscreen></iframe>
</div>
<div class="card bg-white sm:w-fit md:w-3/4 lg:w-1/4 m-4 p-4 z-10 absolute bottom-0 bg-gray-100 bg-opacity-65 backdrop-filter backdrop-blur-lg border-2 border-gray-300 shadow-4xl rounded-sm overflow-y-auto pointer-events-auto">
<figure><img [src]="waypointInfo?.img ? waypointInfo.img : '/assets/testDetail/img.png'"
[alt]="waypointInfo?.locationName ? waypointInfo.locationName : ''"/></figure>
<div class="card-body">
<div class="flex justify-between items-center">
<h1 class="card-title font-extrabold">{{ waypointInfo?.locationName }}</h1>
<h1 class="card-title font-extrabold">{{ waypointInfo?.locationName ? waypointInfo.locationName : 'Error 404' }}</h1>
<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"
width="19.9219" height="19.9316" *ngIf="!distance" class="mx-1">
@@ -20,17 +28,23 @@
<path
d="M1.29,9.83l7.12,0c0.15,0,0.27,0.12,0.27,0.27v6.06c0,1.46,1.76,2.15,2.42,0.81l7.22-15.54c0.66-1.34-0.49-2.52-1.85-2.08L1.08,7.49C-0.14,8.06,0.1,9.82,1.29,9.83z"/>
</svg>
{{distance === undefined ? '' : distance}} Km
{{ distance ? distance : '' }} Km
</div>
</div>
<p>{{ waypointInfo.description }}</p>
<p class="overflow-auto max-h-12">{{ waypointInfo?.description ? waypointInfo.description : 'pippo says that you are serching in a unknown location' }}</p>
</div>
</div>
<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-full md:rounded-r-2xl shadow-2xl border-2 items-center" height="300" frameborder=""
style=""
referrerpolicy="no-referrer-when-downgrade"
[src]='embed | safe' allowfullscreen></iframe>
<div class="404" *ngIf="!waypointInfo">
<h1>
Oops!
</h1>
<h2>
404 Not Found
</h2>
<div class="error-details">
Sorry, an error has occured, Requested page not found!
</div>
</div>
@@ -40,7 +54,8 @@
<div class="modal modal-bottom sm:modal-middle" *ngIf="img">
<div class="modal-box">
<h3 class="font-bold text-lg">{{ detailTranslations.congratulations }}: {{ waypointInfo.name }}!</h3>
<h3 class="font-bold text-lg">Congratulations you have
discovred {{ waypointInfo?.locationName ? waypointInfo.locationName : '' }}!</h3>
<img class="xl:max-w-md max-h-screen py-4 m-auto" [src]="img" *ngIf="img">
<div class="modal-action">
<label for="my-modal-6" class="btn bg-white hover:bg-blue-400" (click)="downloadImage()">

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

@@ -2,10 +2,14 @@ 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 {detailTranslations} from "../../interface/translations";
//import {waypointVisitedService} from "../../service/http/waypointVisited.service"
import * as qrcode from 'qrcode';
import {WaypointsVisitedEntity} from "../../interface/WaypointsVisitedEntity";
import {ReadTranslateJsonService} from "../../service/language/readTranslateJson.service";
import {CookieService} from "ngx-cookie-service";
import {UserService} from "../../service/http/user.service";
import {UserEntity} from "../../interface/UserEntity";
@Component({
selector: 'app-detail',
@@ -32,12 +36,11 @@ export class DetailComponent implements OnInit {
img: any;
constructor(
private route: ActivatedRoute,
private positionService: positionService,
private waypointService: WaypointService,
private readTranslationJsonService: ReadTranslateJsonService,
) {
iframeLoded: boolean = false;
constructor(private route: ActivatedRoute, private positionService: positionService, private waypointService: WaypointService, private waypointVisitedService: WaypointVisitedService, private readTranslationJsonService: ReadTranslateJsonService,
private userService: UserService, private cookieService: CookieService) {
}
async ngOnInit() {
@@ -61,22 +64,42 @@ export class DetailComponent implements OnInit {
this.cord = await this.positionService.getLocation();
console.log("location: ", this.cord);
this.checkDistanceTimer();
console.log(this.isIframeLoaded('map'))
}
isIframeLoaded(iframeId: string): boolean {
const iframe = document.getElementById(iframeId) as HTMLIFrameElement;
if (!iframe) {
throw new Error(`Iframe with ID ${iframeId} not found`);
} else if (iframe.contentDocument && iframe.contentDocument.readyState === 'complete') {
return true;
} else {
return false;
}
}
async checkDistanceTimer() {
//set interval
let intervalID = setInterval(() => {
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.waypointInfo.lat},${this.waypointInfo.lon}`;
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) {
if (this.cord && this.waypointInfo && this.cord?.lat && this.cord?.lon && this.waypointInfo?.lat && this.waypointInfo?.lon) {
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()
clearInterval(intervalID);
// implement this nex line in angular ts
this.myModal.nativeElement.checked = true;
this.userService.getUser("tito").subscribe(user => {
if (user.id !== undefined) {
let waypointVisited: WaypointsVisitedEntity = {userId: user.id , waypointId: this.waypointInfo.id}
console.log("waypointVisited", waypointVisited)
this.waypointVisitedService.createWaypoint(waypointVisited)
}
})
}
} else {
this.distance = undefined;
@@ -97,67 +120,73 @@ export class DetailComponent implements OnInit {
throw new Error('Error generating QR code');
}
}
async addSvgToImage(imageUrl: string, svgString: string): Promise<string> {
const image = new Image();
image.crossOrigin = 'anonymous';
image.src = imageUrl;
addSvgToImage(imageUrl: string, svgString: string): Promise<string> {
return new Promise((resolve, reject) => {
const image = new Image();
image.src = imageUrl;
const svgBlob = new Blob([svgString], {type: 'image/svg+xml'});
const svgUrl = URL.createObjectURL(svgBlob);
const svgBlob = new Blob([svgString], {type: 'image/svg+xml'});
const svgUrl = URL.createObjectURL(svgBlob);
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
if (!ctx) {
throw new Error('Could not create canvas context');
}
image.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
try {
await new Promise((resolve, reject) => {
image.onload = () => {
canvas.width = image.width;
canvas.height = image.height;
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.drawImage(image, 0, 0);
const svgImage = new Image();
svgImage.crossOrigin = 'anonymous';
svgImage.src = svgUrl;
svgImage.onload = () => {
if (ctx && svgImage) {
const x = image.width - (image.width * 0.2 + 5);
const y = image.height - (image.width * 0.2 + 5);
ctx.drawImage(svgImage, x, y, image.width * 0.2, image.width * 0.2);
const outputImageUrl = canvas.toDataURL('image/png');
resolve(outputImageUrl);
} else {
reject('Error loading SVG');
}
const x = image.width - (image.width * 0.2 + 5);
const y = image.height - (image.width * 0.2 + 5);
ctx.drawImage(svgImage, x, y, image.width * 0.2, image.width * 0.2);
const outputImageUrl = canvas.toDataURL('image/png');
resolve(outputImageUrl);
};
svgImage.onerror = () => {
reject('Error loading SVG');
};
} else {
reject('Error creating canvas context');
}
};
};
image.onerror = () => {
reject('Error loading image');
};
});
image.onerror = () => {
reject('Error loading image');
};
});
} catch (err) {
console.error(err);
}
return canvas.toDataURL('image/png');
}
async generateQR() {
console.log("generating QR code");
console.log(this.URLParams.value);
//console.log(this.URLParams.value);
let url = `http://localhost:4200/location/${this.URLParams.location}/${this.URLParams.id}`;
let qrCode = await this.generateQRCode(url);
console.log(qrCode);
//console.log(qrCode);
const imageUrl = this.waypointInfo.img;
this.addSvgToImage(imageUrl, qrCode).then((outputImageUrl) => {
this.img = outputImageUrl // Output the URL of the output image
console.log(outputImageUrl);
//console.log(outputImageUrl);
}).catch((error) => {
console.error(error); // Handle any errors that occur
});

14
tailwind.config.js
View File

@@ -3,5 +3,17 @@ module.exports = {
plugins: [require("daisyui")],
daisyui: {
themes: ["lemonade"]
}
},
theme: {
extend: {
boxShadow: {
'4xl': '10px 35px 75px -15px rgba(0, 0, 0, 0.9)',
},
},
},
variants: {
extend: {
boxShadow: ['responsive', 'hover', 'focus', 'active'],
},
},
}