createorder
This commit is contained in:
joshikannan
75
src/pages/nearle/reports/mapWithRoute.js
Normal file
75
src/pages/nearle/reports/mapWithRoute.js
Normal file
@@ -0,0 +1,75 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { MapContainer, TileLayer, Marker, Popup, Polyline, Tooltip } from 'react-leaflet';
|
||||
import dayjs from 'dayjs';
|
||||
var utc = require('dayjs/plugin/utc');
|
||||
dayjs.extend(utc);
|
||||
|
||||
const MapWithRoute = ({ coordinates, additionalProps }) => {
|
||||
console.log(additionalProps.riderStart);
|
||||
console.log(additionalProps.riderEnd);
|
||||
const mapRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (mapRef.current && coordinates.length > 0) {
|
||||
const bounds = calculateBounds(coordinates);
|
||||
mapRef.current.fitBounds(bounds);
|
||||
}
|
||||
}, [coordinates]);
|
||||
|
||||
const calculateBounds = (coords) => {
|
||||
const latitudes = coords.map((coord) => coord.lat);
|
||||
const longitudes = coords.map((coord) => coord.lng);
|
||||
const minLat = Math.min(...latitudes);
|
||||
const maxLat = Math.max(...latitudes);
|
||||
const minLng = Math.min(...longitudes);
|
||||
const maxLng = Math.max(...longitudes);
|
||||
return [
|
||||
[minLat, minLng],
|
||||
[maxLat, maxLng]
|
||||
];
|
||||
};
|
||||
|
||||
const limeOptions = { color: 'blue', weight: 10 };
|
||||
const length = coordinates.length;
|
||||
const midlenght = Math.round(coordinates.length / 2);
|
||||
const start = coordinates[0];
|
||||
const end = coordinates[length - 1];
|
||||
const center = coordinates[midlenght];
|
||||
|
||||
return (
|
||||
coordinates &&
|
||||
coordinates.length > 0 && (
|
||||
<div id="map" style={{ width: '80vw', height: '80vh', margin: '0 auto' }}>
|
||||
<MapContainer center={center} zoom={15} scrollWheelZoom={false} style={{ height: '100%' }} ref={mapRef}>
|
||||
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
|
||||
<Marker position={start}>
|
||||
<Tooltip hover direction="bottom">
|
||||
<span>{`Pickup Point: ${dayjs(additionalProps.riderStart).utc().format('DD-MM-YYYY')} (${dayjs(additionalProps.riderStart)
|
||||
.utc()
|
||||
.format('hh:mm A')})`}</span>
|
||||
</Tooltip>
|
||||
{/* <Popup>{`Pickup Point ${dayjs(additionalProps.riderStart).utc().format('DD-MM-YYYY')} (${dayjs(additionalProps.riderStart)
|
||||
.utc()
|
||||
.format('hh:mm A')}) `}</Popup> */}
|
||||
</Marker>
|
||||
<Marker position={end}>
|
||||
<Tooltip hover direction="bottom">
|
||||
<span>{`Drop Point: ${dayjs(additionalProps.riderEnd).utc().format('DD-MM-YYYY')} (${dayjs(additionalProps.riderEnd)
|
||||
.utc()
|
||||
.format('hh:mm A')})`}</span>
|
||||
</Tooltip>
|
||||
{/* <Popup>{`Drop Point ${dayjs(additionalProps.riderEnd).utc().format('DD-MM-YYYY')} (${dayjs(additionalProps.riderEnd)
|
||||
.utc()
|
||||
.format('hh:mm A')}) `}</Popup> */}
|
||||
</Marker>
|
||||
{/* <Marker position={center}>
|
||||
<Popup>Center Point</Popup>
|
||||
</Marker> */}
|
||||
<Polyline pathOptions={limeOptions} positions={coordinates} />
|
||||
</MapContainer>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
export default MapWithRoute;
|
||||
@@ -7,6 +7,9 @@ import { Empty } from 'antd';
|
||||
import ClearIcon from '@mui/icons-material/Clear';
|
||||
import { TableVirtuoso } from 'react-virtuoso';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import { SlLocationPin } from 'react-icons/sl';
|
||||
import MapWithRoute from './mapWithRoute';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
|
||||
// material-ui
|
||||
import {
|
||||
@@ -107,6 +110,12 @@ const headCells = [
|
||||
disablePadding: false,
|
||||
label: '#'
|
||||
},
|
||||
// {
|
||||
// id: 'map',
|
||||
// disablePadding: false,
|
||||
// label: '^'
|
||||
// },
|
||||
|
||||
{
|
||||
id: 'tenantname',
|
||||
disablePadding: false,
|
||||
@@ -196,6 +205,8 @@ export default function ordersDetails() {
|
||||
const [startdate, setStartdate] = useState(dayjs().format('YYYY-MM-DD'));
|
||||
const [enddate, setEnddate] = useState(dayjs().format('YYYY-MM-DD'));
|
||||
const [open, setOpen] = useState(false);
|
||||
const [open1, setOpen1] = useState(false);
|
||||
|
||||
const [dateselect, setDateselect] = useState('select');
|
||||
const [tabstatus1, setTabstatus1] = useState('Today');
|
||||
const [datestatus, setDatestatus] = useState('Today');
|
||||
@@ -211,6 +222,38 @@ export default function ordersDetails() {
|
||||
const [searchword, setSearchword] = useState('');
|
||||
const [count, setCount] = useState(0);
|
||||
const theme = useTheme();
|
||||
const [riderCoordinates, setRiderCoordinates] = useState([]);
|
||||
const [riderStart, setRiderStart] = useState();
|
||||
const [riderEnd, setRiderEnd] = useState();
|
||||
|
||||
const getdeliverylogs = async (id) => {
|
||||
console.log('deliveryid', id);
|
||||
try {
|
||||
const res = await axios.get(`${process.env.REACT_APP_URL}/deliveries/getdeliverylogs/?deliveryid=${id}`);
|
||||
console.log('getdeliverylogs', res.data.details);
|
||||
const datas = res.data.details;
|
||||
if (datas.length != 0) {
|
||||
setRiderStart(datas[0].logdate);
|
||||
setRiderEnd(datas[datas.length - 1].logdate);
|
||||
const coData = datas.map((data) => ({ lat: data.latitude, lng: data.longitude }));
|
||||
console.log('coData', coData);
|
||||
setRiderCoordinates(coData);
|
||||
setOpen1(true);
|
||||
} else {
|
||||
opentoast('No Logs Found ', 'error', 2000);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('getdeliverylogs', error);
|
||||
}
|
||||
};
|
||||
|
||||
const opentoast = (message, variant, time) => {
|
||||
enqueueSnackbar(message, {
|
||||
variant: variant,
|
||||
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
||||
autoHideDuration: time ? time : 1500
|
||||
});
|
||||
};
|
||||
|
||||
// ==============================|| textFieldRef (cmd+k)||============================== //
|
||||
useEffect(() => {
|
||||
@@ -424,7 +467,6 @@ export default function ordersDetails() {
|
||||
return (
|
||||
<>
|
||||
<TitleCard title="Orders Details" />
|
||||
|
||||
<Paper content={false} sx={{ border: '1px solid #eeeeee', borderBottom: 'none' }}>
|
||||
<Grid container sx={{ display: 'flex', alignItems: 'center', m: 2 }}>
|
||||
<Grid item xs={4}>
|
||||
@@ -664,7 +706,8 @@ export default function ordersDetails() {
|
||||
if (typeof row === 'number') return null;
|
||||
const isItemSelected = isSelected(row.name);
|
||||
const labelId = `enhanced-table-checkbox-${index}`;
|
||||
console.log('rows.length', rows.length);
|
||||
// console.log('rows.length', rows.length);
|
||||
console.log('filteredOrders', filteredOrders);
|
||||
return (
|
||||
filteredOrders.length !== 0 && (
|
||||
<TableRow
|
||||
@@ -688,7 +731,15 @@ export default function ordersDetails() {
|
||||
/>
|
||||
</TableCell> */}
|
||||
<TableCell sx={{ width: '10px' }}>{index + 1}</TableCell>
|
||||
|
||||
{/* <TableCell
|
||||
sx={{ width: '10px', cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
console.log('row', row);
|
||||
getdeliverylogs(row.deliveryid);
|
||||
}}
|
||||
>
|
||||
{<SlLocationPin />}
|
||||
</TableCell> */}
|
||||
<TableCell
|
||||
sx={{
|
||||
textAlign: 'start'
|
||||
@@ -867,7 +918,7 @@ export default function ordersDetails() {
|
||||
row.actualkms == '' ||
|
||||
row.actualkms == null
|
||||
? parseInt(0).toFixed(1)
|
||||
: parseInt(row.actualkms).toFixed(1)
|
||||
: row.actualkms
|
||||
}
|
||||
size="small"
|
||||
color="success"
|
||||
@@ -1038,6 +1089,41 @@ export default function ordersDetails() {
|
||||
</Button>
|
||||
</Stack>
|
||||
</Dialog>
|
||||
{/* ========================================= || MapWithRoute || ========================================= */}
|
||||
{/* <Dialog
|
||||
open={open1}
|
||||
onClose={() => {
|
||||
setOpen1(false);
|
||||
}}
|
||||
maxWidth={'lg'}
|
||||
fullWidth
|
||||
>
|
||||
<DialogTitle
|
||||
sx={{
|
||||
// bgcolor: theme.palette.primary.main,
|
||||
// color: 'white',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h4">Rider Route</Typography>
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
setOpen1(false);
|
||||
}}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
</DialogTitle>
|
||||
{riderCoordinates && (
|
||||
<div>
|
||||
<MapWithRoute coordinates={riderCoordinates} additionalProps={{ riderStart, riderEnd }} />
|
||||
</div>
|
||||
)}
|
||||
</Dialog> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user