55 lines
1.5 KiB
Handlebars
55 lines
1.5 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="en">
|
|
{{> head}}
|
|
<body>
|
|
{{> header}}
|
|
|
|
<div class="category_list">
|
|
{{#each categories}}
|
|
{{>category_entry}}
|
|
{{/each}}
|
|
</div>
|
|
|
|
<script>
|
|
function toggle_category(id) {
|
|
// Find out whether the button is in active (play) or inactive (paused) state
|
|
let toggled_class = "category_button_toggled";
|
|
let display_none_class = "display_none";
|
|
let toggle_cl = document.getElementById("toggle-button-" + id).classList;
|
|
let bump_cl = document.getElementById("bump-button-" + id).classList;
|
|
let active = toggle_cl.contains(toggled_class);
|
|
|
|
// Get the corresponding route to activate/inactivate the category
|
|
let url;
|
|
if(active) {
|
|
url = "/api/category/" + id + "/end_session";
|
|
toggle_cl.remove(toggled_class);
|
|
bump_cl.add(display_none_class);
|
|
} else {
|
|
url = "/api/category/" + id + "/start_session";
|
|
toggle_cl.add(toggled_class);
|
|
bump_cl.remove(display_none_class);
|
|
}
|
|
|
|
//var params = "lorem=ipsum&name=alpha";
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("POST", url, true);
|
|
|
|
//Send the proper header information along with the request
|
|
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
|
|
|
xhr.onreadystatechange = function() {
|
|
if(xhr.readyState === XMLHttpRequest.DONE) {
|
|
if(xhr.status != 200) {
|
|
console.error("xhr error", xhr.status, xhr.responseText);
|
|
document.location.reload(false /* don't reset scroll position */);
|
|
}
|
|
}
|
|
};
|
|
|
|
xhr.send();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|