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({