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