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

migliorata chiusura modale + reindirizzamento alla list

Browse Source
This commit is contained in:
tito
2023-05-06 18:56:16 +02:00
parent 7341651187
commit 7a08cad113
2 changed files with 56 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,19 @@
<div class="absolute top-0 h-screen w-screen">
<div id="map" class="absolute h-screen w-screen">
<iframe *ngIf="distance"
<iframe *ngIf="embed"
class=" w-full h-full shadow-2xl pointer-events-auto"
height="300" frameborder=""
style=""
referrerpolicy="no-referrer-when-downgrade"
[src]='embed | safe' allowfullscreen></iframe>
<img *ngIf="!embed" [src]="waypointInfo?.img ? waypointInfo.img : '/assets/testDetail/img.png'" alt="" class="my-auto w-screen opacity-5">
</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">
<div *ngIf="embed && !this.myModal.checked" class="card bg-white sm:w-fit md:w-3/4 lg:w-1/4 m-4 p-2 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 ? waypointInfo.locationName : 'Error 404' }}</h1>
<h1 class="card-title font-extrabold">{{ waypointInfo?.name ? waypointInfo.name : '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">
@@ -55,7 +56,7 @@
<div class="modal modal-bottom sm:modal-middle" *ngIf="img">
<div class="modal-box">
<h3 class="font-bold text-lg">Congratulations you have
discovred {{ waypointInfo?.locationName ? waypointInfo.locationName : '' }}!</h3>
discovred {{ waypointInfo?.name ? waypointInfo.name : '' }}!</h3>
<img class="xl:max-w-md max-h-screen py-4 m-auto" [src]="img" *ngIf="img">
<div class="modal-action">
<button for="my-modal-6" class="btn bg-white hover:bg-blue-400" (click)="downloadImage()">

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

@@ -11,12 +11,15 @@ import {ReadTranslateJsonService} from "../../service/language/readTranslateJson
import {CookieService} from "ngx-cookie-service";
import {UserService} from "../../service/http/user.service";
import {UserEntity} from "../../interface/UserEntity";
import { trigger, state, transition, animate } from '@angular/animations';
@Component({
selector: 'app-detail',
templateUrl: './detail.component.html',
styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {
@ViewChild('myModal', {static: true}) myModal!: ElementRef<HTMLInputElement>;
private location: string | undefined;
@@ -39,6 +42,8 @@ export class DetailComponent implements OnInit {
iframeLoded: boolean = false;
intervalID: any;
constructor(private route: ActivatedRoute, private positionService: positionService, private waypointService: WaypointService, private waypointVisitedService: WaypointVisitedService, private readTranslationJsonService: ReadTranslateJsonService,
private userService: UserService, private cookieService: CookieService, private router: Router) {
@@ -82,7 +87,7 @@ export class DetailComponent implements OnInit {
async checkDistanceTimer() {
//set interval
let intervalID = setInterval(() => {
this.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.myModal.nativeElement.checked = false;
@@ -143,8 +148,35 @@ export class DetailComponent implements OnInit {
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
const svgImage = new Image();
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
let isAllWhite = true;
for (let i = 0; i < imageData.data.length; i += 4) {
if (imageData.data[i] !== 255 || imageData.data[i + 1] !== 255 || imageData.data[i + 2] !== 255) {
isAllWhite = false;
break;
}
}
if (isAllWhite) {
const svgImage = new Image();
svgImage.crossOrigin = 'anonymous';
svgImage.src = svgUrl;
svgImage.onload = () => {
canvas.width = svgImage.width;
canvas.height = svgImage.height;
ctx.drawImage(svgImage, 0, 0);
const outputImageUrl = canvas.toDataURL('image/png');
resolve(outputImageUrl);
};
svgImage.onerror = () => {
reject('Error loading SVG');
};
} else {
const svgImage = new Image();
svgImage.crossOrigin = 'anonymous';
svgImage.src = svgUrl;
@@ -160,6 +192,7 @@ export class DetailComponent implements OnInit {
svgImage.onerror = () => {
reject('Error loading SVG');
};
}
};
image.onerror = () => {
@@ -175,6 +208,8 @@ export class DetailComponent implements OnInit {
async generateQR() {
console.log("generating QR code");
//console.log(this.URLParams.value);
@@ -203,8 +238,10 @@ export class DetailComponent implements OnInit {
}
public closeModal(): void {
clearInterval(this.intervalID);
this.myModal.nativeElement.checked = false;
this.router.navigate(['/location/', this.URLParams.location]);
}
}