✨ Added the PoiList component to handle displaying, adding, editing and deleting points of interest.
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
parent
afdc6b7b33
commit
52490c8738
@ -0,0 +1,101 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { POIService } from '../../services/poi.service';
|
||||
import { POI } from '../../model/POI';
|
||||
|
||||
@Component({
|
||||
selector: 'app-poi-list',
|
||||
standalone: true,
|
||||
imports: [CommonModule, FormsModule],
|
||||
templateUrl: './poi-list.component.html',
|
||||
styleUrl: './poi-list.component.css'
|
||||
})
|
||||
export class PoiListComponent implements OnInit {
|
||||
pois: POI[] = [];
|
||||
selectedPoi: POI | null = null;
|
||||
isEditing = false;
|
||||
isAdding = false;
|
||||
|
||||
constructor(private poiService: POIService) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.loadPOIs();
|
||||
}
|
||||
|
||||
loadPOIs(): void {
|
||||
this.poiService.getPOIs().subscribe({
|
||||
next: (response: POI[]) => {
|
||||
this.pois = response;
|
||||
},
|
||||
error: (error: any) => {
|
||||
console.error('Erreur lors du chargement des POIs:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
addPoi(): void {
|
||||
this.selectedPoi = {
|
||||
id: '',
|
||||
title: '',
|
||||
description: '',
|
||||
complete_address: '',
|
||||
location: [0, 0],
|
||||
files: [],
|
||||
user_id: null,
|
||||
is_poi: true
|
||||
};
|
||||
this.isAdding = true;
|
||||
}
|
||||
|
||||
editPoi(poi: POI): void {
|
||||
console.log('Édition du POI:', poi); // Pour le débogage
|
||||
this.selectedPoi = { ...poi };
|
||||
this.isEditing = true;
|
||||
}
|
||||
|
||||
savePoi(): void {
|
||||
if (this.selectedPoi) {
|
||||
if (this.isAdding) {
|
||||
this.poiService.addPOI(this.selectedPoi).subscribe({
|
||||
next: () => {
|
||||
this.loadPOIs();
|
||||
this.cancelEdit();
|
||||
},
|
||||
error: (error: any) => {
|
||||
console.error('Erreur lors de l\'ajout du POI:', error);
|
||||
}
|
||||
});
|
||||
} else if (this.selectedPoi.id) {
|
||||
this.poiService.updatePOI(this.selectedPoi.id, this.selectedPoi).subscribe({
|
||||
next: () => {
|
||||
this.loadPOIs();
|
||||
this.cancelEdit();
|
||||
},
|
||||
error: (error: any) => {
|
||||
console.error('Erreur lors de la mise à jour du POI:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
deletePoi(id: string): void {
|
||||
if (confirm('Êtes-vous sûr de vouloir supprimer ce POI ?')) {
|
||||
this.poiService.deletePOI(id).subscribe({
|
||||
next: () => {
|
||||
this.loadPOIs();
|
||||
},
|
||||
error: (error: any) => {
|
||||
console.error('Erreur lors de la suppression du POI:', error);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
cancelEdit(): void {
|
||||
this.selectedPoi = null;
|
||||
this.isEditing = false;
|
||||
this.isAdding = false;
|
||||
}
|
||||
}
|
Loading…
Reference in new issue