72 lines
2.6 KiB
Handlebars
72 lines
2.6 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description" content="">
|
|
|
|
<link rel="icon" type="image/png" href="/static/icon.png">
|
|
<link rel="stylesheet" href="/static/styles.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono&display=swap">
|
|
|
|
<title>stl</title>
|
|
<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("button-" + id).classList;
|
|
let active = cl.contains(toggled_class);
|
|
|
|
// Get the corresponding route to activate/inactivate the category
|
|
let url;
|
|
if(active) {
|
|
url = "/set_category/" + id + "/inactive";
|
|
cl.remove(toggled_class);
|
|
} else {
|
|
url = "/set_category/" + id + "/active";
|
|
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>
|
|
</head>
|
|
|
|
<body>
|
|
<h1 class="title">stl</h1>
|
|
|
|
{{#each categories}}
|
|
<form action="/toggle_category/{{this.0}}" method="post" id="{{this.0}}"></form>
|
|
{{/each}}
|
|
|
|
<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>
|
|
<div class="category_button_container">
|
|
<button
|
|
id="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>
|