working on partrol form part 4
This commit is contained in:
@@ -56,7 +56,6 @@ const PatrolDetail = ({tabState, setTabState}) => {
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
console.log("data", carCode?.id, dateFrom, dateTo)
|
||||
if (carCode !== null && dateFrom !== null && dateTo !== null) {
|
||||
setReadyToRequest(true);
|
||||
} else {
|
||||
@@ -170,88 +169,93 @@ const PatrolDetail = ({tabState, setTabState}) => {
|
||||
<Divider sx={{my: 2, width: "100%"}}>
|
||||
<Chip color="success" label="مشخصات گشت"/>
|
||||
</Divider>
|
||||
{patrolFounded && <Slide in={patrolFounded} sx={{width: "100%"}}>
|
||||
<Card>
|
||||
<CardContent
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: {xs: "column", lg: "row"},
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
px: 2,
|
||||
gap: {xs: 2, lg: 0},
|
||||
py: 2
|
||||
}}>
|
||||
<Stack sx={{minWidth: {xs: "100%", lg: "300px"}, gap: 2}}>
|
||||
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
|
||||
<Chip label="کد ماشین" icon={<DirectionsCarFilledIcon/>}/>
|
||||
<Divider sx={{flex: 1, mx: 2}}/>
|
||||
<Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}>
|
||||
{data.machine_code}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
|
||||
<Chip label="بازه زمانی" icon={<WatchLaterIcon/>}/>
|
||||
<Divider sx={{flex: 1, mx: 2}}/>
|
||||
<Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}>
|
||||
{data.time}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
|
||||
<Chip label="مسافت" icon={<AddRoadIcon/>}/>
|
||||
<Divider sx={{flex: 1, mx: 2}}/>
|
||||
<Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}>
|
||||
{data.distance}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
|
||||
<Chip label="توقف در مسیر" icon={<ShareLocationIcon/>}/>
|
||||
<Divider sx={{flex: 1, mx: 2}}/>
|
||||
<Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}>
|
||||
{data.stop}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
|
||||
<Chip label="میزان مصرف سوخت" icon={<LocalGasStationIcon/>}/>
|
||||
<Divider sx={{flex: 1, mx: 2}}/>
|
||||
<Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}>
|
||||
{data.fuel_amount}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Divider orientation="vertical" flexItem/>
|
||||
<Stack spacing={1} sx={{height: "300px", width: {xs: "100%", lg: "350px"}}}>
|
||||
<Box
|
||||
sx={{
|
||||
p: 1,
|
||||
border: "1px dashed",
|
||||
borderColor: "divider",
|
||||
borderRadius: 1,
|
||||
height: "100%",
|
||||
}}
|
||||
>
|
||||
{patrolFounded ? <Slide in={patrolFounded} sx={{width: "100%"}}>
|
||||
<Card>
|
||||
<CardContent
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: {xs: "column", lg: "row"},
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
px: 2,
|
||||
gap: {xs: 2, lg: 0},
|
||||
py: 2
|
||||
}}>
|
||||
<Stack sx={{minWidth: {xs: "100%", lg: "300px"}, gap: 2}}>
|
||||
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
|
||||
<Chip label="کد ماشین" icon={<DirectionsCarFilledIcon/>}/>
|
||||
<Divider sx={{flex: 1, mx: 2}}/>
|
||||
<Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}>
|
||||
{data.machine_code}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
|
||||
<Chip label="بازه زمانی" icon={<WatchLaterIcon/>}/>
|
||||
<Divider sx={{flex: 1, mx: 2}}/>
|
||||
<Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}>
|
||||
{data.time}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
|
||||
<Chip label="مسافت" icon={<AddRoadIcon/>}/>
|
||||
<Divider sx={{flex: 1, mx: 2}}/>
|
||||
<Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}>
|
||||
{data.distance}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
|
||||
<Chip label="توقف در مسیر" icon={<ShareLocationIcon/>}/>
|
||||
<Divider sx={{flex: 1, mx: 2}}/>
|
||||
<Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}>
|
||||
{data.stop}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
|
||||
<Chip label="میزان مصرف سوخت" icon={<LocalGasStationIcon/>}/>
|
||||
<Divider sx={{flex: 1, mx: 2}}/>
|
||||
<Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}>
|
||||
{data.fuel_amount}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Divider orientation="vertical" flexItem/>
|
||||
<Stack spacing={1} sx={{height: "300px", width: {xs: "100%", lg: "350px"}}}>
|
||||
<Box
|
||||
sx={{
|
||||
p: 1,
|
||||
border: "1px dashed",
|
||||
borderColor: "divider",
|
||||
borderRadius: 1,
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<MapLayer>
|
||||
</MapLayer>
|
||||
<Box
|
||||
sx={{
|
||||
height: "100%",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}
|
||||
>
|
||||
<MapLayer>
|
||||
</MapLayer>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Slide>}
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Slide> :
|
||||
<Box sx={{my: 5}}>
|
||||
<Typography variant="h6" sx={{letterSpacing: "2px", color: "#606060"}}>
|
||||
ابتدا اطلاعات بالا را تکمیل نمایید
|
||||
</Typography>
|
||||
</Box>}
|
||||
<Box sx={{display: "flex", gap: 1}}>
|
||||
<Button variant="outlined" color="error"
|
||||
startIcon={<KeyboardDoubleArrowRightIcon/>} sx={{mt: 2}}>
|
||||
بازگشت
|
||||
</Button>
|
||||
<Button variant="contained" color="primary"
|
||||
<Button variant="contained" color="primary" onClick={() => setTabState(tabState + 1)}
|
||||
endIcon={<KeyboardDoubleArrowLeftIcon/>} sx={{mt: 2}}>
|
||||
تایید اطلاعات و رفتن به مرحله بعد
|
||||
</Button>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import {Box, DialogContent, Tab, Tabs, useMediaQuery} from "@mui/material";
|
||||
import {useTheme} from "@emotion/react";
|
||||
import React, {useState} from "react";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import TapAndPlayIcon from '@mui/icons-material/TapAndPlay';
|
||||
import TaxiAlertIcon from '@mui/icons-material/TaxiAlert';
|
||||
import EngineeringIcon from '@mui/icons-material/Engineering';
|
||||
@@ -11,6 +11,7 @@ import VerifiedIcon from '@mui/icons-material/Verified';
|
||||
import PatrolTimeLine from "./PatrolTimeLine";
|
||||
import PhoneValidation from "./PhoneValidation";
|
||||
import PatrolDetail from "./PatrolDetail";
|
||||
import SuperVisorsDetail from "@/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/SuperVisorsDetail";
|
||||
|
||||
function TabPanel(props) {
|
||||
const {children, value, index} = props;
|
||||
@@ -26,11 +27,19 @@ const PatrolForms = () => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down("md"));
|
||||
const [tabState, setTabState] = useState(0);
|
||||
const [activeUpTo, setActiveUpTo] = useState(0);
|
||||
|
||||
const handleChangeTab = (event, newValue) => {
|
||||
setTabState(newValue);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (activeUpTo < tabState) {
|
||||
setActiveUpTo(tabState);
|
||||
}
|
||||
}, [tabState]);
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tabs
|
||||
@@ -45,11 +54,11 @@ const PatrolForms = () => {
|
||||
backgroundColor: "#efefef",
|
||||
}}
|
||||
>
|
||||
<Tab icon={<TapAndPlayIcon/>} label="تایید هویت"></Tab>
|
||||
<Tab icon={<TaxiAlertIcon/>} label="مشخصات گشت"></Tab>
|
||||
<Tab icon={<EngineeringIcon/>} label="مشخصات راهداران"></Tab>
|
||||
<Tab icon={<HandymanIcon/>} label="اقدامات حین گشت"></Tab>
|
||||
<Tab icon={<VerifiedIcon/>} label="تکمیل درخواست"></Tab>
|
||||
<Tab disabled={!(activeUpTo >= 0)} icon={<TapAndPlayIcon/>} label="تایید هویت"></Tab>
|
||||
<Tab disabled={!(activeUpTo >= 1)} icon={<TaxiAlertIcon/>} label="مشخصات گشت"></Tab>
|
||||
<Tab disabled={!(activeUpTo >= 2)} icon={<EngineeringIcon/>} label="مشخصات راهداران"></Tab>
|
||||
<Tab disabled={!(activeUpTo >= 3)} icon={<HandymanIcon/>} label="اقدامات حین گشت"></Tab>
|
||||
<Tab disabled={!(activeUpTo >= 4)} icon={<VerifiedIcon/>} label="تکمیل درخواست"></Tab>
|
||||
</Tabs>
|
||||
<DialogContent dividers sx={{display: "flex"}}>
|
||||
<Box sx={{flex: 1}}>
|
||||
@@ -57,10 +66,10 @@ const PatrolForms = () => {
|
||||
<PhoneValidation tabState={tabState} setTabState={setTabState}/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabState} index={1}>
|
||||
<PatrolDetail/>
|
||||
<PatrolDetail tabState={tabState} setTabState={setTabState}/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabState} index={2}>
|
||||
<>moshakhasat rahdar</>
|
||||
<SuperVisorsDetail tabState={tabState} setTabState={setTabState}/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabState} index={3}>
|
||||
<>eghdamat heine gasht</>
|
||||
|
||||
@@ -31,7 +31,7 @@ const PatrolTimeLine = ({tabState}) => {
|
||||
<TimelineSeparator>
|
||||
<TimelineConnector/>
|
||||
<TimelineDot sx={{backgroundColor: "#fff"}}>
|
||||
{tabState === 0 ? <CircularProgress size="20px"/> : <TapAndPlayIcon
|
||||
{tabState === 0 ? <CircularProgress size="23px"/> : <TapAndPlayIcon
|
||||
color={tabState > 0 ? "success" : "error"}
|
||||
sx={{width: "1.5rem", height: "1.5rem"}}
|
||||
/>}
|
||||
@@ -49,7 +49,7 @@ const PatrolTimeLine = ({tabState}) => {
|
||||
<TimelineSeparator>
|
||||
<TimelineConnector/>
|
||||
<TimelineDot sx={{backgroundColor: "#fff"}}>
|
||||
{tabState === 1 ? <CircularProgress size="20px"/> : <TaxiAlertIcon
|
||||
{tabState === 1 ? <CircularProgress size="23px"/> : <TaxiAlertIcon
|
||||
color={tabState > 1 ? "success" : "error"}
|
||||
sx={{width: "1.5rem", height: "1.5rem"}}
|
||||
/>}
|
||||
@@ -67,7 +67,7 @@ const PatrolTimeLine = ({tabState}) => {
|
||||
<TimelineSeparator>
|
||||
<TimelineConnector/>
|
||||
<TimelineDot sx={{backgroundColor: "#fff"}}>
|
||||
{tabState === 2 ? <CircularProgress size="20px"/> : <EngineeringIcon
|
||||
{tabState === 2 ? <CircularProgress size="23px"/> : <EngineeringIcon
|
||||
color={tabState > 2 ? "success" : "error"}
|
||||
sx={{width: "1.5rem", height: "1.5rem"}}
|
||||
/>}
|
||||
@@ -77,7 +77,7 @@ const PatrolTimeLine = ({tabState}) => {
|
||||
<TimelineContent sx={{py: "12px", px: 2}}>
|
||||
<Typography variant="h6">مشخصات راهداران</Typography>
|
||||
<Typography variant="caption" sx={{color: "#606060"}}>
|
||||
راهدار/راهداران حاظر در گشت
|
||||
راهدار / راهداران حاظر در گشت
|
||||
</Typography>
|
||||
</TimelineContent>
|
||||
</TimelineItem>
|
||||
@@ -85,7 +85,7 @@ const PatrolTimeLine = ({tabState}) => {
|
||||
<TimelineSeparator>
|
||||
<TimelineConnector/>
|
||||
<TimelineDot sx={{backgroundColor: "#fff"}}>
|
||||
{tabState === 3 ? <CircularProgress size="20px"/> : <HandymanIcon
|
||||
{tabState === 3 ? <CircularProgress size="23px"/> : <HandymanIcon
|
||||
color={tabState > 3 ? "success" : "error"}
|
||||
sx={{width: "1.5rem", height: "1.5rem"}}
|
||||
/>}
|
||||
@@ -103,7 +103,7 @@ const PatrolTimeLine = ({tabState}) => {
|
||||
<TimelineSeparator>
|
||||
<TimelineConnector/>
|
||||
<TimelineDot sx={{backgroundColor: "#fff"}}>
|
||||
{tabState === 4 ? <CircularProgress size="20px"/> : <VerifiedIcon
|
||||
{tabState === 4 ? <CircularProgress size="23px"/> : <VerifiedIcon
|
||||
color={tabState > 4 ? "success" : "error"}
|
||||
sx={{width: "1.5rem", height: "1.5rem"}}
|
||||
/>}
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
"use client";
|
||||
|
||||
import {Box, Button, Card, Chip, Divider, IconButton, TextField, Typography} from "@mui/material";
|
||||
import SaveAltIcon from '@mui/icons-material/SaveAlt';
|
||||
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
|
||||
import DeleteIcon from '@mui/icons-material/Delete';
|
||||
import React, {useState} from "react";
|
||||
|
||||
const SuperVisorsDetail = ({tabState, setTabState}) => {
|
||||
const [patrolFounded, setPatrolFounded] = useState(false);
|
||||
const [rahdarsCode, setRahdarsCode] = useState(null);
|
||||
const [readyToRequest, setReadyToRequest] = useState(false);
|
||||
|
||||
const requestPatrolInfo = () => {
|
||||
setPatrolFounded(true)
|
||||
setReadyToRequest(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
my: 3
|
||||
}}
|
||||
>
|
||||
<Box sx={{display: "flex", flexDirection: {xs: "column", lg: "row"}, gap: 2}}>
|
||||
<Box sx={{minWidth: "200px"}}>
|
||||
{/*<RahdarCode rahdarsCode={rahdarsCode} setRahdarsCode={setRahdarsCode}/>*/}
|
||||
<TextField
|
||||
id="outlined-required"
|
||||
label="کد راهدار"
|
||||
size="small"
|
||||
/>
|
||||
</Box>
|
||||
<Button variant="contained" onClick={requestPatrolInfo}
|
||||
color="success"
|
||||
disabled={!readyToRequest}
|
||||
endIcon={<SaveAltIcon/>}
|
||||
>
|
||||
ثبت راهدار
|
||||
</Button>
|
||||
</Box>
|
||||
<Divider sx={{my: 2, width: "100%"}}>
|
||||
<Chip color="success" variant="outlined" label="لیست راهداران انتخاب شده"/>
|
||||
</Divider>
|
||||
<Box sx={{
|
||||
width: "100%",
|
||||
p: 1,
|
||||
maxHeight: "300px",
|
||||
overflowY: "auto"
|
||||
}}>
|
||||
<Card sx={{
|
||||
display: "flex", alignItems: "center",
|
||||
justifyContent: "space-between", width: "100%",
|
||||
px: 2, py: 1, my: 2,
|
||||
background: "#f7f7f7"
|
||||
}}>
|
||||
<Box sx={{display: "flex"}}>
|
||||
<AccountCircleIcon color="primary" sx={{width: "50px", height: "50px"}}/>
|
||||
<Box sx={{ml: 1}}>
|
||||
<Typography variant="h6" sx={{letterSpacing: "1px"}}>محمد حسین</Typography>
|
||||
<Typography variant="caption">کد راهدار: 893</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<IconButton color="error"><DeleteIcon/></IconButton>
|
||||
</Box>
|
||||
</Card>
|
||||
<Card sx={{
|
||||
display: "flex", width: "100%",
|
||||
alignItems: "center", justifyContent: "space-between",
|
||||
px: 2, py: 1, my: 2,
|
||||
background: "#f7f7f7"
|
||||
}}>
|
||||
<Box sx={{display: "flex"}}>
|
||||
<AccountCircleIcon color="primary" sx={{width: "50px", height: "50px"}}/>
|
||||
<Box sx={{ml: 1}}>
|
||||
<Typography variant="h6" sx={{letterSpacing: "1px"}}>حسین تقی</Typography>
|
||||
<Typography variant="caption">کد راهدار: 123</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
<IconButton color="error"><DeleteIcon/></IconButton>
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default SuperVisorsDetail;
|
||||
Reference in New Issue
Block a user