fetching data from api for route preview

This commit is contained in:
2025-04-20 10:55:12 +03:00
parent 029a2de97e
commit 9e34a71e14
34 changed files with 1534 additions and 457 deletions

View File

@ -43,35 +43,51 @@ export const MediaShow = () => {
)}
{record && record.media_type === 2 && (
<Box
sx={{
p: 2,
border: "1px solid text.pimary",
borderRadius: 2,
bgcolor: "primary.light",
width: "fit-content",
}}
>
<Typography
variant="body1"
gutterBottom
sx={{
color: "#FFFFFF",
}}
>
Видео доступно для скачивания по ссылке:
</Typography>
<Button
variant="contained"
href={`${import.meta.env.VITE_KRBL_MEDIA}${
<>
<video
src={`${import.meta.env.VITE_KRBL_MEDIA}${
record?.id
}/download?token=${token}`}
target="_blank"
sx={{ mt: 1, width: "100%" }}
style={{
maxWidth: "50%",
objectFit: "contain",
borderRadius: 30,
}}
controls
autoPlay
muted
/>
<Box
sx={{
p: 2,
border: "1px solid text.pimary",
borderRadius: 2,
bgcolor: "primary.light",
width: "fit-content",
}}
>
Скачать видео
</Button>
</Box>
<Typography
variant="body1"
gutterBottom
sx={{
color: "#FFFFFF",
}}
>
Видео доступно для скачивания по ссылке:
</Typography>
<Button
variant="contained"
href={`${import.meta.env.VITE_KRBL_MEDIA}${
record?.id
}/download?token=${token}`}
target="_blank"
sx={{ mt: 1, width: "100%" }}
>
Скачать видео
</Button>
</Box>
</>
)}
{fields.map(({ label, data, render }) => (

View File

@ -134,17 +134,14 @@ export const RouteEdit = () => {
{...register("path", {
required: "Это поле является обязательным",
setValueAs: (value: string) => {
// Преобразование строки в массив координат
try {
// Разбиваем строку на строки и парсим каждую строку как пару координат
const lines = value.trim().split("\n");
return lines.map((line) => {
const [lat, lon] = line
.trim()
.split(/[\s,]+/)
.map(Number);
if (isNaN(lat) || isNaN(lon)) {
throw new Error("Invalid coordinates");
}
return [lat, lon];
});
} catch {
@ -305,6 +302,7 @@ export const RouteEdit = () => {
childResource="station"
fields={stationFields}
title="станции"
dragAllowed={true}
/>
<LinkedItems<VehicleItem>

View File

@ -1,67 +1,93 @@
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'
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 { query } = useShow({});
const { data, isLoading } = query;
const record = data?.data;
const fields = [
{label: 'Перевозчик', data: 'carrier'},
{label: 'Номер маршрута', data: 'route_number'},
{ label: "Перевозчик", data: "carrier" },
{ label: "Номер маршрута", data: "route_number" },
{
label: 'Направление маршрута',
data: 'route_direction',
render: (value: number[][]) => <Typography style={{color: value ? '#48989f' : '#7f6b58'}}>{value ? 'прямое' : 'обратное'}</Typography>,
label: "Направление маршрута",
data: "route_direction",
render: (value: number[][]) => (
<Typography style={{ color: value ? "#48989f" : "#7f6b58" }}>
{value ? "прямое" : "обратное"}
</Typography>
),
},
{
label: 'Координаты маршрута',
data: 'path',
label: "Координаты маршрута",
data: "path",
render: (value: number[][]) => (
<Box
sx={{
fontFamily: 'monospace',
fontFamily: "monospace",
bgcolor: (theme) => theme.palette.background.paper,
p: 2,
borderRadius: 1,
maxHeight: '200px',
overflow: 'auto',
maxHeight: "200px",
overflow: "auto",
}}
>
{JSON.stringify(value)}
{/* {value?.map((point, index) => (
<Typography key={index} sx={{mb: 0.5}}>
Точка {index + 1}: [{point[0]}, {point[1]}]
{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}) => (
{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]} />}
{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<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<VehicleItem>
type="show"
parentId={record.id}
parentResource="route"
childResource="vehicle"
fields={vehicleFields}
title="транспортные средства"
/>
</>
)}
</Stack>
</Show>
)
}
);
};