|
|
|
@ -5,14 +5,17 @@
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<title>Resultaat</title>
|
|
|
|
<title>Resultaat</title>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap CSS toevoegen -->
|
|
|
|
<!-- Bootstrap CSS -->
|
|
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
|
|
|
|
<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>
|
|
|
|
<style>
|
|
|
|
/* Verklein de fontgrootte en de padding van de tabel */
|
|
|
|
/* Verklein de fontgrootte en de padding van de tabel */
|
|
|
|
.table-sm th, .table-sm td {
|
|
|
|
.table-sm th, .table-sm td {
|
|
|
|
padding: 0.3rem;
|
|
|
|
padding: 0.3rem;
|
|
|
|
font-size: 0.85rem; /* Verklein de tekst */
|
|
|
|
font-size: 0.85rem;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
</head>
|
|
|
|
</head>
|
|
|
|
@ -35,9 +38,10 @@
|
|
|
|
<a href="{{ url_for('download_excel', x=x) }}" class="btn btn-success">
|
|
|
|
<a href="{{ url_for('download_excel', x=x) }}" class="btn btn-success">
|
|
|
|
Download als Excel ({{ x }} jaar)
|
|
|
|
Download als Excel ({{ x }} jaar)
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
|
|
|
|
<button id="resetTable" class="btn btn-warning mt-2">Reset tabel</button>
|
|
|
|
<!-- Resultaat Tabel -->
|
|
|
|
|
|
|
|
<table class="table table-sm table-bordered table-striped mt-3">
|
|
|
|
<!-- Resultaat Tabel met ID voor DataTables -->
|
|
|
|
|
|
|
|
<table id="resultTable" class="table table-sm table-bordered table-striped mt-3">
|
|
|
|
<thead class="thead-dark">
|
|
|
|
<thead class="thead-dark">
|
|
|
|
<tr>
|
|
|
|
<tr>
|
|
|
|
<th>Object_code</th>
|
|
|
|
<th>Object_code</th>
|
|
|
|
@ -54,11 +58,12 @@
|
|
|
|
<th>Locatie_omschrijving</th>
|
|
|
|
<th>Locatie_omschrijving</th>
|
|
|
|
<th>Klasse_object</th>
|
|
|
|
<th>Klasse_object</th>
|
|
|
|
<th>Categorie</th>
|
|
|
|
<th>Categorie</th>
|
|
|
|
|
|
|
|
<th>Overtijd</th>
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
<tbody>
|
|
|
|
{% for row in result %}
|
|
|
|
{% for row in result %}
|
|
|
|
<tr>
|
|
|
|
<tr class="object-row" data-object-code="{{ row['Object_code'] }}">
|
|
|
|
<td>{{ row['Object_code'] }}</td>
|
|
|
|
<td>{{ row['Object_code'] }}</td>
|
|
|
|
<td>{{ row['Object_omschrijving'] }}</td>
|
|
|
|
<td>{{ row['Object_omschrijving'] }}</td>
|
|
|
|
<td>{{ row['Afdeling_object'] }}</td>
|
|
|
|
<td>{{ row['Afdeling_object'] }}</td>
|
|
|
|
@ -73,16 +78,88 @@
|
|
|
|
<td>{{ row['Locatie_omschrijving'] }}</td>
|
|
|
|
<td>{{ row['Locatie_omschrijving'] }}</td>
|
|
|
|
<td>{{ row['Klasse_object'] }}</td>
|
|
|
|
<td>{{ row['Klasse_object'] }}</td>
|
|
|
|
<td>{{ row['Categorie'] }}</td>
|
|
|
|
<td>{{ row['Categorie'] }}</td>
|
|
|
|
|
|
|
|
<td>{{ row['Overtijd'] }}</td>
|
|
|
|
</tr>
|
|
|
|
</tr>
|
|
|
|
{% endfor %}
|
|
|
|
{% endfor %}
|
|
|
|
</tbody>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap JS toevoegen -->
|
|
|
|
<!-- Bootstrap JS -->
|
|
|
|
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
|
|
|
|
<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://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://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>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
</html>
|
|
|
|
|