Allow switching of inspection by using key arrows

equinor · Jan 29, 2025 · 2956016 · 2956016
1 parent e6d04e7
commit 2956016
Showing 1 changed file with 24 additions and 0 deletions.
diff --git 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<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(task) + switchImageDirection
+            if (nextTask >= 0 && nextTask < tasks.length) {
+                switchSelectedInspectionTask(tasks[nextTask])
+            }
+            setSwitchImageDirection(0)
+        }
+    })
+
     return (
         <>
             {data !== undefined && (