Add pressure table to robot page

equinor · May 13, 2024 · 385195b · 385195b
1 parent 037d5d5
commit 385195b
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 2 deletions.
diff --git a/frontend/src/components/Pages/RobotPage/PressureTable.tsx b/frontend/src/components/Pages/RobotPage/PressureTable.tsx
@@ -0,0 +1,76 @@
+import { Table, Typography } from '@equinor/eds-core-react'
+import { useLanguageContext } from 'components/Contexts/LanguageContext'
+import styled from 'styled-components'
+import { tokens } from '@equinor/eds-tokens'
+
+const TableWithHeader = styled.div`
+    display: grid;
+    grid-columns: auto;
+    gap: 1rem;
+    margin: 2rem 0rem;
+    max-width: 25rem;
+`
+
+const StyledTable = styled.div`
+    display: grid;
+    overflow-x: auto;
+    overflow-y: hidden;
+`
+
+const StyledTableRow = styled(Table.Row)`
+    &:nth-child(1),
+    &:nth-child(5) {
+        background-color: ${tokens.colors.interactive.danger__highlight.hex};
+    }
+    &:nth-child(2),
+    &:nth-child(4) {
+        background-color: ${tokens.colors.interactive.warning__highlight.hex};
+    }
+    &:nth-child(3) {
+        background-color: ${tokens.colors.interactive.success__highlight.hex};
+    }
+`
+
+export const PressureTable = () => {
+    const { TranslateText } = useLanguageContext()
+    return (
+        <>
+            <TableWithHeader>
+                <Typography variant="h2">{TranslateText('Pressure')}</Typography>
+                <Typography>{TranslateText('Recommended pressure')}</Typography>
+                <StyledTable>
+                    <Table>
+                        <Table.Head sticky>
+                            <Table.Row>
+                                <Table.Cell>{TranslateText('Pressure level')}</Table.Cell>
+                                <Table.Cell>{TranslateText('Pressure limit')}</Table.Cell>
+                            </Table.Row>
+                        </Table.Head>
+                        <Table.Body>
+                            <StyledTableRow>
+                                <Table.Cell>{TranslateText('HighHigh')}</Table.Cell>
+                                <Table.Cell>{'> 90'}</Table.Cell>
+                            </StyledTableRow>
+                            <StyledTableRow>
+                                <Table.Cell>{TranslateText('High')}</Table.Cell>
+                                <Table.Cell>{'75-90'}</Table.Cell>
+                            </StyledTableRow>
+                            <StyledTableRow>
+                                <Table.Cell>{TranslateText('Ok')}</Table.Cell>
+                                <Table.Cell>{'25-75'}</Table.Cell>
+                            </StyledTableRow>
+                            <StyledTableRow>
+                                <Table.Cell>{TranslateText('Low')}</Table.Cell>
+                                <Table.Cell>{'10-25'}</Table.Cell>
+                            </StyledTableRow>
+                            <StyledTableRow>
+                                <Table.Cell>{TranslateText('LowLow')}</Table.Cell>
+                                <Table.Cell>{'< 10'}</Table.Cell>
+                            </StyledTableRow>
+                        </Table.Body>
+                    </Table>
+                </StyledTable>
+            </TableWithHeader>
+        </>
+    )
+}
diff --git a/frontend/src/components/Pages/RobotPage/RobotPage.tsx b/frontend/src/components/Pages/RobotPage/RobotPage.tsx
@@ -5,6 +5,7 @@ import { BackButton } from 'utils/BackButton'
 import { Header } from 'components/Header/Header'
 import { RobotImage } from 'components/Displays/RobotDisplays/RobotImage'
 import { MoveRobotArm } from './RobotArmMovement'
+import { PressureTable } from './PressureTable'
 import { PressureStatusDisplay } from 'components/Displays/RobotDisplays/PressureStatusDisplay'
 import { BatteryStatusDisplay } from 'components/Displays/RobotDisplays/BatteryStatusDisplay'
 import { RobotStatusChip } from 'components/Displays/RobotDisplays/RobotStatusChip'
@@ -44,6 +45,7 @@ const RobotInfo = styled.div`
     @media (max-width: 800px) {
         flex-direction: column;
     }
+    margin: 0rem 0rem 2rem 0rem;
 `
 const StatusContent = styled.div<{ $alignItems?: string }>`
     display: flex;
@@ -112,6 +114,7 @@ export const RobotPage = () => {
                                 )}
                             </StatusContent>
                         </RobotInfo>
+                        {selectedRobot.model.type === RobotType.TaurobInspector && <PressureTable />}
                         <Typography variant="h2">{TranslateText('Actions')}</Typography>
 
                         <StyledTextButton variant="outlined" onClick={returnRobotToHome}>

diff --git a/frontend/src/language/en.json b/frontend/src/language/en.json
@@ -231,5 +231,13 @@
     "Connection Issues": "Connection Issues",
     "Stop button pressed during return home warning text": "You are about to stop a mission that will send the robot back to the start position. You must manually drive the robot to the start position to start a new mission.",
     "Failed Telemetry": "Failed Telemetry",
-    "Stop button pressed during localization warning text": "You are about to stop a mission that localizes the robot. You will not be able to run an inspection mission until you have successfully localized the robot."
+    "Stop button pressed during localization warning text": "You are about to stop a mission that localizes the robot. You will not be able to run an inspection mission until you have successfully localized the robot.",
+    "HighHigh": "HighHigh",
+    "High": "High",
+    "Ok": "Ok",
+    "Low": "Low",
+    "LowLow": "LowLow",
+    "Recommended pressure": "Recommended pressure is 67 mBar.",
+    "Pressure": "Pressure",
+    "Pressure limit": "Pressure limits [mBar]"
 }
diff --git a/frontend/src/language/no.json b/frontend/src/language/no.json
@@ -231,5 +231,13 @@
     "Connection Issues": "Tilkoblingsproblemer",
     "Stop button pressed during return home warning text": "Du er i ferd med å stoppe et oppdrag som sender roboten tilbake til startposisjonen. Du må kjøre roboten manuelt til startposisjonen for å starte et nytt oppdrag.",
     "Failed Telemetry": "Mislykket telemetri",
-    "Stop button pressed during localization warning text": "Du er i ferd med å stoppe et oppdrag som lokaliserer roboten. Du vil ikke kunne kjøre et inspeksjonsoppdrag før du har lokalisert roboten."
+    "Stop button pressed during localization warning text": "Du er i ferd med å stoppe et oppdrag som lokaliserer roboten. Du vil ikke kunne kjøre et inspeksjonsoppdrag før du har lokalisert roboten.",
+    "HighHigh": "HøyHøy",
+    "High": "Høy",
+    "Ok": "Ok",
+    "Low": "Lav",
+    "LowLow": "LavLav",
+    "Recommended pressure": "Anbefalt trykk er 67 mBar.",
+    "Pressure": "Trykk",
+    "Pressure limit": "Trykkgrenser [mBar]"
 }