diff --git a/frontend/src/components/Pages/InspectionReportPage.tsx/InspectionView.tsx b/frontend/src/components/Pages/InspectionReportPage.tsx/InspectionView.tsx index 0f715775..21e0aecc 100644 --- a/frontend/src/components/Pages/InspectionReportPage.tsx/InspectionView.tsx +++ b/frontend/src/components/Pages/InspectionReportPage.tsx/InspectionView.tsx @@ -24,6 +24,7 @@ import { } from './InspectionStyles' import { BackendAPICaller } from 'api/ApiCaller' import { useQuery } from '@tanstack/react-query' +import { useState } from 'react' interface InspectionDialogViewProps { task: Task @@ -36,10 +37,33 @@ export const InspectionDialogView = ({ task, tasks }: InspectionDialogViewProps) const { switchSelectedInspectionTask } = useInspectionsContext() const { data } = FetchImageData(task) + const [switchImageDirection, setSwitchImageDirection] = useState(0) + const closeDialog = () => { switchSelectedInspectionTask(undefined) } + document.addEventListener('keydown', (event) => { + if (event.code === 'ArrowLeft' && switchImageDirection !== -1) { + setSwitchImageDirection(-1) + } else if (event.code === 'ArrowRight' && switchImageDirection !== 1) { + setSwitchImageDirection(1) + } + }) + + document.addEventListener('keyup', (event) => { + if ( + (event.code === 'ArrowLeft' && switchImageDirection === -1) || + (event.code === 'ArrowRight' && switchImageDirection === 1) + ) { + const nextTask = tasks.indexOf(task) + switchImageDirection + if (nextTask >= 0 && nextTask < tasks.length) { + switchSelectedInspectionTask(tasks[nextTask]) + } + setSwitchImageDirection(0) + } + }) + return ( <> {data !== undefined && (