Merge pull request #53 from org-arl/feature/webui-ui-cleanup

[UI] UI cleanup
org-arl · Aug 12, 2020 · 6093285 · 6093285
2 parents 658deb9 + 5dbc869
commit 6093285
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 22 deletions.
diff --git a/experiments/WebUI/src/components/content/DashboardComponent.js b/experiments/WebUI/src/components/content/DashboardComponent.js
@@ -11,11 +11,25 @@ import FrontIcon from "../../assets/img/submarine-front-view.svg";
 import D3BearingComponent from "./D3BearingComponent";
 import D3GaugeComponent from "./D3GaugeComponent";
 
+const TITLE = "Dashboard";
+
 const styles = StyleSheet.create({
-    container0: {
-        padding: "1em",
-    },
     container: {
+        width: "100%",
+        height: "100vh",
+        display: "flex",
+        flexDirection: "column",
+    },
+    content: {
+        flexGrow: 1,
+        flexShrink: 1,
+        flexBasis: "auto",
+        height: "100%",
+        overflowX: "auto",
+        overflowY: "auto",
+    },
+    gaugesContainer: {
+        padding: "1em",
         display: "flex",
         flexDirection: "row",
         flexWrap: "wrap",
@@ -154,9 +168,9 @@ class DashboardComponent
 
     render() {
         return (
-            <div>
+            <div className={css(styles.container)}>
                 <Navbar bg="light">
-                    <Navbar.Brand>Dashboard</Navbar.Brand>
+                    <Navbar.Brand>{TITLE}</Navbar.Brand>
                     <Navbar.Collapse className="justify-content-end">
                         <ButtonToolbar>
                             <Button title="Refresh"
@@ -168,10 +182,10 @@ class DashboardComponent
                         </ButtonToolbar>
                     </Navbar.Collapse>
                 </Navbar>
-                <div className={css(styles.container0)}>
+                <div className={css(styles.content)}>
                     <HotKeys keyMap={this.keyMap}
                              handlers={this.hotkeyHandlers}>
-                        <div className={css(styles.container)}>
+                        <div className={css(styles.gaugesContainer)}>
                             <div className={css(styles.gaugeContainer)}>
                                 <D3AngularComponent title="Roll"
                                                     ref="Roll"
@@ -284,9 +298,9 @@ class DashboardComponent
 
     _updateVehicleId(vehicleId) {
         if (vehicleId) {
-            document.title = vehicleId + " Dashboard";
+            document.title = vehicleId + " " + TITLE;
         } else {
-            document.title = "Dashboard";
+            document.title = TITLE;
         }
     }
 

diff --git a/experiments/WebUI/src/components/content/DiagnosticsComponent.js b/experiments/WebUI/src/components/content/DiagnosticsComponent.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {PureComponent} from 'react'
 import {Button, ButtonToolbar, Navbar, Table} from 'react-bootstrap';
 
 import {FjageHelper} from "../../assets/fjageHelper.js";
@@ -9,6 +9,8 @@ import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
 import {faCheck, faSync, faTimes} from '@fortawesome/free-solid-svg-icons'
 import {toast} from "react-toastify";
 
+const TITLE = "Diagnostics";
+
 toast.configure();
 
 const TOAST_OPTIONS = {
@@ -95,7 +97,7 @@ function getSubStatusIcon(value) {
 }
 
 class DiagnosticsComponent
-    extends React.Component {
+    extends PureComponent {
 
     constructor(props, context) {
         super(props, context);
@@ -108,14 +110,15 @@ class DiagnosticsComponent
     }
 
     componentDidMount() {
+        this._updateVehicleId(null);
+
         this.gateway.addConnListener((connected) => {
             if (connected) {
                 this.management = new Management(this.gateway);
 
                 this.management.getVehicleId()
                     .then(vehicleId => {
-                        console.log('vehicleId', vehicleId);
-                        this.vehicleId = vehicleId;
+                        this._updateVehicleId(vehicleId);
                     })
                     .catch(reason => {
                         console.log('could not get vehicle ID', reason);
@@ -131,18 +134,12 @@ class DiagnosticsComponent
     }
 
     render() {
-        if (this.vehicleId) {
-            document.title = this.vehicleId + " Diagnostics";
-        } else {
-            document.title = "Diagnostics";
-        }
-
         const errorClass = css(styles.errorRow);
 
         return (
             <div className={css(styles.container)}>
                 <Navbar bg="light">
-                    <Navbar.Brand>Diagnostics</Navbar.Brand>
+                    <Navbar.Brand>{TITLE}</Navbar.Brand>
                     <Navbar.Collapse className="justify-content-end">
                         <ButtonToolbar>
                             <Button title="Refresh"
@@ -205,6 +202,14 @@ class DiagnosticsComponent
                 toast.error("Failed to refresh diagnostics", TOAST_OPTIONS);
             });
     }.bind(this);
+
+    _updateVehicleId(vehicleId) {
+        if (vehicleId) {
+            document.title = vehicleId + " " + TITLE;
+        } else {
+            document.title = TITLE;
+        }
+    }
 }
 
 export default DiagnosticsComponent;
diff --git a/experiments/WebUI/src/components/script/ScriptControl.js b/experiments/WebUI/src/components/script/ScriptControl.js
@@ -69,7 +69,7 @@ class ScriptControl
     }
 
     componentDidMount() {
-        document.title = TITLE;
+        this._updateVehicleId(null);
 
         this.gateway.addConnListener((connected) => {
             if (connected) {
@@ -98,7 +98,7 @@ class ScriptControl
                        initialSizes={this.state.initialSizes}>
                 <div className={css(styles.container)}>
                     <Navbar bg="light">
-                        <Navbar.Brand>Script Control</Navbar.Brand>
+                        <Navbar.Brand>{TITLE}</Navbar.Brand>
                         <Navbar.Collapse className="justify-content-end">
                             <ButtonToolbar>
                                 <Button title="Load script from vehicle"