hulthe/stl
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make bump session button pretty

Browse Source
This commit is contained in:
Joakim Hulthe
2021-04-30 16:56:04 +02:00
parent a680c4abaa
commit 766fd30842
10 changed files with 192 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
server/templates/category_entry.hbs
View File

@ -4,14 +4,34 @@
style="background-color: {{this.category.color}}"
></div>
<span class="category_name">{{this.category.name}}</span>
{{#if this.category.started}}
<form action="/api/category/{{@key}}/bump_session/minutes/5", method="post">
<button style="height: 100%; color: green;" type="submit">+5</button>
</form>
{{/if}}
<div class="category_button_container">
{{#if this.category.started}}
<form
action="/category/{{@key}}/bump_session/minutes/5"
id="bump-form-{{@key}}"
method="post"></form>
<button
class="category_bump_button"
form="bump-form-{{@key}}"
type="submit">+5m</button>
{{/if}}
<!-- without this extra tag, every even noscript tag seems to not trigger -->
<!-- what is even happening help -->
<noscript></noscript>
<noscript>
<form
{{#if this.category.started}}
action="/category/{{@key}}/end_session"
{{else}}
action="/category/{{@key}}/start_session"
{{/if}}
id="toggle-form-{{@key}}"
method="post"></form>
</noscript>
<button
id="toggle-button-{{@key}}"
type="submit"
form="toggle-form-{{@key}}"
onClick="toggle_category('{{@key}}')"
{{#if this.category.started}}
class="category_button category_button_toggled"

2
server/templates/head.hbs
View File

@ -2,7 +2,9 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<!--
<meta http-equiv="Content-Security-Policy" content="script-src 'unsafe-inline'">
-->
<link rel="icon" type="image/svg+xml" href="/static/icon.svg">
<link rel="stylesheet" href="/static/styles/common.css">

23
server/templates/index.hbs
View File

@ -2,6 +2,14 @@
<html lang="en">
{{> head}}
<body>
{{> header}}
<ul class="striped_list">
{{#each categories}}
{{>category_entry}}
{{/each}}
</ul>
<script>
function toggle_category(id) {
// Find out whether the button is in active (play) or inactive (paused) state
@ -26,16 +34,15 @@
//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) {
console.log(xhr.status, xhr.responseText);
document.location.reload(false /* don't reset scroll position */);
}
};
xhr.send();
}
</script>
{{> header}}
<ul class="striped_list">
{{#each categories}}
{{>category_entry}}
{{/each}}
</ul>
</body>
</html>

2
server/templates/stats_chart.hbs
View File

@ -19,7 +19,7 @@
</h2>
<h2>Senaste veckorna:</h2>
<div class="cal">
{{#each calendar.days}}
{{#each calendar.weeks}}
<div class="cal_col">
{{#each this}}
{{#if this}}