From 6bee8cb1944677f8c3ede0a0bf799c92b86e08a0 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton.tananaev@gmail.com>
Date: Wed, 25 Mar 2020 00:50:37 -0700
Subject: Simple localization support

---
 modern/craco.config.js            |  12 ++++
 modern/package.json               |   8 +--
 modern/src/LoginPage.js           |   9 +--
 modern/src/MainToolbar.js         |   9 +--
 modern/src/common/localization.js | 125 ++++++++++++++++++++++++++++++++++++++
 5 files changed, 151 insertions(+), 12 deletions(-)
 create mode 100644 modern/craco.config.js
 create mode 100644 modern/src/common/localization.js

(limited to 'modern')

diff --git a/modern/craco.config.js b/modern/craco.config.js
new file mode 100644
index 0000000..3e5d98e
--- /dev/null
+++ b/modern/craco.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  webpack: {
+    configure: webpackConfig => {
+      const scopePluginIndex = webpackConfig.resolve.plugins.findIndex(
+        ({ constructor }) => constructor && constructor.name === 'ModuleScopePlugin'
+      );
+
+      webpackConfig.resolve.plugins.splice(scopePluginIndex, 1);
+      return webpackConfig;
+    }
+  }
+};
diff --git a/modern/package.json b/modern/package.json
index 90b03d3..02b080a 100644
--- a/modern/package.json
+++ b/modern/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^5.6.4",
     "@material-ui/core": "^4.9.7",
     "@material-ui/icons": "^4.9.1",
     "@reduxjs/toolkit": "^1.2.5",
