From dc3e8a60d0fe87e60bde65dab0adf836663ad4dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anders=20Chirico=20Indreb=C3=B8?= Date: Tue, 21 Nov 2023 14:47:11 +0100 Subject: [PATCH 1/2] Refactor pressure and battery display --- .../RobotDisplays/BatteryStatusDisplay.tsx | 61 ++++++------------- .../RobotDisplays/PressureStatusDisplay.tsx | 10 +-- .../MissionOverview/OngoingMissionCard.tsx | 9 +-- .../FrontPage/RobotCards/RobotStatusCard.tsx | 60 ++++++++---------- .../components/Pages/RobotPage/RobotPage.tsx | 13 +--- 5 files changed, 53 insertions(+), 100 deletions(-) diff --git a/frontend/src/components/Displays/RobotDisplays/BatteryStatusDisplay.tsx b/frontend/src/components/Displays/RobotDisplays/BatteryStatusDisplay.tsx index bfaf785b4..572171213 100644 --- a/frontend/src/components/Displays/RobotDisplays/BatteryStatusDisplay.tsx +++ b/frontend/src/components/Displays/RobotDisplays/BatteryStatusDisplay.tsx @@ -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; @@ -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: - 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 ( - - {battery_value} + + {batteryValue} ) } - -export default BatteryStatusDisplay diff --git a/frontend/src/components/Displays/RobotDisplays/PressureStatusDisplay.tsx b/frontend/src/components/Displays/RobotDisplays/PressureStatusDisplay.tsx index e9063cf70..6eeb195fc 100644 --- a/frontend/src/components/Displays/RobotDisplays/PressureStatusDisplay.tsx +++ b/frontend/src/components/Displays/RobotDisplays/PressureStatusDisplay.tsx @@ -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; @@ -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, @@ -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 { @@ -76,5 +70,3 @@ const PressureStatusDisplay = ({ ) } - -export default PressureStatusDisplay diff --git a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx index f1142a999..0743b0bd1 100644 --- a/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx +++ b/frontend/src/components/Pages/FrontPage/MissionOverview/OngoingMissionCard.tsx @@ -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 { @@ -59,11 +58,7 @@ export const OngoingMissionCard = ({ mission }: MissionProps): JSX.Element => { - + ) diff --git a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx index 784821611..e13cd210d 100644 --- a/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx +++ b/frontend/src/components/Pages/FrontPage/RobotCards/RobotStatusCard.tsx @@ -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' @@ -48,34 +47,6 @@ const StyledPadding = styled.div` padding: 8px; ` -function cardContent({ robot }: RobotProps) { - return ( - - - - - {robot.name} - {robot.model.type} - - - - - - - - - ) -} - export function RobotStatusCard({ robot }: RobotProps) { let navigate = useNavigate() const goToRobot = () => { @@ -84,7 +55,30 @@ export function RobotStatusCard({ robot }: RobotProps) { } return ( - {cardContent({ robot })} + + + + + {robot.name} + {robot.model.type} + + + + {robot.status !== RobotStatus.Offline ? ( + <> + + + + ) : ( + <> + )} + + + ) } diff --git a/frontend/src/components/Pages/RobotPage/RobotPage.tsx b/frontend/src/components/Pages/RobotPage/RobotPage.tsx index f65d2b710..1242e97a2 100644 --- a/frontend/src/components/Pages/RobotPage/RobotPage.tsx +++ b/frontend/src/components/Pages/RobotPage/RobotPage.tsx @@ -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' @@ -84,12 +83,7 @@ export function RobotPage() { {selectedRobot.status !== RobotStatus.Offline && ( <> - + {selectedRobot.model.upperPressureWarningThreshold && ( )} From 0990abaa546554a8ebff83dcd979519b8e952e63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Anders=20Chirico=20Indreb=C3=B8?= Date: Sat, 25 Nov 2023 12:11:41 +0100 Subject: [PATCH 2/2] Update prettier --- frontend/package-lock.json | 8 ++++---- frontend/package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 5aaea64fa..008eace54 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -23,7 +23,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", @@ -11665,9 +11665,9 @@ } }, "node_modules/prettier": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.3.tgz", - "integrity": "sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.0.tgz", + "integrity": "sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==", "bin": { "prettier": "bin/prettier.cjs" }, diff --git a/frontend/package.json b/frontend/package.json index 37a427bfb..07615ab52 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -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",