This commit is contained in:
Eric van der Vlist 2022-11-30 13:58:55 +01:00
parent 3e191dbf38
commit 3fd43b09a4
9 changed files with 80 additions and 3 deletions

3
cSpell.json Normal file
View File

@ -0,0 +1,3 @@
{
"overrides": [{ "filename": "**/fr.*", "language": "fr" }]
}

9
package-lock.json generated
View File

@ -16,6 +16,7 @@
"@capacitor/ios": "^3.4.3", "@capacitor/ios": "^3.4.3",
"@esbuild-plugins/node-globals-polyfill": "^0.1.1", "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
"@esbuild-plugins/node-modules-polyfill": "^0.1.4", "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
"@solid-primitives/i18n": "^1.1.2",
"@solidjs/router": "^0.5.1", "@solidjs/router": "^0.5.1",
"@suid/icons-material": "^0.5.1", "@suid/icons-material": "^0.5.1",
"@suid/material": "^0.8.0", "@suid/material": "^0.8.0",
@ -1011,6 +1012,14 @@
"integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==", "integrity": "sha512-1P1OROm/rdubP5aFDSZQILU0vrLCJ4fvHt6EoqHEM+2D/G5MK3bIaymUKLit8Js9gbns5UyJnkP/TZROLw4tUA==",
"dev": true "dev": true
}, },
"node_modules/@solid-primitives/i18n": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@solid-primitives/i18n/-/i18n-1.1.2.tgz",
"integrity": "sha512-eLTqmDKorLa99cXrgS4DgTqrk0n/F4rB0YR76A6gr90by5TLE+HSZ0agiZVBIUGs2g5EFeEnLqwxKsM+F5hcJQ==",
"peerDependencies": {
"solid-js": "^1.5.0"
}
},
"node_modules/@solidjs/router": { "node_modules/@solidjs/router": {
"version": "0.5.1", "version": "0.5.1",
"resolved": "https://registry.npmjs.org/@solidjs/router/-/router-0.5.1.tgz", "resolved": "https://registry.npmjs.org/@solidjs/router/-/router-0.5.1.tgz",

View File

@ -30,6 +30,7 @@
"@capacitor/ios": "^3.4.3", "@capacitor/ios": "^3.4.3",
"@esbuild-plugins/node-globals-polyfill": "^0.1.1", "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
"@esbuild-plugins/node-modules-polyfill": "^0.1.4", "@esbuild-plugins/node-modules-polyfill": "^0.1.4",
"@solid-primitives/i18n": "^1.1.2",
"@solidjs/router": "^0.5.1", "@solidjs/router": "^0.5.1",
"@suid/icons-material": "^0.5.1", "@suid/icons-material": "^0.5.1",
"@suid/material": "^0.8.0", "@suid/material": "^0.8.0",

View File

@ -3,6 +3,11 @@ import { Feature } from 'ol';
import { Geometry } from 'ol/geom'; import { Geometry } from 'ol/geom';
import { Component, createSignal, For } from 'solid-js'; import { Component, createSignal, For } from 'solid-js';
import { unwrap } from 'solid-js/store'; import { unwrap } from 'solid-js/store';
import {
I18nContext,
createI18nContext,
useI18n,
} from '@solid-primitives/i18n';
import CloseIcon from '@suid/icons-material/Close'; import CloseIcon from '@suid/icons-material/Close';
import { tree } from '../map'; import { tree } from '../map';
import style from './Infos.module.css'; import style from './Infos.module.css';
@ -49,6 +54,7 @@ export const clickHandler = (event: any) => {
}; };
const Infos: Component<{}> = (props) => { const Infos: Component<{}> = (props) => {
const [t, { add, locale, dict }] = useI18n();
const handleClickOpen = () => { const handleClickOpen = () => {
setOpen(true); setOpen(true);
}; };
@ -59,7 +65,7 @@ const Infos: Component<{}> = (props) => {
return ( return (
<Dialog onClose={handleClose} open={open()} class={style.dialog}> <Dialog onClose={handleClose} open={open()} class={style.dialog}>
<DialogTitle class={style.title}> <DialogTitle class={style.title}>
<div class={style['title-text']}>Nearby</div> <div class={style['title-text']}>{t('nearby')}</div>
<IconButton onClick={handleClose} class={style.close}> <IconButton onClick={handleClose} class={style.close}>
<CloseIcon /> <CloseIcon />
</IconButton> </IconButton>

View File

@ -1,6 +1,11 @@
import OSM from 'ol/source/OSM'; import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ'; import XYZ from 'ol/source/XYZ';
import { Component, createSignal, For } from 'solid-js'; import { Component, createSignal, For } from 'solid-js';
import {
I18nContext,
createI18nContext,
useI18n,
} from '@solid-primitives/i18n';
import style from './MapTileProvider.module.css'; import style from './MapTileProvider.module.css';
import LayersIcon from '@suid/icons-material/Layers'; import LayersIcon from '@suid/icons-material/Layers';
@ -84,6 +89,8 @@ const MapTilesProvider: Component<{}> = (props) => {
const params = useParams(); const params = useParams();
const [t] = useI18n();
const handleChange = (ev: any) => { const handleChange = (ev: any) => {
navigate( navigate(
`/map/${ev.target.value}/${params.lon}/${params.lat}/${params.zoom}/${params.rotation}` `/map/${ev.target.value}/${params.lon}/${params.lat}/${params.zoom}/${params.rotation}`
@ -100,7 +107,7 @@ const MapTilesProvider: Component<{}> = (props) => {
</div> </div>
<Dialog onClose={handleClose} open={open()} class={style.dialog}> <Dialog onClose={handleClose} open={open()} class={style.dialog}>
<DialogTitle class={style.title}> <DialogTitle class={style.title}>
<div class={style['title-text']}>Choose your map</div> <div class={style['title-text']}>{t('chooseYourMap')}</div>
<IconButton onClick={handleClose} class={style.close}> <IconButton onClick={handleClose} class={style.close}>
<CloseIcon /> <CloseIcon />
</IconButton> </IconButton>

9
src/i18n/en.ts Normal file
View File

@ -0,0 +1,9 @@
const dict = {
close: 'Close',
chooseYourMap: 'Choose your map',
nearby: 'Nearby',
};
export default dict;

11
src/i18n/fr.ts Normal file
View File

@ -0,0 +1,11 @@
// cSpell:includeRegExp string
const dict = {
close: 'Quitter',
chooseYourMap: 'Choisissez votre carte',
nearby: 'À proximité',
};
export default dict;

6
src/i18n/index.ts Normal file
View File

@ -0,0 +1,6 @@
import en from './en';
import fr from './fr';
export const dict = { en, fr };
export default dict;

View File

@ -1,8 +1,15 @@
/* @refresh reload */ /* @refresh reload */
import { render } from 'solid-js/web'; import { render } from 'solid-js/web';
import { Router, hashIntegration } from '@solidjs/router'; import { Router, hashIntegration } from '@solidjs/router';
import {
I18nContext,
createI18nContext,
useI18n,
} from '@solid-primitives/i18n';
import dict from './i18n';
import App from './App'; import App from './App';
import { Language } from '@suid/icons-material';
// See https://stackoverflow.com/questions/71538643/property-wakelock-does-not-exist-on-type-navigator // See https://stackoverflow.com/questions/71538643/property-wakelock-does-not-exist-on-type-navigator
const requestWakeLock = async () => { const requestWakeLock = async () => {
@ -32,10 +39,28 @@ const handleVisibilityChange = () => {
document.addEventListener('visibilitychange', handleVisibilityChange, false); document.addEventListener('visibilitychange', handleVisibilityChange, false);
requestWakeLock(); requestWakeLock();
const getLanguage = () => {
for (const i in navigator.languages) {
const language = navigator.languages[i];
if (language in dict) {
return language;
}
const shortLanguage = language.slice(0, 2);
if (shortLanguage in dict) {
return shortLanguage;
}
}
return undefined;
};
const i18nDict = createI18nContext(dict, getLanguage());
render( render(
() => ( () => (
<Router> <Router>
<App /> <I18nContext.Provider value={i18nDict}>
<App />
</I18nContext.Provider>
</Router> </Router>
), ),
document.getElementById('root') as HTMLElement document.getElementById('root') as HTMLElement