Bonjour à tous
Dans le navigateur localhost:3000/Profil.html j’ai un petit souci quand, dans la partie liste d’amis de l’administrateur, je clique sur « envoyer une invitation », « accepter l’invitation » et « supprimer », rien ne fonctionne. Pouvez-vous m’aider SVP ? Merci à tous : Voici mon html
<!--Liste d'amis de l'administrateur-->
<div class="container mt-5">
<div class="row">
<div class="col-md-8 offset-md-2">
<div class="card">
<div class="card-body">
<h5 class="card-title">Liste des Amis de l'administrateur</h5>
<div id="friendsList" class="row"></div>
</div>
<!--Bouton pour supprimer un ami de sa liste d'amis-->
<div class="col-md-4">
<div class="card mb-4">
<img
src="assets/Edouard.png"
class="card-img-top"
alt="Photo de profil"
/>
<div class="card-body">
<h5 class="card-title">
<a
href="#"
class="friend-link"
data-friend-id="ID_DU_MEMBRE"
>Pseudonyme</a
>
</h5>
<p class="card-text">Nom et Prénom</p>
<button
class="btn btn-primary btn-sm sendFriendRequestBtn"
data-friend-id="ID_DU_MEMBRE"
>
Envoyer une invitation
</button>
<!--Acceptation de l'ami à la liste d'amis de l'administrateur -->
<button
class="btn btn-success btn-sm acceptFriendRequestBtn"
data-friend-id="ID_DU_MEMBRE"
>
Accepter l'invitation
</button>
<button
class="btn btn-danger btn-sm deleteFriendBtn"
data-friend-id="ID_DU_MEMBRE"
>
Supprimer
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Confirmation du message-->
<div class="container mt-3">
<div
class="alert alert-success d-none"
id="friendRequestSuccessmessage"
>
Demande d'ami envoyée réussie!
</div>
<!--Acceptation de l'ami-->
<div
class="alert alert-success d-none"
id="friendRequestAcceptedMessage"
>
L'ami a été accepté!
</div>
</div>
</div>
Et Javascript
// Fonction pour chargement et affichage de la liste d'amis de l'administrateur
document.addEventListener("DOMContentLoaded", function () {
const friendsList = document.getElementById("friendsList");
// Fonction pour chargement et affichage des demandes d'amis
const friendRequestsList = document.getElementById("friendRequestsList");
async function loadFriends() {
try {
const response = await fetch("http://localhost:3000/api/friends", {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
if (!response.ok) {
console.warn("Problème pour obtenir la liste des amis");
alert(
"Problème pour obtenir la liste d'amis. Veuillez réessayer plus tard "
);
return;
}
const data = await response.json();
friendsList.innerHTML = "";
friendRequestsList.innerHTML = "";
if (Array.isArray(data.friends)) {
data.friends.forEach((friend) => {
const friendItem = document.createElement("div");
friendItem.classList.add("col-md-4");
friendItem.innerHTML = \\`<div class="card mb-4"><img class="card-img-top" alt="Photo de profil" src="${friend.profilePictureUrl || "assets/Edouard.png"}"><img class="card-img-top" alt="Photo de profil" src="${friend.profilePictureUrl || "assets/Rose.png"}"><div class="card-body"><h5 class="card-title">${friend.username}</h5><p class="card-text">${friend.fullName}</p>${friend.status === "confirmé"? \<button class="btn btn-danger btn-sm deleteFriendBtn » data-friend-id="${friend.\_id}">Supprimer</button>' : '<button class="btn btn-primary btn-sm acceptFriendRequestBtn » data-friend-id="${friend.\_id}">Accepter l’invitation</button><button class="btn btn-primary btn-sm ignoreFriendRequestBtn » data-friend-id="${friend.\_id}">Ignorer l’invitation</button>'}</div></div>' ; if (friend.status === « confirmé ») {friendsList.appendChild(friendItem) ;} else {friendRequestsList.appendChild(friendItem) ;}}) ; `
// Gestionnaire d'événements pour les boutons de suppression de la liste d'amis de l'administrateur
document.querySelectorAll(".deleteFriendBtn").forEach((button) => {
button.addEventListener("click", async function () {
const friendId = this.getAttribute("data-friend-id");
if (confirm("Etes vous certain de supprimer cet ami?")) {
try {
const response = await fetch(
\http://localhost:3000/api/friends/${friendId}',{method : « DELETE »,headers : {"Content-Type » : « application/json »,},}) ; const data = attendre response.json() ; if (response.ok) {// Message de confirmationconst successMessage = document.getElementById(« friendRemovedMessage ») ; successMessage.classList.remove(« d-none ») ; setTimeout(() => {successMessage.classList.add(« d-none ») ;}, 3000) ; alert(« Ami supprimé avec succès ») ; loadFriends() ;} else {alert(« Erreur lors de la suppression de l’ami : " + data.message) ;}} catch (error) {console.error(« Erreur lors de la suppression de l’ami : « ,error) ; alert(« Erreur lors de la suppression de l’ami : " + error.message) ;}}}) ;}) ;} else {alert(« Erreur lors de la récupération des amis : " + data.message) ;}} catch (error) {console.error(« Erreur lors de la récupération des amis : », error) ; alert(« Erreur lors de la récupération des amis : " + error.message) ;}}`
loadFriends();
});