Don't use deprecated variants in material ui.

This commit is contained in:
Rick Watson 2019-04-29 00:29:31 +01:00
parent 59d2646823
commit 063fff5343
16 changed files with 70 additions and 51 deletions

View File

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel="stylesheet" href="/css/roboto.css"><link rel="manifest" href="/app/manifest.json"><title>ESP8266 React</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="/js/1.b351.js"></script><script src="/js/2.9881.js"></script><script src="/js/0.d999.js"></script></body></html> <!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel="stylesheet" href="/css/roboto.css"><link rel="manifest" href="/app/manifest.json"><title>ESP8266 React</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="/js/1.b351.js"></script><script src="/js/2.9881.js"></script><script src="/js/0.da55.js"></script></body></html>

Binary file not shown.

BIN
data/www/js/0.da55.js.gz Normal file

Binary file not shown.

View File

@ -1 +1 @@
REACT_APP_ENDPOINT_ROOT=http://192.168.0.26/rest/ REACT_APP_ENDPOINT_ROOT=http://192.168.0.4/rest/

View File

@ -3052,7 +3052,8 @@
}, },
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true "bundled": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@ -3417,7 +3418,8 @@
}, },
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true "bundled": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@ -3465,6 +3467,7 @@
"strip-ansi": { "strip-ansi": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@ -3503,11 +3506,13 @@
}, },
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true "bundled": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true "bundled": true,
"optional": true
} }
} }
}, },
@ -6600,11 +6605,13 @@
}, },
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true "bundled": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "1.0.0", "balanced-match": "1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -6617,15 +6624,18 @@
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true "bundled": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true "bundled": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true "bundled": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@ -6728,7 +6738,8 @@
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true "bundled": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@ -6738,6 +6749,7 @@
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@ -6750,17 +6762,20 @@
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "1.1.11" "brace-expansion": "1.1.11"
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true "bundled": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.2.4", "version": "2.2.4",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.1", "safe-buffer": "^5.1.1",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@ -6777,6 +6792,7 @@
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@ -6849,7 +6865,8 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true "bundled": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@ -6859,6 +6876,7 @@
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@ -6964,6 +6982,7 @@
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",

View File

@ -25,7 +25,7 @@ class APConfiguration extends Component {
const { selectedTab } = this.state; const { selectedTab } = this.state;
return ( return (
<MenuAppBar sectionTitle="AP Configuration"> <MenuAppBar sectionTitle="AP Configuration">
<Tabs value={selectedTab} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" fullWidth scrollable> <Tabs value={selectedTab} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="scrollable">
<Tab value="apStatus" label="AP Status" /> <Tab value="apStatus" label="AP Status" />
<Tab value="apSettings" label="AP Settings" /> <Tab value="apSettings" label="AP Settings" />
</Tabs> </Tabs>

View File

@ -59,26 +59,26 @@ class APStatus extends Component {
</Avatar> </Avatar>
<ListItemText primary="Status" secondary={this.apStatus(data)} /> <ListItemText primary="Status" secondary={this.apStatus(data)} />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
<Avatar>IP</Avatar> <Avatar>IP</Avatar>
<ListItemText primary="IP Address" secondary={data.ip_address} /> <ListItemText primary="IP Address" secondary={data.ip_address} />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
<Avatar> <Avatar>
<DeviceHubIcon /> <DeviceHubIcon />
</Avatar> </Avatar>
<ListItemText primary="MAC Address" secondary={data.mac_address} /> <ListItemText primary="MAC Address" secondary={data.mac_address} />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
<Avatar> <Avatar>
<ComputerIcon /> <ComputerIcon />
</Avatar> </Avatar>
<ListItemText primary="AP Clients" secondary={data.station_num} /> <ListItemText primary="AP Clients" secondary={data.station_num} />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
</Fragment> </Fragment>
); );
} }
@ -91,7 +91,7 @@ class APStatus extends Component {
{this.createListItems(data, fullDetails, classes)} {this.createListItems(data, fullDetails, classes)}
</Fragment> </Fragment>
</List> </List>
<Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}> <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
Refresh Refresh
</Button> </Button>
</div> </div>
@ -118,7 +118,7 @@ class APStatus extends Component {
<Typography variant="display1" className={classes.fetching}> <Typography variant="display1" className={classes.fetching}>
{errorMessage} {errorMessage}
</Typography> </Typography>
<Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}> <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
Refresh Refresh
</Button> </Button>
</div> </div>

View File

