Add stats_single page & header with links
This commit is contained in:
@ -1,39 +1,28 @@
|
||||
<!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="">
|
||||
{{> head}}
|
||||
<body>
|
||||
<h1 class="title">stl</h1>
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/static/icon.svg">
|
||||
<link rel="stylesheet" href="/static/styles/common.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono&display=swap">
|
||||
|
||||
<title>stl</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 class="title">stl</h1>
|
||||
|
||||
<div>
|
||||
<a href="/history">tillbaka</a>
|
||||
<br>
|
||||
<br>
|
||||
<form action="/session/{{session_id}}/edit" method="post">
|
||||
<input type="hidden" id="category" name="category" value="{{session.category}}">
|
||||
<input type="hidden" id="deleted" name="deleted" value="{{session.deleted}}">
|
||||
<span>Started:</span>
|
||||
<input type="text" id="started" name="started" value="{{pretty_datetime session.started}}"></input>
|
||||
<br>
|
||||
<span>Ended:</span>
|
||||
<input type="text" id="ended" name="ended" value="{{pretty_datetime session.ended}}"></input>
|
||||
<br>
|
||||
<button type="submit">spara</button>
|
||||
</form>
|
||||
<br>
|
||||
<form action="/session/{{this.session_id}}/delete" method="post">
|
||||
<button type="submit">ta bort</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
<div>
|
||||
<a href="/history">tillbaka</a>
|
||||
<br>
|
||||
<br>
|
||||
<form action="/session/{{session_id}}/edit" method="post">
|
||||
<input type="hidden" id="category" name="category" value="{{session.category}}">
|
||||
<input type="hidden" id="deleted" name="deleted" value="{{session.deleted}}">
|
||||
<span>Started:</span>
|
||||
<input type="text" id="started" name="started" value="{{pretty_datetime session.started}}"></input>
|
||||
<br>
|
||||
<span>Ended:</span>
|
||||
<input type="text" id="ended" name="ended" value="{{pretty_datetime session.ended}}"></input>
|
||||
<br>
|
||||
<button type="submit">spara</button>
|
||||
</form>
|
||||
<br>
|
||||
<form action="/session/{{this.session_id}}/delete" method="post">
|
||||
<button type="submit">ta bort</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
12
templates/head.hbs
Normal file
12
templates/head.hbs
Normal file
@ -0,0 +1,12 @@
|
||||
<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/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="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono&display=swap">
|
||||
|
||||
<title>stl</title>
|
||||
</head>
|
||||
7
templates/header.hbs
Normal file
7
templates/header.hbs
Normal file
@ -0,0 +1,7 @@
|
||||
<h1 class="title">
|
||||
<a href="/stats">🗠</a>
|
||||
-
|
||||
<a href="/">stl</a>
|
||||
-
|
||||
<a href="/history">🕮</a>
|
||||
</h1>
|
||||
@ -1,33 +1,23 @@
|
||||
<!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="">
|
||||
{{> head}}
|
||||
<body>
|
||||
{{> header}}
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/static/icon.svg">
|
||||
<link rel="stylesheet" href="/static/styles/common.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono&display=swap">
|
||||
|
||||
<title>stl</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 class="title">stl</h1>
|
||||
<ul class="striped_list">
|
||||
{{#each entries}}
|
||||
<li class="history_entry">
|
||||
<span class="history_entry_category">{{this.category.name}}</span>
|
||||
<span>under</span>
|
||||
<span class="history_entry_duration">{{pretty_seconds this.duration.secs}}</span>
|
||||
<span>från</span>
|
||||
<span class="history_entry_started">{{pretty_datetime this.session.started}}</span>
|
||||
<span>tills</span>
|
||||
<span class="history_entry_ended">{{pretty_datetime this.session.ended}}</span>
|
||||
<span>---</span>
|
||||
<a href="/session/{{this.session_id}}/edit" class="history_entry_edit_button">ändra</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</body>
|
||||
<ul class="striped_list">
|
||||
{{#each entries}}
|
||||
<li class="history_entry">
|
||||
<span class="history_entry_category">{{this.category.name}}</span>
|
||||
<span>under</span>
|
||||
<span class="history_entry_duration">{{pretty_seconds this.duration.secs}}</span>
|
||||
<span>från</span>
|
||||
<span class="history_entry_started">{{pretty_datetime this.session.started}}</span>
|
||||
<span>tills</span>
|
||||
<span class="history_entry_ended">{{pretty_datetime this.session.ended}}</span>
|
||||
<span>---</span>
|
||||
<a href="/session/{{this.session_id}}/edit" class="history_entry_edit_button">ändra</a>
|
||||
</li>
|
||||
{{/each}}
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,72 +1,62 @@
|
||||
<!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="">
|
||||
{{> 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);
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/static/icon.svg">
|
||||
<link rel="stylesheet" href="/static/styles/common.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono&display=swap">
|
||||
// Get the corresponding route to activate/inactivate the category
|
||||
let url;
|
||||
if(active) {
|
||||
url = "/category/" + id + "/end_session";
|
||||
cl.remove(toggled_class);
|
||||
} else {
|
||||
url = "/category/" + id + "/start_session";
|
||||
cl.add(toggled_class);
|
||||
}
|
||||
|
||||
<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("toggle-button-" + id).classList;
|
||||
let active = cl.contains(toggled_class);
|
||||
//var params = "lorem=ipsum&name=alpha";
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("POST", url, true);
|
||||
|
||||
// Get the corresponding route to activate/inactivate the category
|
||||
let url;
|
||||
if(active) {
|
||||
url = "/category/" + id + "/end_session";
|
||||
cl.remove(toggled_class);
|
||||
} else {
|
||||
url = "/category/" + id + "/start_session";
|
||||
cl.add(toggled_class);
|
||||
}
|
||||
//Send the proper header information along with the request
|
||||
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||
|
||||
//var params = "lorem=ipsum&name=alpha";
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open("POST", url, true);
|
||||
xhr.send();
|
||||
}
|
||||
</script>
|
||||
|
||||
//Send the proper header information along with the request
|
||||
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||
{{> header}}
|
||||
|
||||
xhr.send();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 class="title">stl</h1>
|
||||
|
||||
<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="/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>
|
||||
<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="/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>
|
||||
|
||||
@ -1,22 +1,11 @@
|
||||
<!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/svg+xml" href="/static/icon.svg">
|
||||
<link rel="stylesheet" href="/static/styles/common.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono&display=swap">
|
||||
|
||||
<title>stl</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 class="title">stl</h1>
|
||||
<h2>Logga in</h2>
|
||||
<form action="/login" method="post">
|
||||
<input type="password" id="password" name="password"></input>
|
||||
</form>
|
||||
</body>
|
||||
{{>head}}
|
||||
<body>
|
||||
<h1 class="title">stl</h1>
|
||||
<h2>Logga in</h2>
|
||||
<form action="/login" method="post">
|
||||
<input type="password" id="password" name="password"></input>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,55 +0,0 @@
|
||||
<!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/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="https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono&display=swap">
|
||||
|
||||
<title>stl</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 class="title">stl</h1>
|
||||
|
||||
{{#each categories_stats}}
|
||||
{{#if this.last_session_start}}
|
||||
<div class="hline"></div>
|
||||
<h2>
|
||||
<span>Kategori:</span>
|
||||
<span>{{this.category.name}}</span>
|
||||
<span style="color: {{this.category.color}};">●</span>
|
||||
</h2>
|
||||
<h2>
|
||||
<span>Senaste session:</span>
|
||||
<span class="history_entry_started">{{pretty_datetime this.last_session_start}}</span>
|
||||
<span>i</span>
|
||||
<span class="history_entry_duration">{{pretty_seconds this.secs_last_session}}</span>
|
||||
</h2>
|
||||
<h2>
|
||||
<span>Senaste veckan:</span>
|
||||
<span class="history_entry_duration">{{pretty_seconds this.secs_last_week}}</span>
|
||||
<span>Senaste månaden:</span>
|
||||
<span class="history_entry_duration">{{pretty_seconds this.secs_last_month}}</span>
|
||||
</h2>
|
||||
<h2>Andel per timme:</h2>
|
||||
<div class="chart_histogram">
|
||||
<div class="chart_histogram_legend">{{this.bars_max}}%</div>
|
||||
{{#each this.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}}%</span>
|
||||
</div>
|
||||
<div class="chart_histogram_col_label">{{this.0}}</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</body>
|
||||
</html>
|
||||
13
templates/stats_all.hbs
Normal file
13
templates/stats_all.hbs
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{{> head}}
|
||||
<body>
|
||||
{{> header}}
|
||||
|
||||
{{#each categories_stats}}
|
||||
{{#if this.last_session_start}}
|
||||
{{> stats_chart this}}
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</body>
|
||||
</html>
|
||||
33
templates/stats_chart.hbs
Normal file
33
templates/stats_chart.hbs
Normal file
@ -0,0 +1,33 @@
|
||||
<div>
|
||||
<div class="hline"></div>
|
||||
<h2>
|
||||
<span>Kategori:</span>
|
||||
<a href="/stats/{{category_id}}">{{category.name}}</a>
|
||||
<span style="color: {{category.color}};">●</span>
|
||||
</h2>
|
||||
<h2>
|
||||
<span>Senaste session:</span>
|
||||
<span class="history_entry_started">{{pretty_datetime last_session_start}}</span>
|
||||
<span>i</span>
|
||||
<span class="history_entry_duration">{{pretty_seconds secs_last_session}}</span>
|
||||
</h2>
|
||||
<h2>
|
||||
<span>Senaste veckan:</span>
|
||||
<span class="history_entry_duration">{{pretty_seconds secs_last_week}}</span>
|
||||
<span>Senaste månaden:</span>
|
||||
<span class="history_entry_duration">{{pretty_seconds secs_last_month}}</span>
|
||||
</h2>
|
||||
<h2>Andel per timme:</h2>
|
||||
<div class="chart_histogram">
|
||||
<div class="chart_histogram_legend">{{bars_max}}%</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}}%</span>
|
||||
</div>
|
||||
<div class="chart_histogram_col_label">{{this.0}}</div>
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
</div>
|
||||
8
templates/stats_single.hbs
Normal file
8
templates/stats_single.hbs
Normal file
@ -0,0 +1,8 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
{{> head}}
|
||||
<body>
|
||||
{{> header}}
|
||||
{{> stats_chart this}}
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user