nova
/
esp8266-react-framework
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

use fragments where possible, and drop keys.

master
rjwats@gmail.com 6 years ago
parent
2c732d3281
commit
0b334a8ade
8 changed files with 162 additions and 191 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      interface/src/components/SnackbarNotification.js
  2. 79
      interface/src/containers/APStatus.js
  3. 112
      interface/src/containers/NTPStatus.js
  4. 110
      interface/src/containers/WiFiStatus.js
  5. 12
      interface/src/forms/APSettingsForm.js
  6. 2
      interface/src/forms/OTASettingsForm.js
  7. 35
      interface/src/forms/WiFiNetworkSelector.js
  8. 2
      interface/src/forms/WiFiSettingsForm.js

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
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>
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>
);
listItems.push(<Divider key="station_num_divider" inset component="li" />);
}
renderAPStatus(data, fullDetails, classes){
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

112
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">
createListItems(data, fullDetails, classes){
return (
<Fragment>
<ListItem>
<Avatar className={classes["ntpStatus_" + ntpStatusHighlight(data)]}>
<UpdateIcon />
</Avatar>
<ListItemText primary="Status" secondary={ntpStatus(data)} />
</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>
<AccessTimeIcon />
<DNSIcon />
</Avatar>
<ListItemText primary="Time Now" secondary={unixTimeToTimeAndDate(data.now)} />
<ListItemText primary="NTP Server" secondary={data.server} />
</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" />
<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

110
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>
);
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 />
createListItems(data, fullDetails, classes) {
return (
<Fragment>
<ListItem>
<Avatar className={classes["wifiStatus_" + connectionStatusHighlight(data)]}>
<WifiIcon />
</Avatar>
<ListItemText primary="DNS Server IP" secondary={this.dnsServers(data)} />
<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>
);
}
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 />}

Write Preview
Loading…
Cancel
Save