Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[UI] UI cleanup #53

Merged
merged 1 commit into from
Aug 12, 2020
Merged

[UI] UI cleanup #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 23 additions & 9 deletions experiments/WebUI/src/components/content/DashboardComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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;
}
}

Expand Down
27 changes: 16 additions & 11 deletions experiments/WebUI/src/components/content/DiagnosticsComponent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 = {
Expand Down Expand Up @@ -95,7 +97,7 @@ function getSubStatusIcon(value) {
}

class DiagnosticsComponent
extends React.Component {
extends PureComponent {

constructor(props, context) {
super(props, context);
Expand All @@ -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);
Expand All @@ -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"
Expand Down Expand Up @@ -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;
4 changes: 2 additions & 2 deletions experiments/WebUI/src/components/script/ScriptControl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ class ScriptControl
}

componentDidMount() {
document.title = TITLE;
this._updateVehicleId(null);

this.gateway.addConnListener((connected) => {
if (connected) {
Expand Down Expand Up @@ -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"
Expand Down