diff --git a/frontend/src/pages/TimeClockPage.jsx b/frontend/src/pages/TimeClockPage.jsx index 473edb5..35e74e2 100644 --- a/frontend/src/pages/TimeClockPage.jsx +++ b/frontend/src/pages/TimeClockPage.jsx @@ -335,6 +335,7 @@ const TimePicker = ({ placeholder = 'Choisir une heure', }) => { const [open, setOpen] = useState(false); + const touchStartY = useRef(null); const [hours = '', minutes = ''] = value ? value.split(':') @@ -363,12 +364,9 @@ const TimePicker = ({ const changeHour = (direction) => { const currentHour = Number(hours || 0); - const currentMinute = Number( - minutes || 0, - ); + const currentMinute = Number(minutes || 0); - let nextHour = - currentHour + direction; + let nextHour = currentHour + direction; if (nextHour < 0) nextHour = 23; if (nextHour > 23) nextHour = 0; @@ -381,13 +379,9 @@ const TimePicker = ({ const changeMinute = (direction) => { const currentHour = Number(hours || 0); - const currentMinute = Number( - minutes || 0, - ); - - let nextMinute = - currentMinute + direction; + const currentMinute = Number(minutes || 0); + let nextMinute = currentMinute + direction; let nextHour = currentHour; if (nextMinute < 0) { @@ -419,7 +413,7 @@ const TimePicker = ({ event.preventDefault(); event.stopPropagation(); - // Un événement de molette = une seule unité + // Une molette = une seule unité const direction = event.deltaY > 0 ? 1 : -1; @@ -430,6 +424,44 @@ const TimePicker = ({ } }; + const handleTouchStart = (event) => { + touchStartY.current = + event.touches[0].clientY; + }; + + const handleTouchEnd = ( + event, + type, + ) => { + if (touchStartY.current === null) { + return; + } + + const touchEndY = + event.changedTouches[0].clientY; + + const deltaY = + touchStartY.current - touchEndY; + + touchStartY.current = null; + + // Ignore les tout petits mouvements + if (Math.abs(deltaY) < 20) { + return; + } + + // Swipe vers le haut = +1 + // Swipe vers le bas = -1 + const direction = + deltaY > 0 ? 1 : -1; + + if (type === 'hours') { + changeHour(direction); + } else { + changeMinute(direction); + } + }; + const clearTime = () => { onChange(''); setOpen(false); @@ -482,20 +514,30 @@ const TimePicker = ({ {/* HEURES */}
- Molette pour modifier + Molette ou glissement pour modifier