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

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

@ -16,6 +16,19 @@ export const ConnectedDevices = () => {
const [interfaces, setInterfaces] = useState([]);
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 () => {
var myHeaders = new Headers();
@ -47,19 +60,19 @@ export const ConnectedDevices = () => {
useEffect(() => {
fetchConnectedDevicesData();
},[])
}, [])
return (
<Stack
justifyContent="center"
alignItems={(!content || interfaces.length == 0) &&"center"}
alignItems={(!content || interfaces.length == 0) && "center"}
>
{content && interfaces.length > 0 ?
<Card>
<CardContent>
<Grid mb={3}>
<InputLabel> Interface </InputLabel>
<Select label="interface" variant="standard" value={interfaceValue} onChange={(e)=> setInterfaceValue(e.target.value)}>
<Select label="interface" variant="standard" value={interfaceValue} onChange={(e) => setInterfaceValue(e.target.value)}>
{(
interfaces.map((item, index) => (
<MenuItem key={index} value={item}>
@ -70,13 +83,13 @@ export const ConnectedDevices = () => {
</Select>
</Grid>
{
content[interfaceValue].map((property,index) => (
content[interfaceValue].map((property, index) => (
<Card key={index}>
<CardContent>
<Grid container justifyContent={"center"}>
<Stack direction="row" spacing={5}>
<Stack justifyItems={"center"} direction={"row"} mt={2}>
<Tooltip title={property.active ? "Online": "Offline"}>
<Tooltip title={property.active ? "Online" : "Offline"}>
<SvgIcon>
<CpuChipIcon color={property.active ? theme.palette.success.main : theme.palette.error.main}></CpuChipIcon>
</SvgIcon>
@ -85,7 +98,7 @@ export const ConnectedDevices = () => {
{property.hostname}
</Typography>
</Stack>
<Divider orientation="vertical"/>
<Divider orientation="vertical" />
<Stack spacing={2}>
<Typography>
IP address: {property.ip_adress}
@ -95,12 +108,28 @@ export const ConnectedDevices = () => {
</Typography>
</Stack>
<Stack spacing={2}>
<Typography>
RSSI: {property.rssi} dbm
</Typography>
<Typography>
Source: {property.adress_source}
</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>
</Grid>
@ -109,8 +138,8 @@ export const ConnectedDevices = () => {
))
}
</CardContent>
</Card>: (
content ? <Typography> No connected devices found </Typography> : <CircularProgress/>
</Card> : (
content ? <Typography> No connected devices found </Typography> : <CircularProgress />
)}
</Stack>
)