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

feat(frontend): wifi channels

Browse Source
This commit is contained in:
leandrofars 2024-07-09 10:52:23 -03:00
parent 36b57b8f21
commit 868a97f9d5
1 changed files with 192 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
frontend/src/sections/devices/cwmp/devices-wifi.js
View File

@ -80,9 +80,9 @@ export const DevicesWiFi = () => {
.catch(error => console.log('error', error)); .catch(error => console.log('error', error));
}; };
useEffect(()=>{ useEffect(() => {
fetchWifiData() fetchWifiData()
},[]) }, [])
return (<div> return (<div>
<Stack <Stack
@ -99,24 +99,24 @@ export const DevicesWiFi = () => {
title={item.name.value} title={item.name.value}
avatar={ avatar={
<SvgIcon> <SvgIcon>
<GlobeAltIcon/> <GlobeAltIcon />
</SvgIcon> </SvgIcon>
} }
/> />
<CardContent> <CardContent>
<Stack spacing={3}> <Stack spacing={3}>
{ item.enable.value != null && {item.enable.value != null &&
<FormControlLabel control={<Checkbox defaultChecked={item.enable.value == 1 ? true : false} <FormControlLabel control={<Checkbox defaultChecked={item.enable.value == 1 ? true : false}
onChange={(e) => { onChange={(e) => {
let enable = item.enable.value == 1 ? "0" : "1" let enable = item.enable.value == 1 ? "0" : "1"
console.log(enable) console.log(enable)
applyContent[index].hasChanges = true applyContent[index].hasChanges = true
applyContent[index].enable = { applyContent[index].enable = {
value : enable value: enable
} }
setApplyContent([...applyContent]) setApplyContent([...applyContent])
item.enable.value = enable item.enable.value = enable
}}/>} }} />}
label="Enabled" />} label="Enabled" />}
{item.ssid.value != null && <TextField {item.ssid.value != null && <TextField
fullWidth fullWidth
@ -126,7 +126,7 @@ export const DevicesWiFi = () => {
onChange={(e) => { onChange={(e) => {
applyContent[index].hasChanges = true applyContent[index].hasChanges = true
applyContent[index].ssid = { applyContent[index].ssid = {
value : e.target.value value: e.target.value
} }
setApplyContent([...applyContent]) setApplyContent([...applyContent])
item.ssid.value = e.target.value item.ssid.value = e.target.value
@ -148,17 +148,41 @@ export const DevicesWiFi = () => {
onChange={(e) => { onChange={(e) => {
if (e.target.value.length >= 8) { if (e.target.value.length >= 8) {
applyContent[index].hasChanges = true applyContent[index].hasChanges = true
}else{ } else {
applyContent[index].hasChanges = false applyContent[index].hasChanges = false
} }
applyContent[index].password = { applyContent[index].password = {
value : e.target.value value: e.target.value
} }
setApplyContent([...applyContent]) setApplyContent([...applyContent])
item.password.value = e.target.value item.password.value = e.target.value
console.log("applyContent: ", applyContent) console.log("applyContent: ", applyContent)
}} }}
/>} />}
{item.channel?.value != null && item.possibleChannels?.value != null &&
<FormControl variant='filled'>
<InputLabel id="channel">Channel</InputLabel>
<Select
fullWidth
defaultValue={item.channel.value}
value={item.channel.value}
onChange={(e) => {
applyContent[index].hasChanges = true
applyContent[index].channel = {
value: e.target.value
}
setApplyContent([...applyContent])
item.channel.value = e.target.value
}}
label="Channel"
>
{item.possibleChannels.value.map((channel, index) => {
return (
<MenuItem key={index} value={channel}>{channel}</MenuItem>)
})}
</Select>
</FormControl>
}
{item.standard.value != null && {item.standard.value != null &&
<TextField <TextField
fullWidth fullWidth
@ -168,20 +192,20 @@ export const DevicesWiFi = () => {
onChange={(e) => { onChange={(e) => {
applyContent[index].hasChanges = true applyContent[index].hasChanges = true
applyContent[index].standard = { applyContent[index].standard = {
value : e.target.value value: e.target.value
} }
setApplyContent([...applyContent]) setApplyContent([...applyContent])
item.standard.value = e.target.value item.standard.value = e.target.value
}} }}
/>} />}
</Stack> </Stack>
<CardActions sx={{display:"flex", justifyContent:"flex-end"}}> <CardActions sx={{ display: "flex", justifyContent: "flex-end" }}>
<Button <Button
variant="contained" variant="contained"
disabled={!applyContent[index].hasChanges} disabled={!applyContent[index].hasChanges}
endIcon={<SvgIcon><Check /></SvgIcon>} endIcon={<SvgIcon><Check /></SvgIcon>}
onClick={ onClick={
()=>{ () => {
setApply(true) setApply(true)
var myHeaders = new Headers(); var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json"); myHeaders.append("Content-Type", "application/json");
@ -221,7 +245,7 @@ export const DevicesWiFi = () => {
.catch(error => console.log('error', error)); .catch(error => console.log('error', error));
} }
} }
sx={{mt:'25px', mb:'-15px'}} sx={{ mt: '25px', mb: '-15px' }}
> >
Apply Apply
</Button> </Button>
@ -229,7 +253,7 @@ export const DevicesWiFi = () => {
</CardContent> </CardContent>
</Card> </Card>
) )
})): })) :
<CircularProgress /> <CircularProgress />
} }
</Stack> </Stack>
@ -241,7 +265,7 @@ export const DevicesWiFi = () => {
</Backdrop> </Backdrop>
<Dialog open={errorModal && errorModalText != ""} <Dialog open={errorModal && errorModalText != ""}
slotProps={{ backdrop: { style: { backgroundColor: 'rgba(255,255,255,0.5)' } } }} slotProps={{ backdrop: { style: { backgroundColor: 'rgba(255,255,255,0.5)' } } }}
fullWidth={ true } fullWidth={true}
maxWidth={"md"} maxWidth={"md"}
scroll={"paper"} scroll={"paper"}
aria-labelledby="scroll-dialog-title" aria-labelledby="scroll-dialog-title"
@ -251,27 +275,27 @@ export const DevicesWiFi = () => {
<Box display="flex" alignItems="center"> <Box display="flex" alignItems="center">
<Box flexGrow={1} >Response</Box> <Box flexGrow={1} >Response</Box>
<Box> <Box>
<IconButton onClick={()=>{ <IconButton onClick={() => {
setErrorModalText("") setErrorModalText("")
setErrorModal(false) setErrorModal(false)
}}> }}>
<SvgIcon <SvgIcon
> >
< XMarkIcon/> < XMarkIcon />
</SvgIcon> </SvgIcon>
</IconButton> </IconButton>
</Box> </Box>
</Box> </Box>
</DialogTitle> </DialogTitle>
<DialogContent dividers={scroll === 'paper'}> <DialogContent dividers={scroll === 'paper'}>
<DialogContentText id="scroll-dialog-description"tabIndex={-1}> <DialogContentText id="scroll-dialog-description" tabIndex={-1}>
<pre style={{color: 'black'}}> <pre style={{ color: 'black' }}>
{errorModalText} {errorModalText}
</pre> </pre>
</DialogContentText> </DialogContentText>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button onClick={()=>{ <Button onClick={() => {
setErrorModalText("") setErrorModalText("")
setErrorModal(false) setErrorModal(false)
}}>OK</Button> }}>OK</Button>