Partially implement device menu

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));