Merge branch 'develop'
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
import PageLoading from "@/core/components/PageLoading";
|
||||
|
||||
const Loading = () => {
|
||||
return <PageLoading />;
|
||||
};
|
||||
export default Loading;
|
||||
"use client";
|
||||
import PageLoading from "@/core/components/PageLoading";
|
||||
|
||||
const Loading = () => {
|
||||
return <PageLoading />;
|
||||
};
|
||||
export default Loading;
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
import WithPermission from "@/core/middlewares/withPermission";
|
||||
import MachinesPage from "@/components/dashboard/machines";
|
||||
|
||||
export const metadata = {
|
||||
title: "کارتابل ماشینها",
|
||||
};
|
||||
const Page = () => {
|
||||
return (
|
||||
<>
|
||||
<WithPermission permission_name={["all"]}>
|
||||
<MachinesPage />
|
||||
</WithPermission>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
||||
import WithPermission from "@/core/middlewares/withPermission";
|
||||
import MachinesPage from "@/components/dashboard/machines";
|
||||
|
||||
export const metadata = {
|
||||
title: "کارتابل ماشینها",
|
||||
};
|
||||
const Page = () => {
|
||||
return (
|
||||
<>
|
||||
<WithPermission permission_name={["all"]}>
|
||||
<MachinesPage />
|
||||
</WithPermission>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page;
|
||||
|
||||
18
src/assets/images/destination-icon.svg
Normal file
18
src/assets/images/destination-icon.svg
Normal file
@@ -0,0 +1,18 @@
|
||||
<svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<foreignObject x="-63" y="-64" width="146" height="149"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(32.5px);clip-path:url(#bgblur_0_2302_1310_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_2302_1310)" data-figma-bg-blur-radius="65">
|
||||
<path d="M9.38305 1.02444C15.543 0.551472 19.9197 7.03396 17.1518 12.6025C15.8547 15.2112 13.6759 15.7958 11.9558 17.881C11.6271 18.2796 10.7507 19.7126 10.4472 19.8829C9.98265 20.1439 9.56634 19.9365 9.25987 19.5758C8.76416 18.992 8.37012 18.2543 7.83732 17.6549C6.56763 16.2249 4.84751 15.4187 3.69508 13.9418C-0.231962 8.90724 3.07767 1.50856 9.38305 1.02444ZM9.55002 5.15175C6.61587 5.45517 5.13915 8.92434 6.86743 11.3212C8.38571 13.4272 11.6293 13.425 13.1468 11.3212C15.1415 8.554 12.925 4.80298 9.55076 5.15175H9.55002Z" fill="#EF4444"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2302_1310" x="-63" y="-64" width="146" height="149" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.25098 0 0 0 0 0.262745 0 0 0 0.3 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2302_1310"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2302_1310" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="bgblur_0_2302_1310_clip_path" transform="translate(63 64)"><path d="M9.38305 1.02444C15.543 0.551472 19.9197 7.03396 17.1518 12.6025C15.8547 15.2112 13.6759 15.7958 11.9558 17.881C11.6271 18.2796 10.7507 19.7126 10.4472 19.8829C9.98265 20.1439 9.56634 19.9365 9.25987 19.5758C8.76416 18.992 8.37012 18.2543 7.83732 17.6549C6.56763 16.2249 4.84751 15.4187 3.69508 13.9418C-0.231962 8.90724 3.07767 1.50856 9.38305 1.02444ZM9.55002 5.15175C6.61587 5.45517 5.13915 8.92434 6.86743 11.3212C8.38571 13.4272 11.6293 13.425 13.1468 11.3212C15.1415 8.554 12.925 4.80298 9.55076 5.15175H9.55002Z"/>
|
||||
</clipPath></defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
21
src/assets/images/prev-destination-icon.svg
Normal file
21
src/assets/images/prev-destination-icon.svg
Normal file
@@ -0,0 +1,21 @@
|
||||
<svg width="42" height="66" viewBox="0 0 42 66" fill="#F15152" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.3" d="M21 66C23.7614 66 26 64.8807 26 63.5C26 62.1193 23.7614 61 21 61C18.2386 61 16 62.1193 16 63.5C16 64.8807 18.2386 66 21 66Z" fill="#F15152"/>
|
||||
<path fill-rule="#F15152" clip-rule="evenodd" d="M21 0C32.598 0 42 9.40202 42 21C42 31.9234 33.6599 40.8989 23 41.906V62C23 63.1046 22.1046 64 21 64C19.8954 64 19 63.1046 19 62V41.906C8.34014 40.8989 0 31.9234 0 21C0 9.40202 9.40202 0 21 0Z" fill="#F15152"/>
|
||||
<foreignObject x="-61" y="-61" width="164" height="164"></foreignObject><g filter="url(#filter0_d_173_69)" data-figma-bg-blur-radius="65">
|
||||
<path d="M38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38C30.3888 38 38 30.3888 38 21Z" fill="#F15152"/>
|
||||
</g>
|
||||
<path d="M28 21C28 17.134 24.866 14 21 14C17.134 14 14 17.134 14 21C14 24.866 17.134 28 21 28C24.866 28 28 24.866 28 21Z" fill="white"/>
|
||||
<defs>
|
||||
<filter id="filter0_d_173_69" x="-61" y="-61" width="164" height="164" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.25098 0 0 0 0 0.262745 0 0 0 0.3 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_173_69"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_173_69" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="bgblur_0_173_69_clip_path" transform="translate(61 61)"><path d="M38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38C30.3888 38 38 30.3888 38 21Z"/>
|
||||
</clipPath></defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
21
src/assets/images/prev-source-icon.svg
Normal file
21
src/assets/images/prev-source-icon.svg
Normal file
@@ -0,0 +1,21 @@
|
||||
<svg width="42" height="66" viewBox="0 0 42 66" fill="#2A8A7E" xmlns="http://www.w3.org/2000/svg">
|
||||
<path opacity="0.3" d="M21 66C23.7614 66 26 64.8807 26 63.5C26 62.1193 23.7614 61 21 61C18.2386 61 16 62.1193 16 63.5C16 64.8807 18.2386 66 21 66Z" fill="#2A8A7E"/>
|
||||
<path fill-rule="#2A8A7E" clip-rule="evenodd" d="M21 0C32.598 0 42 9.40202 42 21C42 31.9234 33.6599 40.8989 23 41.906V62C23 63.1046 22.1046 64 21 64C19.8954 64 19 63.1046 19 62V41.906C8.34014 40.8989 0 31.9234 0 21C0 9.40202 9.40202 0 21 0Z" fill="#2A8A7E"/>
|
||||
<foreignObject x="-61" y="-61" width="164" height="164"></foreignObject><g filter="url(#filter0_d_173_69)" data-figma-bg-blur-radius="65">
|
||||
<path d="M38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38C30.3888 38 38 30.3888 38 21Z" fill="#2A8A7E"/>
|
||||
</g>
|
||||
<path d="M28 21C28 17.134 24.866 14 21 14C17.134 14 14 17.134 14 21C14 24.866 17.134 28 21 28C24.866 28 28 24.866 28 21Z" fill="white"/>
|
||||
<defs>
|
||||
<filter id="filter0_d_173_69" x="-61" y="-61" width="164" height="164" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.25098 0 0 0 0 0.262745 0 0 0 0.3 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_173_69"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_173_69" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="bgblur_0_173_69_clip_path" transform="translate(61 61)"><path d="M38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38C30.3888 38 38 30.3888 38 21Z"/>
|
||||
</clipPath></defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
18
src/assets/images/source-icon.svg
Normal file
18
src/assets/images/source-icon.svg
Normal file
@@ -0,0 +1,18 @@
|
||||
<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<foreignObject x="-42.6271" y="-43.6271" width="105.045" height="105.045"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(22.31px);clip-path:url(#bgblur_0_2302_1307_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter0_d_2302_1307)" data-figma-bg-blur-radius="44.6271">
|
||||
<path d="M10.3018 1.00977C14.4733 1.22136 17.7908 4.67141 17.791 8.89551C17.7908 13.2559 14.2559 16.7908 9.89551 16.791C5.67141 16.7908 2.22136 13.4733 2.00977 9.30176L2 8.89551L2.00977 8.48926C2.22119 4.31755 5.6713 1.00017 9.89551 1L10.3018 1.00977ZM9.89551 5.80566C8.18945 5.80584 6.80584 7.18945 6.80566 8.89551L6.80957 9.05371C6.89208 10.6863 8.2425 11.9842 9.89551 11.9844C11.5485 11.9842 12.898 10.6863 12.9805 9.05371L12.9844 8.89551L12.9805 8.73633C12.9003 7.1565 11.6336 5.88942 10.0537 5.80957L9.89551 5.80566Z" fill="#16A795"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_2302_1307" x="-42.6271" y="-43.6271" width="105.045" height="105.045" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="0.686571"/>
|
||||
<feGaussianBlur stdDeviation="0.686571"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.25098 0 0 0 0 0.262745 0 0 0 0.3 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2302_1307"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2302_1307" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="bgblur_0_2302_1307_clip_path" transform="translate(42.6271 43.6271)"><path d="M10.3018 1.00977C14.4733 1.22136 17.7908 4.67141 17.791 8.89551C17.7908 13.2559 14.2559 16.7908 9.89551 16.791C5.67141 16.7908 2.22136 13.4733 2.00977 9.30176L2 8.89551L2.00977 8.48926C2.22119 4.31755 5.6713 1.00017 9.89551 1L10.3018 1.00977ZM9.89551 5.80566C8.18945 5.80584 6.80584 7.18945 6.80566 8.89551L6.80957 9.05371C6.89208 10.6863 8.2425 11.9842 9.89551 11.9844C11.5485 11.9842 12.898 10.6863 12.9805 9.05371L12.9844 8.89551L12.9805 8.73633C12.9003 7.1565 11.6336 5.88942 10.0537 5.80957L9.89551 5.80566Z"/>
|
||||
</clipPath></defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
@@ -1,134 +1,134 @@
|
||||
"use client";
|
||||
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
|
||||
import { GET_MACHINES_LIST } from "@/core/utils/routes";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { useMemo } from "react";
|
||||
import RowActions from "./RowActions";
|
||||
|
||||
const statusOptions = [
|
||||
{ value: "", label: "همه وضعیت ها" },
|
||||
{ value: 1, label: "آماده" },
|
||||
{ value: 2, label: "رزرو" },
|
||||
{ value: 3, label: "در ماموریت" },
|
||||
{ value: 4, label: "خارج از رده" },
|
||||
{ value: 5, label: "در تعمیر" },
|
||||
{ value: 6, label: "فروخته شده" },
|
||||
{ value: 7, label: "نیاز به تعمیر" },
|
||||
];
|
||||
|
||||
const MachinesList = () => {
|
||||
const columns = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: "کد یکتا", // Unique Code
|
||||
id: "id",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
sortDescFirst: false,
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 50,
|
||||
},
|
||||
|
||||
{
|
||||
header: "اطلاعات ماشینها",
|
||||
id: "machines_info",
|
||||
enableColumnFilter: false,
|
||||
enableSorting: false,
|
||||
datatype: "text",
|
||||
grow: false,
|
||||
columns: [
|
||||
{
|
||||
accessorKey: "car_name",
|
||||
header: "نام ماشین",
|
||||
id: "car_name",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
sortDescFirst: false,
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "car_type",
|
||||
header: "نوع ماشین",
|
||||
id: "car_type",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
sortDescFirst: false,
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "machine_code",
|
||||
header: "کد ماشین",
|
||||
id: "machine_code",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
sortDescFirst: false,
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "plak_number",
|
||||
header: "پلاک",
|
||||
id: "plak_number",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
sortDescFirst: false,
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "وضعیت",
|
||||
id: "status",
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterMode: "equals",
|
||||
grow: false,
|
||||
size: 100,
|
||||
columnSelectOption: () => {
|
||||
return statusOptions.map((status) => ({
|
||||
value: status.value,
|
||||
label: status.label,
|
||||
}));
|
||||
},
|
||||
Cell: ({ row }) => {
|
||||
const status = statusOptions.find((option) => option.value == row.original.status);
|
||||
return <Typography variant="body2">{status?.label || ""}</Typography>;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
|
||||
<DataTableWithAuth
|
||||
need_filter={true}
|
||||
columns={columns}
|
||||
table_url={GET_MACHINES_LIST}
|
||||
page_name={"machines"}
|
||||
table_name={"machinesList"}
|
||||
sorting={[{ id: "id", desc: true }]}
|
||||
enableRowActions
|
||||
positionActionsColumn={"first"}
|
||||
RowActions={RowActions}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default MachinesList;
|
||||
"use client";
|
||||
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
|
||||
import { GET_MACHINES_LIST } from "@/core/utils/routes";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import { useMemo } from "react";
|
||||
import RowActions from "./RowActions";
|
||||
|
||||
const statusOptions = [
|
||||
{ value: "", label: "همه وضعیت ها" },
|
||||
{ value: 1, label: "آماده" },
|
||||
{ value: 2, label: "رزرو" },
|
||||
{ value: 3, label: "در ماموریت" },
|
||||
{ value: 4, label: "خارج از رده" },
|
||||
{ value: 5, label: "در تعمیر" },
|
||||
{ value: 6, label: "فروخته شده" },
|
||||
{ value: 7, label: "نیاز به تعمیر" },
|
||||
];
|
||||
|
||||
const MachinesList = () => {
|
||||
const columns = useMemo(() => {
|
||||
return [
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: "کد یکتا", // Unique Code
|
||||
id: "id",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
sortDescFirst: false,
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 50,
|
||||
},
|
||||
|
||||
{
|
||||
header: "اطلاعات ماشینها",
|
||||
id: "machines_info",
|
||||
enableColumnFilter: false,
|
||||
enableSorting: false,
|
||||
datatype: "text",
|
||||
grow: false,
|
||||
columns: [
|
||||
{
|
||||
accessorKey: "car_name",
|
||||
header: "نام ماشین",
|
||||
id: "car_name",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
sortDescFirst: false,
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "car_type",
|
||||
header: "نوع ماشین",
|
||||
id: "car_type",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
sortDescFirst: false,
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "machine_code",
|
||||
header: "کد ماشین",
|
||||
id: "machine_code",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
sortDescFirst: false,
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "plak_number",
|
||||
header: "پلاک",
|
||||
id: "plak_number",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
sortDescFirst: false,
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "وضعیت",
|
||||
id: "status",
|
||||
enableColumnFilter: true,
|
||||
datatype: "numeric",
|
||||
filterMode: "equals",
|
||||
grow: false,
|
||||
size: 100,
|
||||
columnSelectOption: () => {
|
||||
return statusOptions.map((status) => ({
|
||||
value: status.value,
|
||||
label: status.label,
|
||||
}));
|
||||
},
|
||||
Cell: ({ row }) => {
|
||||
const status = statusOptions.find((option) => option.value == row.original.status);
|
||||
return <Typography variant="body2">{status?.label || ""}</Typography>;
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ p: 1, border: 1, borderColor: "divider", borderRadius: 1 }}>
|
||||
<DataTableWithAuth
|
||||
need_filter={true}
|
||||
columns={columns}
|
||||
table_url={GET_MACHINES_LIST}
|
||||
page_name={"machines"}
|
||||
table_name={"machinesList"}
|
||||
sorting={[{ id: "id", desc: true }]}
|
||||
enableRowActions
|
||||
positionActionsColumn={"first"}
|
||||
RowActions={RowActions}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default MachinesList;
|
||||
|
||||
@@ -1,39 +1,39 @@
|
||||
import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
|
||||
import React, { useState } from "react";
|
||||
import useRequest from "@/lib/hooks/useRequest";
|
||||
import { DELETE_TOLL_HOUSE_ITEM } from "@/core/utils/routes";
|
||||
|
||||
const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const requestServer = useRequest({ notificationSuccess: true });
|
||||
const handleClick = () => {
|
||||
setSubmitting(true);
|
||||
requestServer(`${DELETE_TOLL_HOUSE_ITEM}/${rowId}`, "delete")
|
||||
.then(() => {
|
||||
mutate();
|
||||
setOpenDeleteDialog(false);
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack alignItems="center" spacing={2}>
|
||||
<Typography mt={2}>آیا از حذف راهدارخانه اطمینان دارید؟</Typography>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
|
||||
<Button onClick={() => setOpenDeleteDialog(false)} variant="outlined" color="secondary">
|
||||
خیر !
|
||||
</Button>
|
||||
<Button onClick={handleClick} variant="contained" color="error" disabled={submitting}>
|
||||
{submitting ? "درحال حذف..." : "بله اطمینان دارم"}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default DeleteContent;
|
||||
import { Button, DialogActions, DialogContent, Stack, Typography } from "@mui/material";
|
||||
import React, { useState } from "react";
|
||||
import useRequest from "@/lib/hooks/useRequest";
|
||||
import { DELETE_TOLL_HOUSE_ITEM } from "@/core/utils/routes";
|
||||
|
||||
const DeleteContent = ({ rowId, mutate, setOpenDeleteDialog }) => {
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const requestServer = useRequest({ notificationSuccess: true });
|
||||
const handleClick = () => {
|
||||
setSubmitting(true);
|
||||
requestServer(`${DELETE_TOLL_HOUSE_ITEM}/${rowId}`, "delete")
|
||||
.then(() => {
|
||||
mutate();
|
||||
setOpenDeleteDialog(false);
|
||||
setSubmitting(false);
|
||||
})
|
||||
.catch(() => {
|
||||
setSubmitting(false);
|
||||
});
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<DialogContent>
|
||||
<Stack alignItems="center" spacing={2}>
|
||||
<Typography mt={2}>آیا از حذف راهدارخانه اطمینان دارید؟</Typography>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ justifyContent: "center", paddingBottom: 2, width: "100%" }}>
|
||||
<Button onClick={() => setOpenDeleteDialog(false)} variant="outlined" color="secondary">
|
||||
خیر !
|
||||
</Button>
|
||||
<Button onClick={handleClick} variant="contained" color="error" disabled={submitting}>
|
||||
{submitting ? "درحال حذف..." : "بله اطمینان دارم"}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default DeleteContent;
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import DeleteContent from "./DeleteContent";
|
||||
const DeleteDialog = ({ rowId, mutate }) => {
|
||||
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="حذف">
|
||||
<IconButton color="error" onClick={() => setOpenDeleteDialog(true)}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog
|
||||
open={openDeleteDialog}
|
||||
onClose={() => setOpenDeleteDialog(false)}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
|
||||
},
|
||||
}}
|
||||
dir="rtl"
|
||||
maxWidth={"md"}
|
||||
>
|
||||
<DialogTitle>حذف راهدارخانه</DialogTitle>
|
||||
{openDeleteDialog && (
|
||||
<DeleteContent rowId={rowId} mutate={mutate} setOpenDeleteDialog={setOpenDeleteDialog} />
|
||||
)}
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default DeleteDialog;
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import DeleteContent from "./DeleteContent";
|
||||
const DeleteDialog = ({ rowId, mutate }) => {
|
||||
const [openDeleteDialog, setOpenDeleteDialog] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="حذف">
|
||||
<IconButton color="error" onClick={() => setOpenDeleteDialog(true)}>
|
||||
<DeleteIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog
|
||||
open={openDeleteDialog}
|
||||
onClose={() => setOpenDeleteDialog(false)}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
|
||||
},
|
||||
}}
|
||||
dir="rtl"
|
||||
maxWidth={"md"}
|
||||
>
|
||||
<DialogTitle>حذف راهدارخانه</DialogTitle>
|
||||
{openDeleteDialog && (
|
||||
<DeleteContent rowId={rowId} mutate={mutate} setOpenDeleteDialog={setOpenDeleteDialog} />
|
||||
)}
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default DeleteDialog;
|
||||
|
||||
@@ -1,281 +1,281 @@
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import {
|
||||
GET_CITIES_LIST,
|
||||
GET_PROVINCES_LIST,
|
||||
GET_STATIONS_LIST,
|
||||
UPDATE_MACHINE_STATUS_AND_LOCATION,
|
||||
} from "@/core/utils/routes";
|
||||
import useRequest from "@/lib/hooks/useRequest";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { Beenhere, ExitToApp } from "@mui/icons-material";
|
||||
import {
|
||||
Button,
|
||||
CircularProgress,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
Stack,
|
||||
} from "@mui/material";
|
||||
import { DialogHeader } from "next/dist/client/components/react-dev-overlay/internal/components/Dialog";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
import { number, object } from "yup";
|
||||
|
||||
const statusOptions = [
|
||||
{ value: 1, label: "آماده" },
|
||||
{ value: 2, label: "رزرو" },
|
||||
{ value: 3, label: "در ماموریت" },
|
||||
{ value: 4, label: "خارج از رده" },
|
||||
{ value: 5, label: "در تعمیر" },
|
||||
{ value: 6, label: "فروخته شده" },
|
||||
{ value: 7, label: "نیاز به تعمیر" },
|
||||
];
|
||||
|
||||
const validationSchema = object({
|
||||
status: number().required("انتخاب وضعیت الزامی است"),
|
||||
province_id: number().required("انتخاب استان الزامی است"),
|
||||
city_id: number().required("انتخاب شهر الزامی است"),
|
||||
station_id: number().required("انتخاب راهداری الزامی است"),
|
||||
});
|
||||
|
||||
const EditFormContent = ({ row, rowId, mutate, setOpen }) => {
|
||||
const requestServer = useRequest();
|
||||
|
||||
const [provinces, setProvinces] = useState([]);
|
||||
const [cities, setCities] = useState([]);
|
||||
const [stations, setStations] = useState([]);
|
||||
|
||||
const [loadingProvinces, setLoadingProvinces] = useState(false);
|
||||
const [loadingCities, setLoadingCities] = useState(false);
|
||||
const [loadingStations, setLoadingStations] = useState(false);
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { isSubmitting },
|
||||
} = useForm({
|
||||
defaultValues: {
|
||||
status: row.original.status,
|
||||
province_id: row.original.province_id,
|
||||
city_id: row.original.city_id,
|
||||
station_id: row.original.station_id,
|
||||
},
|
||||
resolver: yupResolver(validationSchema),
|
||||
mode: "all",
|
||||
});
|
||||
|
||||
const provinceId = useWatch({
|
||||
control,
|
||||
name: "province_id",
|
||||
});
|
||||
|
||||
const cityId = useWatch({
|
||||
control,
|
||||
name: "city_id",
|
||||
});
|
||||
|
||||
const loadProvinces = async () => {
|
||||
try {
|
||||
setLoadingProvinces(true);
|
||||
const response = await requestServer(GET_PROVINCES_LIST, "get");
|
||||
setProvinces(response.data?.data || []);
|
||||
} finally {
|
||||
setLoadingProvinces(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadCities = async (provinceId) => {
|
||||
if (!provinceId) return;
|
||||
|
||||
try {
|
||||
setLoadingCities(true);
|
||||
const response = await requestServer(`${GET_CITIES_LIST}?province_id=${provinceId}`, "get");
|
||||
setCities(response.data?.data || []);
|
||||
} finally {
|
||||
setLoadingCities(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadStations = async (cityId) => {
|
||||
if (!cityId) return;
|
||||
|
||||
try {
|
||||
setLoadingStations(true);
|
||||
const response = await requestServer(`${GET_STATIONS_LIST}/search_by_city?city_id=${cityId}`, "get");
|
||||
setStations(response.data?.data || []);
|
||||
} finally {
|
||||
setLoadingStations(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadProvinces();
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Initial edit mode loading
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (row.original.province_id) {
|
||||
loadCities(row.original.province_id);
|
||||
}
|
||||
|
||||
if (row.original.city_id) {
|
||||
loadStations(row.original.city_id);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!provinceId) return;
|
||||
|
||||
loadCities(provinceId);
|
||||
|
||||
if (provinceId !== row.original.province_id) {
|
||||
setValue("city_id", "");
|
||||
setValue("station_id", "");
|
||||
setStations([]);
|
||||
}
|
||||
}, [provinceId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!cityId) return;
|
||||
|
||||
loadStations(cityId);
|
||||
|
||||
if (cityId !== row.original.city_id) {
|
||||
setValue("station_id", "");
|
||||
}
|
||||
}, [cityId]);
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
const formData = new FormData();
|
||||
|
||||
formData.append("status", String(data.status));
|
||||
formData.append("province_id", String(data.province_id));
|
||||
formData.append("city_id", String(data.city_id));
|
||||
formData.append("station_id", String(data.station_id));
|
||||
|
||||
try {
|
||||
await requestServer(`${UPDATE_MACHINE_STATUS_AND_LOCATION}/${rowId}`, "post", {
|
||||
data: formData,
|
||||
});
|
||||
|
||||
mutate();
|
||||
setOpen(false);
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>ویرایش ماشین</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogContent dividers>
|
||||
<StyledForm id="updateMachineForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
<Stack spacing={3}>
|
||||
<Controller
|
||||
name="province_id"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl fullWidth size="small" error={!!error}>
|
||||
<InputLabel>استان</InputLabel>
|
||||
|
||||
<Select {...field} label="استان" disabled={loadingProvinces}>
|
||||
{provinces.map((province) => (
|
||||
<MenuItem key={province.id} value={province.id}>
|
||||
{province.name_fa}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="city_id"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl fullWidth size="small" error={!!error}>
|
||||
<InputLabel>شهر</InputLabel>
|
||||
|
||||
<Select {...field} label="شهر" disabled={!provinceId || loadingCities}>
|
||||
{cities.map((city) => (
|
||||
<MenuItem key={city.id} value={city.id}>
|
||||
{city.name_fa}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="station_id"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl fullWidth size="small" error={!!error}>
|
||||
<InputLabel>راهداری</InputLabel>
|
||||
|
||||
<Select {...field} label="راهداری" disabled={!cityId || loadingStations}>
|
||||
{stations.map((station) => (
|
||||
<MenuItem key={station.id} value={station.id}>
|
||||
{station.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="status"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl fullWidth size="small" error={!!error}>
|
||||
<InputLabel>وضعیت</InputLabel>
|
||||
|
||||
<Select {...field} label="وضعیت">
|
||||
{statusOptions.map((item) => (
|
||||
<MenuItem key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
{(loadingCities || loadingStations) && (
|
||||
<Stack direction="row" justifyContent="center">
|
||||
<CircularProgress size={24} />
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpen(false)} variant="outlined" color="secondary" startIcon={<ExitToApp />}>
|
||||
بستن
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
disabled={isSubmitting}
|
||||
type="submit"
|
||||
form="updateMachineForm"
|
||||
endIcon={<Beenhere />}
|
||||
>
|
||||
{isSubmitting ? "در حال ویرایش" : "ویرایش ماشین"}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditFormContent;
|
||||
import StyledForm from "@/core/components/StyledForm";
|
||||
import {
|
||||
GET_CITIES_LIST,
|
||||
GET_PROVINCES_LIST,
|
||||
GET_STATIONS_LIST,
|
||||
UPDATE_MACHINE_STATUS_AND_LOCATION,
|
||||
} from "@/core/utils/routes";
|
||||
import useRequest from "@/lib/hooks/useRequest";
|
||||
import { yupResolver } from "@hookform/resolvers/yup";
|
||||
import { Beenhere, ExitToApp } from "@mui/icons-material";
|
||||
import {
|
||||
Button,
|
||||
CircularProgress,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Select,
|
||||
Stack,
|
||||
} from "@mui/material";
|
||||
import { DialogHeader } from "next/dist/client/components/react-dev-overlay/internal/components/Dialog";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Controller, useForm, useWatch } from "react-hook-form";
|
||||
import { number, object } from "yup";
|
||||
|
||||
const statusOptions = [
|
||||
{ value: 1, label: "آماده" },
|
||||
{ value: 2, label: "رزرو" },
|
||||
{ value: 3, label: "در ماموریت" },
|
||||
{ value: 4, label: "خارج از رده" },
|
||||
{ value: 5, label: "در تعمیر" },
|
||||
{ value: 6, label: "فروخته شده" },
|
||||
{ value: 7, label: "نیاز به تعمیر" },
|
||||
];
|
||||
|
||||
const validationSchema = object({
|
||||
status: number().required("انتخاب وضعیت الزامی است"),
|
||||
province_id: number().required("انتخاب استان الزامی است"),
|
||||
city_id: number().required("انتخاب شهر الزامی است"),
|
||||
station_id: number().required("انتخاب راهداری الزامی است"),
|
||||
});
|
||||
|
||||
const EditFormContent = ({ row, rowId, mutate, setOpen }) => {
|
||||
const requestServer = useRequest();
|
||||
|
||||
const [provinces, setProvinces] = useState([]);
|
||||
const [cities, setCities] = useState([]);
|
||||
const [stations, setStations] = useState([]);
|
||||
|
||||
const [loadingProvinces, setLoadingProvinces] = useState(false);
|
||||
const [loadingCities, setLoadingCities] = useState(false);
|
||||
const [loadingStations, setLoadingStations] = useState(false);
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
setValue,
|
||||
formState: { isSubmitting },
|
||||
} = useForm({
|
||||
defaultValues: {
|
||||
status: row.original.status,
|
||||
province_id: row.original.province_id,
|
||||
city_id: row.original.city_id,
|
||||
station_id: row.original.station_id,
|
||||
},
|
||||
resolver: yupResolver(validationSchema),
|
||||
mode: "all",
|
||||
});
|
||||
|
||||
const provinceId = useWatch({
|
||||
control,
|
||||
name: "province_id",
|
||||
});
|
||||
|
||||
const cityId = useWatch({
|
||||
control,
|
||||
name: "city_id",
|
||||
});
|
||||
|
||||
const loadProvinces = async () => {
|
||||
try {
|
||||
setLoadingProvinces(true);
|
||||
const response = await requestServer(GET_PROVINCES_LIST, "get");
|
||||
setProvinces(response.data?.data || []);
|
||||
} finally {
|
||||
setLoadingProvinces(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadCities = async (provinceId) => {
|
||||
if (!provinceId) return;
|
||||
|
||||
try {
|
||||
setLoadingCities(true);
|
||||
const response = await requestServer(`${GET_CITIES_LIST}?province_id=${provinceId}`, "get");
|
||||
setCities(response.data?.data || []);
|
||||
} finally {
|
||||
setLoadingCities(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadStations = async (cityId) => {
|
||||
if (!cityId) return;
|
||||
|
||||
try {
|
||||
setLoadingStations(true);
|
||||
const response = await requestServer(`${GET_STATIONS_LIST}/search_by_city?city_id=${cityId}`, "get");
|
||||
setStations(response.data?.data || []);
|
||||
} finally {
|
||||
setLoadingStations(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadProvinces();
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Initial edit mode loading
|
||||
*/
|
||||
useEffect(() => {
|
||||
if (row.original.province_id) {
|
||||
loadCities(row.original.province_id);
|
||||
}
|
||||
|
||||
if (row.original.city_id) {
|
||||
loadStations(row.original.city_id);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!provinceId) return;
|
||||
|
||||
loadCities(provinceId);
|
||||
|
||||
if (provinceId !== row.original.province_id) {
|
||||
setValue("city_id", "");
|
||||
setValue("station_id", "");
|
||||
setStations([]);
|
||||
}
|
||||
}, [provinceId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!cityId) return;
|
||||
|
||||
loadStations(cityId);
|
||||
|
||||
if (cityId !== row.original.city_id) {
|
||||
setValue("station_id", "");
|
||||
}
|
||||
}, [cityId]);
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
const formData = new FormData();
|
||||
|
||||
formData.append("status", String(data.status));
|
||||
formData.append("province_id", String(data.province_id));
|
||||
formData.append("city_id", String(data.city_id));
|
||||
formData.append("station_id", String(data.station_id));
|
||||
|
||||
try {
|
||||
await requestServer(`${UPDATE_MACHINE_STATUS_AND_LOCATION}/${rowId}`, "post", {
|
||||
data: formData,
|
||||
});
|
||||
|
||||
mutate();
|
||||
setOpen(false);
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>ویرایش ماشین</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogContent dividers>
|
||||
<StyledForm id="updateMachineForm" onSubmit={handleSubmit(onSubmit)}>
|
||||
<Stack spacing={3}>
|
||||
<Controller
|
||||
name="province_id"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl fullWidth size="small" error={!!error}>
|
||||
<InputLabel>استان</InputLabel>
|
||||
|
||||
<Select {...field} label="استان" disabled={loadingProvinces}>
|
||||
{provinces.map((province) => (
|
||||
<MenuItem key={province.id} value={province.id}>
|
||||
{province.name_fa}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="city_id"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl fullWidth size="small" error={!!error}>
|
||||
<InputLabel>شهر</InputLabel>
|
||||
|
||||
<Select {...field} label="شهر" disabled={!provinceId || loadingCities}>
|
||||
{cities.map((city) => (
|
||||
<MenuItem key={city.id} value={city.id}>
|
||||
{city.name_fa}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
name="station_id"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl fullWidth size="small" error={!!error}>
|
||||
<InputLabel>راهداری</InputLabel>
|
||||
|
||||
<Select {...field} label="راهداری" disabled={!cityId || loadingStations}>
|
||||
{stations.map((station) => (
|
||||
<MenuItem key={station.id} value={station.id}>
|
||||
{station.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
name="status"
|
||||
control={control}
|
||||
render={({ field, fieldState: { error } }) => (
|
||||
<FormControl fullWidth size="small" error={!!error}>
|
||||
<InputLabel>وضعیت</InputLabel>
|
||||
|
||||
<Select {...field} label="وضعیت">
|
||||
{statusOptions.map((item) => (
|
||||
<MenuItem key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
{(loadingCities || loadingStations) && (
|
||||
<Stack direction="row" justifyContent="center">
|
||||
<CircularProgress size={24} />
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</StyledForm>
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions>
|
||||
<Button onClick={() => setOpen(false)} variant="outlined" color="secondary" startIcon={<ExitToApp />}>
|
||||
بستن
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
disabled={isSubmitting}
|
||||
type="submit"
|
||||
form="updateMachineForm"
|
||||
endIcon={<Beenhere />}
|
||||
>
|
||||
{isSubmitting ? "در حال ویرایش" : "ویرایش ماشین"}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditFormContent;
|
||||
|
||||
@@ -1,44 +1,44 @@
|
||||
import { SwapHoriz } from "@mui/icons-material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { Dialog, IconButton, Tooltip } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import EditFormContent from "./Form";
|
||||
|
||||
const Edit = ({ row, mutate, rowId }) => {
|
||||
const [openEditDialog, setOpenEditDialog] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="ویرایش" arrow placement="right">
|
||||
<IconButton
|
||||
color="primary"
|
||||
sx={{ textTransform: "unset", alignSelf: "center" }}
|
||||
onClick={() => {
|
||||
setOpenEditDialog(true);
|
||||
}}
|
||||
>
|
||||
<SwapHoriz />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog open={openEditDialog} fullWidth maxWidth="xs">
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={() => setOpenEditDialog(false)}
|
||||
sx={(theme) => ({
|
||||
position: "absolute",
|
||||
right: 8,
|
||||
top: 8,
|
||||
zIndex: 50,
|
||||
color: theme.palette.grey[500],
|
||||
})}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
{openEditDialog && (
|
||||
<EditFormContent rowId={rowId} row={row} setOpen={setOpenEditDialog} mutate={mutate} />
|
||||
)}
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Edit;
|
||||
import { SwapHoriz } from "@mui/icons-material";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { Dialog, IconButton, Tooltip } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import EditFormContent from "./Form";
|
||||
|
||||
const Edit = ({ row, mutate, rowId }) => {
|
||||
const [openEditDialog, setOpenEditDialog] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="ویرایش" arrow placement="right">
|
||||
<IconButton
|
||||
color="primary"
|
||||
sx={{ textTransform: "unset", alignSelf: "center" }}
|
||||
onClick={() => {
|
||||
setOpenEditDialog(true);
|
||||
}}
|
||||
>
|
||||
<SwapHoriz />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog open={openEditDialog} fullWidth maxWidth="xs">
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={() => setOpenEditDialog(false)}
|
||||
sx={(theme) => ({
|
||||
position: "absolute",
|
||||
right: 8,
|
||||
top: 8,
|
||||
zIndex: 50,
|
||||
color: theme.palette.grey[500],
|
||||
})}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
{openEditDialog && (
|
||||
<EditFormContent rowId={rowId} row={row} setOpen={setOpenEditDialog} mutate={mutate} />
|
||||
)}
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Edit;
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { usePermissions } from "@/lib/hooks/usePermissions";
|
||||
import { Box } from "@mui/material";
|
||||
import Edit from "./Edit";
|
||||
|
||||
const RowActions = ({ row, mutate }) => {
|
||||
const { data: userPermissions } = usePermissions();
|
||||
const hasEditPermission = userPermissions.some((item) => ["update-machine"].includes(item));
|
||||
return (
|
||||
<Box sx={{ display: "flex", gap: 1 }}>
|
||||
{hasEditPermission && <Edit row={row} mutate={mutate} rowId={row.getValue("id")} />}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
export default RowActions;
|
||||
import { usePermissions } from "@/lib/hooks/usePermissions";
|
||||
import { Box } from "@mui/material";
|
||||
import Edit from "./Edit";
|
||||
|
||||
const RowActions = ({ row, mutate }) => {
|
||||
const { data: userPermissions } = usePermissions();
|
||||
const hasEditPermission = userPermissions.some((item) => ["update-machine"].includes(item));
|
||||
return (
|
||||
<Box sx={{ display: "flex", gap: 1 }}>
|
||||
{hasEditPermission && <Edit row={row} mutate={mutate} rowId={row.getValue("id")} />}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
export default RowActions;
|
||||
|
||||
@@ -1,29 +1,29 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { FeatureGroup, useMap } from "react-leaflet";
|
||||
|
||||
const ShowBound = ({ bound }) => {
|
||||
const map = useMap();
|
||||
const featureRef = useRef(null);
|
||||
|
||||
const safeFitBounds = (layer) => {
|
||||
if (!layer || !map) return;
|
||||
try {
|
||||
const latLngs = layer.getLatLngs();
|
||||
map.fitBounds(latLngs, {
|
||||
paddingTopLeft: [20, 20],
|
||||
paddingBottomRight: [20, 20],
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn("fitBounds failed:", e);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
bound?.editing?.disable();
|
||||
featureRef.current.addLayer(bound);
|
||||
safeFitBounds(bound);
|
||||
}, []);
|
||||
|
||||
return <FeatureGroup ref={featureRef} />;
|
||||
};
|
||||
export default ShowBound;
|
||||
import { useEffect, useRef } from "react";
|
||||
import { FeatureGroup, useMap } from "react-leaflet";
|
||||
|
||||
const ShowBound = ({ bound }) => {
|
||||
const map = useMap();
|
||||
const featureRef = useRef(null);
|
||||
|
||||
const safeFitBounds = (layer) => {
|
||||
if (!layer || !map) return;
|
||||
try {
|
||||
const latLngs = layer.getLatLngs();
|
||||
map.fitBounds(latLngs, {
|
||||
paddingTopLeft: [20, 20],
|
||||
paddingBottomRight: [20, 20],
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn("fitBounds failed:", e);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
bound?.editing?.disable();
|
||||
featureRef.current.addLayer(bound);
|
||||
safeFitBounds(bound);
|
||||
}, []);
|
||||
|
||||
return <FeatureGroup ref={featureRef} />;
|
||||
};
|
||||
export default ShowBound;
|
||||
|
||||
@@ -1,65 +1,65 @@
|
||||
const { IconButton, Tooltip, Box, Dialog, DialogTitle, Typography, DialogContent } = require("@mui/material");
|
||||
import MapLayer from "@/core/components/MapLayer";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import LayersIcon from "@mui/icons-material/Layers";
|
||||
import L from "leaflet";
|
||||
import { useMemo, useState } from "react";
|
||||
import ShowBound from "./ShowBound";
|
||||
|
||||
const ShowProjectArea = ({ primaryArea }) => {
|
||||
const [openShowAreaDialog, setOpenShowAreaDialog] = useState(false);
|
||||
const bound = useMemo(() => {
|
||||
const coordinates = Object.values(primaryArea.coordinates);
|
||||
|
||||
const latLngCoords = coordinates.map(([lat, lng]) => [parseFloat(lng), parseFloat(lat)]);
|
||||
|
||||
return primaryArea.type === "polygon"
|
||||
? L.polygon(latLngCoords, { color: "#ff5555" })
|
||||
: L.polyline(latLngCoords);
|
||||
}, [primaryArea]);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Tooltip title="نمایش پلیگان" placement="right" arrow>
|
||||
<IconButton size="small" color="primary" onClick={() => setOpenShowAreaDialog(true)}>
|
||||
<LayersIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog
|
||||
open={openShowAreaDialog}
|
||||
onClose={() => setOpenShowAreaDialog(false)}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
transition: "all .3s",
|
||||
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
|
||||
borderRadius: 2,
|
||||
padding: 1,
|
||||
},
|
||||
}}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
dir="rtl"
|
||||
>
|
||||
<DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
|
||||
محدوده طرح
|
||||
</Typography>
|
||||
<IconButton onClick={() => setOpenShowAreaDialog(false)} size="small">
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ width: "100%", height: "400px" }}>
|
||||
<MapLayer style={{ borderRadius: "4px" }}>
|
||||
<ShowBound bound={bound} />
|
||||
</MapLayer>
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShowProjectArea;
|
||||
const { IconButton, Tooltip, Box, Dialog, DialogTitle, Typography, DialogContent } = require("@mui/material");
|
||||
import MapLayer from "@/core/components/MapLayer";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import LayersIcon from "@mui/icons-material/Layers";
|
||||
import L from "leaflet";
|
||||
import { useMemo, useState } from "react";
|
||||
import ShowBound from "./ShowBound";
|
||||
|
||||
const ShowProjectArea = ({ primaryArea }) => {
|
||||
const [openShowAreaDialog, setOpenShowAreaDialog] = useState(false);
|
||||
const bound = useMemo(() => {
|
||||
const coordinates = Object.values(primaryArea.coordinates);
|
||||
|
||||
const latLngCoords = coordinates.map(([lat, lng]) => [parseFloat(lng), parseFloat(lat)]);
|
||||
|
||||
return primaryArea.type === "polygon"
|
||||
? L.polygon(latLngCoords, { color: "#ff5555" })
|
||||
: L.polyline(latLngCoords);
|
||||
}, [primaryArea]);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Tooltip title="نمایش پلیگان" placement="right" arrow>
|
||||
<IconButton size="small" color="primary" onClick={() => setOpenShowAreaDialog(true)}>
|
||||
<LayersIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog
|
||||
open={openShowAreaDialog}
|
||||
onClose={() => setOpenShowAreaDialog(false)}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
transition: "all .3s",
|
||||
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
|
||||
borderRadius: 2,
|
||||
padding: 1,
|
||||
},
|
||||
}}
|
||||
maxWidth="sm"
|
||||
fullWidth
|
||||
dir="rtl"
|
||||
>
|
||||
<DialogTitle sx={{ display: "flex", justifyContent: "space-between", padding: "16px 24px" }}>
|
||||
<Typography variant="body1" sx={{ fontWeight: "bold", fontSize: "large" }}>
|
||||
محدوده طرح
|
||||
</Typography>
|
||||
<IconButton onClick={() => setOpenShowAreaDialog(false)} size="small">
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Box sx={{ width: "100%", height: "400px" }}>
|
||||
<MapLayer style={{ borderRadius: "4px" }}>
|
||||
<ShowBound bound={bound} />
|
||||
</MapLayer>
|
||||
</Box>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShowProjectArea;
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
"use client";
|
||||
import PageTitle from "@/core/components/PageTitle";
|
||||
import { Stack } from "@mui/material";
|
||||
import MachinesList from "./MachinesList";
|
||||
|
||||
const MachinesPage = () => {
|
||||
return (
|
||||
<Stack spacing={1}>
|
||||
<PageTitle title={"لیست ماشین ها"} />
|
||||
<MachinesList />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
export default MachinesPage;
|
||||
"use client";
|
||||
import PageTitle from "@/core/components/PageTitle";
|
||||
import { Stack } from "@mui/material";
|
||||
import MachinesList from "./MachinesList";
|
||||
|
||||
const MachinesPage = () => {
|
||||
return (
|
||||
<Stack spacing={1}>
|
||||
<PageTitle title={"لیست ماشین ها"} />
|
||||
<MachinesList />
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
export default MachinesPage;
|
||||
|
||||
@@ -1,116 +1,113 @@
|
||||
import { Delete, Route } from "@mui/icons-material";
|
||||
import { Box, Button, Stack, Typography } from "@mui/material";
|
||||
import { useReducer } from "react";
|
||||
import DrawBound from "./DrawBound";
|
||||
"use client";
|
||||
|
||||
const statusType = [
|
||||
{
|
||||
id: 0,
|
||||
message: "برای آغاز ترسیم مسیر، کلیک کنید!",
|
||||
buttons: [
|
||||
{
|
||||
label: "شروع ترسیم مسیر",
|
||||
key: "start",
|
||||
color: "primary",
|
||||
icon: <Route />,
|
||||
onclick: (controlDispach) => {
|
||||
controlDispach({ type: "SET_STATUS", status: 1 });
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
message: "مسیر موردنظر را با کلیک روی نقشه مشخص کنید. برای اتمام، روی نقطهی پایانی کلیک کنید!",
|
||||
buttons: [],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
message: "برای اصلاح مسیر، گوشهها را بکشید. برای ترسیم دوباره، آن را حذف کنید",
|
||||
buttons: [
|
||||
{
|
||||
label: "حذف",
|
||||
key: "end",
|
||||
color: "error",
|
||||
icon: <Delete />,
|
||||
onclick: (controlDispach) => {
|
||||
controlDispach({ type: "SET_STATUS", status: 0 });
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
import { useEffect, useState } from "react";
|
||||
import { Marker, Polyline, useMap } from "react-leaflet";
|
||||
import L from "leaflet";
|
||||
|
||||
const createInitialState = (bound) => {
|
||||
if (bound) {
|
||||
return { status: 2 };
|
||||
}
|
||||
return { status: 0 };
|
||||
};
|
||||
// ===== Icons =====
|
||||
const originIcon = new L.Icon({
|
||||
iconUrl: "/icons/origin-icon.svg",
|
||||
iconSize: [32, 32],
|
||||
iconAnchor: [16, 32],
|
||||
});
|
||||
|
||||
const reducer = (state, action) => {
|
||||
switch (action.type) {
|
||||
case "SET_STATUS":
|
||||
return { ...state, status: action.status };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
const destinationIcon = new L.Icon({
|
||||
iconUrl: "/icons/destination-icon.svg",
|
||||
iconSize: [32, 32],
|
||||
iconAnchor: [16, 32],
|
||||
});
|
||||
|
||||
const MapControlPolyline = ({ bound, setBound }) => {
|
||||
const [control, controlDispach] = useReducer(reducer, bound, createInitialState);
|
||||
// ===== Track Center =====
|
||||
function MapCenterTracker({ setCenter }) {
|
||||
const map = useMap();
|
||||
|
||||
useEffect(() => {
|
||||
const updateCenter = () => {
|
||||
setCenter(map.getCenter());
|
||||
};
|
||||
|
||||
updateCenter();
|
||||
|
||||
map.on("move", updateCenter);
|
||||
|
||||
return () => {
|
||||
map.off("move", updateCenter);
|
||||
};
|
||||
}, [map, setCenter]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// ===== Fixed Center Marker =====
|
||||
function FixedCenterMarker() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -100%)",
|
||||
zIndex: 1000,
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
>
|
||||
<img src="/icons/origin-icon.svg" width={40} height={40} alt="center" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Example() {
|
||||
const [center, setCenter] = useState(null);
|
||||
|
||||
const [origin, setOrigin] = useState(null);
|
||||
const [destination, setDestination] = useState(null);
|
||||
|
||||
const [step, setStep] = useState("origin");
|
||||
|
||||
const handleOk = () => {
|
||||
if (!center) return;
|
||||
|
||||
if (step === "origin") {
|
||||
setOrigin(center);
|
||||
setStep("destination");
|
||||
return;
|
||||
}
|
||||
|
||||
if (step === "destination") {
|
||||
setDestination(center);
|
||||
setStep("done");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DrawBound bound={bound} setBound={setBound} control={control} controlDispach={controlDispach} />
|
||||
<Stack
|
||||
direction={"row"}
|
||||
justifyContent={"center"}
|
||||
sx={{ position: "absolute", left: 0, top: 0, zIndex: 2000, width: "100%" }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
background: (theme) => theme.palette.info.main,
|
||||
borderBottomLeftRadius: 8,
|
||||
borderBottomRightRadius: 8,
|
||||
py: 0.5,
|
||||
px: 2,
|
||||
}}
|
||||
>
|
||||
<Typography align="center" component={"div"} variant="caption" color={"#fff"}>
|
||||
{statusType.find((st) => st.id == control.status).message}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
zIndex: 2000,
|
||||
width: "100%",
|
||||
py: 1,
|
||||
background: "linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0))",
|
||||
<div>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
height: "400px",
|
||||
}}
|
||||
>
|
||||
<Stack direction={"row"} justifyContent={"center"} spacing={2}>
|
||||
{statusType
|
||||
.find((st) => st.id == control.status)
|
||||
.buttons.map((button) => (
|
||||
<Button
|
||||
size="small"
|
||||
key={button.key}
|
||||
variant="contained"
|
||||
onClick={() => button.onclick(controlDispach)}
|
||||
color={button.color}
|
||||
startIcon={button.icon}
|
||||
>
|
||||
{button.label}
|
||||
</Button>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</>
|
||||
<MapCenterTracker setCenter={setCenter} />
|
||||
|
||||
{/* saved markers */}
|
||||
{origin && <Marker position={origin} icon={originIcon} />}
|
||||
|
||||
{destination && <Marker position={destination} icon={destinationIcon} />}
|
||||
|
||||
{/* route line */}
|
||||
{origin && destination && <Polyline positions={[origin, destination]} />}
|
||||
|
||||
{/* fixed center pin */}
|
||||
{step !== "done" && <FixedCenterMarker />}
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: 16, position: "absolute", z: 50, top: 5 }}>
|
||||
<button onClick={handleOk}>
|
||||
{step === "origin" && "Set Origin"}
|
||||
{step === "destination" && "Set Destination"}
|
||||
{step === "done" && "Completed"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default MapControlPolyline;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Box, Typography } from "@mui/material";
|
||||
|
||||
const AlarmText = ({ isSource }) => {
|
||||
if (isSource) return null;
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 5,
|
||||
left: 5,
|
||||
zIndex: 1000,
|
||||
border: "1px solid #ed0f02",
|
||||
backgroundColor: "#f19898",
|
||||
py: 0.5,
|
||||
px: 1,
|
||||
borderRadius: 2,
|
||||
opacity: 0.8,
|
||||
boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" sx={{ fontWeight: "bold" }} color="#ed0f02">
|
||||
با کلیک بر روی مارکر موقعیت را انتخاب کنید
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlarmText;
|
||||
@@ -0,0 +1,53 @@
|
||||
import { Box, Button, TextField } from "@mui/material";
|
||||
|
||||
const DataBox = ({ isSource, isDest, sourcePosition, destPosition, editingTarget, onEditSource, onEditDest }) => {
|
||||
if (!isSource) return null;
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: 5,
|
||||
left: 5,
|
||||
zIndex: 1000,
|
||||
backgroundColor: "white",
|
||||
border: "1px solid #e1e1e1",
|
||||
padding: 1,
|
||||
borderRadius: 2,
|
||||
opacity: 0.8,
|
||||
gap: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
size="small"
|
||||
readOnly
|
||||
value={sourcePosition ? `${sourcePosition.lat.toFixed(6)}, ${sourcePosition.lng.toFixed(6)}` : ""}
|
||||
/>
|
||||
{isSource && isDest && (
|
||||
<Button variant="contained" color="success" size="small" onClick={onEditSource}>
|
||||
ویرایش مبدا
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{isDest && (
|
||||
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
|
||||
<TextField
|
||||
size="small"
|
||||
variant="outlined"
|
||||
readOnly
|
||||
value={destPosition ? `${destPosition.lat.toFixed(6)}, ${destPosition.lng.toFixed(6)}` : ""}
|
||||
/>
|
||||
<Button variant="contained" color="error" size="small" onClick={onEditDest}>
|
||||
ویرایش مقصد
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default DataBox;
|
||||
@@ -0,0 +1,46 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { Marker, Polyline, useMap } from "react-leaflet";
|
||||
import L from "leaflet";
|
||||
import polyline from "@mapbox/polyline";
|
||||
import SourceIcon from "@/assets/images/source-icon.svg";
|
||||
import DestIcon from "@/assets/images/destination-icon.svg";
|
||||
|
||||
const ShowRoute = ({ area }) => {
|
||||
const map = useMap();
|
||||
const defaultIconSize = [35, 35];
|
||||
|
||||
const createCustomIcon = (size, iconUrl) => {
|
||||
return L.icon({
|
||||
iconUrl: iconUrl,
|
||||
iconSize: size,
|
||||
iconAnchor: [size[0] / 2, size[1]],
|
||||
popupAnchor: [0, -size[1]],
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (coords.length > 0) {
|
||||
map.flyToBounds(coords, { padding: [50, 50], duration: 1.5 });
|
||||
}
|
||||
}, [area]);
|
||||
const sourceIcon = createCustomIcon(defaultIconSize, SourceIcon.src);
|
||||
const destIcon = createCustomIcon(defaultIconSize, DestIcon.src);
|
||||
|
||||
if (!area) return null;
|
||||
const coords = polyline.decode(area, 6);
|
||||
|
||||
if (coords.length === 0) return null;
|
||||
|
||||
const sourcePosition = coords[0];
|
||||
const destPosition = coords[coords.length - 1];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Polyline positions={coords} color="#015688" weight={7} opacity={1} />
|
||||
<Marker position={sourcePosition} icon={sourceIcon} />
|
||||
<Marker position={destPosition} icon={destIcon} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShowRoute;
|
||||
@@ -0,0 +1,219 @@
|
||||
import { Marker, Polyline, useMapEvents } from "react-leaflet";
|
||||
import L from "leaflet";
|
||||
import polyline from "@mapbox/polyline";
|
||||
import SourceIcon from "@/assets/images/source-icon.svg";
|
||||
import PrevSourceIcon from "@/assets/images/prev-source-icon.svg";
|
||||
import PrevDestIcon from "@/assets/images/prev-destination-icon.svg";
|
||||
import DestIcon from "@/assets/images/destination-icon.svg";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import DataBox from "./DataBox";
|
||||
import AlarmText from "./AlarmText";
|
||||
|
||||
const Routing = ({ setArea, setLocations, locations, area }) => {
|
||||
const mapPrevSourceMarker = useRef();
|
||||
const mapPrevDestMarker = useRef();
|
||||
const mapRef = useRef(null);
|
||||
const defaultIconSize = [35, 35];
|
||||
const [isSource, setIsSource] = useState(false);
|
||||
const [sourcePosition, setSourcePosition] = useState(null);
|
||||
const [isDest, setIsDest] = useState(false);
|
||||
const [destPosition, setDestPosition] = useState(null);
|
||||
const [routeCoords, setRouteCoords] = useState([]);
|
||||
const [alternateCoords, setAlternateCoords] = useState([]);
|
||||
const [editingTarget, setEditingTarget] = useState(null);
|
||||
const [selectedRoute, setSelectedRoute] = useState(null);
|
||||
|
||||
const createCustomIcon = (size, iconUrl) => {
|
||||
return L.icon({
|
||||
iconUrl: iconUrl,
|
||||
iconSize: size,
|
||||
iconAnchor: [size[0] / 2, size[1]],
|
||||
popupAnchor: [0, -size[1]],
|
||||
});
|
||||
};
|
||||
|
||||
const defaultIcon = createCustomIcon(
|
||||
defaultIconSize,
|
||||
isSource && editingTarget !== "source" ? SourceIcon.src : PrevSourceIcon.src
|
||||
);
|
||||
|
||||
const prevDestIcon = createCustomIcon(
|
||||
defaultIconSize,
|
||||
isDest && editingTarget !== "dest" ? DestIcon.src : PrevDestIcon.src
|
||||
);
|
||||
|
||||
const isMovingSource = !isSource || editingTarget === "source";
|
||||
const isMovingDest = isSource && (!isDest || editingTarget === "dest");
|
||||
|
||||
const map = useMapEvents({
|
||||
move(e) {
|
||||
if (isMovingSource) mapPrevSourceMarker.current.setLatLng(e.target.getCenter());
|
||||
if (isMovingDest && mapPrevDestMarker.current) mapPrevDestMarker.current.setLatLng(e.target.getCenter());
|
||||
},
|
||||
movestart() {
|
||||
if (isMovingSource) mapPrevSourceMarker.current.setIcon(createCustomIcon([45, 45], PrevSourceIcon.src));
|
||||
if (isMovingDest && mapPrevDestMarker.current)
|
||||
mapPrevDestMarker.current.setIcon(createCustomIcon([45, 45], PrevDestIcon.src));
|
||||
},
|
||||
moveend() {
|
||||
if (isMovingSource)
|
||||
mapPrevSourceMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevSourceIcon.src));
|
||||
if (isMovingDest && mapPrevDestMarker.current)
|
||||
mapPrevDestMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevDestIcon.src));
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
mapRef.current = map;
|
||||
}, [map]);
|
||||
|
||||
useEffect(() => {
|
||||
if (locations.length < 2) return;
|
||||
const restoredSource = { lat: locations[0].lat, lng: locations[0].lon };
|
||||
const restoredDest = { lat: locations[1].lat, lng: locations[1].lon };
|
||||
setSourcePosition(restoredSource);
|
||||
setDestPosition(restoredDest);
|
||||
setIsSource(true);
|
||||
setIsDest(true);
|
||||
if (area) {
|
||||
const decoded = polyline.decode(area, 6);
|
||||
setRouteCoords(decoded);
|
||||
setSelectedRoute({ index: "main", coords: decoded });
|
||||
setTimeout(() => {
|
||||
mapRef.current?.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
|
||||
}, 100);
|
||||
} else {
|
||||
fetchRoute(restoredSource, restoredDest);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchRoute = async (source, dest) => {
|
||||
const locs = [
|
||||
{ lat: source.lat, lon: source.lng },
|
||||
{ lat: dest.lat, lon: dest.lng },
|
||||
];
|
||||
try {
|
||||
const response = await fetch("https://jouya.141.ir/api/router/drive", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ locations: locs }),
|
||||
});
|
||||
const data = await response.json();
|
||||
const shape = data.trip.legs[0].shape;
|
||||
setLocations(locs);
|
||||
setArea(shape);
|
||||
const decoded = polyline.decode(shape, 6);
|
||||
setRouteCoords(decoded);
|
||||
setSelectedRoute({ index: "main", coords: decoded });
|
||||
|
||||
if (data.alternates?.length > 0) {
|
||||
const decodedAlternates = data.alternates.map((alt) => polyline.decode(alt.trip.legs[0].shape, 6));
|
||||
setAlternateCoords(decodedAlternates);
|
||||
} else {
|
||||
setAlternateCoords([]);
|
||||
}
|
||||
map.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
|
||||
} catch (error) {
|
||||
console.error("Routing error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMarkerClick = async () => {
|
||||
if (!isSource || editingTarget === "source") {
|
||||
const clickedPosition = mapPrevSourceMarker.current.getLatLng();
|
||||
setSourcePosition(clickedPosition);
|
||||
setIsSource(true);
|
||||
setEditingTarget(null);
|
||||
setRouteCoords([]);
|
||||
setAlternateCoords([]);
|
||||
setSelectedRoute(null);
|
||||
|
||||
if (editingTarget === "source" && destPosition) {
|
||||
await fetchRoute(clickedPosition, destPosition);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDestMarkerClick = async () => {
|
||||
if (!isDest || editingTarget === "dest") {
|
||||
const clickedPosition = mapPrevDestMarker.current.getLatLng();
|
||||
setDestPosition(clickedPosition);
|
||||
setIsDest(true);
|
||||
setEditingTarget(null);
|
||||
|
||||
await fetchRoute(sourcePosition, clickedPosition);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditSource = () => {
|
||||
setEditingTarget("source");
|
||||
setRouteCoords([]);
|
||||
setAlternateCoords([]);
|
||||
setSelectedRoute(null);
|
||||
};
|
||||
|
||||
const handleEditDest = () => {
|
||||
setEditingTarget("dest");
|
||||
setRouteCoords([]);
|
||||
setAlternateCoords([]);
|
||||
setSelectedRoute(null);
|
||||
};
|
||||
|
||||
const handleSelectRoute = (index, coords) => {
|
||||
setSelectedRoute({ index, coords });
|
||||
const encoded = polyline.encode(coords, 6);
|
||||
setArea(encoded);
|
||||
map.flyToBounds(coords, { padding: [50, 50], duration: 0.3 });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataBox
|
||||
isSource={isSource}
|
||||
isDest={isDest}
|
||||
sourcePosition={sourcePosition}
|
||||
destPosition={destPosition}
|
||||
editingTarget={editingTarget}
|
||||
onEditSource={handleEditSource}
|
||||
onEditDest={handleEditDest}
|
||||
/>
|
||||
<AlarmText isSource={isSource} />
|
||||
<Marker
|
||||
position={sourcePosition || map.getCenter()}
|
||||
ref={mapPrevSourceMarker}
|
||||
eventHandlers={{ click: handleMarkerClick }}
|
||||
icon={defaultIcon}
|
||||
/>
|
||||
{isSource && (
|
||||
<Marker
|
||||
position={destPosition || map.getCenter()}
|
||||
ref={mapPrevDestMarker}
|
||||
eventHandlers={{ click: handleDestMarkerClick }}
|
||||
icon={prevDestIcon}
|
||||
/>
|
||||
)}
|
||||
{alternateCoords.map((coords, index) => (
|
||||
<Polyline
|
||||
key={`alternate-${index}-${selectedRoute?.index === index}`}
|
||||
positions={coords}
|
||||
color={selectedRoute?.index === index ? "#015688" : "#91B2C6"}
|
||||
weight={selectedRoute?.index === index ? 7 : 6}
|
||||
opacity={selectedRoute?.index === index ? 1 : 0.7}
|
||||
eventHandlers={{ click: () => handleSelectRoute(index, coords) }}
|
||||
/>
|
||||
))}
|
||||
{routeCoords.length > 0 && (
|
||||
<Polyline
|
||||
key={`main-${selectedRoute?.index === "main"}`}
|
||||
positions={routeCoords}
|
||||
color={selectedRoute?.index === "main" ? "#015688" : "#91B2C6"}
|
||||
weight={selectedRoute?.index === "main" ? 7 : 6}
|
||||
opacity={selectedRoute?.index === "main" ? 1 : 0.7}
|
||||
eventHandlers={{ click: () => handleSelectRoute("main", routeCoords) }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Routing;
|
||||
@@ -2,19 +2,21 @@ import MapLoading from "@/core/components/MapLayer/Loading";
|
||||
import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useCallback, useState } from "react";
|
||||
import MapControlPolyline from "./MapControlPolyline";
|
||||
import Routing from "./Routing";
|
||||
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
|
||||
loading: () => <MapLoading />,
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
|
||||
const [bound, setBound] = useState(allData.bound);
|
||||
const [area, setArea] = useState(allData.area);
|
||||
const [locations, setLocations] = useState(allData.locations);
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
setAllData({ bound: bound });
|
||||
setAllData({ area: area });
|
||||
setAllData({ locations: locations });
|
||||
setTabState((s) => s + 1);
|
||||
}, [bound]);
|
||||
}, [area]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -22,7 +24,7 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
|
||||
<Stack spacing={2}>
|
||||
<Box sx={{ width: "100%", height: "400px" }}>
|
||||
<MapLayer style={{ borderRadius: "4px" }}>
|
||||
<MapControlPolyline bound={bound} setBound={setBound} boundType={"polyline"} />
|
||||
<Routing area={area} setArea={setArea} locations={locations} setLocations={setLocations} />
|
||||
</MapLayer>
|
||||
</Box>
|
||||
</Stack>
|
||||
@@ -31,8 +33,8 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
|
||||
<Button onClick={handlePrev} variant="outlined" color="secondary" size="large">
|
||||
{"مرحله قبلی"}
|
||||
</Button>
|
||||
<Button variant="contained" size="large" disabled={!bound} onClick={handleNext}>
|
||||
{!bound ? "در انتظار ترسیم" : "مرحله بعد"}
|
||||
<Button variant="contained" size="large" disabled={!area} onClick={handleNext}>
|
||||
{!area ? "در انتظار ترسیم" : "مرحله بعد"}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
|
||||
@@ -7,7 +7,7 @@ import { Box, Button, Chip, DialogActions, DialogContent, Divider, Stack, Typogr
|
||||
import moment from "jalali-moment";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useCallback } from "react";
|
||||
import ShowBound from "../../../showBound";
|
||||
import ShowRoute from "../Area/Routing/ShowRoute";
|
||||
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
|
||||
loading: () => <MapLoading />,
|
||||
ssr: false,
|
||||
@@ -23,11 +23,16 @@ const Verify = ({ allData, handlePrev, submitForm, submitting }) => {
|
||||
<DialogContent dividers>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Stack spacing={2}>
|
||||
<Box sx={{ width: "100%", height: "200px" }}>
|
||||
<MapLayer style={{ borderRadius: "4px" }}>
|
||||
<ShowBound bound={allData.bound} />
|
||||
</MapLayer>
|
||||
</Box>
|
||||
<Stack spacing={1}>
|
||||
<Divider>
|
||||
<Chip color="primary" variant="outlined" label="مسیر ماموریت" />
|
||||
</Divider>
|
||||
<Box sx={{ width: "100%", height: "400px" }}>
|
||||
<MapLayer style={{ borderRadius: "4px" }}>
|
||||
<ShowRoute area={allData.area} />
|
||||
</MapLayer>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack spacing={1}>
|
||||
<Divider>
|
||||
<Chip color="primary" variant="outlined" label="مشخصات ماموریت" />
|
||||
|
||||
@@ -19,8 +19,6 @@ const Create = ({ mutate }) => {
|
||||
|
||||
const submitForm = async (result) => {
|
||||
setSubmitting(true);
|
||||
const bound = result.bound.getLatLngs();
|
||||
let area = bound.map((latlng) => [latlng.lng, latlng.lat]);
|
||||
|
||||
await requestServer(REQUEST_MISSION, "post", {
|
||||
data: {
|
||||
@@ -31,10 +29,7 @@ const Create = ({ mutate }) => {
|
||||
road_observed_id: result.road_observed_id,
|
||||
}
|
||||
: {}),
|
||||
area: {
|
||||
type: result.bound_type,
|
||||
coordinates: area,
|
||||
},
|
||||
encoded_route: result.area,
|
||||
...(result.rahdaran.length != 0 ? { rahdaran: result.rahdaran.map((r) => r.id) } : {}),
|
||||
requested_machines: result.requested_machines,
|
||||
type: result.type,
|
||||
@@ -101,8 +96,8 @@ const Create = ({ mutate }) => {
|
||||
road_observed_id: "",
|
||||
rahdaran: [],
|
||||
requested_machines: [],
|
||||
bound: null,
|
||||
bound_type: "polyline",
|
||||
area: null,
|
||||
locations: [],
|
||||
type: "",
|
||||
start_date: "",
|
||||
start_time: null,
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
"use client";
|
||||
import DescriptionDialog from "@/components/dashboard/roadMissions/operator/RowActions/DescriptionDialog";
|
||||
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
|
||||
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
|
||||
import { missionCategoryTypes } from "@/core/utils/missionCategoryTypes";
|
||||
import { missionRegions } from "@/core/utils/missionRegions";
|
||||
import { missionTypes } from "@/core/utils/missionTypes";
|
||||
import { GET_ROAD_MISSIONS_OPERATOR_LIST } from "@/core/utils/routes";
|
||||
import useCities from "@/lib/hooks/useCities";
|
||||
import useProvinces from "@/lib/hooks/useProvince";
|
||||
import { Box, Stack } from "@mui/material";
|
||||
import moment from "jalali-moment";
|
||||
import { useMemo } from "react";
|
||||
import ShowArea from "./Actions/showArea";
|
||||
import RowActions from "./RowActions";
|
||||
import MachinesDialog from "./RowActions/Machines";
|
||||
import Toolbar from "./Toolbar";
|
||||
import RahdaranDialog from "./RowActions/Rahdaran";
|
||||
import DescriptionDialog from "@/components/dashboard/roadMissions/operator/RowActions/DescriptionDialog";
|
||||
import useProvinces from "@/lib/hooks/useProvince";
|
||||
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
|
||||
import useCities from "@/lib/hooks/useCities";
|
||||
import RouteDetail from "./RowActions/RouteDetail";
|
||||
import Toolbar from "./Toolbar";
|
||||
|
||||
const OperatorList = () => {
|
||||
const columns = useMemo(() => {
|
||||
@@ -247,7 +247,7 @@ const OperatorList = () => {
|
||||
},
|
||||
{
|
||||
header: "منطقه عملیاتی",
|
||||
id: "area",
|
||||
id: "encoded_route",
|
||||
enableColumnFilter: false,
|
||||
datatype: "numeric",
|
||||
filterMode: "equals",
|
||||
@@ -263,9 +263,9 @@ const OperatorList = () => {
|
||||
},
|
||||
},
|
||||
Cell: ({ row }) =>
|
||||
row.original.area ? (
|
||||
row.original.encoded_route ? (
|
||||
<Stack alignItems={"center"} justifyContent={"center"}>
|
||||
<ShowArea area={row.original.area} />
|
||||
<RouteDetail encoded_route={row.original.encoded_route} />
|
||||
</Stack>
|
||||
) : (
|
||||
"-"
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
import { Box, Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import MapIcon from "@mui/icons-material/Map";
|
||||
import MapLayer from "@/core/components/MapLayer";
|
||||
import ShowRoute from "../../Actions/Create/Form/Area/Routing/ShowRoute";
|
||||
|
||||
const RouteDetail = ({ encoded_route }) => {
|
||||
const [openRouteDetailDialog, setOpenRouteDetailDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="مسیر انتخابی">
|
||||
<IconButton color="primary" onClick={() => setOpenRouteDetailDialog(true)}>
|
||||
<MapIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog
|
||||
fullWidth
|
||||
open={openRouteDetailDialog}
|
||||
onClose={() => setOpenRouteDetailDialog(false)}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
|
||||
},
|
||||
}}
|
||||
dir="rtl"
|
||||
maxWidth={"sm"}
|
||||
>
|
||||
<DialogTitle sx={{ fontSize: "large" }}>مسیر انتخابی</DialogTitle>
|
||||
<Box sx={{ mx: 1, borderRadius: "5px" }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "300px",
|
||||
border: "1px solid #e1e1e1",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
>
|
||||
<MapLayer style={{ borderRadius: "4px" }}>
|
||||
<ShowRoute area={encoded_route} />
|
||||
</MapLayer>
|
||||
</Box>
|
||||
</Box>
|
||||
<DialogActions>
|
||||
<Button
|
||||
onClick={() => setOpenRouteDetailDialog(false)}
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
autoFocus
|
||||
>
|
||||
بستن
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default RouteDetail;
|
||||
@@ -14,16 +14,10 @@ import MachinesDialog from "./MachinesDialog";
|
||||
import Reject from "./Reject";
|
||||
import SelectBox from "@/core/components/SelectBox";
|
||||
import { Controller, useForm } from "react-hook-form";
|
||||
import RouteDetail from "../../RouteDetail";
|
||||
import ShowRoute from "../../RouteDetail/ShowRoute";
|
||||
|
||||
const AllocationForm = ({ row, mutate, setOpenAllocationDialog }) => {
|
||||
const latLngs = useMemo(() => {
|
||||
return row.area.coordinates.map(([lng, lat]) => [lat, lng]);
|
||||
}, [row.area.coordinates]);
|
||||
|
||||
const bound = useMemo(
|
||||
() => (row.area.type === "polygon" ? L.polygon(latLngs) : L.polyline(latLngs)),
|
||||
[row.area.type, latLngs]
|
||||
);
|
||||
const requestServer = useRequest({ notificationSuccess: true });
|
||||
const [machine, setMachine] = useState();
|
||||
const [driver, setDriver] = useState();
|
||||
@@ -180,10 +174,32 @@ const AllocationForm = ({ row, mutate, setOpenAllocationDialog }) => {
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Box sx={{ width: "100%", height: "200px" }}>
|
||||
<MapLayer style={{ borderRadius: "4px" }}>
|
||||
<ShowBound bound={bound} />
|
||||
</MapLayer>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "200px",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
{row.encoded_route ? (
|
||||
<MapLayer style={{ borderRadius: "4px" }}>
|
||||
<ShowRoute area={row.encoded_route} />
|
||||
</MapLayer>
|
||||
) : (
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#ff4a4c",
|
||||
fontSize: "16px",
|
||||
fontWeight: "bold",
|
||||
textAlign: "center",
|
||||
letterSpacing: "1px",
|
||||
}}
|
||||
>
|
||||
مختصات برای این ماموریت در دسترس نمیباشد
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { Marker, Polyline, useMap } from "react-leaflet";
|
||||
import L from "leaflet";
|
||||
import polyline from "@mapbox/polyline";
|
||||
import SourceIcon from "@/assets/images/source-icon.svg";
|
||||
import DestIcon from "@/assets/images/destination-icon.svg";
|
||||
|
||||
const ShowRoute = ({ area }) => {
|
||||
const map = useMap();
|
||||
const defaultIconSize = [35, 35];
|
||||
|
||||
const createCustomIcon = (size, iconUrl) => {
|
||||
return L.icon({
|
||||
iconUrl: iconUrl,
|
||||
iconSize: size,
|
||||
iconAnchor: [size[0] / 2, size[1]],
|
||||
popupAnchor: [0, -size[1]],
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (coords.length > 0) {
|
||||
map.flyToBounds(coords, { padding: [50, 50], duration: 1.5 });
|
||||
}
|
||||
}, [area]);
|
||||
const sourceIcon = createCustomIcon(defaultIconSize, SourceIcon.src);
|
||||
const destIcon = createCustomIcon(defaultIconSize, DestIcon.src);
|
||||
|
||||
if (!area) return null;
|
||||
const coords = polyline.decode(area, 6);
|
||||
|
||||
if (coords.length === 0) return null;
|
||||
|
||||
const sourcePosition = coords[0];
|
||||
const destPosition = coords[coords.length - 1];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Polyline positions={coords} color="#015688" weight={7} opacity={1} />
|
||||
<Marker position={sourcePosition} icon={sourceIcon} />
|
||||
<Marker position={destPosition} icon={destIcon} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShowRoute;
|
||||
@@ -0,0 +1,57 @@
|
||||
import { Box, Button, Dialog, DialogActions, DialogTitle, IconButton, Tooltip } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import MapIcon from "@mui/icons-material/Map";
|
||||
import MapLayer from "@/core/components/MapLayer";
|
||||
import ShowRoute from "./ShowRoute";
|
||||
|
||||
const RouteDetail = ({ encoded_route }) => {
|
||||
const [openRouteDetailDialog, setOpenRouteDetailDialog] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="مسیر انتخابی">
|
||||
<IconButton color="primary" onClick={() => setOpenRouteDetailDialog(true)}>
|
||||
<MapIcon />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog
|
||||
fullWidth
|
||||
open={openRouteDetailDialog}
|
||||
onClose={() => setOpenRouteDetailDialog(false)}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px",
|
||||
},
|
||||
}}
|
||||
dir="rtl"
|
||||
maxWidth={"sm"}
|
||||
>
|
||||
<DialogTitle sx={{ fontSize: "large" }}>مسیر انتخابی</DialogTitle>
|
||||
<Box sx={{ mx: 1, borderRadius: "5px" }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: "100%",
|
||||
height: "300px",
|
||||
border: "1px solid #e1e1e1",
|
||||
borderRadius: "5px",
|
||||
}}
|
||||
>
|
||||
<MapLayer style={{ borderRadius: "4px" }}>
|
||||
<ShowRoute area={encoded_route} />
|
||||
</MapLayer>
|
||||
</Box>
|
||||
</Box>
|
||||
<DialogActions>
|
||||
<Button
|
||||
onClick={() => setOpenRouteDetailDialog(false)}
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
autoFocus
|
||||
>
|
||||
بستن
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default RouteDetail;
|
||||
@@ -4,13 +4,13 @@ import { GET_ROAD_MISSIONS_TRANSPORTATION_LIST } from "@/core/utils/routes";
|
||||
import { Box, Stack } from "@mui/material";
|
||||
import moment from "jalali-moment";
|
||||
import { useMemo } from "react";
|
||||
import ShowArea from "./Actions/showArea";
|
||||
import RowActions from "./RowActions";
|
||||
import { missionRegions } from "@/core/utils/missionRegions";
|
||||
import { missionTypes } from "@/core/utils/missionTypes";
|
||||
import useProvinces from "@/lib/hooks/useProvince";
|
||||
import CustomSelectByDependency from "@/core/components/DataTable/filter/fieldsType/CustomSelectByDependency";
|
||||
import useCities from "@/lib/hooks/useCities";
|
||||
import RouteDetail from "./RowActions/RouteDetail";
|
||||
|
||||
const TransportationList = () => {
|
||||
const columns = useMemo(() => {
|
||||
@@ -230,9 +230,9 @@ const TransportationList = () => {
|
||||
},
|
||||
},
|
||||
Cell: ({ row }) =>
|
||||
row.original.area ? (
|
||||
row.original.encoded_route ? (
|
||||
<Stack alignItems={"center"} justifyContent={"center"}>
|
||||
<ShowArea area={row.original.area} />
|
||||
<RouteDetail encoded_route={row.original.encoded_route} />
|
||||
</Stack>
|
||||
) : (
|
||||
"-"
|
||||
|
||||
@@ -1,129 +0,0 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import L from "leaflet";
|
||||
import { FeatureGroup, useMap } from "react-leaflet";
|
||||
import "leaflet-draw";
|
||||
|
||||
const DrawBound = ({ control, controlDispach, bound, setBound }) => {
|
||||
const map = useMap();
|
||||
const featureRef = useRef(null);
|
||||
const [area, setArea] = useState();
|
||||
const drawControlRef = useRef(null);
|
||||
|
||||
const safeFlyToBounds = (layer) => {
|
||||
if (!layer || !map) return;
|
||||
try {
|
||||
const latLngs = layer.getLatLngs();
|
||||
map.flyToBounds(latLngs, {
|
||||
paddingTopLeft: [20, 35],
|
||||
paddingBottomRight: [20, 55],
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn("flyToBounds failed:", e);
|
||||
}
|
||||
};
|
||||
|
||||
const safeFitBounds = (layer) => {
|
||||
if (!layer || !map) return;
|
||||
try {
|
||||
const latLngs = layer.getLatLngs();
|
||||
map.fitBounds(latLngs, {
|
||||
paddingTopLeft: [20, 35],
|
||||
paddingBottomRight: [20, 55],
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn("fitBounds failed:", e);
|
||||
}
|
||||
};
|
||||
|
||||
const bindEditEvent = (layer) => {
|
||||
if (!layer) return;
|
||||
layer.on("edit", function (e) {
|
||||
const editedLayer = e.target;
|
||||
setArea(editedLayer);
|
||||
setBound(editedLayer);
|
||||
safeFlyToBounds(editedLayer);
|
||||
});
|
||||
};
|
||||
|
||||
const handlerCreatedBound = useCallback((event) => {
|
||||
const { layer } = event;
|
||||
layer.editing.enable();
|
||||
featureRef.current.addLayer(layer); // 🟢 اول اضافه به نقشه
|
||||
setArea(layer);
|
||||
setBound(layer);
|
||||
safeFlyToBounds(layer);
|
||||
bindEditEvent(layer);
|
||||
controlDispach({ type: "SET_STATUS", status: 2 });
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
control.status === 1 &&
|
||||
drawControlRef.current &&
|
||||
drawControlRef.current._toolbars?.draw?._modes?.polygon?.handler
|
||||
) {
|
||||
drawControlRef.current._toolbars.draw._modes.polygon.handler.enable();
|
||||
}
|
||||
}, [control.status]);
|
||||
|
||||
useEffect(() => {
|
||||
if (control.status === 0 && area && featureRef.current) {
|
||||
featureRef.current.removeLayer(area);
|
||||
setArea(null);
|
||||
setBound(null);
|
||||
}
|
||||
}, [control.status, area]);
|
||||
|
||||
useEffect(() => {
|
||||
if (control.status === 2 && bound && featureRef.current) {
|
||||
setArea(bound);
|
||||
featureRef.current.addLayer(bound);
|
||||
bound.editing.enable();
|
||||
safeFitBounds(bound);
|
||||
bindEditEvent(bound);
|
||||
}
|
||||
}, [control.status, bound]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!featureRef.current) return;
|
||||
|
||||
L.drawLocal.draw.handlers.polygon.tooltip.start = "برای شروع ترسیم محدوده، روی نقشه کلیک کنید";
|
||||
L.drawLocal.draw.handlers.polygon.tooltip.cont = "برای ادامه ترسیم، نقاط بعدی را کلیک کنید";
|
||||
L.drawLocal.draw.handlers.polygon.tooltip.end = "برای بستن محدوده، روی نقطهی شروع کلیک کنید";
|
||||
|
||||
const drawControl = new L.Control.Draw({
|
||||
draw: {
|
||||
polygon: {
|
||||
shapeOptions: {
|
||||
color: "#3388ff",
|
||||
weight: 3,
|
||||
clickable: true,
|
||||
},
|
||||
},
|
||||
polyline: false,
|
||||
rectangle: false,
|
||||
circle: false,
|
||||
marker: false,
|
||||
circlemarker: false,
|
||||
},
|
||||
edit: {
|
||||
featureGroup: featureRef.current,
|
||||
edit: true,
|
||||
remove: false,
|
||||
},
|
||||
});
|
||||
|
||||
drawControlRef.current = drawControl;
|
||||
map.addControl(drawControl);
|
||||
map.on(L.Draw.Event.CREATED, handlerCreatedBound);
|
||||
|
||||
return () => {
|
||||
map.off(L.Draw.Event.CREATED, handlerCreatedBound);
|
||||
map.removeControl(drawControl);
|
||||
};
|
||||
}, [map, handlerCreatedBound]);
|
||||
|
||||
return <FeatureGroup ref={featureRef} />;
|
||||
};
|
||||
|
||||
export default DrawBound;
|
||||
@@ -1,116 +0,0 @@
|
||||
import { Delete, Route } from "@mui/icons-material";
|
||||
import { Box, Button, Stack, Typography } from "@mui/material";
|
||||
import { useReducer } from "react";
|
||||
import DrawBound from "./DrawBound";
|
||||
|
||||
const statusType = [
|
||||
{
|
||||
id: 0,
|
||||
message: "برای آغاز ترسیم محدوده، کلیک کنید!",
|
||||
buttons: [
|
||||
{
|
||||
label: "شروع ترسیم محدوده",
|
||||
key: "start",
|
||||
color: "primary",
|
||||
icon: <Route />,
|
||||
onclick: (controlDispach) => {
|
||||
controlDispach({ type: "SET_STATUS", status: 1 });
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
message: "محدودهی موردنظر را با کلیک روی نقشه مشخص کنید. برای اتمام، روی نقطهی ابتدایی کلیک کنید!",
|
||||
buttons: [],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
message: "برای اصلاح محدوده، گوشهها را بکشید. برای ترسیم دوباره، آن را حذف کنید",
|
||||
buttons: [
|
||||
{
|
||||
label: "حذف",
|
||||
key: "end",
|
||||
color: "error",
|
||||
icon: <Delete />,
|
||||
onclick: (controlDispach) => {
|
||||
controlDispach({ type: "SET_STATUS", status: 0 });
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const createInitialState = (bound) => {
|
||||
if (bound) {
|
||||
return { status: 2 };
|
||||
}
|
||||
return { status: 0 };
|
||||
};
|
||||
|
||||
const reducer = (state, action) => {
|
||||
switch (action.type) {
|
||||
case "SET_STATUS":
|
||||
return { ...state, status: action.status };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
const MapControlPolygon = ({ bound, setBound }) => {
|
||||
const [control, controlDispach] = useReducer(reducer, bound, createInitialState);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DrawBound bound={bound} setBound={setBound} control={control} controlDispach={controlDispach} />
|
||||
<Stack
|
||||
direction={"row"}
|
||||
justifyContent={"center"}
|
||||
sx={{ position: "absolute", left: 0, top: 0, zIndex: 2000, width: "100%" }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
background: (theme) => theme.palette.info.main,
|
||||
borderBottomLeftRadius: 8,
|
||||
borderBottomRightRadius: 8,
|
||||
py: 0.5,
|
||||
px: 2,
|
||||
}}
|
||||
>
|
||||
<Typography align="center" component={"div"} variant="caption" color={"#fff"}>
|
||||
{statusType.find((st) => st.id == control.status).message}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
zIndex: 2000,
|
||||
width: "100%",
|
||||
py: 1,
|
||||
background: "linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0))",
|
||||
}}
|
||||
>
|
||||
<Stack direction={"row"} justifyContent={"center"} spacing={2}>
|
||||
{statusType
|
||||
.find((st) => st.id == control.status)
|
||||
.buttons.map((button) => (
|
||||
<Button
|
||||
size="small"
|
||||
key={button.key}
|
||||
variant="contained"
|
||||
onClick={() => button.onclick(controlDispach)}
|
||||
color={button.color}
|
||||
startIcon={button.icon}
|
||||
>
|
||||
{button.label}
|
||||
</Button>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default MapControlPolygon;
|
||||
@@ -1,129 +0,0 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import L from "leaflet";
|
||||
import { FeatureGroup, useMap } from "react-leaflet";
|
||||
import "leaflet-draw";
|
||||
|
||||
const DrawBound = ({ control, controlDispach, bound, setBound }) => {
|
||||
const map = useMap();
|
||||
const featureRef = useRef(null);
|
||||
const [area, setArea] = useState();
|
||||
const drawControlRef = useRef(null);
|
||||
|
||||
const safeFlyToBounds = (layer) => {
|
||||
if (!layer || !map) return;
|
||||
try {
|
||||
const latLngs = layer.getLatLngs();
|
||||
map.flyToBounds(latLngs, {
|
||||
paddingTopLeft: [20, 35],
|
||||
paddingBottomRight: [20, 55],
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn("flyToBounds failed:", e);
|
||||
}
|
||||
};
|
||||
|
||||
const safeFitBounds = (layer) => {
|
||||
if (!layer || !map) return;
|
||||
try {
|
||||
const latLngs = layer.getLatLngs();
|
||||
map.fitBounds(latLngs, {
|
||||
paddingTopLeft: [20, 35],
|
||||
paddingBottomRight: [20, 55],
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn("fitBounds failed:", e);
|
||||
}
|
||||
};
|
||||
|
||||
const bindEditEvent = (layer) => {
|
||||
if (!layer) return;
|
||||
layer.on("edit", function (e) {
|
||||
const editedLayer = e.target;
|
||||
setArea(editedLayer);
|
||||
setBound(editedLayer);
|
||||
safeFlyToBounds(editedLayer);
|
||||
});
|
||||
};
|
||||
|
||||
const handlerCreatedBound = useCallback((event) => {
|
||||
const { layer } = event;
|
||||
layer.editing.enable();
|
||||
featureRef.current.addLayer(layer); // 🟢 اول اضافه به نقشه
|
||||
setArea(layer);
|
||||
setBound(layer);
|
||||
safeFlyToBounds(layer);
|
||||
bindEditEvent(layer);
|
||||
controlDispach({ type: "SET_STATUS", status: 2 });
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
control.status === 1 &&
|
||||
drawControlRef.current &&
|
||||
drawControlRef.current._toolbars?.draw?._modes?.polyline?.handler
|
||||
) {
|
||||
drawControlRef.current._toolbars.draw._modes.polyline.handler.enable();
|
||||
}
|
||||
}, [control.status]);
|
||||
|
||||
useEffect(() => {
|
||||
if (control.status === 0 && area && featureRef.current) {
|
||||
featureRef.current.removeLayer(area);
|
||||
setArea(null);
|
||||
setBound(null);
|
||||
}
|
||||
}, [control.status, area]);
|
||||
|
||||
useEffect(() => {
|
||||
if (control.status === 2 && bound && featureRef.current) {
|
||||
setArea(bound);
|
||||
featureRef.current.addLayer(bound);
|
||||
bound.editing.enable();
|
||||
safeFitBounds(bound);
|
||||
bindEditEvent(bound);
|
||||
}
|
||||
}, [control.status, bound]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!featureRef.current) return;
|
||||
|
||||
L.drawLocal.draw.handlers.polyline.tooltip.start = "برای شروع ترسیم مسیر، روی نقشه کلیک کنید";
|
||||
L.drawLocal.draw.handlers.polyline.tooltip.cont = "برای ادامه ترسیم، نقاط بعدی را کلیک کنید";
|
||||
L.drawLocal.draw.handlers.polyline.tooltip.end = "برای بستن مسیر، روی نقطه پایانی کلیک کنید";
|
||||
|
||||
const drawControl = new L.Control.Draw({
|
||||
draw: {
|
||||
polyline: {
|
||||
shapeOptions: {
|
||||
color: "#3388ff",
|
||||
weight: 3,
|
||||
clickable: true,
|
||||
},
|
||||
},
|
||||
polygon: false,
|
||||
rectangle: false,
|
||||
circle: false,
|
||||
marker: false,
|
||||
circlemarker: false,
|
||||
},
|
||||
edit: {
|
||||
featureGroup: featureRef.current,
|
||||
edit: true,
|
||||
remove: false,
|
||||
},
|
||||
});
|
||||
|
||||
drawControlRef.current = drawControl;
|
||||
map.addControl(drawControl);
|
||||
map.on(L.Draw.Event.CREATED, handlerCreatedBound);
|
||||
|
||||
return () => {
|
||||
map.off(L.Draw.Event.CREATED, handlerCreatedBound);
|
||||
map.removeControl(drawControl);
|
||||
};
|
||||
}, [map, handlerCreatedBound]);
|
||||
|
||||
return <FeatureGroup ref={featureRef} />;
|
||||
};
|
||||
|
||||
export default DrawBound;
|
||||
@@ -1,116 +0,0 @@
|
||||
import { Delete, Route } from "@mui/icons-material";
|
||||
import { Box, Button, Stack, Typography } from "@mui/material";
|
||||
import { useReducer } from "react";
|
||||
import DrawBound from "./DrawBound";
|
||||
|
||||
const statusType = [
|
||||
{
|
||||
id: 0,
|
||||
message: "برای آغاز ترسیم مسیر، کلیک کنید!",
|
||||
buttons: [
|
||||
{
|
||||
label: "شروع ترسیم مسیر",
|
||||
key: "start",
|
||||
color: "primary",
|
||||
icon: <Route />,
|
||||
onclick: (controlDispach) => {
|
||||
controlDispach({ type: "SET_STATUS", status: 1 });
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
message: "مسیر موردنظر را با کلیک روی نقشه مشخص کنید. برای اتمام، روی نقطهی پایانی کلیک کنید!",
|
||||
buttons: [],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
message: "برای اصلاح مسیر، گوشهها را بکشید. برای ترسیم دوباره، آن را حذف کنید",
|
||||
buttons: [
|
||||
{
|
||||
label: "حذف",
|
||||
key: "end",
|
||||
color: "error",
|
||||
icon: <Delete />,
|
||||
onclick: (controlDispach) => {
|
||||
controlDispach({ type: "SET_STATUS", status: 0 });
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const createInitialState = (bound) => {
|
||||
if (bound) {
|
||||
return { status: 2 };
|
||||
}
|
||||
return { status: 0 };
|
||||
};
|
||||
|
||||
const reducer = (state, action) => {
|
||||
switch (action.type) {
|
||||
case "SET_STATUS":
|
||||
return { ...state, status: action.status };
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
||||
const MapControlPolyline = ({ bound, setBound }) => {
|
||||
const [control, controlDispach] = useReducer(reducer, bound, createInitialState);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DrawBound bound={bound} setBound={setBound} control={control} controlDispach={controlDispach} />
|
||||
<Stack
|
||||
direction={"row"}
|
||||
justifyContent={"center"}
|
||||
sx={{ position: "absolute", left: 0, top: 0, zIndex: 2000, width: "100%" }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
background: (theme) => theme.palette.info.main,
|
||||
borderBottomLeftRadius: 8,
|
||||
borderBottomRightRadius: 8,
|
||||
py: 0.5,
|
||||
px: 2,
|
||||
}}
|
||||
>
|
||||
<Typography align="center" component={"div"} variant="caption" color={"#fff"}>
|
||||
{statusType.find((st) => st.id == control.status).message}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
zIndex: 2000,
|
||||
width: "100%",
|
||||
py: 1,
|
||||
background: "linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0))",
|
||||
}}
|
||||
>
|
||||
<Stack direction={"row"} justifyContent={"center"} spacing={2}>
|
||||
{statusType
|
||||
.find((st) => st.id == control.status)
|
||||
.buttons.map((button) => (
|
||||
<Button
|
||||
size="small"
|
||||
key={button.key}
|
||||
variant="contained"
|
||||
onClick={() => button.onclick(controlDispach)}
|
||||
color={button.color}
|
||||
startIcon={button.icon}
|
||||
>
|
||||
{button.label}
|
||||
</Button>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default MapControlPolyline;
|
||||
@@ -0,0 +1,28 @@
|
||||
import { Box, Typography } from "@mui/material";
|
||||
|
||||
const AlarmText = ({ isSource }) => {
|
||||
if (isSource) return null;
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: 5,
|
||||
left: 5,
|
||||
zIndex: 1000,
|
||||
border: "1px solid #ed0f02",
|
||||
backgroundColor: "#f19898",
|
||||
py: 0.5,
|
||||
px: 1,
|
||||
borderRadius: 2,
|
||||
opacity: 0.8,
|
||||
boxShadow: "rgba(0, 0, 0, 0.35) 0px 5px 15px",
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" sx={{ fontWeight: "bold" }} color="#ed0f02">
|
||||
با کلیک بر روی مارکر موقعیت را انتخاب کنید
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlarmText;
|
||||
@@ -0,0 +1,53 @@
|
||||
import { Box, Button, TextField } from "@mui/material";
|
||||
|
||||
const DataBox = ({ isSource, isDest, sourcePosition, destPosition, editingTarget, onEditSource, onEditDest }) => {
|
||||
if (!isSource) return null;
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: "absolute",
|
||||
bottom: 5,
|
||||
left: 5,
|
||||
zIndex: 1000,
|
||||
backgroundColor: "white",
|
||||
border: "1px solid #e1e1e1",
|
||||
padding: 1,
|
||||
borderRadius: 2,
|
||||
opacity: 0.8,
|
||||
gap: 1,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
|
||||
<TextField
|
||||
variant="outlined"
|
||||
size="small"
|
||||
readOnly
|
||||
value={sourcePosition ? `${sourcePosition.lat.toFixed(6)}, ${sourcePosition.lng.toFixed(6)}` : ""}
|
||||
/>
|
||||
{isSource && isDest && (
|
||||
<Button variant="contained" color="success" size="small" onClick={onEditSource}>
|
||||
ویرایش مبدا
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{isDest && (
|
||||
<div style={{ display: "flex", alignItems: "end", gap: 4 }}>
|
||||
<TextField
|
||||
size="small"
|
||||
variant="outlined"
|
||||
readOnly
|
||||
value={destPosition ? `${destPosition.lat.toFixed(6)}, ${destPosition.lng.toFixed(6)}` : ""}
|
||||
/>
|
||||
<Button variant="contained" color="error" size="small" onClick={onEditDest}>
|
||||
ویرایش مقصد
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default DataBox;
|
||||
@@ -0,0 +1,46 @@
|
||||
import { useEffect, useRef } from "react";
|
||||
import { Marker, Polyline, useMap } from "react-leaflet";
|
||||
import L from "leaflet";
|
||||
import polyline from "@mapbox/polyline";
|
||||
import SourceIcon from "@/assets/images/source-icon.svg";
|
||||
import DestIcon from "@/assets/images/destination-icon.svg";
|
||||
|
||||
const ShowRoute = ({ area }) => {
|
||||
const map = useMap();
|
||||
const defaultIconSize = [35, 35];
|
||||
|
||||
const createCustomIcon = (size, iconUrl) => {
|
||||
return L.icon({
|
||||
iconUrl: iconUrl,
|
||||
iconSize: size,
|
||||
iconAnchor: [size[0] / 2, size[1]],
|
||||
popupAnchor: [0, -size[1]],
|
||||
});
|
||||
};
|
||||
|
||||
const sourceIcon = createCustomIcon(defaultIconSize, SourceIcon.src);
|
||||
const destIcon = createCustomIcon(defaultIconSize, DestIcon.src);
|
||||
useEffect(() => {
|
||||
if (coords.length > 0) {
|
||||
map.flyToBounds(coords, { padding: [50, 50], duration: 1.5 });
|
||||
}
|
||||
}, [area]);
|
||||
|
||||
if (!area) return null;
|
||||
const coords = polyline.decode(area, 6);
|
||||
|
||||
if (coords.length === 0) return null;
|
||||
|
||||
const sourcePosition = coords[0];
|
||||
const destPosition = coords[coords.length - 1];
|
||||
|
||||
return (
|
||||
<>
|
||||
<Polyline positions={coords} color="#015688" weight={7} opacity={1} />
|
||||
<Marker position={sourcePosition} icon={sourceIcon} />
|
||||
<Marker position={destPosition} icon={destIcon} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ShowRoute;
|
||||
@@ -0,0 +1,219 @@
|
||||
import { Marker, Polyline, useMapEvents } from "react-leaflet";
|
||||
import L from "leaflet";
|
||||
import polyline from "@mapbox/polyline";
|
||||
import SourceIcon from "@/assets/images/source-icon.svg";
|
||||
import PrevSourceIcon from "@/assets/images/prev-source-icon.svg";
|
||||
import PrevDestIcon from "@/assets/images/prev-destination-icon.svg";
|
||||
import DestIcon from "@/assets/images/destination-icon.svg";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import DataBox from "./DataBox";
|
||||
import AlarmText from "./AlarmText";
|
||||
|
||||
const Routing = ({ setArea, setLocations, locations, area }) => {
|
||||
const mapPrevSourceMarker = useRef();
|
||||
const mapPrevDestMarker = useRef();
|
||||
const mapRef = useRef(null);
|
||||
const defaultIconSize = [35, 35];
|
||||
const [isSource, setIsSource] = useState(false);
|
||||
const [sourcePosition, setSourcePosition] = useState(null);
|
||||
const [isDest, setIsDest] = useState(false);
|
||||
const [destPosition, setDestPosition] = useState(null);
|
||||
const [routeCoords, setRouteCoords] = useState([]);
|
||||
const [alternateCoords, setAlternateCoords] = useState([]);
|
||||
const [editingTarget, setEditingTarget] = useState(null);
|
||||
const [selectedRoute, setSelectedRoute] = useState(null);
|
||||
|
||||
const createCustomIcon = (size, iconUrl) => {
|
||||
return L.icon({
|
||||
iconUrl: iconUrl,
|
||||
iconSize: size,
|
||||
iconAnchor: [size[0] / 2, size[1]],
|
||||
popupAnchor: [0, -size[1]],
|
||||
});
|
||||
};
|
||||
|
||||
const defaultIcon = createCustomIcon(
|
||||
defaultIconSize,
|
||||
isSource && editingTarget !== "source" ? SourceIcon.src : PrevSourceIcon.src
|
||||
);
|
||||
|
||||
const prevDestIcon = createCustomIcon(
|
||||
defaultIconSize,
|
||||
isDest && editingTarget !== "dest" ? DestIcon.src : PrevDestIcon.src
|
||||
);
|
||||
|
||||
const isMovingSource = !isSource || editingTarget === "source";
|
||||
const isMovingDest = isSource && (!isDest || editingTarget === "dest");
|
||||
|
||||
const map = useMapEvents({
|
||||
move(e) {
|
||||
if (isMovingSource) mapPrevSourceMarker.current.setLatLng(e.target.getCenter());
|
||||
if (isMovingDest && mapPrevDestMarker.current) mapPrevDestMarker.current.setLatLng(e.target.getCenter());
|
||||
},
|
||||
movestart() {
|
||||
if (isMovingSource) mapPrevSourceMarker.current.setIcon(createCustomIcon([45, 45], PrevSourceIcon.src));
|
||||
if (isMovingDest && mapPrevDestMarker.current)
|
||||
mapPrevDestMarker.current.setIcon(createCustomIcon([45, 45], PrevDestIcon.src));
|
||||
},
|
||||
moveend() {
|
||||
if (isMovingSource)
|
||||
mapPrevSourceMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevSourceIcon.src));
|
||||
if (isMovingDest && mapPrevDestMarker.current)
|
||||
mapPrevDestMarker.current.setIcon(createCustomIcon(defaultIconSize, PrevDestIcon.src));
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
mapRef.current = map;
|
||||
}, [map]);
|
||||
|
||||
useEffect(() => {
|
||||
if (locations.length < 2) return;
|
||||
const restoredSource = { lat: locations[0].lat, lng: locations[0].lon };
|
||||
const restoredDest = { lat: locations[1].lat, lng: locations[1].lon };
|
||||
setSourcePosition(restoredSource);
|
||||
setDestPosition(restoredDest);
|
||||
setIsSource(true);
|
||||
setIsDest(true);
|
||||
if (area) {
|
||||
const decoded = polyline.decode(area, 6);
|
||||
setRouteCoords(decoded);
|
||||
setSelectedRoute({ index: "main", coords: decoded });
|
||||
setTimeout(() => {
|
||||
mapRef.current?.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
|
||||
}, 100);
|
||||
} else {
|
||||
fetchRoute(restoredSource, restoredDest);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchRoute = async (source, dest) => {
|
||||
const locs = [
|
||||
{ lat: source.lat, lon: source.lng },
|
||||
{ lat: dest.lat, lon: dest.lng },
|
||||
];
|
||||
try {
|
||||
const response = await fetch("https://jouya.141.ir/api/router/drive", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ locations: locs }),
|
||||
});
|
||||
const data = await response.json();
|
||||
const shape = data.trip.legs[0].shape;
|
||||
setLocations(locs);
|
||||
setArea(shape);
|
||||
const decoded = polyline.decode(shape, 6);
|
||||
setRouteCoords(decoded);
|
||||
setSelectedRoute({ index: "main", coords: decoded });
|
||||
|
||||
if (data.alternates?.length > 0) {
|
||||
const decodedAlternates = data.alternates.map((alt) => polyline.decode(alt.trip.legs[0].shape, 6));
|
||||
setAlternateCoords(decodedAlternates);
|
||||
} else {
|
||||
setAlternateCoords([]);
|
||||
}
|
||||
map.flyToBounds(decoded, { padding: [50, 50], duration: 1.5 });
|
||||
} catch (error) {
|
||||
console.error("Routing error:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleMarkerClick = async () => {
|
||||
if (!isSource || editingTarget === "source") {
|
||||
const clickedPosition = mapPrevSourceMarker.current.getLatLng();
|
||||
setSourcePosition(clickedPosition);
|
||||
setIsSource(true);
|
||||
setEditingTarget(null);
|
||||
setRouteCoords([]);
|
||||
setAlternateCoords([]);
|
||||
setSelectedRoute(null);
|
||||
|
||||
if (editingTarget === "source" && destPosition) {
|
||||
await fetchRoute(clickedPosition, destPosition);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleDestMarkerClick = async () => {
|
||||
if (!isDest || editingTarget === "dest") {
|
||||
const clickedPosition = mapPrevDestMarker.current.getLatLng();
|
||||
setDestPosition(clickedPosition);
|
||||
setIsDest(true);
|
||||
setEditingTarget(null);
|
||||
|
||||
await fetchRoute(sourcePosition, clickedPosition);
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditSource = () => {
|
||||
setEditingTarget("source");
|
||||
setRouteCoords([]);
|
||||
setAlternateCoords([]);
|
||||
setSelectedRoute(null);
|
||||
};
|
||||
|
||||
const handleEditDest = () => {
|
||||
setEditingTarget("dest");
|
||||
setRouteCoords([]);
|
||||
setAlternateCoords([]);
|
||||
setSelectedRoute(null);
|
||||
};
|
||||
|
||||
const handleSelectRoute = (index, coords) => {
|
||||
setSelectedRoute({ index, coords });
|
||||
const encoded = polyline.encode(coords, 6);
|
||||
setArea(encoded);
|
||||
map.flyToBounds(coords, { padding: [50, 50], duration: 0.3 });
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<DataBox
|
||||
isSource={isSource}
|
||||
isDest={isDest}
|
||||
sourcePosition={sourcePosition}
|
||||
destPosition={destPosition}
|
||||
editingTarget={editingTarget}
|
||||
onEditSource={handleEditSource}
|
||||
onEditDest={handleEditDest}
|
||||
/>
|
||||
<AlarmText isSource={isSource} />
|
||||
<Marker
|
||||
position={sourcePosition || map.getCenter()}
|
||||
ref={mapPrevSourceMarker}
|
||||
eventHandlers={{ click: handleMarkerClick }}
|
||||
icon={defaultIcon}
|
||||
/>
|
||||
{isSource && (
|
||||
<Marker
|
||||
position={destPosition || map.getCenter()}
|
||||
ref={mapPrevDestMarker}
|
||||
eventHandlers={{ click: handleDestMarkerClick }}
|
||||
icon={prevDestIcon}
|
||||
/>
|
||||
)}
|
||||
{alternateCoords.map((coords, index) => (
|
||||
<Polyline
|
||||
key={`alternate-${index}-${selectedRoute?.index === index}`}
|
||||
positions={coords}
|
||||
color={selectedRoute?.index === index ? "#015688" : "#91B2C6"}
|
||||
weight={selectedRoute?.index === index ? 7 : 6}
|
||||
opacity={selectedRoute?.index === index ? 1 : 0.7}
|
||||
eventHandlers={{ click: () => handleSelectRoute(index, coords) }}
|
||||
/>
|
||||
))}
|
||||
{routeCoords.length > 0 && (
|
||||
<Polyline
|
||||
key={`main-${selectedRoute?.index === "main"}`}
|
||||
positions={routeCoords}
|
||||
color={selectedRoute?.index === "main" ? "#015688" : "#91B2C6"}
|
||||
weight={selectedRoute?.index === "main" ? 7 : 6}
|
||||
opacity={selectedRoute?.index === "main" ? 1 : 0.7}
|
||||
eventHandlers={{ click: () => handleSelectRoute("main", routeCoords) }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Routing;
|
||||
@@ -1,25 +0,0 @@
|
||||
import SelectBox from "@/core/components/SelectBox";
|
||||
|
||||
export const boundTypes = [
|
||||
{ id: "polygon", name_fa: "محدوده" },
|
||||
{ id: "polyline", name_fa: "مسیر" },
|
||||
];
|
||||
|
||||
const SelectBoundType = ({ boundType, setBoundType, setBound, setAllData }) => {
|
||||
return (
|
||||
<>
|
||||
<SelectBox
|
||||
value={boundType}
|
||||
label="نوع منطقه عملیاتی"
|
||||
selectors={boundTypes}
|
||||
schema={{ name: "name_fa", value: "id" }}
|
||||
onChange={(newValue) => {
|
||||
setBound(null);
|
||||
setBoundType(newValue);
|
||||
setAllData({ bound_type: newValue });
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default SelectBoundType;
|
||||
@@ -2,40 +2,29 @@ import MapLoading from "@/core/components/MapLayer/Loading";
|
||||
import { Box, Button, DialogActions, DialogContent, Stack } from "@mui/material";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useCallback, useState } from "react";
|
||||
import MapControlPolygon from "./MapControlPolygon";
|
||||
import MapControlPolyline from "./MapControlPolyline";
|
||||
import SelectBoundType from "./SelectBoundType";
|
||||
import Routing from "./Routing";
|
||||
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
|
||||
loading: () => <MapLoading />,
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
|
||||
const [bound, setBound] = useState(allData.bound);
|
||||
const [boundType, setBoundType] = useState(allData.bound_type);
|
||||
const [area, setArea] = useState(allData.area);
|
||||
const [locations, setLocations] = useState(allData.locations);
|
||||
|
||||
const handleNext = useCallback(() => {
|
||||
setAllData({ bound: bound });
|
||||
setAllData({ area: area });
|
||||
setAllData({ locations: locations });
|
||||
setTabState((s) => s + 1);
|
||||
}, [bound]);
|
||||
}, [area]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<DialogContent dividers>
|
||||
<Stack spacing={2}>
|
||||
<SelectBoundType
|
||||
boundType={boundType}
|
||||
setBoundType={setBoundType}
|
||||
setBound={setBound}
|
||||
setAllData={setAllData}
|
||||
/>
|
||||
<Box sx={{ width: "100%", height: "400px" }}>
|
||||
<MapLayer style={{ borderRadius: "4px" }}>
|
||||
{boundType == "polygon" ? (
|
||||
<MapControlPolygon bound={bound} setBound={setBound} boundType={boundType} />
|
||||
) : (
|
||||
<MapControlPolyline bound={bound} setBound={setBound} boundType={boundType} />
|
||||
)}
|
||||
<Routing area={area} setArea={setArea} locations={locations} setLocations={setLocations} />
|
||||
</MapLayer>
|
||||
</Box>
|
||||
</Stack>
|
||||
@@ -44,8 +33,8 @@ const Area = ({ allData, setAllData, handlePrev, setTabState }) => {
|
||||
<Button onClick={handlePrev} variant="outlined" color="secondary" size="large">
|
||||
{"مرحله قبلی"}
|
||||
</Button>
|
||||
<Button variant="contained" size="large" disabled={!bound} onClick={handleNext}>
|
||||
{!bound ? "در انتظار ترسیم" : "مرحله بعد"}
|
||||
<Button variant="contained" size="large" disabled={!area} onClick={handleNext}>
|
||||
{!area ? "در انتظار ترسیم" : "مرحله بعد"}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
|
||||
@@ -5,7 +5,7 @@ import { Box, Button, Chip, DialogActions, DialogContent, Divider, Stack, Typogr
|
||||
import moment from "jalali-moment";
|
||||
import dynamic from "next/dynamic";
|
||||
import { useCallback } from "react";
|
||||
import ShowBound from "../../../showBound";
|
||||
import ShowRoute from "../Area/Routing/ShowRoute";
|
||||
const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
|
||||
loading: () => <MapLoading />,
|
||||
ssr: false,
|
||||
@@ -22,6 +22,16 @@ const Verify = ({ allData, handlePrev, submitForm, submitting }) => {
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Stack spacing={2}>
|
||||
<Stack spacing={1}>
|
||||
<Stack spacing={1}>
|
||||
<Divider>
|
||||
<Chip color="primary" variant="outlined" label="مسیر ماموریت" />
|
||||
</Divider>
|
||||
<Box sx={{ width: "100%", height: "400px" }}>
|
||||
<MapLayer style={{ borderRadius: "4px" }}>
|
||||
<ShowRoute area={allData.area} />
|
||||
</MapLayer>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Divider>
|
||||
<Chip color="primary" variant="outlined" label="مشخصات ماموریت" />
|
||||
</Divider>
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
import { Engineering, InsertDriveFile, Person, Verified } from "@mui/icons-material";
|
||||
import { AccessTime, Engineering, InsertDriveFile, Person, Verified, Map } from "@mui/icons-material";
|
||||
import { Box, Tab, Tabs } from "@mui/material";
|
||||
import { useReducer, useState } from "react";
|
||||
import GetDateTime from "./GetDateTime";
|
||||
import GetItemInfo from "./GetItemInfo";
|
||||
import MachineAndDriver from "./MachineAndDriver";
|
||||
import Rahdaran from "./Rahdaran";
|
||||
import Verify from "./Verify";
|
||||
import Area from "./Area";
|
||||
|
||||
function TabPanel(props) {
|
||||
const { children, value, index } = props;
|
||||
@@ -41,6 +43,7 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
|
||||
setTabState((t) => t - 1);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tabs
|
||||
@@ -57,9 +60,11 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
|
||||
}}
|
||||
>
|
||||
<Tab icon={<InsertDriveFile />} label="مشخصات" />
|
||||
<Tab disabled={tabState < 1} icon={<Person />} label="راننده" />
|
||||
<Tab disabled={tabState < 2} icon={<Engineering />} label="همراهان" />
|
||||
<Tab disabled={tabState < 3} icon={<Verified />} label="بررسی نهایی" />
|
||||
<Tab disabled={tabState < 1} icon={<AccessTime />} label="زمانبندی" />
|
||||
<Tab disabled={tabState < 2} icon={<Person />} label="راننده" />
|
||||
<Tab disabled={tabState < 3} icon={<Map />} label="مختصات" />
|
||||
<Tab disabled={tabState < 4} icon={<Engineering />} label="همراهان" />
|
||||
<Tab disabled={tabState < 5} icon={<Verified />} label="بررسی نهایی" />
|
||||
</Tabs>
|
||||
<TabPanel value={tabState} index={0}>
|
||||
<GetItemInfo
|
||||
@@ -72,7 +77,7 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabState} index={1}>
|
||||
<MachineAndDriver
|
||||
<GetDateTime
|
||||
allData={allData}
|
||||
setAllData={(data) => {
|
||||
dispatch({ type: "changeData", data });
|
||||
@@ -82,7 +87,7 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabState} index={2}>
|
||||
<Rahdaran
|
||||
<MachineAndDriver
|
||||
allData={allData}
|
||||
setAllData={(data) => {
|
||||
dispatch({ type: "changeData", data });
|
||||
@@ -92,6 +97,26 @@ const CreateForm = ({ defaultValues, submitForm, setOpen, submitting }) => {
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabState} index={3}>
|
||||
<Area
|
||||
allData={allData}
|
||||
setAllData={(data) => {
|
||||
dispatch({ type: "changeData", data });
|
||||
}}
|
||||
handlePrev={handlePrev}
|
||||
setTabState={setTabState}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabState} index={4}>
|
||||
<Rahdaran
|
||||
allData={allData}
|
||||
setAllData={(data) => {
|
||||
dispatch({ type: "changeData", data });
|
||||
}}
|
||||
handlePrev={handlePrev}
|
||||
setTabState={setTabState}
|
||||
/>
|
||||
</TabPanel>
|
||||
<TabPanel value={tabState} index={5}>
|
||||
<Verify allData={allData} handlePrev={handlePrev} submitForm={submitForm} submitting={submitting} />
|
||||
</TabPanel>
|
||||
</>
|
||||
|
||||
@@ -26,6 +26,7 @@ const CreateWithoutProcess = ({ row, mutate }) => {
|
||||
zone: result.region,
|
||||
end_point: result.end_point,
|
||||
driver: result.driver.id,
|
||||
encoded_route: result.area,
|
||||
},
|
||||
hasSidebarUpdate: true,
|
||||
})
|
||||
@@ -47,7 +48,7 @@ const CreateWithoutProcess = ({ row, mutate }) => {
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Dialog open={open} fullWidth maxWidth="sm">
|
||||
<Dialog open={open} fullWidth maxWidth="md">
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={() => setOpen(false)}
|
||||
@@ -71,6 +72,8 @@ const CreateWithoutProcess = ({ row, mutate }) => {
|
||||
end_point: "",
|
||||
region: "",
|
||||
driver: null,
|
||||
area: null,
|
||||
locations: [],
|
||||
}}
|
||||
submitForm={submitForm}
|
||||
submitting={submitting}
|
||||
|
||||
@@ -5,7 +5,7 @@ import SearchReportList from "./Search";
|
||||
import { useEffect, useState } from "react";
|
||||
import ReportLists from "./ReportLists";
|
||||
import useRequest from "@/lib/hooks/useRequest";
|
||||
import { GET_CITY_ACTIVITY_REPORT, GET_PROVINCE_ACTIVITY_REPORT } from "@/core/utils/routes";
|
||||
import { GET_COUNTRY_ACTIVITY_REPORT, GET_PROVINCE_ACTIVITY_REPORT } from "@/core/utils/routes";
|
||||
import moment from "jalali-moment";
|
||||
import * as yup from "yup";
|
||||
import { useForm } from "react-hook-form";
|
||||
@@ -70,7 +70,7 @@ const ReportPage = () => {
|
||||
} else {
|
||||
try {
|
||||
params.set("province_id", `${data.province_id}`);
|
||||
const response = await requestServer(`${GET_CITY_ACTIVITY_REPORT}?${params}`);
|
||||
const response = await requestServer(`${GET_COUNTRY_ACTIVITY_REPORT}?${params}`);
|
||||
const result = response.data.data;
|
||||
const nationalReportForItem = result.activities.find((report) => report.edare_id === "-1");
|
||||
const nationalReport = {
|
||||
|
||||
Reference in New Issue
Block a user