1
0
forked from ScoDoc/ScoDoc

[WIP] Assiduité : signal_assiduites_hebdo : choix horaires

This commit is contained in:
Iziram 2024-05-27 23:26:13 +02:00
parent f94998f66b
commit ab9543c310

View File

@ -100,6 +100,65 @@
}
</style>
<style>
.timePicker-modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.5);
}
.timePicker-modal.show {
display: block;
}
.timePicker-modal-content {
background-color: white;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 300px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
text-align: center;
}
.timePicker-close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.timePicker-close:hover,
.timePicker-close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.time-picker-container {
margin: 15px 0;
}
#confirmButton {
padding: 10px 20px;
font-size: 16px;
background-color: var(--color-primary);
color: white;
border: none;
cursor: pointer;
}
#confirmButton:hover {
background-color: var(--color-secondary);
}
</style>
{% endblock styles %}
@ -113,6 +172,24 @@
<script>
function updateTemps(temps){
let matin = document.getElementById("text-matin");
let apresmidi = document.getElementById("text-apresmidi");
matin.textContent = `${temps.matin.debut} à ${temps.matin.fin}`;
apresmidi.textContent = `${temps.apresmidi.debut} à ${temps.apresmidi.fin}`;
}
const temps = {
matin: {
debut: "09:00",
fin: "12:00"
},
apresmidi: {
debut: "13:00",
fin: "17:00"
}
}
document.querySelectorAll(".rbtn").forEach((el)=>{
el.addEventListener("click", (e)=>{
let target = e.target;
@ -127,6 +204,79 @@
});
});
document.getElementById("text-matin").addEventListener("click", (e)=>{
e.preventDefault();
openModal(true);
});
document.getElementById("text-apresmidi").addEventListener("click", (e)=>{
e.preventDefault();
openModal(false);
});
updateTemps(temps);
</script>
<script>
function openModal(morning = true){
let text = morning ? "du matin" : "de l'après-midi";
const modal = document.getElementById("timePickerModal");
modal.querySelector("#timePicker-modal-text").textContent = text;
let time1 = $("#time1");
let time2 = $("#time2");
// Réinitialiser les champs
time1.val("");
time2.val("");
// Définir l'action du bouton de confirmation
document.getElementById("confirmButton").onclick = function(){
let debut = time1.val();
let fin = time2.val();
if (debut == "" || fin == ""){
alert("Veuillez remplir les deux champs");
return;
}
if (debut >= fin){
alert("L'heure de début doit être inférieure à l'heure de fin");
return;
}
if (morning){
temps.matin.debut = debut;
temps.matin.fin = fin;
} else {
temps.apresmidi.debut = debut;
temps.apresmidi.fin = fin;
}
updateTemps(temps);
modal.classList.remove("show");
}
modal.classList.add("show");
}
document.addEventListener("DOMContentLoaded", ()=>{
const modal = document.getElementById("timePickerModal");
modal.querySelector(".timePicker-close").onclick = function() {
modal.classList.remove("show");
}
document.addEventListener('keyup', function(e) {
if (e.key === "Escape" && modal.classList.contains("show")) {
modal.classList.remove("show");
}
});
})
</script>
{% endblock scripts %}
@ -149,7 +299,7 @@
</div>
<h3 id="tableau-dates">
Le matin <a href="#" id="text-matin">9h à 12h</a> et l'après-midi de <a href="#" id="text-apresmidi">13h à 17h</a>
Le matin <a href="#" id="text-matin" title="Cliquer pour modifier les horaires">9h à 12h</a> et l'après-midi de <a href="#" id="text-apresmidi" title="Cliquer pour modifier les horaires">13h à 17h</a>
</h3>
<table>
@ -197,5 +347,22 @@
</tbody>
</table>
<div id="timePickerModal" class="timePicker-modal">
<div class="timePicker-modal-content">
<span class="timePicker-close">&times;</span>
<h2>Choisissez les horaires <span id="timePicker-modal-text"></span></h2>
<div class="time-picker-container">
<label for="time1">Début</label>
<input type="text" id="time1" name="time1" class="timepicker" placeholder="hh:mm">
</div>
<div class="time-picker-container">
<label for="time2">Fin</label>
<input type="text" id="time2" name="time2" class="timepicker" placeholder="hh:mm">
</div>
<span>
<button id="confirmButton">Confirmer</button>
</div>
</div>
{% include "assiduites/widgets/alert.j2" %}
{% endblock app_content %}