diff --git a/README.md b/README.md index 471c64c4b..15de37a73 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ Flotilla is the main point of access for operators to interact with multiple rob ## Setup -For development, please fork the repository. Then, clone the repository: +For development, please fork the repository. Then, clone the repository: ``` $ git clone https://github.com/equinor/flotilla @@ -12,10 +12,9 @@ $ git clone https://github.com/equinor/flotilla The app use TypeScript and React. For development, Node v17.x needs to be installed. Installation instructions can be found [here](https://github.com/nodesource/distributions/blob/master/README.md). - ## Install -To install the application, navigate to the root folder and run the following command: +To install the application, navigate to the root folder and run the following command: ``` $ npm ci diff --git a/package.json b/package.json index 60c638bc6..a360f4833 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,9 @@ "typescript": "^4.5.2", "web-vitals": "^1.1.2" }, + "devDependencies": { + "prettier": "^2.4.1" + }, "scripts": { "start": "react-scripts --openssl-legacy-provider start", "build": "react-scripts build", diff --git a/public/index.html b/public/index.html index 1944e1ca6..04a70d057 100644 --- a/public/index.html +++ b/public/index.html @@ -1,19 +1,21 @@ - - - - - - - - - - - - Flotilla - + Flotilla + - - -
- - - + diff --git a/src/App.tsx b/src/App.tsx index 7a1159640..c071e8a80 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 ( -
-
- Flotilla -
-
- -
-
- Mission Overview -
-
) + return ( +
+
+ + Flotilla + +
+
+ +
+
+ + Mission Overview + +
+
+ ); } -export default App +export default App; diff --git a/src/app.css b/src/app.css index 05987333e..e202a6570 100644 --- a/src/app.css +++ b/src/app.css @@ -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; +} diff --git a/src/components/RobotOverview/RobotOverview.tsx b/src/components/RobotOverview/RobotOverview.tsx index 2e1b90bc5..8183eb954 100644 --- a/src/components/RobotOverview/RobotOverview.tsx +++ b/src/components/RobotOverview/RobotOverview.tsx @@ -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 = ({ robot }: RobotProps) => { - const name = robot.robotInfo.name - const type = robot.robotInfo.type - const status = robot.status - const battery = robot.battery - return ( - - {name} - {type} - {status} - {battery} - - - ); + const name = robot.robotInfo.name; + const type = robot.robotInfo.type; + const status = robot.status; + const battery = robot.battery; + return ( + + {name} + {type} + {status} + + {battery} + + + + + + ); }; interface RobotOverviewProps { - robots: Robot[] + robots: Robot[]; } -const RobotOverview: React.FC = ({ robots }: RobotOverviewProps) => { - var robotComponnets = robots.map(function (robot) { - return - }); - return ( - - - Robot Overview - - - - {robotComponnets} - -
- ); +const RobotOverview: React.FC = ({ + robots, +}: RobotOverviewProps) => { + var rows = robots.map(function (robot) { + return ; + }); + return ( + + + Robot Overview + + + + {rows} + +
+ ); }; -export default RobotOverview +export default RobotOverview; diff --git a/src/components/RobotOverview/RobotOverviewHeader.tsx b/src/components/RobotOverview/RobotOverviewHeader.tsx index db86da43a..2c7208ce2 100644 --- a/src/components/RobotOverview/RobotOverviewHeader.tsx +++ b/src/components/RobotOverview/RobotOverviewHeader.tsx @@ -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 = ({ label, overideClassName }: RobotOverviewHeaderCellProps) => { - return ( - - {label} - - ) +const RobotOverviewHeaderCell: React.FC = ({ + label, + overideClassName, +}: RobotOverviewHeaderCellProps) => { + return ( + + {label} + + ); }; const RobotOverviewHeader = () => { - return ( - - - - - - - - - - ); + return ( + + + + + + + + + + ); }; export default RobotOverviewHeader; diff --git a/src/components/RobotOverview/robotOverview.module.css b/src/components/RobotOverview/robotOverview.module.css index ffadcdbc3..177c9873a 100644 --- a/src/components/RobotOverview/robotOverview.module.css +++ b/src/components/RobotOverview/robotOverview.module.css @@ -1,74 +1,74 @@ .tableWrapper { - width: 100%; - margin-top: 20px; + width: 100%; + margin-top: 20px; } .tableCaption { } .tableHeadWrapper { - display: block; - width: 100%; - table-layout: fixed; - border-bottom: none !important; + display: block; + width: 100%; + table-layout: fixed; + border-bottom: none !important; } .tableBodyWrapper { - height: 30rem; - width: 100%; - overflow-y: auto; - display: block; - height: calc(100vh - 354px); + height: 30rem; + width: 100%; + overflow-y: auto; + display: block; + height: calc(100vh - 354px); } .tableRowWrapper { - display: table; - table-layout: fixed; - width: 100%; - cursor: pointer; + display: table; + table-layout: fixed; + width: 100%; + cursor: pointer; } .tableCellWrapper { - overflow-x: hidden; + overflow-x: hidden; } .tableHeaderCell { - z-index: 2; - cursor: pointer; - overflow-x: hidden; + z-index: 2; + cursor: pointer; + overflow-x: hidden; } .tableNameCell { - width: 48px; + width: 48px; } .tableTypeCell { - width: 20%; - overflow-x: hidden; + width: 20%; + overflow-x: hidden; } .tableStatusCell { - width: 30%; - overflow-x: hidden; + width: 30%; + overflow-x: hidden; } .tableBatteryCell { - width: 10%; - overflow-x: hidden; + width: 10%; + overflow-x: hidden; } .tableInfoCell { - width: 10%; - overflow-x: hidden; + width: 10%; + overflow-x: hidden; } .activeTableHeaderCell { - background-color: var(--equiGray4) !important; - color: var(--asBuilt) !important; - border-bottom: 2px solid var(--asBuilt) !important; - overflow-x: hidden; + background-color: var(--equiGray4) !important; + color: var(--asBuilt) !important; + border-bottom: 2px solid var(--asBuilt) !important; + overflow-x: hidden; } .label { - margin-right: 24px; + margin-right: 24px; } diff --git a/src/index.tsx b/src/index.tsx index b72bdf6d3..e62bb1390 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,13 +1,12 @@ -import App from './App'; -import ReactDOM from 'react-dom'; -import React from 'react'; - +import App from "./App"; +import ReactDOM from "react-dom"; +import React from "react"; // ======================================== ReactDOM.render( - - - , - document.getElementById("root") + + + , + document.getElementById("root") ); diff --git a/src/models/pose.ts b/src/models/pose.ts index 221b97dd2..428243755 100644 --- a/src/models/pose.ts +++ b/src/models/pose.ts @@ -1,35 +1,35 @@ - export interface Position { - x: number; - y: number; - z: number; + x: number; + y: number; + z: number; } export interface Orientation { - x: number; - y: number; - z: number; - w: number; + x: number; + y: number; + z: number; + w: number; } export interface Pose { - position: Position - orientation: Orientation + position: Position; + orientation: Orientation; } export const defaultPosition: Position = { - x: 1, - y: 1, - z: 1 -} + x: 1, + y: 1, + z: 1, +}; export const defaultOrientation: Orientation = { - x: 0, - y: 0, - z: 0, - w: 1 -} + x: 0, + y: 0, + z: 0, + w: 1, +}; + export const defaultPose: Pose = { - position: defaultPosition, - orientation: defaultOrientation -} + position: defaultPosition, + orientation: defaultOrientation, +}; diff --git a/src/models/robot.ts b/src/models/robot.ts index 133acb8d1..016d6b139 100644 --- a/src/models/robot.ts +++ b/src/models/robot.ts @@ -1,48 +1,57 @@ -import { Pose, defaultPose } from "./pose" +import { Pose, defaultPose } from "./pose"; export enum RobotStatus { - Available = "Available", - Offline = "Offline", - MissionInProgress = "Mission in progress" + Available = "Available", + Offline = "Offline", + MissionInProgress = "Mission in progress", } export interface RobotInfo { - name: string; - type: string; + name: string; + type: string; } export class Robot { - robotInfo: RobotInfo - battery: number = 100 - pose: Pose = defaultPose - status: RobotStatus = RobotStatus.Available - - constructor(robotInfo: RobotInfo, battery: number, pose: Pose, status: RobotStatus) { - this.robotInfo = robotInfo - this.battery = battery - this.pose = pose - this.status = status - } + robotInfo: RobotInfo; + battery: number = 100; + pose: Pose = defaultPose; + status: RobotStatus = RobotStatus.Available; + + constructor( + robotInfo: RobotInfo, + battery: number, + pose: Pose, + status: RobotStatus + ) { + this.robotInfo = robotInfo; + this.battery = battery; + this.pose = pose; + this.status = status; + } } const taurobRobotInfo: RobotInfo = { - name: "William", - type: "Taurob" -} + name: "William", + type: "Taurob", +}; const exRobotInfo: RobotInfo = { - name: "Bertha", - type: "ExRobotics" -} + name: "Bertha", + type: "ExRobotics", +}; const turtleRobotInfo: RobotInfo = { - name: "Edward", - type: "TurtleBot" -} - + name: "Edward", + type: "TurtleBot", +}; export const defaultRobots: { [name: string]: Robot } = { - taurob: new Robot(taurobRobotInfo, 100, defaultPose, RobotStatus.Available), - exRobotics: new Robot(exRobotInfo, 59, defaultPose, RobotStatus.MissionInProgress), - turtle: new Robot(turtleRobotInfo, 0, defaultPose, RobotStatus.Offline) -} + taurob: new Robot(taurobRobotInfo, 100, defaultPose, RobotStatus.Available), + exRobotics: new Robot( + exRobotInfo, + 59, + defaultPose, + RobotStatus.MissionInProgress + ), + turtle: new Robot(turtleRobotInfo, 0, defaultPose, RobotStatus.Offline), +}; diff --git a/tsconfig.json b/tsconfig.json index e7b72b49f..5452a6dc0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -19,9 +15,7 @@ "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", - "baseUrl": "src", + "baseUrl": "src" }, - "include": [ - "src" - ] + "include": ["src"] }