113 lines
4.6 KiB
HTML
113 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Dashboard</title>
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', (event) => {
|
|
function checkFriendRequests() {
|
|
const friendRequestsList = document.getElementById('friend-requests');
|
|
const friendRequestsSection = document.getElementById('friend-requests-section');
|
|
if (friendRequestsList && friendRequestsSection) {
|
|
if (friendRequestsList.children.length === 0) {
|
|
friendRequestsSection.style.display = 'none';
|
|
} else {
|
|
friendRequestsSection.style.display = 'block';
|
|
}
|
|
}
|
|
}
|
|
|
|
checkFriendRequests();
|
|
|
|
// Add event listeners if elements exist
|
|
const acceptButtons = document.querySelectorAll('.accept-friend-request');
|
|
const rejectButtons = document.querySelectorAll('.reject-friend-request');
|
|
|
|
acceptButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const requestId = this.dataset.requestId;
|
|
fetch(`/accept_friend/${requestId}`, { method: 'POST' })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'Friend request accepted') {
|
|
// Handle UI updates if necessary
|
|
this.closest('.friend-request').remove();
|
|
checkFriendRequests();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
rejectButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
const requestId = this.dataset.requestId;
|
|
fetch(`/reject_friend/${requestId}`, { method: 'POST' })
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'Friend request rejected') {
|
|
// Handle UI updates if necessary
|
|
this.closest('.friend-request').remove();
|
|
checkFriendRequests();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
|
|
const addFriendForm = document.getElementById('add-friend-form');
|
|
if (addFriendForm) {
|
|
addFriendForm.addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
const formData = new FormData(addFriendForm);
|
|
fetch('/add_friend', {
|
|
method: 'POST',
|
|
body: formData
|
|
}).then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'Friend request sent') {
|
|
alert('Friend request sent');
|
|
} else {
|
|
alert('Failed to send friend request');
|
|
}
|
|
});
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
{% include 'sidebar.html' %}
|
|
<div class="content">
|
|
<h4>Friends</h4>
|
|
<ul id="friends-list">
|
|
{% for friend in friends %}
|
|
<li>
|
|
<a href="/chat/{{ friend.id }}">{{ friend.username }}</a>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
<div id="friend-requests-section">
|
|
<h4>Friend Requests</h4>
|
|
<ul id="friend-requests">
|
|
{% for request in friend_requests %}
|
|
<li class="friend-request">
|
|
{{ request.sender.username }}
|
|
<button class="accept-friend-request" data-request-id="{{ request.id }}">Accept</button>
|
|
<button class="reject-friend-request" data-request-id="{{ request.id }}">Reject</button>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h4>Add Friend</h4>
|
|
<form id="add-friend-form" method="POST">
|
|
<input type="text" name="friend_username" placeholder="Friend's Username" required>
|
|
<button type="submit">Add Friend</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|