From 545f0d8223e88631f8d7c13077ffe5bae78716cb Mon Sep 17 00:00:00 2001 From: rahighi Date: Sat, 28 Aug 2021 09:41:25 +0430 Subject: Only multiple language support feature --- modern/src/App.js | 84 +++++++++++----------- modern/src/GeofencesPage.js | 3 +- modern/src/common/localization.js | 25 +------ modern/src/components/registration/LoginForm.js | 7 +- modern/src/components/registration/RegisterForm.js | 4 +- modern/src/map/CurrentLocationMap.js | 9 +-- modern/src/map/Map.js | 25 ++----- web/l10n/fa.json | 2 + 8 files changed, 59 insertions(+), 100 deletions(-) diff --git a/modern/src/App.js b/modern/src/App.js index 228fe55..5197a07 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 ( - - - - - - - - - {!initialized ? () : ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - )} - - + + + + + + + + + + {!initialized ? () : ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + )} + + + ); diff --git a/modern/src/GeofencesPage.js b/modern/src/GeofencesPage.js index 4d23d10..f16ea43 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 26b90e5..6f3e585 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 - - - {props.children} - - + return + {props.children} } diff --git a/modern/src/components/registration/LoginForm.js b/modern/src/components/registration/LoginForm.js index c5c1d6f..461a1ab 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 ( @@ -130,7 +130,7 @@ const LoginForm = () => { {t('loginLanguage')} @@ -145,7 +145,6 @@ const LoginForm = () => { ); - }; export default LoginForm; diff --git a/modern/src/components/registration/RegisterForm.js b/modern/src/components/registration/RegisterForm.js index 3a249c6..6260a0c 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 = () => { history.push('/login')}> - {theme.direction === 'rtl' ? : } + {theme.direction === 'rtl' ? : } diff --git a/modern/src/map/CurrentLocationMap.js b/modern/src/map/CurrentLocationMap.js index c875662..69724ce 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 64fc31a..47ebb1f 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]); diff --git a/web/l10n/fa.json b/web/l10n/fa.json index 1a77883..100f19e 100644 --- a/web/l10n/fa.json +++ b/web/l10n/fa.json @@ -267,6 +267,8 @@ "mapLiveRoutes": "تعقیب مسیر", "mapCurrentLocation": "Current Location", "mapPoiLayer": "لایه POI", + "mapMapTilerBasic" : "Map Tiler Basic", + "mapMapTilerHybrid" : "Map Tiler Hybrid", "stateTitle": "وضعیت", "stateName": "ویژگی", "stateValue": "مقدار", -- cgit v1.2.3