diff options
| -rw-r--r-- | modern/craco.config.js | 12 | ||||
| -rw-r--r-- | modern/package.json | 8 | ||||
| -rw-r--r-- | modern/src/App.js | 4 | ||||
| -rw-r--r-- | modern/src/DeviceList.js | 81 | ||||
| -rw-r--r-- | modern/src/DevicePage.js | 18 | ||||
| -rw-r--r-- | modern/src/LoginPage.js | 14 | ||||
| -rw-r--r-- | modern/src/MainMap.js | 15 | ||||
| -rw-r--r-- | modern/src/MainPage.js | 9 | ||||
| -rw-r--r-- | modern/src/MainToolbar.js | 68 | ||||
| -rw-r--r-- | modern/src/RemoveDialog.js | 27 | ||||
| -rw-r--r-- | modern/src/RouteReportPage.js | 18 | ||||
| -rw-r--r-- | modern/src/common/localization.js | 125 |
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] +}; |