80 lines
2.6 KiB
JavaScript
80 lines
2.6 KiB
JavaScript
let offset;
|
|
let timelineElement = document.getElementById("messages");
|
|
|
|
function escapeHTML(content) {
|
|
return content.replaceAll("&", "&").replaceAll("<", ">").replaceAll(">", "<");
|
|
}
|
|
|
|
function getMessageHTML(messageJSON, canRespond) {
|
|
return `<div class="message-container" data-message-id="${messageJSON.id}">
|
|
<blockquote class="message">
|
|
<div><b>${messageJSON.from || "Anonymous"}</b> writes:</div>
|
|
<pre class="not-code">${escapeHTML(messageJSON.content)}</pre>
|
|
</blockquote>
|
|
${messageJSON.response ? `<pre class="not-code">${escapeHTML(messageJSON.response)}</pre>` : (
|
|
canRespond ? `
|
|
<div><textarea placeholder="Your response..." maxlength="10000"></textarea></div>
|
|
<div><button onclick="replyTo(${messageJSON.id})">Reply</button></div>
|
|
` : `<i>No response</i>`
|
|
)}
|
|
</div>`;
|
|
}
|
|
|
|
function _updateURL_replaceElement(element, to) {
|
|
let newElement = document.createElement(to);
|
|
newElement.dataset.url = element.dataset.url;
|
|
newElement.dataset.id = element.dataset.id;
|
|
newElement.innerHTML = element.innerHTML;
|
|
newElement.setAttribute("href", element.getAttribute("href"));
|
|
|
|
if (to == "a") {
|
|
newElement.classList.add("not-bold");
|
|
}
|
|
|
|
element.replaceWith(newElement);
|
|
}
|
|
|
|
function updateURL(switchID) {
|
|
let switchElement = document.getElementById("switch").querySelector(`[data-id="${switchID}"]`);
|
|
|
|
for (const el of document.getElementById("switch").querySelectorAll("b")) {
|
|
_updateURL_replaceElement(el, "a");
|
|
}
|
|
|
|
_updateURL_replaceElement(switchElement, "b");
|
|
url = switchElement.dataset.url;
|
|
fetchMessages(true);
|
|
}
|
|
|
|
function fetchMessages(fetchFromStart=false) {
|
|
document.getElementById("refresh").setAttribute("disabled", "");
|
|
timelineElement.innerHTML = "<i>Loading...</i>"
|
|
|
|
fetch(url + (fetchFromStart === true ? "" : `${url.includes("?") ? "&" : "?"}offset=${offset}`))
|
|
.then((response) => (response.json()))
|
|
.then((json) => {
|
|
if (json.success) {
|
|
out = "";
|
|
|
|
if (json.messages.length == 0) {
|
|
out = "<i>No messages</i>";
|
|
} else {
|
|
for (const message of json.messages) {
|
|
out += getMessageHTML(message, json.canRespond);
|
|
offset = message.id;
|
|
}
|
|
}
|
|
|
|
timelineElement.innerHTML = out;
|
|
} else {
|
|
timelineElement.innerText = "Something went wrong!";
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
timelineElement.innerText = `Couldn't fetch timeline: ${err}`;
|
|
document.getElementById("refresh").removeAttribute("disabled");
|
|
});
|
|
}
|
|
|
|
fetchMessages(true);
|
|
document.getElementById("refresh").addEventListener("click", (() => { fetchMessages(true); }));
|