43 lines
1.2 KiB
JavaScript
43 lines
1.2 KiB
JavaScript
// @flow
|
|
import React from "react";
|
|
import AppBar from "material-ui/AppBar";
|
|
import Toolbar from 'material-ui/Toolbar';
|
|
import { CircularProgress } from "material-ui/Progress";
|
|
import IconButton from "material-ui/IconButton";
|
|
import Menu, { MenuItem } from "material-ui/Menu";
|
|
import Typography from 'material-ui/Typography';
|
|
|
|
const TopBarLayerSelector = (props: Object) => (
|
|
<IconButton>
|
|
<Icon>layers</Icon>
|
|
</IconButton>
|
|
)
|
|
|
|
const TopBarIndicatorMenu = (props: Object) => (
|
|
<IconButton>
|
|
{props.mqtt.connected ?
|
|
(<i style={{fontSize: 48}} className="mdi mdi-map"></i>) :
|
|
(<i style={{fontSize: 48}} className="mdi mdi-lan-disconnect"></i>)}
|
|
</IconButton>
|
|
);
|
|
|
|
|
|
const TopBarIndicator = (props: Object) => {
|
|
if (props.mqtt == null || props.mqtt.reconnecting) {
|
|
return (<CircularProgress size={48} style={{color: "rgba(0, 0, 0, 0.54)"}} />);
|
|
} else {
|
|
return (<TopBarIndicatorMenu {...props} />);
|
|
}
|
|
};
|
|
|
|
const TopBar = (props: Object) => (
|
|
<AppBar position="static">
|
|
<Toolbar>
|
|
<TopBarIndicator {...props} />
|
|
<Typography type="title">{props.title}</Typography>
|
|
{false && <TopBarLayerSelector {...props} />}
|
|
</Toolbar>
|
|
</AppBar>
|
|
);
|
|
|
|
export default TopBar;
|