Skip to content

Commit

Permalink
delete message
Browse files Browse the repository at this point in the history
  • Loading branch information
@Saodus
Saodus committed Dec 14, 2024
1 parent 3af89d5 commit 9bc4b2d
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 123 deletions.
28 changes: 14 additions & 14 deletions app/Http/Controllers/ChatController.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ public function storeMessage(Request $request, $chatId)
return response()->json(['error' => 'Chat not found or unauthorized.'], 404);
}

if ($chat->members->count() == 2) {
if ($chat->members->count() == 2) {
$otherMember = $chat->members->firstWhere('id', '!=', auth()->id());

$friendship = Friendship::where(function ($query) use ($otherMember) {
Expand Down Expand Up @@ -165,25 +165,25 @@ public function storeChat(Request $request)
return redirect()->route('dashboard')->with('success', 'Discussion créée avec succès !');
}

public function leaveChat($chatId)
{
$chat = Chat::find($chatId);
public function leaveChat($chatId)
{
$chat = Chat::find($chatId);

if (!$chat) {
return response()->json(['error' => 'Chat not found.'], 404);
}
if (!$chat) {
return response()->json(['error' => 'Chat not found.'], 404);
}

$chat->users()->detach(auth()->id());
$chat->users()->detach(auth()->id());

return response()->json(['message' => 'You left the chat.']);
}
return response()->json(['message' => 'You left the chat.']);
}

function deleteMessage($messageId)
public function deleteMessage($discussionId, $messageId)
{
$message = Message::find($messageId);
$message = Message::where('id', $messageId)->where('chat_id', $discussionId)->first();

if (!$message) {
return response()->json(['error' => 'Message not found.'], 404);
return response()->json(['error' => 'Message not found or does not belong to this discussion.'], 404);
}

if ($message->user_id !== auth()->id()) {
Expand All @@ -192,6 +192,6 @@ function deleteMessage($messageId)

$message->delete();

return response()->json(['message' => 'Message deleted.']);
return response()->json(['message' => 'Message deleted successfully.']);
}
}
221 changes: 112 additions & 109 deletions resources/views/dashboard.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,125 +24,128 @@
// Fonction pour charger la discussion
function loadChat(chatId, discussionName, discussionPicture, newOpening = true) {
const messagesContainer = document.getElementById('messages');
const messagesContainer = document.getElementById('messages');
// Masquer le placeholder et afficher la zone de chat
document.getElementById('chat-placeholder').style.display = 'none';
document.getElementById('chat-area').style.display = 'flex';
// Masquer le placeholder et afficher la zone de chat
document.getElementById('chat-placeholder').style.display = 'none';
document.getElementById('chat-area').style.display = 'flex';
// Vérifier si la discussion est déjà chargée
if (currentChatId !== chatId) {
// Réinitialiser la liste de tout les messages
allMessages = [];
document.getElementById('messages').innerHTML = '';
// Réinitialiser les messages si on change de discussion
if (currentChatId !== chatId) {
allMessages = [];
messagesContainer.innerHTML = '';
// Récupérer le champ contenant l'id pour la création de capsule via son id et mettre à jour l'action
const hiddenInput = document.getElementById('discussion-id');
if (hiddenInput) hiddenInput.value = chatId;
}
const hiddenInput = document.getElementById('discussion-id');
if (hiddenInput) hiddenInput.value = chatId;
}
// Mettre à jour l'ID de la discussion actuelle
currentChatId = chatId;
currentChatId = chatId;
// Mettre à jour le titre du header si nécessaire
if (newOpening) {
const headerTitle = document.querySelector('.headerTitle');
if (headerTitle) headerTitle.textContent = discussionName;
if (newOpening) {
const headerTitle = document.querySelector('.headerTitle');
if (headerTitle) headerTitle.textContent = discussionName;
const headerImage = document.querySelector('.headerImage');
if (headerImage) headerImage.src = discussionPicture;
}
const headerImage = document.querySelector('.headerImage');
if (headerImage) headerImage.src = discussionPicture;
fetch(`/chat/${chatId}/messages`, {
method: 'GET',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-TOKEN': '{{ csrf_token() }}'
}
})
.then(response => response.json())
.then(data => {
let newMessages = [];
if (JSON.stringify(allMessages) === JSON.stringify(data.messages)) {
return;
} else if (allMessages.length === 0) {
newMessages = data.messages;
} else {
newMessages = data.messages.filter(message => !allMessages.some(m => m.id === message.id));
}
fetch(`/chat/${chatId}/messages`, {
method: 'GET',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'X-CSRF-TOKEN': '{{ csrf_token() }}'
}
})
.then(response => response.json())
.then(data => {
let newMessages = [];
// Si la liste de tout les messages correspond à la liste actuelle
if (JSON.stringify(allMessages) === JSON.stringify(data.messages)) {
return;
} else if (allMessages.length === 0) {
// Si la liste de tout les messages est vide
newMessages = data.messages;
} else {
// Récupérer la liste des messages qui ne sont pas déjà affichés
newMessages = data.messages.filter(message => !allMessages.some(m => m.id === message.id));
const isAtBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop <= messagesContainer.clientHeight + 0.6;
newMessages.forEach(message => {
const isCurrentUser = message.user_id === {{ auth()->id() }};
const messageElement = document.createElement('div');
messageElement.id = `message-${message.id}`;
messageElement.className = `flex ${isCurrentUser ? 'justify-end' : 'justify-start'} mb-2`;
// Construction du contenu du message
let messageContent = `
<p class="max-w-[45%] ${isCurrentUser ? 'secondary-background-app rounded-tl-lg' : 'tertiary-background-app rounded-tr-lg'} text-white p-2 rounded-bl-lg rounded-br-lg">
<span class="text-xs text-white block mb-1 font-bold">${message.user.name}</span>
${message.message}
</p>`;
// Ajout de la poubelle pour les messages de l'utilisateur
if (isCurrentUser) {
messageContent += `
<button onclick="deleteMessage(${message.id}, ${chatId})"
class="ml-2 text-red-500 hover:text-red-700 focus:outline-none"
title="Supprimer le message">
🗑️
</button>`;
}
// Récupérer la position dans le scroll et vérifier si on est tout en bas
// Utile pour savoir si on doit défiler jusqu'en bas après l'ajout des nouveaux messages ou si l'utilisateur est entrain de consulter des anciens messages
const isAtBottom = messagesContainer.scrollHeight - messagesContainer.scrollTop <= messagesContainer.clientHeight + 0.6;
// Parcourir les messages et les ajouter
newMessages.forEach(message => {
const isCurrentUser = message.user_id === {{ auth()->id() }};
const messageElement = document.createElement('div');
messageElement.className = `flex ${isCurrentUser ? 'justify-end' : 'justify-start'} mb-2`;
messageElement.innerHTML = `
<!-- Encadré bleu avec le user_id en première ligne -->
<p class="max-w-[45%] ${isCurrentUser ? 'secondary-background-app rounded-tl-lg' : 'tertiary-background-app rounded-tr-lg'} text-white p-2 rounded-bl-lg rounded-br-lg">
<!-- Affichage du user_id dans l'encadré bleu -->
<span class="text-xs text-white block mb-1 font-bold">${message.user.name}</span>
${message.message}
</p>`;
// Gestion des médias
if (message.media_url) {
let mediaElement =
`
<div class="max-w-[45%] ${isCurrentUser ? 'secondary-background-app rounded-tl-lg' : 'tertiary-background-app rounded-tr-lg'} text-white p-2 rounded-bl-lg rounded-br-lg">
<span class="text-xs text-white block mb-1 font-bold">${message.user.name}</span>`;
if (message.media_url.endsWith('.mp4') || message.media_url.endsWith('.mov')) {
mediaElement += `
<video controls preload="none" class="w-full" poster="{{ asset('source/assets/images/') }}/video.png">
<source src="{{ asset('source/media/') }}/${message.media_url}" type="video/mp4">
</video>`;
} else if (message.media_url.endsWith('.mp3')) {
mediaElement += `
<audio preload="none" controls class="w-full">
<source src="{{ asset('source/media/') }}/${message.media_url}" type="audio/mpeg">
Your browser does not support the audio element.
</audio>`;
} else {
mediaElement += `
<img src="{{ asset('source/media/') }}/${message.media_url}" class="w-full rounded-lg">`;
}
// Ajouter le contenu au conteneur du message
messageElement.innerHTML = messageContent;
// Gestion des médias (si présents)
if (message.media_url) {
let mediaElement = `
<div class="max-w-[45%] ${isCurrentUser ? 'secondary-background-app rounded-tl-lg' : 'tertiary-background-app rounded-tr-lg'} text-white p-2 rounded-bl-lg rounded-br-lg">
<span class="text-xs text-white block mb-1 font-bold">${message.user.name}</span>`;
if (message.media_url.endsWith('.mp4') || message.media_url.endsWith('.mov')) {
mediaElement += `
<video controls preload="none" class="w-full" poster="{{ asset('source/assets/images/') }}/video.png">
<source src="{{ asset('source/media/') }}/${message.media_url}" type="video/mp4">
</video>`;
} else if (message.media_url.endsWith('.mp3')) {
mediaElement += `
<p class="mt-3">
${message.message}
</p>
</div>`;
messageElement.innerHTML = mediaElement;
<audio preload="none" controls class="w-full">
<source src="{{ asset('source/media/') }}/${message.media_url}" type="audio/mpeg">
Your browser does not support the audio element.
</audio>`;
} else {
mediaElement += `
<img src="{{ asset('source/media/') }}/${message.media_url}" class="w-full rounded-lg">`;
}
messagesContainer.appendChild(messageElement);
});
// Mettre à jour la liste de tout les messages
allMessages = data.messages;
// Attendre que tout les médias soient chargés avant de faire défiler
const mediaElements = document.querySelectorAll('img, video');
mediaElements.forEach(mediaElement => {
mediaElement.addEventListener('load', () => {
if (isAtBottom) {
scrollToBottom()
};
});
mediaElement += `
<p class="mt-3">
${message.message}
</p>
</div>`;
messageElement.innerHTML = mediaElement;
}
messagesContainer.appendChild(messageElement);
});
allMessages = data.messages;
const mediaElements = document.querySelectorAll('img, video');
mediaElements.forEach(mediaElement => {
mediaElement.addEventListener('load', () => {
if (isAtBottom) {
scrollToBottom();
}
});
});
if (isAtBottom) {
scrollToBottom();
}
})
.catch(error => console.error('Erreur:', error));
}
// Faire défiler jusqu'en bas (utile si il y a pas de médias)
if (isAtBottom) {
scrollToBottom()
};
})
.catch(error => console.error('Erreur:', error))
}
// Fonction pour démarrer la mise à jour automatique des messages
function startAutoRefresh(intervalTime = 500) {
Expand Down Expand Up @@ -229,26 +232,26 @@ function deleteMessage(messageId, discussionId) {
}
})
.then(response => {
if (response.ok) {
return response.json();
} else {
if (!response.ok) {
console.error("Erreur de suppression, statut:", response.status);
throw new Error("Impossible de supprimer le message.");
}
return response.json();
})
.then(data => {
alert(data.message || "Message supprimé.");
const messageElement = document.getElementById(`message-${messageId}`);
if (messageElement) {
messageElement.remove();
}
location.reload();
loadChat(discussionId, null, null, false);
})
.catch(error => {
console.error("Erreur :", error);
console.error("Erreur lors de la suppression :", error);
alert("Une erreur s'est produite lors de la suppression du message.");
});
}
startAutoRefresh();
</script>

0 comments on commit 9bc4b2d

Please sign in to comment.