Show current inspection area

Author: nicholasdalhaug

frontend/src/language/en.json

@@ -265,6 +265,8 @@
     "InterventionNeeded": "Intervention Needed",
     "ReturnHomePaused": "Returning home paused",
     "Current Inspection Area": "Current Inspection Area",
+    "Loading...": "Loading...",
+    "No inspection area found": "No inspection area found",
     "GoingToRecharging": "Returning to recharge",
     "GoingToLockdown": "Returning due to lockdown",
     "Set maintenance mode": "Set maintenance mode",

frontend/src/language/no.json

@@ -265,6 +265,8 @@
     "InterventionNeeded": "Intervensjon nødvendig",
     "ReturnHomePaused": "Kjøring hjem pauset",
     "Current Inspection Area": "Nåværende inspeksjonsområde",
+    "Loading...": "Laster...",
+    "No inspection area found": "Ingen inspeksjonsområde funnet",
     "GoingToRecharging": "Returnerer for å lade",
     "GoingToLockdown": "Returnerer på grunn av lockdown",
     "Set maintenance mode": "Sett vedlikeholdsmodus",

frontend/src/pages/RobotPage/RobotPage.tsx

@@ -144,7 +144,11 @@ export const RobotPage = ({ robot }: RobotPageProps) => {
             <></>
         )
 
-    const currentInspectionArea = useQuery({
+    const {
+        data: currentInspectionArea,
+        isLoading: isLoadingCurrentInspectionArea,
+        error: currentInspectionAreaError,
+    } = useQuery({
         queryKey: ['fetchCurrentInspectionArea', robot.id],
         queryFn: async () => {
             if (robot && robot.currentInspectionAreaId)
@@ -154,7 +158,7 @@ export const RobotPage = ({ robot }: RobotPageProps) => {
         retry: 2,
         retryDelay: 2000,
         enabled: robot && robot.currentInspectionAreaId != null,
-    }).data
+    })
 
     return (
         <>
@@ -200,6 +204,24 @@ export const RobotPage = ({ robot }: RobotPageProps) => {
                                         </Typography>
                                     </MetricCard>
                                 )}
+                                {isLoadingCurrentInspectionArea && (
+                                    <MetricCard>
+                                        <FieldLabel>{TranslateText('Current Inspection Area')}</FieldLabel>
+                                        <Typography style={{ fontSize: '24px' }}>
+                                            {TranslateText('Loading...')}
+                                        </Typography>
+                                    </MetricCard>
+                                )}
+                                {((!isLoadingCurrentInspectionArea && !currentInspectionArea) ||
+                                    currentInspectionAreaError ||
+                                    robot.currentInspectionAreaId === null) && (
+                                    <MetricCard>
+                                        <FieldLabel>{TranslateText('Current Inspection Area')}</FieldLabel>
+                                        <Typography style={{ fontSize: '24px' }}>
+                                            {TranslateText('No inspection area found')}
+                                        </Typography>
+                                    </MetricCard>
+                                )}
                             </MetricsRow>
                         )}