diff --git a/src/app/components/leaflet-map/leaflet-map.component.ts b/src/app/components/leaflet-map/leaflet-map.component.ts
index 44e95c6..eee1f37 100644
--- a/src/app/components/leaflet-map/leaflet-map.component.ts
+++ b/src/app/components/leaflet-map/leaflet-map.component.ts
@@ -1,9 +1,11 @@
import { Component, OnInit, ViewContainerRef } from '@angular/core';
import * as L from 'leaflet';
import 'leaflet/dist/leaflet.css';
-import { Monument } from '../../model/Monument';
+import { Pin } from '../../model/Pin';
import { PinService } from '../../services/pin.service';
-import { MonumentMarkerComponent } from '../monument-marker/monument-marker.component';
+import { PinMarkerComponent } from '../pin-marker/pin-marker.component';
+import { ActivatedRoute } from '@angular/router';
+import { Router } from '@angular/router';
@Component({
selector: 'app-leaflet-map',
@@ -11,10 +13,13 @@ import { MonumentMarkerComponent } from '../monument-marker/monument-marker.comp
})
export class LeafletMapComponent implements OnInit {
private map!: L.Map;
+ private markersMap: { [key: string]: L.Marker } = {};
constructor(
private viewContainerRef: ViewContainerRef,
- private pinsService: PinService
+ private pinsService: PinService,
+ private route: ActivatedRoute,
+ private router: Router
) {}
ngOnInit(): void {
@@ -51,27 +56,47 @@ export class LeafletMapComponent implements OnInit {
`);
- this.pinsService.getPins().subscribe((monuments: Monument[]) => {
- console.log(monuments);
+ this.pinsService.getPins().subscribe((pins: Pin[]) => {
+ console.log(pins);
// Add markers
- monuments.forEach((monument: Monument) => {
- //const icon = monument.visited ? visitedIcon : notVisitedIcon;
+ pins.forEach((pin: Pin) => {
+ //const icon = pin.visited ? visitedIcon : notVisitedIcon;
const icon = visitedIcon;
- const marker = L.marker(monument.location as [number, number], {
+ const marker = L.marker(pin.location as [number, number], {
icon,
}).addTo(this.map);
+ marker.on('popupclose', () => {
+ this.router.navigate(['/map']);
+ });
+
+ marker.on('popupopen', () => {
+ this.router.navigate(['/map'], { queryParams: { pin: pin.id } });
+ });
+
// Dynamically create Angular component and attach it to popup
const popupDiv = document.createElement('div');
- const componentRef = this.viewContainerRef.createComponent(
- MonumentMarkerComponent
- );
+ const componentRef =
+ this.viewContainerRef.createComponent(PinMarkerComponent);
- componentRef.instance.monument = monument;
+ componentRef.instance.pin = pin;
popupDiv.appendChild(componentRef.location.nativeElement);
marker.bindPopup(popupDiv);
+
+ // Stocker les marqueurs par ID
+ this.markersMap[pin.id] = marker;
+ });
+
+ // Ouvrir automatiquement la pop-up si un ID est passé dans l'URL
+ this.route.queryParams.subscribe((params) => {
+ const pinId = params['pin']; // Récupérer l'ID du Pin depuis les paramètres de requête
+ if (pinId && this.markersMap[pinId]) {
+ this.markersMap[pinId].openPopup(); // Ouvrir la pop-up du marqueur correspondant
+ console.log('Coords du pin : ', this.markersMap[pinId].getLatLng());
+ this.map.setView(this.markersMap[pinId].getLatLng(), 6); // Centrer la carte sur le marqueur
+ }
});
});
}
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index e9ea494..c30df0d 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -55,12 +55,30 @@
Search icon
-
+
+
+
+ -
+ {{ suggestion.title }}
+
+
-
{
+ this.pins = pins;
+ });
+
this.isHome = this.router.url === '/';
this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.isHome = event.url === '/';
}
});
+
+ // Initialise la barre de recherche avec debounce et distinctUntilChanged
+ this.searchForm
+ .get('searchControl')
+ ?.valueChanges.pipe(
+ debounceTime(300), // Attendre 300ms après la dernière frappe
+ distinctUntilChanged(), // Ignorer si la nouvelle valeur est la même que la précédente
+ switchMap((searchTerm) => {
+ console.log(
+ 'Value change : ',
+ this.searchForm.get('searchControl')?.valueChanges
+ );
+ const trimmedQuery = searchTerm?.trim();
+ if (trimmedQuery && trimmedQuery.length > 1) {
+ return of(this.filterPins(trimmedQuery));
+ }
+ return of([]);
+ }),
+ catchError((error) => {
+ console.error(
+ 'Erreur lors de la récupération des suggestions :',
+ error
+ );
+ return of([]);
+ })
+ )
+ .subscribe((filteredPins) => {
+ this.pinsFiltered = filteredPins;
+ console.log('Pins filtrés : ', this.pinsFiltered);
+ });
+ }
+
+ filterPins(searchTerm: string): Pin[] {
+ const filteredPins: Pin[] = [];
+
+ console.log('Pins : ', this.pins);
+
+ if (this.pins.length === 0) {
+ this.pins = this.pinService.getPins();
+ }
+
+ this.pins.forEach((pin: Pin) => {
+ if (
+ pin.title &&
+ pin.title.toLowerCase().includes(searchTerm.toLowerCase())
+ ) {
+ console.log('Search term : ', searchTerm, ' / Pin trouvé : ', pin);
+ filteredPins.push(pin);
+ }
+ });
+
+ return filteredPins;
+ }
+
+ clickSuggestion(pin: Pin): void {
+ this.searchForm.reset();
+
+ const queryParams = { pin: pin.id }; // Remplacer "id" par la bonne propriété si nécessaire
+ this.router.navigate([], {
+ relativeTo: this.route,
+ queryParams: queryParams,
+ queryParamsHandling: 'merge', // Conserve les autres paramètres de requête
+ });
+ console.log('Redirection avec ID :', pin.id);
+ }
+
+ onFocus(): void {
+ this.inputFocus = true;
+ }
+
+ onBlur(): void {
+ setTimeout(() => {
+ this.inputFocus = false;
+ }, 200); // Petit délai pour laisser l'utilisateur cliquer
}
public logout() {
diff --git a/src/app/services/pin.service.ts b/src/app/services/pin.service.ts
index af94b1f..a32650c 100644
--- a/src/app/services/pin.service.ts
+++ b/src/app/services/pin.service.ts
@@ -3,11 +3,15 @@ import { Injectable } from '@angular/core';
import { switchMap } from 'rxjs';
import { environment } from '../../environments/environment';
import { AutocompleteService } from './auto-complete.service';
+import { Pin } from '../model/Pin';
@Injectable({
providedIn: 'root',
})
export class PinService {
+ allPins: Pin[] = [];
+ filteredPins: Pin[] = [];
+
private apiURL = environment.apiURL;
private token = localStorage.getItem('auth_token');
constructor(