@ -7,11 +7,25 @@
< 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" / >
< link rel = "stylesheet" href = "https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" >
< 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 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 >
< style >
.table-sm th, .table-sm td {
.table-sm th, .table-sm td {
padding: 0.3rem;
padding: 0.3rem;
font-size: 0.85rem;
font-size: 0.85rem;
}
}
.info-icon {
font-size: 1.5rem;
color: #007bff;
cursor: pointer;
margin-left: 5px;
}
.info-icon:hover {
color: #0056b3;
}
< / style >
< / style >
< / head >
< / head >
< body >
< body >
@ -39,7 +53,39 @@
< input type = "text" id = "datepicker" name = "selected_date" value = "{{ selected_date or today }}" class = "form-control w-auto d-inline" >
< input type = "text" id = "datepicker" name = "selected_date" value = "{{ selected_date or today }}" class = "form-control w-auto d-inline" >
< div class = "form-group" >
< div class = "form-group" >
< label > Keuze voor frequentie omrekenen (indien UOM D):< / label > < br >
< 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" >
< 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"
< 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 %}>
{% if keuze_dagen_omrekenen == "D" %} checked {% endif %}>
@ -110,8 +156,9 @@
< / table >
< / table >
< / div >
< / div >
< script src = "https://code.jquery.com/jquery-3.6.0.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 js.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://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://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 src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js" > < / script >
< script >
< script >
@ -169,8 +216,18 @@
window.location.href = "{{ url_for('show_result') }}";
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
// Wanneer de download-knop wordt ingedrukt, stel dan de geselecteerde datum in
$(".btn.btn-success").on('click', function (e) {
$(".btn.btn-success").on('click', function (e) {
var selectedDate = $("#datepicker").val(); // Haal de geselecteerde datum op
var selectedDate = $("#datepicker").val(); // Haal de geselecteerde datum op