You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
155 lines
7.5 KiB
155 lines
7.5 KiB
<!DOCTYPE html>
|
|
<html lang="nl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Resultaat</title>
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
|
|
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
|
<style>
|
|
.table-sm th, .table-sm td {
|
|
padding: 0.3rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5">
|
|
<h1>Resultaten van de query</h1>
|
|
<a href="{{ url_for('upload_file') }}" class="btn btn-secondary mt-3">Terug naar upload</a>
|
|
<form method="POST" class="mt-3">
|
|
<div class="form-group">
|
|
<label for="datepicker">Selecteer een extrapoleer cutoff ddatum:</label>
|
|
<input type="text" id="datepicker" name="selected_date" value="{{ selected_date or today }}" class="form-control w-auto d-inline">
|
|
<div class="form-group">
|
|
<label>Keuze voor frequentie omrekenen (indien UOM D):</label><br>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="keuze_dagen_omrekenen" id="keuze_dagen_omrekenen_D" value="D"
|
|
{% if keuze_dagen_omrekenen == "D" %} checked {% endif %}>
|
|
<label class="form-check-label" for="keuze_dagen_omrekenen_D">Dagen</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="keuze_dagen_omrekenen" id="keuze_dagen_omrekenen_W" value="W"
|
|
{% if keuze_dagen_omrekenen == "W" %} checked {% endif %}>
|
|
<label class="form-check-label" for="keuze_dagen_omrekenen_W">Weken</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="keuze_dagen_omrekenen" id="keuze_dagen_omrekenen_M" value="M"
|
|
{% if keuze_dagen_omrekenen == "M" %} checked {% endif %}>
|
|
<label class="form-check-label" for="keuze_dagen_omrekenen_M">Maanden</label>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Extrapoleer!</button>
|
|
</div>
|
|
</form>
|
|
<a href="{{ url_for('download_excel', x=selected_date) }}" class="btn btn-success">Download als Excel ({{ selected_date }})</a>
|
|
<button id="resetTable" class="btn btn-warning mt-2">Reset tabel</button>
|
|
<table id="resultTable" class="table table-sm table-bordered table-striped mt-3">
|
|
<thead class="thead-dark">
|
|
<tr>
|
|
<th>Object_code</th>
|
|
<th>Object_omschrijving</th>
|
|
<th>Afdeling_object</th>
|
|
<th>PO_Code</th>
|
|
<th>Omschrijving_PO</th>
|
|
<th>Begindatum</th>
|
|
<th>Frequentie</th>
|
|
<th>UOM</th>
|
|
<th>PO_schema_Niet_gebruikt</th>
|
|
<th>Cluster</th>
|
|
<th>Locatie</th>
|
|
<th>Locatie_omschrijving</th>
|
|
<th>Klasse_object</th>
|
|
<th>Categorie</th>
|
|
<th>Overtijd</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for row in result %}
|
|
<tr class="object-row" data-object-code="{{ row['Object_code'] }}"
|
|
style="font-weight: {% if row['Parent'] == '*' %} bold {% else %} normal {% endif %};">
|
|
<td>{{ row['Object_code'] }}</td>
|
|
<td>{{ row['Object_omschrijving'] }}</td>
|
|
<td>{{ row['Afdeling_object'] }}</td>
|
|
<td>{{ row['PO_Code'] }}</td>
|
|
<td>{{ row['Omschrijving_PO'] }}</td>
|
|
<td>{{ row['Begindatum'] }}</td>
|
|
<td>{{ row['Frequentie'] }}</td>
|
|
<td>{{ row['UOM'] }}</td>
|
|
<td>{{ row['PO_schema_Niet_gebruikt'] }}</td>
|
|
<td>{{ row['Cluster'] }}</td>
|
|
<td>{{ row['Locatie'] }}</td>
|
|
<td>{{ row['Locatie_omschrijving'] }}</td>
|
|
<td>{{ row['Klasse_object'] }}</td>
|
|
<td>{{ row['Categorie'] }}</td>
|
|
<td>{{ row['Overtijd'] }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
$("#datepicker").datepicker({
|
|
dateFormat: "yy-mm-dd",
|
|
changeMonth: true,
|
|
changeYear: true
|
|
});
|
|
var table = $('#resultTable').DataTable({
|
|
"paging": true,
|
|
"searching": true,
|
|
"ordering": true,
|
|
"info": true,
|
|
"lengthMenu": [15, 30, 60, 100],
|
|
"order": [],
|
|
"language": {
|
|
"lengthMenu": "Toon _MENU_ resultaten per pagina",
|
|
"zeroRecords": "Geen resultaten gevonden",
|
|
"info": "Pagina _PAGE_ van _PAGES_",
|
|
"infoEmpty": "Geen records beschikbaar",
|
|
"infoFiltered": "(gefilterd uit _MAX_ total records)",
|
|
"search": "Filter:",
|
|
"paginate": {
|
|
"first": "Eerste",
|
|
"last": "Laatste",
|
|
"next": "Volgende",
|
|
"previous": "Vorige"
|
|
}
|
|
}
|
|
});
|
|
function generateColor(objectCode) {
|
|
const hash = Array.from(objectCode).reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
|
const hue = hash % 360;
|
|
const saturation = Math.floor(Math.random() * 10) + 60;
|
|
const lightness = Math.floor(Math.random() * 20) + 40;
|
|
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
|
|
}
|
|
var objectCodeColors = {};
|
|
function applyColors() {
|
|
$('.object-row').each(function () {
|
|
var objectCode = $(this).data('object-code');
|
|
if (!objectCodeColors[objectCode]) {
|
|
objectCodeColors[objectCode] = generateColor(objectCode);
|
|
}
|
|
$(this).css('background-color', objectCodeColors[objectCode]);
|
|
$(this).css("border", "2px solid " + objectCodeColors[objectCode]);
|
|
});
|
|
}
|
|
applyColors();
|
|
table.on('draw', function () {
|
|
applyColors();
|
|
});
|
|
$('#resetTable').on('click', function () {
|
|
window.location.href = "{{ url_for('show_result') }}";
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|