Improve robot cards

equinor · Jul 24, 2024 · 50e8016 · 50e8016
1 parent 8338d41
commit 50e8016
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 102 deletions.
diff --git a/frontend/src/components/Displays/RobotDisplays/PressureStatusDisplay.tsx b/frontend/src/components/Displays/RobotDisplays/PressureStatusDisplay.tsx
@@ -6,8 +6,8 @@ import { PressureStatus } from 'models/Pressure'
 
 const PressureAlignment = styled.div`
     display: flex;
-    align-items: center;
     gap: 7px;
+    align-items: end;
 `
 
 const StyledTypography = styled(Typography)<{ $fontSize?: 24 | 16 | 18 | 32 | 40 | 48 }>`

diff --git a/frontend/src/components/Displays/RobotDisplays/RobotImage.tsx b/frontend/src/components/Displays/RobotDisplays/RobotImage.tsx
@@ -17,6 +17,9 @@ const StyledImage = styled.img<{ $height?: string }>`
     object-fit: contain;
     max-height: ${(props) => props.$height};
     max-width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 12px 5px 12px 5px;
 `
 
 const StyledIcon = styled(Icon)`

diff --git a/frontend/src/components/Displays/RobotDisplays/RobotStatusChip.tsx b/frontend/src/components/Displays/RobotDisplays/RobotStatusChip.tsx
diff --git a/frontend/src/components/Displays/RobotDisplays/RobotStatusIcon.tsx b/frontend/src/components/Displays/RobotDisplays/RobotStatusIcon.tsx
@@ -0,0 +1,72 @@
+import { Icon, Typography } from '@equinor/eds-core-react'
+import { RobotStatus } from 'models/Robot'
+import { tokens } from '@equinor/eds-tokens'
+import { useLanguageContext } from 'components/Contexts/LanguageContext'
+import { useSafeZoneContext } from 'components/Contexts/SafeZoneContext'
+import { Icons } from 'utils/icons'
+import { styled } from 'styled-components'
+
+interface StatusProps {
+    status?: RobotStatus
+    isarConnected: boolean
+}
+
+const StyledStatus = styled.div`
+    display: flex;
+    flex-direction: row;
+    align-items: end;
+    gap: 2px;
+`
+
+const StyledIcon = styled(Icon)`
+    width: 24px;
+    height: 24px;
+`
+
+export const RobotStatusChip = ({ status, isarConnected }: StatusProps) => {
+    const { TranslateText } = useLanguageContext()
+    const { safeZoneStatus } = useSafeZoneContext()
+
+    var iconColor = tokens.colors.text.static_icons__default.hex
+    var statusIcon = Icons.CloudOff
+    switch (status) {
+        case RobotStatus.Available: {
+            statusIcon = Icons.Successful
+            iconColor = tokens.colors.interactive.success__resting.hex
+            break
+        }
+        case RobotStatus.Busy: {
+            statusIcon = Icons.ClosedCircleOutlined
+            iconColor = tokens.colors.interactive.warning__resting.hex
+            break
+        }
+        case RobotStatus.Blocked: {
+            statusIcon = Icons.Blocked
+            iconColor = tokens.colors.interactive.danger__resting.hex
+            break
+        }
+        default: {
+            iconColor = tokens.colors.text.static_icons__default.hex
+            statusIcon = Icons.CloudOff
+            status = RobotStatus.Offline
+            break
+        }
+    }
+
+    if (!isarConnected) {
+        iconColor = tokens.colors.interactive.disabled__text.hex
+        statusIcon = Icons.Info
+        status = RobotStatus.ConnectionIssues
+    } else if (safeZoneStatus) {
+        iconColor = tokens.colors.interactive.danger__resting.hex
+        statusIcon = Icons.Warning
+        status = RobotStatus.SafeZone
+    }
+
+    return (
+        <StyledStatus>
+            <StyledIcon name={statusIcon} style={{ color: iconColor }} />
+            <Typography variant="body_short">{TranslateText(status)}</Typography>
+        </StyledStatus>
+    )
+}
diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
@@ -1,7 +1,7 @@
 import { Card, Typography } from '@equinor/eds-core-react'
 import { Robot, RobotStatus } from 'models/Robot'
 import { tokens } from '@equinor/eds-tokens'
