mirror of
https://git.netzspielplatz.de/docker-multiarch/openwrt-firmware-selector.git
synced 2025-11-08 20:39:25 +00:00
Adds tabbed interface for advanced image building and reformats code
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
parent
7cab0bfeb5
commit
40f466153b
9 changed files with 584 additions and 401 deletions
|
|
@ -1,16 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<head>
|
||||
<base href="/openwrt-firmware-selector/">
|
||||
<meta charset="utf-8" />
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta charset="utf-8"/>
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta name="theme-color" content="#000000"/>
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
|
|
@ -20,20 +20,20 @@
|
|||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>OpenWrt Firmware Selector Wizard </title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
<title>OpenWrt Firmware Selector Wizard </title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
40
src/App.js
40
src/App.js
|
|
@ -1,10 +1,10 @@
|
|||
import React, { Suspense } from 'react';
|
||||
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
|
||||
import React, {Suspense} from 'react';
|
||||
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
|
||||
import './App.scss';
|
||||
|
||||
import { createMuiTheme } from '@material-ui/core/styles';
|
||||
import { ThemeProvider } from '@material-ui/styles';
|
||||
import Header from './components/header.js'
|
||||
import {createMuiTheme} from '@material-ui/core/styles';
|
||||
import {ThemeProvider} from '@material-ui/styles';
|
||||
import Header from './components/header.js';
|
||||
import Home from './containers/home/home';
|
||||
import NotFound from './containers/not-found/not-found';
|
||||
import LinearProgress from '@material-ui/core/LinearProgress';
|
||||
|
|
@ -22,21 +22,21 @@ const theme = createMuiTheme({
|
|||
|
||||
function App() {
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<Suspense fallback={
|
||||
<LinearProgress />
|
||||
}>
|
||||
<div className="App">
|
||||
<Header></Header>
|
||||
<Router>
|
||||
<Switch>
|
||||
<Route path="" component={Home}></Route>
|
||||
<Route default component={NotFound}></Route>
|
||||
</Switch>
|
||||
</Router>
|
||||
</div>
|
||||
</Suspense>
|
||||
</ThemeProvider>
|
||||
<ThemeProvider theme={theme}>
|
||||
<Suspense fallback={
|
||||
<LinearProgress/>
|
||||
}>
|
||||
<div className="App">
|
||||
<Header/>
|
||||
<Router>
|
||||
<Switch>
|
||||
<Route path="" component={Home}/>
|
||||
<Route default component={NotFound}/>
|
||||
</Switch>
|
||||
</Router>
|
||||
</div>
|
||||
</Suspense>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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')}
|
||||
<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')}
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,32 +1,38 @@
|
|||
import React from "react";
|
||||
import {
|
||||
Container,
|
||||
Paper,
|
||||
Typography,
|
||||
InputAdornment,
|
||||
FormControl,
|
||||
TextField,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
CircularProgress,
|
||||
import React from 'react';
|
||||
import {
|
||||
AppBar,
|
||||
Button,
|
||||
Grid,
|
||||
ClickAwayListener,
|
||||
ExpansionPanel,
|
||||
ExpansionPanelSummary,
|
||||
ExpansionPanelDetails,
|
||||
Checkbox,
|
||||
CircularProgress,
|
||||
ClickAwayListener,
|
||||
Container,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogTitle,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
FormGroup,
|
||||
FormControlLabel } from "@material-ui/core";
|
||||
import { fade, makeStyles } from '@material-ui/core/styles';
|
||||
Grid,
|
||||
InputAdornment,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
Paper,
|
||||
Tab,
|
||||
Tabs,
|
||||
TextField,
|
||||
Typography,
|
||||
} from '@material-ui/core';
|
||||
import {fade, makeStyles} from '@material-ui/core/styles';
|
||||
|
||||
import SearchIcon from '@material-ui/icons/Search';
|
||||
import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
|
||||
import WarningIcon from '@material-ui/icons/Warning';
|
||||
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
|
||||
import BuildIcon from '@material-ui/icons/Build';
|
||||
import './home.scss';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import {withTranslation} from 'react-i18next';
|
||||
import FuzzySet from 'fuzzyset.js';
|
||||
|
||||
const useStylesSearch = makeStyles(theme => ({
|
||||
|
|
@ -52,22 +58,59 @@ function SearchTextField(props) {
|
|||
const classes = useStylesSearch();
|
||||
|
||||
return (
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label={
|
||||
<div className="search-label">
|
||||
{props.labeltext}
|
||||
</div>
|
||||
}
|
||||
InputProps={
|
||||
{ classes,
|
||||
endAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon className={classes.label} />
|
||||
</InputAdornment>
|
||||
)
|
||||
}
|
||||
} {...props} />
|
||||
<TextField
|
||||
variant="outlined"
|
||||
label={
|
||||
<div className="search-label">
|
||||
{props.labeltext}
|
||||
</div>
|
||||
}
|
||||
InputProps={
|
||||
{
|
||||
classes,
|
||||
endAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon className={classes.label}/>
|
||||
</InputAdornment>
|
||||
),
|
||||
}
|
||||
} {...props} />
|
||||
);
|
||||
}
|
||||
|
||||
function TabContainer({children, dir}) {
|
||||
return (
|
||||
<Typography component="div" dir={dir} style={{padding: '20px 0 0'}}>
|
||||
{children}
|
||||
</Typography>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertDialog({open, handleClose, text, title, t}) {
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={() => handleClose(-1)}
|
||||
aria-labelledby="alert-dialog-title"
|
||||
aria-describedby="alert-dialog-description"
|
||||
>
|
||||
<DialogTitle
|
||||
id="alert-dialog-title">{t(title)}</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText id="alert-dialog-description">
|
||||
{t(text)}
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={() => handleClose(1)} color="primary">
|
||||
{t('Build')} <BuildIcon/>
|
||||
</Button>
|
||||
<Button onClick={() => handleClose(0)} color="secondary"
|
||||
variant="contained" autoFocus>
|
||||
{t('Cancel')}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -87,17 +130,51 @@ class Home extends React.Component {
|
|||
query: '',
|
||||
downloading: false,
|
||||
packages: {},
|
||||
release_version_number: '',
|
||||
};
|
||||
fuzzySet;
|
||||
packages = ["opkg","ip6tables","odhcp6c","base-files","mtd","fstools","kmod-leds-gpio","busybox","wpad-mini","kmod-gpio-button-hotplug","kmod-mt76","logd","swconfig","dnsmasq","dropbear","ppp","netifd","ppp-mod-pppoe","uci","libc","uclient-fetch","kmod-ipt-offload","libgcc","odhcpd-ipv6only","iptables","firewall","luci"];
|
||||
basicInterface = 0;
|
||||
confirmingBuild = false;
|
||||
packages = [
|
||||
'opkg',
|
||||
'ip6tables',
|
||||
'odhcp6c',
|
||||
'base-files',
|
||||
'mtd',
|
||||
'fstools',
|
||||
'kmod-leds-gpio',
|
||||
'busybox',
|
||||
'wpad-mini',
|
||||
'kmod-gpio-button-hotplug',
|
||||
'kmod-mt76',
|
||||
'logd',
|
||||
'swconfig',
|
||||
'dnsmasq',
|
||||
'dropbear',
|
||||
'ppp',
|
||||
'netifd',
|
||||
'ppp-mod-pppoe',
|
||||
'uci',
|
||||
'libc',
|
||||
'uclient-fetch',
|
||||
'kmod-ipt-offload',
|
||||
'libgcc',
|
||||
'odhcpd-ipv6only',
|
||||
'iptables',
|
||||
'firewall',
|
||||
'luci'];
|
||||
|
||||
getDevicesData = () => fetch('https://chef.libremesh.org/download/json/devices.json').then(res => res.json());
|
||||
getDeviceData = (device_id) => fetch('https://chef.libremesh.org/download/json/' + device_id + '.json').then(res => res.json());
|
||||
getDevicesData = () => fetch(
|
||||
'https://chef.libremesh.org/download/json/devices.json')
|
||||
.then(res => res.json());
|
||||
getDeviceData = (device_id) => fetch(
|
||||
'https://chef.libremesh.org/download/json/' + device_id + '.json')
|
||||
.then(res => res.json());
|
||||
|
||||
componentDidMount() {
|
||||
this.getDevicesData().then(data => {
|
||||
Object.keys(data['devices']).forEach((device_id) => {
|
||||
var device_name = data['devices'][device_id];
|
||||
const device_name = data['devices'][device_id];
|
||||
this.deviceNames.push(device_name);
|
||||
this.deviceNamesID[device_name] = device_id;
|
||||
});
|
||||
|
|
@ -105,9 +182,10 @@ class Home extends React.Component {
|
|||
this.setState({
|
||||
devices: data['devices'],
|
||||
devicesLoaded: true,
|
||||
release_version_number: data['version_number'],
|
||||
});
|
||||
});
|
||||
var packages = {};
|
||||
let packages = {};
|
||||
this.packages.forEach((package_name) => {
|
||||
packages[package_name] = true;
|
||||
});
|
||||
|
|
@ -118,7 +196,7 @@ class Home extends React.Component {
|
|||
|
||||
selectDevice = (device_name) => {
|
||||
if (device_name != null) {
|
||||
var device_id = this.deviceNamesID[device_name];
|
||||
const device_id = this.deviceNamesID[device_name];
|
||||
this.setState({
|
||||
showDeviceData: true,
|
||||
showSearch: false,
|
||||
|
|
@ -132,7 +210,7 @@ class Home extends React.Component {
|
|||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
search = (event) => {
|
||||
const query = event.target.value;
|
||||
|
|
@ -142,9 +220,9 @@ class Home extends React.Component {
|
|||
showSearch: false,
|
||||
});
|
||||
const deviceNames = this.fuzzySet.get(query, undefined, 0);
|
||||
var searchResults = [];
|
||||
let searchResults = [];
|
||||
if (deviceNames != null) {
|
||||
for (var i = 0; i < deviceNames.length && i < 6; i++) {
|
||||
for (let i = 0; i < deviceNames.length && i < 6; i++) {
|
||||
searchResults.push(deviceNames[i][1]);
|
||||
}
|
||||
}
|
||||
|
|
@ -152,202 +230,242 @@ class Home extends React.Component {
|
|||
searchResults,
|
||||
showSearch: query.length > 0,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
hideSearchResults = () => {
|
||||
console.log("bahar")
|
||||
this.setState({
|
||||
showSearch: false
|
||||
showSearch: false,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
changeInterface = (e, val) => {
|
||||
this.basicInterface = val;
|
||||
};
|
||||
|
||||
packageSettingChange = (event, package_name) => {
|
||||
var packages = this.state.packages;
|
||||
let packages = this.state.packages;
|
||||
packages[package_name] = event.target.checked;
|
||||
this.setState({
|
||||
packages,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
downlodingImageIndicatorShow = (i) => {
|
||||
downloadingImageIndicatorShow = (i) => {
|
||||
this.setState({
|
||||
downloading: true
|
||||
downloading: true,
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
downloading: false
|
||||
downloading: false,
|
||||
});
|
||||
}, 1000)
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
closeConfirmBuildDialog = (v) => {
|
||||
this.confirmingBuild = false;
|
||||
console.log(v);
|
||||
};
|
||||
|
||||
openConfirmBuildDialog = () => {
|
||||
this.confirmingBuild = true;
|
||||
};
|
||||
|
||||
render() {
|
||||
const warning432 = this.state.showDeviceData && parseInt((this.state.device['image_size'] || '').slice(0, -1)) <= 4000 && (
|
||||
<Paper className="warning-432" elevation={0}>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="center"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item>
|
||||
<WarningIcon className="icon" />
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
Devices with ≤4MB flash and/or ≤32MB ram will work but they will be very limited (usually they can't install or run additional packages) because they have low RAM and flash space. Consider this when choosing a device to buy, or when deciding to flash OpenWrt on your device because it is listed as supported.
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
);
|
||||
const warning432 = this.state.showDeviceData &&
|
||||
parseInt(
|
||||
(this.state.device['image_size'] || '').slice(0, -1)) <= 4000 && (
|
||||
<Paper className="warning-432" elevation={0}>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
justify="center"
|
||||
alignItems="center"
|
||||
>
|
||||
<Grid item>
|
||||
<WarningIcon className="icon"/>
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
{this.props.t(
|
||||
'Devices with ≤4MB flash and/or ≤32MB ram will work but they will be very limited (usually they can\'t install or run additional packages) because they have low RAM and flash space. Consider this when choosing a device to buy, or when deciding to flash OpenWrt on your device because it is listed as supported.')}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
);
|
||||
const notLoaded = (
|
||||
<CircularProgress />
|
||||
<CircularProgress/>
|
||||
);
|
||||
const onLoad = (
|
||||
<>
|
||||
<Typography variant="h5">
|
||||
{this.props.t('Download OpenWrt firmware for your device!')}
|
||||
</Typography>
|
||||
<Typography>
|
||||
{this.props.t('Please use the input below to download firmware for your device!')}
|
||||
</Typography>
|
||||
<br />
|
||||
<ClickAwayListener onClickAway={this.hideSearchResults}>
|
||||
<div className="search-container">
|
||||
<FormControl fullWidth>
|
||||
<SearchTextField
|
||||
id="outlined-adornment-search-devices"
|
||||
labeltext={this.props.t('Search your device')}
|
||||
value={this.state.query}
|
||||
onChange={this.search}
|
||||
onClick={this.search}
|
||||
/>
|
||||
</FormControl>
|
||||
{
|
||||
this.state.showSearch && (
|
||||
<Paper elevation={4} className="search-results">
|
||||
<List>
|
||||
{
|
||||
this.state.searchResults.map((res, index) => {
|
||||
return (
|
||||
<ListItem
|
||||
key={res}
|
||||
button
|
||||
onClick={() => this.selectDevice(res)}
|
||||
>
|
||||
<ListItemText primary={
|
||||
<div>
|
||||
{res}
|
||||
</div>
|
||||
} />
|
||||
</ListItem>
|
||||
);
|
||||
})
|
||||
}
|
||||
</List>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
{
|
||||
(this.state.searchResults.length === 0 && this.state.showSearch) && (
|
||||
<Paper elevation={4} className="search-results">
|
||||
<ListItem>
|
||||
<ListItemText primary={this.props.t('No results')}></ListItemText>
|
||||
</ListItem>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</ClickAwayListener>
|
||||
{
|
||||
this.state.showDeviceData && !this.state.deviceLoaded && (
|
||||
<>
|
||||
<br />
|
||||
{ notLoaded }
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
this.state.showDeviceData && this.state.deviceLoaded && (
|
||||
<>
|
||||
{ warning432 }
|
||||
<br />
|
||||
<Grid container className="device-info">
|
||||
<Grid item xs>
|
||||
<b>Name: </b> {this.state.device['title']}
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<b>Target: </b> {this.state.device['target']}
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<b>Subtarget: </b> {this.state.device['subtarget']}
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<b>Image Size: </b> {this.state.device['image_size']}
|
||||
</Grid>
|
||||
</Grid>
|
||||
<ExpansionPanel elevation={0} className="advanced-settings">
|
||||
<ExpansionPanelSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls="panel1a-content"
|
||||
id="panel1a-header"
|
||||
>
|
||||
<Typography>Customize Packages (<WarningIcon className="icon" /> for advanced users)</Typography>
|
||||
</ExpansionPanelSummary>
|
||||
<ExpansionPanelDetails className="options">
|
||||
<FormGroup row>
|
||||
{
|
||||
this.packages.map((package_name, i) => {
|
||||
return (
|
||||
<FormControlLabel
|
||||
key={i}
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={(event) => this.packageSettingChange(event, package_name)}
|
||||
value={this.state.packages[package_name]}
|
||||
checked={this.state.packages[package_name]}
|
||||
/>
|
||||
<>
|
||||
<Typography variant="h5">
|
||||
{this.props.t('Download OpenWrt firmware for your device!')}
|
||||
</Typography>
|
||||
<Typography>
|
||||
{this.props.t(
|
||||
'Please use the input below to download firmware for your device!')}
|
||||
</Typography>
|
||||
<br/>
|
||||
<ClickAwayListener onClickAway={this.hideSearchResults}>
|
||||
<div className="search-container">
|
||||
<FormControl fullWidth>
|
||||
<SearchTextField
|
||||
id="outlined-adornment-search-devices"
|
||||
labeltext={this.props.t('Search your device')}
|
||||
value={this.state.query}
|
||||
onChange={this.search}
|
||||
onClick={this.search}
|
||||
/>
|
||||
</FormControl>
|
||||
{
|
||||
this.state.showSearch && (
|
||||
<Paper elevation={4} className="search-results">
|
||||
<List>
|
||||
{
|
||||
this.state.searchResults.map((res, index) => {
|
||||
return (
|
||||
<ListItem
|
||||
key={res}
|
||||
button
|
||||
onClick={() => this.selectDevice(res)}
|
||||
>
|
||||
<ListItemText primary={
|
||||
<div>
|
||||
{res}
|
||||
</div>
|
||||
}/>
|
||||
</ListItem>
|
||||
);
|
||||
})
|
||||
}
|
||||
label={package_name}
|
||||
/>
|
||||
</List>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
{
|
||||
(this.state.searchResults.length === 0 &&
|
||||
this.state.showSearch) && (
|
||||
<Paper elevation={4} className="search-results">
|
||||
<ListItem>
|
||||
<ListItemText
|
||||
primary={this.props.t('No results')}/>
|
||||
</ListItem>
|
||||
</Paper>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</ClickAwayListener>
|
||||
{
|
||||
this.state.showDeviceData && !this.state.deviceLoaded && (
|
||||
<>
|
||||
<br/>
|
||||
{notLoaded}
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
this.state.showDeviceData && this.state.deviceLoaded && (
|
||||
<>
|
||||
{warning432}
|
||||
<br/>
|
||||
<Grid container className="device-info">
|
||||
<Grid item xs>
|
||||
<b>{this.props.t(
|
||||
'Name')}: </b> {this.state.device['title']}({this.state.device['target']}/{this.state.device['subtarget']})
|
||||
</Grid>
|
||||
<Grid item xs>
|
||||
<b>{this.props.t(
|
||||
'Release Version')}: </b> {this.state.release_version_number}
|
||||
</Grid>
|
||||
</Grid>
|
||||
<AppBar className="interface-switch-bar" position="relative"
|
||||
elevation={0}>
|
||||
<Tabs value={this.basicInterface}
|
||||
onChange={this.changeInterface}>
|
||||
<Tab className="interface-switch"
|
||||
label={this.props.t('Basic')}/>
|
||||
<Tab className="interface-switch"
|
||||
label={this.props.t('Advanced')}/>
|
||||
</Tabs>
|
||||
</AppBar>
|
||||
{
|
||||
this.basicInterface === 0 ? (
|
||||
<TabContainer>
|
||||
{
|
||||
this.state.device.images.map((image, i) => {
|
||||
return (
|
||||
<Button
|
||||
key={i}
|
||||
className="download-button"
|
||||
href={'http://downloads.openwrt.org/snapshots/targets/' +
|
||||
this.state.device.target + '/' +
|
||||
this.state.device.subtarget + '/' +
|
||||
image.name}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
onClick={() => this.downloadingImageIndicatorShow()}
|
||||
>
|
||||
<CloudDownloadIcon
|
||||
className="download-icon"/>
|
||||
{image.type}
|
||||
</Button>
|
||||
);
|
||||
})
|
||||
}
|
||||
|
||||
{
|
||||
this.state.downloading && (
|
||||
<CircularProgress size={20}/>
|
||||
)
|
||||
}
|
||||
</TabContainer>
|
||||
) : (
|
||||
<TabContainer>
|
||||
<FormGroup row>
|
||||
{
|
||||
this.packages.map((package_name, i) => {
|
||||
return (
|
||||
<FormControlLabel
|
||||
className="package"
|
||||
key={i}
|
||||
control={
|
||||
<Checkbox
|
||||
onChange={(event) => this.packageSettingChange(
|
||||
event, package_name)}
|
||||
value={this.state.packages[package_name]}
|
||||
checked={this.state.packages[package_name]}
|
||||
/>
|
||||
}
|
||||
label={package_name}
|
||||
/>
|
||||
);
|
||||
})
|
||||
}
|
||||
</FormGroup>
|
||||
<br/>
|
||||
<Button variant="outlined" color="primary"
|
||||
onClick={this.openConfirmBuildDialog}>
|
||||
<BuildIcon/>
|
||||
|
||||
{this.props.t('Build')}
|
||||
</Button>
|
||||
</TabContainer>
|
||||
)
|
||||
})
|
||||
}
|
||||
</FormGroup>
|
||||
</ExpansionPanelDetails>
|
||||
</ExpansionPanel>
|
||||
{
|
||||
this.state.device.images.map((image, i) => {
|
||||
return (
|
||||
<Button
|
||||
key={i}
|
||||
className="download-button"
|
||||
href={"http://downloads.openwrt.org/snapshots/targets/" + this.state.device.target + "/" + this.state.device.subtarget + "/" + image.name}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
onClick={() => this.downlodingImageIndicatorShow()}
|
||||
>
|
||||
<CloudDownloadIcon className="download-icon" />
|
||||
{ image.type }
|
||||
</Button>
|
||||
);
|
||||
})
|
||||
}
|
||||
|
||||
{
|
||||
this.state.downloading && (
|
||||
<CircularProgress size={20} />
|
||||
)
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
</>
|
||||
}
|
||||
</>
|
||||
)
|
||||
}
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<Container className="home-container">
|
||||
<Paper className="home-container-paper">
|
||||
{ this.state.devicesLoaded ? onLoad : notLoaded }
|
||||
</Paper>
|
||||
</Container>
|
||||
<Container className="home-container">
|
||||
<Paper className="home-container-paper">
|
||||
<AlertDialog handleClose={this.closeConfirmBuildDialog}
|
||||
open={this.confirmingBuild}
|
||||
text="Building image requires computation resources, so we would request you to check if this selection is what you want"
|
||||
title="Please confirm that you want to perform this action"
|
||||
t={this.props.t}/>
|
||||
{this.state.devicesLoaded ? onLoad : notLoaded}
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,68 +1,108 @@
|
|||
.home-container {
|
||||
margin-top: 30px;
|
||||
.home-container-paper {
|
||||
padding: 30px;
|
||||
text-align: left;
|
||||
.warning-432 {
|
||||
background-color: #f0f0f0;
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #e3e3e3;
|
||||
color: #666;
|
||||
.icon {
|
||||
margin: 0 20px 0 10px;
|
||||
color: #F9A825
|
||||
}
|
||||
}
|
||||
.device-info {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.search-label {
|
||||
background-color: #fff;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.search-results {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
.MuiTypography-h4 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.download-button {
|
||||
margin-right: 10px;
|
||||
.download-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.advanced-settings {
|
||||
border: 1px solid #999;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 6px;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
.icon {
|
||||
font-size: 1em;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
.options {
|
||||
padding-top: 30px;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
margin-top: 30px;
|
||||
|
||||
.home-container-paper {
|
||||
padding: 30px;
|
||||
text-align: left;
|
||||
|
||||
.warning-432 {
|
||||
background-color: #f0f0f0;
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
border: 1px solid #e3e3e3;
|
||||
color: #666;
|
||||
|
||||
.icon {
|
||||
margin: 0 20px 0 10px;
|
||||
color: #F9A825
|
||||
}
|
||||
}
|
||||
|
||||
.device-info {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.search-label {
|
||||
background-color: #fff;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.MuiTypography-h4 {
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
margin-right: 10px;
|
||||
|
||||
.download-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.interface-switch-bar {
|
||||
border: 1px solid #e3e3e3;
|
||||
border-radius: 4px;
|
||||
background-color: #fff;
|
||||
z-index: 9;
|
||||
overflow: hidden;
|
||||
.interface-switch {
|
||||
color: #000;
|
||||
}
|
||||
.advanced-settings {
|
||||
border: 1px solid #999;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 6px;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.icon {
|
||||
font-size: 1em;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
||||
.options {
|
||||
padding-top: 30px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.package {
|
||||
padding-right: 15px;
|
||||
padding-left: 5px;
|
||||
border-radius: 30px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.package:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.package:focus, .package:active {
|
||||
transition: .2s;
|
||||
background-color: darken(#f0f0f0, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.device-table {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
td {
|
||||
padding: 20px 30px;
|
||||
}
|
||||
tr:nth-child(odd) {
|
||||
background-color: rgba(104, 74, 238, 0.07);
|
||||
}
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
|
||||
td {
|
||||
padding: 20px 30px;
|
||||
}
|
||||
|
||||
tr:nth-child(odd) {
|
||||
background-color: rgba(104, 74, 238, 0.07);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from "react";
|
||||
import { Typography, Paper, Container } from "@material-ui/core";
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import React from 'react';
|
||||
import {Container, Paper, Typography} from '@material-ui/core';
|
||||
import {makeStyles} from '@material-ui/core/styles';
|
||||
|
||||
const page404Styles = makeStyles(theme => ({
|
||||
root: {
|
||||
|
|
@ -8,19 +8,18 @@ const page404Styles = makeStyles(theme => ({
|
|||
},
|
||||
}));
|
||||
|
||||
|
||||
export default function NotFound() {
|
||||
var classes = page404Styles();
|
||||
return (
|
||||
<Container style={{marginTop: '50px'}}>
|
||||
<Paper className={classes.root} elevation={3}>
|
||||
<Typography variant="h5" component="h3">
|
||||
404 Page Not Found
|
||||
</Typography>
|
||||
<Typography component="p">
|
||||
Please head to the home.
|
||||
</Typography>
|
||||
</Paper>
|
||||
</Container>
|
||||
<Container style={{marginTop: '50px'}}>
|
||||
<Paper className={classes.root} elevation={3}>
|
||||
<Typography variant="h5" component="h3">
|
||||
404 Page Not Found
|
||||
</Typography>
|
||||
<Typography component="p">
|
||||
Please head to the home.
|
||||
</Typography>
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
39
src/i18n.js
39
src/i18n.js
|
|
@ -1,36 +1,27 @@
|
|||
import i18n from 'i18next';
|
||||
import { initReactI18next } from 'react-i18next';
|
||||
import {initReactI18next} from 'react-i18next';
|
||||
import LanguageDetector from 'i18next-browser-languagedetector';
|
||||
import translationEN from './locales/en.json';
|
||||
import translationDE from './locales/de.json';
|
||||
|
||||
|
||||
const resources = {
|
||||
en: {
|
||||
translation: translationEN
|
||||
translation: translationEN,
|
||||
},
|
||||
de: {
|
||||
translation: translationDE
|
||||
}
|
||||
translation: translationDE,
|
||||
},
|
||||
};
|
||||
|
||||
i18n
|
||||
// detect user language
|
||||
// learn more: https://github.com/i18next/i18next-browser-languageDetector
|
||||
.use(LanguageDetector)
|
||||
// pass the i18n instance to react-i18next.
|
||||
.use(initReactI18next)
|
||||
// init i18next
|
||||
// for all options read: https://www.i18next.com/overview/configuration-options
|
||||
.init({
|
||||
resources,
|
||||
fallbackLng: 'en',
|
||||
debug: true,
|
||||
i18n.use(LanguageDetector)
|
||||
.use(initReactI18next)
|
||||
.init({
|
||||
resources,
|
||||
fallbackLng: 'en',
|
||||
debug: true,
|
||||
interpolation: {
|
||||
escapeValue: false, // not needed for react as it escapes by default
|
||||
},
|
||||
});
|
||||
|
||||
interpolation: {
|
||||
escapeValue: false, // not needed for react as it escapes by default
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
export default i18n;
|
||||
export default i18n;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,16 @@
|
|||
"Model": "Modell",
|
||||
"Vendor": "Verkäufer",
|
||||
"Variant": "Variante",
|
||||
"Name": "Name",
|
||||
"Release Version" : "Veröffentlichungsversion",
|
||||
"Basic": "Basic",
|
||||
"Advanced": "Fortgeschritten",
|
||||
"Build": "Bauen",
|
||||
"Cancel": "Abbrechen",
|
||||
"Please confirm that you want to perform this action": "Bitte bestätigen Sie, dass Sie diese Aktion ausführen möchten",
|
||||
"Building image requires computation resources, so we would request you to check if this selection is what you want": "Das Erstellen eines Image erfordert Rechenressourcen. Wir bitten Sie daher, zu prüfen, ob diese Auswahl Ihren Wünschen entspricht",
|
||||
"Devices with ≤4MB flash and/or ≤32MB ram will work but they will be very limited (usually they can't install or run additional packages) because they have low RAM and flash space. Consider this when choosing a device to buy, or when deciding to flash OpenWrt on your device because it is listed as supported.": "Geräte mit ≤4MB Flash und / oder ≤32MB RAM funktionieren, sind jedoch sehr eingeschränkt (normalerweise können sie keine zusätzlichen Pakete installieren oder ausführen), da sie über wenig RAM und Flash-Speicher verfügen. Berücksichtigen Sie dies, wenn Sie ein Gerät zum Kaufen auswählen oder wenn Sie OpenWrt auf Ihrem Gerät flashen, da es als unterstützt aufgeführt ist Zusätzliche Pakete können nicht installiert oder ausgeführt werden, da sie über wenig RAM und wenig Flash-Speicher verfügen. Berücksichtigen Sie dies, wenn Sie ein Gerät zum Kaufen auswählen oder wenn Sie sich entscheiden, OpenWrt auf Ihrem Gerät zu flashen, da es als unterstützt aufgeführt ist.",
|
||||
"OpenWrt Firmware Selector Wizard": "OpenWrt Firmware Selector Wizard",
|
||||
"Download OpenWrt firmware for your device!": "Laden Sie die OpenWrt-Firmware für Ihr Gerät herunter!",
|
||||
"Please use the input below to download firmware for your device!": "Bitte benutzen Sie den unten stehenden Eingang, um die Firmware für Ihr Gerät herunterzuladen!"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,16 @@
|
|||
"Model": "Model",
|
||||
"Vendor": "Vendor",
|
||||
"Variant": "Variant",
|
||||
"Name": "Name",
|
||||
"Release Version" : "Release Version",
|
||||
"Basic": "Basic",
|
||||
"Advanced": "Advanced",
|
||||
"Build": "Build",
|
||||
"Cancel": "Cancel",
|
||||
"Please confirm that you want to perform this action": "Please confirm that you want to perform this action",
|
||||
"Building image requires computation resources, so we would request you to check if this selection is what you want": "Building image requires computation resources, so we would request you to check if this selection is what you want",
|
||||
"Devices with ≤4MB flash and/or ≤32MB ram will work but they will be very limited (usually they can't install or run additional packages) because they have low RAM and flash space. Consider this when choosing a device to buy, or when deciding to flash OpenWrt on your device because it is listed as supported.": "Devices with ≤4MB flash and/or ≤32MB ram will work but they will be very limited (usually they can't install or run additional packages) because they have low RAM and flash space. Consider this when choosing a device to buy, or when deciding to flash OpenWrt on your device because it is listed as supported.",
|
||||
"OpenWrt Firmware Selector Wizard": "OpenWrt Firmware Selector Wizard",
|
||||
"Download OpenWrt firmware for your device!": "Download OpenWrt firmware for your device!",
|
||||
"Please use the input below to download firmware for your device!": "Please use the input below to download firmware for your device!"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue