-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add prettier formatter and format code
- Loading branch information
Showing
12 changed files
with
263 additions
and
227 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,34 @@ | ||
| import { Icon, Typography } from '@equinor/eds-core-react'; | ||
| import { platform } from '@equinor/eds-icons'; | ||
| import { RobotOverview } from "./components/RobotOverview" | ||
| import { defaultRobots } from "./models/robot" | ||
| import './app.css' | ||
| import { Icon, Typography } from "@equinor/eds-core-react"; | ||
| import { platform } from "@equinor/eds-icons"; | ||
| import { RobotOverview } from "./components/RobotOverview"; | ||
| import { defaultRobots } from "./models/robot"; | ||
| import "./app.css"; | ||
| Icon.add({ platform }); | ||
|
|
||
| const robots = [defaultRobots["taurob"], defaultRobots["exRobotics"], defaultRobots["turtle"]] | ||
| const robots = [ | ||
| defaultRobots["taurob"], | ||
| defaultRobots["exRobotics"], | ||
| defaultRobots["turtle"], | ||
| ]; | ||
|
|
||
| function App() { | ||
| return ( | ||
| <div className='app-ui'> | ||
| <div className='header'> | ||
| <Typography color="primary" variant="h1" bold>Flotilla</Typography> | ||
| </div> | ||
| <div className='robot-overview'> | ||
| <RobotOverview robots={robots}></RobotOverview> | ||
| </div> | ||
| <div className='mission-overview'> | ||
| <Typography variant='h2' style={{ "marginTop": "20px" }}>Mission Overview</Typography> | ||
| </div> | ||
| </div>) | ||
| return ( | ||
| <div className="app-ui"> | ||
| <div className="header"> | ||
| <Typography color="primary" variant="h1" bold> | ||
| Flotilla | ||
| </Typography> | ||
| </div> | ||
| <div className="robot-overview"> | ||
| <RobotOverview robots={robots}></RobotOverview> | ||
| </div> | ||
| <div className="mission-overview"> | ||
| <Typography variant="h2" style={{ marginTop: "20px" }}> | ||
| Mission Overview | ||
| </Typography> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default App | ||
| export default App; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,25 @@ | ||
| .app-ui { | ||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(384px, 1fr)); | ||
| grid-gap: 16px; | ||
| margin-left: 24px; | ||
| margin-top: 24px; | ||
| } | ||
|
|
||
| .header { | ||
| grid-column-start: 1; | ||
| grid-column-end: -1; | ||
| } | ||
|
|
||
| .robot-overview { | ||
| grid-column-end: span 2; | ||
| grid-row-end: span 2; | ||
| max-height: 500px; | ||
| } | ||
|
|
||
| .mission-overview{ | ||
| grid-column-end: span 2; | ||
| grid-row-end: span 2; | ||
| overflow: auto; | ||
| max-height: 500px; | ||
| } | ||
|
|
||
|
|
||
| display: grid; | ||
| grid-template-columns: repeat(auto-fit, minmax(384px, 1fr)); | ||
| grid-gap: 16px; | ||
| margin-left: 24px; | ||
| margin-top: 24px; | ||
| } | ||
|
|
||
| .header { | ||
| grid-column-start: 1; | ||
| grid-column-end: -1; | ||
| } | ||
|
|
||
| .robot-overview { | ||
| grid-column-end: span 2; | ||
| grid-row-end: span 2; | ||
| max-height: 500px; | ||
| } | ||
|
|
||
| .mission-overview { | ||
| grid-column-end: span 2; | ||
| grid-row-end: span 2; | ||
| overflow: auto; | ||
| max-height: 500px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,50 +1,56 @@ | ||
| import { Icon, Typography, Table } from '@equinor/eds-core-react'; | ||
| import { info_circle } from '@equinor/eds-icons'; | ||
| import { Robot } from "../../models/robot" | ||
| import styles from './robotOverview.module.css' | ||
| import RobotOverviewHeader from './RobotOverviewHeader' | ||
| import { Icon, Typography, Table } from "@equinor/eds-core-react"; | ||
| import { info_circle } from "@equinor/eds-icons"; | ||
| import { Robot } from "../../models/robot"; | ||
| import styles from "./robotOverview.module.css"; | ||
| import RobotOverviewHeader from "./RobotOverviewHeader"; | ||
|
|
||
| Icon.add({ info_circle }); | ||
|
|
||
| interface RobotProps { | ||
| robot: Robot | ||
| robot: Robot; | ||
| } | ||
|
|
||
| const RobotStatus: React.FC<RobotProps> = ({ robot }: RobotProps) => { | ||
| const name = robot.robotInfo.name | ||
| const type = robot.robotInfo.type | ||
| const status = robot.status | ||
| const battery = robot.battery | ||
| return ( | ||
| <Table.Row className={styles.tableRowWrapper}> | ||
| <Table.Cell className={styles.tableNameCell}>{name}</Table.Cell> | ||
| <Table.Cell className={styles.tableTypeCell}>{type}</Table.Cell> | ||
| <Table.Cell className={styles.tableStatusCell}>{status}</Table.Cell> | ||
| <Table.Cell className={styles.tableBatteryCell} variant="numeric">{battery}</Table.Cell> | ||
| <Table.Cell className={styles.tableInfoCell} variant="icon"><Icon name="info_circle" size={24} color="primary" /></Table.Cell> | ||
| </Table.Row> | ||
| ); | ||
| const name = robot.robotInfo.name; | ||
| const type = robot.robotInfo.type; | ||
| const status = robot.status; | ||
| const battery = robot.battery; | ||
| return ( | ||
| <Table.Row className={styles.tableRowWrapper}> | ||
| <Table.Cell className={styles.tableNameCell}>{name}</Table.Cell> | ||
| <Table.Cell className={styles.tableTypeCell}>{type}</Table.Cell> | ||
| <Table.Cell className={styles.tableStatusCell}>{status}</Table.Cell> | ||
| <Table.Cell className={styles.tableBatteryCell} variant="numeric"> | ||
| {battery} | ||
| </Table.Cell> | ||
| <Table.Cell className={styles.tableInfoCell} variant="icon"> | ||
| <Icon name="info_circle" size={24} color="primary" /> | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| ); | ||
| }; | ||
|
|
||
| interface RobotOverviewProps { | ||
| robots: Robot[] | ||
| robots: Robot[]; | ||
| } | ||
|
|
||
| const RobotOverview: React.FC<RobotOverviewProps> = ({ robots }: RobotOverviewProps) => { | ||
| var robotComponnets = robots.map(function (robot) { | ||
| return <RobotStatus robot={robot} /> | ||
| }); | ||
| return ( | ||
| <Table className={styles.tableWrapper}> | ||
| <Table.Caption captionSide className={styles.tableCaption}> | ||
| <Typography variant="h2">Robot Overview</Typography> | ||
| </Table.Caption> | ||
| <RobotOverviewHeader /> | ||
| <Table.Body className={styles.tableBodyWrapper}> | ||
| {robotComponnets} | ||
| </Table.Body> | ||
| </Table> | ||
| ); | ||
| const RobotOverview: React.FC<RobotOverviewProps> = ({ | ||
| robots, | ||
| }: RobotOverviewProps) => { | ||
| var rows = robots.map(function (robot) { | ||
| return <RobotStatus robot={robot} />; | ||
| }); | ||
| return ( | ||
| <Table className={styles.tableWrapper}> | ||
| <Table.Caption captionSide className={styles.tableCaption}> | ||
| <Typography variant="h2">Robot Overview</Typography> | ||
| </Table.Caption> | ||
| <RobotOverviewHeader /> | ||
| <Table.Body className={styles.tableBodyWrapper}> | ||
| {rows} | ||
| </Table.Body> | ||
| </Table> | ||
| ); | ||
| }; | ||
|
|
||
| export default RobotOverview | ||
| export default RobotOverview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,50 @@ | ||
| import { Table } from "@equinor/eds-core-react"; | ||
| import React from "react"; | ||
| import styles from "./robotOverview.module.css" | ||
| import styles from "./robotOverview.module.css"; | ||
|
|
||
| interface RobotOverviewHeaderCellProps { | ||
| label: string, | ||
| overideClassName?: string | ||
| }; | ||
| label: string; | ||
| overideClassName?: string; | ||
| } | ||
|
|
||
| const RobotOverviewHeaderCell: React.FC<RobotOverviewHeaderCellProps> = ({ label, overideClassName }: RobotOverviewHeaderCellProps) => { | ||
| return ( | ||
| <Table.Cell className={overideClassName}> | ||
| <span className={styles.label}>{label}</span> | ||
| </Table.Cell> | ||
| ) | ||
| const RobotOverviewHeaderCell: React.FC<RobotOverviewHeaderCellProps> = ({ | ||
| label, | ||
| overideClassName, | ||
| }: RobotOverviewHeaderCellProps) => { | ||
| return ( | ||
| <Table.Cell className={overideClassName}> | ||
| <span className={styles.label}>{label}</span> | ||
| </Table.Cell> | ||
| ); | ||
| }; | ||
|
|
||
| const RobotOverviewHeader = () => { | ||
| return ( | ||
| <Table.Head className={styles.tableHeadWrapper}> | ||
| <Table.Row className={styles.tableRowWrapper}> | ||
| <RobotOverviewHeaderCell label="Name" overideClassName={styles.tableNameCell} /> | ||
| <RobotOverviewHeaderCell label="Type" overideClassName={styles.tableTypeCell} /> | ||
| <RobotOverviewHeaderCell label="Status" overideClassName={styles.tableStatusCell} /> | ||
| <RobotOverviewHeaderCell label="Battery" overideClassName={styles.tableBatteryCell} /> | ||
| <RobotOverviewHeaderCell label="Info" overideClassName={styles.tableInfoCell} /> | ||
| </Table.Row> | ||
| </Table.Head> | ||
| ); | ||
| return ( | ||
| <Table.Head className={styles.tableHeadWrapper}> | ||
| <Table.Row className={styles.tableRowWrapper}> | ||
| <RobotOverviewHeaderCell | ||
| label="Name" | ||
| overideClassName={styles.tableNameCell} | ||
| /> | ||
| <RobotOverviewHeaderCell | ||
| label="Type" | ||
| overideClassName={styles.tableTypeCell} | ||
| /> | ||
| <RobotOverviewHeaderCell | ||
| label="Status" | ||
| overideClassName={styles.tableStatusCell} | ||
| /> | ||
| <RobotOverviewHeaderCell | ||
| label="Battery" | ||
| overideClassName={styles.tableBatteryCell} | ||
| /> | ||
| <RobotOverviewHeaderCell | ||
| label="Info" | ||
| overideClassName={styles.tableInfoCell} | ||
| /> | ||
| </Table.Row> | ||
| </Table.Head> | ||
| ); | ||
| }; | ||
|
|
||
| export default RobotOverviewHeader; |
Oops, something went wrong.