diff --git a/frontend/src/pages/TimeClockPage.jsx b/frontend/src/pages/TimeClockPage.jsx index 71c7334..a2cc3a0 100644 --- a/frontend/src/pages/TimeClockPage.jsx +++ b/frontend/src/pages/TimeClockPage.jsx @@ -23,9 +23,9 @@ const TimeClockPage = () => { const [scanConflict, setScanConflict] = useState(null); const [conflictTime, setConflictTime] = useState(new Date().toTimeString().slice(0, 5)); const [error, setError] = useState(''); - const [currentTime, setCurrentTime] = useState(new Date()); const [timeEntries, setTimeEntries] = useState([]); const [loading, setLoading] = useState(true); + const [isScannerDialogOpen, setIsScannerDialogOpen] = useState(false); const [newEntry, setNewEntry] = useState({ date: new Date().toISOString().split('T')[0], end_date: new Date().toISOString().split('T')[0], @@ -37,15 +37,7 @@ const TimeClockPage = () => { start_time: '', end_time: '' }); - - // Update current time every second - useEffect(() => { - const timer = setInterval(() => { - setCurrentTime(new Date()); - }, 1000); - return () => clearInterval(timer); - }, []); const loadTimeEntries = async () => { try { @@ -219,7 +211,9 @@ const TimeClockPage = () => { useEffect(() => () => stopScanner(), []); useEffect(() => { - if (!isScanning || !videoRef.current) return undefined; + if (!isScannerDialogOpen || !isScanning || !videoRef.current) { + return undefined; + } let cancelled = false; const reader = new BrowserQRCodeReader(); @@ -227,7 +221,12 @@ const TimeClockPage = () => { const startReader = async () => { try { const controls = await reader.decodeFromConstraints( - { video: { facingMode: { ideal: 'environment' } }, audio: false }, + { + video: { + facingMode: { ideal: 'environment' }, + }, + audio: false, + }, videoRef.current, (result) => { if (result && !cancelled) { @@ -240,14 +239,19 @@ const TimeClockPage = () => { try { controls.stop(); } catch (stopError) { - console.warn('Arrêt du lecteur QR déjà effectué.', stopError); + console.warn( + 'Arrêt du lecteur QR déjà effectué.', + stopError, + ); } } else { qrControlsRef.current = controls; } } catch (scannerError) { if (!cancelled) { - setError('Impossible d’accéder à la caméra. Vérifiez les permissions et utilisez HTTPS sur le réseau.'); + setError( + 'Impossible d’accéder à la caméra. Vérifiez les permissions et utilisez HTTPS sur le réseau.', + ); console.error(scannerError); stopScanner(); } @@ -258,36 +262,40 @@ const TimeClockPage = () => { return () => { cancelled = true; + try { reader.reset(); } catch (resetError) { - console.warn('Réinitialisation du lecteur QR ignorée.', resetError); + console.warn( + 'Réinitialisation du lecteur QR ignorée.', + resetError, + ); } }; - }, [isScanning]); + }, [isScannerDialogOpen, isScanning]); - const startScanner = async () => { + const startScanner = () => { setError(''); setScanMessage(''); setScanConflict(null); - if (!window.isSecureContext && window.location.hostname !== 'localhost' && window.location.hostname !== '127.0.0.1') { - setError('La caméra nécessite une connexion HTTPS sur cette adresse réseau.'); + if ( + !window.isSecureContext && + window.location.hostname !== 'localhost' && + window.location.hostname !== '192.168.1.19' + ) { + setError( + 'La caméra nécessite une connexion HTTPS sur cette adresse réseau.', + ); return; } - try { - if (!navigator.mediaDevices?.getUserMedia) { - setError('Ce navigateur ne permet pas l’accès à la caméra.'); - return; - } - - setIsScanning(true); - } catch (scannerError) { - setError('Impossible d’accéder à la caméra. Vérifiez les permissions et utilisez HTTPS sur le réseau.'); - console.error(scannerError); - stopScanner(); + if (!navigator.mediaDevices?.getUserMedia) { + setError('Ce navigateur ne permet pas l’accès à la caméra.'); + return; } + + setIsScanning(true); }; const formatTime = (timeString) => { @@ -348,14 +356,23 @@ const TimeClockPage = () => { )} {/* Dialog for QR scanner preview */} - + { + setIsScannerDialogOpen(open); + + if (!open) { + stopScanner(); + } + }} + > -