andry/EMS-ESP32
1
0
Fork 0
mirror of https://github.com/emsesp/EMS-ESP32.git synced 2025-12-06 07:49:52 +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 WifiIcon from '@material-ui/icons/Wifi';
import SettingsEthernetIcon from '@material-ui/icons/SettingsEthernet';
import SettingsIcon from '@material-ui/icons/Settings';
import AccessTimeIcon from '@material-ui/icons/AccessTime';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
@@ -146,7 +146,7 @@ class MenuAppBar extends React.Component<MenuAppBarProps, MenuAppBarState> {
<List>
<ListItem to='/network/' selected={path.startsWith('/network/')} button component={Link}>
<ListItemIcon>
<WifiIcon />
<SettingsEthernetIcon />
</ListItemIcon>
<ListItemText primary="Network Connection" />
</ListItem>

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

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