Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor pressure and battery display #1207

Merged
merged 2 commits into from
Nov 25, 2023
+58 −105
Merged

Refactor pressure and battery display #1207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dc3e8a6
Refactor pressure and battery display
andchiind Nov 21, 2023
0990aba
Update prettier
andchiind Nov 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"@types/react-dom": "^18.0.6",
"date-fns": "^2.29.2",
"ovenplayer": "^0.10.25",
"prettier": "^3.0.3",
"prettier": "^3.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-error-boundary": "^3.1.4",
Expand Down
61 changes: 20 additions & 41 deletions frontend/src/components/Displays/RobotDisplays/BatteryStatusDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { BatteryStatus } from 'models/Battery'
import { tokens } from '@equinor/eds-tokens'
import { Icon, Typography } from '@equinor/eds-core-react'
import styled from 'styled-components'
import { Icons } from 'utils/icons'
import { RobotStatus } from 'models/Robot'

const BatteryAlignment = styled.div`
display: flex;
Expand All @@ -14,55 +12,36 @@ const StyledTypography = styled(Typography)<{ $fontSize?: 24 | 16 | 18 | 32 | 40
font-size: ${(props) => props.$fontSize};
`
export interface BatteryStatusDisplayProps {
battery?: number
batteryStatus?: BatteryStatus
batteryLevel?: number
itemSize?: 24 | 16 | 18 | 32 | 40 | 48 | undefined
robotStatus: RobotStatus
}

