Notes

import React, { Fragment, useEffect, useState } from "react";
import { Modal } from "react-bootstrap";
import {
MapContainer,
Marker,
TileLayer,
LayersControl,
Tooltip,
useMap,
Polygon,
GeoJSON,
Polyline,
} from "react-leaflet";
import usJson from "../../json/us-State.json";
import L from "leaflet";
import 'leaflet.zoomslider';
import 'leaflet/dist/leaflet.css';
import "../../dashboards/ZoomSlider.css";
import HomeIcon from "@mui/icons-material/Home";
import CloseSharpIcon from "@mui/icons-material/CloseSharp";
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Tooltip1 from "./Heatmaptable";
import icon from "../../assests/images/redtower.png";
import iconShadow from "leaflet/dist/images/marker-shadow.png";
import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
import Button from "@mui/material/Button";
import { getEnodeUserLocationTrack } from "../../services/request";
import ICON96afd4I from "../../assests/images/enodeB 96afd4.png";
import ICON1C884FI from "../../assests/images/enodeB 1C884F.png";
import ICON3B965DI from "../../assests/images/enodeB 3B965D.png";
import ICON59A36AI from "../../assests/images/enodeB 59A36A.png";
import ICON78B177I from "../../assests/images/enodeB 78B177.png";
import ICON97BE85I from "../../assests/images/enodeB 97BE85.png";
import ICONB5CC92I from "../../assests/images/enodeB B5CC92.png";
import ICONBD4D99FI from "../../assests/images/enodeB D4D99F.png";
import ICONBF2E7ACI from "../../assests/images/enodeB F2E7AC.png";
import ICONBFAB292I from "../../assests/images/enodeB FAB292.png";
import ICONBF24D5BI from "../../assests/images/enodeB F24D5B.png";
import ICONOORANGE from "../../assests/images/orangetower.png";
import ICONBD4D99FIYELLOW from "../../assests/images/enodebLightYellow.png";
import { findQuantile, getStateName } from "../../utils/UtilFunctions";
import Legend from "../../commonComponents/Legend";
// import HeatMapLoadState from "./HeatMapLoadState";
import HeatMapLoadState from "./HeatMapLegends";
import CommonTableComponent from "./CommonTableComponent";
import "./calldrops.css";
import Loader from "../../commonComponents/Loader";
import {
UserliveTracklegendColors,
hexToRGBToPercent,
} from "../../MapKTComponents/CommonUtils";
import ICONB5CC92NEW from "../../assests/images/1_B5CC92.png";
import ICOND4D99FNEW from "../../assests/images/2_D4D99F.png";
import ICONF2E7ACNEW from "../../assests/images/3_F2E7AC.png";
import ICONFAB292NEW from "../../assests/images/4_FAB292.png";
import ICONF24D5BNEW from "../../assests/images/5_F24D5B.png";

import ICON36BE19 from "../../assests/images/36BE19.png";
import ICONED7000 from "../../assests/images/ED7000.png";
import ICONEE0000 from "../../assests/images/EE0000.png";
import UserTrackLegend from "../../commonComponents/UserTrackLegend";

// let DefaultIcon = L.icon({
// iconUrl: icon,
// // shadowUrl: iconShadow,
// iconSize: [20, 20],
// });

var ICON96afd4 = L.icon({
iconUrl: ICON96afd4I,
iconSize: [40, 40], // size of the icon
});

var ICON1C884F = L.icon({
iconUrl: ICON1C884FI,
iconSize: [40, 40], // size of the icon
});

var ICON3B965D = L.icon({
iconUrl: ICON3B965DI,
iconSize: [40, 40], // size of the icon
});

var ICON59A36A = L.icon({
iconUrl: ICON59A36AI,
iconSize: [40, 40], // size of the icon
});

var ICON78B177 = L.icon({
iconUrl: ICON78B177I,
iconSize: [40, 40], // size of the icon
});

var ICON97BE85 = L.icon({
iconUrl: ICON97BE85I,
iconSize: [40, 40], // size of the icon
});

var ICONB5CC92 = L.icon({
iconUrl: ICONB5CC92I,
iconSize: [40, 40], // size of the icon
});

var ICONBD4D99F = L.icon({
iconUrl: ICONBD4D99FI,
iconSize: [40, 40], // size of the icon
});

