aboutsummaryrefslogtreecommitdiff
path: root/modern
diff options
context:
space:
mode:
Diffstat (limited to 'modern')
-rw-r--r--modern/src/DevicePage.js4
-rw-r--r--modern/src/GeofencePage.js4
-rw-r--r--modern/src/LocalizationProvider.js4
-rw-r--r--modern/src/PositionPage.js1
-rw-r--r--modern/src/UserPage.js4
-rw-r--r--modern/src/admin/ServerPage.js7
-rw-r--r--modern/src/attributes/deviceAttributes.js6
-rw-r--r--modern/src/attributes/geofenceAttributes.js6
-rw-r--r--modern/src/attributes/positionAttributes.js6
-rw-r--r--modern/src/attributes/userAttributes.js6
-rw-r--r--modern/src/common/formatter.js17
-rw-r--r--modern/src/common/usePersistedState.js6
-rw-r--r--modern/src/components/registration/LoginForm.js27
-rw-r--r--modern/src/map/Map.js5
-rw-r--r--modern/src/settings/ComputedAttributePage.js4
-rw-r--r--modern/src/settings/GroupPage.js4
-rw-r--r--modern/src/settings/MaintenancePage.js4
-rw-r--r--modern/src/settings/MaintenancesPage.js4
-rw-r--r--modern/src/settings/NotificationPage.js5
-rw-r--r--modern/src/settings/OptionsLayout/index.js6
20 files changed, 76 insertions, 54 deletions
diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index 5867c979..c3a49a58 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.js
@@ -7,12 +7,12 @@ import {
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import EditItemView from './EditItemView';
import EditAttributesView from './attributes/EditAttributesView';
-import deviceAttributes from './attributes/deviceAttributes';
import SelectField from './form/SelectField';
import deviceCategories from './common/deviceCategories';
import LinkField from './form/LinkField';
import { prefixString } from './common/stringUtils';
import { useTranslation } from './LocalizationProvider';
+import { useDeviceAttributes } from './attributes/deviceAttributes';
const useStyles = makeStyles(() => ({
details: {
@@ -24,6 +24,8 @@ const DevicePage = () => {
const classes = useStyles();
const t = useTranslation();
+ const deviceAttributes = useDeviceAttributes(t);
+
const [item, setItem] = useState();
return (
diff --git a/modern/src/GeofencePage.js b/modern/src/GeofencePage.js
index 485795de..db752467 100644
--- a/modern/src/GeofencePage.js
+++ b/modern/src/GeofencePage.js
@@ -7,8 +7,8 @@ import {
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import EditItemView from './EditItemView';
import EditAttributesView from './attributes/EditAttributesView';
-import geofenceAttributes from './attributes/geofenceAttributes';
import { useTranslation } from './LocalizationProvider';
+import { useGeofenceAttributes } from './attributes/geofenceAttributes';
const useStyles = makeStyles(() => ({
details: {
@@ -20,6 +20,8 @@ const GeofencePage = () => {
const classes = useStyles();
const t = useTranslation();
+ const geofenceAttributes = useGeofenceAttributes(t);
+
const [item, setItem] = useState();
return (
diff --git a/modern/src/LocalizationProvider.js b/modern/src/LocalizationProvider.js
index bf454e71..129f1d9c 100644
--- a/modern/src/LocalizationProvider.js
+++ b/modern/src/LocalizationProvider.js
@@ -1,5 +1,5 @@
import React, { createContext, useContext } from 'react';
-import usePersistedState from './common/usePersistedState';
+import { usePersistedState } from './common/usePersistedState';
import af from '../../web/l10n/af.json';
import ar from '../../web/l10n/ar.json';
@@ -113,8 +113,6 @@ const languages = {
zh_TW: { data: zh_TW, name: '中文 (Taiwan)' },
};
-//const languageList = Object.entries(supportedLanguages).map((values) => ({ code: values[0], name: values[1].name }));
-
const getDefaultLanguage = () => {
const browserLanguages = window.navigator.languages ? window.navigator.languages.slice() : [];
const browserLanguage = window.navigator.userLanguage || window.navigator.language;
diff --git a/modern/src/PositionPage.js b/modern/src/PositionPage.js
index 37bc922c..f09d43d6 100644
--- a/modern/src/PositionPage.js
+++ b/modern/src/PositionPage.js
@@ -8,6 +8,7 @@ import { useEffectAsync } from './reactHelper';
import MainToolbar from './MainToolbar';
import { formatPosition } from './common/formatter';
import { prefixString } from './common/stringUtils';
+import { useTranslation } from './LocalizationProvider';
const useStyles = makeStyles((theme) => ({
root: {
diff --git a/modern/src/UserPage.js b/modern/src/UserPage.js
index 0e6af09f..977d3302 100644
--- a/modern/src/UserPage.js
+++ b/modern/src/UserPage.js
@@ -5,11 +5,11 @@ import {
Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography,
} from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import userAttributes from './attributes/userAttributes';
import EditItemView from './EditItemView';
import EditAttributesView from './attributes/EditAttributesView';
import LinkField from './form/LinkField';
import { useTranslation } from './LocalizationProvider';
+import { useUserAttributes } from './attributes/userAttributes';
const useStyles = makeStyles(() => ({
details: {
@@ -21,6 +21,8 @@ const UserPage = () => {
const classes = useStyles();
const t = useTranslation();
+ const userAttributes = useUserAttributes(t);
+
const [item, setItem] = useState();
return (
diff --git a/modern/src/admin/ServerPage.js b/modern/src/admin/ServerPage.js
index 62c93f67..b424aac4 100644
--- a/modern/src/admin/ServerPage.js
+++ b/modern/src/admin/ServerPage.js
@@ -9,8 +9,8 @@ import { useHistory } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { sessionActions } from '../store';
import EditAttributesView from '../attributes/EditAttributesView';
-import deviceAttributes from '../attributes/deviceAttributes';
-import userAttributes from '../attributes/userAttributes';
+import { useDeviceAttributes } from '../attributes/deviceAttributes';
+import { useUserAttributes } from '../attributes/userAttributes';
import OptionsLayout from '../settings/OptionsLayout';
import { useTranslation } from '../LocalizationProvider';
@@ -36,6 +36,9 @@ const ServerPage = () => {
const dispatch = useDispatch();
const t = useTranslation();
+ const userAttributes = useUserAttributes(t);
+ const deviceAttributes = useDeviceAttributes(t);
+
const item = useSelector((state) => state.session.server);
const setItem = (updatedItem) => dispatch(sessionActions.updateServer(updatedItem));
diff --git a/modern/src/attributes/deviceAttributes.js b/modern/src/attributes/deviceAttributes.js
index 2b874c52..20bb1e09 100644
--- a/modern/src/attributes/deviceAttributes.js
+++ b/modern/src/attributes/deviceAttributes.js
@@ -1,6 +1,6 @@
-import t from '../LocalizationProvider';
+import { useMemo } from 'react';
-export default {
+export const useDeviceAttributes = (t) => useMemo({
speedLimit: {
name: t('attributeSpeedLimit'),
type: 'string',
@@ -9,4 +9,4 @@ export default {
name: t('attributeReportIgnoreOdometer'),
type: 'boolean',
},
-};
+}, [t]);
diff --git a/modern/src/attributes/geofenceAttributes.js b/modern/src/attributes/geofenceAttributes.js
index 5f197de7..d9f512f1 100644
--- a/modern/src/attributes/geofenceAttributes.js
+++ b/modern/src/attributes/geofenceAttributes.js
@@ -1,8 +1,8 @@
-import t from '../LocalizationProvider';
+import { useMemo } from 'react';
-export default {
+export const useGeofenceAttributes = (t) => useMemo({
speedLimit: {
name: t('attributeSpeedLimit'),
type: 'string',
},
-};
+}, [t]);
diff --git a/modern/src/attributes/positionAttributes.js b/modern/src/attributes/positionAttributes.js
index b44b6062..49a64f71 100644
--- a/modern/src/attributes/positionAttributes.js
+++ b/modern/src/attributes/positionAttributes.js
@@ -1,6 +1,6 @@
-import t from '../LocalizationProvider';
+import { useMemo } from 'react';
-export default {
+export const usePositionAttributes = (t) => useMemo({
raw: {
name: t('positionRaw'),
type: 'string',
@@ -18,4 +18,4 @@ export default {
type: 'number',
dataType: 'distance',
},
-};
+}, [t]);
diff --git a/modern/src/attributes/userAttributes.js b/modern/src/attributes/userAttributes.js
index 33a6657c..d9a5814d 100644
--- a/modern/src/attributes/userAttributes.js
+++ b/modern/src/attributes/userAttributes.js
@@ -1,6 +1,6 @@
-import t from '../LocalizationProvider';
+import { useMemo } from 'react';
-export default {
+export const useUserAttributes = (t) => useMemo({
notificationTokens: {
name: t('attributeNotificationTokens'),
type: 'string',
@@ -65,4 +65,4 @@ export default {
name: t('sharedTimezone'),
type: 'string',
},
-};
+}, [t]);
diff --git a/modern/src/common/formatter.js b/modern/src/common/formatter.js
index e9371653..5db7a420 100644
--- a/modern/src/common/formatter.js
+++ b/modern/src/common/formatter.js
@@ -1,7 +1,10 @@
import moment from 'moment';
-import t from '../LocalizationProvider';
+import { useTranslation } from '../LocalizationProvider';
-export const formatBoolean = (value) => (value ? t('sharedYes') : t('sharedNo'));
+export const formatBoolean = (value) => {
+ const t = useTranslation();
+ return value ? t('sharedYes') : t('sharedNo');
+}
export const formatNumber = (value, precision = 1) => Number(value.toFixed(precision));
@@ -36,6 +39,7 @@ export const formatPosition = (value, key) => {
};
export const formatDistance = (value, unit) => {
+ const t = useTranslation();
switch (unit) {
case 'mi':
return `${(value * 0.000621371).toFixed(2)} ${t('sharedMi')}`;
@@ -48,6 +52,7 @@ export const formatDistance = (value, unit) => {
};
export const formatSpeed = (value, unit) => {
+ const t = useTranslation();
switch (unit) {
case 'kmh':
return `${(value * 1.852).toFixed(2)} ${t('sharedKmh')}`;
@@ -60,6 +65,7 @@ export const formatSpeed = (value, unit) => {
};
export const formatVolume = (value, unit) => {
+ const t = useTranslation();
switch (unit) {
case 'impGal':
return `${(value / 4.546).toFixed(2)} ${t('sharedGallonAbbreviation')}`;
@@ -74,8 +80,11 @@ export const formatVolume = (value, unit) => {
export const formatHours = (value) => moment.duration(value).humanize();
export const formatCoordinate = (key, value, unit) => {
- let hemisphere; let degrees; let minutes; let
- seconds;
+ let hemisphere;
+ let degrees;
+ let minutes;
+ let seconds;
+
if (key === 'latitude') {
hemisphere = value >= 0 ? 'N' : 'S';
} else {
diff --git a/modern/src/common/usePersistedState.js b/modern/src/common/usePersistedState.js
index 0a6627c6..a3a60d75 100644
--- a/modern/src/common/usePersistedState.js
+++ b/modern/src/common/usePersistedState.js
@@ -1,13 +1,13 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
-export default usePersistedState = (key, defaultValue) => {
+export const usePersistedState = (key, defaultValue) => {
const [value, setValue] = useState(() => {
const stickyValue = window.localStorage.getItem(key);
return stickyValue ? JSON.parse(stickyValue) : defaultValue;
});
- React.useEffect(() => {
+ useEffect(() => {
window.localStorage.setItem(key, JSON.stringify(value));
}, [key, value]);
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
index c3081d90..2f6e266f 100644
--- a/modern/src/components/registration/LoginForm.js
+++ b/modern/src/components/registration/LoginForm.js
@@ -6,7 +6,7 @@ import { useTheme } from '@material-ui/core/styles';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
import { sessionActions } from '../../store';
-import t, { useLocalization } from '../../LocalizationProvider';
+import { useLocalization, useTranslation } from '../../LocalizationProvider';
import StartPage from '../../StartPage';
const useStyles = makeStyles((theme) => ({
@@ -24,7 +24,10 @@ const LoginForm = () => {
const dispatch = useDispatch();
const history = useHistory();
const theme = useTheme();
- const { language, languageList, setLanguage } = useLocalization();
+ const t = useTranslation();
+
+ const { languages, language, setLanguage } = useLocalization();
+ const languageList = Object.entries(languages).map((values) => ({ code: values[0], name: values[1].name }));
const [failed, setFailed] = useState(false);
const [email, setEmail] = useState('');
@@ -32,14 +35,6 @@ const LoginForm = () => {
const registrationEnabled = useSelector((state) => (state.session.server ? state.session.server.registration : false));
const emailEnabled = useSelector((state) => (state.session.server ? state.session.server.emailEnabled : false));
- const handleEmailChange = (event) => {
- setEmail(event.target.value);
- };
-
- const handlePasswordChange = (event) => {
- setPassword(event.target.value);
- };
-
const handleLogin = async (event) => {
event.preventDefault();
const response = await fetch('/api/session', {
@@ -62,10 +57,6 @@ const LoginForm = () => {
}
};
- const handleLanguageChange = (e) => {
- setLanguage(e.target.value);
- };
-
return (
<StartPage>
<Grid container direction="column" spacing={2}>
@@ -87,7 +78,7 @@ const LoginForm = () => {
value={email}
autoComplete="email"
autoFocus
- onChange={handleEmailChange}
+ onChange={(e) => setEmail(e.target.value)}
onKeyUp={handleSpecialKey}
helperText={failed && 'Invalid username or password'}
variant="filled"
@@ -103,7 +94,7 @@ const LoginForm = () => {
value={password}
type="password"
autoComplete="current-password"
- onChange={handlePasswordChange}
+ onChange={(e) => setPassword(e.target.value)}
onKeyUp={handleSpecialKey}
variant="filled"
/>
@@ -129,8 +120,8 @@ const LoginForm = () => {
<Grid item xs>
<FormControl variant="filled" fullWidth>
<InputLabel>{t('loginLanguage')}</InputLabel>
- <Select value={language} onChange={handleLanguageChange}>
- {languageList.map((lang) => <MenuItem key={lang.code} value={lang.code}>{lang.name}</MenuItem>)}
+ <Select value={language} onChange={(e) => setLanguage(e.target.value)}>
+ {languageList.map((it) => <MenuItem key={it.code} value={it.code}>{it.name}</MenuItem>)}
</Select>
</FormControl>
</Grid>
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index 9e31fa15..1fa4db5d 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -10,10 +10,13 @@ import { prepareIcon, loadImage } from './mapUtil';
import {
styleCarto, styleMapbox, styleMapTiler, styleOsm,
} from './mapStyles';
-import t from '../LocalizationProvider';
import { useAttributePreference } from '../common/preferences';
import palette from '../theme/palette';
+// TODO fix localization
+import en from '../../../web/l10n/en.json';
+const t = (key) => en[key];
+
const element = document.createElement('div');
element.style.width = '100%';
element.style.height = '100%';
diff --git a/modern/src/settings/ComputedAttributePage.js b/modern/src/settings/ComputedAttributePage.js
index 7aff0da0..6733e980 100644
--- a/modern/src/settings/ComputedAttributePage.js
+++ b/modern/src/settings/ComputedAttributePage.js
@@ -4,8 +4,8 @@ import {
} from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import EditItemView from '../EditItemView';
-import positionAttributes from '../attributes/positionAttributes';
import { useTranslation } from '../LocalizationProvider';
+import { usePositionAttributes } from '../attributes/positionAttributes';
const useStyles = makeStyles(() => ({
details: {
@@ -17,6 +17,8 @@ const ComputedAttributePage = () => {
const classes = useStyles();
const t = useTranslation();
+ const positionAttributes = usePositionAttributes(t);
+
const [item, setItem] = useState();
const [key, setKey] = useState();
diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js
index faf8acbe..88b9504d 100644
--- a/modern/src/settings/GroupPage.js
+++ b/modern/src/settings/GroupPage.js
@@ -7,7 +7,7 @@ import {
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import EditItemView from '../EditItemView';
import EditAttributesView from '../attributes/EditAttributesView';
-import deviceAttributes from '../attributes/deviceAttributes';
+import { useDeviceAttributes } from '../attributes/deviceAttributes';
import SelectField from '../form/SelectField';
import { useTranslation } from '../LocalizationProvider';
@@ -21,6 +21,8 @@ const GroupPage = () => {
const classes = useStyles();
const t = useTranslation();
+ const deviceAttributes = useDeviceAttributes(t);
+
const [item, setItem] = useState();
return (
diff --git a/modern/src/settings/MaintenancePage.js b/modern/src/settings/MaintenancePage.js
index a9fed7d6..d9500bed 100644
--- a/modern/src/settings/MaintenancePage.js
+++ b/modern/src/settings/MaintenancePage.js
@@ -7,12 +7,12 @@ import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { prefixString } from '../common/stringUtils';
import EditItemView from '../EditItemView';
import EditAttributesView from '../attributes/EditAttributesView';
-import positionAttributes from '../attributes/positionAttributes';
import { useAttributePreference } from '../common/preferences';
import {
speedFromKnots, speedToKnots, distanceFromMeters, distanceToMeters,
} from '../common/converter';
import { useTranslation } from '../LocalizationProvider';
+import { usePositionAttributes } from '../attributes/positionAttributes';
const useStyles = makeStyles(() => ({
details: {
@@ -24,6 +24,8 @@ const MaintenancePage = () => {
const classes = useStyles();
const t = useTranslation();
+ const positionAttributes = usePositionAttributes(t);
+
const [item, setItem] = useState();
const [labels, setLabels] = useState({ start: '', period: '' });
diff --git a/modern/src/settings/MaintenancesPage.js b/modern/src/settings/MaintenancesPage.js
index 5b040b55..a59a24e1 100644
--- a/modern/src/settings/MaintenancesPage.js
+++ b/modern/src/settings/MaintenancesPage.js
@@ -6,7 +6,7 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
import { useEffectAsync } from '../reactHelper';
import EditCollectionView from '../EditCollectionView';
-import positionAttributes from '../attributes/positionAttributes';
+import { usePositionAttributes } from '../attributes/positionAttributes';
import { formatDistance, formatSpeed } from '../common/formatter';
import { useAttributePreference } from '../common/preferences';
import OptionsLayout from './OptionsLayout';
@@ -23,6 +23,8 @@ const MaintenancesView = ({ updateTimestamp, onMenuClick }) => {
const classes = useStyles();
const t = useTranslation();
+ const positionAttributes = usePositionAttributes(t);
+
const [items, setItems] = useState([]);
const speedUnit = useAttributePreference('speedUnit');
const distanceUnit = useAttributePreference('distanceUnit');
diff --git a/modern/src/settings/NotificationPage.js b/modern/src/settings/NotificationPage.js
index 98104d76..6d895d0f 100644
--- a/modern/src/settings/NotificationPage.js
+++ b/modern/src/settings/NotificationPage.js
@@ -4,7 +4,7 @@ import {
Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography, FormControlLabel, Checkbox,
} from '@material-ui/core';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import t, { findStringKeys } from '../LocalizationProvider';
+import t, { findStringKeys, useTranslation, useTranslationKeys } from '../LocalizationProvider';
import EditItemView from '../EditItemView';
import { prefixString, unprefixString } from '../common/stringUtils';
import SelectField from '../form/SelectField';
@@ -17,10 +17,11 @@ const useStyles = makeStyles(() => ({
const NotificationPage = () => {
const classes = useStyles();
+ const t = useTranslation();
const [item, setItem] = useState();
- const alarms = findStringKeys((it) => it.startsWith('alarm')).map((it) => ({
+ const alarms = useTranslationKeys((it) => it.startsWith('alarm')).map((it) => ({
key: unprefixString('alarm', it),
name: t(it),
}));
diff --git a/modern/src/settings/OptionsLayout/index.js b/modern/src/settings/OptionsLayout/index.js
index dd969196..fea03722 100644
--- a/modern/src/settings/OptionsLayout/index.js
+++ b/modern/src/settings/OptionsLayout/index.js
@@ -13,8 +13,8 @@ import ArrowBackIcon from '@material-ui/icons/ArrowBack';
import SideNav from '../../components/SideNav';
import NavBar from '../../components/NavBar';
-import t from '../../LocalizationProvider';
import useRoutes from './useRoutes';
+import { useTranslation } from '../../LocalizationProvider';
const useStyles = makeStyles((theme) => ({
root: {
@@ -54,9 +54,11 @@ const OptionsLayout = ({ children }) => {
const classes = useStyles();
const location = useLocation();
const history = useHistory();
+ const routes = useRoutes();
+ const t = useTranslation();
+
const [openDrawer, setOpenDrawer] = useState(false);
const [optionTitle, setOptionTitle] = useState();
- const routes = useRoutes();
useEffect(() => {
const activeRoute = routes.find(