Monument => Pin

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

@@ -1,7 +1,7 @@
 <div class="text-center">
-  <strong>{{ monument.title }}</strong>
+  <strong>{{ pin.title }}</strong>
   <div
-    *ngIf="monument.files.length > 0"
+    *ngIf="pin.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.files; let index = index"
+        *ngFor="let image of pin.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.title"
+          [alt]="pin.title"
           class="object-contain max-h-full max-w-full h-full w-auto mx-auto"
         />
       </div>
     </div>
 
     <!-- Slider controls -->
-    <div *ngIf="monument.files.length > 1">
+    <div *ngIf="pin.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/pin-marker/pin-marker.component.spec.ts

@@ -1,17 +1,17 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { MonumentMarkerComponent } from './monument-marker.component';
+import { PinMarkerComponent } from './pin-marker.component';
 
-describe('MonumentmarkerComponent', () => {
+describe('PinmarkerComponent', () => {
-  let component: MonumentMarkerComponent;
+  let component: PinMarkerComponent;
-  let fixture: ComponentFixture<MonumentMarkerComponent>;
+  let fixture: ComponentFixture<PinMarkerComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MonumentMarkerComponent],
+      imports: [PinMarkerComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(MonumentMarkerComponent);
+    fixture = TestBed.createComponent(PinMarkerComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

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

@@ -1,19 +1,19 @@
 import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
-import { Monument } from '../../model/Monument';
+import { Pin } from '../../model/Pin';
 
 @Component({
-  selector: 'app-monument-marker',
+  selector: 'app-pin-marker',
-  templateUrl: './monument-marker.component.html',
+  templateUrl: './pin-marker.component.html',
   imports: [CommonModule],
 })
-export class MonumentMarkerComponent {
+export class PinMarkerComponent {
-  @Input() monument!: Monument;
+  @Input() pin!: Pin;
 
   currentIndex: number = 0;
 
   get formattedDescription(): string {
-    return this.formatDescription(this.monument.description);
+    return this.formatDescription(this.pin.description);
   }
 
   formatDescription(description: string): string {
@@ -26,11 +26,10 @@ export class MonumentMarkerComponent {
 
   prevSlide(): void {
     this.currentIndex =
-      (this.currentIndex - 1 + this.monument.files.length) %
+      (this.currentIndex - 1 + this.pin.files.length) % this.pin.files.length;
-      this.monument.files.length;
   }
 
   nextSlide(): void {
-    this.currentIndex = (this.currentIndex + 1) % this.monument.files.length;
+    this.currentIndex = (this.currentIndex + 1) % this.pin.files.length;
   }
 }

src/app/data/stub.ts

@@ -1,32 +0,0 @@
-import { Monument } from '../model/Monument';
-
-export const monuments: Monument[] = [
-  {
-    coords: [48.85837, 2.294481],
-    name: 'Tour Eiffel',
-    images: [
-      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQGGib245tSFiK1Qcx0cB0dZsoVyJElwsY3kA&s',
-      'https://encrypted-tbn2.gstatic.com/licensed-image?q=tbn:ANd9GcTLB9B0j50rJbcSbdja9_hySHS6_KATbhTK_iCeWeNKtA92hTmTX5nTW3udjjovZrnU1JxqAjMS_VqHnMwHGhTs35-sU-7B29_X_T3uLV8',
-    ],
-    description: 'Visité en 2020 avec la famille, un moment inoubliable.',
-    visited: true,
-  },
-  {
-    coords: [43.296482, 5.36978],
-    name: 'Vieux Port de Marseille',
-    images: [
-      'https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Marseille_Old_Port.jpg/390px-Marseille_Old_Port.jpg',
-    ],
-    description:
-      "Découvert lors d'un week-end ensoleillé en 2019 avec @John-Doe.",
-    visited: true,
-  },
-  {
-    coords: [48.636063, -1.511457],
-    name: 'Mont Saint-Michel',
-    images: [],
-    description: '',
-    visited: false,
-  },
-  // ...
-];

src/app/model/Pin.ts

@@ -1,4 +1,5 @@
-export interface Monument {
+export interface Pin {
+  id: string;
   location: number[];
   title: string;
   files: string[];