diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index a265667..3e4cb1c 100644 --- a/src/app/app.routes.ts +++ b/src/app/app.routes.ts @@ -3,9 +3,11 @@ import { AuthGuard } from './auth.guard'; import { HomePageComponent } from './components/home-page/home-page.component'; import { LeafletMapComponent } from './components/leaflet-map/leaflet-map.component'; import { NotFoundComponent } from './components/not-found/not-found.component'; +import { TimelineComponent } from './components/timeline/timeline.component'; export const routes: Routes = [ { path: '', component: HomePageComponent }, { path: 'map', component: LeafletMapComponent, canActivate: [AuthGuard] }, + { path: 'timeline', component: TimelineComponent, canActivate: [AuthGuard] }, { path: '**', component: NotFoundComponent }, ]; diff --git a/src/app/components/add-pin-popup/add-pin-popup.component.html b/src/app/components/add-pin-popup/add-pin-popup.component.html index d1dac5d..18cb5ba 100644 --- a/src/app/components/add-pin-popup/add-pin-popup.component.html +++ b/src/app/components/add-pin-popup/add-pin-popup.component.html @@ -26,12 +26,12 @@ 'opacity-0 scale-50 pointer-events-none': !isPinModalOpen, 'opacity-100 scale-100': isPinModalOpen }" - class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-transform duration-300 ease-in-out" + class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-transform duration-300 ease-in-out overflow-y-auto" >
+ @@ -143,25 +148,47 @@
--> -
- -
-
-
--> + +
+ - Valider - +
+ +
+ + +
diff --git a/src/app/components/add-pin-popup/add-pin-popup.component.ts b/src/app/components/add-pin-popup/add-pin-popup.component.ts index cb7e1a0..4c47738 100644 --- a/src/app/components/add-pin-popup/add-pin-popup.component.ts +++ b/src/app/components/add-pin-popup/add-pin-popup.component.ts @@ -15,11 +15,11 @@ import { } from 'rxjs/operators'; import { AutocompleteService } from '../../services/auto-complete/auto-complete.service'; import { ExifService } from '../../services/exif/exif.service'; +import { ImageService } from '../../services/image/image.service'; import { MapReloadService } from '../../services/map-reload/map-reload.service'; +import { ModalService } from '../../services/modal/modal.service'; import { PinService } from '../../services/pin/pin.service'; import { DragDropComponent } from '../drag-drop/drag-drop.component'; -import { ModalService } from '../../services/modal/modal.service'; -import { ImageService } from '../../services/image/image.service'; @Component({ selector: 'app-add-pin-popup', @@ -51,6 +51,7 @@ export class AddPinPopupComponent implements OnInit { description: new FormControl(''), location: new FormControl(''), files: new FormControl(null), + date: new FormControl(''), }); } @@ -159,6 +160,7 @@ export class AddPinPopupComponent implements OnInit { const pinData = { ...this.form.value, files: this.files, + date: this.form.get('date')?.value || null, }; console.log('Files : ' + JSON.stringify(this.files)); diff --git a/src/app/components/edit-pin-popup/edit-pin-popup.component.html b/src/app/components/edit-pin-popup/edit-pin-popup.component.html index c21d4b5..d1addd5 100644 --- a/src/app/components/edit-pin-popup/edit-pin-popup.component.html +++ b/src/app/components/edit-pin-popup/edit-pin-popup.component.html @@ -43,12 +43,12 @@ 'opacity-0 scale-50 pointer-events-none': !isPinModalOpen, 'opacity-100 scale-100': isPinModalOpen }" - class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-transform duration-300 ease-in-out" + class="fixed top-0 right-0 left-0 z-50 flex justify-center items-center w-full h-full transition-transform duration-300 ease-in-out overflow-y-auto" >
+ @@ -150,25 +155,37 @@ >
-
- -
-
- +
+ +
+ + +
diff --git a/src/app/components/edit-pin-popup/edit-pin-popup.component.ts b/src/app/components/edit-pin-popup/edit-pin-popup.component.ts index b70a1c4..f56b6d7 100644 --- a/src/app/components/edit-pin-popup/edit-pin-popup.component.ts +++ b/src/app/components/edit-pin-popup/edit-pin-popup.component.ts @@ -66,6 +66,7 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy { description: new FormControl(''), location: new FormControl(''), files: new FormControl(null), + date: new FormControl(''), }); } @@ -85,6 +86,7 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy { title: this.pin?.title || '', description: this.pin?.description || '', location: "Chargement de l'adresse...", + date: this.pin?.date || '', }); // Vérifier si nous avons des coordonnées valides dans pin.location @@ -251,6 +253,7 @@ export class EditPinPopupComponent implements OnInit, AfterViewInit, OnDestroy { ...this.form.value, files: this.files, user_id: this.pin.user_id, + date: this.form.get('date')?.value || null, }; this.pinService.updatePin(this.pin.id, pinData).subscribe(() => { diff --git a/src/app/components/leaflet-map/leaflet-map.component.html b/src/app/components/leaflet-map/leaflet-map.component.html index 84d3ae6..7b41c94 100644 --- a/src/app/components/leaflet-map/leaflet-map.component.html +++ b/src/app/components/leaflet-map/leaflet-map.component.html @@ -1,48 +1,46 @@ -
+
-
- -
- - +
+ + - - + + +
- diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html index 7c3eebe..0d266d1 100644 --- a/src/app/components/navbar/navbar.component.html +++ b/src/app/components/navbar/navbar.component.html @@ -169,16 +169,16 @@ >
  • AccueilCarte CarteTimeline
  • diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts index f53de85..3f9ec08 100644 --- a/src/app/components/navbar/navbar.component.ts +++ b/src/app/components/navbar/navbar.component.ts @@ -38,7 +38,7 @@ import { FriendPageComponent } from '../friend-page/friend-page.component'; templateUrl: './navbar.component.html', }) export class NavbarComponent implements OnInit { - isHome: boolean = false; + isTimeline: boolean = false; isSearchOpen: boolean = false; isNavbarOpen: boolean = false; @@ -75,10 +75,10 @@ export class NavbarComponent implements OnInit { this.pins = pins; }); - this.isHome = this.router.url === '/'; + this.isTimeline = this.router.url === '/timeline'; this.router.events.subscribe((event) => { if (event instanceof NavigationEnd) { - this.isHome = event.url === '/'; + this.isTimeline = event.url === '/timeline'; } }); diff --git a/src/app/components/timeline/timeline.component.html b/src/app/components/timeline/timeline.component.html new file mode 100644 index 0000000..ba8b851 --- /dev/null +++ b/src/app/components/timeline/timeline.component.html @@ -0,0 +1,73 @@ + +
    +
    +
    + + +
    +
    + +
    + +
    + +
    + {{ i + 1 }} +
    + + +
    +
    + {{ pin.date ? (pin.date | date : "dd/MM/yyyy") : "Date inconnue" }} +
    +
    + {{ 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 new file mode 100644 index 0000000..6b93b32 --- /dev/null +++ b/src/app/components/timeline/timeline.component.ts @@ -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; + }); + } +} diff --git a/src/app/model/Pin.ts b/src/app/model/Pin.ts index cc6a067..0e04110 100644 --- a/src/app/model/Pin.ts +++ b/src/app/model/Pin.ts @@ -5,4 +5,5 @@ export interface Pin { files: string[]; description: string; user_id: string; + date?: string; } diff --git a/src/app/services/pin/pin.service.ts b/src/app/services/pin/pin.service.ts index db66f3c..4d11d82 100644 --- a/src/app/services/pin/pin.service.ts +++ b/src/app/services/pin/pin.service.ts @@ -34,6 +34,7 @@ export class PinService { description: string; location: string; files: string[]; + date: string; }) { const url = `${this.apiURL}/pin/add`; const headers = new HttpHeaders({ @@ -51,6 +52,7 @@ export class PinService { location: coords, files: pin.files, user_id: '', + date: pin.date, }, { headers } );