-import { RobotStatusChip } from 'components/Displays/RobotDisplays/RobotStatusChip'
+import { RobotStatusChip } from 'components/Displays/RobotDisplays/RobotStatusIcon'
 import { BatteryStatusDisplay } from 'components/Displays/RobotDisplays/BatteryStatusDisplay'
 import styled from 'styled-components'
 import { RobotImage } from 'components/Displays/RobotDisplays/RobotImage'
@@ -17,34 +17,41 @@ interface RobotProps {
 
 const StyledCard = styled(Card)`
     width: 220px;
-    padding: 8px;
+    padding: 12px;
 `
 const HoverableStyledCard = styled(Card)`
-    width: 220px;
-    :hover {
-        background-color: ${tokens.colors.interactive.primary__hover_alt.hex};
+    display: flex;
+    flex-direction: column;
+    width: 280px;
+    gap: 0px;
+    background-color: ${tokens.colors.ui.background__default.hex};
+    cursor: pointer;
+    :hover + #bottomcard {
+        background-color: ${tokens.colors.infographic.primary__mist_blue.hex};
     }
 `
 
+const ButtonCard = styled.div`
+    background-color: ${tokens.colors.ui.background__light.hex};
+    padding: 10px;
+    border-radius: 0px 0px 6px 6px;
+    pointer-events: auto;
+`
 const HorizontalContent = styled.div`
     display: flex;
     flex-direction: row;
+    align-content: end;
+    align-items: end;
     justify-content: space-between;
     padding-top: 2px;
 `
-
-const VerticalContent = styled.div<{ $alignItems?: string }>`
+const VerticalContent = styled.div`
     display: flex;
     flex-direction: column;
-    align-items: ${(props) => props.$alignItems};
-    justify-content: flex-end;
+    justify-content: left;
     gap: 4px;
 `
 
-const StyledPadding = styled.div`
-    padding: 8px;
-`
-
 const LongTypography = styled(Typography)`
     overflow: hidden;
     text-overflow: ellipsis;
@@ -59,41 +66,59 @@ const LongTypography = styled(Typography)`
 
 export const RobotStatusCard = ({ robot }: RobotProps) => {
     let navigate = useNavigate()
+    const { TranslateText } = useLanguageContext()
     const goToRobot = () => {
         const path = `${config.FRONTEND_BASE_ROUTE}/robot/${robot.id}`
         navigate(path)
     }
+
+    const getRobotModel = (type: RobotType) => {
+        if (type === RobotType.TaurobInspector || type === RobotType.TaurobOperator) return 'Taurob'
+        return type
+    }
+
     return (
         <HoverableStyledCard style={{ boxShadow: tokens.elevation.raised }} onClick={goToRobot}>
-            <StyledPadding>
-                <RobotImage robotType={robot.model.type} height="200px" />
-                <LongTypography variant="h5">{robot.name}</LongTypography>
+            <RobotImage robotType={robot.model.type} height="180px" />
+            <ButtonCard id="bottomcard">
+                <LongTypography variant="h5">
+                    {robot.name}
+                    {' ('}
+                    {getRobotModel(robot.model.type)}
+                    {')'}
+                </LongTypography>
                 <HorizontalContent>
-                    <VerticalContent $alignItems="start">
-                        <Typography variant="caption">{robot.model.type}</Typography>
+                    <VerticalContent>
+                        <Typography variant="meta">{TranslateText('Status')}</Typography>
                         <RobotStatusChip status={robot.status} isarConnected={robot.isarConnected} />
                     </VerticalContent>
-                    <VerticalContent $alignItems="end">
-                        {robot.status !== RobotStatus.Offline ? (
-                            <>
-                                {robot.pressureLevel !== undefined && robot.pressureLevel !== null && (
+
+                    {robot.status !== RobotStatus.Offline ? (
+                        <>
+                            <VerticalContent>
+                                <Typography variant="meta">{TranslateText('Battery')}</Typography>
+                                <BatteryStatusDisplay
+                                    batteryLevel={robot.batteryLevel}
+                                    batteryWarningLimit={robot.model.batteryWarningThreshold}
+                                />
+                            </VerticalContent>
+
+                            {robot.pressureLevel !== undefined && robot.pressureLevel !== null && (
+                                <VerticalContent>
+                                    <Typography variant="meta">{TranslateText('Pressure')}</Typography>
                                     <PressureStatusDisplay
                                         pressure={robot.pressureLevel}
                                         upperPressureWarningThreshold={robot.model.upperPressureWarningThreshold}
                                         lowerPressureWarningThreshold={robot.model.lowerPressureWarningThreshold}
                                     />
-                                )}
-                                <BatteryStatusDisplay
-                                    batteryLevel={robot.batteryLevel}
-                                    batteryWarningLimit={robot.model.batteryWarningThreshold}
-                                />
-                            </>
-                        ) : (
-                            <></>
-                        )}
-                    </VerticalContent>
+                                </VerticalContent>
+                            )}
+                        </>
+                    ) : (
+                        <></>
+                    )}
                 </HorizontalContent>
-            </StyledPadding>
+            </ButtonCard>
         </HoverableStyledCard>
     )
 }
@@ -106,9 +131,6 @@ export const RobotStatusCardPlaceholder = () => {
             <Typography variant="h5" color="disabled">
                 {TranslateText('No robot connected')}
             </Typography>
-            <Typography variant="body_short" color="disabled">
-                ----
-            </Typography>
             <HorizontalContent>
                 <RobotStatusChip isarConnected={true} />
             </HorizontalContent>

diff --git a/frontend/src/components/Pages/RobotPage/RobotPage.tsx b/frontend/src/components/Pages/RobotPage/RobotPage.tsx
@@ -8,7 +8,7 @@ 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'
+import { RobotStatusChip } from 'components/Displays/RobotDisplays/RobotStatusIcon'
 import { RobotStatus } from 'models/Robot'
 import { useLanguageContext } from 'components/Contexts/LanguageContext'
 import { RobotType } from 'models/RobotModel'

diff --git a/frontend/src/language/en.json b/frontend/src/language/en.json
@@ -256,5 +256,6 @@
     "Failed to send robots to a safe zone": "Failed to send robots to a safe zone",
     "Failed to release robots from safe zone": "Failed to release robots from safe zone",
     "Failed to send robot {0} home": "Failed to send robot {0} to starting position",
-    "Failed to update inspection": "Failed to update inspection"
+    "Failed to update inspection": "Failed to update inspection",
+    "Battery": "Battery"
 }
diff --git a/frontend/src/language/no.json b/frontend/src/language/no.json
@@ -256,5 +256,6 @@
     "Failed to send robots to a safe zone": "Kunne ikke sende roboter til trygg sone",
     "Failed to release robots from safe zone": "Kunne ikke slippe roboter ut av trygg sone",
     "Failed to send robot {0} home": "Kunne ikke sende robot {0} til startposisjon",
-    "Failed to update inspection": "Kunne ikke oppdatere inspeksjon"
+    "Failed to update inspection": "Kunne ikke oppdatere inspeksjon",
+    "Battery": "Batteri"
 }
diff --git a/frontend/src/mediaAssets/anymal_x.png b/frontend/src/mediaAssets/anymal_x.png
diff --git a/frontend/src/mediaAssets/robot.png b/frontend/src/mediaAssets/robot.png
diff --git a/frontend/src/mediaAssets/taurob_inspector_no_background.png b/frontend/src/mediaAssets/taurob_inspector_no_background.png
diff --git a/frontend/src/utils/icons.tsx b/frontend/src/utils/icons.tsx
@@ -40,6 +40,8 @@ import {
     play,
     edit,
     info_circle,
+    blocked,
+    close_circle_outlined,
 } from '@equinor/eds-icons'
 
 Icon.add({
@@ -83,6 +85,8 @@ Icon.add({
     play,
     edit,
     info_circle,
+    blocked,
+    close_circle_outlined,
 })
 
 export enum Icons {
@@ -126,4 +130,6 @@ export enum Icons {
     PlayTriangle = 'play',
     Edit = 'edit',
     Info = 'info_circle',
+    Blocked = 'blocked',
+    ClosedCircleOutlined = 'close_circle_outlined',
 }