feat: site survey page

frontend/src/pages/devices/cwmp/[...id].js

@@ -2,16 +2,24 @@ import Head from 'next/head';
 import { Box, Stack, Typography, Container, Unstable_Grid2 as Grid,
 Tab, 
 Tabs,
-SvgIcon } from '@mui/material';
+SvgIcon,
+Breadcrumbs,
+Link } from '@mui/material';
 import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout';
 import { useRouter } from 'next/router';
 import { DevicesRPC } from 'src/sections/devices/cwmp/devices-rpc';
-import { DevicesDiscovery } from 'src/sections/devices/cwmp/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 WrenchScrewDriverIcon from '@heroicons/react/24/solid/WrenchScrewdriverIcon';
+import SignalIcon from '@heroicons/react/24/solid/SignalIcon';
+import DevicePhoneMobile from '@heroicons/react/24/solid/DevicePhoneMobileIcon';
 import { useEffect, useState } from 'react';
 import { DevicesWiFi } from 'src/sections/devices/cwmp/devices-wifi';
+import { DevicesDiagnostic } from 'src/sections/devices/cwmp/devices-diagnostic';
+import { SiteSurvey } from 'src/sections/devices/cwmp/site-survey';
+import { ConnectedDevices } from 'src/sections/devices/cwmp/connecteddevices';
+
 
 const Page = () => {
     const router = useRouter()
@@ -25,6 +33,12 @@ const Page = () => {
                 return <DevicesRPC/>
             case "wifi":
                 return <DevicesWiFi/>
+            case "diagnostic":
+                    return <DevicesDiagnostic/>
+            case "connected-devices":
+                return <ConnectedDevices/>
+            case "site-survey":
+                return <SiteSurvey/>
             default:
                 return <p>Hello World</p>
         }
@@ -50,18 +64,32 @@ const Page = () => {
         >
             <Container maxWidth="lg" >
             <Stack spacing={3} >
+                <Breadcrumbs separator="›" aria-label="breadcrumb" sx={{md: 40, mr: 20}}>
+                {[<Link underline="hover" key="1" color="inherit" href="/devices">
+                    Devices
+                </Link>,
+                <Link
+                underline="none"
+                key="2"
+                color="inherit"
+                hre={`/devices/${deviceID}`}
+                >
+                {deviceID}
+                </Link>]}
+                </Breadcrumbs>
                 <Box sx={{
                     display:'flex',
-                justifyContent:'center'
+                    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 icon={<SvgIcon><SignalIcon/></SvgIcon>} iconPosition={"end"} label="Site Survey" onClick={()=>{router.push(`/devices/cwmp/${deviceID}/site-survey`)}} value={"site-survey"}/>
+                        <Tab icon={<SvgIcon><DevicePhoneMobile/></SvgIcon>} iconPosition={"end"} label="Connected Devices" onClick={()=>{router.push(`/devices/cwmp/${deviceID}/connected-devices`)}} value={"connected-devices"}/>
                         {/* <Tab value={"discovery"} onClick={()=>{router.push(`/devices/cwmp/${deviceID}/discovery`)}} icon={<SvgIcon><MagnifyingGlassIcon/></SvgIcon>} iconPosition={"end"} label="Discover Parameters" /> */}
+                        <Tab icon={<SvgIcon><WrenchScrewDriverIcon/></SvgIcon>} iconPosition={"end"} label="Diagnostic" onClick={()=>{router.push(`/devices/cwmp/${deviceID}/diagnostic`)}} value={"diagnostic"}/>
                         <Tab value={"msg"} onClick={()=>{router.push(`/devices/cwmp/${deviceID}/msg`)}} icon={<SvgIcon><EnvelopeIcon/></SvgIcon>} iconPosition={"end"} label="Remote Messages" />
                     </Tabs>
                 </Box>
-
                 {
                    sectionHandler()
                 }

frontend/src/sections/devices/cwmp/connecteddevices.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const ConnectedDevices = () => {
+    return (
+        <div>
+            <p>Connected Devices Page</p>
+        </div>
+    )
+}

frontend/src/sections/devices/cwmp/devices-diagnostic.js

@@ -0,0 +1,44 @@
+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,
+  SnackbarContent,
+  Snackbar,
+  Checkbox,
+  FormControlLabel,
+  useTheme,
+} from '@mui/material';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
+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 DevicesDiagnostic = () => {
+    return (
+        <div>
+            <p>Diagnostic Page</p>
+        </div>
+    )
+};

frontend/src/sections/devices/cwmp/site-survey.js

@@ -0,0 +1,304 @@
+import PropTypes from 'prop-types';
+import ArrowPathIcon from '@heroicons/react/24/solid/ArrowPathIcon';
+import ArrowRightIcon from '@heroicons/react/24/solid/ArrowRightIcon';
+import {
+    Button,
+    Card,
+    CardActions,
+    CardContent,
+    CardHeader,
+    Divider,
+    SvgIcon,
+    FormControl,
+    FormLabel,
+    Radio,
+    RadioGroup,
+    Grid,
+    FormControlLabel,
+    Box,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    TableContainer,
+    Paper,
+    Container,
+    CircularProgress
+} from '@mui/material';
+import { Scrollbar } from 'src/components/scrollbar';
+import { alpha, useTheme } from '@mui/material/styles';
+import { Chart } from 'src/components/chart';
+import ChartBarSquareIcon from '@heroicons/react/24/outline/ChartBarSquareIcon';
+import ListBulletIcon from '@heroicons/react/24/outline/ListBulletIcon';
+import { useRouter } from 'next/router';
+import { Stack } from '@mui/system';
+import { useEffect, useState } from 'react';
+
+const useChartOptions = () => {
+    const theme = useTheme();
+
+    return {
+        chart: {
+            background: 'transparent',
+            stacked: false,
+            toolbar: {
+                show: true
+            }
+        },
+        colors: [
+            theme.palette.graphics.dark,
+            theme.palette.graphics.darkest,
+            theme.palette.graphics.light,
+            theme.palette.graphics.main,
+            theme.palette.graphics.lightest,
+        ],
+        dataLabels: {
+            enabled: false
+        },
+        fill: {
+            opacity: 1,
+            type: 'solid'
+        },
+        grid: {
+            borderColor: theme.palette.divider,
+            strokeDashArray: 2,
+            xaxis: {
+                lines: {
+                    show: false
+                }
+            },
+            yaxis: {
+                lines: {
+                    show: true
+                }
+            }
+        },
+        legend: {
+            show: true
+        },
+        plotOptions: {
+            bar: {
+                columnWidth: '40px'
+            }
+        },
+        stroke: {
+            colors: ['transparent'],
+            show: true,
+            width: 2
+        },
+        theme: {
+            mode: theme.palette.mode
+        },
+        xaxis: {
+            axisBorder: {
+                color: theme.palette.divider,
+                show: true
+            },
+            axisTicks: {
+                color: theme.palette.divider,
+                show: true
+            },
+            categories: [
+                'Jan',
+                'Feb',
+                'Mar',
+                'Apr',
+                'May',
+                'Jun',
+                'Jul',
+                'Aug',
+                'Sep',
+                'Oct',
+                'Nov',
+                'Dec'
+            ],
+            labels: {
+                offsetY: 5,
+                style: {
+                    colors: theme.palette.text.secondary
+                }
+            }
+        },
+        yaxis: {
+            labels: {
+                formatter: (value) => (value > 0 ? `${value}K` : `${value}`),
+                offsetX: -10,
+                style: {
+                    colors: theme.palette.text.secondary
+                }
+            }
+        }
+    };
+};
+
+export const SiteSurvey = (props) => {
+    const chartSeries = [{ name: 'This year', data: [18, 16, 5, 8, 3, 14, 14, 16, 17, 19, 18, 20] }, { name: 'Last year', data: [12, 11, 4, 6, 2, 9, 9, 10, 11, 12, 13, 13] }]
+
+    const router = useRouter();
+    const [content, setContent] = useState(null);
+    const [frequency, setFrequency] = useState("2.4GHz");
+
+    const chartOptions = useChartOptions();
+
+    const fetchSiteSurveyData = 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]}/sitesurvey`, requestOptions)
+        .then(response => {
+            if (response.status === 401) {
+                router.push("/auth/login")
+            }
+            return response.json()
+        })
+        .then(result => {
+            console.log("sitesurvey content", result)
+            setContent(result)
+        })
+        .catch(error => console.log('error', error));
+    };
+
+
+    useEffect(() => {
+        fetchSiteSurveyData();
+    },[])
+
+    return (
+        <Stack 
+        justifyContent="center" 
+        alignItems={!content &&"center"}
+        >
+        {content ?
+        <Grid spacing={1}>
+            <Grid container>
+                <Card>
+                    <Button
+                        color="inherit"
+                        size="small"
+                        disabled="true"
+                    >
+                        <SvgIcon>
+                            <ChartBarSquareIcon />
+                        </SvgIcon>
+                    </Button>
+                    <Button
+                        color="inherit"
+                        size="small"
+                    >
+                        <SvgIcon>
+                            <ListBulletIcon />
+                        </SvgIcon>
+                    </Button>
+                </Card>
+            </Grid>
+            <Box display="flex"
+                justifyContent="center"
+                alignItems="center"
+                marginBottom={3}
+                >
+                <FormControl>
+                    <RadioGroup
+                        aria-labelledby="demo-controlled-radio-buttons-group"
+                        name="controlled-radio-buttons-group"
+                        value={frequency}
+                        onChange={(e) => {
+                            setFrequency(e.target.value)
+                        }}
+                    >
+                        <Grid container>
+                            <FormControlLabel value="2.4GHz" control={<Radio />} label="2.4GHz" />
+                            <FormControlLabel value="5GHz" control={<Radio />} label="5GHz" />
+                        </Grid>
+                    </RadioGroup>
+                </FormControl>
+            </Box>
+            <Card sx={{ height: '100%' }}>
+                <Box sx={{ minWidth: 800, }}>
+                    <TableContainer sx={{ maxHeight: 600 }}>
+                        <Table exportButton={true}>
+                            <TableHead>
+                                <TableRow>
+                                    <TableCell align="center">
+                                        SSID
+                                    </TableCell>
+                                    <TableCell>
+                                        Channel
+                                    </TableCell>
+                                    <TableCell>
+                                        BandWidth
+                                    </TableCell>
+                                    <TableCell>
+                                        Standard
+                                    </TableCell>
+                                    <TableCell>
+                                        Signal Level
+                                    </TableCell>
+                                </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                {content[frequency] && content[frequency].map((c) => {
+                                    return (
+                                        <TableRow
+                                            hover
+                                            key={c.ssid + c.signal_level}
+                                        >
+                                            <TableCell align="center">
+                                                {c.ssid}
+                                            </TableCell>
+                                            <TableCell>
+                                                {c.channel}
+                                            </TableCell>
+                                            <TableCell>
+                                                {c.bandwidth}MHz
+                                            </TableCell>
+                                            <TableCell>
+                                                {c.standard}
+                                            </TableCell>
+                                            <TableCell>
+                                                {c.signal_level} dbm
+                                            </TableCell>
+                                        </TableRow>
+                                    );
+                                })}
+                            </TableBody>
+                        </Table>
+                    </TableContainer>
+                </Box>
+                {/* <CardContent>
+                <Chart
+                height={500}
+                options={chartOptions}
+                series={chartSeries}
+                type="bar"
+                width="100%"
+                />
+            </CardContent>
+            <Divider />
+            <CardActions sx={{ justifyContent: 'center' }}>
+            <FormControl xs={2}>
+                <RadioGroup
+                    aria-labelledby="demo-controlled-radio-buttons-group"
+                    name="controlled-radio-buttons-group"
+                    value={"2.4GHz"}
+                >
+                <Grid container>
+                    <FormControlLabel value="2.4GHz" control={<Radio />} label="2.4GHz" />
+                    <FormControlLabel value="5GHz" control={<Radio />} label="5GHz" />
+                </Grid>
+            </RadioGroup>
+            </FormControl>
+            </CardActions> */}
+            </Card>
+        </Grid>: <CircularProgress></CircularProgress>}
+        </Stack>
+    );
+};