128 lines
6.4 KiB
HTML
128 lines
6.4 KiB
HTML
{% 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" }}
|
|
{{ datelist|json_script:"datelist" }}
|
|
{{ tappersdata|json_script:"tapperdata" }}
|
|
<script type="text/javascript">
|
|
|
|
var data_headers = JSON.parse(document.getElementById('tapperlist').textContent);
|
|
var data_dates = JSON.parse(document.getElementById('datelist').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("{{ start_date|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_id in data_dates) {
|
|
var date = data_dates[date_id];
|
|
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("{{ end_date|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 %}
|
|
|
|
<a href="{% url 'home' %}" class="btn btn-primary">Terug naar overzicht</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|