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.
|
||||
|
|
@ -21,11 +21,11 @@
|
|||
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>
|
||||
<!--
|
||||
</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.
|
||||
|
||||
|
|
@ -34,6 +34,6 @@
|
|||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
18
src/App.js
18
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';
|
||||
|
|
@ -24,14 +24,14 @@ function App() {
|
|||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<Suspense fallback={
|
||||
<LinearProgress />
|
||||
<LinearProgress/>
|
||||
}>
|
||||
<div className="App">
|
||||
<Header></Header>
|
||||
<Header/>
|
||||
<Router>
|
||||
<Switch>
|
||||
<Route path="" component={Home}></Route>
|
||||
<Route default component={NotFound}></Route>
|
||||
<Route path="" component={Home}/>
|
||||
<Route default component={NotFound}/>
|
||||
</Switch>
|
||||
</Router>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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,7 +33,7 @@ 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;
|
||||
|
|
@ -28,33 +41,37 @@ export default function Header() {
|
|||
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}>
|
||||
<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 />
|
||||
<LanguageIcon/>
|
||||
</Button>
|
||||
<Popper
|
||||
id={id}
|
||||
open={open}
|
||||
anchorEl={anchorEl}
|
||||
transition
|
||||
disablePortal = {true}
|
||||
disablePortal={true}
|
||||
>
|
||||
{({ TransitionProps }) => (
|
||||
{({TransitionProps}) => (
|
||||
<Fade {...TransitionProps} timeout={350}>
|
||||
<Paper className="language-selector-popper">
|
||||
<FormControl component="fieldset">
|
||||
<FormLabel component="legend">Change Language</FormLabel>
|
||||
<br />
|
||||
<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')} />
|
||||
<FormControlLabel value="en" control={<Radio/>}
|
||||
label={t('English')}/>
|
||||
<FormControlLabel value="de" control={<Radio/>}
|
||||
label={t('German')}/>
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</Paper>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,38 @@
|
|||
import React from "react";
|
||||
import React from 'react';
|
||||
import {
|
||||
AppBar,
|
||||
Button,
|
||||
Checkbox,
|
||||
CircularProgress,
|
||||
ClickAwayListener,
|
||||
Container,
|
||||
Paper,
|
||||
Typography,
|
||||
InputAdornment,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogTitle,
|
||||
FormControl,
|
||||
TextField,
|
||||
FormControlLabel,
|
||||
FormGroup,
|
||||
Grid,
|
||||
InputAdornment,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
CircularProgress,
|
||||
Button,
|
||||
Grid,
|
||||
ClickAwayListener,
|
||||
ExpansionPanel,
|
||||
ExpansionPanelSummary,
|
||||
ExpansionPanelDetails,
|
||||
Checkbox,
|
||||
FormGroup,
|
||||
FormControlLabel } from "@material-ui/core";
|
||||
import { fade, makeStyles } from '@material-ui/core/styles';
|
||||
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 => ({
|
||||
|
|
@ -60,17 +66,54 @@ function SearchTextField(props) {
|
|||
</div>
|
||||
}
|
||||
InputProps={
|
||||
{ classes,
|
||||
{
|
||||
classes,
|
||||
endAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon className={classes.label} />
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
class Home extends React.Component {
|
||||
|
||||
deviceNames = [];
|
||||
|
|
@ -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,36 +230,50 @@ 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 && (
|
||||
const warning432 = this.state.showDeviceData &&
|
||||
parseInt(
|
||||
(this.state.device['image_size'] || '').slice(0, -1)) <= 4000 && (
|
||||
<Paper className="warning-432" elevation={0}>
|
||||
<Grid
|
||||
container
|
||||
|
|
@ -190,16 +282,17 @@ class Home extends React.Component {
|
|||
alignItems="center"
|
||||
>
|
||||
<Grid item>
|
||||
<WarningIcon className="icon" />
|
||||
<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.
|
||||
{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 = (
|
||||
<>
|
||||
|
|
@ -207,9 +300,10 @@ class Home extends React.Component {
|
|||
{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!')}
|
||||
{this.props.t(
|
||||
'Please use the input below to download firmware for your device!')}
|
||||
</Typography>
|
||||
<br />
|
||||
<br/>
|
||||
<ClickAwayListener onClickAway={this.hideSearchResults}>
|
||||
<div className="search-container">
|
||||
<FormControl fullWidth>
|
||||
|
|
@ -237,7 +331,7 @@ class Home extends React.Component {
|
|||
<div>
|
||||
{res}
|
||||
</div>
|
||||
} />
|
||||
}/>
|
||||
</ListItem>
|
||||
);
|
||||
})
|
||||
|
|
@ -247,10 +341,12 @@ class Home extends React.Component {
|
|||
)
|
||||
}
|
||||
{
|
||||
(this.state.searchResults.length === 0 && this.state.showSearch) && (
|
||||
(this.state.searchResults.length === 0 &&
|
||||
this.state.showSearch) && (
|
||||
<Paper elevation={4} className="search-results">
|
||||
<ListItem>
|
||||
<ListItemText primary={this.props.t('No results')}></ListItemText>
|
||||
<ListItemText
|
||||
primary={this.props.t('No results')}/>
|
||||
</ListItem>
|
||||
</Paper>
|
||||
)
|
||||
|
|
@ -260,73 +356,56 @@ class Home extends React.Component {
|
|||
{
|
||||
this.state.showDeviceData && !this.state.deviceLoaded && (
|
||||
<>
|
||||
<br />
|
||||
{ notLoaded }
|
||||
<br/>
|
||||
{notLoaded}
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
this.state.showDeviceData && this.state.deviceLoaded && (
|
||||
<>
|
||||
{ warning432 }
|
||||
<br />
|
||||
{warning432}
|
||||
<br/>
|
||||
<Grid container className="device-info">
|
||||
<Grid item xs>
|
||||
<b>Name: </b> {this.state.device['title']}
|
||||
<b>{this.props.t(
|
||||
'Name')}: </b> {this.state.device['title']}({this.state.device['target']}/{this.state.device['subtarget']})
|
||||
</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']}
|
||||
<b>{this.props.t(
|
||||
'Release Version')}: </b> {this.state.release_version_number}
|
||||
</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>
|
||||
<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.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]}
|
||||
/>
|
||||
}
|
||||
label={package_name}
|
||||
/>
|
||||
)
|
||||
})
|
||||
}
|
||||
</FormGroup>
|
||||
</ExpansionPanelDetails>
|
||||
</ExpansionPanel>
|
||||
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}
|
||||
href={'http://downloads.openwrt.org/snapshots/targets/' +
|
||||
this.state.device.target + '/' +
|
||||
this.state.device.subtarget + '/' +
|
||||
image.name}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
onClick={() => this.downlodingImageIndicatorShow()}
|
||||
onClick={() => this.downloadingImageIndicatorShow()}
|
||||
>
|
||||
<CloudDownloadIcon className="download-icon" />
|
||||
{ image.type }
|
||||
<CloudDownloadIcon
|
||||
className="download-icon"/>
|
||||
{image.type}
|
||||
</Button>
|
||||
);
|
||||
})
|
||||
|
|
@ -334,7 +413,41 @@ class Home extends React.Component {
|
|||
|
||||
{
|
||||
this.state.downloading && (
|
||||
<CircularProgress size={20} />
|
||||
<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>
|
||||
)
|
||||
}
|
||||
</>
|
||||
|
|
@ -345,7 +458,12 @@ class Home extends React.Component {
|
|||
return (
|
||||
<Container className="home-container">
|
||||
<Paper className="home-container-paper">
|
||||
{ this.state.devicesLoaded ? onLoad : notLoaded }
|
||||
<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,42 +1,61 @@
|
|||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
@ -44,14 +63,33 @@
|
|||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -59,9 +97,11 @@
|
|||
.device-table {
|
||||
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,7 +8,6 @@ const page404Styles = makeStyles(theme => ({
|
|||
},
|
||||
}));
|
||||
|
||||
|
||||
export default function NotFound() {
|
||||
var classes = page404Styles();
|
||||
return (
|
||||
|
|
|
|||
21
src/i18n.js
21
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.
|
||||
i18n.use(LanguageDetector)
|
||||
.use(initReactI18next)
|
||||
// init i18next
|
||||
// for all options read: https://www.i18next.com/overview/configuration-options
|
||||
.init({
|
||||
resources,
|
||||
fallbackLng: 'en',
|
||||
debug: true,
|
||||
|
||||
interpolation: {
|
||||
escapeValue: false, // not needed for react as it escapes by default
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
export default i18n;
|
||||
|
|
@ -8,6 +8,15 @@
|
|||
"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,6 +8,15 @@
|
|||
"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