aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/src/App.js2
-rw-r--r--modern/src/DeviceList.js56
-rw-r--r--modern/src/DevicePage.js18
-rw-r--r--modern/src/MainPage.js2
-rw-r--r--modern/src/RemoveDialog.js27
-rw-r--r--modern/src/RouteReportPage.js11
6 files changed, 101 insertions, 15 deletions
diff --git a/modern/src/App.js b/modern/src/App.js
index 0a7ad12e..a7752823 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -4,6 +4,7 @@ import CssBaseline from '@material-ui/core/CssBaseline';
import MainPage from './MainPage';
import LoginPage from './LoginPage';
import RouteReportPage from './RouteReportPage';
+import DevicePage from './DevicePage';
class App extends Component {
render() {
@@ -13,6 +14,7 @@ class App extends Component {
<Switch>
<Route exact path='/' component={MainPage} />
<Route exact path='/login' component={LoginPage} />
+ <Route exact path='/device' component={DevicePage} />
<Route exact path='/reports/route' component={RouteReportPage} />
</Switch>
</Fragment>
diff --git a/modern/src/DeviceList.js b/modern/src/DeviceList.js
index 235ba229..a97e4fe3 100644
--- a/modern/src/DeviceList.js
+++ b/modern/src/DeviceList.js
@@ -1,3 +1,4 @@
+import t from './common/localization'
import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import List from '@material-ui/core/List';
@@ -10,6 +11,9 @@ import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import IconButton from '@material-ui/core/IconButton';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import Divider from '@material-ui/core/Divider';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import RemoveDialog from './RemoveDialog'
import { devicesActions } from './store';
const mapStateToProps = state => ({
@@ -17,14 +21,40 @@ const mapStateToProps = state => ({
});
class DeviceList extends Component {
- handleClick(device) {
+ constructor(props) {
+ super(props);
+ this.state = {
+ menuAnchorEl: null,
+ removeDialogOpen: false
+ };
+ }
+
+ handleItemClick(device) {
this.props.dispatch(devicesActions.select(device));
}
+ handleMenuClick(event) {
+ this.setState({ menuAnchorEl: event.currentTarget });
+ }
+
+ handleMenuClose() {
+ this.setState({ menuAnchorEl: null });
+ }
+
+ handleMenuEdit() {
+ this.props.history.push('/device');
+ this.handleMenuClose();
+ }
+
+ handleMenuRemove() {
+ this.setState({ removeDialogOpen: true });
+ this.handleMenuClose();
+ }
+
render() {
const devices = this.props.devices.map((device, index, list) =>
<Fragment key={device.id.toString()}>
- <ListItem button onClick={(e) => this.handleClick(device)}>
+ <ListItem button onClick={() => this.handleItemClick(device)}>
<ListItemAvatar>
<Avatar>
<LocationOnIcon />
@@ -32,7 +62,7 @@ class DeviceList extends Component {
</ListItemAvatar>
<ListItemText primary={device.name} secondary={device.uniqueId} />
<ListItemSecondaryAction>
- <IconButton>
+ <IconButton onClick={(event) => this.handleMenuClick(event)}>
<MoreVertIcon />
</IconButton>
</ListItemSecondaryAction>
@@ -42,9 +72,23 @@ class DeviceList extends Component {
);
return (
- <List>
- {devices}
- </List>
+ <Fragment>
+ <List>
+ {devices}
+ </List>
+ <Menu
+ id="device-menu"
+ anchorEl={this.state.menuAnchorEl}
+ keepMounted
+ open={Boolean(this.state.menuAnchorEl)}
+ onClose={() => this.handleMenuClose()}>
+ <MenuItem onClick={() => this.handleMenuEdit()}>{t('sharedEdit')}</MenuItem>
+ <MenuItem onClick={() => this.handleMenuRemove()}>{t('sharedRemove')}</MenuItem>
+ </Menu>
+ <RemoveDialog
+ open={this.state.removeDialogOpen}
+ onClose={() => { this.setState({ removeDialogOpen: false }) }} />
+ </Fragment>
);
}
}
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
new file mode 100644
index 00000000..73f1dc86
--- /dev/null
+++ b/modern/src/DevicePage.js
@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+import MainToobar from './MainToolbar';
+import withStyles from '@material-ui/core/styles/withStyles';
+import withWidth from '@material-ui/core/withWidth';
+
+const styles = theme => ({});
+
+class DevicePage extends Component {
+ render() {
+ return (
+ <div>
+ <MainToobar history={this.props.history} />
+ </div>
+ );
+ }
+}
+
+export default withWidth()(withStyles(styles)(DevicePage));
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 450a5e00..e0b4da2c 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -74,7 +74,7 @@ class MainPage extends Component {
anchor={isWidthUp('sm', this.props.width) ? "left" : "bottom"}
variant="permanent"
classes={{ paper: classes.drawerPaper }}>
- <DeviceList />
+ <DeviceList history={this.props.history} />
</Drawer>
<div className={classes.mapContainer}>
<ContainerDimensions>
diff --git a/modern/src/RemoveDialog.js b/modern/src/RemoveDialog.js
new file mode 100644
index 00000000..26bdeb55
--- /dev/null
+++ b/modern/src/RemoveDialog.js
@@ -0,0 +1,27 @@
+import t from './common/localization'
+import React, { Component } from 'react';
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+
+class RemoveDialog extends Component {
+ render() {
+ return (
+ <Dialog
+ open={this.props.open}
+ onClose={() => { this.props.onClose() }}>
+ <DialogContent>
+ <DialogContentText>{t('sharedRemoveConfirm')}</DialogContentText>
+ </DialogContent>
+ <DialogActions>
+ <Button color="primary">{t('sharedRemove')}</Button>
+ <Button color="primary" autoFocus>{t('sharedCancel')}</Button>
+ </DialogActions>
+ </Dialog>
+ );
+ }
+}
+
+export default RemoveDialog;
diff --git a/modern/src/RouteReportPage.js b/modern/src/RouteReportPage.js
index c444ffbc..86eeaaa0 100644
--- a/modern/src/RouteReportPage.js
+++ b/modern/src/RouteReportPage.js
@@ -1,16 +1,11 @@
import React, { Component } from 'react';
-import ContainerDimensions from 'react-container-dimensions';
import MainToobar from './MainToolbar';
-import MainMap from './MainMap';
-import Drawer from '@material-ui/core/Drawer';
import withStyles from '@material-ui/core/styles/withStyles';
-import SocketController from './SocketController';
-import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
-import DeviceList from './DeviceList';
+import withWidth from '@material-ui/core/withWidth';
const styles = theme => ({});
-class ReouteReportPage extends Component {
+class RouteReportPage extends Component {
render() {
return (
<div>
@@ -20,4 +15,4 @@ class ReouteReportPage extends Component {
}
}
-export default withWidth()(withStyles(styles)(ReouteReportPage));
+export default withWidth()(withStyles(styles)(RouteReportPage));