lilachat-frontend/chat.js

89 lines
2.4 KiB
JavaScript

// VARIABLES
let messageCount = 0;
let username = localStorage.getItem('username');
const form = document.querySelector('form');
// SEND A MESSAGE
// GRABS MESSAGE FROM FORM & SENDS
form.addEventListener("submit", async function (event) {
event.preventDefault();
const formData = new FormData(form);
formMessage = formData.get('message').toString();
//CHECKS TO SEE IF THE PERSON IS LOGGED IN IN ORDER TO SEND A MESSAGE.
const response = await fetch(`api/token/${username}/`);
const matches = await response.json();
//YES THIS IS CONFUSING I KNOW.
if (matches.status === "ok") {
sendMessage()
} else {
document.querySelector("#errormessage").innerHTML = 'Username and token mismatch. Try logging in again.'
}
})
//SEND MESSAGE FETCH FUNCTION
async function sendMessage() {
sendMessageInfo = { "name": username, "body": formMessage }
fetch('/api/message/send', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(sendMessageInfo),
})
form.reset()
}
// RECIEVE MESSAGES
let messageUpdate = window.setInterval(fetchMessages, 500);
async function fetchMessages() {
const response = await fetch('/api/message/messages.json');
const recievedMessages = await response.json();
document.getElementById("chatbox").innerHTML = ""
for (const message of recievedMessages) {
printText(message.user.bold().toString() + ": " + message.body.toString());
}
if (recievedMessages.length != messageCount) {
let scroll = document.getElementById("chatbox");
scroll.scrollTop = scroll.scrollHeight;
}
messageCount = recievedMessages.length;
}
// FUNCTION TO PRINT MESSAGES IN THE CHAT BOX
function printText(text) {
let p = document.createElement("p");
const div = document.getElementById("chatbox");
div.appendChild(p)
p.innerHTML = text
}
//LOGGED IN STUFF
//TODO ADD CHECK TO SEE IF USERNAME AND TOKEN MATCHES
function loggedIn() {
username = localStorage.getItem('username');
if (username === null) {
document.querySelector("#loggeduser").innerHTML = 'You are not logged in'
} else {
document.querySelector("#loggeduser").innerHTML = `You are logged in as ${username}`
}
}
loggedIn()
//REVIECE USERS PRONOUNS