Allow switching of inspection by using key arrows

equinor · Jan 29, 2025 · 0f7bd56 · 0f7bd56
1 parent 6f26595
commit 0f7bd56
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx b/frontend/src/components/Pages/InspectionReportPage/InspectionView.tsx
@@ -17,6 +17,7 @@ import {
 } from './InspectionStyles'
 import { InspectionOverviewDialogView } from './InspectionOverview'
 import { fetchImageData } from './InspectionReportUtilities'
+import { useState } from 'react'
 
 interface InspectionDialogViewProps {
     selectedTask: Task
@@ -29,10 +30,33 @@ export const InspectionDialogView = ({ selectedTask, tasks }: InspectionDialogVi
     const { switchSelectedInspectionTask } = useInspectionsContext()
     const { data } = fetchImageData(selectedTask)
 
+    const [switchImageDirection, setSwitchImageDirection] = useState<number>(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(selectedTask) + switchImageDirection
+            if (nextTask >= 0 && nextTask < tasks.length) {
+                switchSelectedInspectionTask(tasks[nextTask])
+            }
+            setSwitchImageDirection(0)
+        }
+    })
+
     return (
         <>
             {data !== undefined && (