Merge branch 'master' of https://github.com/traccar/traccar-web into experimental/hooks

12 files changed, 349 insertions, 50 deletions

diff --git a/modern/craco.config.js b/modern/craco.config.js
new file mode 100644
index 00000000..3e5d98e9
--- /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 90b03d3f..02b080a4 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/App.js b/modern/src/App.js
index 31b8b69b..a7752823 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -3,6 +3,8 @@ 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';
+import DevicePage from './DevicePage';
 
 class App extends Component {
   render() {
@@ -12,6 +14,8 @@ 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 8d855a76..64f95a27 100644
--- a/modern/src/DeviceList.js
+++ b/modern/src/DeviceList.js
@@ -1,43 +1,78 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
 import Avatar from '@material-ui/core/Avatar';
 import Divider from '@material-ui/core/Divider';
 import IconButton from '@material-ui/core/IconButton';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
 import ListItemText from '@material-ui/core/ListItemText';
 import LocationOnIcon from '@material-ui/icons/LocationOn';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 
-import { useDispatch, useSelector } from 'react-redux';
 import { devicesActions } from './store';
+import t from './common/localization';
+import RemoveDialog from './RemoveDialog';
 
 const DeviceList = () => {
+  const [menuAnchorEl, setMenuAnchorEl] = useState(null);
+  const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
   const devices = useSelector(state => Object.values(state.devices.items));
   const dispatch = useDispatch();
+  const history = useHistory();
+
+  const handleMenuClick = (event) => {
+    setMenuAnchorEl(event.currentTarget);
+  }
+
+  const handleMenuClose = () => {
+    setMenuAnchorEl(null);
+  }
+
+  const handleMenuEdit = () => {
+    history.push('/device');
+    handleMenuClose();
+  }
+
+  const handleMenuRemove = () => {
+    setRemoveDialogOpen(true);
+    handleMenuClose();
+  }
 
-  return (<List>
-    {devices.map((device, index, list) => (
-      <Fragment key={device.id}>
-        <ListItem button key={device.id} onClick={() => dispatch(devicesActions.select(device))}>
-          <ListItemAvatar>
-            <Avatar>
-              <LocationOnIcon />
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText primary={device.name} secondary={device.uniqueId} />
-          <ListItemSecondaryAction>
-            <IconButton>
-              <MoreVertIcon />
-            </IconButton>
-          </ListItemSecondaryAction>
-        </ListItem>
-        {index < list.length - 1 ? <Divider /> : null}
-      </Fragment>
-    ))
-    }
-  </List>);
+  return (
+    <>
+      <List>
+        {devices.map((device, index, list) => (
+          <Fragment key={device.id}>
+            <ListItem button key={device.id} onClick={() => dispatch(devicesActions.select(device))}>
+              <ListItemAvatar>
+                <Avatar>
+                  <LocationOnIcon />
+                </Avatar>
+              </ListItemAvatar>
+              <ListItemText primary={device.name} secondary={device.uniqueId} />
+              <ListItemSecondaryAction>
+                <IconButton onClick={handleMenuClick}>
+                  <MoreVertIcon />
+                </IconButton>
+              </ListItemSecondaryAction>
+            </ListItem>
+            {index < list.length - 1 ? <Divider /> : null}
+          </Fragment>
+        ))
+        }
+      </List>
+      <Menu id="device-menu" anchorEl={menuAnchorEl} keepMounted open={Boolean(menuAnchorEl)} onClose={handleMenuClose}>
+        <MenuItem onClick={handleMenuEdit}>{t('sharedEdit')}</MenuItem>
+        <MenuItem onClick={handleMenuRemove}>{t('sharedRemove')}</MenuItem>
+      </Menu>
+      <RemoveDialog open={removeDialogOpen} onClose={() => { setRemoveDialogOpen(false) }} />
+    </>
+  );
 }
 
 export default DeviceList;
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/LoginPage.js b/modern/src/LoginPage.js
index 1f0b950b..1da33663 100644
--- a/modern/src/LoginPage.js
+++ b/modern/src/LoginPage.js
@@ -8,6 +8,8 @@ import InputLabel from '@material-ui/core/InputLabel';
 import Paper from '@material-ui/core/Paper';
 import { makeStyles } from '@material-ui/core';
 
+import t from './common/localization';
+
 const useStyles = makeStyles(theme => ({
   root: {
     width: 'auto',
@@ -81,7 +83,7 @@ const LoginPage = () => {
         <img className={classes.logo} src="/logo.svg" alt="Traccar" />
         <form onSubmit={handleLogin}>
           <FormControl margin="normal" required fullWidth error={failed}>
-            <InputLabel htmlFor="email">Email</InputLabel>
+            <InputLabel htmlFor="email">{t('userEmail')}</InputLabel>
             <Input
               id="email"
               name="email"
@@ -93,7 +95,7 @@ const LoginPage = () => {
           </FormControl>
 
           <FormControl margin="normal" required fullWidth>
-            <InputLabel htmlFor="password">Password</InputLabel>
+            <InputLabel htmlFor="password">{t('userPassword')}</InputLabel>
             <Input
               id="password"
               name="password"
@@ -110,8 +112,8 @@ const LoginPage = () => {
               disabled
               className={classes.button}
               onClick={handleRegister}>
-              Register
-              </Button>
+              {t('loginRegister')}
+            </Button>
 
             <Button
               type="submit"
@@ -119,8 +121,8 @@ const LoginPage = () => {
               color="primary"
               disabled={!email || !password}
               className={classes.button}>
-              Login
-              </Button>
+              {t('loginLogin')}
+            </Button>
 
           </div>
         </form>
diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index 01230da9..aea6dd89 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;
     }
   }
 
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index 8e9b695f..b2ac34aa 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -1,12 +1,13 @@
 import React, { useState, useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+import { makeStyles } from '@material-ui/core';
+import Drawer from '@material-ui/core/Drawer';
 import ContainerDimensions from 'react-container-dimensions';
-import MainToobar from './MainToolbar';
+
 import MainMap from './MainMap';
-import Drawer from '@material-ui/core/Drawer';
 import SocketController from './SocketController';
+import MainToobar from './MainToolbar';
 import DeviceList from './DeviceList';
-import { makeStyles } from '@material-ui/core';
-import { useHistory } from 'react-router-dom';
 
 const useStyles = makeStyles(theme => ({
   root: {
diff --git a/modern/src/MainToolbar.js b/modern/src/MainToolbar.js
index 9ec89a2f..9c2e811b 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';
@@ -16,6 +17,7 @@ import ListItemText from '@material-ui/core/ListItemText';
 import DashboardIcon from '@material-ui/icons/Dashboard';
 import BarChartIcon from '@material-ui/icons/BarChart';
 import SettingsIcon from '@material-ui/icons/Settings';
+import t from './common/localization';
 
 const useStyles = makeStyles(theme => ({
   flex: {
@@ -60,8 +62,8 @@ const MainToolbar = () => {
         </IconButton>
         <Typography variant="h6" color="inherit" className={classes.flex}>
           Traccar
-            </Typography>
-        <Button color="inherit" onClick={handleLogout}>Logout</Button>
+        </Typography>
+        <Button color="inherit" onClick={handleLogout}>{t('loginLogout')}</Button>
       </Toolbar>
     </AppBar>
     <Drawer open={drawer} onClose={closeDrawer}>
@@ -72,26 +74,78 @@ const MainToolbar = () => {
         onClick={closeDrawer}
         onKeyDown={closeDrawer}>
         <List>
-          <ListItem button>
+          <ListItem button onClick={() => history.push('/')}>
             <ListItemIcon>
               <DashboardIcon />
             </ListItemIcon>
-            <ListItemText primary="Dashboard" />
+            <ListItemText primary={t('mapTitle')} />
+          </ListItem>
+        </List>
+        <Divider />
+        <List subheader={<ListSubheader>
+          {t('reportTitle')}
+        </ListSubheader>}>
+          <ListItem button onClick={() => { history.push('/reports/route') }}>
+            <ListItemIcon>
+              <BarChartIcon />
+            </ListItemIcon>
+            <ListItemText primary={t('reportRoute')} />
           </ListItem>
           <ListItem button disabled>
             <ListItemIcon>
               <BarChartIcon />
             </ListItemIcon>
-            <ListItemText primary="Reports" />
+            <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="Settings" />
+            <ListItemText primary={t('sharedNotifications')} />
           </ListItem>
         </List>
       </div>
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
new file mode 100644
index 00000000..86eeaaa0
--- /dev/null
+++ b/modern/src/RouteReportPage.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 RouteReportPage extends Component {
+  render() {
+    return (
+      <div>
+        <MainToobar history={this.props.history} />
+      </div>
+    );
+  }
+}
+
+export default withWidth()(withStyles(styles)(RouteReportPage));
diff --git a/modern/src/common/localization.js b/modern/src/common/localization.js
new file mode 100644
index 00000000..eb8fc1d4
--- /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]
+};