lukas/WordClockESP
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

use fragments where possible, and drop keys.

Browse Source
This commit is contained in:
rjwats@gmail.com 2018-03-06 20:58:36 +00:00
parent 2c732d3281
commit 0b334a8ade
8 changed files with 164 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
interface/src/components/SnackbarNotification.js
View File

@ -61,7 +61,6 @@ class SnackbarNotification extends React.Component {
message={<span id="message-id">{this.state.message}</span>}
action={
<IconButton
key="close"
aria-label="Close"
color="inherit"
className={classes.close}

79
interface/src/containers/APStatus.js
View File

@ -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

114
interface/src/containers/NTPStatus.js
View File

@ -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

112
interface/src/containers/WiFiStatus.js
View File

@ -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

12
interface/src/forms/APSettingsForm.js
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
@ -62,8 +62,8 @@ class APSettingsForm extends React.Component {
{
isAPEnabled(apSettings.provision_mode) &&
[
<TextValidator key="ssid"
<Fragment>
<TextValidator
validators={['required', 'matchRegexp:^.{0,32}$']}
errorMessages={['Access Point SSID is required', 'Access Point SSID must be 32 characeters or less']}
name="ssid"
@ -72,8 +72,8 @@ class APSettingsForm extends React.Component {
value={apSettings.ssid}
onChange={handleValueChange('ssid')}
margin="normal"
/>,
<TextValidator key="password"
/>
<TextValidator
validators={['required', 'matchRegexp:^.{0,64}$']}
errorMessages={['Access Point Password is required', 'Access Point Password must be 64 characters or less']}
name="password"
@ -83,7 +83,7 @@ class APSettingsForm extends React.Component {
onChange={handleValueChange('password')}
margin="normal"
/>
]
</Fragment>
}
<Button variant="raised" color="primary" className={classes.button} type="submit">

2
interface/src/forms/OTASettingsForm.js
View File

@ -82,7 +82,7 @@ class OTASettingsForm extends React.Component {
margin="normal"
/>
<TextValidator key="password"
<TextValidator
validators={['required', 'matchRegexp:^.{0,64}$']}
errorMessages={['OTA Password is required', 'OTA Point Password must be 64 characters or less']}
name="password"

35
interface/src/forms/WiFiNetworkSelector.js
View File

@ -36,24 +36,23 @@ class WiFiNetworkSelector extends Component {
}
renderNetwork(network) {
return ([
<ListItem key={network.ssid} button onClick={() => this.props.selectNetwork(network)}>
<ListItemAvatar>
<Avatar>
{isNetworkOpen(network) ? <LockOpenIcon /> : <LockIcon />}
</Avatar>
</ListItemAvatar>
<ListItemText
primary={network.ssid}
secondary={"Security: "+ networkSecurityMode(network) + ", Ch: " + network.channel}
/>
<ListItemIcon>
<Badge badgeContent={network.rssi + "db"}>
<WifiIcon />
</Badge>
</ListItemIcon>
</ListItem>
]
return (
<ListItem key={network.bssid} button onClick={() => this.props.selectNetwork(network)}>
<ListItemAvatar>
<Avatar>
{isNetworkOpen(network) ? <LockOpenIcon /> : <LockIcon />}
</Avatar>
</ListItemAvatar>
<ListItemText
primary={network.ssid}
secondary={"Security: "+ networkSecurityMode(network) + ", Ch: " + network.channel}
/>
<ListItemIcon>
<Badge badgeContent={network.rssi + "db"}>
<WifiIcon />
</Badge>
</ListItemIcon>
</ListItem>
);
}

2
interface/src/forms/WiFiSettingsForm.js
View File

@ -54,7 +54,7 @@ class WiFiSettingsForm extends React.Component {
const { selectedNetwork, deselectNetwork } = this.props;
return (
<List>
<ListItem key={selectedNetwork.ssid}>
<ListItem>
<ListItemAvatar>
<Avatar>
{isNetworkOpen(selectedNetwork) ? <LockOpenIcon /> : <LockIcon />}