From 95fb7bfd5b668ad58a57c1dde18a648dea0c0a21 Mon Sep 17 00:00:00 2001 From: Kristoffer Date: Tue, 4 Jan 2022 12:10:25 +0100 Subject: [PATCH] Add BatteryStatusView component --- package-lock.json | 22 +++++++++ package.json | 1 + src/components/InfoButton/InfoButton.tsx | 4 +- .../RobotOverview/BatteryStatusView.tsx | 46 +++++++++++++++++++ .../RobotOverview/RobotOverview.tsx | 6 ++- .../RobotOverview/robotOverview.module.css | 8 ++-- src/models/battery.ts | 15 ++++++ src/models/robot.ts | 16 +++---- 8 files changed, 102 insertions(+), 16 deletions(-) create mode 100644 src/components/RobotOverview/BatteryStatusView.tsx create mode 100644 src/models/battery.ts diff --git a/package-lock.json b/package-lock.json index e2231a0b6..c90170d9d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@equinor/eds-core-react": "^0.14.3", "@equinor/eds-icons": "^0.8.0", + "@equinor/eds-tokens": "^0.7.0", "@testing-library/jest-dom": "^5.15.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", @@ -22,6 +23,9 @@ "react-scripts": "4.0.3", "typescript": "^4.5.2", "web-vitals": "^1.1.2" + }, + "devDependencies": { + "prettier": "^2.4.1" } }, "node_modules/@babel/code-frame": { @@ -16002,6 +16006,18 @@ "node": ">=0.10.0" } }, + "node_modules/prettier": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz", + "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", @@ -33953,6 +33969,12 @@ "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz", "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=" }, + "prettier": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz", + "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==", + "dev": true + }, "pretty-bytes": { "version": "5.6.0", "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz", diff --git a/package.json b/package.json index c14490050..6fb15d519 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "@equinor/eds-core-react": "^0.14.3", "@equinor/eds-icons": "^0.8.0", + "@equinor/eds-tokens": "^0.7.0", "@testing-library/jest-dom": "^5.15.1", "@testing-library/react": "^11.2.7", "@testing-library/user-event": "^12.8.3", diff --git a/src/components/InfoButton/InfoButton.tsx b/src/components/InfoButton/InfoButton.tsx index 32452b084..1f1227bdc 100644 --- a/src/components/InfoButton/InfoButton.tsx +++ b/src/components/InfoButton/InfoButton.tsx @@ -3,6 +3,8 @@ import { Button, Icon } from '@equinor/eds-core-react' import { Popover } from '@equinor/eds-core-react' import { useRef, useState } from 'react' +import { tokens } from '@equinor/eds-tokens' + Icon.add({ info_circle }) interface InfoButtonProps { @@ -19,7 +21,7 @@ const InfoButton = ({ title, content }: InfoButtonProps): JSX.Element => { return ( <> { + let battery_icon + let icon_color : string = tokens.colors.interactive.primary__resting.hex + let battery_value : string = `${battery.value}%` + + + + if (!(battery.value)) + battery_value = "---%" + + if (battery.status === BatteryStatus.Normal){ + battery_icon = "battery" + } + else if (battery.status === BatteryStatus.Charging){ + battery_icon = "battery_charging" + } + else if (battery.status === BatteryStatus.Critical){ + battery_icon = "battery_alert" + icon_color = tokens.colors.interactive.danger__resting.hex + } + else if (battery.status === BatteryStatus.Error){ + battery_icon = "battery_unknown" + } + + return ( +
+ {battery_value} + +
+ ) +} + +export default BatteryStatusView diff --git a/src/components/RobotOverview/RobotOverview.tsx b/src/components/RobotOverview/RobotOverview.tsx index a75c4e625..10097ab4d 100644 --- a/src/components/RobotOverview/RobotOverview.tsx +++ b/src/components/RobotOverview/RobotOverview.tsx @@ -1,11 +1,13 @@ import { Icon, Typography, Table } from '@equinor/eds-core-react' import { info_circle } from '@equinor/eds-icons' import { Robot, RobotStatus } from 'models/robot' +import { Battery } from 'models/battery' import RobotInfoButton from './RobotInfoButton' import styles from './robotOverview.module.css' import RobotOverviewHeader from './RobotOverviewHeader' import RobotStatusView from './RobotStatusView' +import BatteryStatusView from './BatteryStatusView' Icon.add({ info_circle }) @@ -17,7 +19,7 @@ const RobotStatusRow = ({ robot }: RobotProps): JSX.Element => { const name: string = robot.robotInfo.name const type: string = robot.robotInfo.type const status: RobotStatus = robot.status - const battery: number = robot.battery + const battery: Battery = robot.battery return ( {name} @@ -28,7 +30,7 @@ const RobotStatusRow = ({ robot }: RobotProps): JSX.Element => { - {battery} + diff --git a/src/components/RobotOverview/robotOverview.module.css b/src/components/RobotOverview/robotOverview.module.css index db9fb0257..b1de9c6a3 100644 --- a/src/components/RobotOverview/robotOverview.module.css +++ b/src/components/RobotOverview/robotOverview.module.css @@ -61,9 +61,11 @@ overflow-x: hidden; } -.tableInfoCell { - width: 10%; - overflow-x: hidden; +.batteryStatus { + display: flex; + align-items: center; + justify-content: flex-end; + margin-right: 20%; } .activeTableHeaderCell { diff --git a/src/models/battery.ts b/src/models/battery.ts new file mode 100644 index 000000000..57699bba2 --- /dev/null +++ b/src/models/battery.ts @@ -0,0 +1,15 @@ +export enum BatteryStatus { + Normal = 'Normal', + Critical = 'Critical', + Charging = 'Charging', + Error = 'Error', +} + +export class Battery { + status: BatteryStatus = BatteryStatus.Normal + value?: number + constructor(status: BatteryStatus, value?: number) { + this.status = status + this.value = value + } +} diff --git a/src/models/robot.ts b/src/models/robot.ts index 65ee9e133..166aaf6ba 100644 --- a/src/models/robot.ts +++ b/src/models/robot.ts @@ -1,3 +1,4 @@ +import { Battery, BatteryStatus } from './battery' import { Pose, defaultPose } from './pose' export enum RobotStatus { @@ -13,16 +14,11 @@ export interface RobotInfo { export class Robot { robotInfo: RobotInfo - battery: number = 100 + battery: Battery pose: Pose = defaultPose status: RobotStatus = RobotStatus.Available - constructor( - robotInfo: RobotInfo, - battery: number, - pose: Pose, - status: RobotStatus - ) { + constructor(robotInfo: RobotInfo, battery: Battery, pose: Pose, status: RobotStatus) { this.robotInfo = robotInfo this.battery = battery this.pose = pose @@ -46,12 +42,12 @@ const turtleRobotInfo: RobotInfo = { } export const defaultRobots: { [name: string]: Robot } = { - taurob: new Robot(taurobRobotInfo, 100, defaultPose, RobotStatus.Available), + taurob: new Robot(taurobRobotInfo, new Battery(BatteryStatus.Charging, 100), defaultPose, RobotStatus.Available), exRobotics: new Robot( exRobotInfo, - 59, + new Battery(BatteryStatus.Normal, 59), defaultPose, RobotStatus.MissionInProgress ), - turtle: new Robot(turtleRobotInfo, 0, defaultPose, RobotStatus.Offline), + turtle: new Robot(turtleRobotInfo, new Battery(BatteryStatus.Error), defaultPose, RobotStatus.Offline), }