var ICONBF2E7AC = L.icon({
iconUrl: ICONBF2E7ACI,
iconSize: [40, 40], // size of the icon
});

var ICONBFAB292 = L.icon({
iconUrl: ICONBFAB292I,
iconSize: [40, 40], // size of the icon
});

var ICONBF24D5B = L.icon({
iconUrl: ICONBF24D5BI,
iconSize: [40, 40], // size of the icon
});

let ICONBD4D99FILIGHTYELLOW = L.icon({
iconUrl: ICONBD4D99FIYELLOW,
iconSize: [40, 40], // size of the icon
});
let ICONOORANGET = L.icon({
iconUrl: ICONOORANGE,
iconSize: [40, 40],
});
let ICONB5CC92L = L.icon({
iconUrl: ICONB5CC92NEW,
iconSize: [40, 40],
});
let ICOND4D99FL = L.icon({
iconUrl: ICOND4D99FNEW,
iconSize: [40, 40],
});
let ICONF2E7ACL = L.icon({
iconUrl: ICONF2E7ACNEW,
iconSize: [40, 40],
});
let ICONFAB292L = L.icon({
iconUrl: ICONFAB292NEW,
iconSize: [40, 40],
});
let ICONF24D5BL = L.icon({
iconUrl: ICONF24D5BNEW,
iconSize: [40, 40],
});

let ICON36BE19L = L.icon({
iconUrl: ICON36BE19,
iconSize: [40, 40],
});
let ICONED7000L = L.icon({
iconUrl: ICONED7000,
iconSize: [40, 40],
});

let ICONEE0000L = L.icon({
iconUrl: ICONEE0000,
iconSize: [40, 40],
});

const custumIcon = {
"#96afd4": ICON96afd4,
"#1C884F": ICON1C884F,
"#3B965D": ICON3B965D,
"#59A36A": ICON59A36A,
"#abce9b": ICON78B177,
"#97BE85": ICON97BE85,
"#f1e49c": ICONBF2E7AC,
// "#d6dd91": ICONBD4D99F,
"#d6dd91": ICONBD4D99FILIGHTYELLOW,
"#FFA500": ICONOORANGET,
"#B5CC92": ICONB5CC92L,
"#D4D99F": ICOND4D99FL,
"#F2E7AC": ICONF2E7ACL,
"#FAB292": ICONFAB292L,
"#F24D5B": ICONF24D5BL,

"#36BE19": ICONFAB292L,
"#ED7000": ICONFAB292L,
"#EE0000": ICONFAB292L,
"rgb(84, 220, 55)": ICON36BE19L,
"rgb(267, 142, 30)": ICONED7000L,
"rgb(268, 30, 30)": ICONEE0000L,
};

const commonGrade = [[0, 1], [2, 10], [11]];

const colourCalculation = (value, dashboard, percent) => {
let key = 0;
commonGrade.map((el, k) => {
if (el.length === 1) {
if (value > el[0]) {
key = k;
return;
}
} else {
if (value >= el[0] && value <= el[1]) {
key = k;
return;
}
}
});
let legendColor = UserliveTracklegendColors[key];
legendColor = legendColor.split("#")[1];
return hexToRGBToPercent(legendColor, percent);
};

// L.Marker.prototype.options.icon = DefaultIcon;

function ChangeView({ center, zoom }) {
const map = useMap();
map.setView(center, zoom);
return null;
}

