RMS/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

working on partrol form part 4

Browse Source
This commit is contained in:
Mohammad Jalali
2024-12-30 10:38:53 +03:30
parent 753c6e8076
commit d68e7d5e59
4 changed files with 193 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolDetail.jsx
View File

@@ -56,7 +56,6 @@ const PatrolDetail = ({tabState, setTabState}) => {
} }
useEffect(() => { useEffect(() => {
console.log("data", carCode?.id, dateFrom, dateTo)
if (carCode !== null && dateFrom !== null && dateTo !== null) { if (carCode !== null && dateFrom !== null && dateTo !== null) {
setReadyToRequest(true); setReadyToRequest(true);
} else { } else {
@@ -170,88 +169,93 @@ const PatrolDetail = ({tabState, setTabState}) => {
<Divider sx={{my: 2, width: "100%"}}> <Divider sx={{my: 2, width: "100%"}}>
<Chip color="success" label="مشخصات گشت"/> <Chip color="success" label="مشخصات گشت"/>
</Divider> </Divider>
{patrolFounded && <Slide in={patrolFounded} sx={{width: "100%"}}> {patrolFounded ? <Slide in={patrolFounded} sx={{width: "100%"}}>
<Card> <Card>
<CardContent <CardContent
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: {xs: "column", lg: "row"}, flexDirection: {xs: "column", lg: "row"},
alignItems: "center", alignItems: "center",
justifyContent: "space-between", justifyContent: "space-between",
px: 2, px: 2,
gap: {xs: 2, lg: 0}, gap: {xs: 2, lg: 0},
py: 2 py: 2
}}> }}>
<Stack sx={{minWidth: {xs: "100%", lg: "300px"}, gap: 2}}> <Stack sx={{minWidth: {xs: "100%", lg: "300px"}, gap: 2}}>
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}> <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
<Chip label="کد ماشین" icon={<DirectionsCarFilledIcon/>}/> <Chip label="کد ماشین" icon={<DirectionsCarFilledIcon/>}/>
<Divider sx={{flex: 1, mx: 2}}/> <Divider sx={{flex: 1, mx: 2}}/>
<Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}> <Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}>
{data.machine_code} {data.machine_code}
</Typography> </Typography>
</Box> </Box>
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}> <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
<Chip label="بازه زمانی" icon={<WatchLaterIcon/>}/> <Chip label="بازه زمانی" icon={<WatchLaterIcon/>}/>
<Divider sx={{flex: 1, mx: 2}}/> <Divider sx={{flex: 1, mx: 2}}/>
<Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}> <Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}>
{data.time} {data.time}
</Typography> </Typography>
</Box> </Box>
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}> <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
<Chip label="مسافت" icon={<AddRoadIcon/>}/> <Chip label="مسافت" icon={<AddRoadIcon/>}/>
<Divider sx={{flex: 1, mx: 2}}/> <Divider sx={{flex: 1, mx: 2}}/>
<Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}> <Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}>
{data.distance} {data.distance}
</Typography> </Typography>
</Box> </Box>
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}> <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
<Chip label="توقف در مسیر" icon={<ShareLocationIcon/>}/> <Chip label="توقف در مسیر" icon={<ShareLocationIcon/>}/>
<Divider sx={{flex: 1, mx: 2}}/> <Divider sx={{flex: 1, mx: 2}}/>
<Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}> <Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}>
{data.stop} {data.stop}
</Typography> </Typography>
</Box> </Box>
<Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}> <Box sx={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
<Chip label="میزان مصرف سوخت" icon={<LocalGasStationIcon/>}/> <Chip label="میزان مصرف سوخت" icon={<LocalGasStationIcon/>}/>
<Divider sx={{flex: 1, mx: 2}}/> <Divider sx={{flex: 1, mx: 2}}/>
<Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}> <Typography sx={{fontSize: "14px", fontWeight: 500, textDecoration: "underline"}}>
{data.fuel_amount} {data.fuel_amount}
</Typography> </Typography>
</Box> </Box>
</Stack> </Stack>
<Divider orientation="vertical" flexItem/> <Divider orientation="vertical" flexItem/>
<Stack spacing={1} sx={{height: "300px", width: {xs: "100%", lg: "350px"}}}> <Stack spacing={1} sx={{height: "300px", width: {xs: "100%", lg: "350px"}}}>
<Box
sx={{
p: 1,
border: "1px dashed",
borderColor: "divider",
borderRadius: 1,
height: "100%",
}}
>
<Box <Box
sx={{ sx={{
p: 1,
border: "1px dashed",
borderColor: "divider",
borderRadius: 1,
height: "100%", height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
}} }}
> >
<MapLayer> <Box
</MapLayer> sx={{
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<MapLayer>
</MapLayer>
</Box>
</Box> </Box>
</Box> </Stack>
</Stack> </CardContent>
</CardContent> </Card>
</Card> </Slide> :
</Slide>} <Box sx={{my: 5}}>
<Typography variant="h6" sx={{letterSpacing: "2px", color: "#606060"}}>
ابتدا اطلاعات بالا را تکمیل نمایید
</Typography>
</Box>}
<Box sx={{display: "flex", gap: 1}}> <Box sx={{display: "flex", gap: 1}}>
<Button variant="outlined" color="error" <Button variant="outlined" color="error"
startIcon={<KeyboardDoubleArrowRightIcon/>} sx={{mt: 2}}> startIcon={<KeyboardDoubleArrowRightIcon/>} sx={{mt: 2}}>
بازگشت بازگشت
</Button> </Button>
<Button variant="contained" color="primary" <Button variant="contained" color="primary" onClick={() => setTabState(tabState + 1)}
endIcon={<KeyboardDoubleArrowLeftIcon/>} sx={{mt: 2}}> endIcon={<KeyboardDoubleArrowLeftIcon/>} sx={{mt: 2}}>
تایید اطلاعات و رفتن به مرحله بعد تایید اطلاعات و رفتن به مرحله بعد
</Button> </Button>

