Alexis Feron
2 weeks ago
parent
d2e6f8d567
commit
a83133a6f0
@ -0,0 +1,73 @@
|
|||||||
|
<!-- Spinner pendant le chargement -->
|
||||||
|
<div *ngIf="loading" class="flex justify-center items-center h-64">
|
||||||
|
<div
|
||||||
|
class="animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Timeline -->
|
||||||
|
<div
|
||||||
|
*ngIf="!loading && pins.length > 0"
|
||||||
|
class="relative mx-auto max-w-3xl py-10 px-4"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="absolute h-full left-1/2 transform -translate-x-1/2 border-l-2 border-blue-500"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
*ngFor="let pin of pins; let i = index"
|
||||||
|
class="mb-12 flex justify-between items-center w-full"
|
||||||
|
>
|
||||||
|
<!-- Si pair, carte à droite, point à gauche -->
|
||||||
|
<div
|
||||||
|
class="w-5/12"
|
||||||
|
[ngClass]="{ 'order-1': i % 2 === 0, 'order-2': i % 2 !== 0 }"
|
||||||
|
></div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="z-20 flex items-center bg-blue-600 shadow-lg w-10 h-10 rounded-full"
|
||||||
|
[ngClass]="{ 'order-2': i % 2 === 0, 'order-1': i % 2 !== 0 }"
|
||||||
|
>
|
||||||
|
<span class="text-white font-semibold mx-auto">{{ i + 1 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Content card -->
|
||||||
|
<div
|
||||||
|
class="bg-white dark:bg-gray-800 rounded-xl shadow-xl px-6 py-5 w-5/12 transition-all duration-300 hover:scale-[1.02]"
|
||||||
|
[ngClass]="{
|
||||||
|
'order-3': i % 2 === 0,
|
||||||
|
'order-0': i % 2 !== 0,
|
||||||
|
'text-right': i % 2 !== 0
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="text-sm text-gray-400 mb-1">
|
||||||
|
{{ pin.date ? (pin.date | date : "dd/MM/yyyy") : "Date inconnue" }}
|
||||||
|
</div>
|
||||||
|
<div class="text-lg font-bold text-gray-900 dark:text-white mb-1">
|
||||||
|
{{ pin.title || "Titre inconnu" }}
|
||||||
|
</div>
|
||||||
|
<div class="text-gray-700 dark:text-gray-300 mb-3">
|
||||||
|
{{ pin.description || "Aucune description" }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ng-container *ngIf="imageUrls[i] && imageUrls[i].length > 0">
|
||||||
|
<img
|
||||||
|
[src]="imageUrls[i][0]"
|
||||||
|
alt="image"
|
||||||
|
class="rounded-lg mx-auto max-h-40 object-cover shadow"
|
||||||
|
/>
|
||||||
|
</ng-container>
|
||||||
|
<ng-container *ngIf="!imageUrls[i] || imageUrls[i].length === 0">
|
||||||
|
<div class="text-gray-400 italic text-center">Aucune image</div>
|
||||||
|
</ng-container>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Message si vide -->
|
||||||
|
<div
|
||||||
|
*ngIf="!loading && pins.length === 0"
|
||||||
|
class="text-center text-gray-500 py-12 text-lg"
|
||||||
|
>
|
||||||
|
Aucun souvenir à afficher pour le moment.
|
||||||
|
</div>
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
import { CommonModule } from '@angular/common';
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
|
||||||
|
import { Pin } from '../../model/Pin';
|
||||||
|
import { ImageService } from '../../services/image/image.service';
|
||||||
|
import { PinService } from '../../services/pin/pin.service';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-timeline',
|
||||||
|
standalone: true,
|
||||||
|
imports: [CommonModule],
|
||||||
|
templateUrl: './timeline.component.html',
|
||||||
|
})
|
||||||
|
export class TimelineComponent implements OnInit {
|
||||||
|
pins: Pin[] = [];
|
||||||
|
imageUrls: SafeUrl[][] = [];
|
||||||
|
loading = true;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
private pinService: PinService,
|
||||||
|
private imageService: ImageService,
|
||||||
|
private sanitizer: DomSanitizer
|
||||||
|
) {}
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
this.pinService.getPins().subscribe((pins: Pin[]) => {
|
||||||
|
this.pins = pins
|
||||||
|
.filter((pin) => !!pin.date)
|
||||||
|
.sort((a, b) => (a.date! > b.date! ? 1 : -1));
|
||||||
|
this.imageUrls = this.pins.map(() => []); // initialise le tableau d'images
|
||||||
|
|
||||||
|
this.pins.forEach((pin, index) => {
|
||||||
|
if (pin.files && pin.files.length > 0) {
|
||||||
|
pin.files.forEach((imageId) => {
|
||||||
|
this.imageService.getImage(imageId).subscribe((blob) => {
|
||||||
|
const objectUrl = URL.createObjectURL(blob);
|
||||||
|
const safeUrl = this.sanitizer.bypassSecurityTrustUrl(objectUrl);
|
||||||
|
this.imageUrls[index].push(safeUrl);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.loading = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in new issue