const LiveTrackingMap = (props) => {
const {
show,
closealertpopup,
enodebID,
selectedFilters,
imsi,
payLoadOfIMSI,
legendTitle,
totalCallDrops,
rowData,
setShow,
urlSubscriptionData,
userMaxDate,
maxHour,
model,
} = props;
const [position, setPosition] = useState([40.806471, -97.768101]);
const [zoom, setZoom] = useState(4);
const [data, setMapData] = useState([]);
const [tableData, setMapTableData] = useState([]);
const [coordinates, setCoordinates] = useState([]);
const [mapPosition, setMapPosition] = useState([]);
const [legends, setLegends] = useState([]);
const [callDropsofUser, setCallDrops] = useState(0);
const [loading, setLoading] = useState(false);
const [showPopUp, setShowPopUp] = useState(false);

const renderTooltip = (props, name) => (
<Tooltip1 {...props}>{<div>{name}</div>}</Tooltip1>
);
const tableColumns = [
{
title: "Timestamp",
field: "Connected_time",
filtering: true,
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el["Connected_time"] ? el["Connected_time"] : "Not Available"}
</span>
</div>
),
},
{
title: "eNodeB",
field: "eNodeB ID",
filtering: true,
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el["eNodeB ID"] ? el["eNodeB ID"] : "Not Available"}
</span>
</div>
),
},
{
title: "State",
field: "state",
filtering: true,
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el.state ? getStateName(el.state) : "Not Available"}
</span>
</div>
),
},
{
title: "Zip Code",
field: "zip_code",
filtering: true,
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el.zip_code ? el.zip_code : "Not Available"}
</span>
</div>
),
},
{
title: "Cause Code",
field: "cause_code",
filtering: true,
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el.cause_code ? el.cause_code : "Not Available"}
</span>
</div>
),
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el.cause_code ? (
el.cause_code.length < 16 ? (
<div className="atname d-flex justify-content-center"> {el.cause_code} </div>
) : (
<div>
<div className="atname d-flex justify-content-center">
{" "}
{el.cause_code.substring(0, 16)} ...
<span
className="moretext"
style={{
display: `${el.cause_code.length}` < 16 ? "none" : "",
}}
>
<div className="iicon">
<OverlayTrigger
placement={"top"}
overlay={(e) => renderTooltip(e, el.cause_code)}
>
<ErrorOutlineIcon />
</OverlayTrigger>
</div>
</span>
</div>
</div>
)
) : (
"Not Available"
)}
</span>
</div>
),
},
{
title: "eNodeB Call Drop",
field: "EnodeB Call Drops",
filtering: true,
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el["EnodeB Call Drops"] ? el["EnodeB Call Drops"] : 0}
</span>
</div>
),
},
{
title: "Call Drop",
field: "Call Drops",
filtering: true,
render: (el) => (
<div>
<span style={{ textTransform: "capitalize" }}>
{el["Call Drops"] ? el["Call Drops"] : 0}
</span>
</div>
),
},
];

const load = () => {
const loadStatesTask = new HeatMapLoadState();
loadStatesTask.load((legends) => setLegends(legends), data, legendTitle);
};

