feat(frontend): init cwmp and usp devices segregation
This commit is contained in:
leandrofars
parent
cadda35467
commit
c5a1c92cc4
81
frontend/src/pages/devices/cwmp/[...id].js
Normal file
81
frontend/src/pages/devices/cwmp/[...id].js
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
import Head from 'next/head';
|
||||
import { Box, Stack, Typography, Container, Unstable_Grid2 as Grid,
|
||||
Tab,
|
||||
Tabs,
|
||||
SvgIcon } from '@mui/material';
|
||||
import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout';
|
||||
import { useRouter } from 'next/router';
|
||||
import { DevicesRPC } from 'src/sections/devices/devices-rpc';
|
||||
import { DevicesDiscovery } from 'src/sections/devices/devices-discovery';
|
||||
import EnvelopeIcon from '@heroicons/react/24/outline/EnvelopeIcon';
|
||||
import MagnifyingGlassIcon from '@heroicons/react/24/solid/MagnifyingGlassIcon';
|
||||
import WifiIcon from '@heroicons/react/24/solid/WifiIcon';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { DevicesWiFi } from 'src/sections/devices/cwmp/devices-wifi';
|
||||
|
||||
const Page = () => {
|
||||
const router = useRouter()
|
||||
|
||||
const deviceID = router.query.id[0]
|
||||
const section = router.query.id[1]
|
||||
|
||||
const sectionHandler = () => {
|
||||
switch(section){
|
||||
case "msg":
|
||||
return <DevicesRPC/>
|
||||
case "wifi":
|
||||
return <DevicesWiFi/>
|
||||
default:
|
||||
return <p>Hello World</p>
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(()=>{
|
||||
console.log("deviceid:",deviceID)
|
||||
})
|
||||
|
||||
return(
|
||||
<>
|
||||
<Head>
|
||||
<title>
|
||||
Oktopus | TR-369
|
||||
</title>
|
||||
</Head>
|
||||
<Box
|
||||
component="main"
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
py: 0,
|
||||
}}
|
||||
>
|
||||
<Container maxWidth="lg" >
|
||||
<Stack spacing={3} >
|
||||
<Box sx={{
|
||||
display:'flex',
|
||||
justifyContent:'center'
|
||||
}}
|
||||
mb={3}>
|
||||
<Tabs value={router.query.id[1]} aria-label="icon label tabs example">
|
||||
<Tab icon={<SvgIcon><WifiIcon/></SvgIcon>} iconPosition={"end"} label="Wi-Fi" onClick={()=>{router.push(`/devices/cwmp/${deviceID}/wifi`)}} value={"wifi"}/>
|
||||
{/* <Tab value={"discovery"} onClick={()=>{router.push(`/devices/cwmp/${deviceID}/discovery`)}} icon={<SvgIcon><MagnifyingGlassIcon/></SvgIcon>} iconPosition={"end"} label="Discover Parameters" /> */}
|
||||
<Tab value={"msg"} onClick={()=>{router.push(`/devices/cwmp/${deviceID}/msg`)}} icon={<SvgIcon><EnvelopeIcon/></SvgIcon>} iconPosition={"end"} label="Remote Messages" />
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
{
|
||||
sectionHandler()
|
||||
}
|
||||
</Stack>
|
||||
</Container>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Page.getLayout = (page) => (
|
||||
<DashboardLayout>
|
||||
{page}
|
||||
</DashboardLayout>
|
||||
);
|
||||
|
||||
export default Page;
|
||||
|
|
@ -11,6 +11,7 @@ import EnvelopeIcon from '@heroicons/react/24/outline/EnvelopeIcon';
|
|||
import MagnifyingGlassIcon from '@heroicons/react/24/solid/MagnifyingGlassIcon';
|
||||
import WifiIcon from '@heroicons/react/24/solid/WifiIcon';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { DevicesWiFi } from 'src/sections/devices/usp/devices-wifi';
|
||||
|
||||
const Page = () => {
|
||||
const router = useRouter()
|
||||
|
|
@ -24,6 +25,8 @@ const Page = () => {
|
|||
return <DevicesRPC/>
|
||||
case "discovery":
|
||||
return <DevicesDiscovery/>
|
||||
case "wifi":
|
||||
return <DevicesWiFi/>
|
||||
default:
|
||||
return <p>Hello World</p>
|
||||
}
|
||||
|
|
@ -55,9 +58,9 @@ const Page = () => {
|
|||
}}
|
||||
mb={3}>
|
||||
<Tabs value={router.query.id[1]} aria-label="icon label tabs example">
|
||||
<Tab icon={<SvgIcon><WifiIcon/></SvgIcon>} iconPosition={"end"} label="Wi-Fi" />
|
||||
<Tab value={"discovery"} onClick={()=>{router.push(`/devices/${deviceID}/discovery`)}} icon={<SvgIcon><MagnifyingGlassIcon/></SvgIcon>} iconPosition={"end"} label="Discover Parameters" />
|
||||
<Tab value={"msg"} onClick={()=>{router.push(`/devices/${deviceID}/msg`)}} icon={<SvgIcon><EnvelopeIcon/></SvgIcon>} iconPosition={"end"} label="Remote Messages" />
|
||||
<Tab icon={<SvgIcon><WifiIcon/></SvgIcon>} iconPosition={"end"} label="Wi-Fi" onClick={()=>{router.push(`/devices/usp/${deviceID}/wifi`)}} value={"wifi"}/>
|
||||
<Tab value={"discovery"} onClick={()=>{router.push(`/devices/usp/${deviceID}/discovery`)}} icon={<SvgIcon><MagnifyingGlassIcon/></SvgIcon>} iconPosition={"end"} label="Discover Parameters" />
|
||||
<Tab value={"msg"} onClick={()=>{router.push(`/devices/usp/${deviceID}/msg`)}} icon={<SvgIcon><EnvelopeIcon/></SvgIcon>} iconPosition={"end"} label="Remote Messages" />
|
||||
</Tabs>
|
||||
</Box>
|
||||
|
||||
326
frontend/src/sections/devices/cwmp/devices-wifi.js
Normal file
326
frontend/src/sections/devices/cwmp/devices-wifi.js
Normal file
|
|
@ -0,0 +1,326 @@
|
|||
import { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardActions,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
Divider,
|
||||
Stack,
|
||||
TextField,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
FormControl,
|
||||
SvgIcon,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Box,
|
||||
IconButton,
|
||||
Icon,
|
||||
Checkbox,
|
||||
FormControlLabel
|
||||
} 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 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 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 fetchWifiData = async () => {
|
||||
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
myHeaders.append("Authorization", localStorage.getItem("token"));
|
||||
|
||||
var requestOptions = {
|
||||
method: 'GET',
|
||||
headers: myHeaders,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch(`${process.env.NEXT_PUBLIC_REST_ENDPOINT}/device/${router.query.id[0]}/wifi`, requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => {
|
||||
if (result.status === 401){
|
||||
router.push("/auth/login")
|
||||
}
|
||||
if (result.status === 404){
|
||||
//TODO: set device as offline
|
||||
return
|
||||
}
|
||||
stepContentClasses(result)
|
||||
})
|
||||
.catch(error => console.log('error', error));
|
||||
};
|
||||
|
||||
useEffect(()=>{
|
||||
// fetchWifiData()
|
||||
},[])
|
||||
|
||||
return ( content &&
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
>
|
||||
{
|
||||
content.map((item, index) => {
|
||||
return (
|
||||
<Card key={index}>
|
||||
<CardHeader
|
||||
title={item.name.value}
|
||||
avatar={
|
||||
<SvgIcon>
|
||||
<GlobeAltIcon/>
|
||||
</SvgIcon>
|
||||
}
|
||||
/>
|
||||
<CardContent>
|
||||
<Stack spacing={3}>
|
||||
<FormControlLabel control={<Checkbox defaultChecked />} label="Enabled" />
|
||||
<TextField
|
||||
fullWidth
|
||||
label="SSID"
|
||||
value={item.ssid.value}
|
||||
variant="outlined"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Encryption"
|
||||
value={""}
|
||||
variant="outlined"
|
||||
/>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Key"
|
||||
value={item.password.value}
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
<CardActions sx={{display:"flex", justifyContent:"flex-end"}}>
|
||||
<Button
|
||||
variant="contained"
|
||||
endIcon={<SvgIcon><Check /></SvgIcon>}
|
||||
//onClick={}
|
||||
sx={{mt:'25px', mb:'-15px'}}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</CardActions>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
})
|
||||
}
|
||||
{/* <Card>
|
||||
<CardHeader
|
||||
title="2.4GHz"
|
||||
avatar={
|
||||
<SvgIcon>
|
||||
<GlobeAltIcon/>
|
||||
</SvgIcon>
|
||||
}
|
||||
/>
|
||||
<CardContent>
|
||||
<Stack spacing={3}>
|
||||
<FormControlLabel control={<Checkbox defaultChecked />} label="Enabled" />
|
||||
<TextField
|
||||
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>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="5GHz"
|
||||
avatar={
|
||||
<SvgIcon>
|
||||
<GlobeAltIcon/>
|
||||
</SvgIcon>
|
||||
}
|
||||
/>
|
||||
<CardContent>
|
||||
<Stack spacing={4}>
|
||||
<FormControlLabel control={<Checkbox defaultChecked />} label="Enabled" />
|
||||
<TextField
|
||||
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"
|
||||
id="demo-simple-select-standard"
|
||||
value={"WPA2-PSK"}
|
||||
//onChange={handleChange}
|
||||
label="Security"
|
||||
>
|
||||
<MenuItem value={30}>Open</MenuItem>
|
||||
<MenuItem value={"WPA2-PSK"}>WPA2-PSKnp</MenuItem>
|
||||
<MenuItem value={20}>WPA3</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Key"
|
||||
value="password"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
<CardActions sx={{display:"flex", justifyContent:"flex-end"}}>
|
||||
<Button
|
||||
variant="contained"
|
||||
endIcon={<SvgIcon><Check /></SvgIcon>}
|
||||
// onClick={}
|
||||
sx={{mt:'25px', mb:'-15px'}}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</CardActions>
|
||||
</CardContent>
|
||||
</Card> */}
|
||||
</Stack>
|
||||
|
||||
);
|
||||
};
|
||||
132
frontend/src/sections/devices/usp/devices-wifi.js
Normal file
132
frontend/src/sections/devices/usp/devices-wifi.js
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
import { useCallback, useEffect, useState } from 'react';
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
CardActions,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
Divider,
|
||||
Stack,
|
||||
TextField,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
FormControl,
|
||||
SvgIcon,
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogActions,
|
||||
Box,
|
||||
IconButton,
|
||||
Icon,
|
||||
Checkbox,
|
||||
FormControlLabel
|
||||
} 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 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 = () => {
|
||||
|
||||
return (
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={2}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
>
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="2.4GHz"
|
||||
avatar={
|
||||
<SvgIcon>
|
||||
<GlobeAltIcon/>
|
||||
</SvgIcon>
|
||||
}
|
||||
/>
|
||||
<CardContent>
|
||||
<Stack spacing={3}>
|
||||
<FormControlLabel control={<Checkbox defaultChecked />} label="Enabled" />
|
||||
<TextField
|
||||
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>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="5GHz"
|
||||
avatar={
|
||||
<SvgIcon>
|
||||
<GlobeAltIcon/>
|
||||
</SvgIcon>
|
||||
}
|
||||
/>
|
||||
<CardContent>
|
||||
<Stack spacing={4}>
|
||||
<FormControlLabel control={<Checkbox defaultChecked />} label="Enabled" />
|
||||
<TextField
|
||||
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"
|
||||
id="demo-simple-select-standard"
|
||||
value={"WPA2-PSK"}
|
||||
//onChange={handleChange}
|
||||
label="Security"
|
||||
>
|
||||
<MenuItem value={30}>Open</MenuItem>
|
||||
<MenuItem value={"WPA2-PSK"}>WPA2-PSKnp</MenuItem>
|
||||
<MenuItem value={20}>WPA3</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<TextField
|
||||
fullWidth
|
||||
label="Key"
|
||||
value="password"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
<CardActions sx={{display:"flex", justifyContent:"flex-end"}}>
|
||||
<Button
|
||||
variant="contained"
|
||||
endIcon={<SvgIcon><Check /></SvgIcon>}
|
||||
// onClick={}
|
||||
sx={{mt:'25px', mb:'-15px'}}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</CardActions>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Stack>
|
||||
|
||||
);
|
||||
};
|
||||
|
|
@ -38,6 +38,14 @@ const status = (s)=>{
|
|||
}
|
||||
}
|
||||
|
||||
const getDeviceProtocol = (order) => {
|
||||
if (order.Mqtt == 0 && order.Websockets == 0 && order.Stomp == 0) {
|
||||
return "cwmp"
|
||||
}else {
|
||||
return "usp"
|
||||
}
|
||||
}
|
||||
|
||||
export const OverviewLatestOrders = (props) => {
|
||||
const { orders = [], sx } = props;
|
||||
|
||||
|
|
@ -97,17 +105,19 @@ export const OverviewLatestOrders = (props) => {
|
|||
</SeverityPill>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{ order.Mqtt == 0 && order.Websockets == 0 && order.Stomp == 0 ? <span></span>: <Button
|
||||
{order.Status == 2 &&
|
||||
<Button
|
||||
onClick={()=>{
|
||||
router.push("devices/"+order.SN+"/discovery")
|
||||
}
|
||||
}>
|
||||
router.push("devices/"+ getDeviceProtocol(order) +"/"+order.SN+"/wifi")
|
||||
}}
|
||||
>
|
||||
<SvgIcon
|
||||
fontSize="small"
|
||||
sx={{cursor: order.Status == 2 && 'pointer'}}
|
||||
sx={{cursor: 'pointer'}}
|
||||
>
|
||||
<ArrowTopRightOnSquareIcon />
|
||||
</SvgIcon></Button>}
|
||||
</SvgIcon>
|
||||
</Button>}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user