andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-07 00:09:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

adjusted network icons

Browse Source
This commit is contained in:
proddy
2021-04-04 09:13:53 +02:00
parent 2021a2e52b
commit 84e76e2bd7
3 changed files with 82 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
interface/src/components/MenuAppBar.tsx
View File

@@ -8,7 +8,7 @@ import { Card, CardContent, CardActions } from '@material-ui/core';
import { withStyles, createStyles, Theme, WithTheme, WithStyles, withTheme } from '@material-ui/core/styles'; import { withStyles, createStyles, Theme, WithTheme, WithStyles, withTheme } from '@material-ui/core/styles';
import WifiIcon from '@material-ui/icons/Wifi'; import SettingsEthernetIcon from '@material-ui/icons/SettingsEthernet';
import SettingsIcon from '@material-ui/icons/Settings'; import SettingsIcon from '@material-ui/icons/Settings';
import AccessTimeIcon from '@material-ui/icons/AccessTime'; import AccessTimeIcon from '@material-ui/icons/AccessTime';
import AccountCircleIcon from '@material-ui/icons/AccountCircle'; import AccountCircleIcon from '@material-ui/icons/AccountCircle';
@@ -146,7 +146,7 @@ class MenuAppBar extends React.Component<MenuAppBarProps, MenuAppBarState> {
<List> <List>
<ListItem to='/network/' selected={path.startsWith('/network/')} button component={Link}> <ListItem to='/network/' selected={path.startsWith('/network/')} button component={Link}>
<ListItemIcon> <ListItemIcon>
<WifiIcon /> <SettingsEthernetIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Network Connection" /> <ListItemText primary="Network Connection" />
</ListItem> </ListItem>

25
interface/src/network/NetworkStatus.ts
View File

@@ -1,13 +1,22 @@
import { Theme } from '@material-ui/core'; import { Theme } from "@material-ui/core";
import { NetworkStatus, NetworkConnectionStatus } from './types'; import { NetworkStatus, NetworkConnectionStatus } from "./types";
export const isConnected = ({ status }: NetworkStatus) => { export const isConnected = ({ status }: NetworkStatus) => {
return ((status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED) || (status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED)); return (
} status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED ||
status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED
);
};
export const isWiFi = ({ status }: NetworkStatus) => (status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED) export const isWiFi = ({ status }: NetworkStatus) =>
status === NetworkConnectionStatus.WIFI_STATUS_CONNECTED;
export const isEthernet = ({ status }: NetworkStatus) =>
status === NetworkConnectionStatus.ETHERNET_STATUS_CONNECTED;
export const networkStatusHighlight = ({ status }: NetworkStatus, theme: Theme) => { export const networkStatusHighlight = (
{ status }: NetworkStatus,
theme: Theme
) => {
switch (status) { switch (status) {
case NetworkConnectionStatus.WIFI_STATUS_IDLE: case NetworkConnectionStatus.WIFI_STATUS_IDLE:
case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED: case NetworkConnectionStatus.WIFI_STATUS_DISCONNECTED:
@@ -22,7 +31,7 @@ export const networkStatusHighlight = ({ status }: NetworkStatus, theme: Theme)
default: default:
return theme.palette.warning.main; return theme.palette.warning.main;
} }
} };
export const networkStatus = ({ status }: NetworkStatus) => { export const networkStatus = ({ status }: NetworkStatus) => {
switch (status) { switch (status) {
@@ -45,4 +54,4 @@ export const networkStatus = ({ status }: NetworkStatus) => {
default: default:
return "Unknown"; return "Unknown";
} }
} };

93
interface/src/network/NetworkStatusForm.tsx
View File

@@ -1,45 +1,64 @@
import React, { Component, Fragment } from 'react'; import React, { Component, Fragment } from "react";
import { WithTheme, withTheme } from '@material-ui/core/styles'; import { WithTheme, withTheme } from "@material-ui/core/styles";
import { Avatar, Divider, List, ListItem, ListItemAvatar, ListItemText } from '@material-ui/core'; import {
Avatar,
Divider,
List,
ListItem,
ListItemAvatar,
ListItemText,
} from "@material-ui/core";
import DNSIcon from '@material-ui/icons/Dns'; import DNSIcon from "@material-ui/icons/Dns";
import WifiIcon from '@material-ui/icons/Wifi'; import WifiIcon from "@material-ui/icons/Wifi";
import SettingsInputComponentIcon from '@material-ui/icons/SettingsInputComponent'; import RouterIcon from "@material-ui/icons/Router";
import SettingsInputAntennaIcon from '@material-ui/icons/SettingsInputAntenna'; import SettingsInputComponentIcon from "@material-ui/icons/SettingsInputComponent";
import DeviceHubIcon from '@material-ui/icons/DeviceHub'; import SettingsInputAntennaIcon from "@material-ui/icons/SettingsInputAntenna";
import RefreshIcon from '@material-ui/icons/Refresh'; import DeviceHubIcon from "@material-ui/icons/DeviceHub";
import RefreshIcon from "@material-ui/icons/Refresh";
import { RestFormProps, FormActions, FormButton, HighlightAvatar } from '../components'; import {
import { networkStatus, networkStatusHighlight, isConnected, isWiFi } from './NetworkStatus'; RestFormProps,
import { NetworkStatus } from './types'; FormActions,
FormButton,
HighlightAvatar,
} from "../components";
import {
networkStatus,
networkStatusHighlight,
isConnected,
isWiFi,
isEthernet,
} from "./NetworkStatus";
import { NetworkStatus } from "./types";
type NetworkStatusFormProps = RestFormProps<NetworkStatus> & WithTheme; type NetworkStatusFormProps = RestFormProps<NetworkStatus> & WithTheme;
class NetworkStatusForm extends Component<NetworkStatusFormProps> { class NetworkStatusForm extends Component<NetworkStatusFormProps> {
dnsServers(status: NetworkStatus) { dnsServers(status: NetworkStatus) {
if (!status.dns_ip_1) { if (!status.dns_ip_1) {
return "none"; return "none";
} }
return status.dns_ip_1 + (status.dns_ip_2 ? ',' + status.dns_ip_2 : ''); return status.dns_ip_1 + (status.dns_ip_2 ? "," + status.dns_ip_2 : "");
} }
createListItems() { createListItems() {
const { data, theme } = this.props const { data, theme } = this.props;
return ( return (
<Fragment> <Fragment>
<ListItem> <ListItem>
<ListItemAvatar> <ListItemAvatar>
<HighlightAvatar color={networkStatusHighlight(data, theme)}> <HighlightAvatar color={networkStatusHighlight(data, theme)}>
<WifiIcon /> {isWiFi(data) && <WifiIcon />}
{isEthernet(data) && <RouterIcon />}
</HighlightAvatar> </HighlightAvatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText primary="Status" secondary={networkStatus(data)} /> <ListItemText primary="Status" secondary={networkStatus(data)} />
</ListItem> </ListItem>
<Divider variant="inset" component="li" /> <Divider variant="inset" component="li" />
{ {isWiFi(data) && (
isWiFi(data) &&
<Fragment> <Fragment>
<ListItem> <ListItem>
<ListItemAvatar> <ListItemAvatar>
@@ -51,8 +70,8 @@ class NetworkStatusForm extends Component<NetworkStatusFormProps> {
</ListItem> </ListItem>
<Divider variant="inset" component="li" /> <Divider variant="inset" component="li" />
</Fragment> </Fragment>
} )}
{ isConnected(data) && {isConnected(data) && (
<Fragment> <Fragment>
<ListItem> <ListItem>
<ListItemAvatar> <ListItemAvatar>
@@ -67,14 +86,20 @@ class NetworkStatusForm extends Component<NetworkStatusFormProps> {
<DeviceHubIcon /> <DeviceHubIcon />
</Avatar> </Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText primary="MAC Address" secondary={data.mac_address} /> <ListItemText
primary="MAC Address"
secondary={data.mac_address}
/>
</ListItem> </ListItem>
<Divider variant="inset" component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
<ListItemAvatar> <ListItemAvatar>
<Avatar>#</Avatar> <Avatar>#</Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText primary="Subnet Mask" secondary={data.subnet_mask} /> <ListItemText
primary="Subnet Mask"
secondary={data.subnet_mask}
/>
</ListItem> </ListItem>
<Divider variant="inset" component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
@@ -83,7 +108,10 @@ class NetworkStatusForm extends Component<NetworkStatusFormProps> {
<SettingsInputComponentIcon /> <SettingsInputComponentIcon />
</Avatar> </Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText primary="Gateway IP" secondary={data.gateway_ip || "none"} /> <ListItemText
primary="Gateway IP"
secondary={data.gateway_ip || "none"}
/>
</ListItem> </ListItem>
<Divider variant="inset" component="li" /> <Divider variant="inset" component="li" />
<ListItem> <ListItem>
@@ -92,11 +120,14 @@ class NetworkStatusForm extends Component<NetworkStatusFormProps> {
<DNSIcon /> <DNSIcon />
</Avatar> </Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText primary="DNS Server IP" secondary={this.dnsServers(data)} /> <ListItemText
primary="DNS Server IP"
secondary={this.dnsServers(data)}
/>
</ListItem> </ListItem>
<Divider variant="inset" component="li" /> <Divider variant="inset" component="li" />
</Fragment> </Fragment>
} )}
</Fragment> </Fragment>
); );
} }
@@ -104,18 +135,20 @@ class NetworkStatusForm extends Component<NetworkStatusFormProps> {
render() { render() {
return ( return (
<Fragment> <Fragment>
<List> <List>{this.createListItems()}</List>
{this.createListItems()}
</List>
<FormActions> <FormActions>
<FormButton startIcon={<RefreshIcon />} variant="contained" color="secondary" onClick={this.props.loadData}> <FormButton
startIcon={<RefreshIcon />}
variant="contained"
color="secondary"
onClick={this.props.loadData}
>
Refresh Refresh
</FormButton> </FormButton>
</FormActions> </FormActions>
</Fragment> </Fragment>
); );
} }
} }
export default withTheme(NetworkStatusForm); export default withTheme(NetworkStatusForm);