25
src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolForms.jsx
View File

@@ -2,7 +2,7 @@
import {Box, DialogContent, Tab, Tabs, useMediaQuery} from "@mui/material"; import {Box, DialogContent, Tab, Tabs, useMediaQuery} from "@mui/material";
import {useTheme} from "@emotion/react"; import {useTheme} from "@emotion/react";
import React, {useState} from "react"; import React, {useEffect, useState} from "react";
import TapAndPlayIcon from '@mui/icons-material/TapAndPlay'; import TapAndPlayIcon from '@mui/icons-material/TapAndPlay';
import TaxiAlertIcon from '@mui/icons-material/TaxiAlert'; import TaxiAlertIcon from '@mui/icons-material/TaxiAlert';
import EngineeringIcon from '@mui/icons-material/Engineering'; import EngineeringIcon from '@mui/icons-material/Engineering';
@@ -11,6 +11,7 @@ import VerifiedIcon from '@mui/icons-material/Verified';
import PatrolTimeLine from "./PatrolTimeLine"; import PatrolTimeLine from "./PatrolTimeLine";
import PhoneValidation from "./PhoneValidation"; import PhoneValidation from "./PhoneValidation";
import PatrolDetail from "./PatrolDetail"; import PatrolDetail from "./PatrolDetail";
import SuperVisorsDetail from "@/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/SuperVisorsDetail";
function TabPanel(props) { function TabPanel(props) {
const {children, value, index} = props; const {children, value, index} = props;
@@ -26,11 +27,19 @@ const PatrolForms = () => {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("md")); const isMobile = useMediaQuery(theme.breakpoints.down("md"));
const [tabState, setTabState] = useState(0); const [tabState, setTabState] = useState(0);
const [activeUpTo, setActiveUpTo] = useState(0);
const handleChangeTab = (event, newValue) => { const handleChangeTab = (event, newValue) => {
setTabState(newValue); setTabState(newValue);
}; };
useEffect(() => {
if (activeUpTo < tabState) {
setActiveUpTo(tabState);
}
}, [tabState]);
return ( return (
<> <>
<Tabs <Tabs
@@ -45,11 +54,11 @@ const PatrolForms = () => {
backgroundColor: "#efefef", backgroundColor: "#efefef",
}} }}
> >
<Tab icon={<TapAndPlayIcon/>} label="تایید هویت"></Tab> <Tab disabled={!(activeUpTo >= 0)} icon={<TapAndPlayIcon/>} label="تایید هویت"></Tab>
<Tab icon={<TaxiAlertIcon/>} label="مشخصات گشت"></Tab> <Tab disabled={!(activeUpTo >= 1)} icon={<TaxiAlertIcon/>} label="مشخصات گشت"></Tab>
<Tab icon={<EngineeringIcon/>} label="مشخصات راهداران"></Tab> <Tab disabled={!(activeUpTo >= 2)} icon={<EngineeringIcon/>} label="مشخصات راهداران"></Tab>
<Tab icon={<HandymanIcon/>} label="اقدامات حین گشت"></Tab> <Tab disabled={!(activeUpTo >= 3)} icon={<HandymanIcon/>} label="اقدامات حین گشت"></Tab>
<Tab icon={<VerifiedIcon/>} label="تکمیل درخواست"></Tab> <Tab disabled={!(activeUpTo >= 4)} icon={<VerifiedIcon/>} label="تکمیل درخواست"></Tab>
</Tabs> </Tabs>
<DialogContent dividers sx={{display: "flex"}}> <DialogContent dividers sx={{display: "flex"}}>
<Box sx={{flex: 1}}> <Box sx={{flex: 1}}>
@@ -57,10 +66,10 @@ const PatrolForms = () => {
<PhoneValidation tabState={tabState} setTabState={setTabState}/> <PhoneValidation tabState={tabState} setTabState={setTabState}/>
</TabPanel> </TabPanel>
<TabPanel value={tabState} index={1}> <TabPanel value={tabState} index={1}>
<PatrolDetail/> <PatrolDetail tabState={tabState} setTabState={setTabState}/>
</TabPanel> </TabPanel>
<TabPanel value={tabState} index={2}> <TabPanel value={tabState} index={2}>
<>moshakhasat rahdar</> <SuperVisorsDetail tabState={tabState} setTabState={setTabState}/>
</TabPanel> </TabPanel>
<TabPanel value={tabState} index={3}> <TabPanel value={tabState} index={3}>
<>eghdamat heine gasht</> <>eghdamat heine gasht</>

12
src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/PatrolTimeLine.jsx
View File

@@ -31,7 +31,7 @@ const PatrolTimeLine = ({tabState}) => {
<TimelineSeparator> <TimelineSeparator>
<TimelineConnector/> <TimelineConnector/>
<TimelineDot sx={{backgroundColor: "#fff"}}> <TimelineDot sx={{backgroundColor: "#fff"}}>
{tabState === 0 ? <CircularProgress size="20px"/> : <TapAndPlayIcon {tabState === 0 ? <CircularProgress size="23px"/> : <TapAndPlayIcon
color={tabState > 0 ? "success" : "error"} color={tabState > 0 ? "success" : "error"}
sx={{width: "1.5rem", height: "1.5rem"}} sx={{width: "1.5rem", height: "1.5rem"}}
/>} />}
@@ -49,7 +49,7 @@ const PatrolTimeLine = ({tabState}) => {
<TimelineSeparator> <TimelineSeparator>
<TimelineConnector/> <TimelineConnector/>
<TimelineDot sx={{backgroundColor: "#fff"}}> <TimelineDot sx={{backgroundColor: "#fff"}}>
{tabState === 1 ? <CircularProgress size="20px"/> : <TaxiAlertIcon {tabState === 1 ? <CircularProgress size="23px"/> : <TaxiAlertIcon
color={tabState > 1 ? "success" : "error"} color={tabState > 1 ? "success" : "error"}
sx={{width: "1.5rem", height: "1.5rem"}} sx={{width: "1.5rem", height: "1.5rem"}}
/>} />}
@@ -67,7 +67,7 @@ const PatrolTimeLine = ({tabState}) => {
<TimelineSeparator> <TimelineSeparator>
<TimelineConnector/> <TimelineConnector/>
<TimelineDot sx={{backgroundColor: "#fff"}}> <TimelineDot sx={{backgroundColor: "#fff"}}>
{tabState === 2 ? <CircularProgress size="20px"/> : <EngineeringIcon {tabState === 2 ? <CircularProgress size="23px"/> : <EngineeringIcon
color={tabState > 2 ? "success" : "error"} color={tabState > 2 ? "success" : "error"}
sx={{width: "1.5rem", height: "1.5rem"}} sx={{width: "1.5rem", height: "1.5rem"}}
/>} />}
@@ -77,7 +77,7 @@ const PatrolTimeLine = ({tabState}) => {
<TimelineContent sx={{py: "12px", px: 2}}> <TimelineContent sx={{py: "12px", px: 2}}>
<Typography variant="h6">مشخصات راهداران</Typography> <Typography variant="h6">مشخصات راهداران</Typography>
<Typography variant="caption" sx={{color: "#606060"}}> <Typography variant="caption" sx={{color: "#606060"}}>
راهدار/راهداران حاظر در گشت راهدار / راهداران حاظر در گشت
</Typography> </Typography>
</TimelineContent> </TimelineContent>
</TimelineItem> </TimelineItem>
@@ -85,7 +85,7 @@ const PatrolTimeLine = ({tabState}) => {
<TimelineSeparator> <TimelineSeparator>
<TimelineConnector/> <TimelineConnector/>
<TimelineDot sx={{backgroundColor: "#fff"}}> <TimelineDot sx={{backgroundColor: "#fff"}}>
{tabState === 3 ? <CircularProgress size="20px"/> : <HandymanIcon {tabState === 3 ? <CircularProgress size="23px"/> : <HandymanIcon
color={tabState > 3 ? "success" : "error"} color={tabState > 3 ? "success" : "error"}
sx={{width: "1.5rem", height: "1.5rem"}} sx={{width: "1.5rem", height: "1.5rem"}}
/>} />}
@@ -103,7 +103,7 @@ const PatrolTimeLine = ({tabState}) => {
<TimelineSeparator> <TimelineSeparator>
<TimelineConnector/> <TimelineConnector/>
<TimelineDot sx={{backgroundColor: "#fff"}}> <TimelineDot sx={{backgroundColor: "#fff"}}>
{tabState === 4 ? <CircularProgress size="20px"/> : <VerifiedIcon {tabState === 4 ? <CircularProgress size="23px"/> : <VerifiedIcon
color={tabState > 4 ? "success" : "error"} color={tabState > 4 ? "success" : "error"}
sx={{width: "1.5rem", height: "1.5rem"}} sx={{width: "1.5rem", height: "1.5rem"}}
/>} />}

94
src/components/dashboard/roadPatrols/operator/Forms/CreatePatrol/SuperVisorsDetail.jsx Normal file
View File

@@ -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;