feat: Add service_name for article list

fix: Fix station create page
fix: Try to fix dockerfile
2025-05-26 17:24:04 +03:00 · 2025-05-25 23:16:33 +03:00 · 2025-05-25 20:20:09 +03:00 · 2025-05-25 20:10:23 +03:00 · 2025-05-25 19:43:38 +03:00 · 2025-05-21 18:31:19 +03:00
35 changed files with 1185 additions and 1867 deletions
--- a/index.html
+++ b/index.html
@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <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="theme-color" content="#000000" />
    <meta
@ -19,7 +19,9 @@
      name="twitter:image"
      content="https://refine.dev/img/refine_social.png"
    />
-    <title>Белые ночи</title>
+    <title>
      Белые ночи
    </title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon_ship.png
+++ b/public/favicon_ship.png
--- a/src/components/LinkedItems.tsx
+++ b/src/components/LinkedItems.tsx
@ -70,7 +70,6 @@ type LinkedItemsProps<T> = {
  disableCreation?: boolean;
  updatedLinkedItems?: T[];
  refresh?: number;
  cityId?: number;
 };
 const reorder = (list: any[], startIndex: number, endIndex: number) => {
@ -132,7 +131,6 @@ export const LinkedItemsContents = <
  disableCreation = false,
  updatedLinkedItems,
  refresh,
  cityId,
 }: LinkedItemsProps<T>) => {
  const { language } = languageStore;
  const { setArticleModalOpenAction, setArticleIdAction } = articleStore;
@ -218,7 +216,7 @@ export const LinkedItemsContents = <
  useEffect(() => {
    if (type === "edit") {
      axiosInstance
-        .get(`${import.meta.env.VITE_KRBL_API}/${childResource}/`, {})
+        .get(`${import.meta.env.VITE_KRBL_API}/${childResource}/`)
        .then((response) => {
          setItems(response?.data || []);
          setIsLoading(false);
@ -447,7 +445,7 @@ export const LinkedItemsContents = <
              availableItems?.find((item) => item.id === selectedItemId) || null
            }
            onChange={(_, newValue) => setSelectedItemId(newValue?.id || null)}
-            options={availableItems.filter((item) => item.city_id == cityId)}
+            options={availableItems}
            getOptionLabel={(item) => String(item[fields[0].data])}
            renderInput={(params) => (
              <TextField {...params} label={`Выберите ${title}`} fullWidth />
@ -458,7 +456,6 @@ export const LinkedItemsContents = <
                .toLowerCase()
                .split(" ")
                .filter((word) => word.length > 0);
              return options.filter((option) => {
                const optionWords = String(option[fields[0].data])
                  .toLowerCase()
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@ -143,17 +143,8 @@ export const Header: React.FC<RefineThemedLayoutV2HeaderProps> = observer(
              justifyContent="flex-end"
              alignItems="center"
              spacing={2}
              color="white"
              sx={{
                "& .MuiSelect-select": {
                  color: "white",
                },
              }}
            >
              <FormControl
                variant="standard"
                sx={{ width: "min-content", color: "white" }}
            >
              <FormControl variant="standard" sx={{ width: "min-content" }}>
                {city_id && cities && (
                  <Select
                    defaultValue={city_id}
--- a/src/components/modals/StationEditModal/index.tsx
+++ b/src/components/modals/StationEditModal/index.tsx
@ -121,7 +121,7 @@ export const StationEditModal = observer(() => {
    >
      <Box sx={style}>
        <Edit
-          title={<Typography variant="h5">Редактирование остановки</Typography>}
+          title={<Typography variant="h5">Редактирование станции</Typography>}
          saveButtonProps={saveButtonProps}
        >
          <Box
--- a/src/components/ui/MediaView.tsx
+++ b/src/components/ui/MediaView.tsx
@ -15,9 +15,9 @@ export function MediaView({ media }: Readonly<{ media?: MediaData }>) {
    <Box
      sx={{
        maxHeight: "300px",
-        width: "80%",
+        width: "100%",
        height: "100%",
-        maxWidth: "600px",
+        maxWidth: "300px",
        display: "flex",
        flexGrow: 1,
        justifyContent: "center",
--- a/src/components/ui/SidebarTitle.tsx
+++ b/src/components/ui/SidebarTitle.tsx
@ -1,15 +1,11 @@
-import { Logo } from "@/icons/Logo";
+import {ProjectIcon} from './Icons'
 export default function SidebarTitle({collapsed}: {collapsed: boolean}) {
  return (
-    <div
+    <div style={{display: 'flex', alignItems: 'center', whiteSpace: 'nowrap'}}>
-      style={{ display: "flex", alignItems: "center", whiteSpace: "nowrap" }}
+      <ProjectIcon style={{color: '#7f6b58'}} />
    >
      <Logo width={40} height={40} />
-      {!collapsed && (
+      {!collapsed && <span style={{marginLeft: 8, fontWeight: 'bold'}}>Белые ночи</span>}
        <span style={{ marginLeft: 8, fontWeight: "bold" }}>Белые ночи</span>
      )}
    </div>
-  );
+  )
 }
--- a/src/globals.css
+++ b/src/globals.css
@ -14,12 +14,12 @@
  cursor: pointer;
  padding: 0;
  margin: 0;
-  width: 32px;
+  width: 35px;
-  height: 32px;
+  height: 35px;
-  color: rgba(79, 138, 95, 1);
+  color: #544044;
  border-radius: 10%;
  transition: all 0.3s ease;
 }
 .backup-button:hover {
-  background-color: rgba(79, 138, 95, 0.05);
+  background-color: rgba(84, 64, 68, 0.5);
 }
--- a/src/icons/124.svg
+++ b/src/icons/124.svg
--- a/src/icons/Logo.tsx
+++ b/src/icons/Logo.tsx
--- a/src/locales/ru/translation.json
+++ b/src/locales/ru/translation.json
@ -94,9 +94,9 @@
  },
  "station": {
    "titles": {
-      "create": "Создать остановку",
+      "create": "Создать станцию",
-      "edit": "Редактировать остановку",
+      "edit": "Редактировать станцию",
-      "show": "Показать остановку"
+      "show": "Показать станцию"
    }
  },
  "snapshots": {
--- a/src/pages/carrier/create.tsx
+++ b/src/pages/carrier/create.tsx
@ -3,63 +3,19 @@ import { Create, useAutocomplete } from "@refinedev/mui";
 import { useForm } from "@refinedev/react-hook-form";
 import { Controller } from "react-hook-form";
 import { observer } from "mobx-react-lite";
-import { META_LANGUAGE } from "../../store/LanguageStore";
+import { languageStore, META_LANGUAGE } from "../../store/LanguageStore";
 import { LanguageSwitch } from "@/components/LanguageSwitch";
 import { useEffect, useState } from "react";
 import { EVERY_LANGUAGE, Languages, languageStore } from "@stores";
 export const CarrierCreate = observer(() => {
-  const { language, setLanguageAction } = languageStore;
+  const { language } = languageStore;
  const {
    saveButtonProps,
    refineCore: { formLoading },
    register,
    control,
    setValue,
    watch,
    formState: { errors },
  } = useForm({
-    refineCoreProps: META_LANGUAGE(language),
+    refineCoreProps: META_LANGUAGE(language)
  });
  const [carrierData, setCarrierData] = useState({
    full_name: EVERY_LANGUAGE(""),
    short_name: EVERY_LANGUAGE(""),
    slogan: EVERY_LANGUAGE(""),
  });
  useEffect(() => {
    setValue("full_name", carrierData.full_name[language]);
    setValue("short_name", carrierData.short_name[language]);
    setValue("slogan", carrierData.slogan[language]);
  }, [carrierData, language, setValue]);
  function updateTranslations(update: boolean = true) {
    const newCarrierData = {
      ...carrierData,
      full_name: {
        ...carrierData.full_name,
        [language]: watch("full_name") ?? "",
      },
      short_name: {
        ...carrierData.short_name,
        [language]: watch("short_name") ?? "",
      },
      slogan: {
        ...carrierData.slogan,
        [language]: watch("slogan") ?? "",
      },
    };
    if (update) setCarrierData(newCarrierData);
    return newCarrierData;
  }
  const handleLanguageChange = (lang: Languages) => {
    updateTranslations();
    setLanguageAction(lang);
  };
  const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
    resource: "city",
    onSearch: (value) => [
@ -89,7 +45,6 @@ export const CarrierCreate = observer(() => {
        sx={{ display: "flex", flexDirection: "column" }}
        autoComplete="off"
      >
        <LanguageSwitch action={handleLanguageChange} />
        <Controller
          control={control}
          name="city_id"
@ -160,7 +115,10 @@ export const CarrierCreate = observer(() => {
          name="short_name"
        />
-        <Box component="form" sx={{ display: "flex" }} autoComplete="off">
+        <Box component="form"
          sx={{ display: "flex" }}
          autoComplete="off"
        >
          <TextField
            {...register("main_color", {
              // required: 'Это поле является обязательным',
--- a/src/pages/city/create.tsx
+++ b/src/pages/city/create.tsx
@ -1,224 +1,69 @@
-import { Autocomplete, Box, TextField } from "@mui/material";
+import {Autocomplete, Box, TextField} from '@mui/material'
-import { Create, useAutocomplete } from "@refinedev/mui";
+import {Create, useAutocomplete} from '@refinedev/mui'
-import { useForm } from "@refinedev/react-hook-form";
+import {useForm} from '@refinedev/react-hook-form'
-import { Controller } from "react-hook-form";
+import {Controller} from 'react-hook-form'
 import { useEffect, useState } from "react";
 import { EVERY_LANGUAGE, Languages, languageStore } from "@stores";
 import { LanguageSwitch } from "@/components/LanguageSwitch";
 import { axiosInstanceForGet } from "@/providers";
 import { useNavigate } from "react-router";
 import { useNotification } from "@refinedev/core";
 export const CityCreate = () => {
  const { language, setLanguageAction } = languageStore;
  const navigate = useNavigate();
  const notification = useNotification();
  // State to manage city name translations across all supported languages.
  // Initializes with empty strings for each language.
  const [allLanguageNames, setAllLanguageNames] = useState<
    Record<Languages, string>
  >(EVERY_LANGUAGE(""));
  const {
    saveButtonProps,
    refineCore: {formLoading},
    register,
    control,
    setValue,
    watch,
    handleSubmit,
    formState: {errors},
-  } = useForm<{
+  } = useForm({})
    name: string;
    country_code: string;
    arms: string;
  }>({});
  // Keeps the 'name' input field synchronized with the currently active language's translation.
  // Updates whenever the active language or the `allLanguageNames` state changes.
  useEffect(() => {
    setValue("name", allLanguageNames[language]);
  }, [language, allLanguageNames, setValue]);
  // Captures the current value of the 'name' TextField and updates the `allLanguageNames` state.
  // This is vital for preserving user input when switching languages or before form submission.
  const updateCurrentLanguageName = () => {
    const currentNameValue = watch("name");
    setAllLanguageNames((prev) => ({
      ...prev,
      [language]: currentNameValue || "",
    }));
  };
  // Handles language changes. It first saves the current input, then updates the active language.
  const handleLanguageChange = (lang: Languages) => {
    updateCurrentLanguageName();
    setLanguageAction(lang);
  };
  // Autocomplete hooks for selecting a country and city arms (media).
  const {autocompleteProps: countryAutocompleteProps} = useAutocomplete({
-    resource: "country",
+    resource: 'country',
-  });
+  })
  const {autocompleteProps: mediaAutocompleteProps} = useAutocomplete({
-    resource: "media",
+    resource: 'media',
    onSearch: (value) => [
      {
-        field: "media_name",
+        field: 'media_name',
-        operator: "contains",
+        operator: 'contains',
        value,
      },
    ],
-  });
+  })
  // --- Form Submission Logic ---
  // Handles the form submission. It saves the current language's input,
  // validates the Russian name, and then sends requests to create/update city data
  // across different languages.
  const onFinish = async (data: {
    name: string;
    country_code: string;
    arms: string;
  }) => {
    updateCurrentLanguageName();
    const finalNames = {
      ...allLanguageNames,
      [language]: data.name,
    };
    try {
      if (!finalNames.ru) {
        console.error("Russian name is required for initial city creation.");
        if (notification && typeof notification.open === "function") {
          notification.open({
            message: "Ошибка",
            description: "Русское название города обязательно для создания.",
            type: "error",
          });
        }
        return;
      }
      console.log("Submitting with names:", finalNames);
      // Create the city with the Russian name first.
      const ruResponse = await axiosInstanceForGet("ru").post("/city", {
        name: finalNames.ru,
        country_code: data.country_code,
        arms: data.arms,
      });
      const id = ruResponse.data.id;
      // Update the city with English and Chinese names if available.
      if (finalNames.en) {
        await axiosInstanceForGet("en").patch(`/city/${id}`, {
          name: finalNames.en,
          country_code: data.country_code,
          arms: data.arms,
        });
      }
      if (finalNames.zh) {
        await axiosInstanceForGet("zh").patch(`/city/${id}`, {
          name: finalNames.zh,
          country_code: data.country_code,
          arms: data.arms,
        });
      }
      console.log("City created/updated successfully!");
      if (notification && typeof notification.open === "function") {
        notification.open({
          message: "Город успешно создан",
          type: "success",
        });
      }
      navigate("/city", { replace: true });
    } catch (error) {
      console.error("Error creating/updating city:", error);
    }
  };
  return (
-    <Create
+    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
-      isLoading={formLoading}
+      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
      saveButtonProps={{
        ...saveButtonProps,
        disabled: saveButtonProps.disabled,
        onClick: handleSubmit(onFinish as any),
      }}
    >
      <Box
        component="form"
        sx={{ display: "flex", flexDirection: "column" }}
        autoComplete="off"
      >
        <LanguageSwitch action={handleLanguageChange} />
        <Controller
          control={control}
          name="country_code"
-          rules={{ required: "Это поле является обязательным" }}
+          rules={{required: 'Это поле является обязательным'}}
          defaultValue={null}
          render={({field}) => (
            <Autocomplete
              {...countryAutocompleteProps}
-              value={
+              value={countryAutocompleteProps.options.find((option) => option.code === field.value) || null}
-                countryAutocompleteProps.options.find(
+              onChange={(_, value) => {
-                  (option: { code: string; name: string; id: string }) =>
+                field.onChange(value?.code || '')
                    option.code === field.value
                ) || null
              }
              onChange={(
                _,
                value: { code: string; name: string; id: string } | null
              ) => {
                field.onChange(value?.code || "");
              }}
-              getOptionLabel={(item: {
+              getOptionLabel={(item) => {
-                code: string;
+                return item ? item.name : ''
                name: string;
                id: string;
              }) => {
                return item ? item.name : "";
              }}
-              isOptionEqualToValue={(
+              isOptionEqualToValue={(option, value) => {
-                option: { code: string; name: string; id: string },
+                return option.id === value?.id
                value: { code: string; name: string; id: string }
              ) => {
                return option.id === value?.id;
              }}
-              renderInput={(params) => (
+              renderInput={(params) => <TextField {...params} label="Выберите страну" margin="normal" variant="outlined" error={!!errors.country_code} helperText={(errors as any)?.country_code?.message} required />}
                <TextField
                  {...params}
                  label="Выберите страну"
                  margin="normal"
                  variant="outlined"
                  error={!!errors.country_code}
                  required
                />
              )}
            />
          )}
        />
        <TextField
-          {...register("name", {
+          {...register('name', {
-            required: "Это поле является обязательным",
+            required: 'Это поле является обязательным',
            onBlur: updateCurrentLanguageName,
          })}
-          error={!!errors.name}
+          error={!!(errors as any)?.name}
          helperText={(errors as any)?.name?.message}
          margin="normal"
          fullWidth
          InputLabelProps={{shrink: true}}
          type="text"
-          label={"Название *"}
+          label={'Название *'}
          name="name"
        />
@ -229,50 +74,24 @@ export const CityCreate = () => {
          render={({field}) => (
            <Autocomplete
              {...mediaAutocompleteProps}
-              value={
+              value={mediaAutocompleteProps.options.find((option) => option.id === field.value) || null}
-                mediaAutocompleteProps.options.find(
+              onChange={(_, value) => {
-                  (option: { id: string; media_name: string }) =>
+                field.onChange(value?.id || '')
                    option.id === field.value
                ) || null
              }
              onChange={(
                _,
                value: { id: string; media_name: string } | null
              ) => {
                field.onChange(value?.id || "");
              }}
-              getOptionLabel={(item: { id: string; media_name: string }) => {
+              getOptionLabel={(item) => {
-                return item ? item.media_name : "";
+                return item ? item.media_name : ''
              }}
-              isOptionEqualToValue={(
+              isOptionEqualToValue={(option, value) => {
-                option: { id: string; media_name: string },
+                return option.id === value?.id
                value: { id: string; media_name: string }
              ) => {
                return option.id === value?.id;
              }}
-              filterOptions={(
+              filterOptions={(options, {inputValue}) => {
-                options: { id: string; media_name: string }[],
+                return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
                { inputValue }
              ) => {
                return options.filter((option) =>
                  option.media_name
                    .toLowerCase()
                    .includes(inputValue.toLowerCase())
                );
              }}
-              renderInput={(params) => (
+              renderInput={(params) => <TextField {...params} label="Выберите герб" margin="normal" variant="outlined" error={!!errors.arms} helperText={(errors as any)?.arms?.message} />}
                <TextField
                  {...params}
                  label="Выберите герб"
                  margin="normal"
                  variant="outlined"
                  error={!!errors.arms}
                />
              )}
            />
          )}
        />
      </Box>
    </Create>
-  );
+  )
-};
+}
--- a/src/pages/login/index.tsx
+++ b/src/pages/login/index.tsx
@ -1,20 +1,13 @@
-import { AuthPage, ThemedTitleV2 } from "@refinedev/mui";
+import {AuthPage, ThemedTitleV2} from '@refinedev/mui'
-
+import {ProjectIcon} from '../../components/ui/Icons'
 import { Logo } from "@/icons/Logo";
 export const Login = () => {
  return (
    <AuthPage
      type="login"
-      title={
+      title={<ThemedTitleV2 collapsed={false} text="Белые Ночи" icon={<ProjectIcon style={{color: '#7f6b58'}} />} />}
        <ThemedTitleV2
          collapsed={false}
          text="Белые Ночи"
          icon={<Logo width={24} height={24} />}
        />
      }
      forgotPasswordLink={false}
      registerLink={false} // only admin can add users
    />
-  );
+  )
-};
+}
--- a/src/pages/media/list.tsx
+++ b/src/pages/media/list.tsx
@ -100,6 +100,7 @@ export const MediaList = observer(() => {
        columns={columns}
        localeText={localeText}
        getRowId={(row: any) => row.id}
        languageEnabled
      />
    </List>
  );
--- a/src/pages/route-preview/InfiniteCanvas.tsx
+++ b/src/pages/route-preview/InfiniteCanvas.tsx
@ -1,14 +1,11 @@
 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 { useMapData } from "./MapDataContext";
 import { SCALE_FACTOR } from "./Constants";
 import { useApplication } from "@pixi/react";
-class ErrorBoundary extends Component<
+class ErrorBoundary extends Component<{ children: ReactNode }, { hasError: boolean }> {
  { children: ReactNode },
  { hasError: boolean }
 > {
 	state = { hasError: false };
 	static getDerivedStateFromError() {
@ -24,19 +21,9 @@ class ErrorBoundary extends Component<
 	}
  }
-export function InfiniteCanvas({
+
-  children,
+export function InfiniteCanvas({children} : Readonly<{children?: ReactNode}>) {
-}: Readonly<{ children?: ReactNode }>) {
+	const { position, setPosition, scale, setScale, rotation, setRotation, setScreenCenter, screenCenter } = useTransform();
  const {
    position,
    setPosition,
    scale,
    setScale,
    rotation,
    setRotation,
    setScreenCenter,
    screenCenter,
  } = useTransform();
 	const { routeData, originalRouteData } = useMapData();
 	const applicationRef = useApplication();
@ -46,65 +33,43 @@ export function InfiniteCanvas({
 	const [startRotation, setStartRotation] = useState(0);
 	const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });
  // Флаг для предотвращения конфликта между пользовательским вводом и данными маршрута
  const [isUserInteracting, setIsUserInteracting] = useState(false);
  // Реф для отслеживания последнего значения originalRouteData?.rotate
  const lastOriginalRotation = useRef<number | undefined>(undefined);
 	useEffect(() => {
 		const canvas = applicationRef?.app.canvas;
 		if (!canvas) return;
 		const canvasRect = canvas.getBoundingClientRect();
-    const canvasLeft = canvasRect.left;
+		const canvasLeft = canvasRect?.left ?? 0; 
-    const canvasTop = canvasRect.top;
+		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, setScreenCenter]);
+	}, [applicationRef?.app.canvas, window.innerWidth, window.innerHeight]);
 	const handlePointerDown = (e: FederatedMouseEvent) => {
 		setIsDragging(true);
    setIsUserInteracting(true); // Устанавливаем флаг взаимодействия пользователя
 		setStartPosition({
 			x: position.x,
-      y: position.y,
+			y: position.y
 		});
 		setStartMousePosition({
 			x: e.globalX,
-      y: e.globalY,
+			y: e.globalY
 		});
 		setStartRotation(rotation);
 		e.stopPropagation();
 	};
-  // Устанавливаем rotation только при изменении originalRouteData и отсутствии взаимодействия пользователя
+
 	useEffect(() => {
-    const newRotation = originalRouteData?.rotate ?? 0;
+		setRotation((originalRouteData?.rotate ?? 0) * Math.PI / 180);
-
+	}, [originalRouteData?.rotate]);
-    // Обновляем rotation только если:
+	// Get canvas element and its dimensions/position
    // 1. Пользователь не взаимодействует с канвасом
    // 2. Значение действительно изменилось
    if (!isUserInteracting && lastOriginalRotation.current !== newRotation) {
      setRotation((newRotation * Math.PI) / 180);
      lastOriginalRotation.current = newRotation;
    }
  }, [originalRouteData?.rotate, isUserInteracting, setRotation]);
 	const handlePointerMove = (e: FederatedMouseEvent) => {
 		if (!isDragging) return;
 		if (e.shiftKey) {
 			const center = screenCenter ?? {x: 0, y: 0};
-      const startAngle = Math.atan2(
+			const startAngle = Math.atan2(startMousePosition.y - center.y, startMousePosition.x - center.x);
-        startMousePosition.y - center.y,
+			const currentAngle = Math.atan2(e.globalY - center.y, e.globalX - center.x);
        startMousePosition.x - center.x
      );
      const currentAngle = Math.atan2(
        e.globalY - center.y,
        e.globalX - center.x
      );
 			// Calculate rotation difference in radians
 			const rotationDiff = currentAngle - startAngle;
@ -116,38 +81,28 @@ export function InfiniteCanvas({
 			const sinDelta = Math.sin(rotationDiff);
 			setPosition({
-        x:
+				x: center.x * (1 - cosDelta) + startPosition.x * cosDelta + (center.y - startPosition.y) * sinDelta,
-          center.x * (1 - cosDelta) +
+				y: center.y * (1 - cosDelta) + startPosition.y * cosDelta + (startPosition.x - center.x) * sinDelta
          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,
+				y: startPosition.y - startMousePosition.y + e.globalY
 			});
 		}
 		e.stopPropagation();
 	};
 	// Handle mouse up
 	const handlePointerUp = (e: FederatedMouseEvent) => {
 		setIsDragging(false);
    // Сбрасываем флаг взаимодействия через небольшую задержку
    // чтобы избежать немедленного срабатывания useEffect
    setTimeout(() => {
      setIsUserInteracting(false);
    }, 100);
 		e.stopPropagation();
 	};
-
+	// Handle mouse wheel for zooming
 	const handleWheel = (e: FederatedWheelEvent) => {
 		e.stopPropagation();
    setIsUserInteracting(true); // Устанавливаем флаг при зуме
 		// Get mouse position relative to canvas
 		const mouseX = e.globalX - position.x;
@ -157,30 +112,22 @@ export function InfiniteCanvas({
 		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
+		let zoomFactor = e.deltaY > 0 ? 0.9 : 1.1; // Zoom out/in
 		//const newScale = scale * zoomFactor;
 		const newScale = Math.max(scaleMin, Math.min(scaleMax, scale * zoomFactor));
-    const actualZoomFactor = newScale / scale;
+		zoomFactor = newScale / scale;
 		if (scale === newScale) {
      // Сбрасываем флаг, если зум не изменился
      setTimeout(() => {
        setIsUserInteracting(false);
      }, 100);
 			return;
 		}
 		// Update position to zoom towards mouse cursor
 		setPosition({
-      x: position.x + mouseX * (1 - actualZoomFactor),
+			x: position.x + mouseX * (1 - zoomFactor),
-      y: position.y + mouseY * (1 - actualZoomFactor),
+			y: position.y + mouseY * (1 - zoomFactor)
 		});
 		setScale(newScale);
    // Сбрасываем флаг взаимодействия через задержку
    setTimeout(() => {
      setIsUserInteracting(false);
    }, 100);
 	};
 	useEffect(() => {
@ -188,6 +135,7 @@ export function InfiniteCanvas({
 		console.log(position, scale, rotation);
 	}, [position, scale, rotation]);
 	return (
 		<ErrorBoundary>
 			{applicationRef?.app && (
@ -198,7 +146,7 @@ export function InfiniteCanvas({
 						g.rect(0, 0, canvas?.width ?? 0, canvas?.height ?? 0);
 						g.fill("#111");
 					}}
-          eventMode={"static"}
+					eventMode={'static'}
 					interactive
 					onPointerDown={handlePointerDown}
 					onGlobalPointerMove={handlePointerMove}
@ -218,6 +166,7 @@ export function InfiniteCanvas({
 			{/* Show center of the screen.
 			<pixiGraphics
 				eventMode="none"
 				draw={(g) => {
 					g.clear();
 					const center = screenCenter ?? {x: 0, y: 0};
--- a/src/pages/route-preview/LeftSidebar.tsx
+++ b/src/pages/route-preview/LeftSidebar.tsx
@ -1,59 +1,18 @@
 import { Stack, Typography, Button } from "@mui/material";
 import { useNavigate, useNavigationType } from "react-router";
 export function LeftSidebar() {
  const navigate = useNavigate();
  const navigationType = useNavigationType(); // PUSH, POP, REPLACE
  const handleBack = () => {
    if (navigationType === "PUSH") {
      navigate(-1);
    } else {
      navigate("/route");
    }
  };
 	return (
 		<Stack direction="column" width="300px" p={2} bgcolor="primary.main">
-      <button
+			<Stack direction="column" alignItems="center" justifyContent="center" my={10}>
        onClick={handleBack}
        type="button"
        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"
        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  sx={{ mb: 2 }} textAlign="center">
-          При поддержке Правительства Санкт-Петербурга
+					При поддержке Правительства
 					Санкт-Петербурга
 				</Typography>
 			</Stack>
-      <Stack
+			
-        direction="column"
+			<Stack direction="column" alignItems="center" justifyContent="center" my={10} spacing={2}>
        alignItems="center"
        justifyContent="center"
        my={10}
        spacing={2}
      >
 				<Button variant="outlined" color="warning" fullWidth>
 					Достопримечательности
 				</Button>
@ -62,28 +21,13 @@ export function LeftSidebar() {
 				</Button>
 			</Stack>
-      <Stack
+			<Stack direction="column" alignItems="center" justifyContent="center" my={10}>
-        direction="column"
+				<img src={"/GET.png"} alt="logo" width="80%" style={{margin: "0 auto"}}/>
        alignItems="center"
        justifyContent="center"
        my={10}
      >
        <img
          src={"/GET.png"}
          alt="logo"
          width="80%"
          style={{ margin: "0 auto" }}
        />
 			</Stack>
-      <Typography
+			<Typography variant="h6" textAlign="center" mt="auto">#ВсемПоПути</Typography>
-        variant="h6"
+
-        textAlign="center"
+			
        mt="auto"
        sx={{ color: "#fff" }}
      >
        #ВсемПоПути
      </Typography>
 		</Stack>
 	);
 }
--- a/src/pages/route-preview/MapDataContext.tsx
+++ b/src/pages/route-preview/MapDataContext.tsx
@ -1,4 +1,4 @@
-import { useApiUrl } from "@refinedev/core";
+import { useCustom, useApiUrl } from "@refinedev/core";
 import { useParams } from "react-router";
 import {
  createContext,
@ -16,16 +16,13 @@ import {
  StationPatchData,
 } from "./types";
 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<{
  originalRouteData?: RouteData;
  originalStationData?: StationData[];
  originalSightData?: SightData[];
  routeData?: RouteData;
-  stationData?: StationDataWithLanguage;
+  stationData?: StationData[];
  sightData?: SightData[];
  isRouteLoading: boolean;
@ -60,11 +57,9 @@ const MapDataContext = createContext<{
  saveChanges: () => {},
 });
-type StationDataWithLanguage = {
+export function MapDataProvider({
-  [key: string]: StationData[];
+  children,
-};
+}: Readonly<{ children: ReactNode }>) {
 export const MapDataProvider = observer(
  ({ children }: Readonly<{ children: ReactNode }>) => {
  const { id: routeId } = useParams<{ id: string }>();
  const apiUrl = useApiUrl();
@ -74,75 +69,43 @@ export const MapDataProvider = observer(
  const [originalSightData, setOriginalSightData] = useState<SightData[]>();
  const [routeData, setRouteData] = useState<RouteData>();
-    const [stationData, setStationData] = useState<StationDataWithLanguage>({
+  const [stationData, setStationData] = useState<StationData[]>();
      RU: [],
      EN: [],
      ZH: [],
    });
  const [sightData, setSightData] = useState<SightData[]>();
-    const [routeChanges, setRouteChanges] = useState<Partial<RouteData>>({});
+  const [routeChanges, setRouteChanges] = useState<RouteData>({} as RouteData);
-    const [stationChanges, setStationChanges] = useState<StationPatchData[]>(
+  const [stationChanges, setStationChanges] = useState<StationPatchData[]>([]);
      []
    );
  const [sightChanges, setSightChanges] = useState<SightPatchData[]>([]);
    const { language } = languageStore;
-    const [isRouteLoading, setIsRouteLoading] = useState(true);
+  const { data: routeQuery, isLoading: isRouteLoading } = useCustom({
-    const [isStationLoading, setIsStationLoading] = useState(true);
+    url: `${apiUrl}/route/${routeId}`,
-    const [isSightLoading, setIsSightLoading] = useState(true);
+    method: "get",
    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[]);
+  const { data: stationQuery, isLoading: isStationLoading } = useCustom({
-
+    url: `${apiUrl}/route/${routeId}/station`,
-          setIsRouteLoading(false);
+    method: "get",
-          setIsStationLoading(false);
+  });
-          setIsSightLoading(false);
+  const { data: sightQuery, isLoading: isSightLoading } = useCustom({
-        } catch (error) {
+    url: `${apiUrl}/route/${routeId}/sight`,
-          console.error("Error fetching data:", error);
+    method: "get",
-          setIsRouteLoading(false);
+  });
-          setIsStationLoading(false);
+  useEffect(() => {
-          setIsSightLoading(false);
+    // if not undefined, set original data
-        }
+    if (routeQuery?.data) setOriginalRouteData(routeQuery.data as RouteData);
-      };
+    if (stationQuery?.data)
-
+      setOriginalStationData(stationQuery.data as StationData[]);
-      fetchData();
+    if (sightQuery?.data) setOriginalSightData(sightQuery.data as SightData[]);
-    }, [routeId]);
+    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,
@ -206,7 +169,7 @@ export const MapDataProvider = observer(
          return station;
        });
      } else {
-          const foundStation = stationData.ru?.find(
+        const foundStation = stationData?.find(
          (station) => station.id === stationId
        );
        if (foundStation) {
@ -265,12 +228,12 @@ export const MapDataProvider = observer(
  const value = useMemo(
    () => ({
-        originalRouteData,
+      originalRouteData: originalRouteData,
-        originalStationData,
+      originalStationData: originalStationData,
-        originalSightData,
+      originalSightData: originalSightData,
-        routeData,
+      routeData: routeData,
-        stationData,
+      stationData: stationData,
-        sightData,
+      sightData: sightData,
      isRouteLoading,
      isStationLoading,
      isSightLoading,
@ -295,12 +258,9 @@ export const MapDataProvider = observer(
  );
  return (
-      <MapDataContext.Provider value={value}>
+    <MapDataContext.Provider value={value}>{children}</MapDataContext.Provider>
        {children}
      </MapDataContext.Provider>
  );
 }
 );
 export const useMapData = () => {
  const context = useContext(MapDataContext);
--- a/src/pages/route-preview/RightSidebar.tsx
+++ b/src/pages/route-preview/RightSidebar.tsx
@ -5,28 +5,11 @@ import { useTransform } from "./TransformContext";
 import { coordinatesToLocal, localToCoordinates } from "./utils";
 export function RightSidebar() {
-  const {
+	const { routeData, setScaleRange, saveChanges, originalRouteData, setMapRotation, setMapCenter } = useMapData();
-    routeData,
+	const { rotation, position, screenToLocal, screenCenter, rotateToAngle, setTransform } = useTransform();
    setScaleRange,
    saveChanges,
    originalRouteData,
    setMapRotation,
    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 }>({
+	const [localCenter, setLocalCenter] = useState<{x: number, y: number}>({x: 0, y: 0});
    x: 0,
    y: 0,
  });
 	const [rotationDegrees, setRotationDegrees] = useState<number>(0);
 	useEffect(() => {
@ -34,10 +17,7 @@ export function RightSidebar() {
 			setMinScale(originalRouteData.scale_min ?? 1);
 			setMaxScale(originalRouteData.scale_max ?? 10);
 			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]);
@ -47,10 +27,9 @@ export function RightSidebar() {
 		}
 	}, [minScale, maxScale]);
 	useEffect(() => {
-    setRotationDegrees(
+		setRotationDegrees((Math.round(rotation * 180 / Math.PI) % 360 + 360) % 360);
      ((Math.round((rotation * 180) / Math.PI) % 360) + 360) % 360
    );
 	}, [rotation]);
 	useEffect(() => {
 		setMapRotation(rotationDegrees);
@ -63,15 +42,16 @@ export function RightSidebar() {
 		setLocalCenter({x: coordinates.latitude, y: coordinates.longitude});
 	}, [position]);
 	useEffect(() => {
 		setMapCenter(localCenter.x, localCenter.y);
 	}, [localCenter]);
 	function setRotationFromDegrees(degrees: number) {
-    rotateToAngle((degrees * Math.PI) / 180);
+		rotateToAngle(degrees * Math.PI / 180);
 	}
-  function pan({ x, y }: { x: number; y: number }) {
+	function pan({x, y}: {x: number, y: number}) {
 		const coordinates = coordinatesToLocal(x,y);
 		setTransform(coordinates.x, coordinates.y);
 	}
@ -83,18 +63,12 @@ export function RightSidebar() {
 	return (
 		<Stack
-      position="absolute"
+			position="absolute" right={8} top={8} bottom={8} p={2}
      right={8}
      top={8}
      bottom={8}
      p={2}
 			gap={1}
-      minWidth="400px"
+			minWidth="400px" bgcolor="primary.main"
-      bgcolor="primary.main"
+			border="1px solid #e0e0e0" borderRadius={2}
      border="1px solid #e0e0e0"
      borderRadius={2}
 		>
-      <Typography variant="h6" sx={{ mb: 2, color: "#fff" }} textAlign="center">
+			<Typography variant="h6" sx={{ mb: 2 }} textAlign="center">
 				Детали о достопримечательностях
 			</Typography>
@ -107,17 +81,14 @@ export function RightSidebar() {
 					onChange={(e) => setMinScale(Number(e.target.value))}
 					style={{backgroundColor: "#222", borderRadius: 4}}
 					sx={{
-            "& .MuiInputLabel-root": {
+						'& .MuiInputLabel-root.Mui-focused': {
-              color: "#fff",
+							color: "#fff"
-            },
+						}
            "& .MuiInputBase-input": {
              color: "#fff",
            },
 					}}
 					slotProps={{
 						input: {
-              min: 0.1,
+							min: 0.1
-            },
+						}
 					}}
 				/>
 				<TextField
@ -126,19 +97,16 @@ export function RightSidebar() {
 					variant="filled"
 					value={maxScale}
 					onChange={(e) => setMaxScale(Number(e.target.value))}
-          style={{ backgroundColor: "#222", borderRadius: 4, color: "#fff" }}
+					style={{backgroundColor: "#222", borderRadius: 4}}
 					sx={{
-            "& .MuiInputLabel-root": {
+						'& .MuiInputLabel-root.Mui-focused': {
-              color: "#fff",
+							color: "#fff"
-            },
+						}
            "& .MuiInputBase-input": {
              color: "#fff",
            },
 					}}
 					slotProps={{
 						input: {
-              min: 0.1,
+							min: 0.1
-            },
+						}
 					}}
 				/>
 			</Stack>
@ -155,24 +123,21 @@ export function RightSidebar() {
 					}
 				}}
 				onKeyDown={(e) => {
-          if (e.key === "Enter") {
+					if (e.key === 'Enter') {
 						e.currentTarget.blur();
 					}
 				}}
 				style={{backgroundColor: "#222", borderRadius: 4}}
 				sx={{
-          "& .MuiInputLabel-root": {
+					'& .MuiInputLabel-root.Mui-focused': {
-            color: "#fff",
+						color: "#fff"
-          },
+					}
          "& .MuiInputBase-input": {
            color: "#fff",
          },
 				}}
 				slotProps={{
 					input: {
 						min: 0,
-            max: 360,
+						max: 360
-          },
+					}
 				}}
 			/>
@ -183,17 +148,14 @@ export function RightSidebar() {
 					variant="filled"
 					value={Math.round(localCenter.x*100000)/100000}
 					onChange={(e) => {
-            setLocalCenter((prev) => ({ ...prev, x: Number(e.target.value) }));
+						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": {
+						'& .MuiInputLabel-root.Mui-focused': {
-              color: "#fff",
+							color: "#fff"
-            },
+						}
            "& .MuiInputBase-input": {
              color: "#fff",
            },
 					}}
 				/>
 				<TextField
@ -202,17 +164,14 @@ export function RightSidebar() {
 					variant="filled"
 					value={Math.round(localCenter.y*100000)/100000}
 					onChange={(e) => {
-            setLocalCenter((prev) => ({ ...prev, y: Number(e.target.value) }));
+						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": {
+						'& .MuiInputLabel-root.Mui-focused': {
-              color: "#fff",
+							color: "#fff"
-            },
+						}
            "& .MuiInputBase-input": {
              color: "#fff",
            },
 					}}
 				/>
 			</Stack>
--- a/src/pages/route-preview/Station.tsx
+++ b/src/pages/route-preview/Station.tsx
@ -1,37 +1,22 @@
 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 { useCallback, useEffect, useRef, useState } from "react";
 import { StationData } from "./types";
 import { useMapData } from "./MapDataContext";
 import { coordinatesToLocal } from "./utils";
 import { observer } from "mobx-react-lite";
 import { languageStore } from "@stores";
 interface StationProps {
 	station: StationData;
  ruLabel: string | null;
 }
-export const Station = observer(
+export function Station({
-  ({ station, ruLabel }: Readonly<StationProps>) => {
+	station
 }: Readonly<StationProps>) {
 	const draw = useCallback((g: Graphics) => {
 		g.clear();
-      const coordinates = coordinatesToLocal(
+		const coordinates = coordinatesToLocal(station.latitude, station.longitude);
-        station.latitude,
+		g.circle(coordinates.x * UP_SCALE, coordinates.y * UP_SCALE, STATION_RADIUS);
        station.longitude
      );
      g.circle(
        coordinates.x * UP_SCALE,
        coordinates.y * UP_SCALE,
        STATION_RADIUS
      );
 		g.fill({color: PATH_COLOR});
 		g.stroke({color: BACKGROUND_COLOR, width: STATION_OUTLINE_WIDTH});
 	}, []);
@ -39,28 +24,21 @@ export const Station = observer(
 	return (
 		<pixiContainer>
 			<pixiGraphics draw={draw}/>
-        <StationLabel station={station} ruLabel={ruLabel} />
+			<StationLabel station={station}/>
 		</pixiContainer>
 	);
 }
 );
-export const StationLabel = observer(
+export function StationLabel({
-  ({ station, ruLabel }: Readonly<StationProps>) => {
+	station
-    const { language } = languageStore;
+}: Readonly<StationProps>) {
 	const { rotation, scale } = useTransform();
 	const { setStationOffset } = useMapData();
-    const [position, setPosition] = useState({
+	const [position, setPosition] = useState({ x: station.offset_x, y: station.offset_y });
      x: station.offset_x,
      y: station.offset_y,
    });
 	const [isDragging, setIsDragging] = useState(false);
    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) {
 		console.error("station is null");
@ -71,22 +49,22 @@ export const StationLabel = observer(
        setIsDragging(true);
        setStartPosition({
            x: position.x,
-        y: position.y,
+            y: position.y
        });
 		setStartMousePosition({
 			x: e.globalX,
-        y: e.globalY,
+			y: e.globalY
 		});
        e.stopPropagation();
    };
    const handlePointerMove = (e: FederatedMouseEvent) => {
        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 = {
 			x: startPosition.x + dx,
-        y: startPosition.y + dy,
+			y: startPosition.y + dy
 		};
 		setPosition(newPosition);
 		setStationOffset(station.id, newPosition.x, newPosition.y);
@ -101,7 +79,7 @@ export const StationLabel = observer(
 	return (
 		<pixiContainer
-        eventMode="static"
+			eventMode='static'
 			interactive
 			onPointerDown={handlePointerDown}
 			onGlobalPointerMove={handlePointerMove}
@ -114,35 +92,18 @@ export const StationLabel = observer(
 			rotation={-rotation}
 		>
 			<pixiText
-          anchor={{ x: 1, y: 0.5 }}
+				anchor={{x: 0.5, y: 0.5}}
 				text={station.name}
 				position={{
-            x: position.x / scale + 24,
+					x: position.x/scale,
-            y: position.y / scale,
+					y: position.y/scale
 				}}
 				style={{
-            fontSize: 26,
+					fontSize: 48,
-            fontWeight: "bold",
+					fontWeight: 'bold',
-            fill: "#ffffff",
+					fill: "#ffffff"
 				}}
 			/>
        {ruLabel && (
          <pixiText
            anchor={{ x: 1, y: -1 }}
            text={ruLabel}
            position={{
              x: position.x / scale + 24,
              y: position.y / scale,
            }}
            style={{
              fontSize: 16,
              fontWeight: "bold",
              fill: "#CCCCCC",
            }}
          />
        )}
 		</pixiContainer>
 	);
 }
 );
--- a/src/pages/route-preview/TransformContext.tsx
+++ b/src/pages/route-preview/TransformContext.tsx
@ -1,34 +1,21 @@
-import {
+import { createContext, ReactNode, useContext, useMemo, useState } from "react";
  createContext,
  ReactNode,
  useContext,
  useMemo,
  useState,
  useCallback,
 } from "react";
 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 },
    scale: 1,
@ -41,7 +28,7 @@ const TransformContext = createContext<{
 	localToScreen: () => ({ x: 0, y: 0 }),
 	rotateToAngle: () => {},
 	setTransform: () => {},
-  setScreenCenter: () => {},
+    setScreenCenter: () => {}
 });
 // Provider component
@ -49,10 +36,9 @@ export const TransformProvider = ({ children }: { children: ReactNode }) => {
    const [position, setPosition] = useState({ x: 0, y: 0 });
    const [scale, setScale] = useState(1);
    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
        const translatedX = (screenX - position.x) / scale;
        const translatedY = (screenY - position.y) / scale;
@ -65,15 +51,13 @@ export const TransformProvider = ({ children }: { children: ReactNode }) => {
        return {
            x: rotatedX / UP_SCALE,
-        y: rotatedY / UP_SCALE,
+            y: rotatedY / UP_SCALE
        };
-    },
+    }
    [position.x, position.y, scale, rotation]
  );
    // 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;
@ -87,81 +71,54 @@ export const TransformProvider = ({ children }: { children: ReactNode }) => {
        return {
            x: translatedX,
-        y: translatedY,
+            y: translatedY
        };
-    },
+    }
    [position.x, position.y, scale, rotation]
  );
-  const rotateToAngle = useCallback(
+
-    (to: number, fromPosition?: { x: number; y: number }) => {
+
 	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 currentFromPosition = fromPosition ?? position;
+        fromPosition ??= position;
-      const newPosition = {
+		setPosition({
-        x:
+			x: center.x * (1 - cosDelta) + fromPosition.x * cosDelta + (center.y - fromPosition.y) * sinDelta,
-          center.x * (1 - cosDelta) +
+			y: center.y * (1 - cosDelta) + fromPosition.y * cosDelta + (fromPosition.x - center.x) * sinDelta
-          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
+    function setTransform(latitude: number, longitude: number, rotationDegrees?: number, useScale   ?: number) {
-      setRotation(to);
+        const selectedRotation = rotationDegrees ? (rotationDegrees * Math.PI / 180) : rotation;
-      setPosition(newPosition);
+        const selectedScale = useScale ? useScale/SCALE_FACTOR : scale;
    },
    [rotation, position, screenCenter]
  );
  const setTransform = useCallback(
    (
      latitude: number,
      longitude: number,
      rotationDegrees?: number,
      useScale?: number
    ) => {
      const selectedRotation =
        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 newPosition = {
            x: -latitude * UP_SCALE * selectedScale,
-        y: -longitude * UP_SCALE * selectedScale,
+            y: -longitude * UP_SCALE * selectedScale
        };
-      const cosRot = Math.cos(selectedRotation);
+        const cos = Math.cos(selectedRotation);
-      const sinRot = Math.sin(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 * cosRot - dy * sinRot + center.x;
+        newPosition.x = (dx * cos - dy * sin) + center.x;
-      newPosition.y = dx * sinRot + dy * cosRot + center.y;
+        newPosition.y = (dx * sin + dy * cos) + center.y;
      // Batch state updates to avoid intermediate renders
        setPosition(newPosition);
        setRotation(selectedRotation);
        setScale(selectedScale);
-    },
+    }
    [rotation, scale, screenCenter]
  );
-  const value = useMemo(
+    const value = useMemo(() => ({
    () => ({
        position,
        scale,
        rotation,
@ -173,19 +130,8 @@ export const TransformProvider = ({ children }: { children: ReactNode }) => {
 		screenToLocal,
        localToScreen,
        setTransform,
-      setScreenCenter,
+        setScreenCenter
-    }),
+    }), [position, scale, rotation, screenCenter]);
    [
      position,
      scale,
      rotation,
      screenCenter,
      rotateToAngle,
      screenToLocal,
      localToScreen,
      setTransform,
    ]
  );
    return (
        <TransformContext.Provider value={value}>
@ -198,7 +144,7 @@ export const TransformProvider = ({ children }: { children: ReactNode }) => {
 export const useTransform = () => {
    const context = useContext(TransformContext);
    if (!context) {
-    throw new Error("useTransform must be used within a TransformProvider");
+        throw new Error('useTransform must be used within a TransformProvider');
    }
    return context;
 };
--- a/src/pages/route-preview/TravelPath.tsx
+++ b/src/pages/route-preview/TravelPath.tsx
@ -3,32 +3,37 @@ import { useCallback } from "react";
 import { PATH_COLOR, PATH_WIDTH } from "./Constants";
 import { coordinatesToLocal } from "./utils";
 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>) {
 	const draw = useCallback((g: Graphics) => {
 		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++) {
+		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,
+			width: PATH_WIDTH
 		});
-    },
+	}, [points]);
    [points]
  );
 	if(points.length === 0) {
 		console.error("points is empty");
 		return null;
 	}
-  return <pixiGraphics draw={draw} />;
+	return (
 		<pixiGraphics
 		draw={draw}
 		/>
 	);
 }
--- a/src/pages/route-preview/Widgets.tsx
+++ b/src/pages/route-preview/Widgets.tsx
@ -3,41 +3,29 @@ import { Stack, Typography } from "@mui/material";
 export function Widgets() {
 	return (
 		<Stack
-      direction="column"
+			direction="column" spacing={2}
      spacing={2}
 			position="absolute"
-      top={32}
+			top={32} left={32}
-      left={32}
+			sx={{ pointerEvents: 'none' }}
      sx={{ pointerEvents: "none" }}
 		>
-      <Stack
+			<Stack bgcolor="primary.main"
-        bgcolor="primary.main"
+				width={361} height={96}
-        width={361}
+				p={2} m={2}
        height={96}
        p={2}
        m={2}
 				borderRadius={2}
 				alignItems="center"
 				justifyContent="center"
 			>
-        <Typography variant="h6" sx={{ color: "#fff" }}>
+				<Typography variant="h6">Станция</Typography>
          Станция
        </Typography>
 			</Stack>
-      <Stack
+			<Stack bgcolor="primary.main"
-        bgcolor="primary.main"
+				width={223} height={262}
-        width={223}
+				p={2} m={2}
        height={262}
        p={2}
        m={2}
 				borderRadius={2}
 				alignItems="center"
 				justifyContent="center"
 			>
-        <Typography variant="h6" sx={{ color: "#fff" }}>
+				<Typography variant="h6">Погода</Typography>
          Погода
        </Typography>
 			</Stack>
 		</Stack>
-  );
+	)
 }
--- a/src/pages/route-preview/index.tsx
+++ b/src/pages/route-preview/index.tsx
@ -1,14 +1,18 @@
 import { useRef, useEffect, useState } from "react";
-import { Application, ApplicationRef, extend } from "@pixi/react";
+import {
    Application,
    ApplicationRef,
    extend
 } from '@pixi/react';
 import {
    Container,
    Graphics,
    Sprite,
    Texture,
    TilingSprite,
-  Text,
+	Text
-} from "pixi.js";
+} from 'pixi.js';
 import { Stack } from "@mui/material";
 import { MapDataProvider, useMapData } from "./MapDataContext";
 import { TransformProvider, useTransform } from "./TransformContext";
@ -21,9 +25,6 @@ import { LeftSidebar } from "./LeftSidebar";
 import { RightSidebar } from "./RightSidebar";
 import { Widgets } from "./Widgets";
 import { coordinatesToLocal } from "./utils";
 import { LanguageSwitch } from "@/components/LanguageSwitch";
 import { languageStore } from "@stores";
 import { observer } from "mobx-react-lite";
 extend({
    Container,
@ -31,7 +32,7 @@ extend({
    Sprite,
    Texture,
    TilingSprite,
-  Text,
+	Text
 });
 export const RoutePreview = () => {
@ -39,36 +40,26 @@ export const RoutePreview = () => {
 		<MapDataProvider>
 			<TransformProvider>
 				<Stack direction="row" height="100vh" width="100vw" overflow="hidden">
          <div
            style={{
              position: "absolute",
              top: 0,
              left: "50%",
              transform: "translateX(-50%)",
              zIndex: 1000,
            }}
          >
            <LanguageSwitch />
          </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;
+export function RouteMap() {
-  const { setPosition, screenToLocal, setTransform, screenCenter } =
+	const { setPosition, screenToLocal, setTransform, screenCenter } = useTransform();
-    useTransform();
+	const {
-  const { routeData, stationData, sightData, originalRouteData } = useMapData();
+		routeData, stationData, sightData, originalRouteData
-  console.log(stationData);
+	} = useMapData();
-  const [points, setPoints] = useState<{ x: number; y: number }[]>([]);
+	const [points, setPoints] = useState<{x: number, y: number}[]>([]);
 	const [isSetup, setIsSetup] = useState(false);
 	const parentRef = useRef<HTMLDivElement>(null);
@ -76,11 +67,7 @@ export const RouteMap = observer(() => {
 	useEffect(() => {
 		if (originalRouteData) {
 			const path = originalRouteData?.path;
-      const points =
+			const points = path?.map(([x, y]: [number, number]) => ({x: x * UP_SCALE, y: y * UP_SCALE})) ?? [];
        path?.map(([x, y]: [number, number]) => ({
          x: x * UP_SCALE,
          y: y * UP_SCALE,
        })) ?? [];
 			setPoints(points);
 		}
 	}, [originalRouteData]);
@ -91,14 +78,13 @@ export const RouteMap = observer(() => {
 		}
 		if (
-      originalRouteData?.center_latitude ===
+			originalRouteData?.center_latitude === originalRouteData?.center_longitude &&
        originalRouteData?.center_longitude &&
 			originalRouteData?.center_latitude === 0
 		) {
 			if (points.length > 0) {
 				let boundingBox = {
 					from: {x: Infinity, y: Infinity},
-          to: { x: -Infinity, y: -Infinity },
+					to: {x: -Infinity, y: -Infinity}
 				};
 				for (const point of points) {
 					boundingBox.from.x = Math.min(boundingBox.from.x, point.x);
@ -108,7 +94,7 @@ export const RouteMap = observer(() => {
 				}
 				const newCenter = {
 					x: -(boundingBox.from.x + boundingBox.to.x) / 2, 
-          y: -(boundingBox.from.y + boundingBox.to.y) / 2,
+					y: -(boundingBox.from.y + boundingBox.to.y) / 2
 				};
 				setPosition(newCenter);
 				setIsSetup(true);
@ -117,10 +103,7 @@ export const RouteMap = observer(() => {
 			originalRouteData?.center_latitude &&
 			originalRouteData?.center_longitude
 		) {
-      const coordinates = coordinatesToLocal(
+			const coordinates = coordinatesToLocal(originalRouteData?.center_latitude, originalRouteData?.center_longitude);
        originalRouteData?.center_latitude,
        originalRouteData?.center_longitude
      );
 			setTransform(
 				coordinates.x,
@ -130,35 +113,28 @@ export const RouteMap = observer(() => {
 			);
 			setIsSetup(true);
 		}
-  }, [
+	}, [points, originalRouteData?.center_latitude, originalRouteData?.center_longitude, originalRouteData?.rotate, isSetup, screenCenter]);
-    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 (
 		<div style={{width: "100%", height:"100%"}} ref={parentRef}>
-      <Application resizeTo={parentRef} background="#fff">
+			<Application
 				resizeTo={parentRef}
 				background="#fff"
 			>
 				<InfiniteCanvas>
 					<TravelPath points={points}/>
-          {stationData[language].map((obj, index) => (
+					{stationData?.map((obj) => (
-            <Station
+						<Station station={obj} key={obj.id}/>
-              station={obj}
+					))}
-              key={obj.id}
+					{sightData?.map((obj, index) => (
-              ruLabel={
+						<Sight sight={obj} id={index} key={obj.id}/>
                language === "ru"
                  ? stationData.en[index].name
                  : stationData.ru[index].name
              }
            />
 					))}
 					<pixiGraphics
@ -172,5 +148,5 @@ export const RouteMap = observer(() => {
 				</InfiniteCanvas>
 			</Application>
 		</div>
-  );
+	)
-});
+}
--- a/src/pages/route/create.tsx
+++ b/src/pages/route/create.tsx
@ -280,19 +280,13 @@ export const RouteCreate = () => {
        <TextField
          {...register("scale_min", {
            // required: 'Это поле является обязательным',
-            setValueAs: (value) => {
+            setValueAs: (value) => Number(value),
              if (Number(value) < 0) {
                return 0;
              }
              return Number(value);
            },
          })}
          error={!!(errors as any)?.scale_min}
          helperText={(errors as any)?.scale_min?.message}
          margin="normal"
          fullWidth
          slotProps={{ inputLabel: { shrink: true } }}
          inputProps={{ min: 0 }}
          type="number"
          label={"Масштаб (мин)"}
          name="scale_min"
@ -301,19 +295,13 @@ export const RouteCreate = () => {
        <TextField
          {...register("scale_max", {
            // required: 'Это поле является обязательным',
-            setValueAs: (value) => {
+            setValueAs: (value) => Number(value),
              if (Number(value) < 0) {
                return 0;
              }
              return Number(value);
            },
          })}
          error={!!(errors as any)?.scale_max}
          helperText={(errors as any)?.scale_max?.message}
          margin="normal"
          fullWidth
          slotProps={{ inputLabel: { shrink: true } }}
          inputProps={{ min: 0 }}
          type="number"
          label={"Масштаб (макс)"}
          name="scale_max"
--- a/src/pages/route/edit.tsx
+++ b/src/pages/route/edit.tsx
@ -9,7 +9,7 @@ import {
 } from "@mui/material";
 import { Edit, useAutocomplete } from "@refinedev/mui";
 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 { LinkedItems } from "../../components/LinkedItems";
 import {
@ -76,11 +76,6 @@ export const RouteEdit = observer(() => {
    ...META_LANGUAGE(language),
  });
  const carrierId = useWatch({ control, name: "carrier_id" });
  const cityId = carrierAutocompleteProps.options.find(
    (option) => option.id === carrierId
  )?.city_id;
  const { autocompleteProps: governorAppealAutocompleteProps } =
    useAutocomplete({
      resource: "article",
@ -317,12 +312,7 @@ export const RouteEdit = observer(() => {
          <TextField
            {...register("scale_min", {
              // required: 'Это поле является обязательным',
-              setValueAs: (value) => {
+              setValueAs: (value) => Number(value),
                if (Number(value) < 0) {
                  return 0;
                }
                return Number(value);
              },
            })}
            error={!!(errors as any)?.scale_min}
            helperText={(errors as any)?.scale_min?.message}
@ -337,12 +327,7 @@ export const RouteEdit = observer(() => {
          <TextField
            {...register("scale_max", {
              // required: 'Это поле является обязательным',
-              setValueAs: (value) => {
+              setValueAs: (value) => Number(value),
                if (Number(value) < 0) {
                  return 0;
                }
                return Number(value);
              },
            })}
            error={!!(errors as any)?.scale_max}
            helperText={(errors as any)?.scale_max?.message}
@ -408,19 +393,18 @@ export const RouteEdit = observer(() => {
              parentResource="route"
              childResource="station"
              fields={stationFields}
-              title="остановки"
+              title="станции"
              dragAllowed={true}
              cityId={cityId}
            />
-            {/* <LinkedItems<VehicleItem>
+            <LinkedItems<VehicleItem>
              type="edit"
              parentId={routeId}
              parentResource="route"
              childResource="vehicle"
              fields={vehicleFields}
              title="транспортные средства"
-            /> */}
+            />
          </>
        )}
--- a/src/pages/route/show.tsx
+++ b/src/pages/route/show.tsx
@ -80,17 +80,17 @@ export const RouteShow = observer(() => {
              parentResource="route"
              childResource="station"
              fields={stationFields}
-              title="остановки"
+              title="станции"
            />
-            {/* <LinkedItems<VehicleItem>
+            <LinkedItems<VehicleItem>
              type="show"
              parentId={record.id}
              parentResource="route"
              childResource="vehicle"
              fields={vehicleFields}
              title="транспортные средства"
-            /> */}
+            />
            <LinkedItems<SightItem>
              type="show"
@ -103,7 +103,8 @@ export const RouteShow = observer(() => {
          </>
        )}
-        <Box sx={{ display: "flex", justifyContent: "flex-start" }}>
+        
        <Box sx={{ display: 'flex', justifyContent: 'flex-start' }}>
          <Button 
            variant="contained" 
            color="primary"
--- a/src/pages/sight/create.tsx
+++ b/src/pages/sight/create.tsx
@ -22,7 +22,6 @@ import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 export const SightCreate = observer(() => {
  const { language, setLanguageAction } = languageStore;
  const [coordinates, setCoordinates] = useState("");
  const [sightData, setSightData] = useState({
    name: EVERY_LANGUAGE(""),
    address: EVERY_LANGUAGE(""),
@ -80,7 +79,10 @@ export const SightCreate = observer(() => {
  });
  const [namePreview, setNamePreview] = useState("");
-  const [coordinatesPreview, setCoordinatesPreview] = useState("");
+  const [coordinatesPreview, setCoordinatesPreview] = useState({
    latitude: "",
    longitude: "",
  });
  const [creatingArticleHeading, setCreatingArticleHeading] =
    useState<string>("");
@ -100,19 +102,13 @@ export const SightCreate = observer(() => {
  const [previewArticlePreview, setPreviewArticlePreview] = useState("");
  const handleCoordinatesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setCoordinates(e.target.value);
+    const [lat, lon] = e.target.value.split(",").map((s) => s.trim());
-    if (e.target.value) {
+    setCoordinatesPreview({
-      const [lat, lon] = e.target.value.split(" ").map((s) => s.trim());
+      latitude: lat,
-      setCoordinatesPreview(
+      longitude: lon,
-        `${lat ? Number(lat) : 0}, ${lon ? Number(lon) : 0}`
+    });
-      );
+    setValue("latitude", lat);
-      setValue("latitude", lat ? Number(lat) : 0);
+    setValue("longitude", lon);
      setValue("longitude", lon ? Number(lon) : 0);
    } else {
      setCoordinatesPreview("");
      setValue("latitude", "");
      setValue("longitude", "");
    }
  };
  // Автокомплиты
@ -174,6 +170,13 @@ export const SightCreate = observer(() => {
    setNamePreview(nameContent ?? "");
  }, [nameContent]);
  useEffect(() => {
    setCoordinatesPreview({
      latitude: latitudeContent || "",
      longitude: longitudeContent || "",
    });
  }, [latitudeContent, longitudeContent]);
  useEffect(() => {
    const selectedCity = cityAutocompleteProps.options.find(
      (option) => option.id === cityContent
@ -273,7 +276,7 @@ export const SightCreate = observer(() => {
            />
            <TextField
-              value={coordinates}
+              value={`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
              onChange={handleCoordinatesChange}
              error={!!(errors as any)?.latitude}
              helperText={(errors as any)?.latitude?.message}
@ -283,11 +286,10 @@ export const SightCreate = observer(() => {
              type="text"
              label={"Координаты *"}
            />
            <input
              type="hidden"
              {...register("longitude", {
-                value: coordinates.split(" ")[1],
+                value: coordinatesPreview.longitude,
                required: "Это поле является обязательным",
                valueAsNumber: true,
              })}
@ -295,7 +297,7 @@ export const SightCreate = observer(() => {
            <input
              type="hidden"
              {...register("latitude", {
-                value: coordinates.split(" ")[0],
+                value: coordinatesPreview.latitude,
                required: "Это поле является обязательным",
                valueAsNumber: true,
              })}
@ -431,7 +433,7 @@ export const SightCreate = observer(() => {
                  renderInput={(params) => (
                    <TextField
                      {...params}
-                      label="Выберите водяной знак (Левый верх)"
+                      label="Выберите водный знак (Левый верх)"
                      margin="normal"
                      variant="outlined"
                      error={!!errors.watermark_lu}
@ -473,7 +475,7 @@ export const SightCreate = observer(() => {
                  renderInput={(params) => (
                    <TextField
                      {...params}
-                      label="Выберите водяной знак (Правый верх)"
+                      label="Выберите водный знак (Правый верх)"
                      margin="normal"
                      variant="outlined"
                      error={!!errors.watermark_rd}
@ -499,13 +501,13 @@ export const SightCreate = observer(() => {
                  onChange={(_, value) => {
                    field.onChange(value?.id ?? "");
                  }}
-                  getOptionLabel={(item) => (item ? item.service_name : "")}
+                  getOptionLabel={(item) => (item ? item.heading : "")}
                  isOptionEqualToValue={(option, value) =>
                    option.id === value?.id
                  }
                  filterOptions={(options, { inputValue }) =>
                    options.filter((option) =>
-                      option.service_name
+                      option.heading
                        .toLowerCase()
                        .includes(inputValue.toLowerCase())
                    )
@ -666,7 +668,6 @@ export const SightCreate = observer(() => {
          </Typography>
          {/* Координаты */}
          {coordinatesPreview && (
          <Typography variant="body1" sx={{ mb: 2 }}>
            <Box component="span" sx={{ color: "text.secondary" }}>
              Координаты:{" "}
@ -678,10 +679,10 @@ export const SightCreate = observer(() => {
                  theme.palette.mode === "dark" ? "grey.300" : "grey.800",
              }}
            >
-                {coordinatesPreview}
+              {`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
            </Box>
          </Typography>
-          )}
+
          {/* Обложка */}
          {thumbnailPreview && (
            <Box sx={{ mb: 2 }}>
--- a/src/pages/sight/edit.tsx
+++ b/src/pages/sight/edit.tsx
@ -70,7 +70,6 @@ export const SightEdit = observer(() => {
    name: EVERY_LANGUAGE(""),
    address: EVERY_LANGUAGE(""),
  });
  const [coordinates, setCoordinates] = useState("");
  const {
    saveButtonProps,
@ -164,13 +163,37 @@ export const SightEdit = observer(() => {
      setValue("address", sightData.address[language]);
  }, [language, sightData, setValue]);
  useEffect(() => {
    const latitude = getValues("latitude");
    const longitude = getValues("longitude");
    if (latitude && longitude) {
      setCoordinatesPreview({
        latitude: latitude,
        longitude: longitude,
      });
    }
  }, [getValues]);
  const handleCoordinatesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const [lat, lon] = e.target.value.split(",").map((s) => s.trim());
    setCoordinatesPreview({
      latitude: lat,
      longitude: lon,
    });
    setValue("latitude", lat);
    setValue("longitude", lon);
  };
  // Состояния для предпросмотра
  const [creatingArticleHeading, setCreatingArticleHeading] =
    useState<string>("");
  const [creatingArticleBody, setCreatingArticleBody] = useState<string>("");
-  const [coordinatesPreview, setCoordinatesPreview] = useState("");
+  const [coordinatesPreview, setCoordinatesPreview] = useState({
    latitude: "",
    longitude: "",
  });
  const [selectedArticleIndex, setSelectedArticleIndex] = useState(-1);
  const [previewMediaFile, setPreviewMediaFile] = useState<MediaData>();
  const [thumbnailPreview, setThumbnailPreview] = useState<string | null>(null);
@ -220,25 +243,12 @@ export const SightEdit = observer(() => {
  const watermarkRDContent = watch("watermark_rd");
  useEffect(() => {
-    if (latitudeContent && longitudeContent) {
+    setCoordinatesPreview({
-      setCoordinates(`${latitudeContent} ${longitudeContent}`);
+      latitude: latitudeContent ?? "",
-    }
+      longitude: longitudeContent ?? "",
    });
  }, [latitudeContent, longitudeContent]);
  const handleCoordinatesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setCoordinates(e.target.value);
    if (e.target.value) {
      const [lat, lon] = e.target.value.split(" ").map((s) => s.trim());
      setCoordinatesPreview(`${lat ?? "0"}, ${lon ?? "0"}`);
      setValue("latitude", lat ?? "");
      setValue("longitude", lon ?? "");
    } else {
      setCoordinatesPreview("");
      setValue("latitude", "");
      setValue("longitude", "");
    }
  };
  useEffect(() => {
    if (linkedArticles[selectedArticleIndex]?.id) {
      getMedia(linkedArticles[selectedArticleIndex].id).then((media) => {
@ -495,6 +505,7 @@ export const SightEdit = observer(() => {
                  <input
                    type="hidden"
                    {...register("longitude", {
                      value: coordinatesPreview.longitude,
                      required: "Это поле является обязательным",
                      valueAsNumber: true,
                    })}
@ -502,6 +513,7 @@ export const SightEdit = observer(() => {
                  <input
                    type="hidden"
                    {...register("latitude", {
                      value: coordinatesPreview.latitude,
                      required: "Это поле является обязательным",
                      valueAsNumber: true,
                    })}
@ -594,7 +606,7 @@ export const SightEdit = observer(() => {
                          renderInput={(params) => (
                            <TextField
                              {...params}
-                              label="Выберите водяной знак (Левый верх)"
+                              label="Выберите водный знак (Левый верх)"
                              margin="normal"
                              variant="outlined"
                              error={!!errors.arms}
@ -638,7 +650,7 @@ export const SightEdit = observer(() => {
                          renderInput={(params) => (
                            <TextField
                              {...params}
-                              label="Выберите водяной знак (Правый вверх)"
+                              label="Выберите водный знак (Правый вверх)"
                              margin="normal"
                              variant="outlined"
                              error={!!errors.arms}
@ -668,14 +680,14 @@ export const SightEdit = observer(() => {
                          setLeftArticleData(undefined);
                        }}
                        getOptionLabel={(item) => {
-                          return item ? item.service_name : "";
+                          return item ? item.heading : "";
                        }}
                        isOptionEqualToValue={(option, value) => {
                          return option.id === value?.id;
                        }}
                        filterOptions={(options, { inputValue }) => {
                          return options.filter((option) =>
-                            option.service_name
+                            option.heading
                              .toLowerCase()
                              .includes(inputValue.toLowerCase())
                          );
@ -782,7 +794,6 @@ export const SightEdit = observer(() => {
                  color: (theme) =>
                    theme.palette.mode === "dark" ? "grey.300" : "grey.800",
                  mb: 3,
                  mt: 3,
                }}
              >
                {name}
@ -979,14 +990,14 @@ export const SightEdit = observer(() => {
                        setLeftArticleData(undefined);
                      }}
                      getOptionLabel={(item) => {
-                        return item ? item.service_name : "";
+                        return item ? item.heading : "";
                      }}
                      isOptionEqualToValue={(option, value) => {
                        return option.id === value?.id;
                      }}
                      filterOptions={(options, { inputValue }) => {
                        return options.filter((option) =>
-                          option.service_name
+                          option.heading
                            .toLowerCase()
                            .includes(inputValue.toLowerCase())
                        );
@ -1468,7 +1479,7 @@ export const SightEdit = observer(() => {
                      renderInput={(params) => (
                        <TextField
                          {...params}
-                          label="Выберите водяной знак (Левый верх)"
+                          label="Выберите водный знак (Левый верх)"
                          margin="normal"
                          variant="outlined"
                          error={!!errors.arms}
@ -1512,7 +1523,7 @@ export const SightEdit = observer(() => {
                      renderInput={(params) => (
                        <TextField
                          {...params}
-                          label="Выберите водяной знак (Правый вверх)"
+                          label="Выберите водный знак (Правый вверх)"
                          margin="normal"
                          variant="outlined"
                          error={!!errors.arms}
@ -1524,7 +1535,7 @@ export const SightEdit = observer(() => {
                />
                <TextField
-                  value={coordinates}
+                  value={`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
                  onChange={handleCoordinatesChange}
                  error={!!(errors as any)?.latitude}
                  helperText={(errors as any)?.latitude?.message}
@ -1676,7 +1687,7 @@ export const SightEdit = observer(() => {
                            : "grey.800",
                      }}
                    >
-                      {coordinatesPreview}
+                      {`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
                    </Box>
                  </Typography>
                </Box>
--- a/src/pages/sight/list.tsx
+++ b/src/pages/sight/list.tsx
@ -56,7 +56,6 @@ export const SightList = observer(() => {
        display: "flex",
        align: "left",
        headerAlign: "left",
        flex: 1,
      },
      {
        field: "latitude",
--- a/src/pages/station/create.tsx
+++ b/src/pages/station/create.tsx
@ -41,19 +41,40 @@ export const StationCreate = () => {
    },
  });
-  const [coordinates, setCoordinates] = useState("");
+  const [coordinatesPreview, setCoordinatesPreview] = useState({
    latitude: "",
    longitude: "",
  });
  const handleCoordinatesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setCoordinates(e.target.value);
+    const [lat, lon] = e.target.value.split(",").map((s) => s.trim());
-    const [lat, lon] = e.target.value
+    setCoordinatesPreview({
-      .replace(/,/g, "") // Remove all commas from the string
+      latitude: lat,
-      .split(" ")
+      longitude: lon,
-      .map((s) => s.trim());
+    });
    console.log(lat, lon);
    setValue("latitude", lat);
    setValue("longitude", lon);
  };
  const latitudeContent = watch("latitude");
  const longitudeContent = watch("longitude");
  useEffect(() => {
    setCoordinatesPreview({
      latitude: latitudeContent || "",
      longitude: longitudeContent || "",
    });
  }, [latitudeContent, longitudeContent]);
  useEffect(() => {
    const latitude = getValues("latitude");
    const longitude = getValues("longitude");
    if (latitude && longitude) {
      setCoordinatesPreview({
        latitude: latitude,
        longitude: longitude,
      });
    }
  }, [getValues]);
  const directions = [
    {
      label: "Прямой",
@ -167,7 +188,7 @@ export const StationCreate = () => {
          )}
        />
        <TextField
-          value={coordinates}
+          value={`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
          onChange={handleCoordinatesChange}
          error={!!(errors as any)?.latitude}
          helperText={(errors as any)?.latitude?.message}
@ -177,11 +198,10 @@ export const StationCreate = () => {
          type="text"
          label={"Координаты *"}
        />
        <input
          type="hidden"
          {...register("latitude", {
-            value: coordinates.split(",")[0],
+            value: coordinatesPreview.latitude,
            setValueAs: (value) => {
              if (value === "") {
                return 0;
@ -193,7 +213,7 @@ export const StationCreate = () => {
        <input
          type="hidden"
          {...register("longitude", {
-            value: coordinates.split(",")[1],
+            value: coordinatesPreview.longitude,
            setValueAs: (value) => {
              if (value === "") {
                return 0;
--- a/src/pages/station/edit.tsx
+++ b/src/pages/station/edit.tsx
@ -40,24 +40,24 @@ export const StationEdit = observer(() => {
      system_name: "",
      description: "",
      address: "",
-      latitude: 0,
+      latitude: "",
-      longitude: 0,
+      longitude: "",
    },
    en: {
      name: "",
      system_name: "",
      description: "",
      address: "",
-      latitude: 0,
+      latitude: "",
-      longitude: 0,
+      longitude: "",
    },
    zh: {
      name: "",
      system_name: "",
      description: "",
      address: "",
-      latitude: 0,
+      latitude: "",
-      longitude: 0,
+      longitude: "",
    },
  });
@ -69,8 +69,8 @@ export const StationEdit = observer(() => {
        system_name: watch("system_name") ?? "",
        description: watch("description") ?? "",
        address: watch("address") ?? "",
-        latitude: Number(watch("latitude")) || 0,
+        latitude: watch("latitude") ?? "",
-        longitude: Number(watch("longitude")) || 0,
+        longitude: watch("longitude") ?? "",
      },
    }));
  };
@ -120,7 +120,7 @@ export const StationEdit = observer(() => {
    if (stationData[language as keyof typeof stationData]?.name) {
      setValue("name", stationData[language as keyof typeof stationData]?.name);
    }
-    if (stationData[language as keyof typeof stationData]?.system_name) {
+    if (stationData[language as keyof typeof stationData]?.address) {
      setValue(
        "system_name",
        stationData[language as keyof typeof stationData]?.system_name || ""
@ -132,20 +132,16 @@ export const StationEdit = observer(() => {
        stationData[language as keyof typeof stationData]?.description || ""
      );
    }
-    if (
+    if (stationData[language as keyof typeof stationData]?.latitude) {
      stationData[language as keyof typeof stationData]?.latitude !== undefined
    ) {
      setValue(
        "latitude",
-        stationData[language as keyof typeof stationData]?.latitude || 0
+        stationData[language as keyof typeof stationData]?.latitude || ""
      );
    }
-    if (
+    if (stationData[language as keyof typeof stationData]?.longitude) {
      stationData[language as keyof typeof stationData]?.longitude !== undefined
    ) {
      setValue(
        "longitude",
-        stationData[language as keyof typeof stationData]?.longitude || 0
+        stationData[language as keyof typeof stationData]?.longitude || ""
      );
    }
  }, [language, stationData, setValue]);
@ -154,36 +150,28 @@ export const StationEdit = observer(() => {
    setLanguageAction("ru");
  }, []);
  const [coordinates, setCoordinates] = useState("");
  const { id: stationId } = useParams<{ id: string }>();
  const handleCoordinatesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const [lat, lon] = e.target.value.split(",").map((s) => s.trim());
    setCoordinatesPreview({
      latitude: lat,
      longitude: lon,
    });
    setValue("latitude", lat);
    setValue("longitude", lon);
  };
  const latitudeContent = watch("latitude");
  const longitudeContent = watch("longitude");
  useEffect(() => {
-    if (latitudeContent && longitudeContent) {
+    setCoordinatesPreview({
-      setCoordinates(`${latitudeContent} ${longitudeContent}`);
+      latitude: latitudeContent || "",
-    }
+      longitude: longitudeContent || "",
    });
  }, [latitudeContent, longitudeContent]);
  const handleCoordinatesChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setCoordinates(e.target.value);
    if (e.target.value) {
      const [lat, lon] = e.target.value
        .replace(/,/g, "") // Remove all commas from the string
        .split(" ")
        .map((s) => s.trim());
      setCoordinates(`${lat ?? 0} ${lon ?? 0}`);
      setValue("latitude", lat ?? 0);
      setValue("longitude", lon ?? 0);
    } else {
      setCoordinates("");
      setValue("latitude", "");
      setValue("longitude", "");
    }
  };
  const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
    resource: "city",
    onSearch: (value) => [
@ -204,8 +192,6 @@ export const StationEdit = observer(() => {
    },
  });
  const cityId = watch("city_id");
  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Box
@ -294,7 +280,7 @@ export const StationEdit = observer(() => {
        />
        <TextField
-          value={coordinates}
+          value={`${coordinatesPreview.latitude}, ${coordinatesPreview.longitude}`}
          onChange={handleCoordinatesChange}
          error={!!(errors as any)?.latitude}
          helperText={(errors as any)?.latitude?.message}
@ -307,28 +293,12 @@ export const StationEdit = observer(() => {
        <input
          type="hidden"
          {...register("latitude", {
-            valueAsNumber: true,
+            value: coordinatesPreview.latitude,
            value: Number(coordinates.split(" ")[0]),
            setValueAs: (value) => {
              if (value === "") {
                return 0;
              }
              return Number(value);
            },
          })}
        />
        <input
          type="hidden"
-          {...register("longitude", {
+          {...register("longitude", { value: coordinatesPreview.longitude })}
            valueAsNumber: true,
            value: Number(coordinates.split(" ")[1]),
            setValueAs: (value) => {
              if (value === "") {
                return 0;
              }
              return Number(value);
            },
          })}
        />
        <Controller
@ -383,7 +353,6 @@ export const StationEdit = observer(() => {
          fields={sightFields}
          title="достопримечательности"
          dragAllowed={false}
          cityId={cityId}
        />
      )}
    </Edit>
--- a/src/pages/vehicle/list.tsx
+++ b/src/pages/vehicle/list.tsx
@ -7,41 +7,14 @@ import {
  ShowButton,
  useDataGrid,
 } from "@refinedev/mui";
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import { VEHICLE_TYPES } from "../../lib/constants";
 import { localeText } from "../../locales/ru/localeText";
 import { observer } from "mobx-react-lite";
 import { languageStore } from "../../store/LanguageStore";
 import { axiosInstance } from "@providers";
 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 { dataGridProps } = useDataGrid({
@ -98,38 +71,6 @@ export const VehicleList = observer(() => {
          );
        },
      },
      {
        field: "carrier-name",
        headerName: "Перевозчик",
        type: "string",
        minWidth: 150,
        display: "flex",
        flex: 1,
        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,
        flex: 1,
        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",
      //   headerName: "Город",
@ -152,7 +93,7 @@ export const VehicleList = observer(() => {
          return (
            <>
              <EditButton hideText recordItemId={row.id} />
-              {/* <ShowButton hideText recordItemId={row.id} /> */}
+              <ShowButton hideText recordItemId={row.id} />
              <DeleteButton
                hideText
                confirmTitle="Вы уверены?"
@ -163,7 +104,7 @@ export const VehicleList = observer(() => {
        },
      },
    ],
-    [carriers, cities]
+    []
  );
  return (
--- a/src/providers/data.ts
+++ b/src/providers/data.ts
@ -3,7 +3,7 @@ import dataProvider from "@refinedev/simple-rest";
 import { TOKEN_KEY } from "@providers";
 import axios from "axios";
-
+import { languageStore } from "@stores";
 export const axiosInstance = axios.create({
  baseURL: import.meta.env.VITE_KRBL_API,
 });
@ -22,22 +22,6 @@ axiosInstance.interceptors.request.use((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;
 export const customDataProvider = dataProvider(apiUrl, axiosInstance);
Author	SHA1	Message	Date
itoshi	9bf294e124	feat: Add `service_name` for article list All checks were successful release-tag / release-image (push) Successful in 2m23s Details	2025-05-26 17:24:04 +03:00
itoshi	db5e9d9fc4	fix: Fix station create page All checks were successful release-tag / release-image (push) Successful in 2m16s Details	2025-05-25 23:16:33 +03:00
itoshi	b1a4edc136	fix: Try to fix dockerfile All checks were successful release-tag / release-image (push) Successful in 2m18s Details	2025-05-25 20:20:09 +03:00
itoshi	3110683c7d	fix: Fix `notification` usage Some checks failed release-tag / release-image (push) Failing after 59s Details	2025-05-25 20:10:23 +03:00
itoshi	16640cb116	fix: Fix shit Andrey code Some checks failed release-tag / release-image (push) Failing after 1m53s Details	2025-05-25 19:43:38 +03:00
itoshi	28826123ec	feat: Add `snapshots` page All checks were successful release-tag / release-image (push) Successful in 2m23s Details	2025-05-21 18:31:19 +03:00
Alexander Lazarenko	bd19f1dc88	Add automated Docker image publishing workflow All checks were successful release-tag / release-image (push) Successful in 2m20s Details Introduced a Gitea workflow to automate Docker image building and publishing upon push events. This setup includes QEMU configuration, DockerHub authentication, and multi-platform build support using Docker Buildx.	2025-05-20 20:20:42 +03:00
itoshi	0fac04be0d	fix: Fix `Dockerfile` for correct url response	2025-05-20 17:27:39 +03:00
itoshi	8a443882b5	feat: Redesign `route direction` with `media_order` input	2025-05-20 16:59:57 +03:00
Spynder	7c363f1730	underline	2025-05-20 00:09:57 +03:00
Spynder	d9bbe4f234	carriers	2025-05-19 22:20:26 +03:00
Spynder	6eaa94778b	changed according to the third tour	2025-05-19 21:53:34 +03:00
Spynder	34423b73a3	changes for 15.05	2025-05-17 05:55:57 +03:00
Spynder	ab1fd6b22a	last changes, possibly	2025-05-15 04:32:23 +03:00
Spynder	042b53e6a4	last changes	2025-05-14 14:42:45 +03:00
Spynder	177653d84a	remaining fixes	2025-05-07 00:02:24 +03:00
Spynder	fba2fb0f5c	more fixes	2025-05-06 17:56:05 +03:00
Spynder	86947d6332	moved city into other tab	2025-05-05 03:40:08 +03:00
Spynder	7c920eb81e	fix fix fix fix	2025-05-05 02:54:46 +03:00
Spynder	4b20c94b70	map3	2025-05-05 01:19:59 +03:00
Spynder	fb16891de3	Merge branch 'update' into preview	2025-05-04 22:41:12 +03:00
Spynder	6454af90d3	map 2	2025-05-04 22:40:44 +03:00
Spynder	275eef597b	preview	2025-05-03 01:17:37 +03:00
itoshi	65532f7074	rewrite code with edit article in sight page	2025-05-01 00:10:50 +03:00
itoshi	dc483d62de	added old preview components	2025-04-29 22:10:50 +03:00
itoshi	03829aacc6	station edit in the route edit page	2025-04-29 21:16:53 +03:00
itoshi	a1a2264758	sight edit page update	2025-04-27 16:18:52 +03:00
itoshi	0d325a3aa6	added more types for media	2025-04-27 11:27:22 +03:00
itoshi	abd054b8d4	delete useless querykey	2025-04-25 05:54:41 +03:00
itoshi	9927c0afd6	sight edit update	2025-04-25 05:23:07 +03:00
itoshi	463c593a0e	route edit fixed with drag and drop tool	2025-04-21 15:34:11 +03:00
itoshi	9e34a71e14	fetching data from api for route preview	2025-04-20 10:55:12 +03:00
itoshi	029a2de97e	added route preview with updated dnd	2025-04-16 13:51:44 +03:00
itoshi	4dd149f2af	added route preview	2025-04-15 21:12:43 +03:00
itoshi	b6449b02c0	update route preview	2025-04-14 01:03:58 +03:00
itoshi	607012bd47	abstract urls	2025-04-11 19:24:45 +03:00