From 69b8adec7ec08189a718f33c03fbe9bfe0389505 Mon Sep 17 00:00:00 2001 From: Alexis Feron Date: Thu, 15 May 2025 08:23:46 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20Improve=20pins=20perf=20an?= =?UTF-8?q?d=20modal=20background?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../add-pin-popup/add-pin-popup.component.ts | 2 +- .../confirm-modal.component.html | 1 + .../confirm-modal/confirm-modal.component.ts | 4 + .../edit-pin-popup.component.html | 1 + .../edit-pin-popup.component.ts | 8 +- .../leaflet-map/leaflet-map.component.ts | 94 +++++++------------ 6 files changed, 49 insertions(+), 61 deletions(-) diff --git a/src/app/components/add-pin-popup/add-pin-popup.component.ts b/src/app/components/add-pin-popup/add-pin-popup.component.ts index ae87b65..4201de9 100644 --- a/src/app/components/add-pin-popup/add-pin-popup.component.ts +++ b/src/app/components/add-pin-popup/add-pin-popup.component.ts @@ -15,7 +15,7 @@ import { } from 'rxjs/operators'; import { AutocompleteService } from '../../services/auto-complete/auto-complete.service'; import { ExifService } from '../../services/exif/exif.service'; -import { MapReloadService } from '../../services/map-reload/map-reload.service'; // Assurez-vous d'importer le service de rechargement de la carte +import { MapReloadService } from '../../services/map-reload/map-reload.service'; import { PinService } from '../../services/pin/pin.service'; import { DragDropComponent } from '../drag-drop/drag-drop.component'; @Component({ diff --git a/src/app/components/confirm-modal/confirm-modal.component.html b/src/app/components/confirm-modal/confirm-modal.component.html index 88a30e7..bf51305 100644 --- a/src/app/components/confirm-modal/confirm-modal.component.html +++ b/src/app/components/confirm-modal/confirm-modal.component.html @@ -6,6 +6,7 @@ 'opacity-100': isOpen }" (click)="cancel()" + id="confirm-modal-background" > diff --git a/src/app/components/confirm-modal/confirm-modal.component.ts b/src/app/components/confirm-modal/confirm-modal.component.ts index bf44ede..ae7bfee 100644 --- a/src/app/components/confirm-modal/confirm-modal.component.ts +++ b/src/app/components/confirm-modal/confirm-modal.component.ts @@ -67,5 +67,9 @@ export class ConfirmModalComponent implements OnInit, OnDestroy { if (modal && modal.parentElement !== document.body) { document.body.appendChild(modal); } + const bg = document.getElementById('confirm-modal-background'); + if (bg && bg.parentElement !== document.body) { + document.body.appendChild(bg); + } } } diff --git a/src/app/components/edit-pin-popup/edit-pin-popup.component.html b/src/app/components/edit-pin-popup/edit-pin-popup.component.html index 9d50c32..c21d4b5 100644 --- a/src/app/components/edit-pin-popup/edit-pin-popup.component.html +++ b/src/app/components/edit-pin-popup/edit-pin-popup.component.html @@ -31,6 +31,7 @@ 'opacity-100': isPinModalOpen }" (click)="closePinModal()" + id="pin-modal-background" > diff --git a/src/app/components/edit-pin-popup/edit-pin-popup.component.ts b/src/app/components/edit-pin-popup/edit-pin-popup.component.ts index 540f1cb..b70a1c4 100644 --- a/src/app/components/edit-pin-popup/edit-pin-popup.component.ts +++ b/src/app/components/edit-pin-popup/edit-pin-popup.component.ts @@ -25,7 +25,7 @@ import { import { Pin } from '../../model/Pin'; import { AutocompleteService } from '../../services/auto-complete/auto-complete.service'; import { ExifService } from '../../services/exif/exif.service'; -import { MapReloadService } from '../../services/map-reload/map-reload.service'; // Assurez-vous d'importer le service de rechargement de la carte +import { MapReloadService } from '../../services/map-reload/map-reload.service'; import { ModalService } from '../../services/modal/modal.service'; import { PinService } from '../../services/pin/pin.service'; import { DragDropComponent } from '../drag-drop/drag-drop.component'; @@ -58,7 +58,7 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy { private exifService: ExifService, private modalService: ModalService, private router: Router, - private mapReloadService: MapReloadService // Assurez-vous d'importer le service de rechargement de la carte + private mapReloadService: MapReloadService ) { // Initialiser le formulaire avec des valeurs par défaut this.form = this.fb.group({ @@ -192,6 +192,10 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy { if (modal && modal.parentElement !== document.body) { document.body.appendChild(modal); } + const bg = document.getElementById('pin-modal-background'); + if (bg && bg.parentElement !== document.body) { + document.body.appendChild(bg); + } } selectSuggestion(suggestion: any): void { diff --git a/src/app/components/leaflet-map/leaflet-map.component.ts b/src/app/components/leaflet-map/leaflet-map.component.ts index 9bae735..1b4e4c3 100644 --- a/src/app/components/leaflet-map/leaflet-map.component.ts +++ b/src/app/components/leaflet-map/leaflet-map.component.ts @@ -6,7 +6,7 @@ import * as L from 'leaflet'; import 'leaflet/dist/leaflet.css'; import { Pin } from '../../model/Pin'; import { AutocompleteService } from '../../services/auto-complete/auto-complete.service'; -import { MapReloadService } from '../../services/map-reload/map-reload.service'; // Assurez-vous d'importer le service de rechargement de la carte +import { MapReloadService } from '../../services/map-reload/map-reload.service'; import { PinService } from '../../services/pin/pin.service'; import { PinMarkerComponent } from '../pin-marker/pin-marker.component'; @@ -33,7 +33,7 @@ export class LeafletMapComponent implements OnInit { private autocompleteService: AutocompleteService, private route: ActivatedRoute, private router: Router, - private mapReloadService: MapReloadService // Assurez-vous d'importer le service de rechargement de la carte + private mapReloadService: MapReloadService ) {} ngOnInit(): void { @@ -74,34 +74,38 @@ export class LeafletMapComponent implements OnInit { this.allPins = pins; this.extractPersons(pins); - const countrySet = new Set(); - const requests = pins.map((pin) => - this.autocompleteService - .getAddressFromCoordinates(pin.location[0], pin.location[1]) - .toPromise() - .then((res: any) => { - const address = res?.address; - const country = - address?.country || - this.extractLastFromDisplayName(res?.display_name); - if (country) { - this.pinCountries[pin.id] = country; - countrySet.add(country); - } - }) - .catch((err: any) => { - console.error( - 'Erreur lors de la récupération du pays pour le pin', - pin.id, - err - ); - }) - ); - - Promise.all(requests).then(() => { - this.availableCountries = Array.from(countrySet).sort(); - this.renderPins(); - }); + this.renderPins(); // Afficher d'abord les pins sans les filtres + this.loadCountriesForFiltrers(pins); // Ensuite, charger les pays en arrière-plan + }); + } + + private loadCountriesForFiltrers(pins: Pin[]): void { + const countrySet = new Set(); + const requests = pins.map((pin) => + this.autocompleteService + .getAddressFromCoordinates(pin.location[0], pin.location[1]) + .toPromise() + .then((res: any) => { + const address = res?.address; + const country = + address?.country || + this.extractLastFromDisplayName(res?.display_name); + if (country) { + this.pinCountries[pin.id] = country; + countrySet.add(country); + } + }) + .catch((err: any) => { + console.error( + 'Erreur lors de la récupération du pays pour le pin', + pin.id, + err + ); + }) + ); + + Promise.all(requests).then(() => { + this.availableCountries = Array.from(countrySet).sort(); }); } @@ -221,35 +225,9 @@ export class LeafletMapComponent implements OnInit { this.pinsService.getPins().subscribe((pins: Pin[]) => { this.allPins = pins; this.extractPersons(pins); + this.renderPins(); // Afficher d'abord les pins sans les filtres - const countrySet = new Set(); - const requests = pins.map((pin) => - this.autocompleteService - .getAddressFromCoordinates(pin.location[0], pin.location[1]) - .toPromise() - .then((res: any) => { - const address = res?.address; - const country = - address?.country || - this.extractLastFromDisplayName(res?.display_name); - if (country) { - this.pinCountries[pin.id] = country; - countrySet.add(country); - } - }) - .catch((err: any) => { - console.error( - 'Erreur lors de la récupération du pays pour le pin', - pin.id, - err - ); - }) - ); - - Promise.all(requests).then(() => { - this.availableCountries = Array.from(countrySet).sort(); - this.renderPins(); - }); + this.loadCountriesForFiltrers(pins); // Ensuite, charger les pays en arrière-plan }); } }