[WIP] Assiduité : signal_assiduites_hebdo : choix horaires

app/templates/assiduites/pages/signal_assiduites_hebdo.j2

@@ -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 %}