import Head from 'next/head';
import React, { useEffect, useState } from 'react';
import { subDays, subHours } from 'date-fns';
import {
Box,
Container,
CircularProgress,
Unstable_Grid2 as Grid } from '@mui/material';
import { Layout as DashboardLayout } from 'src/layouts/dashboard/layout';
import { OverviewTasksProgress } from 'src/sections/overview/overview-tasks-progress';
import { OverviewTotalCustomers } from 'src/sections/overview/overview-total-customers';
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 if (result.status != 200){
console.log("Status:", result.status)
let content = await result.json()
console.log("Message:", content)
}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)
if(Number.isInteger(onlinePercentage)){
setDevicesStatus([onlinePercentage, 100 - onlinePercentage])
}else{
onlinePercentage = Number(onlinePercentage.toFixed(1))
setDevicesStatus([onlinePercentage, 100 - onlinePercentage])
}
let prodClassLabels = []
let prodClassValues = []
let prodClassValue = 0
content.ProductClassCount?.map((p)=>{
if (p.productClass === ""){
prodClassLabels.push("unknown")
}else{
prodClassLabels.push(p.productClass)
}
prodClassValue += p.count
})
content.ProductClassCount?.map((p)=>{
let percentageValue = p.count * 100 / prodClassValue
if (Number.isInteger(percentageValue)){
prodClassValues.push(percentageValue)
}else{
prodClassValues.push(Number(percentageValue.toFixed(1)))
}
})
setProductClassLabels(prodClassLabels)
setProductClassValues(prodClassValues)
console.log("productClassLabels:", prodClassLabels)
console.log("productClassValues:", productClassValues)
let vLabels = []
let vValues = []
let vValue = 0
content.VendorsCount?.map((p)=>{
if (p.vendor === ""){
vLabels.push("unknown")
}else{
vLabels.push(p.vendor)
}
vValue = vValue + p.count
})
content.VendorsCount?.map((p)=>{
let percentageValue = p.count * 100 / vValue
if (Number.isInteger(percentageValue)){
vValues.push(percentageValue)
}else{
vValues.push(Number(percentageValue.toFixed(1)))
}
})
setVendorLabels(vLabels)
setVendorValues(vValues)
console.log("vendorLabels:", vLabels)
console.log("vendorValues:", vValues)
setGeneralInfo(content)
}
}
useEffect(()=>{
fetchGeneralInfo()
},[])
return(generalInfo ?
<>
Oktopus | TR-369
:
)
};
Page.getLayout = (page) => (
{page}
);
export default Page;
/*
*/