68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
import {Stack, Typography, Box} from '@mui/material'
|
|
import {useShow} from '@refinedev/core'
|
|
import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
|
|
import {LinkedItems} from '../../components/LinkedItems'
|
|
import {StationItem, VehicleItem, stationFields, vehicleFields} from './types'
|
|
|
|
export const RouteShow = () => {
|
|
const {query} = useShow({})
|
|
const {data, isLoading} = query
|
|
const record = data?.data
|
|
|
|
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',
|
|
}}
|
|
>
|
|
{JSON.stringify(value)}
|
|
{/* {value?.map((point, index) => (
|
|
<Typography key={index} sx={{mb: 0.5}}>
|
|
Точка {index + 1}: [{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="транспортные средства" />
|
|
</>
|
|
)}
|
|
</Stack>
|
|
</Show>
|
|
)
|
|
}
|