mirror of
https://git.netzspielplatz.de/docker-multiarch/openwrt-firmware-selector.git
synced 2025-11-08 22:09:25 +00:00
uses json from dev server
instead of locally stored data, now the application can get the data from json sources over the internet. Signed-off-by: Sudhanshu Gautam <me@sudhanshug.com>
This commit is contained in:
Sudhanshu Gautam
parent
6713303247
commit
16a6f7eb0b
3 changed files with 147 additions and 104 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -21,3 +21,6 @@
|
|||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local editor configs
|
||||
.idea
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import React from "react";
|
||||
import { Container, Paper, Typography, InputAdornment, FormControl, TextField, List, ListItem, ListItemText } from "@material-ui/core";
|
||||
import { Container, Paper, Typography, InputAdornment, FormControl, TextField, List, ListItem, ListItemText, CircularProgress, Button } 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 './home.scss';
|
||||
import data from '../../data.json';
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import FuzzySet from 'fuzzyset.js';
|
||||
|
||||
|
|
@ -58,38 +58,47 @@ class Home extends React.Component {
|
|||
state = {
|
||||
showDeviceData: false,
|
||||
device: null,
|
||||
deviceLoaded: false,
|
||||
devices: [],
|
||||
devicesLoaded: false,
|
||||
searchResults: [],
|
||||
showSearch: false,
|
||||
selectedSearchIndex: 0,
|
||||
query: '',
|
||||
downloading: false,
|
||||
};
|
||||
fuzzySet;
|
||||
|
||||
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() {
|
||||
Object.keys(data['devices']).forEach((device_id) => {
|
||||
var deviceName = '';
|
||||
if ('vendor' in data['devices'][device_id]) {
|
||||
deviceName += data['devices'][device_id]['vendor'] + ' ';
|
||||
}
|
||||
deviceName += data['devices'][device_id]['model'];
|
||||
if ('variant' in data['devices'][device_id]) {
|
||||
if (data['devices'][device_id]['variant'] !== '') {
|
||||
deviceName += ' ' + data['devices'][device_id]['variant'];
|
||||
}
|
||||
}
|
||||
this.deviceNames.push(deviceName);
|
||||
this.deviceNamesID[deviceName] = device_id;
|
||||
this.getDevicesData().then(data => {
|
||||
Object.keys(data['devices']).forEach((device_name) => {
|
||||
this.deviceNames.push(device_name);
|
||||
this.deviceNamesID[device_name] = data['devices'][device_name];
|
||||
});
|
||||
this.fuzzySet = FuzzySet(this.deviceNames);
|
||||
this.setState({
|
||||
devices: data['devices'],
|
||||
devicesLoaded: true,
|
||||
});
|
||||
});
|
||||
this.fuzzySet = FuzzySet(this.deviceNames);
|
||||
}
|
||||
|
||||
selectDevice = (device_id) => {
|
||||
if (device_id != null) {
|
||||
selectDevice = (device_name) => {
|
||||
if (device_name != null) {
|
||||
this.setState({
|
||||
device: data["devices"][device_id],
|
||||
showDeviceData: true,
|
||||
showSearch: false,
|
||||
query: data["devices"][device_id]["vendor"] + " " + data["devices"][device_id]["model"] + " " + data["devices"][device_id]["variant"]
|
||||
query: device_name,
|
||||
deviceLoaded: false,
|
||||
});
|
||||
this.getDeviceData(this.state.devices[device_name]).then(data => {
|
||||
this.setState({
|
||||
device: data,
|
||||
deviceLoaded: true,
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -105,7 +114,7 @@ class Home extends React.Component {
|
|||
var searchResults = [];
|
||||
if (deviceNames != null) {
|
||||
for (var i = 0; i < deviceNames.length && i < 6; i++) {
|
||||
searchResults.push(data['devices'][this.deviceNamesID[deviceNames[i][1]]]);
|
||||
searchResults.push(deviceNames[i][1]);
|
||||
}
|
||||
}
|
||||
this.setState({
|
||||
|
|
@ -135,93 +144,118 @@ class Home extends React.Component {
|
|||
});
|
||||
}
|
||||
|
||||
downlodingImageIndicatorShow = (i) => {
|
||||
this.setState({
|
||||
downloading: true
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.setState({
|
||||
downloading: false
|
||||
});
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
render() {
|
||||
const notLoaded = (
|
||||
<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 />
|
||||
<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>
|
||||
</div>
|
||||
{
|
||||
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>
|
||||
)
|
||||
}
|
||||
{
|
||||
this.state.showDeviceData && !this.state.deviceLoaded && (
|
||||
<>
|
||||
{ notLoaded }
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
this.state.showDeviceData && this.state.deviceLoaded && (
|
||||
<>
|
||||
<br />
|
||||
{
|
||||
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" onClick={this.toggleSearchIfIntended}>
|
||||
<Paper className="home-container-paper">
|
||||
<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 />
|
||||
<div className="search-container">
|
||||
<FormControl fullWidth>
|
||||
<SearchTextField
|
||||
id="outlined-adornment-search-devices"
|
||||
labeltext={this.props.t('Search...')}
|
||||
value={this.state.query}
|
||||
onChange={this.search}
|
||||
onClick={this.search}
|
||||
/>
|
||||
</FormControl>
|
||||
</div>
|
||||
{
|
||||
this.state.showSearch && (
|
||||
<Paper elevation={4} className="search-results">
|
||||
<List>
|
||||
{
|
||||
this.state.searchResults.map((res, index) => {
|
||||
return (
|
||||
<ListItem
|
||||
key={res["device_id"]}
|
||||
button
|
||||
onClick={() => this.selectDevice(res["device_id"])}
|
||||
>
|
||||
<ListItemText primary={
|
||||
<div>
|
||||
{res["vendor"]} {res["model"]} {res["variant"]}
|
||||
</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>
|
||||
)
|
||||
}
|
||||
<br />
|
||||
{this.state.showDeviceData ? (
|
||||
<table className="device-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{this.props.t('Model')}</td>
|
||||
<td>{this.state.device.model}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{this.props.t('Vendor')}</td>
|
||||
<td>{this.state.device.vendor}</td>
|
||||
</tr>
|
||||
{
|
||||
this.state.device.variant === null || this.state.device.variant === '' ? '' : (
|
||||
<tr>
|
||||
<td>{this.props.t('Variant')}</td>
|
||||
<td>{this.state.device.variant}</td>
|
||||
</tr>
|
||||
)
|
||||
}
|
||||
{
|
||||
this.state.device.images.map((image, i) => {
|
||||
return <tr key={i}>
|
||||
<td>{image.type}</td>
|
||||
<td><a href={"http://downloads.openwrt.org/snapshots/targets/" + this.state.device.target + "/" + this.state.device.subtarget + "/" + image.name}>{image.name}</a></td>
|
||||
</tr>;
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
) : ''}
|
||||
{ this.state.devicesLoaded ? onLoad : notLoaded }
|
||||
</Paper>
|
||||
</Container>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -17,6 +17,12 @@
|
|||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.download-button {
|
||||
margin-right: 10px;
|
||||
.download-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue