KRBL/WhiteNightsAdminPanel
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: KRBL:544012689877ee212cb62d1983668b1b511d6c77
Branches Tags
KRBL:master
KRBL:react
..
compare: KRBL:9bf294e124e3d3ae658575c630b8dc6e12262b50
Branches Tags
KRBL:react
KRBL:master

No commits in common. "544012689877ee212cb62d1983668b1b511d6c77" and "9bf294e124e3d3ae658575c630b8dc6e12262b50" have entirely different histories.
5440126898 ... 9bf294e124

25 changed files with 982 additions and 1408 deletions
Show Stats Expand all files Collapse all files

6
index.html
View File

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" type="image/png" href="/favicon-ship.png" /> <link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
@ -19,7 +19,9 @@
name="twitter:image" name="twitter:image"
content="https://refine.dev/img/refine_social.png" content="https://refine.dev/img/refine_social.png"
/> />
<title>Белые ночи</title> <title>
Белые ночи
</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

BIN
public/favicon-ship.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.8 KiB

7
src/components/LinkedItems.tsx
View File

@ -70,7 +70,6 @@ type LinkedItemsProps<T> = {
disableCreation?: boolean; disableCreation?: boolean;
updatedLinkedItems?: T[]; updatedLinkedItems?: T[];
refresh?: number; refresh?: number;
cityId?: number;
}; };
const reorder = (list: any[], startIndex: number, endIndex: number) => { const reorder = (list: any[], startIndex: number, endIndex: number) => {
@ -132,7 +131,6 @@ export const LinkedItemsContents = <
disableCreation = false, disableCreation = false,
updatedLinkedItems, updatedLinkedItems,
refresh, refresh,
cityId,
}: LinkedItemsProps<T>) => { }: LinkedItemsProps<T>) => {
const { language } = languageStore; const { language } = languageStore;
const { setArticleModalOpenAction, setArticleIdAction } = articleStore; const { setArticleModalOpenAction, setArticleIdAction } = articleStore;
@ -218,7 +216,7 @@ export const LinkedItemsContents = <
useEffect(() => { useEffect(() => {
if (type === "edit") { if (type === "edit") {
axiosInstance axiosInstance
.get(`${import.meta.env.VITE_KRBL_API}/${childResource}/`, {}) .get(`${import.meta.env.VITE_KRBL_API}/${childResource}/`)
.then((response) => { .then((response) => {
setItems(response?.data || []); setItems(response?.data || []);
setIsLoading(false); setIsLoading(false);
@ -447,7 +445,7 @@ export const LinkedItemsContents = <
availableItems?.find((item) => item.id === selectedItemId) || null availableItems?.find((item) => item.id === selectedItemId) || null
} }
onChange={(_, newValue) => setSelectedItemId(newValue?.id || null)} onChange={(_, newValue) => setSelectedItemId(newValue?.id || null)}
options={availableItems.filter((item) => item.city_id == cityId)} options={availableItems}
getOptionLabel={(item) => String(item[fields[0].data])} getOptionLabel={(item) => String(item[fields[0].data])}
renderInput={(params) => ( renderInput={(params) => (
<TextField {...params} label={`Выберите ${title}`} fullWidth /> <TextField {...params} label={`Выберите ${title}`} fullWidth />
@ -458,7 +456,6 @@ export const LinkedItemsContents = <
.toLowerCase() .toLowerCase()
.split(" ") .split(" ")
.filter((word) => word.length > 0); .filter((word) => word.length > 0);
return options.filter((option) => { return options.filter((option) => {
const optionWords = String(option[fields[0].data]) const optionWords = String(option[fields[0].data])
.toLowerCase() .toLowerCase()

11
src/components/header/index.tsx
View File

@ -143,17 +143,8 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = observer(
justifyContent="flex-end" justifyContent="flex-end"
alignItems="center" alignItems="center"
spacing={2} spacing={2}
color="white"
sx={{
"& .MuiSelect-select": {
color: "white",
},
}}
> >
<FormControl <FormControl variant="standard" sx={{ width: "min-content" }}>
variant="standard"
sx={{ width: "min-content", color: "white" }}
>
{city_id && cities && ( {city_id && cities && (
<Select <Select
defaultValue={city_id} defaultValue={city_id}

2
src/components/modals/StationEditModal/index.tsx
View File

@ -121,7 +121,7 @@ export const StationEditModal = observer(() => {
> >
<Box sx={style}> <Box sx={style}>
<Edit <Edit
title={<Typography variant="h5">Редактирование остановки</Typography>} title={<Typography variant="h5">Редактирование станции</Typography>}
saveButtonProps={saveButtonProps} saveButtonProps={saveButtonProps}
> >
<Box <Box

17
src/components/ui/SidebarTitle.tsx
View File

@ -1,16 +1,11 @@
import { Ship } from "lucide-react"; import {ProjectIcon} from './Icons'
import { ProjectIcon } from "./Icons";
export default function SidebarTitle({ collapsed }: { collapsed: boolean }) { export default function SidebarTitle({collapsed}: {collapsed: boolean}) {
return ( return (
<div <div style={{display: 'flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
style={{ display: "flex", alignItems: "center", whiteSpace: "nowrap" }} <ProjectIcon style={{color: '#7f6b58'}} />
>
<Ship size={40} style={{ color: "#7f6b58" }} />
{!collapsed && ( {!collapsed && <span style={{marginLeft: 8, fontWeight: 'bold'}}>Белые ночи</span>}
<span style={{ marginLeft: 8, fontWeight: "bold" }}>Белые ночи</span>
)}
</div> </div>
); )
} }

8
src/globals.css
View File

@ -14,12 +14,12 @@
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
margin: 0; margin: 0;
width: 32px; width: 35px;
height: 32px; height: 35px;
color: rgba(79, 138, 95, 1); color: #544044;
border-radius: 10%; border-radius: 10%;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.backup-button:hover { .backup-button:hover {
background-color: rgba(79, 138, 95, 0.05); background-color: rgba(84, 64, 68, 0.5);
} }

6
src/locales/ru/translation.json
View File

@ -94,9 +94,9 @@
}, },
"station": { "station": {
"titles": { "titles": {
"create": "Создать остановку", "create": "Создать станцию",
"edit": "Редактировать остановку", "edit": "Редактировать станцию",
"show": "Показать остановку" "show": "Показать станцию"
} }
}, },
"snapshots": { "snapshots": {

355
src/pages/route-preview/InfiniteCanvas.tsx
View File

@ -1,230 +1,179 @@
import { FederatedMouseEvent, FederatedWheelEvent } from "pixi.js"; import { FederatedMouseEvent, FederatedWheelEvent } from "pixi.js";
import { Component, ReactNode, useEffect, useState, useRef } from "react"; import { Component, ReactNode, useEffect, useState } from "react";
import { useTransform } from "./TransformContext"; import { useTransform } from "./TransformContext";
import { useMapData } from "./MapDataContext"; import { useMapData } from "./MapDataContext";
import { SCALE_FACTOR } from "./Constants"; import { SCALE_FACTOR } from "./Constants";
import { useApplication } from "@pixi/react"; import { useApplication } from "@pixi/react";
class ErrorBoundary extends Component< class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> {
{ children: ReactNode }, state = { hasError: false };
{ hasError: boolean }
> { static getDerivedStateFromError() {
state = { hasError: false }; return { hasError: true };
}
static getDerivedStateFromError() {
return { hasError: true }; componentDidCatch(error: Error, info: React.ErrorInfo) {
console.error("Error caught:", error, info);
}
render() {
return this.state.hasError ? <p>Whoopsie Daisy!</p> : this.props.children;
}
} }
componentDidCatch(error: Error, info: React.ErrorInfo) {
console.error("Error caught:", error, info);
}
render() { export function InfiniteCanvas({children} : Readonly<{children?: ReactNode}>) {
return this.state.hasError ? <p>Whoopsie Daisy!</p> : this.props.children; const { position, setPosition, scale, setScale, rotation, setRotation, setScreenCenter, screenCenter } = useTransform();
} const { routeData, originalRouteData } = useMapData();
}
export function InfiniteCanvas({ const applicationRef = useApplication();
children,
}: Readonly<{ children?: ReactNode }>) { const [isDragging, setIsDragging] = useState(false);
const { const [startMousePosition, setStartMousePosition] = useState({ x: 0, y: 0 });
position, const [startRotation, setStartRotation] = useState(0);
setPosition, const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });
scale,
setScale,
rotation,
setRotation,
setScreenCenter,
screenCenter,
} = useTransform();
const { routeData, originalRouteData } = useMapData();
const applicationRef = useApplication(); useEffect(() => {
const canvas = applicationRef?.app.canvas;
if (!canvas) return;
const canvasRect = canvas.getBoundingClientRect();
const canvasLeft = canvasRect?.left ?? 0;
const canvasTop = canvasRect?.top ?? 0;
const centerX = window.innerWidth / 2 - canvasLeft;
const centerY = window.innerHeight / 2 - canvasTop;
setScreenCenter({x: centerX, y: centerY});
}, [applicationRef?.app.canvas, window.innerWidth, window.innerHeight]);
const [isDragging, setIsDragging] = useState(false); const handlePointerDown = (e: FederatedMouseEvent) => {
const [startMousePosition, setStartMousePosition] = useState({ x: 0, y: 0 }); setIsDragging(true);
const [startRotation, setStartRotation] = useState(0); setStartPosition({
const [startPosition, setStartPosition] = useState({ x: 0, y: 0 }); x: position.x,
y: position.y
});
setStartMousePosition({
x: e.globalX,
y: e.globalY
});
setStartRotation(rotation);
e.stopPropagation();
};
// Флаг для предотвращения конфликта между пользовательским вводом и данными маршрута
const [isUserInteracting, setIsUserInteracting] = useState(false);
// Реф для отслеживания последнего значения originalRouteData?.rotate useEffect(() => {
const lastOriginalRotation = useRef<number | undefined>(undefined); setRotation((originalRouteData?.rotate ?? 0) * Math.PI / 180);
}, [originalRouteData?.rotate]);
// Get canvas element and its dimensions/position
const handlePointerMove = (e: FederatedMouseEvent) => {
if (!isDragging) return;
useEffect(() => { if (e.shiftKey) {
const canvas = applicationRef?.app.canvas; const center = screenCenter ?? {x: 0, y: 0};
if (!canvas) return; const startAngle = Math.atan2(startMousePosition.y - center.y, startMousePosition.x - center.x);
const currentAngle = Math.atan2(e.globalY - center.y, e.globalX - center.x);
const canvasRect = canvas.getBoundingClientRect(); // Calculate rotation difference in radians
const canvasLeft = canvasRect.left; const rotationDiff = currentAngle - startAngle;
const canvasTop = canvasRect.top;
const centerX = window.innerWidth / 2 - canvasLeft;
const centerY = window.innerHeight / 2 - canvasTop;
setScreenCenter({ x: centerX, y: centerY });
}, [applicationRef?.app.canvas, setScreenCenter]);
const handlePointerDown = (e: FederatedMouseEvent) => { // Update rotation
setIsDragging(true); setRotation(startRotation + rotationDiff);
setIsUserInteracting(true); // Устанавливаем флаг взаимодействия пользователя
setStartPosition({
x: position.x,
y: position.y,
});
setStartMousePosition({
x: e.globalX,
y: e.globalY,
});
setStartRotation(rotation);
e.stopPropagation();
};
// Устанавливаем rotation только при изменении originalRouteData и отсутствии взаимодействия пользователя const cosDelta = Math.cos(rotationDiff);
useEffect(() => { const sinDelta = Math.sin(rotationDiff);
const newRotation = originalRouteData?.rotate ?? 0;
setPosition({
x: center.x * (1 - cosDelta) + startPosition.x * cosDelta + (center.y - startPosition.y) * sinDelta,
y: center.y * (1 - cosDelta) + startPosition.y * cosDelta + (startPosition.x - center.x) * sinDelta
});
} else {
setRotation(startRotation);
setPosition({
x: startPosition.x - startMousePosition.x + e.globalX,
y: startPosition.y - startMousePosition.y + e.globalY
});
}
e.stopPropagation();
};
// Обновляем rotation только если: // Handle mouse up
// 1. Пользователь не взаимодействует с канвасом const handlePointerUp = (e: FederatedMouseEvent) => {
// 2. Значение действительно изменилось setIsDragging(false);
if (!isUserInteracting && lastOriginalRotation.current !== newRotation) { e.stopPropagation();
setRotation((newRotation * Math.PI) / 180); };
lastOriginalRotation.current = newRotation; // Handle mouse wheel for zooming
} const handleWheel = (e: FederatedWheelEvent) => {
}, [originalRouteData?.rotate, isUserInteracting, setRotation]); e.stopPropagation();
// Get mouse position relative to canvas
const mouseX = e.globalX - position.x;
const mouseY = e.globalY - position.y;
const handlePointerMove = (e: FederatedMouseEvent) => { // Calculate new scale
if (!isDragging) return; const scaleMin = (routeData?.scale_min ?? 10)/SCALE_FACTOR;
const scaleMax = (routeData?.scale_max ?? 20)/SCALE_FACTOR;
if (e.shiftKey) { let zoomFactor = e.deltaY > 0 ? 0.9 : 1.1; // Zoom out/in
const center = screenCenter ?? { x: 0, y: 0 }; //const newScale = scale * zoomFactor;
const startAngle = Math.atan2( const newScale = Math.max(scaleMin, Math.min(scaleMax, scale * zoomFactor));
startMousePosition.y - center.y, zoomFactor = newScale / scale;
startMousePosition.x - center.x
);
const currentAngle = Math.atan2(
e.globalY - center.y,
e.globalX - center.x
);
// Calculate rotation difference in radians if (scale === newScale) {
const rotationDiff = currentAngle - startAngle; return;
}
// Update rotation // Update position to zoom towards mouse cursor
setRotation(startRotation + rotationDiff); setPosition({
x: position.x + mouseX * (1 - zoomFactor),
y: position.y + mouseY * (1 - zoomFactor)
});
const cosDelta = Math.cos(rotationDiff); setScale(newScale);
const sinDelta = Math.sin(rotationDiff); };
setPosition({ useEffect(() => {
x: applicationRef?.app.render();
center.x * (1 - cosDelta) + console.log(position, scale, rotation);
startPosition.x * cosDelta + }, [position, scale, rotation]);
(center.y - startPosition.y) * sinDelta,
y:
center.y * (1 - cosDelta) +
startPosition.y * cosDelta +
(startPosition.x - center.x) * sinDelta,
});
} else {
setRotation(startRotation);
setPosition({
x: startPosition.x - startMousePosition.x + e.globalX,
y: startPosition.y - startMousePosition.y + e.globalY,
});
}
e.stopPropagation();
};
const handlePointerUp = (e: FederatedMouseEvent) => {
setIsDragging(false); return (
// Сбрасываем флаг взаимодействия через небольшую задержку <ErrorBoundary>
// чтобы избежать немедленного срабатывания useEffect {applicationRef?.app && (
setTimeout(() => { <pixiGraphics
setIsUserInteracting(false); draw={(g) => {
}, 100); const canvas = applicationRef.app.canvas;
e.stopPropagation(); g.clear();
}; g.rect(0, 0, canvas?.width ?? 0, canvas?.height ?? 0);
g.fill("#111");
}}
eventMode={'static'}
interactive
onPointerDown={handlePointerDown}
onGlobalPointerMove={handlePointerMove}
onPointerUp={handlePointerUp}
onPointerUpOutside={handlePointerUp}
onWheel={handleWheel}
/>
)}
<pixiContainer
x={position.x}
y={position.y}
scale={scale}
rotation={rotation}
>
{children}
</pixiContainer>
{/* Show center of the screen.
<pixiGraphics
eventMode="none"
const handleWheel = (e: FederatedWheelEvent) => { draw={(g) => {
e.stopPropagation(); g.clear();
setIsUserInteracting(true); // Устанавливаем флаг при зуме const center = screenCenter ?? {x: 0, y: 0};
g.circle(center.x, center.y, 1);
// Get mouse position relative to canvas g.fill("#fff");
const mouseX = e.globalX - position.x; }}
const mouseY = e.globalY - position.y; /> */}
</ErrorBoundary>
// Calculate new scale );
const scaleMin = (routeData?.scale_min ?? 10) / SCALE_FACTOR; }
const scaleMax = (routeData?.scale_max ?? 20) / SCALE_FACTOR;
const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1; // Zoom out/in
const newScale = Math.max(scaleMin, Math.min(scaleMax, scale * zoomFactor));
const actualZoomFactor = newScale / scale;
if (scale === newScale) {
// Сбрасываем флаг, если зум не изменился
setTimeout(() => {
setIsUserInteracting(false);
}, 100);
return;
}
// Update position to zoom towards mouse cursor
setPosition({
x: position.x + mouseX * (1 - actualZoomFactor),
y: position.y + mouseY * (1 - actualZoomFactor),
});
setScale(newScale);
// Сбрасываем флаг взаимодействия через задержку
setTimeout(() => {
setIsUserInteracting(false);
}, 100);
};
useEffect(() => {
applicationRef?.app.render();
console.log(position, scale, rotation);
}, [position, scale, rotation]);
return (
<ErrorBoundary>
{applicationRef?.app && (
<pixiGraphics
draw={(g) => {
const canvas = applicationRef.app.canvas;
g.clear();
g.rect(0, 0, canvas?.width ?? 0, canvas?.height ?? 0);
g.fill("#111");
}}
eventMode={"static"}
interactive
onPointerDown={handlePointerDown}
onGlobalPointerMove={handlePointerMove}
onPointerUp={handlePointerUp}
onPointerUpOutside={handlePointerUp}
onWheel={handleWheel}
/>
)}
<pixiContainer
x={position.x}
y={position.y}
scale={scale}
rotation={rotation}
>
{children}
</pixiContainer>
{/* Show center of the screen.
<pixiGraphics
eventMode="none"
draw={(g) => {
g.clear();
const center = screenCenter ?? {x: 0, y: 0};
g.circle(center.x, center.y, 1);
g.fill("#fff");
}}
/> */}
</ErrorBoundary>
);
}

110
src/pages/route-preview/LeftSidebar.tsx
View File

@ -1,89 +1,33 @@
import { Stack, Typography, Button } from "@mui/material"; import { Stack, Typography, Button } from "@mui/material";
import { useNavigate, useNavigationType } from "react-router";
export function LeftSidebar() { export function LeftSidebar() {
const navigate = useNavigate(); return (
const navigationType = useNavigationType(); // PUSH, POP, REPLACE <Stack direction="column" width="300px" p={2} bgcolor="primary.main">
<Stack direction="column" alignItems="center" justifyContent="center" my={10}>
<img src={"/Emblem.svg"} alt="logo" width={100} height={100} />
<Typography sx={{ mb: 2 }} textAlign="center">
При поддержке Правительства
Санкт-Петербурга
</Typography>
</Stack>
const handleBack = () => {
if (navigationType === "PUSH") { <Stack direction="column" alignItems="center" justifyContent="center" my={10} spacing={2}>
navigate(-1); <Button variant="outlined" color="warning" fullWidth>
} else { Достопримечательности
navigate("/route"); </Button>
} <Button variant="outlined" color="warning" fullWidth>
}; Остановки
</Button>
</Stack>
return ( <Stack direction="column" alignItems="center" justifyContent="center" my={10}>
<Stack direction="column" width="300px" p={2} bgcolor="primary.main"> <img src={"/GET.png"} alt="logo" width="80%" style={{margin: "0 auto"}}/>
<button </Stack>
onClick={handleBack}
type="button" <Typography variant="h6" textAlign="center" mt="auto">#ВсемПоПути</Typography>
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
gap: 10,
color: "#fff",
backgroundColor: "#222",
borderRadius: 10,
width: "100%",
border: "none",
cursor: "pointer",
}}
>
<p>Назад</p>
</button>
<Stack
direction="column" </Stack>
alignItems="center" );
justifyContent="center" }
my={10}
>
<img src={"/Emblem.svg"} alt="logo" width={100} height={100} />
<Typography sx={{ mb: 2, color: "#fff" }} textAlign="center">
При поддержке Правительства Санкт-Петербурга
</Typography>
</Stack>
<Stack
direction="column"
alignItems="center"
justifyContent="center"
my={10}
spacing={2}
>
<Button variant="outlined" color="warning" fullWidth>
Достопримечательности
</Button>
<Button variant="outlined" color="warning" fullWidth>
Остановки
</Button>
</Stack>
<Stack
direction="column"
alignItems="center"
justifyContent="center"
my={10}
>
<img
src={"/GET.png"}
alt="logo"
width="80%"
style={{ margin: "0 auto" }}
/>
</Stack>
<Typography
variant="h6"
textAlign="center"
mt="auto"
sx={{ color: "#fff" }}
>
#ВсемПоПути
</Typography>
</Stack>
);
}

444
src/pages/route-preview/MapDataContext.tsx
View File

@ -1,4 +1,4 @@
import { useApiUrl } from "@refinedev/core"; import { useCustom, useApiUrl } from "@refinedev/core";
import { useParams } from "react-router"; import { useParams } from "react-router";
import { import {
createContext, createContext,
@ -16,16 +16,13 @@ import {
StationPatchData, StationPatchData,
} from "./types"; } from "./types";
import { axiosInstance } from "../../providers/data"; import { axiosInstance } from "../../providers/data";
import { languageStore, META_LANGUAGE } from "@/store/LanguageStore";
import { observer } from "mobx-react-lite";
import { axiosInstanceForGet } from "@/providers/data";
const MapDataContext = createContext<{ const MapDataContext = createContext<{
originalRouteData?: RouteData; originalRouteData?: RouteData;
originalStationData?: StationData[]; originalStationData?: StationData[];
originalSightData?: SightData[]; originalSightData?: SightData[];
routeData?: RouteData; routeData?: RouteData;
stationData?: StationDataWithLanguage; stationData?: StationData[];
sightData?: SightData[]; sightData?: SightData[];
isRouteLoading: boolean; isRouteLoading: boolean;
@ -60,247 +57,210 @@ const MapDataContext = createContext<{
saveChanges: () => {}, saveChanges: () => {},
}); });
type StationDataWithLanguage = { export function MapDataProvider({
[key: string]: StationData[]; children,
}; }: Readonly<{ children: ReactNode }>) {
export const MapDataProvider = observer( const { id: routeId } = useParams<{ id: string }>();
({ children }: Readonly<{ children: ReactNode }>) => { const apiUrl = useApiUrl();
const { id: routeId } = useParams<{ id: string }>();
const apiUrl = useApiUrl();
const [originalRouteData, setOriginalRouteData] = useState<RouteData>(); const [originalRouteData, setOriginalRouteData] = useState<RouteData>();
const [originalStationData, setOriginalStationData] = const [originalStationData, setOriginalStationData] =
useState<StationData[]>(); useState<StationData[]>();
const [originalSightData, setOriginalSightData] = useState<SightData[]>(); const [originalSightData, setOriginalSightData] = useState<SightData[]>();
const [routeData, setRouteData] = useState<RouteData>(); const [routeData, setRouteData] = useState<RouteData>();
const [stationData, setStationData] = useState<StationDataWithLanguage>({ const [stationData, setStationData] = useState<StationData[]>();
RU: [], const [sightData, setSightData] = useState<SightData[]>();
EN: [],
ZH: [], const [routeChanges, setRouteChanges] = useState<RouteData>({} as RouteData);
const [stationChanges, setStationChanges] = useState<StationPatchData[]>([]);
const [sightChanges, setSightChanges] = useState<SightPatchData[]>([]);
const { data: routeQuery, isLoading: isRouteLoading } = useCustom({
url: `${apiUrl}/route/${routeId}`,
method: "get",
});
const { data: stationQuery, isLoading: isStationLoading } = useCustom({
url: `${apiUrl}/route/${routeId}/station`,
method: "get",
});
const { data: sightQuery, isLoading: isSightLoading } = useCustom({
url: `${apiUrl}/route/${routeId}/sight`,
method: "get",
});
useEffect(() => {
// if not undefined, set original data
if (routeQuery?.data) setOriginalRouteData(routeQuery.data as RouteData);
if (stationQuery?.data)
setOriginalStationData(stationQuery.data as StationData[]);
if (sightQuery?.data) setOriginalSightData(sightQuery.data as SightData[]);
console.log("queries", routeQuery, stationQuery, sightQuery);
}, [routeQuery, stationQuery, sightQuery]);
useEffect(() => {
// combine changes with original data
if (originalRouteData)
setRouteData({ ...originalRouteData, ...routeChanges });
if (originalStationData) setStationData(originalStationData);
if (originalSightData) setSightData(originalSightData);
}, [
originalRouteData,
originalStationData,
originalSightData,
routeChanges,
stationChanges,
sightChanges,
]);
function setScaleRange(min: number, max: number) {
setRouteChanges((prev) => {
return { ...prev, scale_min: min, scale_max: max };
}); });
const [sightData, setSightData] = useState<SightData[]>();
const [routeChanges, setRouteChanges] = useState<Partial<RouteData>>({});
const [stationChanges, setStationChanges] = useState<StationPatchData[]>(
[]
);
const [sightChanges, setSightChanges] = useState<SightPatchData[]>([]);
const { language } = languageStore;
const [isRouteLoading, setIsRouteLoading] = useState(true);
const [isStationLoading, setIsStationLoading] = useState(true);
const [isSightLoading, setIsSightLoading] = useState(true);
useEffect(() => {
const fetchData = async () => {
try {
setIsRouteLoading(true);
setIsStationLoading(true);
setIsSightLoading(true);
const [
routeResponse,
ruStationResponse,
enStationResponse,
zhStationResponse,
sightResponse,
] = await Promise.all([
axiosInstanceForGet(language).get(`/route/${routeId}`),
axiosInstanceForGet("ru").get(`/route/${routeId}/station`),
axiosInstanceForGet("en").get(`/route/${routeId}/station`),
axiosInstanceForGet("zh").get(`/route/${routeId}/station`),
axiosInstanceForGet(language).get(`/route/${routeId}/sight`),
]);
setOriginalRouteData(routeResponse.data as RouteData);
setOriginalStationData(ruStationResponse.data as StationData[]);
setStationData({
ru: ruStationResponse.data as StationData[],
en: enStationResponse.data as StationData[],
zh: zhStationResponse.data as StationData[],
});
setOriginalSightData(sightResponse.data as SightData[]);
setIsRouteLoading(false);
setIsStationLoading(false);
setIsSightLoading(false);
} catch (error) {
console.error("Error fetching data:", error);
setIsRouteLoading(false);
setIsStationLoading(false);
setIsSightLoading(false);
}
};
fetchData();
}, [routeId]);
useEffect(() => {
// combine changes with original data
if (originalRouteData)
setRouteData({ ...originalRouteData, ...routeChanges });
if (originalSightData) setSightData(originalSightData);
}, [
originalRouteData,
originalSightData,
routeChanges,
stationChanges,
sightChanges,
]);
function setScaleRange(min: number, max: number) {
setRouteChanges((prev) => {
return { ...prev, scale_min: min, scale_max: max };
});
}
function setMapRotation(rotation: number) {
setRouteChanges((prev) => {
return { ...prev, rotate: rotation };
});
}
function setMapCenter(x: number, y: number) {
setRouteChanges((prev) => {
return { ...prev, center_latitude: x, center_longitude: y };
});
}
async function saveChanges() {
await axiosInstance.patch(`/route/${routeId}`, routeData);
await saveStationChanges();
await saveSightChanges();
}
async function saveStationChanges() {
for (const station of stationChanges) {
const response = await axiosInstance.patch(
`/route/${routeId}/station`,
station
);
}
}
async function saveSightChanges() {
console.log("sightChanges", sightChanges);
for (const sight of sightChanges) {
const response = await axiosInstance.patch(
`/route/${routeId}/sight`,
sight
);
}
}
function setStationOffset(stationId: number, x: number, y: number) {
setStationChanges((prev) => {
let found = prev.find((station) => station.station_id === stationId);
if (found) {
found.offset_x = x;
found.offset_y = y;
return prev.map((station) => {
if (station.station_id === stationId) {
return found;
}
return station;
});
} else {
const foundStation = stationData.ru?.find(
(station) => station.id === stationId
);
if (foundStation) {
return [
...prev,
{
station_id: stationId,
offset_x: x,
offset_y: y,
transfers: foundStation.transfers,
},
];
}
return prev;
}
});
}
function setSightCoordinates(
sightId: number,
latitude: number,
longitude: number
) {
setSightChanges((prev) => {
let found = prev.find((sight) => sight.sight_id === sightId);
if (found) {
found.latitude = latitude;
found.longitude = longitude;
return prev.map((sight) => {
if (sight.sight_id === sightId) {
return found;
}
return sight;
});
} else {
const foundSight = sightData?.find((sight) => sight.id === sightId);
if (foundSight) {
return [
...prev,
{
sight_id: sightId,
latitude,
longitude,
},
];
}
return prev;
}
});
}
useEffect(() => {
console.log("sightChanges", sightChanges);
}, [sightChanges]);
const value = useMemo(
() => ({
originalRouteData,
originalStationData,
originalSightData,
routeData,
stationData,
sightData,
isRouteLoading,
isStationLoading,
isSightLoading,
setScaleRange,
setMapRotation,
setMapCenter,
saveChanges,
setStationOffset,
setSightCoordinates,
}),
[
originalRouteData,
originalStationData,
originalSightData,
routeData,
stationData,
sightData,
isRouteLoading,
isStationLoading,
isSightLoading,
]
);
return (
<MapDataContext.Provider value={value}>
{children}
</MapDataContext.Provider>
);
} }
);
function setMapRotation(rotation: number) {
setRouteChanges((prev) => {
return { ...prev, rotate: rotation };
});
}
function setMapCenter(x: number, y: number) {
setRouteChanges((prev) => {
return { ...prev, center_latitude: x, center_longitude: y };
});
}
async function saveChanges() {
await axiosInstance.patch(`/route/${routeId}`, routeData);
await saveStationChanges();
await saveSightChanges();
}
async function saveStationChanges() {
for (const station of stationChanges) {
const response = await axiosInstance.patch(
`/route/${routeId}/station`,
station
);
}
}
async function saveSightChanges() {
console.log("sightChanges", sightChanges);
for (const sight of sightChanges) {
const response = await axiosInstance.patch(
`/route/${routeId}/sight`,
sight
);
}
}
function setStationOffset(stationId: number, x: number, y: number) {
setStationChanges((prev) => {
let found = prev.find((station) => station.station_id === stationId);
if (found) {
found.offset_x = x;
found.offset_y = y;
return prev.map((station) => {
if (station.station_id === stationId) {
return found;
}
return station;
});
} else {
const foundStation = stationData?.find(
(station) => station.id === stationId
);
if (foundStation) {
return [
...prev,
{
station_id: stationId,
offset_x: x,
offset_y: y,
transfers: foundStation.transfers,
},
];
}
return prev;
}
});
}
function setSightCoordinates(
sightId: number,
latitude: number,
longitude: number
) {
setSightChanges((prev) => {
let found = prev.find((sight) => sight.sight_id === sightId);
if (found) {
found.latitude = latitude;
found.longitude = longitude;
return prev.map((sight) => {
if (sight.sight_id === sightId) {
return found;
}
return sight;
});
} else {
const foundSight = sightData?.find((sight) => sight.id === sightId);
if (foundSight) {
return [
...prev,
{
sight_id: sightId,
latitude,
longitude,
},
];
}
return prev;
}
});
}
useEffect(() => {
console.log("sightChanges", sightChanges);
}, [sightChanges]);
const value = useMemo(
() => ({
originalRouteData: originalRouteData,
originalStationData: originalStationData,
originalSightData: originalSightData,
routeData: routeData,
stationData: stationData,
sightData: sightData,
isRouteLoading,
isStationLoading,
isSightLoading,
setScaleRange,
setMapRotation,
setMapCenter,
saveChanges,
setStationOffset,
setSightCoordinates,
}),
[
originalRouteData,
originalStationData,
originalSightData,
routeData,
stationData,
sightData,
isRouteLoading,
isStationLoading,
isSightLoading,
]
);
return (
<MapDataContext.Provider value={value}>{children}</MapDataContext.Provider>
);
}
export const useMapData = () => { export const useMapData = () => {
const context = useContext(MapDataContext); const context = useContext(MapDataContext);

383
src/pages/route-preview/RightSidebar.tsx
View File

@ -5,228 +5,187 @@ import { useTransform } from "./TransformContext";
import { coordinatesToLocal, localToCoordinates } from "./utils"; import { coordinatesToLocal, localToCoordinates } from "./utils";
export function RightSidebar() { export function RightSidebar() {
const { const { routeData, setScaleRange, saveChanges, originalRouteData, setMapRotation, setMapCenter } = useMapData();
routeData, const { rotation, position, screenToLocal, screenCenter, rotateToAngle, setTransform } = useTransform();
setScaleRange, const [minScale, setMinScale] = useState<number>(1);
saveChanges, const [maxScale, setMaxScale] = useState<number>(10);
originalRouteData, const [localCenter, setLocalCenter] = useState<{x: number, y: number}>({x: 0, y: 0});
setMapRotation, const [rotationDegrees, setRotationDegrees] = useState<number>(0);
setMapCenter,
} = useMapData();
const {
rotation,
position,
screenToLocal,
screenCenter,
rotateToAngle,
setTransform,
} = useTransform();
const [minScale, setMinScale] = useState<number>(1);
const [maxScale, setMaxScale] = useState<number>(10);
const [localCenter, setLocalCenter] = useState<{ x: number; y: number }>({
x: 0,
y: 0,
});
const [rotationDegrees, setRotationDegrees] = useState<number>(0);
useEffect(() => { useEffect(() => {
if (originalRouteData) { if(originalRouteData) {
setMinScale(originalRouteData.scale_min ?? 1); setMinScale(originalRouteData.scale_min ?? 1);
setMaxScale(originalRouteData.scale_max ?? 10); setMaxScale(originalRouteData.scale_max ?? 10);
setRotationDegrees(originalRouteData.rotate ?? 0); setRotationDegrees(originalRouteData.rotate ?? 0);
setLocalCenter({ setLocalCenter({x: originalRouteData.center_latitude ?? 0, y: originalRouteData.center_longitude ?? 0});
x: originalRouteData.center_latitude ?? 0, }
y: originalRouteData.center_longitude ?? 0, }, [originalRouteData]);
});
}
}, [originalRouteData]);
useEffect(() => { useEffect(() => {
if (minScale && maxScale) { if(minScale && maxScale) {
setScaleRange(minScale, maxScale); setScaleRange(minScale, maxScale);
} }
}, [minScale, maxScale]); }, [minScale, maxScale]);
useEffect(() => {
setRotationDegrees(
((Math.round((rotation * 180) / Math.PI) % 360) + 360) % 360
);
}, [rotation]);
useEffect(() => {
setMapRotation(rotationDegrees);
}, [rotationDegrees]);
useEffect(() => { useEffect(() => {
const center = screenCenter ?? { x: 0, y: 0 }; setRotationDegrees((Math.round(rotation * 180 / Math.PI) % 360 + 360) % 360);
const localCenter = screenToLocal(center.x, center.y); }, [rotation]);
const coordinates = localToCoordinates(localCenter.x, localCenter.y); useEffect(() => {
setLocalCenter({ x: coordinates.latitude, y: coordinates.longitude }); setMapRotation(rotationDegrees);
}, [position]); }, [rotationDegrees]);
useEffect(() => { useEffect(() => {
setMapCenter(localCenter.x, localCenter.y); const center = screenCenter ?? {x: 0, y: 0};
}, [localCenter]); const localCenter = screenToLocal(center.x, center.y);
const coordinates = localToCoordinates(localCenter.x, localCenter.y);
setLocalCenter({x: coordinates.latitude, y: coordinates.longitude});
}, [position]);
function setRotationFromDegrees(degrees: number) {
rotateToAngle((degrees * Math.PI) / 180);
}
function pan({ x, y }: { x: number; y: number }) { useEffect(() => {
const coordinates = coordinatesToLocal(x, y); setMapCenter(localCenter.x, localCenter.y);
setTransform(coordinates.x, coordinates.y); }, [localCenter]);
}
if (!routeData) { function setRotationFromDegrees(degrees: number) {
console.error("routeData is null"); rotateToAngle(degrees * Math.PI / 180);
return null; }
}
return ( function pan({x, y}: {x: number, y: number}) {
<Stack const coordinates = coordinatesToLocal(x,y);
position="absolute" setTransform(coordinates.x, coordinates.y);
right={8} }
top={8}
bottom={8}
p={2}
gap={1}
minWidth="400px"
bgcolor="primary.main"
border="1px solid #e0e0e0"
borderRadius={2}
>
<Typography variant="h6" sx={{ mb: 2, color: "#fff" }} textAlign="center">
Детали о достопримечательностях
</Typography>
<Stack spacing={2} direction="row" alignItems="center"> if(!routeData) {
<TextField console.error("routeData is null");
type="number" return null;
label="Минимальный масштаб" }
variant="filled"
value={minScale}
onChange={(e) => setMinScale(Number(e.target.value))}
style={{ backgroundColor: "#222", borderRadius: 4 }}
sx={{
"& .MuiInputLabel-root": {
color: "#fff",
},
"& .MuiInputBase-input": {
color: "#fff",
},
}}
slotProps={{
input: {
min: 0.1,
},
}}
/>
<TextField
type="number"
label="Максимальный масштаб"
variant="filled"
value={maxScale}
onChange={(e) => setMaxScale(Number(e.target.value))}
style={{ backgroundColor: "#222", borderRadius: 4, color: "#fff" }}
sx={{
"& .MuiInputLabel-root": {
color: "#fff",
},
"& .MuiInputBase-input": {
color: "#fff",
},
}}
slotProps={{
input: {
min: 0.1,
},
}}
/>
</Stack>
<TextField return (
type="number" <Stack
label="Поворот (в градусах)" position="absolute" right={8} top={8} bottom={8} p={2}
variant="filled" gap={1}
value={rotationDegrees} minWidth="400px" bgcolor="primary.main"
onChange={(e) => { border="1px solid #e0e0e0" borderRadius={2}
const value = Number(e.target.value); >
if (!isNaN(value)) { <Typography variant="h6" sx={{ mb: 2 }} textAlign="center">
setRotationFromDegrees(value); Детали о достопримечательностях
} </Typography>
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
e.currentTarget.blur();
}
}}
style={{ backgroundColor: "#222", borderRadius: 4 }}
sx={{
"& .MuiInputLabel-root": {
color: "#fff",
},
"& .MuiInputBase-input": {
color: "#fff",
},
}}
slotProps={{
input: {
min: 0,
max: 360,
},
}}
/>
<Stack direction="row" spacing={2}> <Stack spacing={2} direction="row" alignItems="center">
<TextField <TextField
type="number" type="number"
label="Центр карты, широта" label="Минимальный масштаб"
variant="filled" variant="filled"
value={Math.round(localCenter.x * 100000) / 100000} value={minScale}
onChange={(e) => { onChange={(e) => setMinScale(Number(e.target.value))}
setLocalCenter((prev) => ({ ...prev, x: Number(e.target.value) })); style={{backgroundColor: "#222", borderRadius: 4}}
pan({ x: Number(e.target.value), y: localCenter.y }); sx={{
}} '& .MuiInputLabel-root.Mui-focused': {
style={{ backgroundColor: "#222", borderRadius: 4 }} color: "#fff"
sx={{ }
"& .MuiInputLabel-root": { }}
color: "#fff", slotProps={{
}, input: {
"& .MuiInputBase-input": { min: 0.1
color: "#fff", }
}, }}
}} />
/> <TextField
<TextField type="number"
type="number" label="Максимальный масштаб"
label="Центр карты, высота" variant="filled"
variant="filled" value={maxScale}
value={Math.round(localCenter.y * 100000) / 100000} onChange={(e) => setMaxScale(Number(e.target.value))}
onChange={(e) => { style={{backgroundColor: "#222", borderRadius: 4}}
setLocalCenter((prev) => ({ ...prev, y: Number(e.target.value) })); sx={{
pan({ x: localCenter.x, y: Number(e.target.value) }); '& .MuiInputLabel-root.Mui-focused': {
}} color: "#fff"
style={{ backgroundColor: "#222", borderRadius: 4 }} }
sx={{ }}
"& .MuiInputLabel-root": { slotProps={{
color: "#fff", input: {
}, min: 0.1
"& .MuiInputBase-input": { }
color: "#fff", }}
}, />
}} </Stack>
/>
</Stack>
<Button <TextField
variant="contained" type="number"
color="secondary" label="Поворот (в градусах)"
sx={{ mt: 2 }} variant="filled"
onClick={() => { value={rotationDegrees}
saveChanges(); onChange={(e) => {
}} const value = Number(e.target.value);
> if (!isNaN(value)) {
Сохранить изменения setRotationFromDegrees(value);
</Button> }
</Stack> }}
); onKeyDown={(e) => {
} if (e.key === 'Enter') {
e.currentTarget.blur();
}
}}
style={{backgroundColor: "#222", borderRadius: 4}}
sx={{
'& .MuiInputLabel-root.Mui-focused': {
color: "#fff"
}
}}
slotProps={{
input: {
min: 0,
max: 360
}
}}
/>
<Stack direction="row" spacing={2}>
<TextField
type="number"
label="Центр карты, широта"
variant="filled"
value={Math.round(localCenter.x*100000)/100000}
onChange={(e) => {
setLocalCenter(prev => ({...prev, x: Number(e.target.value)}))
pan({x: Number(e.target.value), y: localCenter.y});
}}
style={{backgroundColor: "#222", borderRadius: 4}}
sx={{
'& .MuiInputLabel-root.Mui-focused': {
color: "#fff"
}
}}
/>
<TextField
type="number"
label="Центр карты, высота"
variant="filled"
value={Math.round(localCenter.y*100000)/100000}
onChange={(e) => {
setLocalCenter(prev => ({...prev, y: Number(e.target.value)}))
pan({x: localCenter.x, y: Number(e.target.value)});
}}
style={{backgroundColor: "#222", borderRadius: 4}}
sx={{
'& .MuiInputLabel-root.Mui-focused': {
color: "#fff"
}
}}
/>
</Stack>
<Button
variant="contained"
color="secondary"
sx={{ mt: 2 }}
onClick={() => {
saveChanges();
}}
>
Сохранить изменения
</Button>
</Stack>
);
}

209
src/pages/route-preview/Station.tsx
View File

@ -1,148 +1,109 @@
import { FederatedMouseEvent, Graphics } from "pixi.js"; import { FederatedMouseEvent, Graphics } from "pixi.js";
import { import { BACKGROUND_COLOR, PATH_COLOR, STATION_RADIUS, STATION_OUTLINE_WIDTH, UP_SCALE } from "./Constants";
BACKGROUND_COLOR,
PATH_COLOR,
STATION_RADIUS,
STATION_OUTLINE_WIDTH,
UP_SCALE,
} from "./Constants";
import { useTransform } from "./TransformContext"; import { useTransform } from "./TransformContext";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { StationData } from "./types"; import { StationData } from "./types";
import { useMapData } from "./MapDataContext"; import { useMapData } from "./MapDataContext";
import { coordinatesToLocal } from "./utils"; import { coordinatesToLocal } from "./utils";
import { observer } from "mobx-react-lite";
import { languageStore } from "@stores";
interface StationProps { interface StationProps {
station: StationData; station: StationData;
ruLabel: string | null;
} }
export const Station = observer( export function Station({
({ station, ruLabel }: Readonly<StationProps>) => { station
const draw = useCallback((g: Graphics) => { }: Readonly<StationProps>) {
g.clear(); const draw = useCallback((g: Graphics) => {
const coordinates = coordinatesToLocal( g.clear();
station.latitude, const coordinates = coordinatesToLocal(station.latitude, station.longitude);
station.longitude g.circle(coordinates.x * UP_SCALE, coordinates.y * UP_SCALE, STATION_RADIUS);
); g.fill({color: PATH_COLOR});
g.circle( g.stroke({color: BACKGROUND_COLOR, width: STATION_OUTLINE_WIDTH});
coordinates.x * UP_SCALE, }, []);
coordinates.y * UP_SCALE,
STATION_RADIUS
);
g.fill({ color: PATH_COLOR });
g.stroke({ color: BACKGROUND_COLOR, width: STATION_OUTLINE_WIDTH });
}, []);
return ( return (
<pixiContainer> <pixiContainer>
<pixiGraphics draw={draw} /> <pixiGraphics draw={draw}/>
<StationLabel station={station} ruLabel={ruLabel} /> <StationLabel station={station}/>
</pixiContainer> </pixiContainer>
); );
} }
);
export const StationLabel = observer( export function StationLabel({
({ station, ruLabel }: Readonly<StationProps>) => { station
const { language } = languageStore; }: Readonly<StationProps>) {
const { rotation, scale } = useTransform(); const { rotation, scale } = useTransform();
const { setStationOffset } = useMapData(); const { setStationOffset } = useMapData();
const [position, setPosition] = useState({ const [position, setPosition] = useState({ x: station.offset_x, y: station.offset_y });
x: station.offset_x, const [isDragging, setIsDragging] = useState(false);
y: station.offset_y,
});
const [isDragging, setIsDragging] = useState(false);
const [startPosition, setStartPosition] = useState({ x: 0, y: 0 }); const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });
const [startMousePosition, setStartMousePosition] = useState({ const [startMousePosition, setStartMousePosition] = useState({ x: 0, y: 0 });
x: 0,
y: 0,
});
if (!station) { if(!station) {
console.error("station is null"); console.error("station is null");
return null; return null;
} }
const handlePointerDown = (e: FederatedMouseEvent) => { const handlePointerDown = (e: FederatedMouseEvent) => {
setIsDragging(true); setIsDragging(true);
setStartPosition({ setStartPosition({
x: position.x, x: position.x,
y: position.y, y: position.y
}); });
setStartMousePosition({ setStartMousePosition({
x: e.globalX, x: e.globalX,
y: e.globalY, y: e.globalY
}); });
e.stopPropagation(); e.stopPropagation();
}; };
const handlePointerMove = (e: FederatedMouseEvent) => { const handlePointerMove = (e: FederatedMouseEvent) => {
if (!isDragging) return; if (!isDragging) return;
const dx = e.globalX - startMousePosition.x; const dx = (e.globalX - startMousePosition.x);
const dy = e.globalY - startMousePosition.y; const dy = (e.globalY - startMousePosition.y);
const newPosition = { const newPosition = {
x: startPosition.x + dx, x: startPosition.x + dx,
y: startPosition.y + dy, y: startPosition.y + dy
}; };
setPosition(newPosition); setPosition(newPosition);
setStationOffset(station.id, newPosition.x, newPosition.y); setStationOffset(station.id, newPosition.x, newPosition.y);
e.stopPropagation(); e.stopPropagation();
}; };
const handlePointerUp = (e: FederatedMouseEvent) => { const handlePointerUp = (e: FederatedMouseEvent) => {
setIsDragging(false); setIsDragging(false);
e.stopPropagation(); e.stopPropagation();
}; };
const coordinates = coordinatesToLocal(station.latitude, station.longitude); const coordinates = coordinatesToLocal(station.latitude, station.longitude);
return ( return (
<pixiContainer <pixiContainer
eventMode="static" eventMode='static'
interactive interactive
onPointerDown={handlePointerDown} onPointerDown={handlePointerDown}
onGlobalPointerMove={handlePointerMove} onGlobalPointerMove={handlePointerMove}
onPointerUp={handlePointerUp} onPointerUp={handlePointerUp}
onPointerUpOutside={handlePointerUp} onPointerUpOutside={handlePointerUp}
width={48} width={48}
height={48} height={48}
x={coordinates.x * UP_SCALE} x={coordinates.x * UP_SCALE}
y={coordinates.y * UP_SCALE} y={coordinates.y * UP_SCALE}
rotation={-rotation} rotation={-rotation}
> >
<pixiText <pixiText
anchor={{ x: 0.5, y: 0.5 }} anchor={{x: 0.5, y: 0.5}}
text={station.name} text={station.name}
position={{ position={{
x: position.x / scale, x: position.x/scale,
y: position.y / scale, y: position.y/scale
}} }}
style={{ style={{
fontSize: 26, fontSize: 48,
fontWeight: "bold", fontWeight: 'bold',
fill: "#ffffff", fill: "#ffffff"
}} }}
/> />
</pixiContainer>
{ruLabel && ( );
<pixiText }
anchor={{ x: 0.5, y: -1 }}
text={ruLabel}
position={{
x: position.x / scale,
y: position.y / scale,
}}
style={{
fontSize: 16,
fontWeight: "bold",
fill: "#CCCCCC",
}}
/>
)}
</pixiContainer>
);
}
);

296
src/pages/route-preview/TransformContext.tsx
View File

@ -1,204 +1,150 @@
import { import { createContext, ReactNode, useContext, useMemo, useState } from "react";
createContext,
ReactNode,
useContext,
useMemo,
useState,
useCallback,
} from "react";
import { SCALE_FACTOR, UP_SCALE } from "./Constants"; import { SCALE_FACTOR, UP_SCALE } from "./Constants";
const TransformContext = createContext<{
position: { x: number; y: number };
scale: number;
rotation: number;
screenCenter?: { x: number; y: number };
setPosition: React.Dispatch<React.SetStateAction<{ x: number; y: number }>>; const TransformContext = createContext<{
setScale: React.Dispatch<React.SetStateAction<number>>; position: { x: number, y: number },
setRotation: React.Dispatch<React.SetStateAction<number>>; scale: number,
screenToLocal: (x: number, y: number) => { x: number; y: number }; rotation: number,
localToScreen: (x: number, y: number) => { x: number; y: number }; screenCenter?: { x: number, y: number },
rotateToAngle: (to: number, fromPosition?: { x: number; y: number }) => void;
setTransform: ( setPosition: React.Dispatch<React.SetStateAction<{ x: number, y: number }>>,
latitude: number, setScale: React.Dispatch<React.SetStateAction<number>>,
longitude: number, setRotation: React.Dispatch<React.SetStateAction<number>>,
rotationDegrees?: number, screenToLocal: (x: number, y: number) => { x: number, y: number },
scale?: number localToScreen: (x: number, y: number) => { x: number, y: number },
) => void; rotateToAngle: (to: number, fromPosition?: {x: number, y: number}) => void,
setScreenCenter: React.Dispatch< setTransform: (latitude: number, longitude: number, rotationDegrees?: number, scale?: number) => void,
React.SetStateAction<{ x: number; y: number } | undefined> setScreenCenter: React.Dispatch<React.SetStateAction<{ x: number, y: number } | undefined>>
>;
}>({ }>({
position: { x: 0, y: 0 }, position: { x: 0, y: 0 },
scale: 1, scale: 1,
rotation: 0, rotation: 0,
screenCenter: undefined, screenCenter: undefined,
setPosition: () => {}, setPosition: () => {},
setScale: () => {}, setScale: () => {},
setRotation: () => {}, setRotation: () => {},
screenToLocal: () => ({ x: 0, y: 0 }), screenToLocal: () => ({ x: 0, y: 0 }),
localToScreen: () => ({ x: 0, y: 0 }), localToScreen: () => ({ x: 0, y: 0 }),
rotateToAngle: () => {}, rotateToAngle: () => {},
setTransform: () => {}, setTransform: () => {},
setScreenCenter: () => {}, setScreenCenter: () => {}
}); });
// Provider component // Provider component
export const TransformProvider = ({ children }: { children: ReactNode }) => { export const TransformProvider = ({ children }: { children: ReactNode }) => {
const [position, setPosition] = useState({ x: 0, y: 0 }); const [position, setPosition] = useState({ x: 0, y: 0 });
const [scale, setScale] = useState(1); const [scale, setScale] = useState(1);
const [rotation, setRotation] = useState(0); const [rotation, setRotation] = useState(0);
const [screenCenter, setScreenCenter] = useState<{ x: number; y: number }>(); const [screenCenter, setScreenCenter] = useState<{x: number, y: number}>();
const screenToLocal = useCallback( function screenToLocal(screenX: number, screenY: number) {
(screenX: number, screenY: number) => { // Translate point relative to current pan position
// Translate point relative to current pan position const translatedX = (screenX - position.x) / scale;
const translatedX = (screenX - position.x) / scale; const translatedY = (screenY - position.y) / scale;
const translatedY = (screenY - position.y) / scale;
// Rotate point around center // Rotate point around center
const cosRotation = Math.cos(-rotation); // Negative rotation to reverse transform const cosRotation = Math.cos(-rotation); // Negative rotation to reverse transform
const sinRotation = Math.sin(-rotation); const sinRotation = Math.sin(-rotation);
const rotatedX = translatedX * cosRotation - translatedY * sinRotation; const rotatedX = translatedX * cosRotation - translatedY * sinRotation;
const rotatedY = translatedX * sinRotation + translatedY * cosRotation; const rotatedY = translatedX * sinRotation + translatedY * cosRotation;
return { return {
x: rotatedX / UP_SCALE, x: rotatedX / UP_SCALE,
y: rotatedY / UP_SCALE, y: rotatedY / UP_SCALE
}; };
}, }
[position.x, position.y, scale, rotation]
);
// Inverse of screenToLocal // Inverse of screenToLocal
const localToScreen = useCallback( function localToScreen(localX: number, localY: number) {
(localX: number, localY: number) => {
const upscaledX = localX * UP_SCALE;
const upscaledY = localY * UP_SCALE;
const cosRotation = Math.cos(rotation); const upscaledX = localX * UP_SCALE;
const sinRotation = Math.sin(rotation); const upscaledY = localY * UP_SCALE;
const rotatedX = upscaledX * cosRotation - upscaledY * sinRotation;
const rotatedY = upscaledX * sinRotation + upscaledY * cosRotation;
const translatedX = rotatedX * scale + position.x; const cosRotation = Math.cos(rotation);
const translatedY = rotatedY * scale + position.y; const sinRotation = Math.sin(rotation);
const rotatedX = upscaledX * cosRotation - upscaledY * sinRotation;
const rotatedY = upscaledX * sinRotation + upscaledY * cosRotation;
return { const translatedX = rotatedX*scale + position.x;
x: translatedX, const translatedY = rotatedY*scale + position.y;
y: translatedY,
};
},
[position.x, position.y, scale, rotation]
);
const rotateToAngle = useCallback( return {
(to: number, fromPosition?: { x: number; y: number }) => { x: translatedX,
const rotationDiff = to - rotation; y: translatedY
};
}
const center = screenCenter ?? { x: 0, y: 0 };
const cosDelta = Math.cos(rotationDiff);
const sinDelta = Math.sin(rotationDiff);
const currentFromPosition = fromPosition ?? position; function rotateToAngle(to: number, fromPosition?: {x: number, y: number}) {
setRotation(to);
const rotationDiff = to - rotation;
const center = screenCenter ?? {x: 0, y: 0};
const cosDelta = Math.cos(rotationDiff);
const sinDelta = Math.sin(rotationDiff);
const newPosition = { fromPosition ??= position;
x:
center.x * (1 - cosDelta) +
currentFromPosition.x * cosDelta +
(center.y - currentFromPosition.y) * sinDelta,
y:
center.y * (1 - cosDelta) +
currentFromPosition.y * cosDelta +
(currentFromPosition.x - center.x) * sinDelta,
};
// Update both rotation and position in a single batch to avoid stale closure setPosition({
setRotation(to); x: center.x * (1 - cosDelta) + fromPosition.x * cosDelta + (center.y - fromPosition.y) * sinDelta,
setPosition(newPosition); y: center.y * (1 - cosDelta) + fromPosition.y * cosDelta + (fromPosition.x - center.x) * sinDelta
}, });
[rotation, position, screenCenter] }
);
const setTransform = useCallback( function setTransform(latitude: number, longitude: number, rotationDegrees?: number, useScale ?: number) {
( const selectedRotation = rotationDegrees ? (rotationDegrees * Math.PI / 180) : rotation;
latitude: number, const selectedScale = useScale ? useScale/SCALE_FACTOR : scale;
longitude: number, const center = screenCenter ?? {x: 0, y: 0};
rotationDegrees?: number, console.log("center", center.x, center.y);
useScale?: number const newPosition = {
) => { x: -latitude * UP_SCALE * selectedScale,
const selectedRotation = y: -longitude * UP_SCALE * selectedScale
rotationDegrees !== undefined };
? (rotationDegrees * Math.PI) / 180
: rotation;
const selectedScale =
useScale !== undefined ? useScale / SCALE_FACTOR : scale;
const center = screenCenter ?? { x: 0, y: 0 };
console.log("center", center.x, center.y); const cos = Math.cos(selectedRotation);
const sin = Math.sin(selectedRotation);
// Translate point relative to center, rotate, then translate back
const dx = newPosition.x;
const dy = newPosition.y;
newPosition.x = (dx * cos - dy * sin) + center.x;
newPosition.y = (dx * sin + dy * cos) + center.y;
const newPosition = {
x: -latitude * UP_SCALE * selectedScale, setPosition(newPosition);
y: -longitude * UP_SCALE * selectedScale, setRotation(selectedRotation);
}; setScale(selectedScale);
}
const cosRot = Math.cos(selectedRotation); const value = useMemo(() => ({
const sinRot = Math.sin(selectedRotation); position,
scale,
rotation,
screenCenter,
setPosition,
setScale,
setRotation,
rotateToAngle,
screenToLocal,
localToScreen,
setTransform,
setScreenCenter
}), [position, scale, rotation, screenCenter]);
// Translate point relative to center, rotate, then translate back return (
const dx = newPosition.x; <TransformContext.Provider value={value}>
const dy = newPosition.y; {children}
newPosition.x = dx * cosRot - dy * sinRot + center.x; </TransformContext.Provider>
newPosition.y = dx * sinRot + dy * cosRot + center.y; );
// Batch state updates to avoid intermediate renders
setPosition(newPosition);
setRotation(selectedRotation);
setScale(selectedScale);
},
[rotation, scale, screenCenter]
);
const value = useMemo(
() => ({
position,
scale,
rotation,
screenCenter,
setPosition,
setScale,
setRotation,
rotateToAngle,
screenToLocal,
localToScreen,
setTransform,
setScreenCenter,
}),
[
position,
scale,
rotation,
screenCenter,
rotateToAngle,
screenToLocal,
localToScreen,
setTransform,
]
);
return (
<TransformContext.Provider value={value}>
{children}
</TransformContext.Provider>
);
}; };
// Custom hook for easy access to transform values // Custom hook for easy access to transform values
export const useTransform = () => { export const useTransform = () => {
const context = useContext(TransformContext); const context = useContext(TransformContext);
if (!context) { if (!context) {
throw new Error("useTransform must be used within a TransformProvider"); throw new Error('useTransform must be used within a TransformProvider');
} }
return context; return context;
}; };

53
src/pages/route-preview/TravelPath.tsx
View File

@ -3,32 +3,37 @@ import { useCallback } from "react";
import { PATH_COLOR, PATH_WIDTH } from "./Constants"; import { PATH_COLOR, PATH_WIDTH } from "./Constants";
import { coordinatesToLocal } from "./utils"; import { coordinatesToLocal } from "./utils";
interface TravelPathProps { interface TravelPathProps {
points: { x: number; y: number }[]; points: {x: number, y: number}[];
} }
export function TravelPath({ points }: Readonly<TravelPathProps>) { export function TravelPath({
const draw = useCallback( points
(g: Graphics) => { }: Readonly<TravelPathProps>) {
g.clear();
const coordStart = coordinatesToLocal(points[0].x, points[0].y);
g.moveTo(coordStart.x, coordStart.y);
for (let i = 1; i <= points.length - 1; i++) {
const coordinates = coordinatesToLocal(points[i].x, points[i].y);
g.lineTo(coordinates.x, coordinates.y);
}
g.stroke({
color: PATH_COLOR,
width: PATH_WIDTH,
});
},
[points]
);
if (points.length === 0) { const draw = useCallback((g: Graphics) => {
console.error("points is empty"); g.clear();
return null; const coordStart = coordinatesToLocal(points[0].x, points[0].y);
} g.moveTo(coordStart.x, coordStart.y);
for (let i = 1; i < points.length - 1; i++) {
const coordinates = coordinatesToLocal(points[i].x, points[i].y);
g.lineTo(coordinates.x, coordinates.y);
}
g.stroke({
color: PATH_COLOR,
width: PATH_WIDTH
});
}, [points]);
return <pixiGraphics draw={draw} />; if(points.length === 0) {
} console.error("points is empty");
return null;
}
return (
<pixiGraphics
draw={draw}
/>
);
}

66
src/pages/route-preview/Widgets.tsx
View File

@ -1,43 +1,31 @@
import { Stack, Typography } from "@mui/material"; import { Stack, Typography } from "@mui/material";
export function Widgets() { export function Widgets() {
return ( return (
<Stack <Stack
direction="column" direction="column" spacing={2}
spacing={2} position="absolute"
position="absolute" top={32} left={32}
top={32} sx={{ pointerEvents: 'none' }}
left={32} >
sx={{ pointerEvents: "none" }} <Stack bgcolor="primary.main"
> width={361} height={96}
<Stack p={2} m={2}
bgcolor="primary.main" borderRadius={2}
width={361} alignItems="center"
height={96} justifyContent="center"
p={2} >
m={2} <Typography variant="h6">Станция</Typography>
borderRadius={2} </Stack>
alignItems="center" <Stack bgcolor="primary.main"
justifyContent="center" width={223} height={262}
> p={2} m={2}
<Typography variant="h6" sx={{ color: "#fff" }}> borderRadius={2}
Станция alignItems="center"
</Typography> justifyContent="center"
</Stack> >
<Stack <Typography variant="h6">Погода</Typography>
bgcolor="primary.main" </Stack>
width={223} </Stack>
height={262} )
p={2}
m={2}
borderRadius={2}
alignItems="center"
justifyContent="center"
>
<Typography variant="h6" sx={{ color: "#fff" }}>
Погода
</Typography>
</Stack>
</Stack>
);
} }

264
src/pages/route-preview/index.tsx
View File

@ -1,14 +1,18 @@
import { useRef, useEffect, useState } from "react"; import { useRef, useEffect, useState } from "react";
import { Application, ApplicationRef, extend } from "@pixi/react";
import { import {
Container, Application,
Graphics, ApplicationRef,
Sprite, extend
Texture, } from '@pixi/react';
TilingSprite, import {
Text, Container,
} from "pixi.js"; Graphics,
Sprite,
Texture,
TilingSprite,
Text
} from 'pixi.js';
import { Stack } from "@mui/material"; import { Stack } from "@mui/material";
import { MapDataProvider, useMapData } from "./MapDataContext"; import { MapDataProvider, useMapData } from "./MapDataContext";
import { TransformProvider, useTransform } from "./TransformContext"; import { TransformProvider, useTransform } from "./TransformContext";
@ -21,152 +25,128 @@ import { LeftSidebar } from "./LeftSidebar";
import { RightSidebar } from "./RightSidebar"; import { RightSidebar } from "./RightSidebar";
import { Widgets } from "./Widgets"; import { Widgets } from "./Widgets";
import { coordinatesToLocal } from "./utils"; import { coordinatesToLocal } from "./utils";
import { LanguageSwitch } from "@/components/LanguageSwitch";
import { languageStore } from "@stores";
import { observer } from "mobx-react-lite";
extend({ extend({
Container, Container,
Graphics, Graphics,
Sprite, Sprite,
Texture, Texture,
TilingSprite, TilingSprite,
Text, Text
}); });
export const RoutePreview = () => { export const RoutePreview = () => {
return ( return (
<MapDataProvider> <MapDataProvider>
<TransformProvider> <TransformProvider>
<Stack direction="row" height="100vh" width="100vw" overflow="hidden"> <Stack direction="row" height="100vh" width="100vw" overflow="hidden">
<div <LeftSidebar />
style={{ <Stack direction="row" flex={1} position="relative" height="100%">
position: "absolute", <Widgets />
top: 0, <RouteMap />
left: "50%", <RightSidebar />
transform: "translateX(-50%)", </Stack>
zIndex: 1000,
}} </Stack>
> </TransformProvider>
<LanguageSwitch /> </MapDataProvider>
</div> );
<LeftSidebar />
<Stack direction="row" flex={1} position="relative" height="100%">
<Widgets />
<RouteMap />
<RightSidebar />
</Stack>
</Stack>
</TransformProvider>
</MapDataProvider>
);
}; };
export const RouteMap = observer(() => {
const { language } = languageStore;
const { setPosition, screenToLocal, setTransform, screenCenter } =
useTransform();
const { routeData, stationData, sightData, originalRouteData } = useMapData();
console.log(stationData);
const [points, setPoints] = useState<{ x: number; y: number }[]>([]);
const [isSetup, setIsSetup] = useState(false);
const parentRef = useRef<HTMLDivElement>(null); export function RouteMap() {
const { setPosition, screenToLocal, setTransform, screenCenter } = useTransform();
const {
routeData, stationData, sightData, originalRouteData
} = useMapData();
const [points, setPoints] = useState<{x: number, y: number}[]>([]);
const [isSetup, setIsSetup] = useState(false);
const parentRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (originalRouteData) {
const path = originalRouteData?.path;
const points = path?.map(([x, y]: [number, number]) => ({x: x * UP_SCALE, y: y * UP_SCALE})) ?? [];
setPoints(points);
}
}, [originalRouteData]);
useEffect(() => { useEffect(() => {
if (originalRouteData) { if(isSetup || !screenCenter) {
const path = originalRouteData?.path; return;
const points = }
path?.map(([x, y]: [number, number]) => ({
x: x * UP_SCALE,
y: y * UP_SCALE,
})) ?? [];
setPoints(points);
}
}, [originalRouteData]);
useEffect(() => { if (
if (isSetup || !screenCenter) { originalRouteData?.center_latitude === originalRouteData?.center_longitude &&
return; originalRouteData?.center_latitude === 0
} ) {
if (points.length > 0) {
let boundingBox = {
from: {x: Infinity, y: Infinity},
to: {x: -Infinity, y: -Infinity}
};
for (const point of points) {
boundingBox.from.x = Math.min(boundingBox.from.x, point.x);
boundingBox.from.y = Math.min(boundingBox.from.y, point.y);
boundingBox.to.x = Math.max(boundingBox.to.x, point.x);
boundingBox.to.y = Math.max(boundingBox.to.y, point.y);
}
const newCenter = {
x: -(boundingBox.from.x + boundingBox.to.x) / 2,
y: -(boundingBox.from.y + boundingBox.to.y) / 2
};
setPosition(newCenter);
setIsSetup(true);
}
} else if (
originalRouteData?.center_latitude &&
originalRouteData?.center_longitude
) {
const coordinates = coordinatesToLocal(originalRouteData?.center_latitude, originalRouteData?.center_longitude);
setTransform(
coordinates.x,
coordinates.y,
originalRouteData?.rotate,
originalRouteData?.scale_min
);
setIsSetup(true);
}
}, [points, originalRouteData?.center_latitude, originalRouteData?.center_longitude, originalRouteData?.rotate, isSetup, screenCenter]);
if (
originalRouteData?.center_latitude ===
originalRouteData?.center_longitude &&
originalRouteData?.center_latitude === 0
) {
if (points.length > 0) {
let boundingBox = {
from: { x: Infinity, y: Infinity },
to: { x: -Infinity, y: -Infinity },
};
for (const point of points) {
boundingBox.from.x = Math.min(boundingBox.from.x, point.x);
boundingBox.from.y = Math.min(boundingBox.from.y, point.y);
boundingBox.to.x = Math.max(boundingBox.to.x, point.x);
boundingBox.to.y = Math.max(boundingBox.to.y, point.y);
}
const newCenter = {
x: -(boundingBox.from.x + boundingBox.to.x) / 2,
y: -(boundingBox.from.y + boundingBox.to.y) / 2,
};
setPosition(newCenter);
setIsSetup(true);
}
} else if (
originalRouteData?.center_latitude &&
originalRouteData?.center_longitude
) {
const coordinates = coordinatesToLocal(
originalRouteData?.center_latitude,
originalRouteData?.center_longitude
);
setTransform( if (!routeData || !stationData || !sightData) {
coordinates.x, console.error("routeData, stationData or sightData is null");
coordinates.y, return <div>Loading...</div>;
originalRouteData?.rotate, }
originalRouteData?.scale_min
);
setIsSetup(true);
}
}, [
points,
originalRouteData?.center_latitude,
originalRouteData?.center_longitude,
originalRouteData?.rotate,
isSetup,
screenCenter,
]);
if (!routeData || !stationData || !sightData) {
console.error("routeData, stationData or sightData is null");
return <div>Loading...</div>;
}
return ( return (
<div style={{ width: "100%", height: "100%" }} ref={parentRef}> <div style={{width: "100%", height:"100%"}} ref={parentRef}>
<Application resizeTo={parentRef} background="#fff"> <Application
<InfiniteCanvas> resizeTo={parentRef}
<TravelPath points={points} /> background="#fff"
{stationData[language].map((obj, index) => ( >
<Station <InfiniteCanvas>
station={obj} <TravelPath points={points}/>
key={obj.id} {stationData?.map((obj) => (
ruLabel={language === "ru" ? null : stationData.ru[index].name} <Station station={obj} key={obj.id}/>
/> ))}
))} {sightData?.map((obj, index) => (
<Sight sight={obj} id={index} key={obj.id}/>
))}
<pixiGraphics <pixiGraphics
draw={(g) => { draw={(g) => {
g.clear(); g.clear();
const localCenter = screenToLocal(0, 0); const localCenter = screenToLocal(0,0);
g.circle(localCenter.x, localCenter.y, 10); g.circle(localCenter.x, localCenter.y, 10);
g.fill("#fff"); g.fill("#fff");
}} }}
/> />
</InfiniteCanvas> </InfiniteCanvas>
</Application> </Application>
</div> </div>
); )
}); }

16
src/pages/route/create.tsx
View File

@ -280,19 +280,13 @@ export const RouteCreate = () => {
<TextField <TextField
{...register("scale_min", { {...register("scale_min", {
// required: 'Это поле является обязательным', // required: 'Это поле является обязательным',
setValueAs: (value) => { setValueAs: (value) => Number(value),
if (Number(value) < 0) {
return 0;
}
return Number(value);
},
})} })}
error={!!(errors as any)?.scale_min} error={!!(errors as any)?.scale_min}
helperText={(errors as any)?.scale_min?.message} helperText={(errors as any)?.scale_min?.message}
margin="normal" margin="normal"
fullWidth fullWidth
slotProps={{ inputLabel: { shrink: true } }} slotProps={{ inputLabel: { shrink: true } }}
inputProps={{ min: 0 }}
type="number" type="number"
label={"Масштаб (мин)"} label={"Масштаб (мин)"}
name="scale_min" name="scale_min"
@ -301,19 +295,13 @@ export const RouteCreate = () => {
<TextField <TextField
{...register("scale_max", { {...register("scale_max", {
// required: 'Это поле является обязательным', // required: 'Это поле является обязательным',
setValueAs: (value) => { setValueAs: (value) => Number(value),
if (Number(value) < 0) {
return 0;
}
return Number(value);
},
})} })}
error={!!(errors as any)?.scale_max} error={!!(errors as any)?.scale_max}
helperText={(errors as any)?.scale_max?.message} helperText={(errors as any)?.scale_max?.message}
margin="normal" margin="normal"
fullWidth fullWidth
slotProps={{ inputLabel: { shrink: true } }} slotProps={{ inputLabel: { shrink: true } }}
inputProps={{ min: 0 }}
type="number" type="number"
label={"Масштаб (макс)"} label={"Масштаб (макс)"}
name="scale_max" name="scale_max"

28
src/pages/route/edit.tsx
View File

@ -9,7 +9,7 @@ import {
} from "@mui/material"; } from "@mui/material";
import { Edit, useAutocomplete } from "@refinedev/mui"; import { Edit, useAutocomplete } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form"; import { useForm } from "@refinedev/react-hook-form";
import { Controller, useWatch } from "react-hook-form"; import { Controller } from "react-hook-form";
import { useNavigate, useParams } from "react-router"; import { useNavigate, useParams } from "react-router";
import { LinkedItems } from "../../components/LinkedItems"; import { LinkedItems } from "../../components/LinkedItems";
import { import {
@ -76,11 +76,6 @@ export const RouteEdit = observer(() => {
...META_LANGUAGE(language), ...META_LANGUAGE(language),
}); });
const carrierId = useWatch({ control, name: "carrier_id" });
const cityId = carrierAutocompleteProps.options.find(
(option) => option.id === carrierId
)?.city_id;
const { autocompleteProps: governorAppealAutocompleteProps } = const { autocompleteProps: governorAppealAutocompleteProps } =
useAutocomplete({ useAutocomplete({
resource: "article", resource: "article",
@ -317,12 +312,7 @@ export const RouteEdit = observer(() => {
<TextField <TextField
{...register("scale_min", { {...register("scale_min", {
// required: 'Это поле является обязательным', // required: 'Это поле является обязательным',
setValueAs: (value) => { setValueAs: (value) => Number(value),
if (Number(value) < 0) {
return 0;
}
return Number(value);
},
})} })}
error={!!(errors as any)?.scale_min} error={!!(errors as any)?.scale_min}
helperText={(errors as any)?.scale_min?.message} helperText={(errors as any)?.scale_min?.message}
@ -337,12 +327,7 @@ export const RouteEdit = observer(() => {
<TextField <TextField
{...register("scale_max", { {...register("scale_max", {
// required: 'Это поле является обязательным', // required: 'Это поле является обязательным',
setValueAs: (value) => { setValueAs: (value) => Number(value),
if (Number(value) < 0) {
return 0;
}
return Number(value);
},
})} })}
error={!!(errors as any)?.scale_max} error={!!(errors as any)?.scale_max}
helperText={(errors as any)?.scale_max?.message} helperText={(errors as any)?.scale_max?.message}
@ -408,19 +393,18 @@ export const RouteEdit = observer(() => {
parentResource="route" parentResource="route"
childResource="station" childResource="station"
fields={stationFields} fields={stationFields}
title="остановки" title="станции"
dragAllowed={true} dragAllowed={true}
cityId={cityId}
/> />
{/* <LinkedItems<VehicleItem> <LinkedItems<VehicleItem>
type="edit" type="edit"
parentId={routeId} parentId={routeId}
parentResource="route" parentResource="route"
childResource="vehicle" childResource="vehicle"
fields={vehicleFields} fields={vehicleFields}
title="транспортные средства" title="транспортные средства"
/> */} />
</> </>
)} )}

13
src/pages/route/show.tsx
View File

@ -80,17 +80,17 @@ export const RouteShow = observer(() => {
parentResource="route" parentResource="route"
childResource="station" childResource="station"
fields={stationFields} fields={stationFields}
title="остановки" title="станции"
/> />
{/* <LinkedItems<VehicleItem> <LinkedItems<VehicleItem>
type="show" type="show"
parentId={record.id} parentId={record.id}
parentResource="route" parentResource="route"
childResource="vehicle" childResource="vehicle"
fields={vehicleFields} fields={vehicleFields}
title="транспортные средства" title="транспортные средства"
/> */} />
<LinkedItems<SightItem> <LinkedItems<SightItem>
type="show" type="show"
@ -103,9 +103,10 @@ export const RouteShow = observer(() => {
</> </>
)} )}
<Box sx={{ display: "flex", justifyContent: "flex-start" }}>
<Button <Box sx={{ display: 'flex', justifyContent: 'flex-start' }}>
variant="contained" <Button
variant="contained"
color="primary" color="primary"
onClick={() => navigate(`/route-preview/${id}`)} onClick={() => navigate(`/route-preview/${id}`)}
> >

4
src/pages/sight/create.tsx
View File

@ -433,7 +433,7 @@ export const SightCreate = observer(() => {
renderInput={(params) => ( renderInput={(params) => (
<TextField <TextField
{...params} {...params}
label="Выберите водяной знак (Левый верх)" label="Выберите водный знак (Левый верх)"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
error={!!errors.watermark_lu} error={!!errors.watermark_lu}
@ -475,7 +475,7 @@ export const SightCreate = observer(() => {
renderInput={(params) => ( renderInput={(params) => (
<TextField <TextField
{...params} {...params}
label="Выберите водяной знак (Правый верх)" label="Выберите водный знак (Правый верх)"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
error={!!errors.watermark_rd} error={!!errors.watermark_rd}

8
src/pages/sight/edit.tsx
View File

@ -606,7 +606,7 @@ export const SightEdit = observer(() => {
renderInput={(params) => ( renderInput={(params) => (
<TextField <TextField
{...params} {...params}
label="Выберите водяной знак (Левый верх)" label="Выберите водный знак (Левый верх)"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
error={!!errors.arms} error={!!errors.arms}
@ -650,7 +650,7 @@ export const SightEdit = observer(() => {
renderInput={(params) => ( renderInput={(params) => (
<TextField <TextField
{...params} {...params}
label="Выберите водяной знак (Правый вверх)" label="Выберите водный знак (Правый вверх)"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
error={!!errors.arms} error={!!errors.arms}
@ -1479,7 +1479,7 @@ export const SightEdit = observer(() => {
renderInput={(params) => ( renderInput={(params) => (
<TextField <TextField
{...params} {...params}
label="Выберите водяной знак (Левый верх)" label="Выберите водный знак (Левый верх)"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
error={!!errors.arms} error={!!errors.arms}
@ -1523,7 +1523,7 @@ export const SightEdit = observer(() => {
renderInput={(params) => ( renderInput={(params) => (
<TextField <TextField
{...params} {...params}
label="Выберите водяной знак (Правый вверх)" label="Выберите водный знак (Правый вверх)"
margin="normal" margin="normal"
variant="outlined" variant="outlined"
error={!!errors.arms} error={!!errors.arms}

3
src/pages/station/edit.tsx
View File

@ -192,8 +192,6 @@ export const StationEdit = observer(() => {
}, },
}); });
const cityId = watch("city_id");
return ( return (
<Edit saveButtonProps={saveButtonProps}> <Edit saveButtonProps={saveButtonProps}>
<Box <Box
@ -355,7 +353,6 @@ export const StationEdit = observer(() => {
fields={sightFields} fields={sightFields}
title="достопримечательности" title="достопримечательности"
dragAllowed={false} dragAllowed={false}
cityId={cityId}
/> />
)} )}
</Edit> </Edit>

63
src/pages/vehicle/list.tsx
View File

@ -7,41 +7,14 @@ import {
ShowButton, ShowButton,
useDataGrid, useDataGrid,
} from "@refinedev/mui"; } from "@refinedev/mui";
import React, { useEffect, useState } from "react"; import React, { useEffect } from "react";
import { VEHICLE_TYPES } from "../../lib/constants"; import { VEHICLE_TYPES } from "../../lib/constants";
import { localeText } from "../../locales/ru/localeText"; import { localeText } from "../../locales/ru/localeText";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { languageStore } from "../../store/LanguageStore"; import { languageStore } from "../../store/LanguageStore";
import { axiosInstance } from "@providers";
export const VehicleList = observer(() => { export const VehicleList = observer(() => {
const [carriers, setCarriers] = useState<any[]>([]);
const [cities, setCities] = useState<any[]>([]);
useEffect(() => {
axiosInstance
.get("/carrier")
.then((res) => {
setCarriers(res.data);
})
.catch((err) => {
console.log(err);
});
}, []);
useEffect(() => {
axiosInstance
.get("/city")
.then((res) => {
setCities(res.data);
})
.catch((err) => {
console.log(err);
});
}, []);
const { language } = languageStore; const { language } = languageStore;
const { dataGridProps } = useDataGrid({ const { dataGridProps } = useDataGrid({
@ -98,36 +71,6 @@ export const VehicleList = observer(() => {
); );
}, },
}, },
{
field: "carrier-name",
headerName: "Перевозчик",
type: "string",
minWidth: 150,
display: "flex",
align: "left",
headerAlign: "left",
renderCell: (params) => {
const value = params.row.carrier_id;
return carriers.find((carrier) => carrier.id === value)?.full_name;
},
},
{
field: "city-name",
headerName: "Город",
type: "string",
minWidth: 150,
display: "flex",
align: "left",
headerAlign: "left",
renderCell: (params) => {
const value = params.row.carrier_id;
return cities.find(
(city) =>
city.id ===
carriers.find((carrier) => carrier.id === value)?.city_id
)?.name;
},
},
// { // {
// field: "city", // field: "city",
// headerName: "Город", // headerName: "Город",
@ -150,7 +93,7 @@ export const VehicleList = observer(() => {
return ( return (
<> <>
<EditButton hideText recordItemId={row.id} /> <EditButton hideText recordItemId={row.id} />
{/* <ShowButton hideText recordItemId={row.id} /> */} <ShowButton hideText recordItemId={row.id} />
<DeleteButton <DeleteButton
hideText hideText
confirmTitle="Вы уверены?" confirmTitle="Вы уверены?"
@ -161,7 +104,7 @@ export const VehicleList = observer(() => {
}, },
}, },
], ],
[carriers, cities] []
); );
return ( return (

18
src/providers/data.ts
View File

@ -3,7 +3,7 @@ import dataProvider from "@refinedev/simple-rest";
import { TOKEN_KEY } from "@providers"; import { TOKEN_KEY } from "@providers";
import axios from "axios"; import axios from "axios";
import { languageStore } from "@stores";
export const axiosInstance = axios.create({ export const axiosInstance = axios.create({
baseURL: import.meta.env.VITE_KRBL_API, baseURL: import.meta.env.VITE_KRBL_API,
}); });
@ -22,22 +22,6 @@ axiosInstance.interceptors.request.use((config) => {
return config; return config;
}); });
export const axiosInstanceForGet = (language: string) => {
const axiosInstance = axios.create({
baseURL: import.meta.env.VITE_KRBL_API,
});
axiosInstance.interceptors.request.use((config) => {
const token = localStorage.getItem(TOKEN_KEY);
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
config.headers["X-Language"] = language;
return config;
});
return axiosInstance;
};
const apiUrl = import.meta.env.VITE_KRBL_API; const apiUrl = import.meta.env.VITE_KRBL_API;
export const customDataProvider = dataProvider(apiUrl, axiosInstance); export const customDataProvider = dataProvider(apiUrl, axiosInstance);