From 5dbc869b386af20a42c444410532eb3ff30e4836 Mon Sep 17 00:00:00 2001
From: Nick Ng <ngyewch@gmail.com>
Date: Wed, 12 Aug 2020 12:48:32 +0800
Subject: [PATCH] UI cleanup

---
 .../components/content/DashboardComponent.js  | 32 +++++++++++++------
 .../content/DiagnosticsComponent.js           | 27 +++++++++-------
 .../src/components/script/ScriptControl.js    |  4 +--
 3 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/experiments/WebUI/src/components/content/DashboardComponent.js b/experiments/WebUI/src/components/content/DashboardComponent.js
index b85cf7a..31cae01 100644
--- 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
index aff55b4..29e2f15 100644
--- 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
index b839156..2e0d2e2 100644
--- 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"