use fragments where possible, and drop keys.
This commit is contained in:
rjwats@gmail.com
@@ -1,4 +1,4 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { Component, Fragment } from 'react';
|
||||
|
||||
import { withStyles } from 'material-ui/styles';
|
||||
import Button from 'material-ui/Button';
|
||||
@@ -48,53 +48,46 @@ class APStatus extends Component {
|
||||
return data.active ? "Active" : "Inactive";
|
||||
}
|
||||
|
||||
// active, ip_address, mac_address, station_num
|
||||
createListItems(data, fullDetails, classes){
|
||||
return (
|
||||
<Fragment>
|
||||
<ListItem>
|
||||
<Avatar className={classes["apStatus_" + this.apStatusHighlight(data)]}>
|
||||
<SettingsInputAntennaIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="Status" secondary={this.apStatus(data)} />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
<ListItem>
|
||||
<Avatar>IP</Avatar>
|
||||
<ListItemText primary="IP Address" secondary={data.ip_address} />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
<ListItem>
|
||||
<Avatar>
|
||||
<DeviceHubIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="MAC Address" secondary={data.mac_address} />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
<ListItem>
|
||||
<Avatar>
|
||||
<ComputerIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="AP Clients" secondary={data.station_num} />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
renderAPStatus(data, fullDetails, classes){
|
||||
const listItems = [];
|
||||
|
||||
listItems.push(
|
||||
<ListItem key="ap_status">
|
||||
<Avatar className={classes["apStatus_" + this.apStatusHighlight(data)]}>
|
||||
<SettingsInputAntennaIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="Status" secondary={this.apStatus(data)} />
|
||||
</ListItem>
|
||||
);
|
||||
listItems.push(<Divider key="ap_status_divider" inset component="li" />);
|
||||
|
||||
listItems.push(
|
||||
<ListItem key="ip_address">
|
||||
<Avatar>IP</Avatar>
|
||||
<ListItemText primary="IP Address" secondary={data.ip_address} />
|
||||
</ListItem>
|
||||
);
|
||||
listItems.push(<Divider key="ip_address_divider" inset component="li" />);
|
||||
|
||||
listItems.push(
|
||||
<ListItem key="mac_address">
|
||||
<Avatar>
|
||||
<DeviceHubIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="MAC Address" secondary={data.mac_address} />
|
||||
</ListItem>
|
||||
);
|
||||
listItems.push(<Divider key="mac_address_divider" inset component="li" />);
|
||||
|
||||
listItems.push(
|
||||
<ListItem key="station_num">
|
||||
<Avatar>
|
||||
<ComputerIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="AP Clients" secondary={data.station_num} />
|
||||
</ListItem>
|
||||
);
|
||||
listItems.push(<Divider key="station_num_divider" inset component="li" />);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<List>
|
||||
{listItems}
|
||||
<Fragment>
|
||||
{this.createListItems(data, fullDetails, classes)}
|
||||
</Fragment>
|
||||
</List>
|
||||
<Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}>
|
||||
Refresh
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { Component, Fragment } from 'react';
|
||||
|
||||
import { withStyles } from 'material-ui/styles';
|
||||
import Button from 'material-ui/Button';
|
||||
@@ -50,74 +50,64 @@ class NTPStatus extends Component {
|
||||
this.props.loadData();
|
||||
}
|
||||
|
||||
renderNTPStatus(data, fullDetails, classes){
|
||||
const listItems = [];
|
||||
|
||||
listItems.push(
|
||||
<ListItem key="ntp_status">
|
||||
<Avatar className={classes["ntpStatus_" + ntpStatusHighlight(data)]}>
|
||||
<UpdateIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="Status" secondary={ntpStatus(data)} />
|
||||
</ListItem>
|
||||
);
|
||||
listItems.push(<Divider key="ntp_status_divider" inset component="li" />);
|
||||
|
||||
if (isSynchronized(data)) {
|
||||
listItems.push(
|
||||
<ListItem key="time_now">
|
||||
<Avatar>
|
||||
<AccessTimeIcon />
|
||||
createListItems(data, fullDetails, classes){
|
||||
return (
|
||||
<Fragment>
|
||||
<ListItem>
|
||||
<Avatar className={classes["ntpStatus_" + ntpStatusHighlight(data)]}>
|
||||
<UpdateIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="Time Now" secondary={unixTimeToTimeAndDate(data.now)} />
|
||||
<ListItemText primary="Status" secondary={ntpStatus(data)} />
|
||||
</ListItem>
|
||||
);
|
||||
listItems.push(<Divider key="time_now_divider" inset component="li" />);
|
||||
}
|
||||
|
||||
listItems.push(
|
||||
<ListItem key="last_sync">
|
||||
<Avatar>
|
||||
<SwapVerticalCircleIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="Last Sync" secondary={data.last_sync > 0 ? unixTimeToTimeAndDate(data.last_sync) : "never" } />
|
||||
</ListItem>
|
||||
);
|
||||
listItems.push(<Divider key="last_sync_divider" inset component="li" />);
|
||||
|
||||
listItems.push(
|
||||
<ListItem key="ntp_server">
|
||||
<Avatar>
|
||||
<DNSIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="NTP Server" secondary={data.server} />
|
||||
</ListItem>
|
||||
);
|
||||
listItems.push(<Divider key="ntp_server_divider" inset component="li" />);
|
||||
|
||||
listItems.push(
|
||||
<ListItem key="sync_interval">
|
||||
<Avatar>
|
||||
<TimerIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="Sync Interval" secondary={moment.duration(data.interval, 'seconds').humanize()} />
|
||||
</ListItem>
|
||||
);
|
||||
listItems.push(<Divider key="sync_interval_divider" inset component="li" />);
|
||||
|
||||
listItems.push(
|
||||
<ListItem key="uptime">
|
||||
<Avatar>
|
||||
<AvTimerIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="Uptime" secondary={moment.duration(data.uptime, 'seconds').humanize()} />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
{ isSynchronized(data) &&
|
||||
<Fragment>
|
||||
<ListItem>
|
||||
<Avatar>
|
||||
<AccessTimeIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="Time Now" secondary={unixTimeToTimeAndDate(data.now)} />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
<ListItem>
|
||||
<Avatar>
|
||||
<SwapVerticalCircleIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="Last Sync" secondary={data.last_sync > 0 ? unixTimeToTimeAndDate(data.last_sync) : "never" } />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
</Fragment>
|
||||
}
|
||||
<ListItem>
|
||||
<Avatar>
|
||||
<DNSIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="NTP Server" secondary={data.server} />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
<ListItem>
|
||||
<Avatar>
|
||||
<TimerIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="Sync Interval" secondary={moment.duration(data.interval, 'seconds').humanize()} />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
<ListItem>
|
||||
<Avatar>
|
||||
<AvTimerIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="Uptime" secondary={moment.duration(data.uptime, 'seconds').humanize()} />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
renderNTPStatus(data, fullDetails, classes){
|
||||
return (
|
||||
<div>
|
||||
<List>
|
||||
{listItems}
|
||||
{this.createListItems(data, fullDetails, classes)}
|
||||
</List>
|
||||
<Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}>
|
||||
Refresh
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, { Component, Fragment } from 'react';
|
||||
|
||||
import { withStyles } from 'material-ui/styles';
|
||||
import Button from 'material-ui/Button';
|
||||
@@ -57,71 +57,61 @@ class WiFiStatus extends Component {
|
||||
return status.dns_ip_1 + (status.dns_ip_2 ? ','+status.dns_ip_2 : '');
|
||||
}
|
||||
|
||||
renderWiFiStatus(data, fullDetails, classes) {
|
||||
const listItems = [];
|
||||
|
||||
listItems.push(
|
||||
<ListItem key="connection_status">
|
||||
<Avatar className={classes["wifiStatus_" + connectionStatusHighlight(data)]}>
|
||||
<WifiIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="Connection Status" secondary={connectionStatus(data)} />
|
||||
</ListItem>
|
||||
createListItems(data, fullDetails, classes) {
|
||||
return (
|
||||
<Fragment>
|
||||
<ListItem>
|
||||
<Avatar className={classes["wifiStatus_" + connectionStatusHighlight(data)]}>
|
||||
<WifiIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="Connection Status" secondary={connectionStatus(data)} />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
{
|
||||
(fullDetails && isConnected(data)) &&
|
||||
<Fragment>
|
||||
<ListItem>
|
||||
<Avatar>
|
||||
<SettingsInputAntennaIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="SSID" secondary={data.ssid} />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
<ListItem>
|
||||
<Avatar>IP</Avatar>
|
||||
<ListItemText primary="IP Address" secondary={data.local_ip} />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
<ListItem>
|
||||
<Avatar>#</Avatar>
|
||||
<ListItemText primary="Subnet Mask" secondary={data.subnet_mask} />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
<ListItem>
|
||||
<Avatar>
|
||||
<SettingsInputComponentIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="Gateway IP" secondary={data.gateway_ip ? data.gateway_ip : "none"} />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
<ListItem>
|
||||
<Avatar>
|
||||
<DNSIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="DNS Server IP" secondary={this.dnsServers(data)} />
|
||||
</ListItem>
|
||||
<Divider inset component="li" />
|
||||
</Fragment>
|
||||
}
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
if (fullDetails && isConnected(data)) {
|
||||
listItems.push(<Divider key="connection_status_divider" inset component="li" />);
|
||||
|
||||
listItems.push(
|
||||
<ListItem key="ssid">
|
||||
<Avatar>
|
||||
<SettingsInputAntennaIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="SSID" secondary={data.ssid} />
|
||||
</ListItem>
|
||||
);
|
||||
listItems.push(<Divider key="ssid_divider" inset component="li" />);
|
||||
|
||||
listItems.push(
|
||||
<ListItem key="ip_address">
|
||||
<Avatar>IP</Avatar>
|
||||
<ListItemText primary="IP Address" secondary={data.local_ip} />
|
||||
</ListItem>
|
||||
);
|
||||
listItems.push(<Divider key="ip_address_divider" inset component="li" />);
|
||||
|
||||
listItems.push(
|
||||
<ListItem key="subnet_mask">
|
||||
<Avatar>#</Avatar>
|
||||
<ListItemText primary="Subnet Mask" secondary={data.subnet_mask} />
|
||||
</ListItem>
|
||||
);
|
||||
listItems.push(<Divider key="subnet_mask_divider" inset component="li" />);
|
||||
|
||||
listItems.push(
|
||||
<ListItem key="gateway_ip">
|
||||
<Avatar>
|
||||
<SettingsInputComponentIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="Gateway IP" secondary={data.gateway_ip ? data.gateway_ip : "none"} />
|
||||
</ListItem>
|
||||
);
|
||||
listItems.push(<Divider key="gateway_ip_divider" inset component="li" />);
|
||||
|
||||
listItems.push(
|
||||
<ListItem key="dns_server_ip">
|
||||
<Avatar>
|
||||
<DNSIcon />
|
||||
</Avatar>
|
||||
<ListItemText primary="DNS Server IP" secondary={this.dnsServers(data)} />
|
||||
</ListItem>
|
||||
);
|
||||
}
|
||||
|
||||
renderWiFiStatus(data, fullDetails, classes) {
|
||||
return (
|
||||
<div>
|
||||
<List>
|
||||
{listItems}
|
||||
{this.createListItems(data, fullDetails, classes)}
|
||||
</List>
|
||||
<Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}>
|
||||
Refresh
|
||||
|
||||
Reference in New Issue
Block a user