{% 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|date:"Y-m-d" }}");
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|date:"Y-m-d" }}");
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>