iziram/ScoDoc
1
0
Fork 0
forked from ScoDoc/ScoDoc
Code Issues 12 Pull Requests Projects 1 Releases Wiki Activity

Assiduité : timeline ajout timepicker

Browse Source
This commit is contained in:
Iziram 2024-03-11 11:37:58 +01:00
parent 4386994f7d
commit cce60d432d
1 changed files with 68 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
app/templates/assiduites/widgets/timeline.j2
View File

@ -1,8 +1,14 @@
<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 id="timeline">
<div class="inputs">
<input type="text" name="deb" id="deb" class="timepicker">
<input type="text" name="fin" id="fin" class="timepicker">
</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;