diff options
| -rw-r--r-- | modern/src/App.js | 2 | ||||
| -rw-r--r-- | modern/src/DeviceList.js | 56 | ||||
| -rw-r--r-- | modern/src/DevicePage.js | 18 | ||||
| -rw-r--r-- | modern/src/MainPage.js | 2 | ||||
| -rw-r--r-- | modern/src/RemoveDialog.js | 27 | ||||
| -rw-r--r-- | modern/src/RouteReportPage.js | 11 |
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)); |