add language selection

2020-10-29 08:48:35 +01:00
parent 0a459938a8
commit 14947267d1
19 changed files with 399 additions and 30 deletions
@@ -0,0 +1,43 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+
+const useStyles = makeStyles((theme) => ({
+    formControl: {
+        margin: theme.spacing(1),
+        minWidth: 120,
+    },
+    selectEmpty: {
+        marginTop: theme.spacing(2),
+    },
+}));
+
+export default function LanguageSelector() {
+    const classes = useStyles();
+    const [lang, setLang] = React.useState(window.localStorage.getItem('locale'));
+
+    const handleChange = (event) => {
+        setLang(event.target.value);
+        window.localStorage.setItem('locale', event.target.value);
+    };
+
+    return (
+        <div>
+            <FormControl className={classes.formControl}>
+                <InputLabel id="demo-simple-select-label">Sprache</InputLabel>
+                <Select
+                    labelId="demo-simple-select-label"
+                    id="demo-simple-select"
+                    value={lang}
+                    onChange={handleChange}
+                >
+                    <MenuItem value={'de'}>Deutsch</MenuItem>
+                    <MenuItem value={'en'}>English</MenuItem>
+                </Select>
+            </FormControl>
+        </div>
+    );
+}
@@ -0,0 +1,45 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import FormControl from '@material-ui/core/FormControl';
+import Select from '@material-ui/core/Select';
+
+const useStyles = makeStyles((theme) => ({
+    formControl: {
+        margin: theme.spacing(1),
+        minWidth: 400,
+    },
+    selectEmpty: {
+        marginTop: theme.spacing(2),
+    },
+}));
+
+export default function LanguageSelector() {
+    const classes = useStyles();
+    const [renderer, setRenderer] = React.useState(window.localStorage.getItem('renderer'));
+
+    const handleChange = (event) => {
+        setRenderer(event.target.value);
+        window.localStorage.setItem('renderer', event.target.value);
+    };
+
+    return (
+        <div>
+            <FormControl className={classes.formControl}>
+                <InputLabel id="demo-simple-select-label">Renderer</InputLabel>
+                <Select
+                    labelId="demo-simple-select-label"
+                    id="demo-simple-select"
+                    value={renderer}
+                    onChange={handleChange}
+
+                >
+                    <MenuItem value={'geras'}>Geras</MenuItem>
+                    <MenuItem value={'zelos'}>Zelos</MenuItem>
+                </Select>
+            </FormControl>
+            <p>Der Renderer bestimmt das aussehen der Blöcke</p>
+        </div>
+    );
+}
@@ -0,0 +1,30 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import LanguageSelector from './LanguageSelector';
+import RenderSelector from './RenderSelector';
+
+
+class Settings extends Component {
+    render() {
+        return (
+            <div>
+                <Typography variant='h4' style={{ marginBottom: '5px' }}>Einstellungen</Typography>
+                <LanguageSelector />
+                <RenderSelector />
+                <Button
+                    style={{ marginTop: '20px' }}
+                    variant="contained"
+                    color="primary"
+                    onClick={() => { this.props.history.push('/') }}
+                >
+                    Zurück zur Startseite
+            </Button>
+            </div>
+        );
+    };
+}
+
+export default withRouter(Settings);