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.
166 lines
7.2 KiB
166 lines
7.2 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>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
|
|
|
|
<!-- DataTables CSS -->
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
|
|
|
|
<style>
|
|
/* Verklein de fontgrootte en de padding van de tabel */
|
|
.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>
|
|
|
|
<!-- Link terug naar uploadpagina -->
|
|
<a href="{{ url_for('upload_file') }}" class="btn btn-secondary mt-3">Terug naar upload</a>
|
|
|
|
<!-- Formulier voor het instellen van x -->
|
|
<form method="POST" class="mt-3">
|
|
<div class="form-group">
|
|
<label for="x">Aantal jaren vooruitkijken (x):</label>
|
|
<input type="number" id="x" name="x" value="{{ x }}" min="1" class="form-control w-auto d-inline">
|
|
<button type="submit" class="btn btn-primary">Update</button>
|
|
</div>
|
|
</form>
|
|
|
|
<a href="{{ url_for('download_excel', x=x) }}" class="btn btn-success">
|
|
Download als Excel ({{ x }} jaar)
|
|
</a>
|
|
<button id="resetTable" class="btn btn-warning mt-2">Reset tabel</button>
|
|
|
|
<!-- Resultaat Tabel met ID voor DataTables -->
|
|
<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>Vervaldatum</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'] }}">
|
|
<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['Vervaldatum'] }}</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>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<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>
|
|
|
|
<!-- DataTables JS -->
|
|
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
// Initialiseer de DataTable, maar zonder standaard sortering
|
|
var table = $('#resultTable').DataTable({
|
|
"paging": true, // Activeer paginering
|
|
"searching": true, // Activeer zoekfunctionaliteit
|
|
"ordering": true, // Activeer sorteren
|
|
"info": true, // Toon informatie over het aantal rijen
|
|
"lengthMenu": [10, 25, 50, 100], // Aantal rijen per pagina
|
|
"order": [], // Geen standaard sortering bij het laden
|
|
"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": "Zoeken:",
|
|
"paginate": {
|
|
"first": "Eerste",
|
|
"last": "Laatste",
|
|
"next": "Volgende",
|
|
"previous": "Vorige"
|
|
}
|
|
}
|
|
});
|
|
|
|
// Functie om een unieke kleur te genereren voor elke Object_code
|
|
function generateColor(objectCode) {
|
|
const hash = Array.from(objectCode).reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
|
const hue = hash % 360; // Kleurtoewijzing op basis van de sum van char codes
|
|
|
|
// Willekeurige verzadiging en lichtheid voor meer variatie
|
|
const saturation = Math.floor(Math.random() * 10) + 60; // Verhouding van 60% tot 100%
|
|
const lightness = Math.floor(Math.random() * 20) + 40; // Verhouding van 40% tot 60%
|
|
|
|
return `hsl(${hue}, ${saturation}%, ${lightness}%)`; // HSL-kleur met variabele verzadiging en lichtheid
|
|
}
|
|
|
|
// Highlight rijen met dezelfde Object_code en dynamisch gegenereerde kleur
|
|
var objectCodeColors = {}; // Opslag voor de gegenereerde kleuren per Object_code
|
|
|
|
function applyColors() {
|
|
$('.object-row').each(function () {
|
|
var objectCode = $(this).data('object-code');
|
|
if (!objectCodeColors[objectCode]) {
|
|
objectCodeColors[objectCode] = generateColor(objectCode); // Genereer een nieuwe kleur
|
|
}
|
|
// Toepassen van de dynamische kleur
|
|
$(this).css('background-color', objectCodeColors[objectCode]);
|
|
});
|
|
}
|
|
|
|
// Kleurtoewijzing toepassen bij het eerste laden van de DataTable
|
|
applyColors();
|
|
|
|
// Herbereken de kleuren telkens na een zoek- of filteractie
|
|
table.on('draw', function () {
|
|
applyColors();
|
|
});
|
|
|
|
// Resetknop functionaliteit
|
|
$('#resetTable').on('click', function () {
|
|
table.search('').columns().search('').draw(); // Verwijdert alle filters
|
|
table.order([0, 'asc']).draw(); // Reset sortering (eerste kolom, oplopend)
|
|
table.page(0).draw('page'); // Ga terug naar de eerste pagina
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|