aboutsummaryrefslogtreecommitdiff
path: root/modern/src
diff options
context:
space:
mode:
Diffstat (limited to 'modern/src')
-rw-r--r--modern/src/App.js84
-rw-r--r--modern/src/GeofencesPage.js3
-rw-r--r--modern/src/common/localization.js25
-rw-r--r--modern/src/components/registration/LoginForm.js7
-rw-r--r--modern/src/components/registration/RegisterForm.js4
-rw-r--r--modern/src/map/CurrentLocationMap.js9
-rw-r--r--modern/src/map/Map.js25
7 files changed, 57 insertions, 100 deletions
diff --git a/modern/src/App.js b/modern/src/App.js
index 228fe554..5197a074 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -35,56 +35,58 @@ import LoginForm from './components/registration/LoginForm';
import RegisterForm from './components/registration/RegisterForm';
import ResetPasswordForm from './components/registration/ResetPasswordForm';
-import theme from './theme';
import GeofencesPage from './GeofencesPage';
import GeofencePage from './GeofencePage';
import { LocalizationProvider } from './common/localization';
+import theme from './theme';
const App = () => {
const initialized = useSelector((state) => !!state.session.server && !!state.session.user);
return (
<LocalizationProvider>
- <CssBaseline />
- <SocketController />
- <CachingController />
- <Switch>
- <Route exact path="/login" component={LoginForm} />
- <Route exact path="/register" component={RegisterForm} />
- <Route exact path="/reset-password" component={ResetPasswordForm} />
- <Route>
- {!initialized ? (<LinearProgress />) : (
- <Switch>
- <Route exact path="/" component={MainPage} />
- <Route exact path="/replay" component={ReplayPage} />
- <Route exact path="/position/:id?" component={PositionPage} />
- <Route exact path="/user/:id?" component={UserPage} />
- <Route exact path="/device/:id?" component={DevicePage} />
- <Route exact path="/geofence/:id?" component={GeofencePage} />
- <Route exact path="/geofences" component={GeofencesPage} />
- <Route exact path="/settings/notifications" component={NotificationsPage} />
- <Route exact path="/settings/notification/:id?" component={NotificationPage} />
- <Route exact path="/settings/groups" component={GroupsPage} />
- <Route exact path="/settings/group/:id?" component={GroupPage} />
- <Route exact path="/settings/drivers" component={DriversPage} />
- <Route exact path="/settings/driver/:id?" component={DriverPage} />
- <Route exact path="/settings/attributes" component={ComputedAttributesPage} />
- <Route exact path="/settings/attribute/:id?" component={ComputedAttributePage} />
- <Route exact path="/settings/maintenances" component={MaintenancesPage} />
- <Route exact path="/settings/maintenance/:id?" component={MaintenancePage} />
- <Route exact path="/admin/server" component={ServerPage} />
- <Route exact path="/admin/users" component={UsersPage} />
- <Route exact path="/admin/statistics" component={StatisticsPage} />
- <Route exact path="/reports/route" component={RouteReportPage} />
- <Route exact path="/reports/event" component={EventReportPage} />
- <Route exact path="/reports/trip" component={TripReportPage} />
- <Route exact path="/reports/stop" component={StopReportPage} />
- <Route exact path="/reports/summary" component={SummaryReportPage} />
- <Route exact path="/reports/chart" component={ChartReportPage} />
- </Switch>
- )}
- </Route>
- </Switch>
+ <ThemeProvider theme={theme}>
+ <CssBaseline />
+ <SocketController />
+ <CachingController />
+ <Switch>
+ <Route exact path="/login" component={LoginForm} />
+ <Route exact path="/register" component={RegisterForm} />
+ <Route exact path="/reset-password" component={ResetPasswordForm} />
+ <Route>
+ {!initialized ? (<LinearProgress />) : (
+ <Switch>
+ <Route exact path="/" component={MainPage} />
+ <Route exact path="/replay" component={ReplayPage} />
+ <Route exact path="/position/:id?" component={PositionPage} />
+ <Route exact path="/user/:id?" component={UserPage} />
+ <Route exact path="/device/:id?" component={DevicePage} />
+ <Route exact path="/geofence/:id?" component={GeofencePage} />
+ <Route exact path="/geofences" component={GeofencesPage} />
+ <Route exact path="/settings/notifications" component={NotificationsPage} />
+ <Route exact path="/settings/notification/:id?" component={NotificationPage} />
+ <Route exact path="/settings/groups" component={GroupsPage} />
+ <Route exact path="/settings/group/:id?" component={GroupPage} />
+ <Route exact path="/settings/drivers" component={DriversPage} />
+ <Route exact path="/settings/driver/:id?" component={DriverPage} />
+ <Route exact path="/settings/attributes" component={ComputedAttributesPage} />
+ <Route exact path="/settings/attribute/:id?" component={ComputedAttributePage} />
+ <Route exact path="/settings/maintenances" component={MaintenancesPage} />
+ <Route exact path="/settings/maintenance/:id?" component={MaintenancePage} />
+ <Route exact path="/admin/server" component={ServerPage} />
+ <Route exact path="/admin/users" component={UsersPage} />
+ <Route exact path="/admin/statistics" component={StatisticsPage} />
+ <Route exact path="/reports/route" component={RouteReportPage} />
+ <Route exact path="/reports/event" component={EventReportPage} />
+ <Route exact path="/reports/trip" component={TripReportPage} />
+ <Route exact path="/reports/stop" component={StopReportPage} />
+ <Route exact path="/reports/summary" component={SummaryReportPage} />
+ <Route exact path="/reports/chart" component={ChartReportPage} />
+ </Switch>
+ )}
+ </Route>
+ </Switch>
+ </ThemeProvider>
</LocalizationProvider>
);
diff --git a/modern/src/GeofencesPage.js b/modern/src/GeofencesPage.js
index 4d23d106..f16ea431 100644
--- a/modern/src/GeofencesPage.js
+++ b/modern/src/GeofencesPage.js
@@ -5,12 +5,11 @@ import {
import Drawer from '@material-ui/core/Drawer';
import ContainerDimensions from 'react-container-dimensions';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import Map from './map/Map';
import CurrentLocationMap from './map/CurrentLocationMap';
import GeofenceEditMap from './map/GeofenceEditMap';
import GeofencesList from './GeofencesList';
-import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
-
import t from './common/localization';
diff --git a/modern/src/common/localization.js b/modern/src/common/localization.js
index 26b90e57..6f3e5855 100644
--- a/modern/src/common/localization.js
+++ b/modern/src/common/localization.js
@@ -1,7 +1,5 @@
import React, { useState, createContext, useContext, useEffect } from "react";
import { create } from 'jss';
-import rtl from 'jss-rtl';
-import { StylesProvider, jssPreset, useTheme, ThemeProvider } from '@material-ui/core/styles';
import af from '../../../web/l10n/af.json';
import ar from '../../../web/l10n/ar.json';
@@ -149,47 +147,28 @@ export default key => {
return selectedLanguage.data[key];
};
-const rtlLangueges = ['ar', 'he', 'fa'];
-const isRtl = (language) => rtlLangueges.indexOf(language) > -1;
-
export const setSelectedLanguage = (language) => {
selectedLanguage = supportedLanguages[language];
localStorage.setItem('language', language);
- localStorage.setItem('direction', isRtl(language) ? 'rtl' : 'ltr');
}
export const defaultLanguage = language;
-const defaultDirection = localStorage.getItem('direction') || 'ltr';
export const LocalizationContext = createContext({
- direction: defaultDirection,
language
});
-const jss = create({ plugins: [...jssPreset().plugins, rtl()] });
export function LocalizationProvider(props) {
const [language, setLanguage] = useState(defaultLanguage);
- const [direction, setDirection] = useState(defaultDirection);
-
const handleLanguageChange = (nextLanguage) => {
setSelectedLanguage(nextLanguage);
setLanguage(nextLanguage);
- setDirection(isRtl(nextLanguage) ? 'rtl' : 'ltr');
};
- useEffect(() => {
- theme.direction = direction;
- window.document.body.dir = direction
- }, [direction])
-
- return <LocalizationContext.Provider value={{ language, setLanguage: handleLanguageChange, languageList, direction }}>
- <StylesProvider jss={jss}>
- <ThemeProvider theme={theme}>
- {props.children}
- </ThemeProvider>
- </StylesProvider>
+ return <LocalizationContext.Provider value={{ language, setLanguage: handleLanguageChange, languageList }}>
+ {props.children}
</LocalizationContext.Provider>
}
diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js
index c5c1d6f2..461a1ab6 100644
--- a/modern/src/components/registration/LoginForm.js
+++ b/modern/src/components/registration/LoginForm.js
@@ -62,9 +62,9 @@ const LoginForm = () => {
}
};
- const handleLanguageChange = e => {
+ const handleLanguageChange = (e) => {
setLanguage(e.target.value);
- }
+ };
return (
<StartPage>
@@ -130,7 +130,7 @@ const LoginForm = () => {
<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>)}
+ {languageList.map((lang) => <MenuItem key={lang.code} value={lang.code}>{lang.name}</MenuItem>)}
</Select>
</FormControl>
</Grid>
@@ -145,7 +145,6 @@ const LoginForm = () => {
</Grid>
</StartPage>
);
-
};
export default LoginForm;
diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js
index 3a249c60..6260a0c5 100644
--- a/modern/src/components/registration/RegisterForm.js
+++ b/modern/src/components/registration/RegisterForm.js
@@ -4,9 +4,9 @@ import {
} from '@material-ui/core';
import { useHistory } from 'react-router-dom';
import ArrowBackIcon from '@material-ui/icons/ArrowBack';
+import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
import StartPage from '../../StartPage';
import t from '../../common/localization';
-import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
const useStyles = makeStyles((theme) => ({
register: {
@@ -61,7 +61,7 @@ const RegisterForm = () => {
<Grid item>
<Typography className={classes.link} color="primary">
<Link onClick={() => history.push('/login')}>
- {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />}
+ {theme.direction === 'rtl' ? <ArrowForwardIcon /> : <ArrowBackIcon />}
</Link>
</Typography>
</Grid>
diff --git a/modern/src/map/CurrentLocationMap.js b/modern/src/map/CurrentLocationMap.js
index c875662d..69724ce1 100644
--- a/modern/src/map/CurrentLocationMap.js
+++ b/modern/src/map/CurrentLocationMap.js
@@ -1,14 +1,9 @@
import maplibregl from 'maplibre-gl';
import { useEffect } from 'react';
-import { useLocalization } from '../common/localization';
import { map } from './Map';
const CurrentLocationMap = () => {
- const {direction} = useLocalization();
-
useEffect(() => {
- const controlsPosition = direction ==='rtl' ? 'top-left' : 'top-right';
-
const control = new maplibregl.GeolocateControl({
positionOptions: {
enableHighAccuracy: true,
@@ -16,9 +11,9 @@ const CurrentLocationMap = () => {
},
trackUserLocation: true,
});
- map.addControl(control,controlsPosition);
+ map.addControl(control);
return () => map.removeControl(control);
- }, [direction]);
+ }, []);
return null;
};
diff --git a/modern/src/map/Map.js b/modern/src/map/Map.js
index 64fc31a0..47ebb1f0 100644
--- a/modern/src/map/Map.js
+++ b/modern/src/map/Map.js
@@ -7,10 +7,10 @@ import React, {
import { SwitcherControl } from './switcher/switcher';
import deviceCategories from '../common/deviceCategories';
import { prepareIcon, loadImage } from './mapUtil';
-import t, { useLocalization } from '../common/localization';
import {
styleCarto, styleMapbox, styleMapTiler, styleOsm,
} from './mapStyles';
+import t from '../common/localization';
import { useAttributePreference } from '../common/preferences';
import palette from '../theme/palette';
@@ -64,9 +64,9 @@ const initMap = async () => {
map.on('load', initMap);
-const navigationControl = new maplibregl.NavigationControl({
+map.addControl(new maplibregl.NavigationControl({
showCompass: false,
-})
+}));
const switcher = new SwitcherControl(
[
@@ -92,32 +92,15 @@ const switcher = new SwitcherControl(
},
);
-const addPrimaryControls = position => {
- map.addControl(navigationControl, position);
- map.addControl(switcher, position);
-}
-
-const removePrimaryControls =()=> {
- map.removeControl(navigationControl);
- map.removeControl(switcher);
-}
-
-
map.addControl(switcher);
const Map = ({ children }) => {
const containerEl = useRef(null);
- const {direction} = useLocalization();
+
const [mapReady, setMapReady] = useState(false);
const mapboxAccessToken = useAttributePreference('mapboxAccessToken');
- useEffect(()=>{
- const controlsPosition = direction ==='rtl' ? 'top-left' : 'top-right';
- addPrimaryControls(controlsPosition);
- return removePrimaryControls;
- },[direction])
-
useEffect(() => {
maplibregl.accessToken = mapboxAccessToken;
}, [mapboxAccessToken]);
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-27 09:16:12 +0000