186 lines
8.7 KiB
HTML
186 lines
8.7 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 src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
|
|
<script type="text/javascript">
|
|
document.addEventListener('DOMContentLoaded', (event) => {
|
|
const socket = io();
|
|
socket.emit('join', { username: "{{ username }}" });
|
|
|
|
socket.on('new_message', function(data) {
|
|
const messagesList = document.getElementById('messages');
|
|
const newMessage = document.createElement('div');
|
|
newMessage.classList.add('message');
|
|
newMessage.innerHTML = `<strong>${data.sender}</strong>: ${data.content}<div class="timestamp">${data.timestamp}</div>`;
|
|
messagesList.appendChild(newMessage);
|
|
});
|
|
|
|
socket.on('friend_request', function(data) {
|
|
const friendRequestsList = document.getElementById('friend-requests');
|
|
const newRequest = document.createElement('li');
|
|
newRequest.innerHTML = `
|
|
${data.sender}
|
|
<form method="POST" action="/accept_friend/${data.request_id}">
|
|
<button type="submit">Accept</button>
|
|
</form>
|
|
<form method="POST" action="/reject_friend/${data.request_id}">
|
|
<button type="submit">Reject</button>
|
|
</form>
|
|
`;
|
|
friendRequestsList.appendChild(newRequest);
|
|
checkFriendRequests();
|
|
});
|
|
|
|
socket.on('friend_request_accepted', function(data) {
|
|
const friendList = document.getElementById('friends');
|
|
const newFriend = document.createElement('li');
|
|
newFriend.innerHTML = `
|
|
<div class="status-indicator ${data.online ? 'online' : 'offline'}"></div>
|
|
${data.sender}
|
|
<form class="send-message-form" data-receiver="${data.sender}" method="POST">
|
|
<input type="text" name="content" placeholder="Type a message" required>
|
|
<button type="submit">Send</button>
|
|
</form>
|
|
`;
|
|
friendList.appendChild(newFriend);
|
|
checkFriendRequests();
|
|
});
|
|
|
|
socket.on('user_online', function(data) {
|
|
const friendElements = document.querySelectorAll(`.friend[data-username="${data.username}"] .status-indicator`);
|
|
friendElements.forEach(el => el.classList.remove('offline'));
|
|
friendElements.forEach(el => el.classList.add('online'));
|
|
});
|
|
|
|
socket.on('user_offline', function(data) {
|
|
const friendElements = document.querySelectorAll(`.friend[data-username="${data.username}"] .status-indicator`);
|
|
friendElements.forEach(el => el.classList.remove('online'));
|
|
friendElements.forEach(el => el.classList.add('offline'));
|
|
});
|
|
|
|
const friends = document.querySelectorAll('.friend');
|
|
friends.forEach(friend => {
|
|
friend.addEventListener('click', function() {
|
|
const friendName = this.dataset.username;
|
|
loadMessages(friendName);
|
|
});
|
|
});
|
|
|
|
function loadMessages(friendName) {
|
|
fetch(`/get_messages/${friendName}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
const messagesList = document.getElementById('messages');
|
|
messagesList.innerHTML = '';
|
|
document.getElementById('chat-with').textContent = `Chatting with ${friendName}`;
|
|
document.getElementById('send-message-form').dataset.receiver = friendName;
|
|
data.messages.forEach(msg => {
|
|
const messageElement = document.createElement('div');
|
|
messageElement.classList.add('message');
|
|
messageElement.innerHTML = `<strong>${msg.sender}</strong>: ${msg.content}<div class="timestamp">${msg.timestamp}</div>`;
|
|
messagesList.appendChild(messageElement);
|
|
});
|
|
});
|
|
}
|
|
|
|
function checkFriendRequests() {
|
|
const friendRequestsList = document.getElementById('friend-requests');
|
|
const friendRequestsSection = document.getElementById('friend-requests-section');
|
|
if (friendRequestsList.children.length === 0) {
|
|
friendRequestsSection.style.display = 'none';
|
|
} else {
|
|
friendRequestsSection.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
checkFriendRequests();
|
|
|
|
document.querySelectorAll('.send-message-form').forEach(form => {
|
|
form.addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
const receiver = form.dataset.receiver;
|
|
const content = form.querySelector('input[name="content"]').value;
|
|
const timestamp = new Date().toISOString().slice(0, 19).replace('T', ' ');
|
|
|
|
// Append the message locally
|
|
const messagesList = document.getElementById('messages');
|
|
const newMessage = document.createElement('div');
|
|
newMessage.classList.add('message');
|
|
newMessage.innerHTML = `<strong>{{ username }}</strong>: ${content}<div class="timestamp">${timestamp}</div>`;
|
|
messagesList.appendChild(newMessage);
|
|
|
|
fetch(`/send_message/${receiver}`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ content: content })
|
|
}).then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'Message sent') {
|
|
form.querySelector('input[name="content"]').value = '';
|
|
} else {
|
|
alert('Message sending failed');
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="sidebar">
|
|
<h3>Welcome, {{ username }}</h3>
|
|
<form method="POST" action="{{ url_for('add_friend') }}">
|
|
<label for="friend_username">Add Friend:</label>
|
|
<input type="text" id="friend_username" name="friend_username" required>
|
|
<button type="submit">Add Friend</button>
|
|
</form>
|
|
<a href="{{ url_for('logout') }}" class="btn btn-danger mt-3">Logout</a>
|
|
|
|
<div id="friend-requests-section">
|
|
<h4>Friend Requests</h4>
|
|
<ul id="friend-requests">
|
|
{% for request in friend_requests %}
|
|
<li>
|
|
{{ request.sender.username }}
|
|
<form method="POST" action="{{ url_for('accept_friend', request_id=request.id) }}">
|
|
<button type="submit">Accept</button>
|
|
</form>
|
|
<form method="POST" action="{{ url_for('reject_friend', request_id=request.id) }}">
|
|
<button type="submit">Reject</button>
|
|
</form>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<h4>Friends</h4>
|
|
<ul id="friends">
|
|
{% for friend in friends %}
|
|
<li class="friend" data-username="{{ friend.username }}">
|
|
<div class="status-indicator {{ 'online' if friend.online else 'offline' }}"></div>
|
|
{{ friend.username }}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="chat-container">
|
|
<div class="chat-header">
|
|
<h3 id="chat-with">Select a friend to start chatting</h3>
|
|
</div>
|
|
<div class="messages" id="messages">
|
|
<!-- Messages will be displayed here -->
|
|
</div>
|
|
<form class="send-message-form" id="send-message-form" data-receiver="" method="POST">
|
|
<input type="text" name="content" placeholder="Type a message" required>
|
|
<button type="submit">Send</button>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
</html>
|