Localization, WIP, (#8)

This commit is contained in:
Eric van der Vlist 2022-10-04 12:44:41 +02:00
parent 330b4bb721
commit 16e439db41
4 changed files with 73 additions and 9 deletions

30
package-lock.json generated
View File

@ -50,6 +50,7 @@
"react": "^18.2.0",
"react-app-polyfill": "^3.0.0",
"react-dom": "^18.2.0",
"react-localization": "^1.0.19",
"react-pouchdb": "^2.1.0",
"react-redux": "^8.0.2",
"react-router": "^6.3.0",
@ -12451,6 +12452,11 @@
"node": ">=8.9.0"
}
},
"node_modules/localized-strings": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/localized-strings/-/localized-strings-0.2.4.tgz",
"integrity": "sha512-TKDhqFPkIIN/if2FSvVVZTaM/GP9TzfgdQ2uY65mr32xgFu5nqkKXprXbzy5rfx32DF5LDvS/y1UqYF/mAscYA=="
},
"node_modules/locate-path": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@ -15733,6 +15739,17 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"node_modules/react-localization": {
"version": "1.0.19",
"resolved": "https://registry.npmjs.org/react-localization/-/react-localization-1.0.19.tgz",
"integrity": "sha512-f4E6T8xRis19K8qMOnnhjGV2quy1YH2lrSsnAiytvgt7uOSp6WgDhrZH6XZEaEFqupTOCFSf8uagIoIAkjl4JA==",
"dependencies": {
"localized-strings": "^0.2.0"
},
"peerDependencies": {
"react": "^18.0.0 || ^17.0.0 || ^16.0.0 || ^15.6.0"
}
},
"node_modules/react-pouchdb": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-pouchdb/-/react-pouchdb-2.1.0.tgz",
@ -28809,6 +28826,11 @@
"json5": "^2.1.2"
}
},
"localized-strings": {
"version": "0.2.4",
"resolved": "https://registry.npmjs.org/localized-strings/-/localized-strings-0.2.4.tgz",
"integrity": "sha512-TKDhqFPkIIN/if2FSvVVZTaM/GP9TzfgdQ2uY65mr32xgFu5nqkKXprXbzy5rfx32DF5LDvS/y1UqYF/mAscYA=="
},
"locate-path": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@ -31084,6 +31106,14 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
},
"react-localization": {
"version": "1.0.19",
"resolved": "https://registry.npmjs.org/react-localization/-/react-localization-1.0.19.tgz",
"integrity": "sha512-f4E6T8xRis19K8qMOnnhjGV2quy1YH2lrSsnAiytvgt7uOSp6WgDhrZH6XZEaEFqupTOCFSf8uagIoIAkjl4JA==",
"requires": {
"localized-strings": "^0.2.0"
}
},
"react-pouchdb": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/react-pouchdb/-/react-pouchdb-2.1.0.tgz",

View File

@ -45,6 +45,7 @@
"react": "^18.2.0",
"react-app-polyfill": "^3.0.0",
"react-dom": "^18.2.0",
"react-localization": "^1.0.19",
"react-pouchdb": "^2.1.0",
"react-redux": "^8.0.2",
"react-router": "^6.3.0",

View File

@ -22,6 +22,7 @@ import { useDispatch, useSelector } from 'react-redux';
import { settingsActions, SettingsState } from '../../store/settings';
import uri from '../../lib/ids';
import _ from 'lodash';
import i18n from '../../i18n/index';
const Settings: React.FC<{}> = () => {
const dispatch = useDispatch();
@ -105,18 +106,18 @@ const Settings: React.FC<{}> = () => {
className='full-height'
>
<IonToolbar>
<IonTitle>Settings</IonTitle>
<IonTitle>{i18n.settings}</IonTitle>
<IonButtons slot='end'>
<IonButton onClick={() => dismiss()}>Close</IonButton>
<IonButton onClick={() => dismiss()}>{i18n.close}</IonButton>
</IonButtons>
</IonToolbar>
<IonContent>
<IonList lines='full' class='ion-no-margin'>
<IonListHeader lines='full'>
<IonLabel>User</IonLabel>
<IonLabel>{i18n.user}</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Pseudo: </IonLabel>
<IonLabel>{i18n.colonize(i18n.pseudo)} </IonLabel>
<IonInput
ref={pseudo}
value={settingsState.user.pseudo}
@ -126,10 +127,10 @@ const Settings: React.FC<{}> = () => {
</IonList>
<IonList lines='full' class='ion-no-margin'>
<IonListHeader lines='full'>
<IonLabel>Geolocation</IonLabel>
<IonLabel>{i18n.geolocation}</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel>Minimal time interval (ms): </IonLabel>
<IonLabel>{i18n.colonize(i18n.minTimeInt)}</IonLabel>
<IonInput
value={settingsState.geolocation.minTimeInterval}
ref={minTimeInterval}
@ -138,7 +139,7 @@ const Settings: React.FC<{}> = () => {
></IonInput>
</IonItem>
<IonItem>
<IonLabel>Minimal distance (m): </IonLabel>
<IonLabel>{i18n.colonize(i18n.minDist)}</IonLabel>
<IonInput
value={settingsState.geolocation.minDistance}
ref={minDistance}
@ -156,7 +157,7 @@ const Settings: React.FC<{}> = () => {
color='primary'
onClick={() => save()}
>
Save
{i18n.save}
</IonButton>
<IonButton
shape='round'
@ -164,7 +165,7 @@ const Settings: React.FC<{}> = () => {
color='primary'
onClick={() => dismiss()}
>
Cancel
{i18n.cancel}{' '}
</IonButton>
</IonButtons>
</IonToolbar>

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

@ -0,0 +1,32 @@
import LocalizedStrings from 'react-localization';
const strings = new LocalizedStrings({
en: {
colonize: (input: string): any => strings.formatString('{0}:', input),
save: 'Save',
cancel: 'Cancel',
close: 'Close',
settings: 'Settings',
user: 'User',
pseudo: 'Pseudo',
geolocation: 'Geolocation',
minTimeInt: 'Minimal time interval (ms)',
minDist:'Minimal distance (m)',
},
fr: {
colonize: (input: string): any => strings.formatString('{0} :', input),
save: 'Sauvegarder',
cancel: 'Annuler',
close: 'Fermer',
settings: 'Paramètres',
user: 'Utilisateur',
pseudo: 'Pseudo',
geolocation: 'Géolocalisation',
minTimeInt: 'Interval minimal (ms)',
minDist:'Distance minimale (m)',
},
});
export default strings;