+
+
+ {/* Sidebar options */}
+
+
+
+
+ window.open('https://simengine.readthedocs.io/en/latest/')}>
+
+
+
+
+
+
+ );
+ }
+}
+
+
+SettingsOption.propTypes = {
+ classes: PropTypes.object, // styling
+ saveLayout: PropTypes.func.isRequired, // drawer Save Layout callback
+};
+
+export default SettingsOption;
diff --git a/dashboard/frontend/src/components/Navigation/SysStatusOption.js b/dashboard/frontend/src/components/Navigation/SysStatusOption.js
new file mode 100644
index 00000000..38b329c4
--- /dev/null
+++ b/dashboard/frontend/src/components/Navigation/SysStatusOption.js
@@ -0,0 +1,87 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { AcUnit, PowerSettingsNew, ArrowDownward, ArrowUpward } from "@material-ui/icons";
+import { Grid, Typography, Fade } from '@material-ui/core';
+
+// local imports
+import PowerSwitch from '../common/PowerSwitch';
+import colors from '../../styles/colors';
+
+/**
+ * Top-Right Nav options
+ */
+const SysStatusOption = ({ mainsStatus, ambient, ambientRising, flash, togglePower }) => {
+ return (
+
+
+ {/* Wall power status */}
+
+ togglePower(!mainsStatus)}
+ label={
+
+
+ The Mains:
+
+ {" "}{mainsStatus?"online":"offline"}
+
+
+ }
+ />
+
+
+ {/* Ambient Temperature */}
+
+
+
+ 27)?styles.heating:styles.cooling}>{ambient}°
+
+ {ambientRising
+ ?
+ :
+ }
+
+
+
+
+
+ );
+};
+
+const styles = {
+ inlineIcon: {
+ marginRight: '0.3em',
+ marginBottom: '-0.2em',
+ fontSize: 22
+ },
+ cooling: {
+ color: colors.blue
+ },
+ heating: {
+ color: colors.red
+ },
+ online: {
+ color: colors.green
+ },
+ menuOptions: {
+ padding: '0.7em',
+ },
+ tempGauge: {
+ borderColor:"white",
+ borderLeftStyle: 'solid',
+ }
+};
+
+
+SysStatusOption.propTypes = {
+ classes: PropTypes.object, // styling
+ togglePower: PropTypes.func.isRequired, // on mains update
+ ambient: PropTypes.number.isRequired, // room temp
+ ambientRising: PropTypes.bool.isRequired, // is room temp going up?
+ mainsStatus: PropTypes.bool.isRequired, // mains power source status
+ flash: PropTypes.bool.isRequired, // indicates if temp arrow should be flashing
+};
+
+export default SysStatusOption;
diff --git a/dashboard/frontend/src/components/Navigation/TopNav.js b/dashboard/frontend/src/components/Navigation/TopNav.js
new file mode 100644
index 00000000..bdaede0a
--- /dev/null
+++ b/dashboard/frontend/src/components/Navigation/TopNav.js
@@ -0,0 +1,110 @@
+import React, { Fragment } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+// Material imports
+import { withStyles } from '@material-ui/core/styles';
+import { AppBar, Toolbar, Typography } from '@material-ui/core';
+
+// local imports
+import SettingsOption from './SettingsOption';
+import SysStatusOption from './SysStatusOption';
+
+
+class TopNav extends React.Component {
+
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ ambientRising: false,
+ lastTempChange: new Date(),
+ flash: false,
+ };
+
+ this.flashArrow = null;
+ }
+
+ componentWillReceiveProps(newProps) {
+ /** Flash temperature arrow */
+
+ if (newProps.ambient == this.props.ambient) { return; }
+ const elapsedSinceLastTemp = new Date() - this.state.lastTempChange;
+
+ clearInterval(this.flashArrow);
+
+ // flash arrow icon on temp changes
+ this.flashArrow = setInterval(() => {
+ this.setState(() => ({flash: true}));
+ setTimeout(() => {
+ this.setState(() => ({flash: false}));
+ }, elapsedSinceLastTemp*0.5*0.8);
+ }, elapsedSinceLastTemp*0.5);
+
+
+ // stop flashing arrow after a while (max is 1 minute)
+ const maxFlashingTime = 60*1000;
+
+ setTimeout(() => {
+ clearInterval(this.flashArrow);
+ this.setState({ flash: false, ambientRising: false });
+
+ }, (elapsedSinceLastTemp > maxFlashingTime?maxFlashingTime:elapsedSinceLastTemp));
+
+ this.setState({
+ ambientRising: newProps.ambientRising,
+ lastTempChange: new Date(),
+ });
+ }
+
+ render() {
+ const { classes } = this.props;
+
+ return (
+
+
+
+
+ HAos Simulation Engine
+
+ {/* Gear openning a drawer */}
+
+
+
+
+ {/* Top-right nav options*/}
+
+
+
+
+
+
+ );
+ }
+}
+
+const styles = {
+ grow: {
+ flexGrow: 1,
+ },
+};
+
+TopNav.propTypes = {
+ classes: PropTypes.object, // styling
+ saveLayout: PropTypes.func.isRequired, // drawer Save Layout callback
+ ambient: PropTypes.number.isRequired, // room temp
+ ambientRising: PropTypes.bool.isRequired, // is room temp going up?
+ mainsStatus: PropTypes.bool.isRequired, // mains power source status
+ togglePower: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(TopNav);
diff --git a/dashboard/frontend/src/components/Notifications.js b/dashboard/frontend/src/components/Notifications.js
new file mode 100644
index 00000000..62f8e1ba
--- /dev/null
+++ b/dashboard/frontend/src/components/Notifications.js
@@ -0,0 +1,42 @@
+
+import React from 'react';
+import Snackbar from '@material-ui/core/Snackbar';
+import PropTypes from 'prop-types';
+
+
+const Notifications = ({ anchorOrigin, displayedSnackbars }) => {
+
+ const open = !!Object.keys(displayedSnackbars).find((k)=>displayedSnackbars[k]);
+ let snackbarMessage = '';
+
+ if (displayedSnackbars.socketOffline) {
+ snackbarMessage =
Socket is unavailable: trying to reconnect...;
+
+ } else if (displayedSnackbars.changesSaved) {
+ snackbarMessage =
Changes saved!;
+
+ } else if (displayedSnackbars.layoutEmpty) {
+ snackbarMessage = (
+
+ The system toplology appears to be empty.
+ Please, refer to the documentation (System Modelling
+ link)
+
+ );
+ }
+
+ return (
+
+ );
+};
+
+Notifications.propTypes = {
+ anchorOrigin: PropTypes.object.isRequired, // notification position
+ displayedSnackbars: PropTypes.object.isRequired, // indicates what snackbar message
+};
+
+export default Notifications;
diff --git a/dashboard/frontend/src/components/TopNav.js b/dashboard/frontend/src/components/TopNav.js
deleted file mode 100644
index 6a52fd31..00000000
--- a/dashboard/frontend/src/components/TopNav.js
+++ /dev/null
@@ -1,208 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-// Material imports
-import { withStyles } from '@material-ui/core/styles';
-import { Settings, AcUnit, PowerSettingsNew, ArrowDownward, ArrowUpward } from "@material-ui/icons";
-// import s from "@material-ui/icons/ArrowUpward";
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import IconButton from '@material-ui/core/IconButton';
-import Typography from '@material-ui/core/Typography';
-import Grid from '@material-ui/core/Grid';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import { Divider, Drawer, Fade } from '@material-ui/core';
-
-// local imports
-import colors from '../styles/colors';
-import PowerSwitch from './common/PowerSwitch';
-
-
-class TopNav extends React.Component {
-
- constructor(props) {
- super(props);
-
- this.state = {
- drawerAnchor: null,
- ambientRising: false,
- lastTempChange: new Date(),
- flash: false,
- };
-
- this.flashArrow = null;
- }
-
- componentWillReceiveProps(newProps) {
-
- if (newProps.ambient == this.props.ambient) { return; }
- const elapsedSinceLastTemp = new Date() - this.state.lastTempChange;
-
- clearInterval(this.flashArrow);
-
- // flash arrow icon on temp changes
- this.flashArrow = setInterval(() => {
- this.setState(() => ({flash: true}));
- setTimeout(() => {
- this.setState(() => ({flash: false}));
- }, elapsedSinceLastTemp*0.5*0.8);
- }, elapsedSinceLastTemp*0.5);
-
-
- // stop flashing arrow after a while (max is 1 minute)
- const maxFlashingTime = 60*1000;
-
- setTimeout(() => {
- clearInterval(this.flashArrow);
- this.setState({ flash: false, ambientRising: false });
-
- }, (elapsedSinceLastTemp > maxFlashingTime?maxFlashingTime:elapsedSinceLastTemp));
-
- this.setState({
- ambientRising: newProps.ambientRising,
- lastTempChange: new Date(),
- });
- }
-
- handleMenu = event => {
- this.setState({ drawerAnchor: event.currentTarget });
- };
-
- handleDrawerClose = () => {
- this.setState({ drawerAnchor: null });
- };
-
- render() {
-
- const { classes } = this.props;
-
- const { drawerAnchor } = this.state;
- const drawerOpen = Boolean(drawerAnchor);
-
- return (
-
-
-
-
- HAos Simulation Engine
-
-
-
-
-
-
-
-
-
-
- this.props.togglePower(!this.props.mainsStatus)}
- label={
-
-
- The Mains:
-
- {" "}{this.props.mainsStatus?"online":"offline"}
-
-
- }
- />
-
-
-
-
- 27)?styles.heating:styles.cooling}>{this.props.ambient}°
-
- {this.state.ambientRising
- ?
- :
- }
-
-
-
-
-
-