63 lines
1.7 KiB
Handlebars
63 lines
1.7 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="en">
|
|
{{> head}}
|
|
<body>
|
|
<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 cl = document.getElementById("toggle-button-" + id).classList;
|
|
let active = cl.contains(toggled_class);
|
|
|
|
// Get the corresponding route to activate/inactivate the category
|
|
let url;
|
|
if(active) {
|
|
url = "/api/category/" + id + "/end_session";
|
|
cl.remove(toggled_class);
|
|
} else {
|
|
url = "/api/category/" + id + "/start_session";
|
|
cl.add(toggled_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.send();
|
|
}
|
|
</script>
|
|
|
|
{{> header}}
|
|
|
|
<ul class="striped_list">
|
|
{{#each categories}}
|
|
<li class="category_entry">
|
|
<div class="category_icon"
|
|
style="background-color: {{this.1.color}}"
|
|
></div>
|
|
<span class="category_name">{{this.1.name}}</span>
|
|
{{#if this.1.started}}
|
|
<form action="/api/category/{{this.0}}/bump_session/minutes/5", method="post">
|
|
<button style="height: 100%; color: green;" type="submit">+5</button>
|
|
</form>
|
|
{{/if}}
|
|
<div class="category_button_container">
|
|
<button
|
|
id="toggle-button-{{this.0}}"
|
|
onClick="toggle_category('{{this.0}}')"
|
|
{{#if this.1.started}}
|
|
class="category_button category_button_toggled"
|
|
{{else}}
|
|
class="category_button"
|
|
{{/if}}>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
</body>
|
|
</html>
|