mirror of
https://github.com/pds-nest/nest.git
synced 2024-11-21 20:44:18 +00:00
Localization
This commit is contained in:
Stefano Pigozzi
parent
c13e5fff40
commit
a21b982b97
6 changed files with 104 additions and 1 deletions
29
nest_frontend/Localization.js
Normal file
29
nest_frontend/Localization.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import LocalizedStrings from "react-localization"
|
||||
|
||||
|
||||
/**
|
||||
* All strings contained in the app should be present in this dict.
|
||||
*
|
||||
* If a key is missing in a language, the italian one is displayed instead.
|
||||
*
|
||||
* Define format strings as in C#:
|
||||
* ```js
|
||||
* "Raggio di {number} km"
|
||||
* "{number} km radius"
|
||||
* ```
|
||||
*/
|
||||
export default new LocalizedStrings({
|
||||
// 🇮🇹
|
||||
it: {
|
||||
appName: "N.E.S.T.",
|
||||
appFullName: "Noi Estraiamo Statistiche Tweet",
|
||||
},
|
||||
// 🇬🇧
|
||||
en: {
|
||||
appName: "N.E.S.T.",
|
||||
},
|
||||
// 🇫🇮
|
||||
fi: {
|
||||
appName: "N.E.S.T.",
|
||||
}
|
||||
})
|
||||
|
|
@ -4,6 +4,7 @@ import LogoDark from "../../media/LogoDark.png"
|
|||
import LogoLight from "../../media/LogoLight.png"
|
||||
import ContextTheme from "../../contexts/ContextTheme"
|
||||
import classNames from "classnames"
|
||||
import Localization from "../../Localization"
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -33,6 +34,12 @@ export default function Logo({ className, ...props }) {
|
|||
}
|
||||
|
||||
return (
|
||||
<img src={logo} className={classNames(Style.Logo, className)} alt={"N.E.S.T."} {...props}/>
|
||||
<img
|
||||
src={logo}
|
||||
className={classNames(Style.Logo, className)}
|
||||
alt={Localization.appName}
|
||||
title={Localization.appFullName}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
31
nest_frontend/components/interactive/SelectLanguage.js
Normal file
31
nest_frontend/components/interactive/SelectLanguage.js
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import React, { useState } from "react"
|
||||
import Select from "../base/Select"
|
||||
import Localization from "../../Localization"
|
||||
|
||||
|
||||
/**
|
||||
* A {@link Select} which allows the user to choose between the various available themes, switching between them as soon
|
||||
* as the user selects a different one.
|
||||
*
|
||||
* @param props - Additional props to pass to the {@link Select}.
|
||||
* @returns {JSX.Element}
|
||||
* @constructor
|
||||
*/
|
||||
export default function SelectLanguage({ ...props }) {
|
||||
const [_language, _setLanguage] = useState(Localization.getLanguage())
|
||||
|
||||
const setLanguage = event => {
|
||||
const language = event.target.value
|
||||
console.info("Changing language to: ", language)
|
||||
Localization.setLanguage(language)
|
||||
_setLanguage(language)
|
||||
}
|
||||
|
||||
return (
|
||||
<Select value={_language} onChange={setLanguage} {...props}>
|
||||
<option value={"it"}>🇮🇹 Italiano</option>
|
||||
<option value={"en"}>🇬🇧 English</option>
|
||||
<option value={"fi"}>🇫🇮 Suomi</option>
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@ import BoxHeader from "../components/base/BoxHeader"
|
|||
import BoxFull from "../components/base/BoxFull"
|
||||
import SelectTheme from "../components/interactive/SelectTheme"
|
||||
import BoxLoggedIn from "../components/interactive/BoxLoggedIn"
|
||||
import SelectLanguage from "../components/interactive/SelectLanguage"
|
||||
|
||||
|
||||
export default function PageSettings({ children, className, ...props }) {
|
||||
|
|
@ -15,6 +16,9 @@ export default function PageSettings({ children, className, ...props }) {
|
|||
<BoxHeader>
|
||||
Cambia tema: <SelectTheme/>
|
||||
</BoxHeader>
|
||||
<BoxHeader>
|
||||
Cambia lingua: <SelectLanguage/>
|
||||
</BoxHeader>
|
||||
<BoxFull header={"Impostazioni allarmi"}>
|
||||
🚧 Non implementato.
|
||||
</BoxFull>
|
||||
|
|
|
|||
30
package-lock.json
generated
30
package-lock.json
generated
|
|
@ -19,9 +19,11 @@
|
|||
"classnames": "^2.3.1",
|
||||
"is-string": "^1.0.5",
|
||||
"leaflet": "^1.7.1",
|
||||
"localized-strings": "github:Steffo99/localized-strings",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-leaflet": "^3.1.0",
|
||||
"react-localization": "^1.0.17",
|
||||
"react-router": "^5.2.0",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "4.0.3",
|
||||
|
|
@ -12694,6 +12696,11 @@
|
|||
"node": ">=8.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/localized-strings": {
|
||||
"version": "0.2.4",
|
||||
"resolved": "git+ssh://git@github.com/Steffo99/localized-strings.git#bf6d078ba2b2264cac05fc6f61900e5752740da6",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/locate-path": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
|
||||
|
|
@ -16445,6 +16452,17 @@
|
|||
"react-dom": "^17.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-localization": {
|
||||
"version": "1.0.17",
|
||||
"resolved": "https://registry.npmjs.org/react-localization/-/react-localization-1.0.17.tgz",
|
||||
"integrity": "sha512-UowuLAvnEPXJgzxjDX/9hKdKYvtUgC6hQ5PV0CnT5f/77tItIUru5tTwgrDY2UL5oUK3JRMgz42tqnAU2W5eoA==",
|
||||
"dependencies": {
|
||||
"localized-strings": "^0.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^17.0.0 || ^16.0.0 || ^15.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-refresh": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
|
||||
|
|
@ -32561,6 +32579,10 @@
|
|||
"json5": "^2.1.2"
|
||||
}
|
||||
},
|
||||
"localized-strings": {
|
||||
"version": "git+ssh://git@github.com/Steffo99/localized-strings.git#bf6d078ba2b2264cac05fc6f61900e5752740da6",
|
||||
"from": "localized-strings@github:Steffo99/localized-strings"
|
||||
},
|
||||
"locate-path": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
|
||||
|
|
@ -35546,6 +35568,14 @@
|
|||
"@react-leaflet/core": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"react-localization": {
|
||||
"version": "1.0.17",
|
||||
"resolved": "https://registry.npmjs.org/react-localization/-/react-localization-1.0.17.tgz",
|
||||
"integrity": "sha512-UowuLAvnEPXJgzxjDX/9hKdKYvtUgC6hQ5PV0CnT5f/77tItIUru5tTwgrDY2UL5oUK3JRMgz42tqnAU2W5eoA==",
|
||||
"requires": {
|
||||
"localized-strings": "^0.2.0"
|
||||
}
|
||||
},
|
||||
"react-refresh": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
|
||||
|
|
|
|||
|
|
@ -14,9 +14,11 @@
|
|||
"classnames": "^2.3.1",
|
||||
"is-string": "^1.0.5",
|
||||
"leaflet": "^1.7.1",
|
||||
"localized-strings": "github:Steffo99/localized-strings",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-leaflet": "^3.1.0",
|
||||
"react-localization": "^1.0.17",
|
||||
"react-router": "^5.2.0",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "4.0.3",
|
||||
|
|
|
|||
Loading…
Reference in a new issue