+
Configure radius for geofence
)),
)}
- {!_.isEmpty(props.polygon) && (
+ {!_.isEmpty(polygon) && (
)}
- )),
-);
+ );
+};
export default MapComponent;
diff --git a/src/pages/Reporting/Reporting.js b/src/pages/Reporting/Reporting.js
index 8bef20fb..7fd018ba 100644
--- a/src/pages/Reporting/Reporting.js
+++ b/src/pages/Reporting/Reporting.js
@@ -250,8 +250,8 @@ const Reporting = () => {
}, [selectedShipment, markers, allGraphs, reports]);
const getShipmentValue = (value) => {
- let returnValue;
- if (selectedShipment[value] !== null) {
+ let returnValue = '';
+ if (!_.isEqual(selectedShipment[value], null)) {
if (moment(selectedShipment[value], true).isValid()) {
returnValue = moment(selectedShipment[value])
.tz(timeZone).format(`${dateFormat} ${timeFormat}`);
@@ -265,7 +265,7 @@ const Reporting = () => {
}
}
} else {
- returnValue = 'NA';
+ returnValue = 'N/A';
}
return returnValue;
};
@@ -330,9 +330,6 @@ const Reporting = () => {
const csvBody = rows.map((row) => columns.map((col, colIndex) => {
let cell = row[col.name];
- if (col.label === 'Date Time' && !_.isEmpty(cell)) {
- return escapeCSV(moment(cell).tz(timeZone).format(`${dateFormat} ${timeFormat}`));
- }
if (!row.location || row.location === 'Error retrieving address') {
row.location = 'N/A';
}
@@ -1002,12 +999,9 @@ const Reporting = () => {
screenshotMapCenter
noInitialInfo
markers={markers}
- googleMapURL={window.env.MAP_API_URL}
zoom={4}
setSelectedMarker={setSelectedMarker}
- loadingElement={
}
- containerElement={
}
- mapElement={
}
+ containerStyle={{ height: '625px' }}
unitOfMeasure={unitData}
/>
@@ -1072,10 +1066,6 @@ const Reporting = () => {
- }
- containerElement={(
-
- )}
- mapElement={
-
- }
+ containerStyle={{
+ height: '200px',
+ marginTop: isMobile() ? '10px' : '30px',
+ marginBottom: '14px',
+ }}
markers={[
{
lat: last_known_location
diff --git a/src/pages/Shipment/CreateShipment.js b/src/pages/Shipment/CreateShipment.js
index 4a8c8afd..e1c1f26a 100644
--- a/src/pages/Shipment/CreateShipment.js
+++ b/src/pages/Shipment/CreateShipment.js
@@ -1181,11 +1181,8 @@ const CreateShipment = ({ history, location }) => {
}
- containerElement={}
- mapElement={}
+ containerStyle={{ height: '300px', marginTop: '10px' }}
markers={[
{
lat: startingLocation && _.includes(startingLocation, ',') && parseFloat(startingLocation.split(',')[0]),
@@ -1255,11 +1252,8 @@ const CreateShipment = ({ history, location }) => {
}
- containerElement={}
- mapElement={}
+ containerStyle={{ height: '300px', marginTop: '10px' }}
markers={[
{
lat: endingLocation && _.includes(endingLocation, ',') && parseFloat(endingLocation.split(',')[0]),
diff --git a/src/pages/Shipment/Shipment.js b/src/pages/Shipment/Shipment.js
index 3cec70ae..96229507 100644
--- a/src/pages/Shipment/Shipment.js
+++ b/src/pages/Shipment/Shipment.js
@@ -1,3 +1,4 @@
+/* eslint-disable array-callback-return */
/* eslint-disable no-nested-ternary */
import React, { useEffect, useState } from 'react';
import _ from 'lodash';
@@ -41,6 +42,7 @@ import useAlert from '@hooks/useAlert';
import { useStore } from '@zustand/timezone/timezoneStore';
import './ShipmentStyles.css';
import { TIVE_GATEWAY_TIMES } from '@utils/mock';
+import { calculateLatLngBounds } from '@utils/utilMethods';
const Shipment = ({ history }) => {
const muiTheme = useTheme();
@@ -62,6 +64,8 @@ const Shipment = ({ history }) => {
const [expandedRows, setExpandedRows] = useState([]);
const [steps, setSteps] = useState([]);
const [isLoading, setLoading] = useState(false);
+ const [selectedCluster, setSelectedCluster] = useState({});
+ const [zoom, setZoom] = useState(4);
const { data: shipmentData, isLoading: isLoadingShipments, isFetching: isFetchingShipments } = useQuery(
['shipments', shipmentFilter, organization],
@@ -153,11 +157,21 @@ const Shipment = ({ history }) => {
sensorReportData,
);
const filteredRows = _.filter(formattedRows, { type: shipmentFilter });
- setRows(filteredRows);
+ if (_.isEmpty(selectedCluster)) {
+ setRows(filteredRows);
+ }
setAllMarkers(_.map(filteredRows, 'allMarkers'));
}, [shipmentFilter, shipmentData, custodianData, custodyData,
itemData, allGatewayData, sensorAlertData, sensorReportData]);
+ useEffect(() => {
+ if (!_.isEmpty(markers) || !_.isEmpty(selectedCluster)) {
+ setZoom(12);
+ } else {
+ setZoom(4);
+ }
+ }, [markers, selectedCluster]);
+
useEffect(() => {
if (selectedShipment) {
processMarkers(selectedShipment, true);
@@ -176,6 +190,22 @@ const Shipment = ({ history }) => {
}
}, [selectedShipment, expandedRows]);
+ useEffect(() => {
+ if (!_.isEmpty(selectedCluster) && !_.isEmpty(rows)) {
+ const { lat, lng } = selectedCluster;
+ const { radius } = user.organization;
+ const values = calculateLatLngBounds(lat, lng, radius);
+ const filteredRows = rows.filter((obj) => !_.isEmpty(obj.allMarkers));
+ const clusterFilteredRows = filteredRows.filter((obj) => {
+ const firstMarker = _.first(obj.allMarkers);
+ const isLatInRange = firstMarker.lat >= values.minLat && firstMarker.lat <= values.maxLat;
+ const isLngInRange = firstMarker.lng >= values.minLng && firstMarker.lng <= values.maxLng;
+ return isLatInRange && isLngInRange;
+ });
+ setRows(clusterFilteredRows);
+ }
+ }, [selectedCluster]);
+
const processMarkers = (shipment, setExpanded = false) => {
const dateFormat = !_.isEmpty(unitData) && _.find(unitData, (unit) => (_.toLower(unit.unit_of_measure_for) === 'date')).unit_of_measure;
const timeFormat = !_.isEmpty(unitData) && _.find(unitData, (unit) => (_.toLower(unit.unit_of_measure_for) === 'time')).unit_of_measure;
@@ -537,6 +567,7 @@ const Shipment = ({ history }) => {
setSelectedMarker({});
setExpandedRows([]);
setSteps([]);
+ setSelectedCluster({});
};
const renderSensorData = (marker) => {
@@ -673,6 +704,36 @@ const Shipment = ({ history }) => {
+ {!_.isEmpty(selectedCluster) && (
+
+ )}
@@ -687,20 +748,12 @@ const Shipment = ({ history }) => {
isMarkerShown={!_.isEmpty(markers)}
showPath
markers={markers}
- googleMapURL={window.env.MAP_API_URL}
- zoom={_.isEmpty(markers) ? 2.5 : 12}
+ zoom={zoom}
setSelectedMarker={setSelectedMarker}
- loadingElement={
-
- }
- containerElement={
-
- }
- mapElement={
-
- }
- clusterClick={processMarkers}
+ containerStyle={{ height: '600px' }}
unitOfMeasure={unitData}
+ setSelectedCluster={setSelectedCluster}
+ selectedCluster={selectedCluster}
/>
diff --git a/src/pages/Shipment/ShipmentStyles.css b/src/pages/Shipment/ShipmentStyles.css
index da6aa0b7..a1fc7b28 100644
--- a/src/pages/Shipment/ShipmentStyles.css
+++ b/src/pages/Shipment/ShipmentStyles.css
@@ -27,6 +27,17 @@
background-color: var(--color-palette-primary-main);
}
+.shipmentGoBackButton {
+ margin-bottom: 24px;
+ margin-left: 16px;
+ background-color: var(--color-palette-primary-main);
+ color: var(--color-palette-background-default);
+}
+
+.shipmentGoBackButton:hover {
+ background-color: var(--color-palette-primary-main);
+}
+
.shipmentTab {
color: var(--color-palette-background-default);
}
diff --git a/src/utils/utilMethods.js b/src/utils/utilMethods.js
index da90c6e2..3ea82aa1 100644
--- a/src/utils/utilMethods.js
+++ b/src/utils/utilMethods.js
@@ -93,3 +93,18 @@ export const dateDifference = (initialDate, finalDate) => {
const dateString = `${days} days, ${hours} hrs., ${minutes} min.`;
return dateString;
};
+
+export const calculateLatLngBounds = (lat, lng, miles) => {
+ const milesToLatDegree = miles / 69;
+ const maxLat = lat + milesToLatDegree;
+ const minLat = lat - milesToLatDegree;
+ const milesToLngDegree = miles / (69 * Math.cos(lat * (Math.PI / 180)));
+ const maxLng = lng + milesToLngDegree;
+ const minLng = lng - milesToLngDegree;
+ return {
+ maxLat,
+ minLat,
+ maxLng,
+ minLng,
+ };
+};