@@ -19,10 +20,9 @@
     "typeface-roboto": "0.0.75"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test"
   },
   "browserslist": {
     "production": [
diff --git a/modern/src/LoginPage.js b/modern/src/LoginPage.js
index c094fa3..8104aa3 100644
--- a/modern/src/LoginPage.js
+++ b/modern/src/LoginPage.js
@@ -1,3 +1,4 @@
+import t from './common/localization'
 import React, { Component } from 'react';
 import Button from '@material-ui/core/Button';
 import FormHelperText from '@material-ui/core/FormHelperText';
@@ -95,7 +96,7 @@ class LoginPage extends Component {
           <form onSubmit={this.handleLogin}>
 
             <FormControl margin="normal" required fullWidth error={failed}>
-              <InputLabel htmlFor="email">Email</InputLabel>
+              <InputLabel htmlFor="email">{t('userEmail')}</InputLabel>
               <Input
                 id="email"
                 value={email}
@@ -106,7 +107,7 @@ class LoginPage extends Component {
             </FormControl>
 
             <FormControl margin="normal" required fullWidth>
-              <InputLabel htmlFor="password">Password</InputLabel>
+              <InputLabel htmlFor="password">{t('userPassword')}</InputLabel>
               <Input
                 id="password"
                 type="password"
@@ -123,7 +124,7 @@ class LoginPage extends Component {
                 disabled
                 className={classes.button}
                 onClick={this.handleRegister}>
-                Register
+                {t('loginRegister')}
               </Button>
 
               <Button
@@ -132,7 +133,7 @@ class LoginPage extends Component {
                 color="primary"
                 disabled={!email || !password}
                 className={classes.button}>
-                Login
+                {t('loginLogin')}
               </Button>
 
             </div>
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 6e2e4d6..41382b0 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -1,3 +1,4 @@
+import t from './common/localization'
 import React, { Component, Fragment } from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
@@ -80,7 +81,7 @@ class MainToobar extends Component {
             <Typography variant="h6" color="inherit" className={classes.flex}>
               Traccar
             </Typography>
-            <Button color="inherit" onClick={this.handleLogout}>Logout</Button>
+            <Button color="inherit" onClick={this.handleLogout}>{t('loginLogout')}</Button>
           </Toolbar>
         </AppBar>
         <Drawer open={this.state.drawer} onClose={this.closeDrawer}>
@@ -95,13 +96,13 @@ class MainToobar extends Component {
                 <ListItemIcon>
                   <DashboardIcon />
                 </ListItemIcon>
-                <ListItemText primary="Dashboard" />
+                <ListItemText primary={t('mapTitle')} />
               </ListItem>
               <ListItem button disabled>
                 <ListItemIcon>
                   <BarChartIcon />
                 </ListItemIcon>
-                <ListItemText primary="Reports" />
+                <ListItemText primary={t('reportTitle')} />
               </ListItem>
             </List>
             <Divider />
@@ -110,7 +111,7 @@ class MainToobar extends Component {
                 <ListItemIcon>
                   <SettingsIcon />
                 </ListItemIcon>
-                <ListItemText primary="Settings" />
+                <ListItemText primary={t('settingsTitle')} />
               </ListItem>
             </List>
           </div>
diff --git a/modern/src/common/localization.js b/modern/src/common/localization.js
new file mode 100644
index 0000000..eb8fc1d
--- /dev/null
+++ b/modern/src/common/localization.js
@@ -0,0 +1,125 @@
+import ar from '../../../web/l10n/ar.json';
+import az from '../../../web/l10n/az.json';
+import bg from '../../../web/l10n/bg.json';
+import bn from '../../../web/l10n/bn.json';
+import cs from '../../../web/l10n/cs.json';
+import da from '../../../web/l10n/da.json';
+import de from '../../../web/l10n/de.json';
+import el from '../../../web/l10n/el.json';
+import en from '../../../web/l10n/en.json';
+import es from '../../../web/l10n/es.json';
+import fa from '../../../web/l10n/fa.json';
+import fi from '../../../web/l10n/fi.json';
+import fr from '../../../web/l10n/fr.json';
+import he from '../../../web/l10n/he.json';
+import hi from '../../../web/l10n/hi.json';
+import hr from '../../../web/l10n/hr.json';
+import hu from '../../../web/l10n/hu.json';
+import id from '../../../web/l10n/id.json';
+import it from '../../../web/l10n/it.json';
+import ja from '../../../web/l10n/ja.json';
+import ka from '../../../web/l10n/ka.json';
+import kk from '../../../web/l10n/kk.json';
+import km from '../../../web/l10n/km.json';
+import ko from '../../../web/l10n/ko.json';
+import lo from '../../../web/l10n/lo.json';
+import lt from '../../../web/l10n/lt.json';
+import lv from '../../../web/l10n/lv.json';
+import ml from '../../../web/l10n/ml.json';
+import ms from '../../../web/l10n/ms.json';
+import nb from '../../../web/l10n/nb.json';
+import ne from '../../../web/l10n/ne.json';
+import nl from '../../../web/l10n/nl.json';
+import nn from '../../../web/l10n/nn.json';
+import pl from '../../../web/l10n/pl.json';
+import pt from '../../../web/l10n/pt.json';
+import pt_BR from '../../../web/l10n/pt_BR.json';
+import ro from '../../../web/l10n/ro.json';
+import ru from '../../../web/l10n/ru.json';
+import si from '../../../web/l10n/si.json';
+import sk from '../../../web/l10n/sk.json';
+import sl from '../../../web/l10n/sl.json';
+import sq from '../../../web/l10n/sq.json';
+import sr from '../../../web/l10n/sr.json';
+import sv from '../../../web/l10n/sv.json';
+import ta from '../../../web/l10n/ta.json';
+import th from '../../../web/l10n/th.json';
+import tr from '../../../web/l10n/tr.json';
+import uk from '../../../web/l10n/uk.json';
+import uz from '../../../web/l10n/uz.json';
+import vi from '../../../web/l10n/vi.json';
+import zh from '../../../web/l10n/zh.json';
+import zh_TW from '../../../web/l10n/zh_TW.json';
+
+const supportedLanguages = {
+    'ar': { data: ar, name: 'العربية' },
+    'az': { data: az, name: 'Azərbaycanca' },
+    'bg': { data: bg, name: 'Български' },
+    'bn': { data: bn, name: 'বাংলা' },
+    'cs': { data: cs, name: 'Čeština' },
+    'de': { data: de, name: 'Deutsch' },
+    'da': { data: da, name: 'Dansk' },
+    'el': { data: el, name: 'Ελληνικά' },
+    'en': { data: en, name: 'English' },
+    'es': { data: es, name: 'Español' },
+    'fa': { data: fa, name: 'فارسی' },
+    'fi': { data: fi, name: 'Suomi' },
+    'fr': { data: fr, name: 'Français' },
+    'he': { data: he, name: 'עברית' },
+    'hi': { data: hi, name: 'हिन्दी' },
+    'hr': { data: hr, name: 'Hrvatski' },
+    'hu': { data: hu, name: 'Magyar' },
+    'id': { data: id, name: 'Bahasa Indonesia' },
+    'it': { data: it, name: 'Italiano' },
+    'ja': { data: ja, name: '日本語' },
+    'ka': { data: ka, name: 'ქართული' },
+    'kk': { data: kk, name: 'Қазақша' },
+    'ko': { data: ko, name: '한국어' },
+    'km': { data: km, name: 'ភាសាខ្មែរ' },
+    'lo': { data: lo, name: 'ລາວ' },
+    'lt': { data: lt, name: 'Lietuvių' },
+    'lv': { data: lv, name: 'Latviešu' },
+    'ml': { data: ml, name: 'മലയാളം' },
+    'ms': { data: ms, name: 'بهاس ملايو' },
+    'nb': { data: nb, name: 'Norsk bokmål' },
+    'ne': { data: ne, name: 'नेपाली' },
+    'nl': { data: nl, name: 'Nederlands' },
+    'nn': { data: nn, name: 'Norsk nynorsk' },
+    'pl': { data: pl, name: 'Polski' },
+    'pt': { data: pt, name: 'Português' },
+    'pt_BR': { data: pt_BR, name: 'Português (Brasil)' },
+    'ro': { data: ro, name: 'Română' },
+    'ru': { data: ru, name: 'Русский' },
+    'si': { data: si, name: 'සිංහල' },
+    'sk': { data: sk, name: 'Slovenčina' },
+    'sl': { data: sl, name: 'Slovenščina' },
+    'sq': { data: sq, name: 'Shqipëria' },
+    'sr': { data: sr, name: 'Srpski' },
+    'sv': { data: sv, name: 'Svenska' },
+    'ta': { data: ta, name: 'தமிழ்' },
+    'th': { data: th, name: 'ไทย' },
+    'tr': { data: tr, name: 'Türkçe' },
+    'uk': { data: uk, name: 'Українська' },
+    'uz': { data: uz, name: 'Oʻzbekcha' },
+    'vi': { data: vi, name: 'Tiếng Việt' },
+    'zh': { data: zh, name: '中文' },
+    'zh_TW': { data: zh_TW, name: '中文 (Taiwan)' }
+};
+
+const languages = window.navigator.languages !== undefined ? window.navigator.languages.slice() : [];
+let language = window.navigator.userLanguage || window.navigator.language;
+languages.push(language);
+languages.push(language.substr(0, 2));
+languages.push('en');
+for (let i = 0; i < languages.length; i++) {
+    language = languages[i].replace('-', '_');
+    if (language in supportedLanguages) {
+        break;
+    }
+}
+
+const selectedLanguage = supportedLanguages[language];
+
+export default key => {
+    return selectedLanguage.data[key]
+};
-- 
cgit v1.2.3


From 1fc11fb0cc8bade149fa1724aa1fc33d95b772ce Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton.tananaev@gmail.com>
Date: Wed, 25 Mar 2020 23:14:47 -0700
Subject: Fix issues with no devices

---
 modern/src/MainMap.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

(limited to 'modern')

diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index 01230da..aea6dd8 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -116,14 +116,17 @@ class MainMap extends Component {
 
     this.map.addControl(new mapboxgl.NavigationControl());
 
-    this.map.fitBounds(this.calculateBounds(), {
-      padding: 100,
-      maxZoom: 9
-    });
+    const bounds = this.calculateBounds();
+    if (bounds) {
+      this.map.fitBounds(bounds, {
+        padding: 100,
+        maxZoom: 9
+      });
+    }
   }
 
   calculateBounds() {
-    if (this.props.data.features) {
+    if (this.props.data.features && this.props.data.features.length) {
       const first = this.props.data.features[0].geometry.coordinates;
       const bounds = [[...first], [...first]];
       for (let feature of this.props.data.features) {
@@ -142,7 +145,7 @@ class MainMap extends Component {
       }
       return bounds;
     } else {
-      return [[0, 0], [0, 0]];
+      return null;
     }
   }
 
-- 
cgit v1.2.3


From 94e7e64ec481cd004546f02869c1c0dd2904a406 Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton.tananaev@gmail.com>
Date: Wed, 25 Mar 2020 23:50:06 -0700
Subject: Add menu options

---
 modern/src/App.js             |  2 ++
 modern/src/MainToolbar.js     | 64 ++++++++++++++++++++++++++++++++++++++++---
 modern/src/RouteReportPage.js | 23 ++++++++++++++++
 3 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 modern/src/RouteReportPage.js

(limited to 'modern')

diff --git a/modern/src/App.js b/modern/src/App.js
index 31b8b69..0a7ad12 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -3,6 +3,7 @@ import { Switch, Route } from 'react-router-dom'
 import CssBaseline from '@material-ui/core/CssBaseline';
 import MainPage from './MainPage';
 import LoginPage from './LoginPage';
+import RouteReportPage from './RouteReportPage';
 
 class App extends Component {
   render() {
@@ -12,6 +13,7 @@ class App extends Component {
         <Switch>
           <Route exact path='/' component={MainPage} />
           <Route exact path='/login' component={LoginPage} />
+          <Route exact path='/reports/route' component={RouteReportPage} />
         </Switch>
       </Fragment>
     );
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 41382b0..fc3281c 100644
--- a/modern/src/MainToolbar.js
+++ b/modern/src/MainToolbar.js
@@ -9,6 +9,7 @@ import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import Drawer from '@material-ui/core/Drawer';
 import List from '@material-ui/core/List';
+import ListSubheader from '@material-ui/core/ListSubheader';
 import Divider from '@material-ui/core/Divider';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
@@ -92,26 +93,81 @@ class MainToobar extends Component {
             onClick={this.closeDrawer}
             onKeyDown={this.closeDrawer}>
             <List>
-              <ListItem button>
+              <ListItem button onClick={() => this.props.history.push('/')}>
                 <ListItemIcon>
                   <DashboardIcon />
                 </ListItemIcon>
                 <ListItemText primary={t('mapTitle')} />
               </ListItem>
+            </List>
+            <Divider />
+            <List
+              subheader={
+                <ListSubheader>
+                  {t('reportTitle')}
+                </ListSubheader>
+              }>
+              <ListItem button onClick={() => this.props.history.push('/reports/route')}>
+                <ListItemIcon>
+                  <BarChartIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('reportRoute')} />
+              </ListItem>
               <ListItem button disabled>
                 <ListItemIcon>
                   <BarChartIcon />
                 </ListItemIcon>
-                <ListItemText primary={t('reportTitle')} />
+                <ListItemText primary={t('reportEvents')} />
+              </ListItem>
+              <ListItem button disabled>
+                <ListItemIcon>
+                  <BarChartIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('reportTrips')} />
+              </ListItem>
+              <ListItem button disabled>
+                <ListItemIcon>
+                  <BarChartIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('reportStops')} />
+              </ListItem>
+              <ListItem button disabled>
+                <ListItemIcon>
+                  <BarChartIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('reportSummary')} />
+              </ListItem>
+              <ListItem button disabled>
+                <ListItemIcon>
+                  <BarChartIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('reportChart')} />
               </ListItem>
             </List>
             <Divider />
-            <List>
+            <List
+              subheader={
+                <ListSubheader>
+                  {t('settingsTitle')}
+                </ListSubheader>
+              }>
+              <ListItem button disabled>
+                <ListItemIcon>
+                  <SettingsIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('settingsUser')} />
+              </ListItem>
+              <ListItem button disabled>
+                <ListItemIcon>
+                  <SettingsIcon />
+                </ListItemIcon>
+                <ListItemText primary={t('settingsServer')} />
+              </ListItem>
               <ListItem button disabled>
                 <ListItemIcon>
                   <SettingsIcon />
                 </ListItemIcon>
-                <ListItemText primary={t('settingsTitle')} />
+                <ListItemText primary={t('sharedNotifications')} />
               </ListItem>
             </List>
           </div>
diff --git a/modern/src/RouteReportPage.js b/modern/src/RouteReportPage.js
new file mode 100644
index 0000000..c444ffb
--- /dev/null
+++ b/modern/src/RouteReportPage.js
@@ -0,0 +1,23 @@
+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';
+
+const styles = theme => ({});
+
+class ReouteReportPage extends Component {
+  render() {
+    return (
+      <div>
+        <MainToobar history={this.props.history} />
+      </div>
+    );
+  }
+}
+
+export default withWidth()(withStyles(styles)(ReouteReportPage));
-- 
cgit v1.2.3


From 79c36b9a84623fb99db0ab71cc9a31391f06489e Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton.tananaev@gmail.com>
Date: Fri, 27 Mar 2020 00:11:05 -0700
Subject: Partially implement device menu

---
 modern/src/App.js             |  2 ++
 modern/src/DeviceList.js      | 56 ++++++++++++++++++++++++++++++++++++++-----
 modern/src/DevicePage.js      | 18 ++++++++++++++
 modern/src/MainPage.js        |  2 +-
 modern/src/RemoveDialog.js    | 27 +++++++++++++++++++++
 modern/src/RouteReportPage.js | 11 +++------
 6 files changed, 101 insertions(+), 15 deletions(-)
 create mode 100644 modern/src/DevicePage.js
 create mode 100644 modern/src/RemoveDialog.js

(limited to 'modern')

diff --git a/modern/src/App.js b/modern/src/App.js
index 0a7ad12..a775282 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 235ba22..a97e4fe 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 0000000..73f1dc8
--- /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 450a5e0..e0b4da2 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 0000000..26bdeb5
--- /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 c444ffb..86eeaaa 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));
-- 
cgit v1.2.3