useEffect(() => {
if (maxHour && userMaxDate) {
setPosition([40.806471, -97.768101]);
setZoom(4);
setCoordinates(coordinates);
getMapData(maxHour, userMaxDate);
}
}, [maxHour, userMaxDate]);
const ZoomBar=()=> {
const map = useMap();

useEffect(() => {
const zoomSlider = L.control.zoomslider({ maxZoom: 16 });
zoomSlider.addTo(map);

return () => {
zoomSlider.remove();
};
}, []);

return null;
}
const ZoomButton = () => {
const map = useMap();
const [zoomLevel, setZoomLevel] = useState(map.getZoom());

useEffect(() => {
const handleZoomEnd = () => {
setZoomLevel(map.getZoom());
};

map.on('zoomend', handleZoomEnd);

return () => {
map.off('zoomend', handleZoomEnd);
};
}, [map]);

return (
<div className="zoom-buttonUserLiveTrackMap">
<button disabled>{zoomLevel}</button>
</div>
);
};
const ZoomButtonTableUserTrackMap = () => {
const map = useMap();
const [zoomLevel, setZoomLevel] = useState(map.getZoom());

useEffect(() => {
const handleZoomEnd = () => {
setZoomLevel(map.getZoom());
};

map.on('zoomend', handleZoomEnd);

return () => {
map.off('zoomend', handleZoomEnd);
};
}, [map]);

return (
<div className="zoom-buttonTableUserTrackMap">
<button disabled>{zoomLevel}</button>
</div>
);
};
const homeClick = () => {
let payload = {
isDefault: true,
selectedEnodeB: enodebID,
state: [],
dateTime: userMaxDate + " " + maxHour,
IMSI: imsi,
};
if (selectedFilters) {
payload = {
isDefault: false,
state: selectedFilters.state,
enodeb_id: enodebID,
IMSI: imsi,
dateTime: `${selectedFilters.date} ${selectedFilters.hour.value}`,
};
}
let obj = {};
if (urlSubscriptionData) {
obj[`${urlSubscriptionData.isDefault ? "selectedEnodeB" : "enodeb_id"}`] =
enodebID;
}

setLoading(true);
getEnodeUserLocationTrack(
urlSubscriptionData
? {
...urlSubscriptionData,
...obj,
IMSI: imsi,
dateTime: `${urlSubscriptionData.date} ${urlSubscriptionData.hour.value}`,
}
: payload
).then((response) => {
if (
response.data &&
response.data.userInfo &&
response.data.userInfo.length > 0
) {
let mapCenter = [];
let mapPosition = [];
let d = response.data.userInfo;
d.map((el) => {
mapPosition.push([el.lat, el.lon]);
});
let output = [];

d.forEach((item) => {
const existing = output.filter(function (v, i) {
return v["eNodeB ID"] == item["eNodeB ID"];
});
if (existing.length) {
const existingIndex = output.findIndex(
(el) => el["eNodeB ID"] === existing[0]["eNodeB ID"]
);
let add = output[existingIndex]["Call Drops"] + item["Call Drops"];
output[existingIndex]["Call Drops"] = add;
} else {
output.push({ ...item });
}
});
if (mapPosition.length === 1 || mapPosition.length === 2) {
mapCenter = mapPosition[0];
} else if (mapPosition.length % 2 === 0) {
mapCenter = mapPosition[mapPosition.length / 2];
} else {
mapCenter = mapPosition[(mapPosition.length + 1) / 2];
}
setPosition(mapCenter);
setZoom(11);
let callDropCount = response.data.userInfo.map(
(el) => el["Call Drops"]
);
callDropCount = callDropCount.reduce(function (a, b) {
return a + b;
}, 0);
setCallDrops(callDropCount);
setMapPosition(mapPosition);
setMapTableData(response.data.userInfo);
setMapData(d);
}
setLoading(false);
});
};
const getMapData = async (maxHour, userMaxDate) => {
setLoading(true);
let payload = {
isDefault: true,
selectedEnodeB: enodebID,
state: [],
dateTime: userMaxDate + " " + maxHour,
IMSI: imsi,
};
if (selectedFilters) {
payload = {
isDefault: false,
state: selectedFilters.state,
enodeb_id: enodebID,
IMSI: imsi,
dateTime: `${selectedFilters.date} ${selectedFilters.hour.value}`,
};
}
let obj = {};
if (urlSubscriptionData) {
obj[`${urlSubscriptionData.isDefault ? "selectedEnodeB" : "enodeb_id"}`] =
enodebID;
}
if (payLoadOfIMSI) {
payload = {
isDefault: false,
selectedEnodeB: payLoadOfIMSI.eNodeB,
state: [],
dateTime: payLoadOfIMSI.date,
IMSI: payLoadOfIMSI.IMSI,
};
}
await getEnodeUserLocationTrack(
urlSubscriptionData
? {
...urlSubscriptionData,
...obj,
IMSI: imsi,
dateTime: `${urlSubscriptionData.date} ${urlSubscriptionData.hour.value}`,
}
: payload
).then((response) => {
if (
response.data &&
response.data.userInfo &&
response.data.userInfo.length > 0
) {
let mapCenter = [];
let mapPosition = [];
let d = response.data.userInfo;
d.map((el) => {
mapPosition.push([el.lat, el.lon]);
});
let output = [];

d.forEach((item) => {
const existing = output.filter(function (v, i) {
return v["eNodeB ID"] == item["eNodeB ID"];
});
if (existing.length) {
const existingIndex = output.findIndex(
(el) => el["eNodeB ID"] === existing[0]["eNodeB ID"]
);
let add = output[existingIndex]["Call Drops"] + item["Call Drops"];
output[existingIndex]["Call Drops"] = add;
} else {
output.push({ ...item });
}
});

if (mapPosition.length === 1 || mapPosition.length === 2) {
mapCenter = mapPosition[0];
} else if (mapPosition.length % 2 == 0) {
mapCenter = mapPosition[mapPosition.length / 2];
} else {
mapCenter = mapPosition[(mapPosition.length + 1) / 2];
}
setPosition(mapCenter);
setZoom(11);
let callDropCount = response.data.userInfo.map(
(el) => el["Call Drops"]
);
callDropCount = callDropCount.reduce(function (a, b) {
return a + b;
}, 0);
setCallDrops(callDropCount);
setMapPosition(mapPosition);
setMapTableData(response.data.userInfo);
setMapData(output);
}else{
setMapTableData([]);
setMapData([]);
}
setLoading(false);
});
};

