docker-multiarch/openwrt-firmware-selector
1
0
Fork 0
mirror of https://git.netzspielplatz.de/docker-multiarch/openwrt-firmware-selector.git synced 2025-11-08 22:09:25 +00:00
Code Issues Projects Releases Wiki Activity

Adds tabbed interface for advanced image building and reformats code

Browse source 
An interface tagged Basic and Advanced is introduced. Basic section
shows the default openwrt images with download links. Advanced
section show the options to choose which packages to use and an
option to build the images is introduced.
Reformatting of the code is also done according to standard code
styling.

Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
This commit is contained in:
Sudhanshu Gautam 2019-07-12 01:41:43 +05:30
parent 7cab0bfeb5
commit 40f466153b
9 changed files with 584 additions and 401 deletions
Download patch file Download diff file Expand all files Collapse all files

101
src/components/header.js
View file

@ -1,12 +1,25 @@
import React from "react";
import React from 'react';
import LanguageIcon from '@material-ui/icons/Language';
import { Toolbar, Typography, AppBar, Button, Radio, RadioGroup, FormControlLabel, FormControl, FormLabel, Popper, Fade, Paper } from '@material-ui/core';
import { useTranslation } from 'react-i18next';
import {
AppBar,
Button,
Fade,
FormControl,
FormControlLabel,
FormLabel,
Paper,
Popper,
Radio,
RadioGroup,
Toolbar,
Typography,
} from '@material-ui/core';
import {useTranslation} from 'react-i18next';
import i18next from 'i18next';
export default function Header() {
const { t, i18n } = useTranslation();
const {t, i18n} = useTranslation();
const [value, setValue] = React.useState('en');
const [anchorEl, setAnchorEl] = React.useState(null);
@ -20,48 +33,52 @@ export default function Header() {
const openChangeLanguagePopper = event => {
setValue(i18next.language.substring(0, 2));
setAnchorEl(anchorEl ? null : event.currentTarget);
}
};
const open = Boolean(anchorEl);
const id = open ? 'simple-popper' : undefined;
return (
<AppBar position="static">
<Toolbar>
<Typography edge="start" variant="h6">{t('OpenWrt Firmware Selector Wizard')}</Typography>
<div style={{flexGrow: 1}}></div>
<Button aria-describedby={id} color="secondary" variant="contained" onClick={openChangeLanguagePopper}>
{t('Change Language')} &nbsp;
<LanguageIcon />
</Button>
<Popper
id={id}
open={open}
anchorEl={anchorEl}
transition
disablePortal = {true}
>
{({ TransitionProps }) => (
<Fade {...TransitionProps} timeout={350}>
<Paper className="language-selector-popper">
<FormControl component="fieldset">
<FormLabel component="legend">Change Language</FormLabel>
<br />
<RadioGroup
aria-label="Language"
name="language"
value={value}
onChange={changeLanguage}
>
<FormControlLabel value="en" control={<Radio />} label={t('English')} />
<FormControlLabel value="de" control={<Radio />} label={t('German')} />
</RadioGroup>
</FormControl>
</Paper>
</Fade>
)}
</Popper>
</Toolbar>
</AppBar>
<AppBar position="static">
<Toolbar>
<Typography edge="start" variant="h6">{t(
'OpenWrt Firmware Selector Wizard')}</Typography>
<div style={{flexGrow: 1}} />
<Button aria-describedby={id} color="secondary" variant="contained"
onClick={openChangeLanguagePopper} href="#">
{t('Change Language')} &nbsp;
<LanguageIcon/>
</Button>
<Popper
id={id}
open={open}
anchorEl={anchorEl}
transition
disablePortal={true}
>
{({TransitionProps}) => (
<Fade {...TransitionProps} timeout={350}>
<Paper className="language-selector-popper">
<FormControl component="fieldset">
<FormLabel component="legend">Change Language</FormLabel>
<br/>
<RadioGroup
aria-label="Language"
name="language"
value={value}
onChange={changeLanguage}
>
<FormControlLabel value="en" control={<Radio/>}
label={t('English')}/>
<FormControlLabel value="de" control={<Radio/>}
label={t('German')}/>
</RadioGroup>
</FormControl>
</Paper>
</Fade>
)}
</Popper>
</Toolbar>
</AppBar>
);
}