feat(frontend): wifi screen for cwmp devices
This commit is contained in:
leandrofars
parent
fa047e5e51
commit
c7ce3f1c95
|
|
@ -21,133 +21,31 @@ import {
|
|||
Box,
|
||||
IconButton,
|
||||
Icon,
|
||||
SnackbarContent,
|
||||
Snackbar,
|
||||
Checkbox,
|
||||
FormControlLabel
|
||||
FormControlLabel,
|
||||
useTheme,
|
||||
} from '@mui/material';
|
||||
import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
|
||||
import PaperAirplane from '@heroicons/react/24/solid/PaperAirplaneIcon';
|
||||
import Check from '@heroicons/react/24/outline/CheckIcon'
|
||||
import Check from '@heroicons/react/24/outline/CheckIcon';
|
||||
//import ExclamationTriangleIcon from '@heroicons/react/24/solid/ExclamationTriangleIcon';
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
import Backdrop from '@mui/material/Backdrop';
|
||||
import { useRouter } from 'next/router';
|
||||
import GlobeAltIcon from '@heroicons/react/24/outline/GlobeAltIcon';
|
||||
|
||||
|
||||
export const DevicesWiFi = () => {
|
||||
|
||||
const theme = useTheme();
|
||||
const router = useRouter()
|
||||
|
||||
const [content, setContent] = useState(
|
||||
[
|
||||
{
|
||||
"path": "InternetGatewayDevice.LANDevice.1.WLANConfiguration.1.",
|
||||
"name": {
|
||||
"writable": false,
|
||||
"value": "wl1"
|
||||
},
|
||||
"ssid": {
|
||||
"writable": true,
|
||||
"value": "HUAWEI-TEST-1"
|
||||
},
|
||||
"password": {
|
||||
"writable": false,
|
||||
"value": ""
|
||||
},
|
||||
"security": {
|
||||
"writable": false,
|
||||
"value": "b/g/n"
|
||||
},
|
||||
"enable": {
|
||||
"writable": true,
|
||||
"value": "0"
|
||||
},
|
||||
"status": {
|
||||
"writable": false,
|
||||
"value": "Disabled"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "InternetGatewayDevice.LANDevice.1.WLANConfiguration.2.",
|
||||
"name": {
|
||||
"writable": false,
|
||||
"value": "wl0"
|
||||
},
|
||||
"ssid": {
|
||||
"writable": true,
|
||||
"value": "HUAWEI-TEST-1"
|
||||
},
|
||||
"password": {
|
||||
"writable": false,
|
||||
"value": ""
|
||||
},
|
||||
"security": {
|
||||
"writable": false,
|
||||
"value": "a/n/ac/ax"
|
||||
},
|
||||
"enable": {
|
||||
"writable": true,
|
||||
"value": "1"
|
||||
},
|
||||
"status": {
|
||||
"writable": false,
|
||||
"value": "Up"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "InternetGatewayDevice.LANDevice.2.WLANConfiguration.1.",
|
||||
"name": {
|
||||
"writable": false,
|
||||
"value": "wl1.1"
|
||||
},
|
||||
"ssid": {
|
||||
"writable": true,
|
||||
"value": "HUAWEI-1BLSP6_Guest"
|
||||
},
|
||||
"password": {
|
||||
"writable": false,
|
||||
"value": ""
|
||||
},
|
||||
"security": {
|
||||
"writable": false,
|
||||
"value": "b/g/n"
|
||||
},
|
||||
"enable": {
|
||||
"writable": true,
|
||||
"value": "0"
|
||||
},
|
||||
"status": {
|
||||
"writable": false,
|
||||
"value": "Disabled"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "InternetGatewayDevice.LANDevice.2.WLANConfiguration.2.",
|
||||
"name": {
|
||||
"writable": false,
|
||||
"value": "wl0.1"
|
||||
},
|
||||
"ssid": {
|
||||
"writable": true,
|
||||
"value": "Mobile WiFi"
|
||||
},
|
||||
"password": {
|
||||
"writable": false,
|
||||
"value": ""
|
||||
},
|
||||
"security": {
|
||||
"writable": false,
|
||||
"value": "a/n/ac/ax"
|
||||
},
|
||||
"enable": {
|
||||
"writable": true,
|
||||
"value": "0"
|
||||
},
|
||||
"status": {
|
||||
"writable": false,
|
||||
"value": "Disabled"
|
||||
}
|
||||
}
|
||||
])
|
||||
const [content, setContent] = useState([])
|
||||
const [applyContent, setApplyContent] = useState([])
|
||||
const [apply, setApply] = useState(false)
|
||||
|
||||
const [errorModal, setErrorModal] = useState(false)
|
||||
const [errorModalText, setErrorModalText] = useState("")
|
||||
|
||||
const fetchWifiData = async () => {
|
||||
|
||||
|
|
@ -162,33 +60,39 @@ export const DevicesWiFi = () => {
|
|||
};
|
||||
|
||||
fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT}/device/${router.query.id[0]}/wifi`, requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(response => {
|
||||
if (response.status === 401) {
|
||||
router.push("/auth/login")
|
||||
}
|
||||
return response.json()
|
||||
})
|
||||
.then(result => {
|
||||
if (result.status === 401){
|
||||
router.push("/auth/login")
|
||||
}
|
||||
if (result.status === 404){
|
||||
//TODO: set device as offline
|
||||
return
|
||||
}
|
||||
stepContentClasses(result)
|
||||
console.log("wifi content", result)
|
||||
result.map((item) => {
|
||||
let contentToApply = {
|
||||
hasChanges: false,
|
||||
path: item.path,
|
||||
}
|
||||
setApplyContent(oldValue => [...oldValue, contentToApply])
|
||||
})
|
||||
setContent(result)
|
||||
})
|
||||
.catch(error => console.log('error', error));
|
||||
};
|
||||
|
||||
useEffect(()=>{
|
||||
// fetchWifiData()
|
||||
fetchWifiData()
|
||||
},[])
|
||||
|
||||
return ( content &&
|
||||
return (<div>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
>
|
||||
{
|
||||
content.map((item, index) => {
|
||||
{content.length > 1 ?
|
||||
(content.map((item, index) => {
|
||||
return (
|
||||
<Card key={index}>
|
||||
<CardHeader
|
||||
|
|
@ -201,31 +105,99 @@ export const DevicesWiFi = () => {
|
|||
/>
|
||||
<CardContent>
|
||||
<Stack spacing={3}>
|
||||
<FormControlLabel control={<Checkbox defaultChecked />} label="Enabled" />
|
||||
<TextField
|
||||
{ item.enable.value != null &&
|
||||
<FormControlLabel control={<Checkbox defaultChecked={item.enable.value == 1 ? true : false}
|
||||
onChange={(e) => {
|
||||
let enable = e.target.value == 1 ? "1" : "0"
|
||||
applyContent[index].hasChanges = true
|
||||
applyContent[index].enable = {
|
||||
value : enable
|
||||
}
|
||||
setApplyContent([...applyContent])
|
||||
item.enable.value = enable
|
||||
}}/>}
|
||||
label="Enabled" />}
|
||||
{item.ssid.value != null && <TextField
|
||||
fullWidth
|
||||
label="SSID"
|
||||
value={item.ssid.value}
|
||||
variant="outlined"
|
||||
/>
|
||||
disabled={!item.ssid.writable}
|
||||
onChange={(e) => {
|
||||
applyContent[index].hasChanges = true
|
||||
applyContent[index].ssid = {
|
||||
value : e.target.value
|
||||
}
|
||||
setApplyContent([...applyContent])
|
||||
item.ssid.value = e.target.value
|
||||
}}
|
||||
/>}
|
||||
{item.securityCapabilities &&
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Encryption"
|
||||
value={""}
|
||||
variant="outlined"
|
||||
/>
|
||||
/>}
|
||||
{item.password.value != null &&
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Key"
|
||||
label="Password"
|
||||
disabled={!item.password.writable}
|
||||
value={item.password.value}
|
||||
variant="outlined"
|
||||
/>
|
||||
/>}
|
||||
{item.standard.value != null &&
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Standard"
|
||||
disabled={!item.standard.writable}
|
||||
value={item.standard.value}
|
||||
/>}
|
||||
</Stack>
|
||||
<CardActions sx={{display:"flex", justifyContent:"flex-end"}}>
|
||||
<Button
|
||||
variant="contained"
|
||||
disabled={!applyContent[index].hasChanges}
|
||||
endIcon={<SvgIcon><Check /></SvgIcon>}
|
||||
//onClick={}
|
||||
onClick={
|
||||
()=>{
|
||||
setApply(true)
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
myHeaders.append("Authorization", localStorage.getItem("token"));
|
||||
|
||||
delete applyContent[index].hasChanges
|
||||
let contentToApply = [applyContent[index]]
|
||||
console.log("contentToApply: ", contentToApply)
|
||||
var data = JSON.stringify(contentToApply);
|
||||
var requestOptions = {
|
||||
method: 'PUT',
|
||||
headers: myHeaders,
|
||||
body: data,
|
||||
redirect: 'follow'
|
||||
};
|
||||
fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT}/device/${router.query.id[0]}/wifi`, requestOptions)
|
||||
.then(response => {
|
||||
if (response.status === 401) {
|
||||
router.push("/auth/login")
|
||||
}
|
||||
if (response.status == 500) {
|
||||
setErrorModal(true)
|
||||
}
|
||||
return response.json()
|
||||
})
|
||||
.then(result => {
|
||||
if (errorModal) {
|
||||
setErrorModalText(result)
|
||||
}
|
||||
setApply(false)
|
||||
if (result == 1) {
|
||||
setErrorModalText("This change could not be applied, or It's gonna be applied later on")
|
||||
setErrorModal(true)
|
||||
//TODO: fetch wifi data again
|
||||
}
|
||||
})
|
||||
.catch(error => console.log('error', error));
|
||||
}
|
||||
}
|
||||
sx={{mt:'25px', mb:'-15px'}}
|
||||
>
|
||||
Apply
|
||||
|
|
@ -234,7 +206,8 @@ export const DevicesWiFi = () => {
|
|||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})
|
||||
})):
|
||||
<CircularProgress />
|
||||
}
|
||||
{/* <Card>
|
||||
<CardHeader
|
||||
|
|
@ -252,19 +225,16 @@ export const DevicesWiFi = () => {
|
|||
fullWidth
|
||||
label="SSID"
|
||||
value="wlan0"
|
||||
variant="outlined"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Encryption"
|
||||
value="WPA2-PSK"
|
||||
variant="outlined"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Key"
|
||||
value="password"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
|
|
@ -285,9 +255,7 @@ export const DevicesWiFi = () => {
|
|||
fullWidth
|
||||
label="SSID"
|
||||
value="wlan0"
|
||||
variant="outlined"
|
||||
/>
|
||||
<FormControl variant="outlined" sx={{ m: 1, minWidth: 120 }}>
|
||||
<InputLabel id="demo-simple-select-standard-label">Security</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-standard-label"
|
||||
|
|
@ -305,7 +273,6 @@ export const DevicesWiFi = () => {
|
|||
fullWidth
|
||||
label="Key"
|
||||
value="password"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
<CardActions sx={{display:"flex", justifyContent:"flex-end"}}>
|
||||
|
|
@ -320,7 +287,74 @@ export const DevicesWiFi = () => {
|
|||
</CardActions>
|
||||
</CardContent>
|
||||
</Card> */}
|
||||
{/* <Snackbar
|
||||
open={errorToApplyContent}
|
||||
TransitionComponent={"Slide"}
|
||||
color="red"
|
||||
onClose={() => setErrorToApplyContent(false)}
|
||||
autoHideDuration={1200}
|
||||
>
|
||||
<SnackbarContent style={{
|
||||
backgroundColor:theme.palette.warning.main,
|
||||
}}
|
||||
message={
|
||||
<div style={{display:"flex"}}>
|
||||
<SvgIcon>
|
||||
<ExclamationTriangleIcon />
|
||||
</SvgIcon>
|
||||
<div style={{margin: "5px"}}></div>
|
||||
<span id="client-snackbar">
|
||||
No changes to apply
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</Snackbar> */}
|
||||
</Stack>
|
||||
|
||||
<Backdrop
|
||||
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
|
||||
open={apply}
|
||||
>
|
||||
<CircularProgress color="inherit" />
|
||||
</Backdrop>
|
||||
<Dialog open={errorModal && errorModalText != ""}
|
||||
slotProps={{ backdrop: { style: { backgroundColor: 'rgba(255,255,255,0.5)' } } }}
|
||||
fullWidth={ true }
|
||||
maxWidth={"md"}
|
||||
scroll={"paper"}
|
||||
aria-labelledby="scroll-dialog-title"
|
||||
aria-describedby="scroll-dialog-description"
|
||||
>
|
||||
<DialogTitle id="scroll-dialog-title">
|
||||
<Box display="flex" alignItems="center">
|
||||
<Box flexGrow={1} >Response</Box>
|
||||
<Box>
|
||||
<IconButton onClick={()=>{
|
||||
setErrorModalText("")
|
||||
setErrorModal(false)
|
||||
}}>
|
||||
<SvgIcon
|
||||
>
|
||||
< XMarkIcon/>
|
||||
</SvgIcon>
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogTitle>
|
||||
<DialogContent dividers={scroll === 'paper'}>
|
||||
<DialogContentText id="scroll-dialog-description"tabIndex={-1}>
|
||||
<pre style={{color: 'black'}}>
|
||||
{errorModalText}
|
||||
</pre>
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={()=>{
|
||||
setErrorModalText("")
|
||||
setErrorModal(false)
|
||||
}}>OK</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user