akf-forum/public/js/thread.js

111 lines
3.6 KiB
JavaScript
Raw Normal View History

2022-08-11 01:36:53 +03:00
import request from "./request.js";
2022-08-27 14:08:28 +03:00
const message_div = document.getElementById("messages");
const messages_raw = await fetch(`/api/threads/${message_div.getAttribute("value")}/messages/`).then(res => res.json());
for (const message of messages_raw)
renderMessage(message);
2022-08-11 17:55:48 +03:00
function renderMessage(message) {
const messageElement = document.createElement("div");
messageElement.classList.add("message");
messageElement.setAttribute("id", "message-" + message.id);
2022-08-11 17:55:48 +03:00
messageElement.innerHTML = `
<h3 style="float:right;">${new Date(message.time).toLocaleString()}</h3>
2022-08-11 17:55:48 +03:00
<h2>
2022-08-27 14:08:28 +03:00
<img class="circle" src="${message.author.avatar}" alt="${message.author.name}">
<a href="/users/${message.author.id}"> ${message.author.name}</a>:
2022-08-11 17:55:48 +03:00
</h2>
<p>${message.content.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&#39;").replaceAll("\n", "<br>")}</p><br>
2022-08-11 17:55:48 +03:00
<div id="message-delete-${message.id}">
2022-08-27 14:08:28 +03:00
${/* if */!message.deleted ?
`
<a onclick="delete_message('${message.id}');">DELETE</a>
<a onclick="edit_message('${message.id}');">EDIT</a>
` /* else */ :
`<h3 style=\"display:inline;\">This message has been deleted</h3>
<a onclick="undelete_message('${message.id}');">UNDELETE</a>
`
}
2022-08-11 17:55:48 +03:00
</div>
<div style="float: right;">
2022-08-27 14:08:28 +03:00
<h3 id="count${message.id}" style="display:inline;">0</h3>
<a onclick="react('${message.id}', 'like');">+🔼</a>
<a onclick="react('${message.id}', 'dislike');">-🔽</a>
2022-08-11 17:55:48 +03:00
</div>
`;
2022-08-27 14:08:28 +03:00
message_div.appendChild(messageElement);
message_div.innerHTML += "<br>";
2022-08-11 17:55:48 +03:00
};
2022-08-27 14:08:28 +03:00
window.scrollTo(0, document.body.scrollHeight);
2022-08-11 17:55:48 +03:00
/**
* Message Sender
*/
document.getElementById("send").addEventListener("submit", async e => {
2022-08-11 00:38:44 +03:00
e.preventDefault();
const form = e.target;
const data = new FormData(form);
2022-08-11 01:36:53 +03:00
request("/api/messages", "POST", { threadID: data.get("threadID"), content: data.get("content") })
2022-08-11 00:38:44 +03:00
.then(res => {
2022-08-11 01:36:53 +03:00
if (!res) return;
2022-08-11 00:38:44 +03:00
form.reset();
res.reactCount = 0;
renderMessage(res);
2022-08-11 17:55:48 +03:00
});
});
2022-08-11 00:38:44 +03:00
2022-08-11 17:55:48 +03:00
/**
2022-08-27 14:08:28 +03:00
* OTHER FUNCTIONS
2022-08-11 17:55:48 +03:00
*/
2022-08-24 23:10:29 +03:00
2022-08-27 14:08:28 +03:00
async function delete_thread(id) {
const response = await request("/api/threads/" + id + "/delete");
if (response.deleted) {
alert("Thread deleted");
location.reload();
}
}
async function undelete_thread(id) {
const response = await request("/api/threads/" + id + "/undelete");
if (!response.deleted) {
alert("Thread undeleted");
location.reload();
}
}
async function undelete_message(id) {
const response = await request(`/api/messages/${id}/undelete`);
if (!response.deleted)
document.getElementById("message-delete-" + id).innerHTML = `<a onclick=\"delete_message('${id}');\">DELETE</a>`;
}
async function delete_message(id) {
const response = await request(`/api/messages/${id}/delete`);
if (response.deleted) {
alert("Message deleted");
document.getElementById("message-delete-" + id).innerHTML = `
<h3 style=\"display:inline;\">This message has been deleted</h3>
<a onclick="undelete_message('${id}');">UNDELETE</a>`;// ADMIN PERM FIX
}
}
async function react(id, type) {
const res = await request(`/api/messages/${id}/react/${type}`)
document.getElementById(`count${id}`).innerHTML = res.reactCount;
}
window.delete_message = delete_message;
window.undelete_message = undelete_message;
window.react = react;
window.delete_thread = delete_thread;
window.undelete_thread = undelete_thread;