implemented machines reports
This commit is contained in:
@@ -1,27 +1,27 @@
|
||||
// javascript for production
|
||||
// {
|
||||
// "compilerOptions": {
|
||||
// "paths": {
|
||||
// "@/*": ["./src/*"],
|
||||
// "^/*": ["./public/*"]
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// typescript for local development
|
||||
{
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"noUnusedLocals": true,
|
||||
"noImplicitAny": false,
|
||||
"checkJs": true,
|
||||
"allowJs": true,
|
||||
"strict": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"^/*": ["./public/*"]
|
||||
}
|
||||
},
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
}
|
||||
|
||||
// typescript for local development
|
||||
// {
|
||||
// "compilerOptions": {
|
||||
// "jsx": "react-jsx",
|
||||
// "noUnusedLocals": true,
|
||||
// "noImplicitAny": false,
|
||||
// "checkJs": true,
|
||||
// "allowJs": true,
|
||||
// "strict": true,
|
||||
// "baseUrl": ".",
|
||||
// "paths": {
|
||||
// "@/*": ["./src/*"],
|
||||
// "^/*": ["./public/*"]
|
||||
// }
|
||||
// },
|
||||
// "exclude": ["node_modules"]
|
||||
// }
|
||||
|
||||
@@ -3,6 +3,7 @@ import DataTableWithAuth from "@/core/components/DataTableWithAuth";
|
||||
import { Box } from "@mui/material";
|
||||
import { useMemo } from "react";
|
||||
import Toolbar from "./Toolbar";
|
||||
import RowActions from "./RowActions";
|
||||
|
||||
const MachinesReportsList = ({ data, specialFilter }) => {
|
||||
const columns = useMemo(() => {
|
||||
@@ -70,6 +71,8 @@ const MachinesReportsList = ({ data, specialFilter }) => {
|
||||
table_name={"roadMissionReportList"}
|
||||
enablePagination={false}
|
||||
specialFilter={specialFilter}
|
||||
enableRowActions
|
||||
RowActions={RowActions}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
import DataTableWithAuth from "@/core/components/DataTableWithAuth";
|
||||
import { GET_MACHINE_MISSIONS_DETAILS } from "@/core/utils/routes";
|
||||
import { Box } from "@mui/material";
|
||||
import { useMemo } from "react";
|
||||
|
||||
const MachineMissionsList = ({ row }) => {
|
||||
const columns = useMemo(
|
||||
() => [
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: "کد یکتا",
|
||||
id: "id",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 80,
|
||||
},
|
||||
{
|
||||
accessorKey: "province_name",
|
||||
header: "استان",
|
||||
id: "province_name",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "city_name",
|
||||
header: "شهر",
|
||||
id: "city_name",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "station_name",
|
||||
header: "راهدارخانه",
|
||||
id: "station_name",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "driver_name",
|
||||
header: "راننده",
|
||||
id: "driver_name",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "km",
|
||||
header: "کیلومتر شروع",
|
||||
id: "km",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
{
|
||||
accessorKey: "end_km",
|
||||
header: "کیلومتر پایان",
|
||||
id: "end_km",
|
||||
enableColumnFilter: true,
|
||||
datatype: "text",
|
||||
filterMode: "equals",
|
||||
columnFilterModeOptions: ["equals", "contains"],
|
||||
grow: false,
|
||||
size: 100,
|
||||
},
|
||||
],
|
||||
[]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box sx={{ mt: 3 }}>
|
||||
<DataTableWithAuth
|
||||
need_filter={true}
|
||||
columns={columns}
|
||||
sorting={[{ id: "id", desc: true }]}
|
||||
table_url={`${GET_MACHINE_MISSIONS_DETAILS}?machine_id=${row.machine_id}`}
|
||||
page_name={"roadMissionsTransportation"}
|
||||
table_name={"roadMissionsTransportationMachinesList"}
|
||||
positionActionsColumn={"first"}
|
||||
/>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default MachineMissionsList;
|
||||
@@ -0,0 +1,27 @@
|
||||
import { Box, Button, DialogActions, DialogContent } from "@mui/material";
|
||||
import { Stack } from "@mui/system";
|
||||
import MachineMissionsList from "./MachineMissionsDetailsDialog/MachineMissionsList";
|
||||
|
||||
const MachineMissionsDetailsTable = ({ row, setOpenMachineMissionsDetails }) => {
|
||||
return (
|
||||
<>
|
||||
<DialogContent dividers>
|
||||
<Box sx={{ flex: 1 }}>
|
||||
<Stack spacing={3}>
|
||||
<Stack spacing={2}>
|
||||
<MachineMissionsList row={row} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ display: "flex", justifyContent: "space-between" }}>
|
||||
<Stack direction={"row"} spacing={1}>
|
||||
<Button onClick={() => setOpenMachineMissionsDetails(false)} variant="outlined" color="primary">
|
||||
بستن
|
||||
</Button>
|
||||
</Stack>
|
||||
</DialogActions>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default MachineMissionsDetailsTable;
|
||||
@@ -0,0 +1,47 @@
|
||||
import { Close, RemoveRedEye } from "@mui/icons-material";
|
||||
import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import MachineMissionsDetailsTable from "./Form";
|
||||
|
||||
const MissionDetails = ({ row }) => {
|
||||
const [openMachineMissionsDetails, setOpenMachineMissionsDetails] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip title="ریزگزارشات" arrow placement="right">
|
||||
<IconButton
|
||||
color="primary"
|
||||
sx={{ textTransform: "unset", alignSelf: "center" }}
|
||||
onClick={() => {
|
||||
setOpenMachineMissionsDetails(true);
|
||||
}}
|
||||
>
|
||||
<RemoveRedEye />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Dialog open={openMachineMissionsDetails} fullWidth maxWidth="md">
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={() => setOpenMachineMissionsDetails(false)}
|
||||
sx={(theme) => ({
|
||||
position: "absolute",
|
||||
right: 8,
|
||||
top: 8,
|
||||
zIndex: 50,
|
||||
color: theme.palette.grey[500],
|
||||
})}
|
||||
>
|
||||
<Close />
|
||||
</IconButton>
|
||||
<DialogTitle>ریز گزارشات خودرو</DialogTitle>
|
||||
{openMachineMissionsDetails && (
|
||||
<MachineMissionsDetailsTable
|
||||
row={row.original}
|
||||
setOpenMachineMissionsDetails={setOpenMachineMissionsDetails}
|
||||
/>
|
||||
)}
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default MissionDetails;
|
||||
@@ -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;
|
||||
@@ -0,0 +1,6 @@
|
||||
import MissionDetails from "./MissionDitails";
|
||||
|
||||
const RowActions = ({ row }) => {
|
||||
return <MissionDetails row={row} />;
|
||||
};
|
||||
export default RowActions;
|
||||
@@ -291,3 +291,4 @@ export const GET_PROVINCES_LIST = api + "/api/v3/provinces/list";
|
||||
export const GET_CITIES_LIST = api + "/api/v3/cities/list";
|
||||
export const GET_STATIONS_LIST = api + "/api/v3/road_maintenance_station";
|
||||
export const UPDATE_MACHINE_STATUS_AND_LOCATION = api + "/api/v3/cmms_machines";
|
||||
export const GET_MACHINE_MISSIONS_DETAILS = api + "/api/v3/missions/report_machine/machine_details_report";
|
||||
|
||||
Reference in New Issue
Block a user