diff --git a/public/index.html b/public/index.html index 46b6241..93f935a 100644 --- a/public/index.html +++ b/public/index.html @@ -1,16 +1,16 @@ - + - - - - + + + + - + - OpenWrt Firmware Selector Wizard - - - -
- - + To begin the development, run `npm start` or `yarn start`. + To create a production bundle, use `npm run build` or `yarn build`. +--> + diff --git a/src/App.js b/src/App.js index cc67f10..52f95ac 100644 --- a/src/App.js +++ b/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 ( - - - }> -
-
- - - - - - -
- - + + + }> +
+
+ + + + + + +
+ + ); } diff --git a/src/components/header.js b/src/components/header.js index b03e0e1..0db47a3 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -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 ( - - - {t('OpenWrt Firmware Selector Wizard')} -
- - - {({ TransitionProps }) => ( - - - - Change Language -
- - } label={t('English')} /> - } label={t('German')} /> - - - - - )} - - - + + + {t( + 'OpenWrt Firmware Selector Wizard')} +
+ + + {({TransitionProps}) => ( + + + + Change Language +
+ + } + label={t('English')}/> + } + label={t('German')}/> + + + + + )} + + + ); } diff --git a/src/containers/home/home.js b/src/containers/home/home.js index 4626765..d7aa0e2 100644 --- a/src/containers/home/home.js +++ b/src/containers/home/home.js @@ -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 ( - - {props.labeltext} -
- } - InputProps={ - { classes, - endAdornment: ( - - - - ) - } - } {...props} /> + + {props.labeltext} + + } + InputProps={ + { + classes, + endAdornment: ( + + + + ), + } + } {...props} /> + ); +} + +function TabContainer({children, dir}) { + return ( + + {children} + + ); +} + +function AlertDialog({open, handleClose, text, title, t}) { + return ( + handleClose(-1)} + aria-labelledby="alert-dialog-title" + aria-describedby="alert-dialog-description" + > + {t(title)} + + + {t(text)} + + + + + + + ); } @@ -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 && ( - - - - - - - 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. - - - - ); + const warning432 = this.state.showDeviceData && + parseInt( + (this.state.device['image_size'] || '').slice(0, -1)) <= 4000 && ( + + + + + + + {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.')} + + + + ); const notLoaded = ( - + ); const onLoad = ( - <> - - {this.props.t('Download OpenWrt firmware for your device!')} - - - {this.props.t('Please use the input below to download firmware for your device!')} - -
- -
- - - - { - this.state.showSearch && ( - - - { - this.state.searchResults.map((res, index) => { - return ( - this.selectDevice(res)} - > - - {res} -
- } /> - - ); - }) - } - - - ) - } - { - (this.state.searchResults.length === 0 && this.state.showSearch) && ( - - - - - - ) - } - - - { - this.state.showDeviceData && !this.state.deviceLoaded && ( - <> -
- { notLoaded } - - ) - } - { - this.state.showDeviceData && this.state.deviceLoaded && ( - <> - { warning432 } -
- - - Name: {this.state.device['title']} - - - Target: {this.state.device['target']} - - - Subtarget: {this.state.device['subtarget']} - - - Image Size: {this.state.device['image_size']} - - - - } - aria-controls="panel1a-content" - id="panel1a-header" - > - Customize Packages ( for advanced users) - - - - { - this.packages.map((package_name, i) => { - return ( - this.packageSettingChange(event, package_name)} - value={this.state.packages[package_name]} - checked={this.state.packages[package_name]} - /> + <> + + {this.props.t('Download OpenWrt firmware for your device!')} + + + {this.props.t( + 'Please use the input below to download firmware for your device!')} + +
+ +
+ + + + { + this.state.showSearch && ( + + + { + this.state.searchResults.map((res, index) => { + return ( + this.selectDevice(res)} + > + + {res} +
+ }/> + + ); + }) } - label={package_name} - /> + + + ) + } + { + (this.state.searchResults.length === 0 && + this.state.showSearch) && ( + + + + + + ) + } + + + { + this.state.showDeviceData && !this.state.deviceLoaded && ( + <> +
+ {notLoaded} + + ) + } + { + this.state.showDeviceData && this.state.deviceLoaded && ( + <> + {warning432} +
+ + + {this.props.t( + 'Name')}: {this.state.device['title']}({this.state.device['target']}/{this.state.device['subtarget']}) + + + {this.props.t( + 'Release Version')}: {this.state.release_version_number} + + + + + + + + + { + this.basicInterface === 0 ? ( + + { + this.state.device.images.map((image, i) => { + return ( + + ); + }) + } +   + { + this.state.downloading && ( + + ) + } + + ) : ( + + + { + this.packages.map((package_name, i) => { + return ( + this.packageSettingChange( + event, package_name)} + value={this.state.packages[package_name]} + checked={this.state.packages[package_name]} + /> + } + label={package_name} + /> + ); + }) + } + +
+ + ) - }) - } - - - - { - this.state.device.images.map((image, i) => { - return ( - - ); - }) - } -   - { - this.state.downloading && ( - - ) - } - - ) - } - + } + + ) + } + ); return ( - - - { this.state.devicesLoaded ? onLoad : notLoaded } - - + + + + {this.state.devicesLoaded ? onLoad : notLoaded} + + ); } } diff --git a/src/containers/home/home.scss b/src/containers/home/home.scss index cc69a42..d087b20 100644 --- a/src/containers/home/home.scss +++ b/src/containers/home/home.scss @@ -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); + } } diff --git a/src/containers/not-found/not-found.js b/src/containers/not-found/not-found.js index 2e02b76..152f836 100644 --- a/src/containers/not-found/not-found.js +++ b/src/containers/not-found/not-found.js @@ -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 ( - - - - 404 Page Not Found - - - Please head to the home. - - - + + + + 404 Page Not Found + + + Please head to the home. + + + ); } diff --git a/src/i18n.js b/src/i18n.js index cea8bf5..9b31029 100644 --- a/src/i18n.js +++ b/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; \ No newline at end of file +export default i18n; diff --git a/src/locales/de.json b/src/locales/de.json index bbf0392..f0af76c 100644 --- a/src/locales/de.json +++ b/src/locales/de.json @@ -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!" -} \ No newline at end of file +} diff --git a/src/locales/en.json b/src/locales/en.json index 7f81517..d67133d 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -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!" -} \ No newline at end of file +}