Refactor status display on ongoing mission card

equinor · Nov 9, 2023 · 6f510a1 · 6f510a1
1 parent 4a567bd
commit 6f510a1
Show file tree

Hide file tree

Showing 7 changed files with 68 additions and 60 deletions.
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionProgressDisplay.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionProgressDisplay.tsx
@@ -8,6 +8,8 @@ import { tokens } from '@equinor/eds-tokens'
 
 const StyledTagCount = styled.div`
     display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 `
 interface MissionProps {
     mission: Mission
@@ -29,8 +31,11 @@ export function MissionProgressDisplay({ mission }: MissionProps) {
 
     return (
         <StyledTagCount>
-            <Typography style={{ color: tokens.colors.text.static_icons__tertiary.hex }}>
-                {TranslateText('Task')} {completedTasks}/{tasks.length}
+            <Typography variant="meta" color={tokens.colors.text.static_icons__tertiary.hex}>
+                {TranslateText('Completed Tasks')}
+            </Typography>
+            <Typography>
+                {completedTasks}/{tasks.length}
             </Typography>
         </StyledTagCount>
     )

diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionRobotDisplay.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionRobotDisplay.tsx
@@ -0,0 +1,27 @@
+import { Typography } from '@equinor/eds-core-react'
+import styled from 'styled-components'
+import { useLanguageContext } from 'components/Contexts/LanguageContext'
+import { Mission } from 'models/Mission'
+import { tokens } from '@equinor/eds-tokens'
+
+const StyledRobotDisplay = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+`
+
+interface MissionProps {
+    mission: Mission
+}
+
+export function MissionRobotDisplay({ mission }: MissionProps) {
+    const { TranslateText } = useLanguageContext()
+    return (
+        <StyledRobotDisplay>
+            <Typography variant="meta" color={tokens.colors.text.static_icons__tertiary.hex}>
+                {TranslateText('Robot')}
+            </Typography>
+            <Typography>{mission.robot.name}</Typography>
+        </StyledRobotDisplay>
+    )
+}
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/MissionStatusDisplay.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/MissionStatusDisplay.tsx
@@ -11,7 +11,12 @@ interface StatusProps {
 
 const StyledStatusDisplay = styled.div`
     display: flex;
-    gap: 0.3em;
+    flex-direction: column;
+    justify-content: space-between;
+`
+const StyledStatusIcon = styled.div`
+    display: flex;
+    gap: 4px;
     align-items: flex-end;
 `
 
@@ -40,8 +45,13 @@ export function MissionStatusDisplay({ status }: StatusProps) {
     const { TranslateText } = useLanguageContext()
     return (
         <StyledStatusDisplay>
-            {displayIcon(status)}
-            <Typography>{TranslateText(status)}</Typography>
+            <Typography variant="meta" color={tokens.colors.text.static_icons__tertiary.hex}>
+                {TranslateText('Status')}
+            </Typography>
+            <StyledStatusIcon>
+                {displayIcon(status)}
+                <Typography>{TranslateText(status)}</Typography>
+            </StyledStatusIcon>
         </StyledStatusDisplay>
     )
 }
diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
@@ -9,6 +9,7 @@ import { useNavigate } from 'react-router-dom'
 import { MissionControlButtons } from './MissionControlButtons'
 import BatteryStatusView from '../RobotCards/BatteryStatusView'
 import { BatteryStatus } from 'models/Battery'
+import { MissionRobotDisplay } from './MissionRobotDisplay'
 
 interface MissionProps {
     mission: Mission
@@ -18,86 +19,49 @@ const StyledMissionCard = styled(Card)`
     width: 432px;
     padding: 10px;
 `
-
 const StyledTitle = styled(Card)`
     width: 70%;
     height: 80%;
+    justify-content: center;
+    padding-left: 12px;
     :hover {
         background-color: #deedee;
     }
     box-shadow: none;
 `
-const HorizontalContent = styled.div`
-    display: grid;
-    grid-template-columns: auto auto auto;
-    align-items: end;
-    gap: 1rem;
-`
 const TopContent = styled.div`
     display: flex;
-    flex-direction: row;
     justify-content: space-between;
 `
 const BottomContent = styled.div`
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: end;
-    padding-right: 25px;
-`
-const VerticalContent = styled.div`
-    display: grid;
-    grid-template-rows: auto auto;
     justify-content: space-between;
 `
-
-const StyledPadding = styled.div`
-    padding: 10px;
-    border-radius: 3px;
-`
-
 export function OngoingMissionCard({ mission }: MissionProps) {
     let navigate = useNavigate()
     const routeChange = () => {
         const path = `${config.FRONTEND_BASE_ROUTE}/mission/${mission.id}`
         navigate(path)
     }
     return (
-        <StyledMissionCard variant="default" style={{ boxShadow: tokens.elevation.raised }}>
+        <StyledMissionCard style={{ boxShadow: tokens.elevation.raised }}>
             <TopContent>
-                <StyledTitle variant="default" onClick={routeChange}>
-                    <StyledPadding>
-                        <Typography variant="h6" color="primary">
-                            {mission.name}
-                        </Typography>
-                    </StyledPadding>
+                <StyledTitle onClick={routeChange}>
+                    <Typography variant="h6" color="primary">
+                        {mission.name}
+                    </Typography>
                 </StyledTitle>
                 <MissionControlButtons mission={mission} />
             </TopContent>
             <BottomContent>
-                <VerticalContent>
-                    <Typography variant="meta" color="#6F6F6F">
-                        {'Status'}
-                    </Typography>
-                    <HorizontalContent>
-                        <MissionStatusDisplay status={mission.status} />
-                        <MissionProgressDisplay mission={mission} />
-                        <BatteryStatusView
-                            battery={mission.robot.batteryLevel}
-                            batteryStatus={BatteryStatus.Normal}
-                            robotStatus={mission.robot.status}
-                        />
-                    </HorizontalContent>
-                </VerticalContent>
-                <div>
-                    <Typography variant="meta" color="#6F6F6F">
-                        {'Robot'}
-                    </Typography>
-                    <Typography variant="body_short" color="#3D3D3D">
-                        {' '}
-                        {mission.robot.name}
-                    </Typography>
-                </div>
+                <MissionStatusDisplay status={mission.status} />
+                <MissionProgressDisplay mission={mission} />
+                <MissionRobotDisplay mission={mission} />
+                <BatteryStatusView
+                    battery={mission.robot.batteryLevel}
+                    batteryStatus={BatteryStatus.Normal}
+                    robotStatus={mission.robot.status}
+                />
             </BottomContent>
         </StyledMissionCard>
     )

diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/BatteryStatusView.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/BatteryStatusView.tsx
@@ -7,7 +7,7 @@ import { RobotStatus } from 'models/Robot'
 
 const BatteryAlignment = styled.div`
     display: flex;
-    align-items: center;
+    align-items: end;
 `
 
 const StyledTopography = styled(Typography)<{ $fontSize?: 24 | 16 | 18 | 32 | 40 | 48 }>`

diff --git a/frontend/src/language/en.json b/frontend/src/language/en.json
@@ -201,5 +201,6 @@
     "Dismiss robots from safe zone": "Dismiss robots from safe zone",
     "Continue missions": "Continue missions",
     "Safe Zone": "Safe Zone",
-    "Edit mission definition": "Edit mission definition"
+    "Edit mission definition": "Edit mission definition",
+    "Completed Tasks": "Completed Tasks"
 }
diff --git a/frontend/src/language/no.json b/frontend/src/language/no.json
@@ -201,5 +201,6 @@
     "Dismiss robots from safe zone": "Slipp robotene ut av trygg sone",
     "Continue missions": "Fortsett oppdragene",
     "Safe Zone": "Trygg sone",
-    "Edit mission definition": "Rediger oppdragsdefinisjon"
+    "Edit mission definition": "Rediger oppdragsdefinisjon",
+    "Completed Tasks": "Fullførte oppgaver"
 }