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

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

@ -1,31 +1,31 @@
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { import {
Button, Button,
Card, Card,
CardActions, CardActions,
CardContent, CardContent,
CardHeader, CardHeader,
Divider, Divider,
Stack, Stack,
TextField, TextField,
InputLabel, InputLabel,
MenuItem, MenuItem,
Select, Select,
FormControl, FormControl,
SvgIcon, SvgIcon,
Dialog, Dialog,
DialogTitle, DialogTitle,
DialogContent, DialogContent,
DialogContentText, DialogContentText,
DialogActions, DialogActions,
Box, Box,
IconButton, IconButton,
Icon, Icon,
SnackbarContent, SnackbarContent,
Snackbar, Snackbar,
Checkbox, Checkbox,
FormControlLabel, FormControlLabel,
useTheme, useTheme,
} from '@mui/material'; } from '@mui/material';
import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon'; import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
import Check from '@heroicons/react/24/outline/CheckIcon'; import Check from '@heroicons/react/24/outline/CheckIcon';
@ -52,44 +52,44 @@ export const DevicesWiFi = () => {
var myHeaders = new Headers(); var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json"); myHeaders.append("Content-Type", "application/json");
myHeaders.append("Authorization", localStorage.getItem("token")); myHeaders.append("Authorization", localStorage.getItem("token"));
var requestOptions = { var requestOptions = {
method: 'GET', method: 'GET',
headers: myHeaders, headers: myHeaders,
redirect: 'follow' redirect: 'follow'
}; };
fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}/api/device/${router.query.id[0]}/wifi`, requestOptions) fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}/api/device/${router.query.id[0]}/wifi`, requestOptions)
.then(response => { .then(response => {
if (response.status === 401) { if (response.status === 401) {
router.push("/auth/login") router.push("/auth/login")
}
return response.json()
})
.then(result => {
console.log("wifi content", result)
result.map((item) => {
let contentToApply = {
hasChanges: false,
path: item.path,
} }
setApplyContent(oldValue => [...oldValue, contentToApply]) return response.json()
}) })
setContent(result) .then(result => {
}) console.log("wifi content", result)
.catch(error => console.log('error', error)); result.map((item) => {
let contentToApply = {
hasChanges: false,
path: item.path,
}
setApplyContent(oldValue => [...oldValue, contentToApply])
})
setContent(result)
})
.catch(error => console.log('error', error));
}; };
useEffect(()=>{ useEffect(() => {
fetchWifiData() fetchWifiData()
},[]) }, [])
return (<div> return (<div>
<Stack <Stack
direction="row" direction="row"
spacing={2} spacing={2}
justifyContent="center" justifyContent="center"
alignItems="center" alignItems="center"
> >
{content.length > 1 ? {content.length > 1 ?
(content.map((item, index) => { (content.map((item, index) => {
@ -99,25 +99,25 @@ 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
label="SSID" label="SSID"
@ -126,67 +126,91 @@ 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
}} }}
/>} />}
{item.securityCapabilities && {item.securityCapabilities &&
<TextField <TextField
fullWidth fullWidth
label="Encryption" label="Encryption"
value={""} value={""}
/>} />}
{item.password.value != null && {item.password.value != null &&
<TextField <TextField
fullWidth fullWidth
type="password" type="password"
label="Password" label="Password"
disabled={!item.password.writable} disabled={!item.password.writable}
value={item.password.value} value={item.password.value}
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
label="Standard" label="Standard"
disabled={!item.standard.writable} disabled={!item.standard.writable}
value={item.standard.value} value={item.standard.value}
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");
myHeaders.append("Authorization", localStorage.getItem("token")); myHeaders.append("Authorization", localStorage.getItem("token"));
delete applyContent[index].hasChanges delete applyContent[index].hasChanges
let contentToApply = [applyContent[index]] let contentToApply = [applyContent[index]]
console.log("contentToApply: ", contentToApply) console.log("contentToApply: ", contentToApply)
@ -198,38 +222,38 @@ export const DevicesWiFi = () => {
redirect: 'follow' redirect: 'follow'
}; };
fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}/api/device/${router.query.id[0]}/wifi`, requestOptions) fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT || ""}/api/device/${router.query.id[0]}/wifi`, requestOptions)
.then(response => { .then(response => {
if (response.status === 401) { if (response.status === 401) {
router.push("/auth/login") router.push("/auth/login")
} }
if (response.status == 500) { if (response.status == 500) {
setErrorModal(true) setErrorModal(true)
} }
return response.json() return response.json()
}) })
.then(result => { .then(result => {
if (errorModal) { if (errorModal) {
setErrorModalText(result) setErrorModalText(result)
} }
setApply(false) setApply(false)
if (result == 1) { if (result == 1) {
setErrorModalText("This change could not be applied, or It's gonna be applied later on") setErrorModalText("This change could not be applied, or It's gonna be applied later on")
setErrorModal(true) setErrorModal(true)
//TODO: fetch wifi data again //TODO: fetch wifi data again
} }
}) })
.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>
</CardActions> </CardActions>
</CardContent> </CardContent>
</Card> </Card>
) )
})): })) :
<CircularProgress /> <CircularProgress />
} }
</Stack> </Stack>
@ -239,44 +263,44 @@ export const DevicesWiFi = () => {
> >
<CircularProgress color="inherit" /> <CircularProgress color="inherit" />
</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"
aria-describedby="scroll-dialog-description" aria-describedby="scroll-dialog-description"
> >
<DialogTitle id="scroll-dialog-title"> <DialogTitle id="scroll-dialog-title">
<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>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</div> </div>
); );
}; };