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

color wifiicon in selector

Browse Source
This commit is contained in:
MichaelDvP
2023-09-08 10:29:24 +02:00
parent 6376ed2361
commit c19345c345
1 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
interface/src/framework/network/WiFiNetworkSelector.tsx
View File

@@ -1,10 +1,11 @@
import LockIcon from '@mui/icons-material/Lock'; import LockIcon from '@mui/icons-material/Lock';
import LockOpenIcon from '@mui/icons-material/LockOpen'; import LockOpenIcon from '@mui/icons-material/LockOpen';
import WifiIcon from '@mui/icons-material/Wifi'; import WifiIcon from '@mui/icons-material/Wifi';
import { Avatar, Badge, List, ListItem, ListItemAvatar, ListItemIcon, ListItemText } from '@mui/material'; import { Avatar, Badge, List, ListItem, ListItemAvatar, ListItemIcon, ListItemText, useTheme } from '@mui/material';
import { useContext } from 'react'; import { useContext } from 'react';
import { WiFiConnectionContext } from './WiFiConnectionContext'; import { WiFiConnectionContext } from './WiFiConnectionContext';
import type { Theme } from '@mui/material';
import type { FC } from 'react'; import type { FC } from 'react';
import type { WiFiNetwork, WiFiNetworkList } from 'types'; import type { WiFiNetwork, WiFiNetworkList } from 'types';
import { MessageBox } from 'components'; import { MessageBox } from 'components';
@@ -42,8 +43,18 @@ export const networkSecurityMode = ({ encryption_type }: WiFiNetwork) => {
} }
}; };
const networkQualityHighlight = ({ rssi }: WiFiNetwork, theme: Theme) => {
if (rssi <= -85) {
return theme.palette.error.main;
} else if (rssi <= -75) {
return theme.palette.warning.main;
}
return theme.palette.success.main;
};
const WiFiNetworkSelector: FC<WiFiNetworkSelectorProps> = ({ networkList }) => { const WiFiNetworkSelector: FC<WiFiNetworkSelectorProps> = ({ networkList }) => {
const { LL } = useI18nContext(); const { LL } = useI18nContext();
const theme = useTheme();
const wifiConnectionContext = useContext(WiFiConnectionContext); const wifiConnectionContext = useContext(WiFiConnectionContext);
@@ -57,8 +68,8 @@ const WiFiNetworkSelector: FC<WiFiNetworkSelectorProps> = ({ networkList }) => {
secondary={'Security: ' + networkSecurityMode(network) + ', Ch: ' + network.channel} secondary={'Security: ' + networkSecurityMode(network) + ', Ch: ' + network.channel}
/> />
<ListItemIcon> <ListItemIcon>
<Badge badgeContent={network.rssi + 'db'}> <Badge badgeContent={network.rssi + 'dBm'}>
<WifiIcon /> <WifiIcon sx={{ color: networkQualityHighlight(network, theme) }} />
</Badge> </Badge>
</ListItemIcon> </ListItemIcon>
</ListItem> </ListItem>