Add area information on robot card

equinor · Oct 29, 2024 · fa9e49e · fa9e49e
1 parent 98f209a
commit fa9e49e
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 9 deletions.
diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
@@ -10,9 +10,11 @@ import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { PressureStatusDisplay } from 'components/Displays/RobotDisplays/PressureStatusDisplay'
 import { config } from 'config'
 import { RobotType } from 'models/RobotModel'
+import { Mission } from 'models/Mission'
 
 interface RobotProps {
     robot: Robot
+    mission: Mission | undefined
 }
 
 const StyledCard = styled(Card)`
@@ -56,7 +58,11 @@ const VerticalContent = styled.div`
     justify-content: left;
     gap: 4px;
 `
-
+const AreaContent = styled.div`
+    display: flex;
+    justify-content: left;
+    padding-right: 6px;
+`
 const LongTypography = styled(Typography)`
     overflow: hidden;
     text-overflow: ellipsis;
@@ -69,7 +75,7 @@ const LongTypography = styled(Typography)`
     }
 `
 
-export const RobotStatusCard = ({ robot }: RobotProps) => {
+export const RobotStatusCard = ({ robot, mission }: RobotProps) => {
     let navigate = useNavigate()
     const { TranslateText } = useLanguageContext()
     const goToRobot = () => {
@@ -86,12 +92,19 @@ export const RobotStatusCard = ({ robot }: RobotProps) => {
         <HoverableStyledCard style={{ boxShadow: tokens.elevation.raised }} onClick={goToRobot}>
             <RobotImage robotType={robot.model.type} height="180px" />
             <ButtonCard id="buttoncard">
-                <LongTypography variant="h5">
-                    {robot.name}
-                    {' ('}
-                    {getRobotModel(robot.model.type)}
-                    {')'}
-                </LongTypography>
+                <HorizontalContent>
+                    <LongTypography variant="h5">
+                        {robot.name}
+                        {' ('}
+                        {getRobotModel(robot.model.type)}
+                        {')'}
+                    </LongTypography>
+                    {mission?.area?.areaName && (
+                        <AreaContent>
+                            <Typography variant="h5"> {mission.area.areaName} </Typography>
+                        </AreaContent>
+                    )}
+                </HorizontalContent>
                 <HorizontalContent>
                     <VerticalContent>
                         <Typography variant="meta">{TranslateText('Status')}</Typography>

diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusSection.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusSection.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import { RobotStatusCard, RobotStatusCardPlaceholder } from './RobotStatusCard'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { useRobotContext } from 'components/Contexts/RobotContext'
+import { useMissionsContext } from 'components/Contexts/MissionRunsContext'
 
 const RobotCardSection = styled.div`
     display: flex;
@@ -18,6 +19,7 @@ const RobotView = styled.div`
 export const RobotStatusSection = () => {
     const { TranslateText } = useLanguageContext()
     const { enabledRobots } = useRobotContext()
+    const { ongoingMissions } = useMissionsContext()
 
     const relevantRobots = enabledRobots.sort((robot, robotToCompareWith) =>
         robot.status! !== robotToCompareWith.status!
@@ -29,7 +31,13 @@ export const RobotStatusSection = () => {
               : -1
     )
 
-    const robotDisplay = relevantRobots.map((robot) => <RobotStatusCard key={robot.id} robot={robot} />)
+    const robotDisplay = relevantRobots.map((robot) => (
+        <RobotStatusCard
+            key={robot.id}
+            robot={robot}
+            mission={ongoingMissions.find((mission) => mission.robot.id === robot.id)}
+        />
+    ))
 
     return (
         <RobotView>