56 lines
1.8 KiB
JavaScript
56 lines
1.8 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) => {
|
||
|
|
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,
|
||
|
|
}),
|
||
|
|
})
|
||
|
|
.then((response) => response.json())
|
||
|
|
.then((data) => {
|
||
|
|
let likes = data.data.likes;
|
||
|
|
if (likes === 0) {
|
||
|
|
$label.innerHTML = "Like";
|
||
|
|
} else {
|
||
|
|
$label.innerHTML = `Like (${likes})`;
|
||
|
|
}
|
||
|
|
}).catch(resp => {
|
||
|
|
window.alert(resp);
|
||
|
|
}).finally(() => {
|
||
|
|
busy = false;
|
||
|
|
})
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|