louis/oktopus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(frontend): device rssi indication of signal state

Browse Source
This commit is contained in:
leandrofars 2024-07-10 11:59:56 -03:00
parent 9df2a04404
commit 35372dd980
1 changed files with 109 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/sections/devices/cwmp/connecteddevices.js
View File

@ -16,6 +16,19 @@ export const ConnectedDevices = () => {
const [interfaces, setInterfaces] = useState([]); const [interfaces, setInterfaces] = useState([]);
const [interfaceValue, setInterfaceValue] = useState(null); const [interfaceValue, setInterfaceValue] = useState(null);
const getConnectionState = (rssi) => {
let connectionStatus = "Signal "
if (rssi > -30) {
return connectionStatus + "Excellent"
} else if (rssi > -60) {
return connectionStatus + "Good"
} else if (rssi > -70) {
return connectionStatus + "Bad"
} else {
return connectionStatus + "Awful"
}
}
const fetchConnectedDevicesData = async () => { const fetchConnectedDevicesData = async () => {
var myHeaders = new Headers(); var myHeaders = new Headers();
@ -95,12 +108,28 @@ export const ConnectedDevices = () => {
</Typography> </Typography>
</Stack> </Stack>
<Stack spacing={2}> <Stack spacing={2}>
<Typography>
RSSI: {property.rssi} dbm
</Typography>
<Typography> <Typography>
Source: {property.adress_source} Source: {property.adress_source}
</Typography> </Typography>
<Tooltip title={getConnectionState(property.rssi)}>
<Typography display={"flex"} color={() => {
let rssi = property.rssi
if (rssi > -30) {
return theme.palette.success.main
} else if (rssi > -60) {
return theme.palette.success.main
} else if (rssi > -70) {
return theme.palette.warning.main
} else {
return theme.palette.error.main
}
}}>
<Typography color={theme.palette.neutral[900]} sx={{pr:"5px"}}>
RSSI:
</Typography>
{property.rssi} dbm
</Typography>
</Tooltip>
</Stack> </Stack>
</Stack> </Stack>
</Grid> </Grid>