lilachat-frontend/chat.js

89 lines
2.4 KiB
JavaScript
Raw Normal View History

2021-07-22 20:09:02 +00:00
// 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);
2021-07-23 14:30:43 +00:00
formMessage = formData.get('message').toString();
2021-07-22 20:09:02 +00:00
2021-07-24 19:58:53 +00:00
//KINDA UNNECESSARY
2021-07-24 18:27:21 +00:00
//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.'
}
2021-07-22 20:09:02 +00:00
})
//SEND MESSAGE FETCH FUNCTION
async function sendMessage() {
2021-07-23 19:41:55 +00:00
sendMessageInfo = { "name": username, "body": formMessage }
2021-07-22 20:09:02 +00:00
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();
2021-07-24 15:17:41 +00:00
document.getElementById("chatbox").innerHTML = ""
2021-07-22 20:09:02 +00:00
for (const message of recievedMessages) {
2021-07-24 14:10:41 +00:00
printText(message.user.bold().toString() + ": " + message.body.toString());
2021-07-22 20:09:02 +00:00
}
2021-07-24 14:10:41 +00:00
2021-07-22 20:09:02 +00:00
if (recievedMessages.length != messageCount) {
2021-07-24 15:17:41 +00:00
let scroll = document.getElementById("chatbox");
2021-07-22 20:09:02 +00:00
scroll.scrollTop = scroll.scrollHeight;
2021-07-24 14:10:41 +00:00
}
2021-07-22 20:09:02 +00:00
messageCount = recievedMessages.length;
}
// FUNCTION TO PRINT MESSAGES IN THE CHAT BOX
function printText(text) {
let p = document.createElement("p");
2021-07-24 15:17:41 +00:00
const div = document.getElementById("chatbox");
2021-07-22 20:09:02 +00:00
div.appendChild(p)
p.innerHTML = text
}
2021-07-23 06:51:26 +00:00
//LOGGED IN STUFF
//TODO ADD CHECK TO SEE IF USERNAME AND TOKEN MATCHES
2021-07-24 14:10:41 +00:00
function loggedIn() {
2021-07-24 19:58:53 +00:00
if (username === '' || username === null) {
2021-07-24 14:10:41 +00:00
document.querySelector("#loggeduser").innerHTML = 'You are not logged in'
} else {
2021-07-24 19:58:53 +00:00
document.querySelector("#loggeduser").innerHTML = `You are logged in as "${username}"`
2021-07-24 14:10:41 +00:00
}
}
2021-07-24 15:17:41 +00:00
loggedIn()
//REVIECE USERS PRONOUNS