feat(frontend): dashboard [ close #126 ]

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(response => {
-      .then(json => setDevices(json))
+        if (response.status === 401)
-      .catch(error => console.error('Error:', error));
+          router.push("/auth/login")
+        return response.json()
+      })
+      .then(json => {
+        return setDevices(json)
+      })
+      .catch(error => {
+        return console.error('Error:', error)
+      });
   }, [auth.user]);
 
   return (

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 = () => {
 
-  return(
+  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(generalInfo ?
   <>
     <Head>
       <title>
@@ -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]}
+          chartSeries={vendorValues}
-          labels={['Cameras', 'Routers', 'Sensors']}
+          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]}
+              chartSeries={productClassValues}
-              labels={['Cameras', 'Routers', 'Sensors']}
+              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) => (

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()
     }