2018-02-26 00:11:31 +00:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
|
|
|
|
import { withStyles } from 'material-ui/styles';
|
|
|
|
import Button from 'material-ui/Button';
|
|
|
|
import { LinearProgress } from 'material-ui/Progress';
|
|
|
|
import Typography from 'material-ui/Typography';
|
|
|
|
|
|
|
|
import SectionContent from '../components/SectionContent';
|
|
|
|
|
|
|
|
import { WIFI_STATUS_ENDPOINT } from '../constants/Endpoints';
|
|
|
|
import { isConnected, connectionStatus, connectionStatusHighlight } from '../constants/WiFiConnectionStatus';
|
|
|
|
import * as Highlight from '../constants/Highlight';
|
|
|
|
|
2018-03-04 16:49:24 +00:00
|
|
|
import { restComponent } from '../components/RestComponent';
|
2018-02-26 00:11:31 +00:00
|
|
|
|
|
|
|
import List, { ListItem, ListItemText } from 'material-ui/List';
|
|
|
|
import Avatar from 'material-ui/Avatar';
|
|
|
|
import Divider from 'material-ui/Divider';
|
|
|
|
import WifiIcon from 'material-ui-icons/Wifi';
|
|
|
|
import DNSIcon from 'material-ui-icons/Dns';
|
|
|
|
import SettingsInputComponentIcon from 'material-ui-icons/SettingsInputComponent';
|
|
|
|
import SettingsInputAntennaIcon from 'material-ui-icons/SettingsInputAntenna';
|
|
|
|
|
|
|
|
const styles = theme => ({
|
|
|
|
["wifiStatus_" + Highlight.IDLE]: {
|
|
|
|
backgroundColor: theme.palette.highlight_idle
|
|
|
|
},
|
|
|
|
["wifiStatus_" + Highlight.SUCCESS]: {
|
|
|
|
backgroundColor: theme.palette.highlight_success
|
|
|
|
},
|
|
|
|
["wifiStatus_" + Highlight.ERROR]: {
|
|
|
|
backgroundColor: theme.palette.highlight_error
|
|
|
|
},
|
|
|
|
["wifiStatus_" + Highlight.WARN]: {
|
|
|
|
backgroundColor: theme.palette.highlight_warn
|
|
|
|
},
|
|
|
|
fetching: {
|
|
|
|
margin: theme.spacing.unit * 4,
|
|
|
|
textAlign: "center"
|
|
|
|
},
|
|
|
|
button: {
|
|
|
|
marginRight: theme.spacing.unit * 2,
|
|
|
|
marginTop: theme.spacing.unit * 2,
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
class WiFiStatus extends Component {
|
|
|
|
|
|
|
|
componentDidMount() {
|
2018-03-04 16:49:24 +00:00
|
|
|
this.props.loadData();
|
2018-02-26 00:11:31 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
dnsServers(status) {
|
|
|
|
if (!status.dns_ip_1){
|
|
|
|
return "none";
|
|
|
|
}
|
|
|
|
return status.dns_ip_1 + (status.dns_ip_2 ? ','+status.dns_ip_2 : '');
|
|
|
|
}
|
|
|
|
|
2018-03-04 16:49:24 +00:00
|
|
|
renderWiFiStatus(data, fullDetails, classes) {
|
2018-02-26 00:11:31 +00:00
|
|
|
const listItems = [];
|
|
|
|
|
|
|
|
listItems.push(
|
|
|
|
<ListItem key="connection_status">
|
2018-03-04 16:49:24 +00:00
|
|
|
<Avatar className={classes["wifiStatus_" + connectionStatusHighlight(data)]}>
|
2018-02-26 00:11:31 +00:00
|
|
|
<WifiIcon />
|
|
|
|
</Avatar>
|
2018-03-04 16:49:24 +00:00
|
|
|
<ListItemText primary="Connection Status" secondary={connectionStatus(data)} />
|
2018-02-26 00:11:31 +00:00
|
|
|
</ListItem>
|
|
|
|
);
|
|
|
|
|
2018-03-04 16:49:24 +00:00
|
|
|
if (fullDetails && isConnected(data)) {
|
2018-02-26 00:11:31 +00:00
|
|
|
listItems.push(<Divider key="connection_status_divider" inset component="li" />);
|
|
|
|
|
|
|
|
listItems.push(
|
|
|
|
<ListItem key="ssid">
|
|
|
|
<Avatar>
|
|
|
|
<SettingsInputAntennaIcon />
|
|
|
|
</Avatar>
|
2018-03-04 16:49:24 +00:00
|
|
|
<ListItemText primary="SSID" secondary={data.ssid} />
|
2018-02-26 00:11:31 +00:00
|
|
|
</ListItem>
|
|
|
|
);
|
|
|
|
listItems.push(<Divider key="ssid_divider" inset component="li" />);
|
|
|
|
|
|
|
|
listItems.push(
|
|
|
|
<ListItem key="ip_address">
|
|
|
|
<Avatar>IP</Avatar>
|
2018-03-04 16:49:24 +00:00
|
|
|
<ListItemText primary="IP Address" secondary={data.local_ip} />
|
2018-02-26 00:11:31 +00:00
|
|
|
</ListItem>
|
|
|
|
);
|
|
|
|
listItems.push(<Divider key="ip_address_divider" inset component="li" />);
|
|
|
|
|
|
|
|
listItems.push(
|
|
|
|
<ListItem key="subnet_mask">
|
|
|
|
<Avatar>#</Avatar>
|
2018-03-04 16:49:24 +00:00
|
|
|
<ListItemText primary="Subnet Mask" secondary={data.subnet_mask} />
|
2018-02-26 00:11:31 +00:00
|
|
|
</ListItem>
|
|
|
|
);
|
|
|
|
listItems.push(<Divider key="subnet_mask_divider" inset component="li" />);
|
|
|
|
|
|
|
|
listItems.push(
|
|
|
|
<ListItem key="gateway_ip">
|
|
|
|
<Avatar>
|
|
|
|
<SettingsInputComponentIcon />
|
|
|
|
</Avatar>
|
2018-03-04 16:49:24 +00:00
|
|
|
<ListItemText primary="Gateway IP" secondary={data.gateway_ip ? data.gateway_ip : "none"} />
|
2018-02-26 00:11:31 +00:00
|
|
|
</ListItem>
|
|
|
|
);
|
|
|
|
listItems.push(<Divider key="gateway_ip_divider" inset component="li" />);
|
|
|
|
|
|
|
|
listItems.push(
|
|
|
|
<ListItem key="dns_server_ip">
|
|
|
|
<Avatar>
|
|
|
|
<DNSIcon />
|
|
|
|
</Avatar>
|
2018-03-04 16:49:24 +00:00
|
|
|
<ListItemText primary="DNS Server IP" secondary={this.dnsServers(data)} />
|
2018-02-26 00:11:31 +00:00
|
|
|
</ListItem>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<List>
|
|
|
|
{listItems}
|
|
|
|
</List>
|
2018-03-04 16:49:24 +00:00
|
|
|
<Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}>
|
2018-02-26 00:11:31 +00:00
|
|
|
Refresh
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2018-03-04 16:49:24 +00:00
|
|
|
const { data, fetched, errorMessage, classes, fullDetails } = this.props;
|
2018-02-26 00:11:31 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<SectionContent title="WiFi Status">
|
|
|
|
{
|
|
|
|
!fetched ?
|
|
|
|
<div>
|
|
|
|
<LinearProgress className={classes.fetching}/>
|
|
|
|
<Typography variant="display1" className={classes.fetching}>
|
|
|
|
Loading...
|
|
|
|
</Typography>
|
|
|
|
</div>
|
|
|
|
:
|
2018-03-04 16:49:24 +00:00
|
|
|
data ? this.renderWiFiStatus(data, fullDetails, classes)
|
2018-02-26 00:11:31 +00:00
|
|
|
:
|
|
|
|
<div>
|
|
|
|
<Typography variant="display1" className={classes.fetching}>
|
|
|
|
{errorMessage}
|
|
|
|
</Typography>
|
2018-03-04 16:49:24 +00:00
|
|
|
<Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}>
|
2018-02-26 00:11:31 +00:00
|
|
|
Refresh
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
}
|
|
|
|
</SectionContent>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-03-04 16:49:24 +00:00
|
|
|
export default restComponent(WIFI_STATUS_ENDPOINT, withStyles(styles)(WiFiStatus));
|