app/templates/assiduites/widgets/timeline.j2

@@ -1,8 +1,14 @@
-<div class="timeline-container">
+<div id="timeline">
-    <div class="period" style="left: 0%; width: 20%">
+    <div class="inputs">
-        <div class="period-handle left"></div>
+        <input type="text" name="deb" id="deb" class="timepicker">
-        <div class="period-handle right"></div>
+        <input type="text" name="fin" id="fin" class="timepicker">
-        <div class="period-time">Time</div>
+    </div>
+    <div class="timeline-container">
+        <div class="period" style="left: 0%; width: 20%">
+            <div class="period-handle left"></div>
+            <div class="period-handle right"></div>
+            <div class="period-time">Time</div>
+        </div>
     </div>
 </div>
 <script>
@@ -87,6 +93,12 @@
         const text = `${deb} - ${fin}`
         periodTimeLine.querySelector('.period-time').textContent = text;
 
+        //Mise à jour des inputs
+        try{
+            $('#deb').val(deb);
+            $('#fin').val(fin);
+        }catch{}
+
     }
 
     function timelineMainEvent(event) {
@@ -176,6 +188,25 @@
         func_call = callback;
         timelineContainer.addEventListener("mousedown", (e) => { timelineMainEvent(e) });
         timelineContainer.addEventListener("touchstart", (e) => { timelineMainEvent(e) });
+
+        const updateFromInputs = ()=>{
+            let deb = $('#deb').val();
+            let fin = $('#fin').val();
+            if (deb != '' && fin != '') {
+                deb = fromTime(deb);
+                fin = fromTime(fin);
+                try {
+                    setPeriodValues(deb, fin);
+                } catch {
+                    setPeriodValues(...getPeriodValues());
+                }
+            }
+        }
+
+        $('#deb').data('TimePicker').options.change = updateFromInputs;
+        $('#fin').data('TimePicker').options.change = updateFromInputs;
+
+        updatePeriodTimeLabel();
     }
 
     function adjustPeriodPosition(newLeft, newWidth) {
@@ -204,7 +235,7 @@
         const computedValues = [Math.max(startValue, t_start), Math.min(t_end, endValue)];
 
         if (computedValues[0] > t_end || computedValues[1] < t_start) {
-            return [t_start, min(t_end, t_start + period_default)];
+            return [t_start, Math.min(t_end, t_start + period_default)];
         }
 
         if (computedValues[1] - computedValues[0] <= tick_delay && computedValues[1] < t_end - tick_delay) {
@@ -262,6 +293,22 @@
         return hours + minutes / 60
     }
 
+    function getPeriodAsDate(){
+        let [deb, fin] = getPeriodValues();
+        deb = numberToTime(deb);
+        fin = numberToTime(fin);    
+
+        const dateStr = $("#date")
+        .datepicker("getDate")
+        .format("yyyy-mm-dd")
+        .substring(0, 10);
+
+        return {
+            deb: new Date(`${dateStr}T${deb}`),
+            fin: new Date(`${dateStr}T${fin}`)
+        }
+    }
+
     createTicks();
 
     setPeriodValues(t_start, t_start + period_default);
@@ -277,6 +324,21 @@
 
 </script>
 <style>
+
+    #timeline {
+        display: flex;
+        justify-content: start;
+    }
+
+    .inputs {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: 5px;
+        margin-bottom: 10px;
+        width: 5em;
+    }
+
     .timeline-container {
         width: 75%;
         margin-left: 25px;