website/web/static/js/likes.js
2023-07-18 22:30:29 -07:00

64 lines
2.1 KiB
JavaScript

// Like button handler.
document.addEventListener('DOMContentLoaded', () => {
const red = "has-text-danger";
let busy = false;
// Bind to the like buttons.
(document.querySelectorAll(".nonshy-like-button") || []).forEach(node => {
node.addEventListener("click", (e) => {
e.preventDefault();
if (busy) return;
let $icon = node.querySelector(".icon"),
$label = node.querySelector(".nonshy-likes"),
tableName = node.dataset.tableName,
tableID = node.dataset.tableId,
liking = false;
// Toggle the color of the heart.
if ($icon.classList.contains(red)) {
$icon.classList.remove(red);
} else {
liking = true;
$icon.classList.add(red);
}
// Ajax request to backend.
busy = true;
return fetch("/v1/likes", {
method: "POST",
mode: "same-origin",
cache: "no-cache",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
"name": tableName, // TODO
"id": parseInt(tableID),
"unlike": !liking,
"page": window.location.pathname + window.location.search + window.location.hash,
}),
})
.then((response) => response.json())
.then((data) => {
if (data.StatusCode !== 200) {
window.alert(data.data.error);
return;
}
let likes = data.data.likes;
if (likes === 0) {
$label.innerHTML = "Like";
} else {
$label.innerHTML = `Like (${likes})`;
}
}).catch(resp => {
window.alert(resp);
}).finally(() => {
busy = false;
})
});
});
});