From 9b6ccf738489904778eed4b6a17ceb679d264b75 Mon Sep 17 00:00:00 2001 From: slawk0 Date: Tue, 10 Sep 2024 21:27:45 +0200 Subject: [PATCH] adding contacts list --- frontend/js/chat.js | 32 +++++++++++++++++++++++++++----- frontend/routes/chat.html | 5 ++--- frontend/stylesheet/chat.css | 4 ++++ 3 files changed, 33 insertions(+), 8 deletions(-) diff --git a/frontend/js/chat.js b/frontend/js/chat.js index 45015bf..e7ddca5 100644 --- a/frontend/js/chat.js +++ b/frontend/js/chat.js @@ -4,6 +4,8 @@ const recipientForm = document.getElementById('recipientForm'); const recipientInput = document.getElementById('recipient'); const messages = document.getElementById('messages'); const messageBox = document.getElementById('messageBox'); +const contacts = document.getElementById('contacts'); + let currentRecipient = null; window.onload = () => { @@ -62,14 +64,27 @@ async function initializeSocket() { document.getElementById('input').placeholder = `Send message as: ${username}`; }) + // Main socket connection, it is displaying all messages in real time socket.on('chat message', (msg) => { console.log('Received message:', msg); - const { username, content, recipient } = msg; - const item = document.createElement('li'); - item.textContent = `${username}: ${content}`; - messages.appendChild(item); - window.scrollTo(0, document.body.scrollHeight); + + // username is sender username! + + // Add and display contact/incoming messages whatever + if(recipient !== currentRecipient && username !== currentUsername) { + const contact = document.createElement('li'); + contact.textContent = username; + contacts.appendChild(contact); + console.log('created contact') + } + // Display messages + if (recipient === currentRecipient || username === currentRecipient) { + const item = document.createElement('li'); + item.textContent = `${username}: ${content}`; + messages.appendChild(item); + window.scrollTo(0, document.body.scrollHeight); + } }); // If not previous messages found on backend @@ -83,6 +98,8 @@ async function initializeSocket() { console.log('There was an error: ', msg) messageBox.innerHTML = msg; }) + + // Recipient form, it request previous messages after submitting recipientForm.addEventListener('submit', (e) => { e.preventDefault(); if (recipientInput.value) { @@ -90,10 +107,13 @@ async function initializeSocket() { localStorage.setItem('currentRecipient', currentRecipient); messages.innerHTML = ''; console.log('Requesting messages for recipient:', currentRecipient); + + // Request previous messages after form submit socket.emit('get messages', currentRecipient); } }); + // Form for sending messages form.addEventListener('submit', (e) => { e.preventDefault(); if (input.value && currentRecipient) { @@ -102,6 +122,8 @@ async function initializeSocket() { input.value = ''; } }); + + // Socket connection for getting previous messages socket.on('messages history', (messagesHistory) => { console.log('Received messages history:', messagesHistory); messages.innerHTML = ''; // Clear previous messages diff --git a/frontend/routes/chat.html b/frontend/routes/chat.html index 12238f5..0adcbdd 100644 --- a/frontend/routes/chat.html +++ b/frontend/routes/chat.html @@ -9,9 +9,8 @@ -
- -
+ +
diff --git a/frontend/stylesheet/chat.css b/frontend/stylesheet/chat.css index 74fc3ef..001ea79 100644 --- a/frontend/stylesheet/chat.css +++ b/frontend/stylesheet/chat.css @@ -131,4 +131,8 @@ p { #messageBox { color: red; +} + +#contacts > li { + color: white; } \ No newline at end of file