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.
244 lines
12 KiB
244 lines
12 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">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
|
|
|
|
<style>
|
|
.table-sm th, .table-sm td {
|
|
padding: 0.3rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
.info-icon {
|
|
font-size: 1.5rem;
|
|
color: #007bff;
|
|
cursor: pointer;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.info-icon:hover {
|
|
color: #0056b3;
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5">
|
|
<!-- Flash-meldingen weergeven -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="alert alert-dismissible fade show mt-3" role="alert">
|
|
{% for category, message in messages %}
|
|
<div class="alert alert-{{ category }} d-flex justify-content-between align-items-center">
|
|
<span>{{ message|safe }}</span>
|
|
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
<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):
|
|
<i class="fas fa-info-circle info-icon" data-toggle="popover" data-content="Deze instelling bepaalt hoe de vervaldatum wordt berekend. Afhankelijk van je keuze wordt de frequentie (Dagen, Weken of Maanden) toegevoegd aan de opgegeven datum:
|
|
|
|
<p>Dagen (D): Voegt het aantal dagen toe.</p>
|
|
<p>Weken (W): Voegt het aantal weken toe (7 dagen = 1 week).</p>
|
|
<p>Maanden (M): Voegt het aantal maanden toe (30 dagen is 1 maand).</p>
|
|
|
|
<strong>Voorbeeld voor D (Dagen):</strong>
|
|
<p><strong>UOM: D (Dagen), Frequentie: 364 dagen</strong></p>
|
|
<p><strong>Startdatum:</strong> 1 januari 2010</p>
|
|
<p><strong>Resultaat:</strong> 31 december 2010</p>
|
|
<p>In dit geval wordt 364 dagen toegevoegd aan de datum 1 januari 2010, wat resulteert in 31 december 2010.</p>
|
|
|
|
|
|
<strong>Voorbeeld voor W (Weken):</strong>
|
|
<p><strong>UOM: W (Weken), Frequentie: 52 weken</strong></p>
|
|
<p><strong>Startdatum:</strong> 1 januari 2010</p>
|
|
<p><strong>Resultaat:</strong> 31 december 2010</p>
|
|
<p>In dit geval wordt 52 weken (364 dagen) toegevoegd aan de datum 1 januari 2010, wat resulteert in 31 december 2010.</p>
|
|
|
|
<strong>Voorbeeld voor M (Maanden):</strong>
|
|
<p><strong>UOM: M (Maanden), Frequentie: 12 maanden</strong></p>
|
|
<p><strong>Startdatum:</strong> 1 januari 2010</p>
|
|
<p><strong>Resultaat:</strong> 1 januari 2011</p>
|
|
<p>In dit geval wordt 12 maanden toegevoegd aan de datum 1 januari 2010, wat resulteert in 1 januari 2011.</p>
|
|
|
|
|
|
<p><strong>Let op:</strong> Voor de omrekeningen worden maand- en weekwaarden vereenvoudigd, waarbij 1 maand wordt gelijkgesteld aan 30 dagen en 1 week aan 7 dagen.</p>
|
|
"
|
|
"></i>
|
|
|
|
|
|
</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>
|
|
<form id="dateForm" method="POST" action="{{ url_for('download_excel') }}">
|
|
<input type="hidden" name="selected_date" id="selected_date_hidden" value="{{ selected_date or today }}">
|
|
<button type="submit" class="btn btn-success">Download als Excel ({{ selected_date or today }})</button>
|
|
</form>
|
|
|
|
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/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": [[0, "asc"], [3, "asc"], [5, "asc"]],
|
|
"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') }}";
|
|
});
|
|
|
|
$('[data-toggle="popover"]').popover({
|
|
trigger: 'click hover', // Zorg ervoor dat de popover verschijnt bij een klik
|
|
html: true, // Sta HTML toe in de popover
|
|
placement: 'top', // Popover verschijnt boven het icoon
|
|
container: 'body', // De popover wordt in het body-gedeelte geplaatst (voor een betere zichtbaarheid)
|
|
});
|
|
|
|
$('[data-toggle="popover"]').on('mouseenter', function () {
|
|
$(this).popover('show');
|
|
}).on('mouseleave', function () {
|
|
$(this).popover('hide');
|
|
});
|
|
// Wanneer de download-knop wordt ingedrukt, stel dan de geselecteerde datum in
|
|
$(".btn.btn-success").on('click', function (e) {
|
|
var selectedDate = $("#datepicker").val(); // Haal de geselecteerde datum op
|
|
if (selectedDate) {
|
|
$("#selected_date_hidden").val(selectedDate); // Zet de waarde van het verborgen veld
|
|
}
|
|
// Verstuur het formulier
|
|
$("#dateForm").submit();
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|