const BatteryStatusDisplay = ({
robotStatus,
battery,
batteryStatus,
itemSize = 24,
}: BatteryStatusDisplayProps): JSX.Element => {
let battery_icon
let icon_color: string = tokens.colors.interactive.primary__resting.hex
let battery_value: string
export const BatteryStatusDisplay = ({ batteryLevel, itemSize }: BatteryStatusDisplayProps): JSX.Element => {
let iconColor: string = tokens.colors.interactive.primary__resting.hex

if (!battery) {
battery_value = '---%'
battery_icon = Icons.BatteryUnknown
} else if (robotStatus === RobotStatus.Offline) {
battery_value = ''
icon_color = tokens.colors.interactive.disabled__text.hex
battery_icon = Icons.BatteryUnknown
} else {
battery_value = `${battery}%`
switch (batteryStatus) {
case BatteryStatus.Normal:
battery_icon = Icons.Battery
break
case BatteryStatus.Charging:
battery_icon = Icons.BatteryCharging
break
case BatteryStatus.Critical:
battery_icon = Icons.BatteryAlert
icon_color = tokens.colors.interactive.danger__resting.hex
break
const getBatteryIcon = (batteryLevel: number) => {
switch (true) {
case !batteryLevel:
return Icons.BatteryUnknown
case batteryLevel > 10:
return Icons.Battery
case batteryLevel <= 10:
return Icons.BatteryAlert
default:
Comment on lines +28 to +29
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did we get rid of the BatteryCharging case because we have no way of telling that the battery is charging or an other reason?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's wasn't implemented, it was always being used BatteryStatus.Normal

battery_icon = Icons.BatteryUnknown
battery_value = '---%'
break
return Icons.BatteryUnknown
}
}

const batteryIcon = batteryLevel ? getBatteryIcon(batteryLevel) : Icons.BatteryUnknown

const batteryValue = batteryLevel ? `${batteryLevel}%` : '---%'

iconColor = batteryIcon === Icons.BatteryAlert ? tokens.colors.interactive.danger__resting.hex : iconColor

return (
<BatteryAlignment>
<Icon name={battery_icon} color={icon_color} size={itemSize} />
<StyledTypography $fontSize={itemSize}>{battery_value}</StyledTypography>
<Icon name={batteryIcon} color={iconColor} size={itemSize} />
<StyledTypography $fontSize={itemSize}>{batteryValue}</StyledTypography>
</BatteryAlignment>
)
}

export default BatteryStatusDisplay
10 changes: 1 addition & 9 deletions frontend/src/components/Displays/RobotDisplays/PressureStatusDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Icon, Typography } from '@equinor/eds-core-react'
import styled from 'styled-components'
import { Icons } from 'utils/icons'
import { PressureStatus } from 'models/Pressure'
import { RobotStatus } from 'models/Robot'

const PressureAlignment = styled.div`
display: flex;
Expand All @@ -20,11 +19,9 @@ export interface PressureStatusDisplayProps {
itemSize?: 24 | 16 | 18 | 32 | 40 | 48 | undefined
upperPressureWarningThreshold?: number
lowerPressureWarningThreshold?: number
robotStatus: RobotStatus
}

const PressureStatusDisplay = ({
robotStatus,
export const PressureStatusDisplay = ({
pressureInBar,
itemSize,
upperPressureWarningThreshold,
Expand All @@ -39,9 +36,6 @@ const PressureStatusDisplay = ({
pressureInMilliBar = ''
pressureStatus = PressureStatus.Default
return <></>
} else if (robotStatus === RobotStatus.Offline) {
pressureInMilliBar = ''
pressureStatus = PressureStatus.Default
} else if (!upperPressureWarningThreshold || !lowerPressureWarningThreshold) {
pressureStatus = PressureStatus.Normal
} else {
Expand Down Expand Up @@ -76,5 +70,3 @@ const PressureStatusDisplay = ({
</PressureAlignment>
)
}

export default PressureStatusDisplay
9 changes: 2 additions & 7 deletions frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ import { MissionProgressDisplay } from 'components/Displays/MissionDisplays/Miss
import { MissionStatusDisplayWithHeader } from 'components/Displays/MissionDisplays/MissionStatusDisplay'
import { useNavigate } from 'react-router-dom'
import { MissionControlButtons } from 'components/Displays/MissionButtons/MissionControlButtons'
import BatteryStatusDisplay from 'components/Displays/RobotDisplays/BatteryStatusDisplay'
import { BatteryStatus } from 'models/Battery'
import { BatteryStatusDisplay } from 'components/Displays/RobotDisplays/BatteryStatusDisplay'
import { MissionRobotDisplay } from 'components/Displays/MissionDisplays/MissionRobotDisplay'

interface MissionProps {
Expand Down Expand Up @@ -59,11 +58,7 @@ export const OngoingMissionCard = ({ mission }: MissionProps): JSX.Element => {
<MissionStatusDisplayWithHeader status={mission.status} />
<MissionProgressDisplay mission={mission} />
<MissionRobotDisplay mission={mission} />
<BatteryStatusDisplay
battery={mission.robot.batteryLevel}
batteryStatus={BatteryStatus.Normal}
robotStatus={mission.robot.status}
/>
<BatteryStatusDisplay batteryLevel={mission.robot.batteryLevel} />
</BottomContent>
</StyledMissionCard>
)
Expand Down
60 changes: 27 additions & 33 deletions frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
import { Card, Typography } from '@equinor/eds-core-react'
import { Robot } from 'models/Robot'
import { Robot, RobotStatus } from 'models/Robot'
import { tokens } from '@equinor/eds-tokens'
import { RobotStatusChip } from 'components/Displays/RobotDisplays/RobotStatusChip'
import BatteryStatusDisplay from 'components/Displays/RobotDisplays/BatteryStatusDisplay'
import { BatteryStatusDisplay } from 'components/Displays/RobotDisplays/BatteryStatusDisplay'
import styled from 'styled-components'
import { RobotImage } from 'components/Displays/RobotDisplays/RobotImage'
import { useNavigate } from 'react-router-dom'
import { BatteryStatus } from 'models/Battery'
import { useLanguageContext } from 'components/Contexts/LanguageContext'
import PressureStatusDisplay from 'components/Displays/RobotDisplays/PressureStatusDisplay'
import { PressureStatusDisplay } from 'components/Displays/RobotDisplays/PressureStatusDisplay'
import { config } from 'config'
import { RobotType } from 'models/RobotModel'

Expand Down Expand Up @@ -48,34 +47,6 @@ const StyledPadding = styled.div`
padding: 8px;
`

function cardContent({ robot }: RobotProps) {
return (
<StyledPadding>
<RobotImage robotType={robot.model.type} height="200px" />
<HorizontalContent>
<VerticalContent $alignItems="start">
<Typography variant="h5">{robot.name}</Typography>
<Typography variant="caption">{robot.model.type}</Typography>
<RobotStatusChip status={robot.status} />
</VerticalContent>
<VerticalContent $alignItems="end">
<PressureStatusDisplay
pressureInBar={robot.pressureLevel}
upperPressureWarningThreshold={robot.model.upperPressureWarningThreshold}
lowerPressureWarningThreshold={robot.model.lowerPressureWarningThreshold}
robotStatus={robot.status}
/>
<BatteryStatusDisplay
battery={robot.batteryLevel}
batteryStatus={BatteryStatus.Normal}
robotStatus={robot.status}
/>
</VerticalContent>
</HorizontalContent>
</StyledPadding>
)
}

export function RobotStatusCard({ robot }: RobotProps) {
let navigate = useNavigate()
const goToRobot = () => {
Expand All @@ -84,7 +55,30 @@ export function RobotStatusCard({ robot }: RobotProps) {
}
return (
<HoverableStyledCard style={{ boxShadow: tokens.elevation.raised }} onClick={goToRobot}>
{cardContent({ robot })}
<StyledPadding>
<RobotImage robotType={robot.model.type} height="200px" />
<HorizontalContent>
<VerticalContent $alignItems="start">
<Typography variant="h5">{robot.name}</Typography>
<Typography variant="caption">{robot.model.type}</Typography>
<RobotStatusChip status={robot.status} />
</VerticalContent>
<VerticalContent $alignItems="end">
{robot.status !== RobotStatus.Offline ? (
<>
<PressureStatusDisplay
pressureInBar={robot.pressureLevel}
upperPressureWarningThreshold={robot.model.upperPressureWarningThreshold}
lowerPressureWarningThreshold={robot.model.lowerPressureWarningThreshold}
/>
<BatteryStatusDisplay batteryLevel={robot.batteryLevel} />
</>
) : (
<></>
)}
mrica-equinor marked this conversation as resolved.
Show resolved Hide resolved
</VerticalContent>
</HorizontalContent>
</StyledPadding>
</HoverableStyledCard>
)
}
Expand Down
13 changes: 3 additions & 10 deletions frontend/src/components/Pages/RobotPage/RobotPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,8 @@ import { LocalizationSection } from './LocalizationSection'
import { Header } from 'components/Header/Header'
import { RobotImage } from 'components/Displays/RobotDisplays/RobotImage'
import { MoveRobotArm } from './RobotArmMovement'
import PressureStatusDisplay from 'components/Displays/RobotDisplays/PressureStatusDisplay'
import BatteryStatusDisplay from 'components/Displays/RobotDisplays/BatteryStatusDisplay'
import { BatteryStatus } from 'models/Battery'
import { PressureStatusDisplay } from 'components/Displays/RobotDisplays/PressureStatusDisplay'
import { BatteryStatusDisplay } from 'components/Displays/RobotDisplays/BatteryStatusDisplay'
import { RobotStatusChip } from 'components/Displays/RobotDisplays/RobotStatusChip'
import { RobotStatus } from 'models/Robot'
import { useLanguageContext } from 'components/Contexts/LanguageContext'
Expand Down Expand Up @@ -84,12 +83,7 @@ export function RobotPage() {
<VerticalContent $alignItems="start">
{selectedRobot.status !== RobotStatus.Offline && (
<>
<BatteryStatusDisplay
itemSize={48}
battery={selectedRobot.batteryLevel}
batteryStatus={BatteryStatus.Normal}
robotStatus={selectedRobot.status}
/>
<BatteryStatusDisplay itemSize={48} batteryLevel={selectedRobot.batteryLevel} />
{selectedRobot.model.upperPressureWarningThreshold && (
<PressureStatusDisplay
itemSize={48}
Expand All @@ -100,7 +94,6 @@ export function RobotPage() {
lowerPressureWarningThreshold={
selectedRobot.model.lowerPressureWarningThreshold
}
robotStatus={selectedRobot.status}
/>
)}
</>
Expand Down
Loading