BreizhHardware/Jellystat
1
0
Fork 0
mirror of https://github.com/BreizhHardware/Jellystat.git synced 2026-01-18 16:27:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

added language settings

Browse Source
This commit is contained in:
CyferShepard
2024-05-18 12:03:54 +02:00
parent c21152db5e
commit 94443f0297
4 changed files with 50 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/locales/en-US/translation.json
View File

@@ -145,6 +145,8 @@
},
"SETTINGS_PAGE": {
"SETTINGS": "Settings",
"LANGUAGE": "Language",
"SELECT_AN_ADMIN": "Select a Preferred Admin",
"LIBRARY_SETTINGS": "Library Settings",
"BACKUP": "Backup",
"BACKUPS": "Backups",

2
src/index.jsx
View File

@@ -22,7 +22,7 @@ i18n
fallbackLng: "en-US",
debug: false,
detection: {
order: ["navigator", "htmlTag", "querystring", "cookie", "localStorage", "sessionStorage", "path", "subdomain"],
order: ["cookie", "localStorage", "sessionStorage", "navigator", "htmlTag", "querystring", "path", "subdomain"],
cache: ["cookie"],
},
interpolation: {

10
src/lib/languages.jsx Normal file
View File

@@ -0,0 +1,10 @@
export const languages = [
{
id: "en-US",
description: "English",
},
{
id: "fr-FR",
description: "French",
},
];

38
src/pages/components/settings/settingsConfig.jsx
View File

@@ -19,11 +19,13 @@ import EyeOffFillIcon from 'remixicon-react/EyeOffFillIcon';
import "../../css/settings/settings.css";
import { InputGroup } from "react-bootstrap";
import { Trans } from "react-i18next";
import { languages } from "../../../lib/languages";
export default function SettingsConfig() {
const [config, setConfig] = useState(null);
const [admins, setAdmins] = useState();
const [selectedAdmin, setSelectedAdmin] = useState('');
const [selectedLanguage, setSelectedLanguage] = useState(localStorage.getItem('i18nextLng')??'en-US');
const [showKey, setKeyState] = useState(false);
const [formValues, setFormValues] = useState({});
const [isSubmitted, setisSubmitted] = useState("");
@@ -32,6 +34,8 @@ export default function SettingsConfig() {
const token = localStorage.getItem('token');
const [twelve_hr, set12hr] = useState(localStorage.getItem('12hr') === 'true');
const storage_12hr = localStorage.getItem('12hr');
if(storage_12hr===null)
@@ -168,6 +172,16 @@ export default function SettingsConfig() {
});
}
function updateLanguage(event) {
const languageCode=event.target.getAttribute('value');
setSelectedLanguage(languageCode);
localStorage.setItem('i18nextLng',languageCode);
}
if (loadSate === "Loading") {
return <Loading />;
@@ -234,7 +248,7 @@ export default function SettingsConfig() {
<Col>
<Dropdown className="w-100">
<Dropdown.Toggle variant="outline-primary" id="dropdown-basic" className="w-100">
{selectedAdmin ? selectedAdmin.username : 'Select a Preferred Admin'}
{selectedAdmin ? selectedAdmin.username :<Trans i18nKey={"SETTINGS_PAGE.SELECT_AN_ADMIN"}/>}
</Dropdown.Toggle>
<Dropdown.Menu className="w-100" >
@@ -263,6 +277,28 @@ export default function SettingsConfig() {
</Form.Group>
</Form>
<Form className="settings-form">
<Form.Group as={Row} className="mb-3">
<Form.Label column className=""><Trans i18nKey={"SETTINGS_PAGE.LANGUAGE"}/></Form.Label>
<Col>
<Dropdown className="w-100">
<Dropdown.Toggle variant="outline-primary" id="dropdown-basic" className="w-100">
{languages.find((language) => language.id === selectedLanguage)?.description || 'English'}
</Dropdown.Toggle>
<Dropdown.Menu className="w-100" >
{languages && languages.sort((a, b) => a.description - b.description)
.map((language) => (
<Dropdown.Item onClick={updateLanguage} value={language.id} key={language.id}>{language.description}</Dropdown.Item>
))}
</Dropdown.Menu>
</Dropdown>
</Col>
</Form.Group>
</Form>