Display category children & Add calendar stats

This commit is contained in:
2021-04-30 14:48:42 +02:00
parent e8e8f535c2
commit c3870bcded
22 changed files with 759 additions and 338 deletions

View File

@ -0,0 +1,31 @@
<li class="category_entry">
<div class="category_header">
<div class="category_icon"
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">
<button
id="toggle-button-{{@key}}"
onClick="toggle_category('{{@key}}')"
{{#if this.category.started}}
class="category_button category_button_toggled"
{{else}}
class="category_button"
{{/if}}>
</button>
</div>
</div>
{{#if this.children}}
<ul class="category_children striped_list">
{{#each this.children}}
{{> category_entry}}
{{/each}}
</ul>
{{/if}}
</li>

View File

@ -2,10 +2,12 @@
<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">
<link rel="stylesheet" href="/static/styles/charts.css">
<link rel="stylesheet" href="/static/styles/calendar.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono&display=swap">
<title>stl</title>

View File

@ -34,29 +34,8 @@
<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}}
{{>category_entry}}
{{/each}}
</ul>
</body>
</html>

View File

@ -17,14 +17,39 @@
<span>Senaste månaden:</span>
<span class="history_entry_duration">{{pretty_seconds secs_last_month}}</span>
</h2>
<h2>Senaste veckorna:</h2>
<div class="cal">
{{#each calendar.days}}
<div class="cal_col">
{{#each this}}
{{#if this}}
<div class="cal_day tooltip
{{#if this.border_top}}cal_day_border_top{{/if}}
{{#if this.border_left}}cal_day_border_left{{/if}}
{{#if this.border_right}}cal_day_border_right{{/if}}
{{#if this.border_bottom}}cal_day_border_bottom{{/if}}
{{#if this.duration}}cal_day_non_empty{{/if}}"
style="opacity: {{this.weight}}">
{{#if this.duration}}
{{pretty_compact_seconds this.duration}}
<span class="tooltiptext">{{pretty_seconds this.duration}}</span>
{{/if}}
</div>
{{else}}
<div class="cal_day_missing"></div>
{{/if}}
{{/each}}
</div>
{{/each}}
</div>
<h2>Andel per timme:</h2>
<div class="chart_histogram">
<div class="chart_histogram_legend">{{bars_max}}&percnt;</div>
{{#each bars}}
<div class="chart_histogram_col">
<div style="flex-grow: {{this.2}};"></div>
<div class="chart_histogram_col_line chart_col_tooltip" style="flex-grow: {{this.1}};">
<span class="chart_col_tooltiptext">{{this.1}}&percnt;</span>
<div class="chart_histogram_col_line tooltip" style="flex-grow: {{this.1}};">
<span class="tooltiptext">{{this.1}}&percnt;</span>
</div>
<div class="chart_histogram_col_label">{{this.0}}</div>
</div>