akf-forum/public/js/thread.js
2022-08-11 18:15:27 +03:00

112 lines
3.5 KiB
JavaScript

import request from "./request.js";
const messages = document.getElementById("messages");
function renderMessage(message) {
const messageElement = document.createElement("div");
messageElement.classList.add("message");
messageElement.setAttribute("id", "message-" + message.id);
messageElement.innerHTML = `
<h3 style="float:right;">${new Date(message.time).toLocaleString()}</h3>
<h2>
<img class="circle" src=${message.author.avatar} alt=${message.author.name}>
<a href=${"/users/" + message.author.id}> ${message.author.name}</a>:
</h2>
<h2>${message.content}</h2><br>
<div id="message-delete-${message.id}">
${!message.deleted ?
`<form style="display:inline;">
<button id="delete_message" value="${message.id}" type="submit">DELETE</button>
</form>` :
"<h3 style=\"display:inline;\">This message has been deleted</h3>"}
</div>
<div style="float: right;">
<h3 id="count${message.id}" style="display:inline;">${message.reactCount}</h3>
<button style="display:inline;" id="like" value="${message.id}">+🔼</button>
<button style="display:inline;" id="dislike" value="${message.id}" >-🔽</button>
</div>
`;
messages.appendChild(messageElement);
messages.innerHTML += "<br>";
};
/**
* Main Renderer
*/
(async () => {
const { result } = await fetch(`/api/threads/${messages.getAttribute("value")}/messages/`).then(res => res.json());
if (result?.error) {
document.getElementById("messages").innerHTML
+= '<div class="message"><h1>THIS THREAD HAS NOT GOT ANY MESSAGE</h1></div>';
} else
for (const message of result) {
const arr = Object.values(message.react || {})
message.reactCount = arr.filter(Boolean).length - arr.filter(x => !x).length;
renderMessage(message);
}
window.scrollTo(0, document.body.scrollHeight);
})();
/**
* Message Sender
*/
document.getElementById("send").addEventListener("submit", async e => {
e.preventDefault();
const form = e.target;
const data = new FormData(form);
request("/api/messages", "POST", { threadID: data.get("threadID"), content: data.get("content") })
.then(res => {
if (!res) return;
form.reset();
res.result.reactCount = 0;
renderMessage(res.result);
});
});
/**
* Button Listener
*/
document.addEventListener("click", async e => {
// e.preventDefault();
if (e.target.id === "delete_thread") {
const response = await request("/api/threads/" + e.target.value + "/delete");
if (response.result.deleted) {
alert("Thread deleted");
window.location.href = "/threads";
}
} else if (e.target.id === "delete_message") {
e.preventDefault();
const response = await request(`/api/messages/${e.target.value}/delete`);
if (response.result.deleted) {
alert("Message deleted");
document.getElementById("message-delete-" + e.target.value).innerHTML="<h3 style=\"display:inline;\">This message has been deleted</h3>";
}
} /*else if (e.target.id === "edit_thread") {
window.location.href = "/threads/<%= thread.id }/edit";
} */
if (!e.target.id.includes("like")) return;
const res = await request("/api/messages/" + e.target.value + "/react/" + e.target.id)
document.getElementById("count" + e.target.value).innerHTML = res.result;
});