@ -23,7 +23,7 @@ class NTPConfiguration extends Component {
const { selectedTab } = this.state; const { selectedTab } = this.state;
return ( return (
<MenuAppBar sectionTitle="NTP Configuration"> <MenuAppBar sectionTitle="NTP Configuration">
<Tabs value={selectedTab} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" fullWidth scrollable> <Tabs value={selectedTab} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="scrollable">
<Tab value="ntpStatus" label="NTP Status" /> <Tab value="ntpStatus" label="NTP Status" />
<Tab value="ntpSettings" label="NTP Settings" /> <Tab value="ntpSettings" label="NTP Settings" />
</Tabs> </Tabs>

View File

@ -60,7 +60,7 @@ class NTPStatus extends Component {
</Avatar> </Avatar>
<ListItemText primary="Status" secondary={ntpStatus(data)} /> <ListItemText primary="Status" secondary={ntpStatus(data)} />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
{ isSynchronized(data) && { isSynchronized(data) &&
<Fragment> <Fragment>
<ListItem> <ListItem>
@ -69,14 +69,14 @@ class NTPStatus extends Component {
</Avatar> </Avatar>
<ListItemText primary="Time Now" secondary={unixTimeToTimeAndDate(data.now)} /> <ListItemText primary="Time Now" secondary={unixTimeToTimeAndDate(data.now)} />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
<Avatar> <Avatar>
<SwapVerticalCircleIcon /> <SwapVerticalCircleIcon />
</Avatar> </Avatar>
<ListItemText primary="Last Sync" secondary={data.last_sync > 0 ? unixTimeToTimeAndDate(data.last_sync) : "never" } /> <ListItemText primary="Last Sync" secondary={data.last_sync > 0 ? unixTimeToTimeAndDate(data.last_sync) : "never" } />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
</Fragment> </Fragment>
} }
<ListItem> <ListItem>
@ -85,21 +85,21 @@ class NTPStatus extends Component {
</Avatar> </Avatar>
<ListItemText primary="NTP Server" secondary={data.server} /> <ListItemText primary="NTP Server" secondary={data.server} />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
<Avatar> <Avatar>
<TimerIcon /> <TimerIcon />
</Avatar> </Avatar>
<ListItemText primary="Sync Interval" secondary={moment.duration(data.interval, 'seconds').humanize()} /> <ListItemText primary="Sync Interval" secondary={moment.duration(data.interval, 'seconds').humanize()} />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
<Avatar> <Avatar>
<AvTimerIcon /> <AvTimerIcon />
</Avatar> </Avatar>
<ListItemText primary="Uptime" secondary={moment.duration(data.uptime, 'seconds').humanize()} /> <ListItemText primary="Uptime" secondary={moment.duration(data.uptime, 'seconds').humanize()} />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
</Fragment> </Fragment>
); );
} }
@ -110,7 +110,7 @@ class NTPStatus extends Component {
<List> <List>
{this.createListItems(data, fullDetails, classes)} {this.createListItems(data, fullDetails, classes)}
</List> </List>
<Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}> <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
Refresh Refresh
</Button> </Button>
</div> </div>
@ -137,7 +137,7 @@ class NTPStatus extends Component {
<Typography variant="display1" className={classes.fetching}> <Typography variant="display1" className={classes.fetching}>
{errorMessage} {errorMessage}
</Typography> </Typography>
<Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}> <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
Refresh Refresh
</Button> </Button>
</div> </div>

View File

@ -38,7 +38,7 @@ class WiFiConfiguration extends Component {
const { selectedTab } = this.state; const { selectedTab } = this.state;
return ( return (
<MenuAppBar sectionTitle="WiFi Configuration"> <MenuAppBar sectionTitle="WiFi Configuration">
<Tabs value={selectedTab} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" fullWidth scrollable> <Tabs value={selectedTab} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="scrollable">
<Tab value="wifiStatus" label="WiFi Status" /> <Tab value="wifiStatus" label="WiFi Status" />
<Tab value="networkScanner" label="Network Scanner" /> <Tab value="networkScanner" label="Network Scanner" />
<Tab value="wifiSettings" label="WiFi Settings" /> <Tab value="wifiSettings" label="WiFi Settings" />

View File

@ -67,7 +67,7 @@ class WiFiStatus extends Component {
</Avatar> </Avatar>
<ListItemText primary="Connection Status" secondary={connectionStatus(data)} /> <ListItemText primary="Connection Status" secondary={connectionStatus(data)} />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
{ {
(fullDetails && isConnected(data)) && (fullDetails && isConnected(data)) &&
<Fragment> <Fragment>
@ -77,31 +77,31 @@ class WiFiStatus extends Component {
</Avatar> </Avatar>
<ListItemText primary="SSID" secondary={data.ssid} /> <ListItemText primary="SSID" secondary={data.ssid} />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
<Avatar>IP</Avatar> <Avatar>IP</Avatar>
<ListItemText primary="IP Address" secondary={data.local_ip} /> <ListItemText primary="IP Address" secondary={data.local_ip} />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
<Avatar>#</Avatar> <Avatar>#</Avatar>
<ListItemText primary="Subnet Mask" secondary={data.subnet_mask} /> <ListItemText primary="Subnet Mask" secondary={data.subnet_mask} />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
<Avatar> <Avatar>
<SettingsInputComponentIcon /> <SettingsInputComponentIcon />
</Avatar> </Avatar>
<ListItemText primary="Gateway IP" secondary={data.gateway_ip ? data.gateway_ip : "none"} /> <ListItemText primary="Gateway IP" secondary={data.gateway_ip ? data.gateway_ip : "none"} />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
<Avatar> <Avatar>
<DNSIcon /> <DNSIcon />
</Avatar> </Avatar>
<ListItemText primary="DNS Server IP" secondary={this.dnsServers(data)} /> <ListItemText primary="DNS Server IP" secondary={this.dnsServers(data)} />
</ListItem> </ListItem>
<Divider inset component="li" /> <Divider variant="inset" component="li" />
</Fragment> </Fragment>
} }
</Fragment> </Fragment>
@ -114,7 +114,7 @@ class WiFiStatus extends Component {
<List> <List>
{this.createListItems(data, fullDetails, classes)} {this.createListItems(data, fullDetails, classes)}
</List> </List>
<Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}> <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
Refresh Refresh
</Button> </Button>
</div> </div>
@ -142,7 +142,7 @@ class WiFiStatus extends Component {
<Typography variant="display1" className={classes.fetching}> <Typography variant="display1" className={classes.fetching}>
{errorMessage} {errorMessage}
</Typography> </Typography>
<Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}> <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
Refresh Refresh
</Button> </Button>
</div> </div>

View File

@ -87,10 +87,10 @@ class APSettingsForm extends React.Component {
</Fragment> </Fragment>
} }
<Button variant="raised" color="primary" className={classes.button} type="submit"> <Button variant="contained" color="primary" className={classes.button} type="submit">
Save Save
</Button> </Button>
<Button variant="raised" color="secondary" className={classes.button} onClick={onReset}> <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset Reset
</Button> </Button>
@ -102,7 +102,7 @@ class APSettingsForm extends React.Component {
<Typography variant="display1" className={classes.loadingSettingsDetails}> <Typography variant="display1" className={classes.loadingSettingsDetails}>
{errorMessage} {errorMessage}
</Typography> </Typography>
<Button variant="raised" color="secondary" className={classes.button} onClick={onReset}> <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset Reset
</Button> </Button>
</div> </div>

View File

@ -75,10 +75,10 @@ class NTPSettingsForm extends React.Component {
margin="normal" margin="normal"
/> />
<Button variant="raised" color="primary" className={classes.button} type="submit"> <Button variant="contained" color="primary" className={classes.button} type="submit">
Save Save
</Button> </Button>
<Button variant="raised" color="secondary" className={classes.button} onClick={onReset}> <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset Reset
</Button> </Button>
@ -90,7 +90,7 @@ class NTPSettingsForm extends React.Component {
<Typography variant="display1" className={classes.loadingSettingsDetails}> <Typography variant="display1" className={classes.loadingSettingsDetails}>
{errorMessage} {errorMessage}
</Typography> </Typography>
<Button variant="raised" color="secondary" className={classes.button} onClick={onReset}> <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset Reset
</Button> </Button>
</div> </div>

View File

@ -95,10 +95,10 @@ class OTASettingsForm extends React.Component {
margin="normal" margin="normal"
/> />
<Button variant="raised" color="primary" className={classes.button} type="submit"> <Button variant="contained" color="primary" className={classes.button} type="submit">
Save Save
</Button> </Button>
<Button variant="raised" color="secondary" className={classes.button} onClick={onReset}> <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset Reset
</Button> </Button>
@ -110,7 +110,7 @@ class OTASettingsForm extends React.Component {
<Typography variant="display1" className={classes.loadingSettingsDetails}> <Typography variant="display1" className={classes.loadingSettingsDetails}>
{errorMessage} {errorMessage}
</Typography> </Typography>
<Button variant="raised" color="secondary" className={classes.button} onClick={onReset}> <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset Reset
</Button> </Button>
</div> </div>

View File

@ -86,7 +86,7 @@ class WiFiNetworkSelector extends Component {
</div> </div>
} }
<Button variant="raised" color="secondary" className={classes.button} onClick={requestNetworkScan} disabled={scanningForNetworks}> <Button variant="contained" color="secondary" className={classes.button} onClick={requestNetworkScan} disabled={scanningForNetworks}>
Scan again... Scan again...
</Button> </Button>
</div> </div>

View File

@ -201,10 +201,10 @@ class WiFiSettingsForm extends React.Component {
</Fragment> </Fragment>
} }
<Button variant="raised" color="primary" className={classes.button} type="submit"> <Button variant="contained" color="primary" className={classes.button} type="submit">
Save Save
</Button> </Button>
<Button variant="raised" color="secondary" className={classes.button} onClick={onReset}> <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset Reset
</Button> </Button>
@ -216,7 +216,7 @@ class WiFiSettingsForm extends React.Component {
<Typography variant="display1" className={classes.loadingSettingsDetails}> <Typography variant="display1" className={classes.loadingSettingsDetails}>
{errorMessage} {errorMessage}
</Typography> </Typography>
<Button variant="raised" color="secondary" className={classes.button} onClick={onReset}> <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
Reset Reset
</Button> </Button>
</div> </div>