120 lines
3.3 KiB
TypeScript
120 lines
3.3 KiB
TypeScript
import { Stack, Typography, Box, Button } from "@mui/material";
|
||
import { useShow } from "@refinedev/core";
|
||
import { Show, TextFieldComponent as TextField } from "@refinedev/mui";
|
||
import { LinkedItems } from "../../components/LinkedItems";
|
||
import {
|
||
StationItem,
|
||
VehicleItem,
|
||
SightItem,
|
||
sightFields,
|
||
stationFields,
|
||
vehicleFields,
|
||
} from "./types";
|
||
import { useNavigate, useParams } from "react-router";
|
||
import { observer } from "mobx-react-lite";
|
||
|
||
export const RouteShow = observer(() => {
|
||
const { query } = useShow({});
|
||
const { data, isLoading } = query;
|
||
const record = data?.data;
|
||
const { id } = useParams();
|
||
const navigate = useNavigate();
|
||
|
||
const fields = [
|
||
{ label: "Перевозчик", data: "carrier" },
|
||
{ label: "Номер маршрута", data: "route_number" },
|
||
{
|
||
label: "Направление маршрута",
|
||
data: "route_direction",
|
||
render: (value: number[][]) => (
|
||
<Typography style={{ color: value ? "#48989f" : "#7f6b58" }}>
|
||
{value ? "прямое" : "обратное"}
|
||
</Typography>
|
||
),
|
||
},
|
||
{
|
||
label: "Координаты маршрута",
|
||
data: "path",
|
||
render: (value: number[][]) => (
|
||
<Box
|
||
sx={{
|
||
fontFamily: "monospace",
|
||
bgcolor: (theme) => theme.palette.background.paper,
|
||
p: 2,
|
||
borderRadius: 1,
|
||
maxHeight: "200px",
|
||
overflow: "auto",
|
||
}}
|
||
>
|
||
{value?.map((point, index) => (
|
||
<Typography key={index} sx={{ mb: 0.5 }}>
|
||
{point[0]}, {point[1]}
|
||
</Typography>
|
||
))}
|
||
</Box>
|
||
),
|
||
},
|
||
];
|
||
|
||
return (
|
||
<Show isLoading={isLoading}>
|
||
<Stack gap={4}>
|
||
{fields.map(({ label, data, render }) => (
|
||
<Stack key={data} gap={1}>
|
||
<Typography variant="body1" fontWeight="bold">
|
||
{label}
|
||
</Typography>
|
||
{render ? (
|
||
render(record?.[data])
|
||
) : (
|
||
<TextField value={record?.[data]} />
|
||
)}
|
||
</Stack>
|
||
))}
|
||
|
||
{record?.id && (
|
||
<>
|
||
<LinkedItems<StationItem>
|
||
type="show"
|
||
parentId={record.id}
|
||
parentResource="route"
|
||
childResource="station"
|
||
fields={stationFields}
|
||
title="станции"
|
||
/>
|
||
|
||
<LinkedItems<VehicleItem>
|
||
type="show"
|
||
parentId={record.id}
|
||
parentResource="route"
|
||
childResource="vehicle"
|
||
fields={vehicleFields}
|
||
title="транспортные средства"
|
||
/>
|
||
|
||
<LinkedItems<SightItem>
|
||
type="show"
|
||
parentId={record.id}
|
||
parentResource="route"
|
||
childResource="sight"
|
||
fields={sightFields}
|
||
title="достопримечательности"
|
||
/>
|
||
</>
|
||
)}
|
||
|
||
|
||
<Box sx={{ display: 'flex', justifyContent: 'flex-start' }}>
|
||
<Button
|
||
variant="contained"
|
||
color="primary"
|
||
onClick={() => navigate(`/route-preview/${id}`)}
|
||
>
|
||
Предпросмотр маршрута
|
||
</Button>
|
||
</Box>
|
||
</Stack>
|
||
</Show>
|
||
);
|
||
});
|