Initial commit
This commit is contained in:
commit
3a404b8002
GPG key ID:
BCD496FEBA0C6BC1
140 changed files with 31118 additions and 0 deletions
124
templates/detail.html
Normal file
124
templates/detail.html
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
{% load staticfiles form_tools %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Wie heeft de tapperssleutel kwijtgemaakt?</title>
|
||||
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}"/>
|
||||
<link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}"/>
|
||||
<link rel="stylesheet" href="{% static 'css/style.css' %}"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col col-12">
|
||||
<div class="card">
|
||||
<h5 class="card-header">Nou, wie is er het meest incapabel tussen {{ detailform.start_date.value }} en {{ detailform.end_date.value }}?</h5>
|
||||
<div class="card-body">
|
||||
<form class="form-inline" action="{% url 'detail' %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="input-group mb-2 mr-sm-2">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">Van:</div>
|
||||
</div>
|
||||
{{ detailform.start_date|add_class:"form-control" }}
|
||||
</div>
|
||||
<div class="input-group mb-2 mr-sm-2">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">Tot:</div>
|
||||
</div>
|
||||
{{ detailform.end_date|add_class:"form-control" }}
|
||||
</div>
|
||||
<div class="input-group mb-2 mr-sm-2">
|
||||
<button type="submit" class="btn btn-secondary">Filter</button>
|
||||
</div>
|
||||
</form>
|
||||
{% if tappers %}
|
||||
<p>Tsja, dat is eigenlijk wel <b>{{ tappers.0.name }}</b>, die had de sleutel al <b>{{ tappers.0.amount }} keer</b>!</p>
|
||||
<p>Dit zijn alle incapabele mensen in die periode:</p>
|
||||
<table>
|
||||
{% endif %}
|
||||
{% for tapper in tappers %}
|
||||
<tr>
|
||||
<th>{{ tapper.name }}: </th>
|
||||
<td>{{ tapper.amount }} keer</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<p>Niemand in deze periode! Hulde aan de tappers!</p>
|
||||
{% endfor %}
|
||||
{% if tappers %}
|
||||
</table>
|
||||
{% endif %}
|
||||
|
||||
{% if tapperlist %}
|
||||
<!-- Show chart -->
|
||||
<script type="text/javascript" src="{% static 'js/gchart_loader.js' %}"></script>
|
||||
{{ tapperlist|json_script:"tapperlist" }}
|
||||
{{ tappersdata|json_script:"tapperdata" }}
|
||||
<script type="text/javascript">
|
||||
|
||||
var data_headers = JSON.parse(document.getElementById('tapperlist').textContent);
|
||||
var data_content = JSON.parse(document.getElementById('tapperdata').textContent);
|
||||
|
||||
var chartData = [];
|
||||
var headerRow = ['Date'];
|
||||
headerRow = headerRow.concat(data_headers);
|
||||
chartData.push(headerRow);
|
||||
|
||||
// Add first row with all zeroes on start date of form
|
||||
var startDate = new Date("{{ detailform.start_date.value }}");
|
||||
rowData = [startDate];
|
||||
for (var index in data_headers) {
|
||||
if (data_headers[index] !== "Date") {
|
||||
rowData.push(0);
|
||||
}
|
||||
}
|
||||
chartData.push(rowData);
|
||||
|
||||
// Add rest of rows
|
||||
for (var date in data_content) {
|
||||
rowData = [new Date(date)];
|
||||
for (var index in data_headers) {
|
||||
if (data_headers[index] !== "Date") {
|
||||
rowData.push(data_content[date][data_headers[index]]);
|
||||
}
|
||||
}
|
||||
chartData.push(rowData);
|
||||
}
|
||||
|
||||
// Add last row with max values on end date of form
|
||||
var endDate = new Date("{{ detailform.end_date.value }}");
|
||||
rowData = [endDate];
|
||||
for (var index in data_headers) {
|
||||
if (data_headers[index] !== "Date") {
|
||||
rowData.push(data_content[date][data_headers[index]]);
|
||||
}
|
||||
}
|
||||
chartData.push(rowData);
|
||||
|
||||
google.charts.load('current', {'packages':['corechart']});
|
||||
google.charts.setOnLoadCallback(drawChart);
|
||||
function drawChart() {
|
||||
var data = google.visualization.arrayToDataTable(chartData);
|
||||
|
||||
var options = {
|
||||
title: 'Tappersincompetentie',
|
||||
legend: {position: 'right'},
|
||||
vAxis: {format: '0'}
|
||||
};
|
||||
|
||||
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
|
||||
chart.draw(data, options);
|
||||
}
|
||||
</script>
|
||||
<div id="curve_chart" style="width: 900px; height: 500px"></div>
|
||||
{% endif %}
|
||||
|
||||
<a href="{% url 'home' %}" class="btn btn-primary">Terug naar overzicht</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
156
templates/home.html
Normal file
156
templates/home.html
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
{% load staticfiles form_tools %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Wie heeft de tapperssleutel kwijtgemaakt?</title>
|
||||
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}"/>
|
||||
<link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}"/>
|
||||
<link rel="stylesheet" href="{% static 'css/style.css' %}"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col col-12">
|
||||
<div class="card">
|
||||
<h5 class="card-header">Dus, wie heeft de tapperssleutel nu weer kwijt gemaakt?</h5>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="">
|
||||
{% csrf_token %}
|
||||
|
||||
{% if form.errors %}
|
||||
<div class="form-group">
|
||||
{{ form.errors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="form-group">
|
||||
<label for="{{ form.tapper.id_for_label }}">Tapper (<a href="{% url 'new_tapper' %}">Tapper
|
||||
toevoegen?</a>)</label>
|
||||
{{ form.tapper|add_class:"form-control" }}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label for="{{ form.date.id_for_label }}">Datum</label>
|
||||
{{ form.date|add_class:"form-control" }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input class="btn btn-danger" type="submit" value="Wat incapabel."/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col col-12">
|
||||
<div class="card">
|
||||
<h5 class="card-header">En wie is er dan het meest incapabel?</h5>
|
||||
<div class="card-body">
|
||||
<form class="form-inline" action="{% url 'detail' %}" method="post">
|
||||
{% csrf_token %}
|
||||
<div class="input-group mb-2 mr-sm-2">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">Van:</div>
|
||||
</div>
|
||||
{{ detailform.start_date|add_class:"form-control" }}
|
||||
</div>
|
||||
<div class="input-group mb-2 mr-sm-2">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">Tot:</div>
|
||||
</div>
|
||||
{{ detailform.end_date|add_class:"form-control" }}
|
||||
</div>
|
||||
<div class="input-group mb-2 mr-sm-2">
|
||||
<button type="submit" class="btn btn-secondary">Filter</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{% if tappers %}
|
||||
<p>Tsja, dat is eigenlijk wel <b>{{ tappers.0.name }}</b>, die had de sleutel al <b>{{ tappers.0.amount }} keer</b>!</p>
|
||||
<p>En voor de rest zijn deze mensen ook vrij incapabel:</p>
|
||||
<table>
|
||||
{% endif %}
|
||||
{% for tapper in tappers %}
|
||||
<tr>
|
||||
<th>{{ tapper.name }}: </th>
|
||||
<td>{{ tapper.amount }} keer</td>
|
||||
</tr>
|
||||
{% empty %}
|
||||
<p>Niemand in deze periode! Hulde aan de tappers!</p>
|
||||
{% endfor %}
|
||||
{% if tappers %}
|
||||
</table>
|
||||
{% endif %}
|
||||
|
||||
{% if tapperlist %}
|
||||
<!-- Show chart -->
|
||||
<script type="text/javascript" src="{% static 'js/gchart_loader.js' %}"></script>
|
||||
{{ tapperlist|json_script:"tapperlist" }}
|
||||
{{ tappersdata|json_script:"tapperdata" }}
|
||||
<script type="text/javascript">
|
||||
|
||||
var data_headers = JSON.parse(document.getElementById('tapperlist').textContent);
|
||||
var data_content = JSON.parse(document.getElementById('tapperdata').textContent);
|
||||
|
||||
var chartData = [];
|
||||
var headerRow = ['Date'];
|
||||
headerRow = headerRow.concat(data_headers);
|
||||
chartData.push(headerRow);
|
||||
|
||||
// Add first row with all zeroes on start date of form
|
||||
var startDate = new Date("{{ detailform.start_date.value }}");
|
||||
rowData = [startDate];
|
||||
for (var index in data_headers) {
|
||||
if (data_headers[index] !== "Date") {
|
||||
rowData.push(0);
|
||||
}
|
||||
}
|
||||
chartData.push(rowData);
|
||||
|
||||
// Add rest of rows
|
||||
for (var date in data_content) {
|
||||
rowData = [new Date(date)];
|
||||
for (var index in data_headers) {
|
||||
if (data_headers[index] !== "Date") {
|
||||
rowData.push(data_content[date][data_headers[index]]);
|
||||
}
|
||||
}
|
||||
chartData.push(rowData);
|
||||
}
|
||||
|
||||
// Add last row with max values on end date of form
|
||||
var endDate = new Date("{{ detailform.end_date.value }}");
|
||||
rowData = [endDate];
|
||||
for (var index in data_headers) {
|
||||
if (data_headers[index] !== "Date") {
|
||||
rowData.push(data_content[date][data_headers[index]]);
|
||||
}
|
||||
}
|
||||
chartData.push(rowData);
|
||||
|
||||
google.charts.load('current', {'packages':['corechart']});
|
||||
google.charts.setOnLoadCallback(drawChart);
|
||||
function drawChart() {
|
||||
var data = google.visualization.arrayToDataTable(chartData);
|
||||
|
||||
var options = {
|
||||
title: 'Tappersincompetentie',
|
||||
legend: {position: 'right'},
|
||||
vAxis: {format: '0'}
|
||||
};
|
||||
|
||||
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
|
||||
chart.draw(data, options);
|
||||
}
|
||||
</script>
|
||||
<div id="curve_chart" style="width: 900px; height: 500px"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
31
templates/tapper_form.html
Normal file
31
templates/tapper_form.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
{% load staticfiles form_tools %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tapper toevoegen</title>
|
||||
<link rel="stylesheet" href="{% static 'css/bootstrap.css' %}"/>
|
||||
<link rel="stylesheet" href="{% static 'css/bootstrap-datepicker.css' %}"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col col-12">
|
||||
<div class="card">
|
||||
<h5 class="card-header">Tapper toevoegen</h5>
|
||||
<div class="card-body">
|
||||
<form method="POST" action="">
|
||||
{% csrf_token %}
|
||||
<div class="form-group">
|
||||
<label for="{{ form.name.id_for_label }}">Wie is er laks geweest?</label>
|
||||
{{ form.name|add_class:"form-control" }}
|
||||
</div>
|
||||
<input class="btn btn-danger" type="submit" value="Toevoegen"/>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue