Want to contribute? Fork me on Codeberg.org!
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
42 lines
1.5 KiB
42 lines
1.5 KiB
2 years ago
|
const form = document.getElementById("commentForm");
|
||
|
|
const commentContainer = document.getElementById("comments");
|
||
|
|
const commentContainerHeader = document.getElementById("commentsHeader");
|
||
|
|
form.addEventListener("submit", e => {
|
||
|
|
let data = {};
|
||
|
|
new FormData(form).forEach((value, key) => {
|
||
|
|
data[key] = value === "" ? null : value;
|
||
|
|
});
|
||
|
|
var request = new XMLHttpRequest();
|
||
|
|
request.open("POST", "http:/127.0.0.1:8080");
|
||
|
|
request.send(JSON.stringify(data));
|
||
|
|
request.addEventListener("load", () => {
|
||
|
|
form.querySelector("textarea").value = "";
|
||
|
|
reloadComments()
|
||
|
|
});
|
||
|
|
request.addEventListener("error", () => alert("Comment posting failed!"));
|
||
|
|
e.preventDefault();
|
||
|
|
});
|
||
|
|
|
||
|
|
function reloadComments() {
|
||
|
|
fetch("http://127.0.0.1:8080")
|
||
|
|
.then(response => {
|
||
|
|
return response.json().then(json => {
|
||
|
|
return response.ok ? json : Promise.reject(json);
|
||
|
|
});
|
||
|
|
})
|
||
|
|
.then(comments => {
|
||
|
|
commentContainerHeader.innerHTML = `${comments.length} Comment${comments.length == 1 ? "" : "s"}`;
|
||
|
|
let html = "";
|
||
|
|
if (comments.length == 0) {
|
||
|
|
html = "<p>No comments yet! Be the first to make one.</p>";
|
||
|
|
} else {
|
||
|
|
comments.forEach(comment => {
|
||
|
|
html += `<div><img class="avatar" src="https://www.gravatar.com/avatar/${comment.gravatar}"><div><b>${comment.author ? comment.author : "Anonymous"}</b> commented ${moment(new Date(comment.timestamp * 1000)).fromNow()}:<br><div>${comment.text}</div></div></div>`;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
commentContainer.innerHTML = html;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
reloadComments();
|