✨ Show pins works

src/app/components/add-pin-popup/add-pin-popup.component.ts

@@ -99,7 +99,7 @@ export class AddPinPopupComponent implements OnInit {
         files: this.files,
       };
 
-      this.addPinService.addPin(pinData).add(() => {
+      this.addPinService.addPin(pinData).subscribe(() => {
         this.closeModal();
       });
     } else {

src/app/components/leaflet-map/leaflet-map.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit, ViewContainerRef } from '@angular/core';
 import * as L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
-import { monuments } from '../../data/stub';
+import { Monument } from '../../model/Monument';
+import { GetPinService } from '../../services/get-pin.service';
 import { MonumentMarkerComponent } from '../monument-marker/monument-marker.component';
 
 @Component({
@@ -11,7 +12,10 @@ import { MonumentMarkerComponent } from '../monument-marker/monument-marker.comp
 export class LeafletMapComponent implements OnInit {
   private map!: L.Map;
 
-  constructor(private viewContainerRef: ViewContainerRef) {}
+  constructor(
+    private viewContainerRef: ViewContainerRef,
+    private getPinsService: GetPinService
+  ) {}
 
   ngOnInit(): void {
     this.initializeMap();
@@ -22,7 +26,7 @@ export class LeafletMapComponent implements OnInit {
     this.map = L.map('map', {
       maxBounds: L.latLngBounds(
         L.latLng(-90, -180), // South-West
-        L.latLng(90, 180)    // North-East
+        L.latLng(90, 180) // North-East
       ),
       maxBoundsViscosity: 1.0, // Prevent dragging the map out of bounds
       minZoom: 2, // Prevent zooming out too much
@@ -47,24 +51,28 @@ export class LeafletMapComponent implements OnInit {
       </svg>
     `);
 
-    // Add markers
-    monuments.forEach((monument) => {
-      const icon = monument.visited ? visitedIcon : notVisitedIcon;
+    this.getPinsService.getPins().subscribe((monuments: Monument[]) => {
+      console.log(monuments);
+      // Add markers
+      monuments.forEach((monument: Monument) => {
+        //const icon = monument.visited ? visitedIcon : notVisitedIcon;
+        const icon = visitedIcon;
 
-      const marker = L.marker(monument.coords as [number, number], {
-        icon,
-      }).addTo(this.map);
+        const marker = L.marker(monument.location as [number, number], {
+          icon,
+        }).addTo(this.map);
 
-      // Dynamically create Angular component and attach it to popup
-      const popupDiv = document.createElement('div');
-      const componentRef = this.viewContainerRef.createComponent(
-        MonumentMarkerComponent
-      );
+        // Dynamically create Angular component and attach it to popup
+        const popupDiv = document.createElement('div');
+        const componentRef = this.viewContainerRef.createComponent(
+          MonumentMarkerComponent
+        );
 
-      componentRef.instance.monument = monument;
-      popupDiv.appendChild(componentRef.location.nativeElement);
+        componentRef.instance.monument = monument;
+        popupDiv.appendChild(componentRef.location.nativeElement);
 
-      marker.bindPopup(popupDiv);
+        marker.bindPopup(popupDiv);
+      });
     });
   }
 

src/app/components/monument-marker/monument-marker.component.html

@@ -1,7 +1,7 @@
 <div class="text-center">
-  <strong>{{ monument.name }}</strong>
+  <strong>{{ monument.title }}</strong>
   <div
-    *ngIf="monument.images.length > 0"
+    *ngIf="monument.files.length > 0"
     class="relative carousel overflow-hidden"
   >
     <!-- Carousel wrapper -->
@@ -9,7 +9,7 @@
       class="relative h-40 mt-2 overflow-hidden rounded-lg flex items-center justify-center"
     >
       <div
-        *ngFor="let image of monument.images; let index = index"
+        *ngFor="let image of monument.files; let index = index"
         [class]="
           'absolute inset-0 transition-opacity duration-700 ease-in-out' +
           (index === currentIndex ? ' opacity-100' : ' opacity-0')
@@ -17,14 +17,14 @@
       >
         <img
           [src]="image"
-          [alt]="monument.name"
+          [alt]="monument.title"
           class="object-contain max-h-full max-w-full h-full w-auto mx-auto"
         />
       </div>
     </div>
 
     <!-- Slider controls -->
-    <div *ngIf="monument.images.length > 1">
+    <div *ngIf="monument.files.length > 1">
       <button
         type="button"
         class="absolute top-0 left-0 z-30 flex items-center justify-center h-full cursor-pointer group focus:outline-none"

src/app/components/monument-marker/monument-marker.component.ts

@@ -26,11 +26,11 @@ export class MonumentMarkerComponent {
 
   prevSlide(): void {
     this.currentIndex =
-      (this.currentIndex - 1 + this.monument.images.length) %
-      this.monument.images.length;
+      (this.currentIndex - 1 + this.monument.files.length) %
+      this.monument.files.length;
   }
 
   nextSlide(): void {
-    this.currentIndex = (this.currentIndex + 1) % this.monument.images.length;
+    this.currentIndex = (this.currentIndex + 1) % this.monument.files.length;
   }
 }

src/app/model/Monument.ts

@@ -1,7 +1,6 @@
 export interface Monument {
-  coords: number[];
-  name: string;
-  images: string[];
+  location: number[];
+  title: string;
+  files: string[];
   description: string;
-  visited: boolean;
 }

src/app/services/add-pin.service.ts

@@ -1,6 +1,8 @@
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { switchMap } from 'rxjs';
 import { environment } from '../../environments/environment';
+import { AutocompleteService } from './auto-complete.service';
 
 @Injectable({
   providedIn: 'root',
@@ -8,7 +10,10 @@ import { environment } from '../../environments/environment';
 export class AddPinService {
   private apiURL = environment.apiURL;
   private token = localStorage.getItem('auth_token');
-  constructor(private http: HttpClient) {}
+  constructor(
+    private http: HttpClient,
+    private autoCompleteService: AutocompleteService
+  ) {}
 
   addPin(pin: {
     title: string;
@@ -21,17 +26,20 @@ export class AddPinService {
       'Content-Type': 'application/json',
       Authorization: 'Bearer ' + this.token,
     });
-    return this.http
-      .post<any>(
-        url,
-        {
-          title: pin.title,
-          description: pin.description,
-          location: pin.location,
-          files: pin.files,
-        },
-        { headers }
-      )
-      .subscribe();
+    return this.autoCompleteService.getAdressCoordinates(pin.location).pipe(
+      switchMap((response: any) => {
+        const coords: [string, string] = [response[0].lat, response[0].lon];
+        return this.http.post<any>(
+          url,
+          {
+            title: pin.title,
+            description: pin.description,
+            location: coords,
+            files: pin.files,
+          },
+          { headers }
+        );
+      })
+    );
   }
 }

src/app/services/auto-complete.service.ts

@@ -6,12 +6,12 @@ import { Observable } from 'rxjs';
   providedIn: 'root',
 })
 export class AutocompleteService {
-  private apiUrl = 'https://nominatim.openstreetmap.org/search';
+  private apiUrl = 'https://nominatim.openstreetmap.org';
 
   constructor(private http: HttpClient) {}
 
   getAddressSuggestions(query: string): Observable<any> {
-    return this.http.get(this.apiUrl, {
+    return this.http.get(this.apiUrl + '/search', {
       params: {
         q: query,
         format: 'json',
@@ -20,4 +20,15 @@ export class AutocompleteService {
       },
     });
   }
+
+  getAdressCoordinates(query: string): Observable<any> {
+    return this.http.get(this.apiUrl + '/search', {
+      params: {
+        q: query,
+        format: 'json',
+        addressdetails: '1',
+        limit: '1',
+      },
+    });
+  }
 }

src/app/services/get-pin.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GetPinService } from './get-pin.service';
+
+describe('GetPinService', () => {
+  let service: GetPinService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GetPinService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/get-pin.service.ts

@@ -0,0 +1,21 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { environment } from '../../environments/environment';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class GetPinService {
+  private apiURL = environment.apiURL;
+  private token = localStorage.getItem('auth_token');
+  constructor(private http: HttpClient) {}
+
+  getPins(): any {
+    const url = `${this.apiURL}/pins`;
+    const headers = new HttpHeaders({
+      'Content-Type': 'application/json',
+      Authorization: 'Bearer ' + this.token,
+    });
+    return this.http.get<any>(url, { headers });
+  }
+}

src/environments/environment.development.ts

@@ -1,4 +1,4 @@
 export const environment = {
   production: false,
-  apiURL: 'http://127.0.0.1:8000/api/v1',
+  apiURL: 'https://api.memorymap.fr/api/v1',
 };