ppo:info hovers

celery-integration
peter.fong 9 months ago
parent 068af86fcb
commit c91abcfa8c

@ -1,10 +1,9 @@
# Gebruik een officiële Python-image als basis
FROM python:3.9-slim
RUN apt-get update && apt-get -y install cron nano procps libmariadb-dev
RUN apt-get update && apt-get -y install cron nano procps
RUN apt-get update && apt-get install -y \
gcc \
libmariadb-dev \
python3-dev \
&& rm -rf /var/lib/apt/lists/*

Binary file not shown.

@ -7,11 +7,25 @@
<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>
@ -39,7 +53,39 @@
<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>
<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 %}>
@ -110,8 +156,9 @@
</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://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>
@ -169,8 +216,18 @@
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

Loading…
Cancel
Save