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 b3eb971..d1dac5d 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 @@ -133,6 +133,16 @@ > + +
+ diff --git a/src/app/components/leaflet-map/leaflet-map.component.ts b/src/app/components/leaflet-map/leaflet-map.component.ts index 1b4e4c3..526f59a 100644 --- a/src/app/components/leaflet-map/leaflet-map.component.ts +++ b/src/app/components/leaflet-map/leaflet-map.component.ts @@ -1,5 +1,11 @@ import { NgFor } from '@angular/common'; -import { Component, OnInit, ViewContainerRef } from '@angular/core'; +import { + Component, + EventEmitter, + OnInit, + Output, + ViewContainerRef, +} from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; import * as L from 'leaflet'; @@ -9,6 +15,7 @@ import { AutocompleteService } from '../../services/auto-complete/auto-complete. import { MapReloadService } from '../../services/map-reload/map-reload.service'; import { PinService } from '../../services/pin/pin.service'; import { PinMarkerComponent } from '../pin-marker/pin-marker.component'; +import { ModalService } from '../../services/modal/modal.service'; @Component({ selector: 'app-leaflet-map', @@ -27,12 +34,16 @@ export class LeafletMapComponent implements OnInit { selectedCountry: string = ''; selectedPerson: string = '__all__'; + fileNames: string[] = []; + @Output() filesSelected = new EventEmitter(); + constructor( private viewContainerRef: ViewContainerRef, private pinsService: PinService, private autocompleteService: AutocompleteService, private route: ActivatedRoute, private router: Router, + private modalService: ModalService, private mapReloadService: MapReloadService ) {} @@ -230,4 +241,30 @@ export class LeafletMapComponent implements OnInit { this.loadCountriesForFiltrers(pins); // Ensuite, charger les pays en arrière-plan }); } + + + + async onFilesSelected(event: Event): Promise { + const input = event.target as HTMLInputElement; + if (input.files && input.files.length > 0) { + this.fileNames = Array.from(input.files).map((f) => f.name); + this.filesSelected.emit(input.files); + this.modalService.openModal('add-pin-modal'); + } + } + + onDragOver(event: DragEvent) { + event.preventDefault(); + } + + onDrop(event: DragEvent) { + event.preventDefault(); + if (event.dataTransfer && event.dataTransfer.files.length > 0) { + this.filesSelected.emit(event.dataTransfer.files); + const images: File[] = Array.from(event.dataTransfer.files); + this.modalService.openModal('add-pin-modal', images); + } + + console.log('Image dropped on map : ', event.dataTransfer?.files); + } } diff --git a/src/app/services/image/image.service.ts b/src/app/services/image/image.service.ts index 637abcc..45b01c0 100644 --- a/src/app/services/image/image.service.ts +++ b/src/app/services/image/image.service.ts @@ -26,4 +26,16 @@ export class ImageService { responseType: 'blob' }); } + + postImage(image: File): Observable { + const token = this.localStorageService.getToken(); + const headers = new HttpHeaders({ + 'Authorization': `Bearer ${token}` + }); + + const formData = new FormData(); + formData.append('image', image); + + return this.http.post(`${this.apiUrl}/image/pin/null/add`, formData, { headers }); + } } diff --git a/src/app/services/modal/modal.service.ts b/src/app/services/modal/modal.service.ts index 0b0c16a..f7e38b9 100644 --- a/src/app/services/modal/modal.service.ts +++ b/src/app/services/modal/modal.service.ts @@ -4,6 +4,7 @@ import { BehaviorSubject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class ModalService { private modals: Map> = new Map(); + private imageFilesSubject = new BehaviorSubject(null); getModalState(id: string): BehaviorSubject { if (!this.modals.has(id)) { @@ -12,11 +13,20 @@ export class ModalService { return this.modals.get(id)!; } - openModal(id: string) { + openModal(id: string, images?: File[]) { + if (images) { + this.imageFilesSubject.next(images); + } + this.getModalState(id).next(true); } closeModal(id: string) { this.getModalState(id).next(false); + this.imageFilesSubject.next(null); + } + + getImageFiles(): BehaviorSubject { + return this.imageFilesSubject; } } diff --git a/src/app/services/pin/pin.service.ts b/src/app/services/pin/pin.service.ts index fde4d4a..db66f3c 100644 --- a/src/app/services/pin/pin.service.ts +++ b/src/app/services/pin/pin.service.ts @@ -4,6 +4,7 @@ import { switchMap } from 'rxjs'; import { environment } from '../../../environments/environment'; import { Pin } from '../../model/Pin'; import { AutocompleteService } from '../auto-complete/auto-complete.service'; +// import { ImageService } from '../image/image.service'; @Injectable({ providedIn: 'root', @@ -16,7 +17,7 @@ export class PinService { constructor( private http: HttpClient, - private autoCompleteService: AutocompleteService + private autoCompleteService: AutocompleteService // private imageService: ImageService ) {} getPins(): any { @@ -32,7 +33,7 @@ export class PinService { title: string; description: string; location: string; - files: any[]; + files: string[]; }) { const url = `${this.apiURL}/pin/add`; const headers = new HttpHeaders({