const verifyCallDrops = (enodebID) => {
let d = data.filter((el) => el["eNodeB ID"] === enodebID);
d = d.map((el) => el["Call Drops"]);
d = d.reduce((partialSum, a) => partialSum + a, 0);
return d;
};

function style() {
return {
fillColor: "transparent",
weight: 2,
opacity: 1,
color: "#ffffff",
fillOpacity: 1,
};
}
useEffect(() => {
load();
}, [data]);

useEffect(() => {
if(payLoadOfIMSI){
getMapData();
}
}, [payLoadOfIMSI]);

let colorValArr = [];
let kpiScoreArr = [];

if (data.length > 0) {
data.map((val, ind) => {
colorValArr.push(parseInt(val["Call Drops"]));
});
}

var uniqueColorValArr = colorValArr.filter(function (item, pos) {
return colorValArr.indexOf(item) === pos;
});
colorValArr = uniqueColorValArr.sort(SortByUTCDt);

var uniqueKpiValArr = kpiScoreArr.filter(function (item, pos) {
return kpiScoreArr.indexOf(item) === pos;
});
kpiScoreArr = uniqueKpiValArr.sort(SortByUTCDt);

function SortByUTCDt(a, b) {
return a < b ? -1 : a > b ? 1 : 0;
}

function getRTGColor(d) {
if (d === -1) {
return "#96afd4";
} else {
d = parseFloat(d);
colorValArr = colorValArr.sort(SortByUTCDt);
var colorsForRange;
if (isNaN(d)) {
colorsForRange = "#DCDCDC";
} else if (d === 0) {
colorsForRange = "#1C884F";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0)) &&
d < parseFloat(findQuantile(colorValArr, 0.1))
) {
colorsForRange = "#1C884F";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.1)) &&
d < parseFloat(findQuantile(colorValArr, 0.2))
) {
colorsForRange = "#3B965D";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.2)) &&
d < parseFloat(findQuantile(colorValArr, 0.3))
) {
colorsForRange = "#59A36A";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.3)) &&
d < parseFloat(findQuantile(colorValArr, 0.4))
) {
colorsForRange = "#78B177";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.4)) &&
d < parseFloat(findQuantile(colorValArr, 0.5))
) {
colorsForRange = "#97BE85";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.5)) &&
d < parseFloat(findQuantile(colorValArr, 0.6))
) {
colorsForRange = "#B5CC92";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.6)) &&
d < parseFloat(findQuantile(colorValArr, 0.7))
) {
colorsForRange = "#D4D99F";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.7)) &&
d < parseFloat(findQuantile(colorValArr, 0.8))
) {
colorsForRange = "#F2E7AC";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.8)) &&
d < parseFloat(findQuantile(colorValArr, 0.9))
) {
colorsForRange = "#FAB292";
} else if (
d >= parseFloat(findQuantile(colorValArr, 0.9)) &&
d <= parseFloat(findQuantile(colorValArr, 1))
) {
colorsForRange = "#F24D5B";
}

