Notes

import React, { useState, useEffect } from "react";
import Header from "../commonComponents/Header";
import FlexFooter from "../../src/commonComponents/FlexFooter";
import BasicDatePicker from "../commonComponents/datePicker";
import SingleSelectComponent from "../commonComponents/SingleSelectComponent";
import Button from "@mui/material/Button";
import FivegtfHeatMap from "../dashboards/FivegAnalyticsComponent/FivegAnalyticsHeatMap";
import FiveGNetworkPerformance from "./FiveGNetworkPerformance/FiveGNetworkPerformance";
import Loader from "../commonComponents/Loader";
import { get5gDates, get5gMaxDate } from "../services/request";
import moment from "moment";
import "./FivegAnalyticsdashboard.css";
import CommonDownloadExcel from "../commonComponents/commonDownloadExcel";
import { useLocation } from "react-router-dom";
import { PdfTopFilter } from "../commonComponents/PdfTopFilter";
import ReactMultiSelect from "../commonComponents/multiSelectComponent";
import CalldropTickerPopup from "./CallDropsComponent/CalldropTicketPopup";

const FivegAnalyticsdashboard = () => {
const screenName = "FivegAnalytics";
let location = useLocation();
const parameters = new URLSearchParams(location.search);
const SUB_ID = parameters.get("SUB_ID") ? parameters.get("SUB_ID") : "";
const PDF_SUB_ID = parameters.get("PDF_SUB_ID")
? parameters.get("PDF_SUB_ID")
: "";
const Pdf_Pop_Up = parameters.get("Pdf_Pop_Up")
? parameters.get("Pdf_Pop_Up")
: "";

let dateParams = parameters.get("subscription_date")
? parameters.get("subscription_date")
: "";
let topfiltersParams = parameters.get("topfilters")
? parameters.get("topfilters")
: "";
const monthParam = parameters.get("month") ? parameters.get("month") : "";
const dayParam = parameters.get("day") ? parameters.get("day") : "";
const urlParam = parameters.get("open") ? parameters.get("open") : "";

const [Datebool, setDatebool] = useState(false);
const [payLoad, setPayLoad] = useState(null);
const [enodebCheckId, setEnodeBcheckId] = useState(null);
const [availableDates, setAvailableDates] = useState([]);
const [startDate, setStartDate] = useState(new Date());
const [maxDate, setMaxDate] = useState(null);
const [minDate, setMinDate] = useState(null);
const [loading, setLoading] = useState(false);
const [isGoActive, setGoActive] = useState(false);
const [toggleData, setToggleData] = useState([]);
const [selectedToggle, setSelectedToggle] = useState([
{
label: "Mobile",
value: "Mobile",
},
]);

const [isDialogOpen, setIsDialogOpen] = useState(false);
const [type, setType] = useState("");
const [msg, setMsg] = useState("");
const [popupSelected, setPopupSelected] = useState([]);

const [excelParams, setExcelParams] = useState(null);
const [pdfParams, setPdfParams] = useState(null);

const CreateParameters = (data) => {
console.log(data, moment(startDate).format("YYYY-MM-DD"));
let obj = {
subscription_date:
data && data.date ? data.date : moment(startDate).format("YYYY-MM-DD"),
topfilters: `selectToggle=${
selectedToggle ? selectedToggle[0].value : "Mobile"
}`,
};
return obj;
};

const urlSubscriptionFlow = async (subscritpionData) => {
console.log(subscritpionData);
let { subscription_date, day, month, topfilters } = { ...subscritpionData };
let date1;
let topValue = PdfTopFilter("FiveG", topfilters);
if (
(month === "*" &&
(day === "*" || day === "MON-FRI" || day === "Every Week")) ||
(month != "*" &&
(day === "*" || day === "MON-FRI" || day === "Every Week")) ||
(month === "*" && (day != "*" || day != "MON-FRI" || day != "Every Week"))
) {
date1 = await get5gMaxDate()
.then((res) => {
let dateList = res.data ? [...res.data] : [];
if (dateList.length > 0) {
return dateList[0];
}
})
.catch((error) => {
console.log(error);
});
} else {
date1 =
subscription_date && subscription_date != "Invalid date"
? subscription_date
: await get5gMaxDate()
.then((res) => {
let dateList = res.data ? [...res.data] : [];
if (dateList.length > 0) {
return dateList[0];
}
})
.catch((error) => {
console.log(error);
});
}
setPdfParams({ date: date1 });
setPayLoad({ date: date1 });
setExcelParams({
screenName: screenName,
date: date1,
searchEnodeb:false
});
DateLoad(true, date1);
let toggleValue = topValue.selectToggle ? topValue.selectToggle : "Mobile";
let toggleOption = { label: toggleValue, value: toggleValue };
setSelectedToggle([toggleOption]);
setDatebool(true);
};

const clickHandler = () => {
if (popupSelected && popupSelected.length > 0) {
setIsDialogOpen(false);
setSelectedToggle(popupSelected);
}
};
const popupHanlder = (selectedValue) => {
setPopupSelected(selectedValue);
};

const ToggleChangeHandler = (selectedOption) => {
if (selectedOption.length === 0) {
setIsDialogOpen(true);
setMsg("Select at least One Value");
setType("FiveG");
setPopupSelected([]);
} else {
setSelectedToggle(selectedOption);
}
};

const DateLoad = (urlSubscriptionFlow = false, dateParam) => {
setLoading(true);
get5gDates().then((res) => {
let dateList = res.data;
setAvailableDates(dateList);
if (dateList.length > 0) {
let minDate = dateList[0];
let maxDate = dateList[dateList.length - 1];
maxDate = new Date(maxDate);
let minusdate = dateList
? dateList[dateList.length - 1]
? dateList[dateList.length - 1]
: maxDate
: maxDate;
const date = new Date(
urlSubscriptionFlow && dateParam ? dateParam : maxDate
);
let date1 = new Date(minDate);
let minusDate1 = new Date(
urlSubscriptionFlow && dateParam ? dateParam : minusdate
);
var timeZoneValue = date.toString().match(/(([A-Za-zs].*))/)[1];
if (
timeZoneValue === "Eastern Daylight Time" ||
timeZoneValue === "Eastern Standard Time" ||
timeZoneValue.split(" ")[0] == "Eastern"
) {
date.setDate(date.getDate() + 1);
maxDate.setDate(maxDate.getDate() + 1);
minusDate1.setDate(minusDate1.getDate() + 1);
date1.setDate(date1.getDate() + 1);
}
setSelectedDate(minusDate1, false);
setMaxDate(maxDate);
setMinDate(date1);
setDatebool(true);
if (!urlSubscriptionFlow) {
setPdfParams({ date: moment(maxDate).format("YYYY-MM-DD") });
setPayLoad({ date: moment(maxDate).format("YYYY-MM-DD") });
setExcelParams({
screenName: screenName,
date: moment(maxDate).format("YYYY-MM-DD"),
searchEnodeb:false
});
}
setLoading(false);
}
});
};
const setSelectedDate = (value, flag = true) => {
setStartDate(value);
if (flag) {
setGoActive(true);
}
};
const GoHandler = () => {
setGoActive(false);
setPdfParams({ date: moment(startDate).format("YYYY-MM-DD") });
setPayLoad({ date: moment(startDate).format("YYYY-MM-DD") });
setExcelParams({
screenName: screenName,
date: moment(startDate).format("YYYY-MM-DD"),
searchEnodeb:false
});
};

const loadPdfData = async (topValue) => {
let date1;
if (
(monthParam === "*" &&
(dayParam === "*" ||
dayParam === "MON-FRI" ||
dayParam === "Every Week")) ||
(monthParam != "*" &&
(dayParam === "*" ||
dayParam === "MON-FRI" ||
dayParam === "Every Week")) ||
(monthParam === "*" &&
(dayParam != "*" || dayParam != "MON-FRI" || dayParam != "Every Week"))
) {
date1 = await get5gMaxDate()
.then((res) => {
let dateList = res.data ? [...res.data] : [];
if (dateList.length > 0) {
return dateList[0];
}
})
.catch((error) => {
console.log(error);
});
} else {
date1 =
dateParams && dateParams != "Invalid date"
? dateParams
: await get5gMaxDate()
.then((res) => {
let dateList = res.data ? [...res.data] : [];
if (dateList.length > 0) {
return dateList[0];
}
})
.catch((error) => {
console.log(error);
});
}
const date = new Date(date1);
var timeZoneValue = date.toString().match(/(([A-Za-zs].*))/)[1];
if (
timeZoneValue == "Eastern Daylight Time" ||
timeZoneValue == "Eastern Standard Time" ||
timeZoneValue.split(" ")[0] == "Eastern"
) {
date.setDate(date.getDate() + 1);
}
setStartDate(date);
let toggleValue = topValue.selectToggle ? topValue.selectToggle : "Mobile";
let toggleOption = { label: toggleValue, value: toggleValue };
setSelectedToggle([toggleOption]);
setDatebool(true);
};

useEffect(() => {
if (PDF_SUB_ID || SUB_ID) {
let data = PdfTopFilter("FiveG", topfiltersParams);
loadPdfData(data);
} else {
if (urlParam === "") {
DateLoad();
}
// toggleSelectionFunction();
}
setToggleData([
{
label: "Mobile",
value: "Mobile",
},
]);
}, []);
return (
<>
<div
className={`FivegAnalyticsdashboardMainContainer ${
SUB_ID || PDF_SUB_ID ? `pdfFivegAnalyticsdashboardMainContainer` : ""
} `}
>
{PDF_SUB_ID === "" && SUB_ID === "" ? (
<div>
<Header />
</div>
) : null}
<div
className={`FivegAnalyticsHeading d-flex ${
SUB_ID || PDF_SUB_ID ? `pdfFivegAnalyticsHeading` : ""
}`}
>
<h3 className="FivegAnalyticsHeadings">
5G Network Performance Analytics
</h3>
</div>
<div>{loading ? <Loader /> : null}</div>
<div className="FiveGCommonExcel">
<CommonDownloadExcel
CreateParameters={CreateParameters}
pdfParams={pdfParams}
screenName={screenName}
excelParams={excelParams}
urlSubscriptionFlow={urlSubscriptionFlow}
radioButton={
selectedToggle && selectedToggle.length > 0
? selectedToggle[0].value
: "Mobile"
}
urlParam={urlParam}
subs_title={"5G Network Performance Analytics"}
/>
</div>
<div
className={`${
SUB_ID || PDF_SUB_ID
? `PDFFivegAnalyticsComponentsContainer`
: "FivegAnalyticsComponentsContainer"
}`}
>
{PDF_SUB_ID || SUB_ID ? (
selectedToggle[0].value === "Mobile" ? (
<div>
<h3 style={{ fontWeight: "900" }}>Mobile</h3>
</div>
) : selectedToggle[0].value === "All" ? (
<div>
<h3 style={{ fontWeight: "900" }}>All</h3>
</div>
) : (
<div>
<h3 style={{ fontWeight: "900" }}>FWA</h3>
</div>
)
) : null}
<div className="FivegAnalyticsComponentHeatMapContainer">
<div
className={`FivegAnalyticsDropdowns ${
SUB_ID || PDF_SUB_ID ? `PDFFivegAnalyticsDropdowns` : ""
}`}
>
<div className="FiveGToggleMainDiv">
<span>
<ReactMultiSelect
optionsList={toggleData}
defaultValue={selectedToggle}
unSelectAll={false}
hasSelectAll={true}
onChange={ToggleChangeHandler}
/>
</span>
{/* <SingleSelectComponent
optionsList={toggleData}
onChange={ToggleChangeHandler}
selectedValue={selectedToggle}
/> */}
</div>
<div className="DatePicker multidropdown">
{Datebool ? (
<BasicDatePicker
startDate={startDate}
onChange={(date) => setSelectedDate(date, true)}
dateFormat={"yyyy-MM-dd"}
maxDate={moment(maxDate).format("YYYY-MM-DD")}
minDate={moment(minDate).format("YYYY-MM-DD")}
availableDates={availableDates}
/>
) : null}
</div>
{PDF_SUB_ID === "" && SUB_ID === "" ? (
<div className="FivegAnalyticsGoBtn">
<div className="GoButton" style={{ marginTop: "1.5rem" }}>
<Button
variant="contained"
style={{
backgroundColor: isGoActive ? "black" : "#e6e6e6",
borderRadius: "25px",
fontSize: ".9rem",
textTransform: "capitalize",
height: "30px",
boxShadow: "none",
paddingTop: "2px",
color: isGoActive ? "white" : "black",
fontWeight: isGoActive ? "bold" : "normal",
}}
onClick={GoHandler}
>
Go
</Button>
</div>
</div>
) : null}
</div>
<div
className="border-bottom ml-3"
style={{
width: "97%",
position: "relative",
top: "1.5rem",
left: "1rem",
}}
></div>
<div className="FivegMapDiv" style={{ width: "100%" }}>
<div className="CallDropComponent CallDropMap">
{Datebool && Pdf_Pop_Up==="" ? (
<FivegtfHeatMap
payLoad={payLoad}
PDF_SUB_ID={PDF_SUB_ID}
SUB_ID={SUB_ID}
dateParams={dateParams}
monthParam={monthParam}
dayParam={dayParam}
enodebCheckId={enodebCheckId}
setEnodeBcheckId={setEnodeBcheckId}
setExcelParams={setExcelParams}
maxDate={moment(maxDate).format("YYYY-MM-DD")}
minDate={moment(minDate).format("YYYY-MM-DD")}
/>
) : null}
</div>
</div>
</div>
</div>
{/* {PDF_SUB_ID === "" && SUB_ID === "" && Datebool ? ( */}
{Datebool?(
<div className="FiveGNetworkPerformanceNewModal">
<FiveGNetworkPerformance
payLoad={payLoad}
setEnodeBcheckId={setEnodeBcheckId}
PDF_SUB_ID={PDF_SUB_ID}
SUB_ID={SUB_ID}
Pdf_Pop_Up={Pdf_Pop_Up}

/>
</div>
) : null}

{PDF_SUB_ID === "" && SUB_ID === "" ? (
<div className="FooterFlexFiveG">
<FlexFooter />
</div>
) : null}
{isDialogOpen ? (
<CalldropTickerPopup
isDialogOpen={isDialogOpen}
setIsDialogOpen={setIsDialogOpen}
list={toggleData}
selectedList={popupSelected}
Handler={popupHanlder}
handleSubmit={clickHandler}
msg={msg}
type={type}
/>
) : null}
</div>
</>
);
};

export default FivegAnalyticsdashboard;