+
+
-
-
-
-
-
-
- {{ i + 1 }}
+
+
+
+
+
+
+
+
-
-
+ {{ year }}
+
-
+
+
+
- {{ pin.date ? (pin.date | date : "dd/MM/yyyy") : "Date inconnue" }}
-
-
- {{ pin.title || "Titre inconnu" }}
-
-
- {{ pin.description || "Aucune description" }}
-
+
+
+
+
-
- ![image]()
-
-
-
-
- Aucune image
-
+ {{ pin.date | date: 'dd/MM/yyyy' }}
+
+
+
+
+
+
+
+
+
+
+
+
+ + {{ pin.title || 'Titre inconnu' }} +
+ + +
+ {{ pin.description || 'Aucune description' }}
+
+
+
+
+
+
+
+
+
+
+
+ ![image]()
+
+
+
+
+
+
+
+
+ Aucune image
+
+
Aucun souvenir à afficher pour le moment.
diff --git a/src/app/components/timeline/timeline.component.ts b/src/app/components/timeline/timeline.component.ts
index 6b93b32..cb54777 100644
--- a/src/app/components/timeline/timeline.component.ts
+++ b/src/app/components/timeline/timeline.component.ts
@@ -15,6 +15,10 @@ export class TimelineComponent implements OnInit {
pins: Pin[] = [];
imageUrls: SafeUrl[][] = [];
loading = true;
+ groupedPins: { [year: string]: Pin[] } = {};
+ sortedYears: string[] = [];
+ carouselIndexes: number[] = [];
+ expandedDescriptions: { [index: number]: boolean } = {};
constructor(
private pinService: PinService,
@@ -41,7 +45,47 @@ export class TimelineComponent implements OnInit {
}
});
+ this.carouselIndexes = this.pins.map(() => 0);
+
this.loading = false;
+
+ this.groupPinsByYear();
});
}
+
+ private groupPinsByYear(): void {
+ this.groupedPins = {};
+
+ for (const pin of this.pins) {
+ const year = new Date(pin.date!).getFullYear().toString();
+ if (!this.groupedPins[year]) {
+ this.groupedPins[year] = [];
+ }
+ this.groupedPins[year].push(pin);
+ }
+
+ // Trie les pins dans chaque groupe (au cas où)
+ for (const year in this.groupedPins) {
+ this.groupedPins[year].sort((a, b) => a.date!.localeCompare(b.date!));
+ }
+
+ // Trie les années dans l’ordre croissant (utilisé dans le template)
+ this.sortedYears = Object.keys(this.groupedPins).sort((a, b) => +a - +b);
+ }
+
+ nextImage(index: number) {
+ const images = this.imageUrls[index];
+ this.carouselIndexes[index] =
+ (this.carouselIndexes[index] + 1) % images.length;
+ }
+
+ prevImage(index: number) {
+ const images = this.imageUrls[index];
+ this.carouselIndexes[index] =
+ (this.carouselIndexes[index] - 1 + images.length) % images.length;
+ }
+
+ toggleDescription(index: number): void {
+ this.expandedDescriptions[index] = !this.expandedDescriptions[index];
+ }
}