Add message deletion functionality to chat interface, including delete buttons for sent messages and improved styling for consistency. Update backend to return message ID upon sending for proper deletion handling.

This commit is contained in:
Max Młynarczyk 2025-05-31 13:41:57 +02:00
parent e1b54ad588
commit d1e5a1e284
3 changed files with 22 additions and 12 deletions

View file

@ -126,7 +126,7 @@
<li><a href="{% url 'chat_with_user' user.username %}">{{ user.username }}</a></li> <li><a href="{% url 'chat_with_user' user.username %}">{{ user.username }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
<!--
<hr class="my-5"> <hr class="my-5">
<h3>Inbox</h3> <h3>Inbox</h3>
@ -137,7 +137,7 @@
<h3>Outbox</h3> <h3>Outbox</h3>
<button class="btn btn-secondary mb-3" onclick="loadOutbox()">Refresh</button> <button class="btn btn-secondary mb-3" onclick="loadOutbox()">Refresh</button>
<ul id="outbox-messages" class="list-group"></ul> <ul id="outbox-messages" class="list-group"></ul>
-->
</div> </div>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
@ -153,9 +153,6 @@
ul.append(`<li class="list-group-item"> ul.append(`<li class="list-group-item">
<strong>${msg.sender}</strong>: ${msg.content}<br> <strong>${msg.sender}</strong>: ${msg.content}<br>
<small>${msg.timestamp}</small> <small>${msg.timestamp}</small>
<form action="/delete/${msg.id}/" method="post" style="display:inline;">
<input type="hidden" name="csrfmiddlewaretoken" value="${$('input[name="csrfmiddlewaretoken"]').val()}">
<button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px;">Delete</button>
</form> </form>
</li>`); </li>`);
}); });
@ -173,7 +170,7 @@
<small>${msg.timestamp}</small> <small>${msg.timestamp}</small>
<form action="/delete/${msg.id}/" method="post" style="display:inline;"> <form action="/delete/${msg.id}/" method="post" style="display:inline;">
<input type="hidden" name="csrfmiddlewaretoken" value="${$('input[name="csrfmiddlewaretoken"]').val()}"> <input type="hidden" name="csrfmiddlewaretoken" value="${$('input[name="csrfmiddlewaretoken"]').val()}">
<button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px;">Delete</button> <button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px; background-color: #dc3545; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer;">Delete</button>
</form> </form>
</li>`); </li>`);
}); });

View file

@ -95,6 +95,12 @@
<div style="margin: 10px 0; text-align: {% if msg.sender == request.user %}right{% else %}left{% endif %};"> <div style="margin: 10px 0; text-align: {% if msg.sender == request.user %}right{% else %}left{% endif %};">
<strong>{{ msg.sender.username }}</strong>: {{ msg.content }}<br> <strong>{{ msg.sender.username }}</strong>: {{ msg.content }}<br>
<small>{{ msg.timestamp }}</small> <small>{{ msg.timestamp }}</small>
{% if msg.sender == request.user %}
<form action="/delete/{{ msg.id }}/" method="post" style="display:inline;">
{% csrf_token %}
<button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px; background-color: #dc3545; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer;">Delete</button>
</form>
{% endif %}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
@ -159,14 +165,20 @@
receiver: receiver, receiver: receiver,
content: content, content: content,
csrfmiddlewaretoken: csrfToken csrfmiddlewaretoken: csrfToken
}, function () { }, function (response) {
$('#message-content').val(''); $('#message-content').val('');
const now = new Date().toLocaleString(); const now = new Date().toLocaleString();
const messageId = response.message_id;
$('#chat-log').append(` $('#chat-log').append(`
<div style="margin: 10px 0; text-align: right;"> <div style="margin: 10px 0; text-align: right;">
<strong>{{ request.user.username }}</strong>: ${content}<br> <strong>{{ request.user.username }}</strong>: ${content}<br>
<small>${now}</small> <small>${now}</small>
<form action="/delete/${messageId}/" method="post" style="display:inline;">
<input type="hidden" name="csrfmiddlewaretoken" value="${csrfToken}">
<button type="submit" class="btn btn-danger btn-sm" style="margin-top:5px; background-color: #dc3545; color: white; border: none; padding: 2px 8px; border-radius: 4px; cursor: pointer;">Delete</button>
</form>
</div> </div>
`); `);

View file

@ -510,8 +510,8 @@ def send_message(request):
reciever_username = request.POST.get('receiver') reciever_username = request.POST.get('receiver')
content = request.POST.get('content') content = request.POST.get('content')
receiver = User.objects.get(username=reciever_username) receiver = User.objects.get(username=reciever_username)
Message.objects.create(sender=request.user, receiver=receiver, content=content) message = Message.objects.create(sender=request.user, receiver=receiver, content=content)
return JsonResponse({"message": "sent"}) return JsonResponse({"message": "sent", "message_id": message.id})
else: else:
return JsonResponse({"message": "error"}) return JsonResponse({"message": "error"})
@ -551,7 +551,8 @@ def delete_message(request, message_id):
if request.method == "POST": if request.method == "POST":
message = get_object_or_404(Message, id=message_id, sender=request.user) message = get_object_or_404(Message, id=message_id, sender=request.user)
message.delete() message.delete()
return redirect('chat') referer = request.META.get("HTTP_REFERER")
return redirect(referer)
@login_required @login_required
def music(request): def music(request):