createorder
This commit is contained in:
joshikannan
49
package-lock.json
generated
49
package-lock.json
generated
@@ -34,6 +34,7 @@
|
||||
"geolib": "^3.3.4",
|
||||
"jsonwebtoken": "^9.0.0",
|
||||
"jwt-decode": "^3.1.2",
|
||||
"leaflet": "^1.9.4",
|
||||
"lodash": "^4.17.21",
|
||||
"mui-daterange-picker": "^1.0.5",
|
||||
"notistack": "^3.0.1",
|
||||
@@ -50,6 +51,7 @@
|
||||
"react-google-autocomplete": "^2.7.3",
|
||||
"react-icons": "^4.12.0",
|
||||
"react-intl": "^6.4.1",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-loading-icons": "^1.1.0",
|
||||
"react-phone-number-input": "^3.3.10",
|
||||
"react-redux": "^8.0.5",
|
||||
@@ -4109,6 +4111,16 @@
|
||||
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
|
||||
"integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
|
||||
},
|
||||
"node_modules/@react-leaflet/core": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
|
||||
"integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@reduxjs/toolkit": {
|
||||
"version": "1.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
|
||||
@@ -13458,6 +13470,11 @@
|
||||
"language-subtag-registry": "~0.3.2"
|
||||
}
|
||||
},
|
||||
"node_modules/leaflet": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
|
||||
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
|
||||
},
|
||||
"node_modules/leven": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
|
||||
@@ -16944,6 +16961,19 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"node_modules/react-leaflet": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
|
||||
"integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
|
||||
"dependencies": {
|
||||
"@react-leaflet/core": "^2.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.9.0",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-loading-icons": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-loading-icons/-/react-loading-icons-1.1.0.tgz",
|
||||
@@ -23201,6 +23231,12 @@
|
||||
"resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz",
|
||||
"integrity": "sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA=="
|
||||
},
|
||||
"@react-leaflet/core": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
|
||||
"integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
|
||||
"requires": {}
|
||||
},
|
||||
"@reduxjs/toolkit": {
|
||||
"version": "1.9.5",
|
||||
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
|
||||
@@ -30032,6 +30068,11 @@
|
||||
"language-subtag-registry": "~0.3.2"
|
||||
}
|
||||
},
|
||||
"leaflet": {
|
||||
"version": "1.9.4",
|
||||
"resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
|
||||
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
|
||||
},
|
||||
"leven": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
|
||||
@@ -32350,6 +32391,14 @@
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
|
||||
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
|
||||
},
|
||||
"react-leaflet": {
|
||||
"version": "4.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
|
||||
"integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
|
||||
"requires": {
|
||||
"@react-leaflet/core": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"react-loading-icons": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/react-loading-icons/-/react-loading-icons-1.1.0.tgz",
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
"geolib": "^3.3.4",
|
||||
"jsonwebtoken": "^9.0.0",
|
||||
"jwt-decode": "^3.1.2",
|
||||
"leaflet": "^1.9.4",
|
||||
"lodash": "^4.17.21",
|
||||
"mui-daterange-picker": "^1.0.5",
|
||||
"notistack": "^3.0.1",
|
||||
@@ -45,6 +46,7 @@
|
||||
"react-google-autocomplete": "^2.7.3",
|
||||
"react-icons": "^4.12.0",
|
||||
"react-intl": "^6.4.1",
|
||||
"react-leaflet": "^4.2.1",
|
||||
"react-loading-icons": "^1.1.0",
|
||||
"react-phone-number-input": "^3.3.10",
|
||||
"react-redux": "^8.0.5",
|
||||
|
||||
@@ -29,7 +29,9 @@ import {
|
||||
Switch,
|
||||
CardHeader,
|
||||
Card,
|
||||
OutlinedInput
|
||||
OutlinedInput,
|
||||
FormGroup,
|
||||
FormControlLabel
|
||||
} from '@mui/material';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { Empty } from 'antd';
|
||||
@@ -387,6 +389,7 @@ const Createorder1 = () => {
|
||||
const [stafflist, setStafflist] = useState([]);
|
||||
const [loading2, setLoading2] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [btnLoading, setBtnLoading] = useState(false);
|
||||
const [shiftarr, setShiftarr] = useState([]);
|
||||
const [shiftarr1, setShiftarr1] = useState([]);
|
||||
const [orderarr, setOrderarr] = useState([]);
|
||||
@@ -433,6 +436,14 @@ const Createorder1 = () => {
|
||||
const [appLocaLat, setAppLocaLat] = useState();
|
||||
const [appLocaLng, setAppLocaLng] = useState();
|
||||
const [appLocaRadius, setAppLocaRadius] = useState();
|
||||
const [isNumChange1, setIsNumChange1] = useState(0);
|
||||
const [isNumChange2, setIsNumChange2] = useState(0);
|
||||
const [showCheck1, setShowCheck1] = useState(0);
|
||||
const [showCheck2, setShowCheck2] = useState(0);
|
||||
const [pickNum, setPickNum] = useState();
|
||||
const [dropNum, setdropNum] = useState();
|
||||
const [numErr1, setNumErr1] = useState(false);
|
||||
const [numErr2, setNumErr2] = useState(false);
|
||||
const [isSms, setIsSms] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -801,13 +812,13 @@ const Createorder1 = () => {
|
||||
cancellled: '',
|
||||
categoryid: +tenant.categoryid,
|
||||
configid: +localStorage.getItem('configid'),
|
||||
customerid: +pickCust.customerid || 0,
|
||||
customerid: isNumChange1 == 0 ? +pickCust.customerid || 0 : 0,
|
||||
deliveryaddress: dropCust.address || '',
|
||||
deliverycharge: +totalCharge.toFixed(2) || 0,
|
||||
deliverycity: dropCust.city || '',
|
||||
deliverycontactno: dropCust.contactno || '',
|
||||
deliverycustomer: dropCust.firstname || '',
|
||||
deliveryid: dropCust.customerid || 0,
|
||||
deliveryid: isNumChange2 == 0 ? +dropCust.customerid || 0 : 0,
|
||||
deliverylandmark: dropCust.landmark || '',
|
||||
deliverylat: dropCust.latitude.toString(),
|
||||
deliverylocation: dropCust.suburb || '',
|
||||
@@ -859,7 +870,7 @@ const Createorder1 = () => {
|
||||
configid: parseInt(localStorage.getItem('configid')),
|
||||
contactno: pickCust.contactno || '',
|
||||
customertoken: '',
|
||||
customerid: pickCust.customerid || 0,
|
||||
customerid: isNumChange1 == 0 ? pickCust.customerid || 0 : 0,
|
||||
devicetype: '',
|
||||
deviceid: '',
|
||||
dialcode: '+91',
|
||||
@@ -885,7 +896,7 @@ const Createorder1 = () => {
|
||||
configid: parseInt(localStorage.getItem('configid')),
|
||||
contactno: dropCust.contactno || '',
|
||||
customertoken: '',
|
||||
customerid: dropCust.customerid || 0,
|
||||
customerid: isNumChange2 == 0 ? dropCust.customerid || 0 : 0,
|
||||
devicetype: '',
|
||||
deviceid: '',
|
||||
dialcode: '+91',
|
||||
@@ -906,33 +917,37 @@ const Createorder1 = () => {
|
||||
};
|
||||
console.log('createsubmitobj2', arr);
|
||||
if (!pickCust.firstname) {
|
||||
opentoast('Enter Pickup Contact Name ', 'warning');
|
||||
opentoast('Enter Pickup Contact Name ', 'warning', 2000);
|
||||
} else if (!pickCust.contactno) {
|
||||
opentoast('Enter Pickup Contact Number ', 'warning');
|
||||
opentoast('Enter Pickup Contact Number ', 'warning', 2000);
|
||||
} else if (pickCust.contactno.length != 10) {
|
||||
opentoast('Check Pickup Contact Number ', 'error', 2000);
|
||||
} else if (!pickCust.suburb) {
|
||||
opentoast('Enter Pickup Location ', 'warning');
|
||||
opentoast('Enter Pickup Location ', 'warning', 2000);
|
||||
} else if (!pickCust.city) {
|
||||
opentoast('Enter Pickup City ', 'warning');
|
||||
opentoast('Enter Pickup City ', 'warning', 2000);
|
||||
} else if (!pickCust.postcode) {
|
||||
opentoast('Enter Pickup Postcode ', 'warning');
|
||||
opentoast('Enter Pickup Postcode ', 'warning', 2000);
|
||||
} else if (!pickCust.landmark) {
|
||||
opentoast('Enter Pickup Landmark ', 'warning');
|
||||
opentoast('Enter Pickup Landmark ', 'warning', 2000);
|
||||
} else if (!dropCust.firstname) {
|
||||
opentoast('Enter Drop Contact Name ', 'warning');
|
||||
opentoast('Enter Drop Contact Name ', 'warning', 2000);
|
||||
} else if (!dropCust.contactno) {
|
||||
opentoast('Enter Drop Contact Number', 'warning');
|
||||
opentoast('Enter Drop Contact Number', 'warning', 2000);
|
||||
} else if (dropCust.contactno.length !== 10) {
|
||||
opentoast('Check Drop Contact Number ', 'error', 2000);
|
||||
} else if (!dropCust.suburb) {
|
||||
opentoast('Enter Drop Suburb ', 'warning');
|
||||
opentoast('Enter Drop Suburb ', 'warning', 2000);
|
||||
} else if (!dropCust.city) {
|
||||
opentoast('Enter Drop City ', 'warning');
|
||||
opentoast('Enter Drop City ', 'warning', 2000);
|
||||
} else if (!dropCust.postcode) {
|
||||
opentoast('Enter Drop postcode ', 'warning');
|
||||
opentoast('Enter Drop postcode ', 'warning', 2000);
|
||||
} else if (!dropCust.landmark) {
|
||||
opentoast('Enter Drop Landmark ', 'warning');
|
||||
opentoast('Enter Drop Landmark ', 'warning', 2000);
|
||||
} else if (!selectedtime) {
|
||||
opentoast('Choose deliverytime ', 'warning');
|
||||
opentoast('Choose deliverytime ', 'warning', 2000);
|
||||
} else if (!setSubCatId) {
|
||||
opentoast('Choose SubCategory ', 'warning');
|
||||
opentoast('Choose SubCategory ', 'warning', 2000);
|
||||
} else {
|
||||
try {
|
||||
const createRes = await axios.post(`${process.env.REACT_APP_URL2}/orders/createorder`, arr);
|
||||
@@ -1392,7 +1407,7 @@ const Createorder1 = () => {
|
||||
setIsCustomerOpen(true);
|
||||
setpickordrop(1);
|
||||
setPickCust({});
|
||||
setAddId1(1);
|
||||
|
||||
setInputValue2('');
|
||||
setSearchCustList('');
|
||||
}
|
||||
@@ -1464,32 +1479,6 @@ const Createorder1 = () => {
|
||||
|
||||
<Grid item xs={12} sx={{}}>
|
||||
<Grid container spacing={4}>
|
||||
{/* ====================================== ||Contact Number(pick) || ====================================== */}
|
||||
<Grid item xs={6}>
|
||||
<TextField
|
||||
disabled={!isLocation}
|
||||
fullWidth
|
||||
type="number"
|
||||
InputProps={{
|
||||
inputProps: {
|
||||
maxLength: 10
|
||||
},
|
||||
startAdornment: (
|
||||
<IconButton>
|
||||
<FaPhoneAlt />
|
||||
</IconButton>
|
||||
)
|
||||
}}
|
||||
variant="outlined"
|
||||
label="Contact Number"
|
||||
value={pickCust.contactno}
|
||||
onChange={(e) => {
|
||||
if (e.target.value.length <= 10) {
|
||||
setPickCust({ ...pickCust, contactno: e.target.value });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
{/* ====================================== ||Contact Name (pick) || ====================================== */}
|
||||
<Grid item xs={6}>
|
||||
<TextField
|
||||
@@ -1511,9 +1500,44 @@ const Createorder1 = () => {
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
{/* ====================================== ||Contact Number(pick) || ====================================== */}
|
||||
<Grid item xs={6}>
|
||||
<TextField
|
||||
error={numErr1}
|
||||
disabled={!isLocation}
|
||||
fullWidth
|
||||
type="number"
|
||||
InputProps={{
|
||||
inputProps: {
|
||||
maxLength: 10
|
||||
},
|
||||
startAdornment: (
|
||||
<IconButton>
|
||||
<FaPhoneAlt color={numErr1 && 'red'} />
|
||||
</IconButton>
|
||||
)
|
||||
}}
|
||||
variant="outlined"
|
||||
label="Contact Number"
|
||||
value={pickCust.contactno}
|
||||
onChange={(e) => {
|
||||
if (e.target.value.length <= 10) {
|
||||
setPickCust({ ...pickCust, contactno: e.target.value });
|
||||
}
|
||||
if (pickNum == e.target.value) {
|
||||
setShowCheck1(0);
|
||||
} else {
|
||||
setShowCheck1(1);
|
||||
}
|
||||
if (e.target.value.length < 10) {
|
||||
setNumErr1(true);
|
||||
} else {
|
||||
setNumErr1(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
{/* ====================================== || Address (pick) || ====================================== */}
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Stack spacing={1.25} sx={{ mt: 0 }}>
|
||||
{addId1 == 0 ? (
|
||||
@@ -1691,6 +1715,24 @@ const Createorder1 = () => {
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
{/* ====================================== ||Checkbox save for later (pick) || ====================================== */}
|
||||
{showCheck1 == 1 && (
|
||||
<Grid item xs={12} sx={{ display: 'flex', justifyContent: 'end' }}>
|
||||
<FormGroup>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={isNumChange1 === 1}
|
||||
onChange={(e) => {
|
||||
setIsNumChange1(e.target.checked ? 1 : 0);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="Save For Later"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* <Stack
|
||||
@@ -1755,7 +1797,7 @@ const Createorder1 = () => {
|
||||
} else {
|
||||
setIsCustomerOpen(true);
|
||||
setpickordrop(2);
|
||||
setAddId2(1);
|
||||
|
||||
setInputValue3('');
|
||||
setSearchCustList('');
|
||||
}
|
||||
@@ -1831,29 +1873,6 @@ const Createorder1 = () => {
|
||||
|
||||
<Grid item xs={12}>
|
||||
<Grid container spacing={4}>
|
||||
{/* ====================================== ||Contact Number (drop) || ====================================== */}
|
||||
<Grid item xs={6}>
|
||||
<TextField
|
||||
disabled={!isLocation}
|
||||
fullWidth
|
||||
type="number"
|
||||
variant="outlined"
|
||||
label="Contact Number"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<IconButton>
|
||||
<FaPhoneAlt />
|
||||
</IconButton>
|
||||
)
|
||||
}}
|
||||
value={dropCust.contactno}
|
||||
onChange={(e) => {
|
||||
if (e.target.value.length <= 10) {
|
||||
setDropCust({ ...dropCust, contactno: e.target.value });
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
{/* ====================================== ||Contact Name (drop) || ====================================== */}
|
||||
<Grid item xs={6}>
|
||||
<TextField
|
||||
@@ -1875,7 +1894,40 @@ const Createorder1 = () => {
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
{/* ====================================== ||Contact Number (drop) || ====================================== */}
|
||||
<Grid item xs={6}>
|
||||
<TextField
|
||||
disabled={!isLocation}
|
||||
error={numErr2}
|
||||
fullWidth
|
||||
type="number"
|
||||
variant="outlined"
|
||||
label="Contact Number"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<IconButton>
|
||||
<FaPhoneAlt color={numErr2 && 'red'} />
|
||||
</IconButton>
|
||||
)
|
||||
}}
|
||||
value={dropCust.contactno}
|
||||
onChange={(e) => {
|
||||
if (e.target.value.length <= 10) {
|
||||
setDropCust({ ...dropCust, contactno: e.target.value });
|
||||
}
|
||||
if (dropNum == e.target.value) {
|
||||
setShowCheck2(0);
|
||||
} else {
|
||||
setShowCheck2(1);
|
||||
}
|
||||
if (e.target.value.length < 10) {
|
||||
setNumErr2(true);
|
||||
} else {
|
||||
setNumErr2(false);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<Stack spacing={1.25} sx={{ mt: 0 }}>
|
||||
{addId2 == 0 ? (
|
||||
@@ -2054,6 +2106,24 @@ const Createorder1 = () => {
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
{/* ====================================== ||Checkbox save for later (drop) || ====================================== */}
|
||||
{showCheck2 == 1 && (
|
||||
<Grid item xs={12} sx={{ display: 'flex', justifyContent: 'end' }}>
|
||||
<FormGroup>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={isNumChange2 === 1}
|
||||
onChange={(e) => {
|
||||
setIsNumChange2(e.target.checked ? 1 : 0);
|
||||
}}
|
||||
/>
|
||||
}
|
||||
label="Save For Later"
|
||||
/>
|
||||
</FormGroup>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* <Stack
|
||||
@@ -2077,7 +2147,7 @@ const Createorder1 = () => {
|
||||
</Grid>
|
||||
{/* ================================================= || Time || ================================================= */}
|
||||
<Grid item xs={12} sm={6}>
|
||||
<MainCard sx={{ mt: 2 }}>
|
||||
<MainCard sx={{ mt: 2, height: '390px' }}>
|
||||
<Grid container>
|
||||
<Grid item xs={12}>
|
||||
<Typography variant="h5">Date</Typography>
|
||||
@@ -2185,29 +2255,18 @@ const Createorder1 = () => {
|
||||
</MainCard>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} sx={{}}>
|
||||
<MainCard sx={{ mt: 2, height: 330 }}>
|
||||
<MainCard sx={{ mt: 2, height: '390px' }}>
|
||||
{showDistance && (
|
||||
<Stack sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', mb: 3 }}>
|
||||
<Stack spacing={1.5}>
|
||||
<Typography variant="h5">Distance</Typography>
|
||||
|
||||
<Chip label={`Distance: ${distance} km`} size="medium" variant="contained" color="primary" />
|
||||
</Stack>
|
||||
<Stack spacing={1.5}>
|
||||
<Typography variant="h5">Charges</Typography>
|
||||
<Chip label={`Charge: ₹${totalCharge.toFixed(2)}`} size="medium" variant="contained" color="primary" />
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
<Stack direction={'row'} justifyContent={'space-between'}>
|
||||
<Typography variant="h5">SMS Delivery</Typography>
|
||||
<Switch
|
||||
checked={isSms === 1}
|
||||
onChange={(e) => {
|
||||
setIsSms(e.target.checked ? 1 : 0);
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack direction={'column'} justifyContent={'space-between'} sx={{ mb: 2 }}>
|
||||
<Typography variant="h5">Category</Typography>
|
||||
<Autocomplete
|
||||
disablePortal
|
||||
@@ -2225,6 +2284,7 @@ const Createorder1 = () => {
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
<Typography variant="h5">Weight</Typography>
|
||||
<Stack direction={'row'} justifyContent={'space-evenly'} sx={{ border: '1px solid #eee', my: 2, py: 2 }}>
|
||||
<Chip
|
||||
@@ -2258,6 +2318,15 @@ const Createorder1 = () => {
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack direction={'row'} justifyContent={'space-between'} sx={{ mt: 4 }}>
|
||||
<Typography variant="h5">SMS Delivery</Typography>
|
||||
<Switch
|
||||
checked={isSms === 1}
|
||||
onChange={(e) => {
|
||||
setIsSms(e.target.checked ? 1 : 0);
|
||||
}}
|
||||
/>
|
||||
</Stack>
|
||||
</MainCard>
|
||||
</Grid>
|
||||
</Grid>
|
||||
@@ -2284,24 +2353,26 @@ const Createorder1 = () => {
|
||||
</Grid>
|
||||
<Stack direction="row" justifyContent={'end'} sx={{ mt: 2, width: '100%' }}>
|
||||
<Button
|
||||
size="medium"
|
||||
disabled={!showDistance}
|
||||
variant="contained"
|
||||
sx={{
|
||||
'&:hover': {
|
||||
bgcolor: 'white',
|
||||
color: theme.palette.primary.main,
|
||||
border: `1px solid ${theme.palette.primary.main}`
|
||||
}
|
||||
}}
|
||||
variant="outlined"
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
setBtnLoading(true);
|
||||
createsubmitobj2();
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
setBtnLoading(false);
|
||||
}, 1000);
|
||||
}}
|
||||
sx={{
|
||||
'&:hover': {
|
||||
transform: 'scale(1.05)',
|
||||
transition: 'transform 0.3s ease'
|
||||
}
|
||||
}}
|
||||
>
|
||||
Create
|
||||
{btnLoading ? <CircularProgress color="primary" size={20} thickness={10} /> : 'Create'}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Grid>
|
||||
@@ -2429,13 +2500,16 @@ const Createorder1 = () => {
|
||||
setIsCustomerOpen(false);
|
||||
if (pickordrop === 1) {
|
||||
console.log('PickupClient', address);
|
||||
|
||||
setAddId1(1);
|
||||
setStartPoint({ latitude: address.latitude, longitude: address.longitude });
|
||||
setPickCust(address);
|
||||
setPickNum(address.contactno);
|
||||
} else {
|
||||
console.log('DropClient', address);
|
||||
setDropCust(address);
|
||||
setAddId2(1);
|
||||
setEndPoint({ latitude: address.latitude, longitude: address.longitude });
|
||||
setDropCust(address);
|
||||
setdropNum(address.contactno);
|
||||
}
|
||||
}}
|
||||
disabled={pickCust.customerid === address.customerid}
|
||||
|
||||
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> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
17
yarn.lock
17
yarn.lock
@@ -2069,6 +2069,11 @@
|
||||
resolved "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-4.0.2.tgz"
|
||||
integrity sha512-/RVXdLvJxLg4QKvMoM5WlwNR9ViO9z8B/qPcc+C0Sa/teJY7QG7kJ441DwzOjMYEY7GmU4dj5EcGHIkKZiQZCA==
|
||||
|
||||
"@react-leaflet/core@^2.1.0":
|
||||
version "2.1.0"
|
||||
resolved "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz"
|
||||
integrity sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==
|
||||
|
||||
"@reduxjs/toolkit@^1.9.5":
|
||||
version "1.9.5"
|
||||
resolved "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz"
|
||||
@@ -7221,6 +7226,11 @@ language-tags@=1.0.5:
|
||||
dependencies:
|
||||
language-subtag-registry "~0.3.2"
|
||||
|
||||
leaflet@^1.9.0, leaflet@^1.9.4:
|
||||
version "1.9.4"
|
||||
resolved "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz"
|
||||
integrity sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==
|
||||
|
||||
leven@^3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz"
|
||||
@@ -9255,6 +9265,13 @@ react-is@^18.2.0:
|
||||
resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
|
||||
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
|
||||
|
||||
react-leaflet@^4.2.1:
|
||||
version "4.2.1"
|
||||
resolved "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz"
|
||||
integrity sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==
|
||||
dependencies:
|
||||
"@react-leaflet/core" "^2.1.0"
|
||||
|
||||
react-loading-icons@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.npmjs.org/react-loading-icons/-/react-loading-icons-1.1.0.tgz"
|
||||
|
||||
Reference in New Issue
Block a user