diff --git a/frontend/src/pages/devices.js b/frontend/src/pages/devices.js index 519b8ec..5defbb1 100644 --- a/frontend/src/pages/devices.js +++ b/frontend/src/pages/devices.js @@ -4,8 +4,10 @@ import { Box, Container, Unstable_Grid2 as Grid } from '@mui/material'; import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout'; import { OverviewLatestOrders } from 'src/sections/overview/overview-latest-orders'; import { useAuth } from 'src/hooks/use-auth'; +import { useRouter } from 'next/router'; const Page = () => { + const router = useRouter() const auth = useAuth(); const [devices, setDevices] = useState([]); @@ -28,9 +30,17 @@ const Page = () => { } fetch(process.env.NEXT_PUBLIC_REST_ENPOINT+'/device', requestOptions) - .then(response => response.json()) - .then(json => setDevices(json)) - .catch(error => console.error('Error:', error)); + .then(response => { + if (response.status === 401) + router.push("/auth/login") + return response.json() + }) + .then(json => { + return setDevices(json) + }) + .catch(error => { + return console.error('Error:', error) + }); }, [auth.user]); return ( diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.js index 6e47189..cfae8e7 100644 --- a/frontend/src/pages/index.js +++ b/frontend/src/pages/index.js @@ -1,22 +1,95 @@ import Head from 'next/head'; -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { subDays, subHours } from 'date-fns'; -import { Box, Container, Unstable_Grid2 as Grid } from '@mui/material'; +import { + Box, + Container, + CircularProgress, + Unstable_Grid2 as Grid } from '@mui/material'; import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout'; -import { OverviewBudget } from 'src/sections/overview/overview-budget'; -import { OverviewLatestOrders } from 'src/sections/overview/overview-latest-orders'; -import { OverviewLatestProducts } from 'src/sections/overview/overview-latest-products'; -import { OverviewSales } from 'src/sections/overview/overview-sales'; import { OverviewTasksProgress } from 'src/sections/overview/overview-tasks-progress'; import { OverviewTotalCustomers } from 'src/sections/overview/overview-total-customers'; -import { OverviewTotalProfit } from 'src/sections/overview/overview-total-profit'; import { OverviewTraffic } from 'src/sections/overview/overview-traffic'; +import { useRouter } from 'next/router'; const now = new Date(); const Page = () => { + + const router = useRouter() + + const [generalInfo, setGeneralInfo] = useState(null) + const [devicesStatus, setDevicesStatus] = useState([0,0]) + const [devicesCount, setDevicesCount] = useState(0) + const [productClassLabels, setProductClassLabels] = useState(['-']) + const [productClassValues, setProductClassValues] = useState(['0']) + const [vendorLabels, setVendorLabels] = useState(['-']) + const [vendorValues, setVendorValues] = useState([0]) + + const fetchGeneralInfo = 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', + }; + + let result = await (await fetch(`${process.env.NEXT_PUBLIC_REST_ENPOINT}/info/general`, requestOptions)) + if (result.status === 401){ + router.push("/auth/login") + }else{ + let content = await result.json() + console.log("general info result:", content) + let totalDevices = content.StatusCount.Offline + content.StatusCount.Online + setDevicesCount(totalDevices) + + let onlinePercentage = ((content.StatusCount.Online * 100)/totalDevices) + console.log("ONLINE AND OFFLINE:",onlinePercentage,100 - onlinePercentage) + setDevicesStatus([onlinePercentage, 100 - onlinePercentage]) + + let prodClassLabels = [] + let prodClassValues = [] + content.ProductClassCount?.map((p)=>{ + if (p.productClass === ""){ + prodClassLabels.push("unknown") + }else{ + prodClassLabels.push(p.productClass) + } + prodClassValues.push(p.count) + }) + setProductClassLabels(prodClassLabels) + setProductClassValues(prodClassValues) + console.log("productClassLabels:", prodClassLabels) + console.log("productClassValues:", productClassValues) + + let vLabels = [] + let vValues = [] + content.VendorsCount?.map((p)=>{ + if (p.vendor === ""){ + vLabels.push("unknown") + }else{ + vLabels.push(p.vendor) + } + vValues.push(p.count) + }) + setVendorLabels(vLabels) + setVendorValues(vValues) + console.log("vendorLabels:", vLabels) + console.log("vendorValues:", vendorValues) + + setGeneralInfo(content) + } + + } + + useEffect(()=>{ + fetchGeneralInfo() + },[]) - return( + return(generalInfo ? <> @@ -47,10 +120,10 @@ const Page = () => { lg={3} > <OverviewTotalCustomers - difference={16} + //difference={16} positive={false} sx={{ height: '100%' }} - value="1.6k" + value={devicesCount} /> </Grid> <Grid @@ -60,7 +133,7 @@ const Page = () => { > <OverviewTasksProgress sx={{ height: '100%' }} - value={75.5} + value={generalInfo.MqttRtt} /> </Grid> <Grid @@ -74,8 +147,8 @@ const Page = () => { lg={4} > <OverviewTraffic - chartSeries={[63, 15, 22]} - labels={['Cameras', 'Routers', 'Sensors']} + chartSeries={vendorValues} + labels={vendorLabels} sx={{ height: '100%' }} title={'Vendors'} /> @@ -85,7 +158,7 @@ const Page = () => { lg={4} > <OverviewTraffic - chartSeries={[88, 22]} + chartSeries={devicesStatus} labels={['Online', 'Offline']} sx={{ height: '100%' }} title={'Status'} @@ -97,8 +170,8 @@ const Page = () => { lg={4} > <OverviewTraffic - chartSeries={[63, 15, 22]} - labels={['Cameras', 'Routers', 'Sensors']} + chartSeries={productClassValues} + labels={productClassLabels} sx={{ height: '100%' }} title={'Devices Type'} /> @@ -112,7 +185,9 @@ const Page = () => { </Grid> </Container> </Box> - </>) + </>: <Box sx={{display:'flex',justifyContent:'center'}}> + <CircularProgress color="inherit" /> + </Box>) }; Page.getLayout = (page) => ( diff --git a/frontend/src/sections/devices/devices-discovery.js b/frontend/src/sections/devices/devices-discovery.js index 54d889d..d324cd6 100644 --- a/frontend/src/sections/devices/devices-discovery.js +++ b/frontend/src/sections/devices/devices-discovery.js @@ -378,7 +378,9 @@ const getDeviceParameters = async (raw) =>{ let result = await (await fetch(`${process.env.NEXT_PUBLIC_REST_ENPOINT}/device/${router.query.id[0]}/parameters`, requestOptions)) if (result.status != 200) { throw new Error('Please check your email and password'); - }else{ + }else if (result.status === 401){ + router.push("/auth/login") +}else{ return result.json() } } @@ -398,7 +400,9 @@ const getDeviceParameterInstances = async (raw) =>{ let result = await (await fetch(`${process.env.NEXT_PUBLIC_REST_ENPOINT}/device/${router.query.id[0]}/instances`, requestOptions)) if (result.status != 200) { throw new Error('Please check your email and password'); - }else{ + }else if (result.status === 401){ + router.push("/auth/login") +}else{ return result.json() } } @@ -653,7 +657,9 @@ const getDeviceParameterInstances = async (raw) =>{ let result = await (await fetch(`${process.env.NEXT_PUBLIC_REST_ENPOINT}/device/${router.query.id[0]}/get`, requestOptions)) if (result.status != 200) { throw new Error('Please check your email and password'); - }else{ + }else if (result.status === 401){ + router.push("/auth/login") +}else{ return result.json() }