//if (colorValArr.length == 1) colorsForRange = "#DCDCDC";
return colorsForRange;
}
}
const buttonHandler = () => {
setShowPopUp(true);
};
const handleChange = () => {
setShowPopUp(false);
};
const topbtn = () => {
setShow(false);
};
return (
<Fragment>
{model ? (
show ? (
<Modal
animation={false}
className="deviceModelAlert heatmapp"
show={show}
onHide={closealertpopup}
backdrop="static"
centered
// style={{height:"120vh"}}
>
<Modal.Header className="mainclose">
<div
className="position-absolute"
style={{ top: "5px", right: "3px", cursor: "pointer" }}
>
<CloseSharpIcon
onClick={() => topbtn()}
style={{ height: "0.8em" }}
/>
</div>

<Modal.Body
className="p-0 row"
style={{
height: loading ? "57vh" : "100%",
// marginTop: "-0.7rem",
}}
>
<div>{loading ? <Loader /> : null}</div>
<div className="col">
{!loading &&
(data && data.length > 0 ? (
<div
className="d-flex justify-content-center"
style={{ marginLeft: "3.5rem" }}
>
<Modal.Header
className="tableheader"
style={{
// borderRadius: "11px",
// boxShadow: "1px 1px 8px 1px #d3d3d3",
// justifyContent: "center",
// display: "flex",
// position: "absolute",
// marginLeft:"5.2rem",
// zIndex:"10",
// backgroundColor:"white",
// width:"93%",
marginTop: "2rem",
// padding: "0.3rem",
}}
>
<Modal.Body>
<div>
<div
className="commonheaidngandtable"
style={{
display: "flex",
flexDirection: "column",
}}
>
<div>
<h4 className="cardTitle">
User Information
</h4>
<div className="underLineClass"></div>
</div>
<div className=" mappopup">
<div
className="tablealign"
style={{
display: "flex",
flexDirection: "row",
}}
>
{tableData && tableData.length > 0 && (
<>
<div className="d-flex userTrackInfo">
<span className="maptitleone">
IMSI
</span>
<span className="maptitletwo">
{tableData[0].IMSI}
</span>
</div>
<div className="d-flex userTrackInfo">
<span className="maptitleone">
MDN
</span>
<span className="maptitletwo">
{tableData[0].IMEI}
</span>
</div>
<div className="d-flex userTrackInfo">
<span className="maptitleone">
OEM
</span>
<span className="maptitletwo">
{tableData[0]["Software Version"]}
</span>
</div>
<div className="d-flex userTrackInfo">
<span className="maptitleone">
Device Model
</span>
<span className="maptitletwo">
{tableData[0]["Device"]}
</span>
</div>
<div
className="d-flex userTrackInfo allinfobtn align-items-end"
>
<div
className="popButtonclass d-flex"
style={{ textTransform: "none" }}
>
<button
className="align-items-center"
style={{
textTransform: "none",
display: "flex",
width: "100%",
backgroundColor: "#e0e0e0b8",
justifyContent: "space-evenly",
paddingRight: "0.25rem",
border: "none",
minWidth:"220px",
maxWidth:"220px",
height:"40px",
padding:"12px 24px",
borderRadius:"30px",
}}
// style={{height:"30px",
// width:"200px",
// display:"flex",
// border: "solid grey 2px solid",
// }}
onClick={() => buttonHandler()}
>
All Information
<div className="iconClassName">
<ArrowForwardIosIcon />
</div>
</button>
</div>
</div>
</>
)}
</div>
</div>
</div>
</div>
</Modal.Body>
</Modal.Header>
</div>
) : null)}
<div
className="d-flex justify-content-center"
style={{ marginLeft: "3.5rem" }}
>
{showPopUp
? tableData &&
tableData.length > 0 && (
<div className=" userlivetrackmap CallDropMapTable heatmapTable ">
<CommonTableComponent
title={""}
columns={tableColumns}
data={tableData}
exportFileName={""}
exportAllData={false}
sorting={true}
filtering={false}
pagination={true}
active={false}
search={false}
maxBodyHeight={350}
pageSize={tableData.length}
draggable={false}
exportCsv={false}
onRowClick={(tableData) => {}}
loading={false}
action={[
{
icon: () => (
<div
id="NewUserClass"
className="userlivetrackmaptable"
>
{/* <button className="button"> */}
<CloseSharpIcon />
{/* </button> */}
</div>
),
isFreeAction: true,
onClick: () => handleChange(),
},
]}
/>
</div>
)
: null}
</div>
</div>
{!loading &&
(data && data.length > 0 ? (
<div className="popup usermap ms-0">
{data && data.length > 0 ? (
<div
className="userLivetrack"
style={{ marginTop: "1rem", maxWidth: "100%" }}
>
<div
className="MapEmail"
onClick={() => {
// window.location.reload();
homeClick();
}}
>
<div style={{ padding: "7px 9px 8px 9px" }}>
<HomeIcon />
</div>
</div>
<div>
<MapContainer
id="map"
center={position}
zoom={zoom}
scrollWheelZoom={true}
height="600px"
dragging={true}
preferCanvas={false}
className="map"
zoomControl={false}
maxZoom={16}
minZoom={4}
>
<ZoomBar />
<ZoomButton />

<ChangeView center={position} zoom={zoom} />
<LayersControl position="topleft">
<LayersControl.BaseLayer checked name="Street">
<TileLayer
attribution=""
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Dark">
<TileLayer
attribution=""
url="http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="OSM">
<TileLayer
attribution=""
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Google">
<TileLayer
attribution=""
url="http://mt.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"
/>
</LayersControl.BaseLayer>
</LayersControl>
{data.length > 0
? data.map((el, key) => (
<Fragment key={key}>
<Marker
key={key}
position={[el.lat, el.lon]}
icon={
custumIcon[
colourCalculation(
el["Call Drops"],
"eNodeB Call Drop Count",
30
)
]
}
eventHandlers={{
click: (e) => {
setPosition([
e.latlng.lat,
e.latlng.lng,
]);
setZoom(16);
},
}}
>
<Tooltip>
<div>Date: {el["Report Time"]}</div>
<div>IMSI: {el.IMSI}</div>
<div>Device Model: {el.Device}</div>
<div>eNodeB: {el["eNodeB ID"]}</div>
<div>
Total Call Drop of eNodeB:{" "}
{el["EnodeB Call Drops"]}
</div>
<div>
Call Drop of the User:{" "}
{/* {verifyCallDrops(el["eNodeB ID"])} */}
{el["Call Drops"]}
</div>
{/* <div>
Call Drop of the User: {rowData["Call Drops"]}
</div> */}
</Tooltip>
</Marker>
</Fragment>
))
: null}
{
mapPosition.length > 0 && (
// props.data.splice(0, 5).map((el, key) => (
<Fragment>
<Polyline
positions={mapPosition}
color={"black"}
/>
</Fragment>
)
// ))
}
<TileLayer
attribution="Map&copy; Verizon DT Analytics team"
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png"
opacity={20}
/>
<Polygon positions={coordinates} />
{usJson && (
<GeoJSON data={usJson.features} style={style} />
)}

<UserTrackLegend
legendItems={legends}
legendTitle={props.legendTitle}
/>
</MapContainer>
</div>
</div>
) : null}
</div>
) : (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
// height: "50vh",
minHeight: "750px",
float: "right",
width: "100%",
fontWeight: "700",
}}
>
<h5 style={{ fontWeight: "700" }}>No Data Exists</h5>
</div>
))}
</Modal.Body>
</Modal.Header>
</Modal>
) : null
) : (
<div
className="linemapPopup"
style={{
height: loading ? "57vh" : "100%",
// marginTop: "-0.7rem",
}}
>
<div>{loading ? <Loader /> : null}</div>
<div className="col">
{!loading &&
(data && data.length > 0 ? (
<div
className="d-flex justify-content-center"
style={{ marginLeft: "3.5rem" }}
>
<Modal.Header className="tableheader usertrackhomeicon">
<Modal.Body>
<div>
<div
className="commonheaidngandtable"
style={{ display: "flex", flexDirection: "column" }}
>
<div>
<h4 className="cardTitle">User Information</h4>
<div className="underLineClass"></div>
</div>
<div className=" mappopup">
<div
className="tablealign"
style={{ display: "flex", flexDirection: "row" }}
>
{tableData && tableData.length > 0 && (
<>
<div className="d-flex userTrackInfo">
<span className="maptitleone">IMSI</span>
<span className="maptitletwo">
{tableData[0].IMSI}
</span>
</div>
<div className="d-flex userTrackInfo">
<span className="maptitleone">MDN</span>
<span className="maptitletwo">
{tableData[0].IMEI}
</span>
</div>
<div className="d-flex userTrackInfo">
<span className="maptitleone">OEM</span>
<span className="maptitletwo">
{tableData[0]["Software Version"]}
</span>
</div>
<div className="d-flex userTrackInfo">
<span className="maptitleone">
Device Model
</span>
<span className="maptitletwo">
{tableData[0]["Device"]}
</span>
</div>
<div
className="d-flex userTrackInfo allinfobtn align-items-end"

>
<div
className="popButtonclass d-flex"
style={{ textTransform: "none" }}
>
<button
className="align-items-center"
style={{
textTransform: "none",
display: "flex",
width: "100%",
borderRadius:"30px",
backgroundColor: "#e0e0e0b8",
justifyContent: "space-evenly",
paddingRight: "0.25rem",
border: "none",
minWidth:"220px",
maxWidth:"220px",
height:"40px",
padding:"12px 24px"
}}
onClick={() => buttonHandler()}
>
All Information
<div className="iconClassName">
<ArrowForwardIosIcon />
</div>
</button>
</div>
</div>
</>
)}
</div>
</div>
</div>
</div>
</Modal.Body>
</Modal.Header>
</div>
) : null)}
<div
className="d-flex justify-content-center"
style={{ marginLeft: "3.5rem" }}
>
{showPopUp
? tableData &&
tableData.length > 0 && (
<div className=" userlivetrackmap CallDropMapTable heatmapTable ">
<CommonTableComponent
title={""}
columns={tableColumns}
data={tableData}
exportFileName={""}
exportAllData={false}
sorting={true}
filtering={false}
pagination={true}
active={false}
search={false}
maxBodyHeight={350}
pageSize={tableData.length}
draggable={false}
exportCsv={false}
onRowClick={(tableData) => {}}
loading={false}
action={[
{
icon: () => (
<div className="userlivetrackmaptable">
{/* <Button className="button"> */}
<CloseSharpIcon />
{/* </Button> */}
</div>
),
isFreeAction: true,
onClick: () => handleChange(),
},
]}
/>
</div>
)
: null}
</div>
</div>
{!loading &&
(data && data.length > 0 ? (
<div className="popup usermap ms-0">
{data && data.length > 0 ? (
<div className="userLivetrack" style={{ maxWidth: "100%" }}>
<div
className="MapEmail"
onClick={() => {
// window.location.reload();
homeClick();
}}
style={{ zIndex: "9999" }}
>
<div style={{ padding: "7px 9px 8px 9px" }}>
<HomeIcon />
</div>
</div>
<div className="CalldropTableClickUserTrack">
<MapContainer
id="map"
center={position}
zoom={zoom}
scrollWheelZoom={true}
height="600px"
dragging={true}
preferCanvas={false}
className="map"
zoomControl={false}
maxZoom={16}
minZoom={4}
>
<ZoomBar />
<ZoomButtonTableUserTrackMap />
<ChangeView center={position} zoom={zoom} />
<LayersControl position="topleft">
<LayersControl.BaseLayer checked name="Street">
<TileLayer
attribution=""
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Dark">
<TileLayer
attribution=""
url="http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="OSM">
<TileLayer
attribution=""
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name="Google">
<TileLayer
attribution=""
url="http://mt.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"
/>
</LayersControl.BaseLayer>
</LayersControl>
{data.length > 0
? data.map((el, key) => (
<Fragment key={key}>
<Marker
key={key}
position={[el.lat, el.lon]}
icon={
custumIcon[
colourCalculation(
el["Call Drops"],
"eNodeB Call Drop Count",
30
)
]
}
eventHandlers={{
click: (e) => {
setPosition([e.latlng.lat, e.latlng.lng]);
setZoom(16);
},
}}
>
<Tooltip>
<div>Date: {el["Report Time"]}</div>
<div>IMSI: {el.IMSI}</div>
<div>Device Model: {el.Device}</div>
<div>eNodeB: {el["eNodeB ID"]}</div>
<div>
Total Call Drop of eNodeB:{" "}
{el["EnodeB Call Drops"]}
</div>
<div>
Call Drop of the User:{" "}
{/* {verifyCallDrops(el["eNodeB ID"])} */}
{el["Call Drops"]}
</div>
{/* <div>
Call Drop of the User: {rowData["Call Drops"]}
</div> */}
</Tooltip>
</Marker>
</Fragment>
))
: null}
{
mapPosition.length > 0 && (
// props.data.splice(0, 5).map((el, key) => (
<Fragment>
<Polyline
positions={mapPosition}
color={"black"}
/>
</Fragment>
)
// ))
}
<TileLayer
attribution="Map&copy; Verizon DT Analytics team"
url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}.png"
opacity={20}
/>
<Polygon positions={coordinates} />
{usJson && (
<GeoJSON data={usJson.features} style={style} />
)}

<UserTrackLegend
legendItems={legends}
legendTitle={props.legendTitle}
/>
</MapContainer>
</div>
</div>
) : null}
</div>
) : (
<div
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
// height: "50vh",
minHeight: "750px",
float: "right",
width: "100%",
fontWeight: "700",
}}
>
<h5 style={{ fontWeight: "700" }}>No Call Drop</h5>
</div>
))}
</div>
)}
</Fragment>
);
};

export default LiveTrackingMap;