}`})
- )}
- {fields.map(({label, data, render}) => (
-
-
- ,
-)
+root.render(
-
+
+
{/* Форма создания */}
-
-
+
+ (
+
{/* Блок предпросмотра */}
@@ -74,14 +140,15 @@ export const ArticleCreate = () => {
sx={{
flex: 1,
p: 2,
- maxHeight: 'calc(100vh - 200px)',
- overflowY: 'auto',
- position: 'sticky',
+ maxHeight: "calc(100vh - 200px)",
+ overflowY: "auto",
+ position: "sticky",
top: 16,
borderRadius: 2,
- border: '1px solid',
- borderColor: 'primary.main',
- bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'background.paper' : '#fff'),
+ border: "1px solid",
+ borderColor: "primary.main",
+ bgcolor: (theme) =>
+ theme.palette.mode === "dark" ? "background.paper" : "#fff",
}}
>
@@ -93,7 +160,8 @@ export const ArticleCreate = () => {
variant="h4"
gutterBottom
sx={{
- color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
+ color: (theme) =>
+ theme.palette.mode === "dark" ? "grey.300" : "grey.800",
mb: 3,
}}
>
@@ -103,46 +171,48 @@ export const ArticleCreate = () => {
{/* Markdown контент */}
(theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
+ color: (theme) =>
+ theme.palette.mode === "dark" ? "grey.300" : "grey.800",
},
- '& a': {
- color: 'primary.main',
- textDecoration: 'none',
- '&:hover': {
- textDecoration: 'underline',
+ "& a": {
+ color: "primary.main",
+ textDecoration: "none",
+ "&:hover": {
+ textDecoration: "underline",
},
},
- '& blockquote': {
- borderLeft: '4px solid',
- borderColor: 'primary.main',
+ "& blockquote": {
+ borderLeft: "4px solid",
+ borderColor: "primary.main",
pl: 2,
my: 2,
- color: 'text.secondary',
+ color: "text.secondary",
},
- '& code': {
- bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'grey.900' : 'grey.100'),
+ "& code": {
+ bgcolor: (theme) =>
+ theme.palette.mode === "dark" ? "grey.900" : "grey.100",
p: 0.5,
borderRadius: 0.5,
- color: 'primary.main',
+ color: "primary.main",
},
}}
>
- {preview}
+ {preview}
- )
-}
+ );
+});
diff --git a/src/pages/article/edit.tsx b/src/pages/article/edit.tsx
index 275f3ba..d7bd3bb 100644
--- a/src/pages/article/edit.tsx
+++ b/src/pages/article/edit.tsx
@@ -1,96 +1,167 @@
-import {Box, TextField, Typography, Paper} from '@mui/material'
-import {Edit} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
-import {Controller} from 'react-hook-form'
-import {useParams} from 'react-router'
-import React, {useState, useEffect} from 'react'
-import ReactMarkdown from 'react-markdown'
-import {useList} from '@refinedev/core'
+import { Box, TextField, Typography, Paper } from "@mui/material";
+import { Edit } from "@refinedev/mui";
+import { useForm } from "@refinedev/react-hook-form";
+import { Controller, FieldValues } from "react-hook-form";
+import { useParams } from "react-router";
+import React, { useState, useEffect, useMemo } from "react";
+import ReactMarkdown from "react-markdown";
+import { useList } from "@refinedev/core";
-import {MarkdownEditor} from '../../components/MarkdownEditor'
-import {LinkedItems} from '../../components/LinkedItems'
-import {MediaItem, mediaFields} from './types'
-import {TOKEN_KEY} from '../../authProvider'
-import 'easymde/dist/easymde.min.css'
+import { MarkdownEditor, LinkedItems } from "@components";
+import { MediaItem, mediaFields } from "./types";
+import "easymde/dist/easymde.min.css";
+import { EVERY_LANGUAGE, Languages, languageStore, META_LANGUAGE } from "@stores";
+import { observer } from "mobx-react-lite";
+import { LanguageSelector, MediaView } from "@ui";
+import rehypeRaw from "rehype-raw";
-const MemoizedSimpleMDE = React.memo(MarkdownEditor)
+const MemoizedSimpleMDE = React.memo(MarkdownEditor);
+
+export const ArticleEdit = observer(() => {
+ const { language, setLanguageAction } = languageStore;
+
+ const [articleData, setArticleData] = useState({
+ heading: EVERY_LANGUAGE(""),
+ body: EVERY_LANGUAGE("")
+ });
+ const { id: articleId } = useParams<{ id: string }>();
+ const simpleMDEOptions = useMemo(
+ () => ({
+ placeholder: "Введите контент в формате Markdown...",
+ spellChecker: false,
+ }),
+ []
+ );
-export const ArticleEdit = () => {
const {
saveButtonProps,
+ refineCore: { onFinish },
register,
control,
+ handleSubmit,
watch,
- formState: {errors},
- } = useForm()
+ formState: { errors },
+ setValue,
+ getValues,
+ } = useForm<{ heading: string; body: string }>({
+ refineCoreProps: META_LANGUAGE(language)
+ });
- const {id: articleId} = useParams<{id: string}>()
- const [preview, setPreview] = useState('')
- const [headingPreview, setHeadingPreview] = useState('')
-
- // Получаем привязанные медиа
- const {data: mediaData} = useList({
- resource: `article/${articleId}/media`,
- queryOptions: {
- enabled: !!articleId,
- },
- })
-
- // Следим за изменениями в полях body и heading
- const bodyContent = watch('body')
- const headingContent = watch('heading')
+ const bodyContent = watch("body");
+ const headingContent = watch("heading");
useEffect(() => {
- setPreview(bodyContent || '')
+ console.log(bodyContent)
}, [bodyContent])
useEffect(() => {
- setHeadingPreview(headingContent || '')
- }, [headingContent])
+ console.log(articleData)
+ }, [articleData])
- const simpleMDEOptions = React.useMemo(
- () => ({
- placeholder: 'Введите контент в формате Markdown...',
- spellChecker: false,
- }),
- [],
- )
+ useEffect(() => {
+ console.log("Trying to udpate")
+ //setHeadingPreview(articleData.heading[language] ?? "");
+ //setPreview(articleData.body[language] ?? "");
+ if(articleData.heading[language])
+ setValue("heading", articleData.heading[language]);
+ if(articleData.body[language])
+ setValue("body", articleData.body[language]);
+ }, [language]);
+
+ function updateTranslations(update: boolean = true) {
+ const newArticleData = {
+ heading: {
+ ...articleData.heading,
+ [language]: watch("heading") ?? "",
+ },
+ body: {
+ ...articleData.body,
+ [language]: watch("body") ?? "",
+ }
+ }
+ if(update) setArticleData(newArticleData);
+ return newArticleData;
+ }
+
+ const handleLanguageChange = (lang: Languages) => {
+ updateTranslations();
+ setLanguageAction(lang);
+ console.log("Setting preview to", articleData.body[lang] ?? "")
+ };
+
+ const handleFormSubmit = handleSubmit((values: FieldValues) => {
+ return onFinish({
+ translations: updateTranslations(false)
+ });
+ });
+
+ const { data: mediaData, refetch } = useList({
+ resource: `article/${articleId}/media`,
+ });
+
+ useEffect(() => {
+ return () => {
+ setLanguageAction("ru");
+ };
+ }, [setLanguageAction]);
return (
-
-
+
+
{/* Форма редактирования */}
-
-
+
+
+ (
- (
+
+ type="edit"
+ parentId={articleId}
+ parentResource="article"
+ childResource="media"
+ fields={mediaFields}
+ title="медиа"
+ onUpdate={refetch}
/>
)}
- />
-
- {articleId && type="edit" parentId={articleId} parentResource="article" childResource="media" fields={mediaFields} title="медиа" />}
+
{/* Блок предпросмотра */}
@@ -98,14 +169,15 @@ export const ArticleEdit = () => {
sx={{
flex: 1,
p: 2,
- maxHeight: 'calc(100vh - 200px)',
- overflowY: 'auto',
- position: 'sticky',
+ maxHeight: "calc(100vh - 200px)",
+ overflowY: "auto",
+ position: "sticky",
top: 16,
borderRadius: 2,
- border: '1px solid',
- borderColor: 'primary.main',
- bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'background.paper' : '#fff'),
+ border: "1px solid",
+ borderColor: "primary.main",
+ bgcolor: (theme) =>
+ theme.palette.mode === "dark" ? "background.paper" : "#fff",
}}
>
@@ -117,66 +189,69 @@ export const ArticleEdit = () => {
variant="h4"
gutterBottom
sx={{
- color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
+ color: (theme) =>
+ theme.palette.mode === "dark" ? "grey.300" : "grey.800",
mb: 3,
}}
>
- {headingPreview}
+ {headingContent}
{/* Markdown контент */}
(theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
+ color: (theme) =>
+ theme.palette.mode === "dark" ? "grey.300" : "grey.800",
},
- '& a': {
- color: 'primary.main',
- textDecoration: 'none',
- '&:hover': {
- textDecoration: 'underline',
+ "& a": {
+ color: "primary.main",
+ textDecoration: "none",
+ "&:hover": {
+ textDecoration: "underline",
},
},
- '& blockquote': {
- borderLeft: '4px solid',
- borderColor: 'primary.main',
+ "& blockquote": {
+ borderLeft: "4px solid",
+ borderColor: "primary.main",
pl: 2,
my: 2,
- color: 'text.secondary',
+ color: "text.secondary",
},
- '& code': {
- bgcolor: (theme) => (theme.palette.mode === 'dark' ? 'grey.900' : 'grey.100'),
+ "& code": {
+ bgcolor: (theme) =>
+ theme.palette.mode === "dark" ? "grey.900" : "grey.100",
p: 0.5,
borderRadius: 0.5,
- color: 'primary.main',
+ color: "primary.main",
},
}}
>
- {preview}
+ {bodyContent}
{/* Привязанные медиа */}
{mediaData?.data && mediaData.data.length > 0 && (
-
+
Привязанные медиа:
@@ -184,23 +259,28 @@ export const ArticleEdit = () => {
- }`})
+ {/* 
+ /> */}
))}
@@ -209,5 +289,5 @@ export const ArticleEdit = () => {
- )
-}
+ );
+});
diff --git a/src/pages/article/list.tsx b/src/pages/article/list.tsx
index 16b9d2b..fe2dc6a 100644
--- a/src/pages/article/list.tsx
+++ b/src/pages/article/list.tsx
@@ -1,37 +1,58 @@
-import {type GridColDef} from '@mui/x-data-grid'
-import {CustomDataGrid} from '../../components/CustomDataGrid'
-import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import React from 'react'
+import { type GridColDef } from "@mui/x-data-grid";
+import { CustomDataGrid } from "../../components/CustomDataGrid";
+import {
+ DeleteButton,
+ EditButton,
+ List,
+ ShowButton,
+ useDataGrid,
+} from "@refinedev/mui";
+import React from "react";
-import {localeText} from '../../locales/ru/localeText'
+import { localeText } from "../../locales/ru/localeText";
+import { observer } from "mobx-react-lite";
+import { languageStore, META_LANGUAGE } from "@stores";
-export const ArticleList = () => {
- const {dataGridProps} = useDataGrid({
- resource: 'article/',
- })
+export const ArticleList = observer(() => {
+ const { language } = languageStore;
+
+ const { dataGridProps } = useDataGrid({
+ resource: "article",
+ ...META_LANGUAGE(language),
+ });
const columns = React.useMemo(
() => [
{
- field: 'id',
- headerName: 'ID',
- type: 'number',
+ field: "id",
+ headerName: "ID",
+ type: "number",
minWidth: 70,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
},
{
- field: 'heading',
- headerName: 'Заголовок',
- type: 'string',
+ field: "service_name",
+ headerName: "Заголовок",
+ type: "string",
minWidth: 300,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
flex: 1,
},
// {
+ // field: "service_name",
+ // headerName: "Сервисное название (тест)",
+ // type: "string",
+ // minWidth: 300,
+ // display: "flex",
+ // align: "left",
+ // headerAlign: "left",
+ // flex: 1,
+ // },
+ // {
// field: 'body',
// headerName: 'Контент',
// type: 'string',
@@ -41,32 +62,38 @@ export const ArticleList = () => {
// flex: 1,
// },
{
- field: 'actions',
- headerName: 'Действия',
- align: 'right',
- headerAlign: 'center',
+ field: "actions",
+ headerName: "Действия",
+ align: "right",
+ headerAlign: "center",
minWidth: 120,
- display: 'flex',
+ display: "flex",
sortable: false,
filterable: false,
disableColumnMenu: true,
- renderCell: function render({row}) {
+ renderCell: function render({ row }) {
return (
<>
-
+
+ (
+ render={({ field }) => (
option.id === field.value) || null}
+ value={
+ cityAutocompleteProps.options.find(
+ (option) => option.id === field.value
+ ) ?? null
+ }
onChange={(_, value) => {
- field.onChange(value?.id || '')
+ field.onChange(value?.id ?? "");
}}
getOptionLabel={(item) => {
- return item ? item.name : ''
+ return item ? item.name : "";
}}
isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
+ return option.id === value?.id;
}}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()))
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.name.toLowerCase().includes(inputValue.toLowerCase())
+ );
}}
- renderInput={(params) =>
+
option.id === field.value) || null}
+ value={
+ mediaAutocompleteProps.options.find(
+ (option) => option.id === field.value
+ ) ?? null
+ }
onChange={(_, value) => {
- field.onChange(value?.id || '')
+ field.onChange(value?.id ?? "");
}}
getOptionLabel={(item) => {
- return item ? item.media_name : ''
+ return item ? item.media_name : "";
}}
isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
+ return option.id === value?.id;
}}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.media_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
}}
- renderInput={(params) =>
- )
-}
+ );
+});
diff --git a/src/pages/carrier/edit.tsx b/src/pages/carrier/edit.tsx
index 22b4631..9a94010 100644
--- a/src/pages/carrier/edit.tsx
+++ b/src/pages/carrier/edit.tsx
@@ -1,171 +1,208 @@
-import {Autocomplete, Box, TextField} from '@mui/material'
-import {Edit, useAutocomplete} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
-import {Controller} from 'react-hook-form'
+import { Autocomplete, Box, TextField } from "@mui/material";
+import { Edit, useAutocomplete } from "@refinedev/mui";
+import { useForm } from "@refinedev/react-hook-form";
+import { languageStore, META_LANGUAGE } from "@stores";
+import { LanguageSelector, MediaView } from "@ui";
+import { observer } from "mobx-react-lite";
+import { Controller } from "react-hook-form";
-export const CarrierEdit = () => {
+export const CarrierEdit = observer(() => {
+ const { language } = languageStore;
const {
saveButtonProps,
register,
control,
- formState: {errors},
- } = useForm()
+ watch,
+ formState: { errors },
+ } = useForm({
+ refineCoreProps: META_LANGUAGE(language)
+ });
- const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
- resource: 'city',
+ const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
+ resource: `city`,
onSearch: (value) => [
{
- field: 'name',
- operator: 'contains',
+ field: "name",
+ operator: "contains",
value,
},
],
- })
+ ...META_LANGUAGE("ru")
+ });
- const {autocompleteProps: mediaAutocompleteProps} = useAutocomplete({
- resource: 'media',
+ const { autocompleteProps: mediaAutocompleteProps } = useAutocomplete({
+ resource: "media",
onSearch: (value) => [
{
- field: 'media_name',
- operator: 'contains',
+ field: "media_name",
+ operator: "contains",
value,
},
- ],
- })
+ ]
+ });
+
return (
-
+
+ (
+ render={({ field }) => (
option.id === field.value) || null}
+ value={
+ cityAutocompleteProps.options.find(
+ (option) => option.id === field.value
+ ) ?? null
+ }
onChange={(_, value) => {
- field.onChange(value?.id || '')
+ field.onChange(value?.id ?? "");
}}
getOptionLabel={(item) => {
- return item ? item.name : ''
+ return item ? item.name : "";
}}
isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
+ return option.id === value?.id;
}}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()))
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.name.toLowerCase().includes(inputValue.toLowerCase())
+ );
}}
- renderInput={(params) =>
+
option.id === field.value) || null}
+ value={
+ mediaAutocompleteProps.options.find(
+ (option) => option.id === field.value
+ ) ?? null
+ }
onChange={(_, value) => {
- field.onChange(value?.id || '')
+ field.onChange(value?.id ?? "");
}}
getOptionLabel={(item) => {
- return item ? item.media_name : ''
+ return item ? item.media_name : "";
}}
isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
+ return option.id === value?.id;
}}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.media_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase()) &&
+ option.media_type == 3
+ );
}}
- renderInput={(params) =>
+
- )
-}
+ );
+});
diff --git a/src/pages/carrier/list.tsx b/src/pages/carrier/list.tsx
index 143a95e..bc9b0eb 100644
--- a/src/pages/carrier/list.tsx
+++ b/src/pages/carrier/list.tsx
@@ -1,110 +1,181 @@
-import {type GridColDef} from '@mui/x-data-grid'
-import {CustomDataGrid} from '../../components/CustomDataGrid'
-import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import React from 'react'
+import { type GridColDef } from "@mui/x-data-grid";
+import { CustomDataGrid } from "../../components/CustomDataGrid";
+import {
+ DeleteButton,
+ EditButton,
+ List,
+ ShowButton,
+ useDataGrid,
+} from "@refinedev/mui";
+import React from "react";
+import { observer } from "mobx-react-lite";
+import { cityStore } from "../../store/CityStore";
+import { languageStore } from "../../store/LanguageStore";
-export const CarrierList = () => {
- const {dataGridProps} = useDataGrid({})
+export const CarrierList = observer(() => {
+ const { city_id } = cityStore;
+ const { language } = languageStore;
+
+ const { dataGridProps } = useDataGrid({
+ resource: "carrier",
+ meta: {
+ headers: {
+ "Accept-Language": language,
+ },
+ },
+ filters: {
+ permanent: [
+ {
+ field: "cityID",
+ operator: "eq",
+ value: city_id === "0" ? null : city_id,
+ },
+ ],
+ },
+ });
const columns = React.useMemo(
() => [
{
- field: 'id',
- headerName: 'ID',
- type: 'number',
+ field: "id",
+ headerName: "ID",
+ type: "number",
minWidth: 50,
- align: 'left',
- headerAlign: 'left',
+ align: "left",
+ headerAlign: "left",
},
{
- field: 'city_id',
- headerName: 'ID Города',
- type: 'number',
+ field: "city_id",
+ headerName: "ID Города",
+ type: "number",
minWidth: 100,
- align: 'left',
- headerAlign: 'left',
+ align: "left",
+ headerAlign: "left",
},
{
- field: 'full_name',
- headerName: 'Полное имя',
- type: 'string',
+ field: "full_name",
+ headerName: "Полное имя",
+ type: "string",
minWidth: 200,
},
{
- field: 'short_name',
- headerName: 'Короткое имя',
- type: 'string',
+ field: "short_name",
+ headerName: "Короткое имя",
+ type: "string",
minWidth: 125,
},
{
- field: 'city',
- headerName: 'Город',
- type: 'string',
+ field: "city",
+ headerName: "Город",
+ type: "string",
minWidth: 125,
- align: 'left',
- headerAlign: 'left',
+ align: "left",
+ headerAlign: "left",
flex: 1,
},
{
- field: 'main_color',
- headerName: 'Основной цвет',
- type: 'string',
+ field: "main_color",
+ headerName: "Основной цвет",
+ type: "string",
minWidth: 150,
- renderCell: ({value}) => {value} ,
+ label: "Основной цвет",
+ data: "main_color",
+ render: (value: string) => (
+
+ {value}
+
+ ),
},
{
- label: 'Цвет левого виджета',
- data: 'left_color',
- render: (value: string) => {value} ,
+ label: "Цвет левого виджета",
+ data: "left_color",
+ render: (value: string) => (
+
+ {value}
+
+ ),
},
{
- label: 'Цвет правого виджета',
- data: 'right_color',
- render: (value: string) => {value} ,
+ label: "Цвет правого виджета",
+ data: "right_color",
+ render: (value: string) => (
+
+ {value}
+
+ ),
},
- {label: 'Слоган', data: 'slogan'},
+ { label: "Слоган", data: "slogan" },
{
- label: 'Логотип',
- data: 'logo',
- render: (value: number) => }`})
,
+ label: "Логотип",
+ data: "logo",
+ render: (value: number) => (
+
+
+ ),
},
- ]
+ ];
return (
- {fields.map(({label, data, render}) => (
+ {fields.map(({ label, data, render }) => (
{label}
- {render ? render(record?.[data]) :
))}
- )
-}
+ );
+};
diff --git a/src/pages/city/create.tsx b/src/pages/city/create.tsx
index bb1a93c..78a0fec 100644
--- a/src/pages/city/create.tsx
+++ b/src/pages/city/create.tsx
@@ -1,69 +1,224 @@
-import {Autocomplete, Box, TextField} from '@mui/material'
-import {Create, useAutocomplete} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
-import {Controller} from 'react-hook-form'
+import { Autocomplete, Box, TextField } from "@mui/material";
+import { Create, useAutocomplete } from "@refinedev/mui";
+import { useForm } from "@refinedev/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
+ >(EVERY_LANGUAGE(""));
+
const {
saveButtonProps,
- refineCore: {formLoading},
+ refineCore: { formLoading },
register,
control,
- formState: {errors},
- } = useForm({})
+ setValue,
+ watch,
+ handleSubmit,
+ formState: { errors },
+ } = useForm<{
+ name: string;
+ country_code: string;
+ arms: string;
+ }>({});
- const {autocompleteProps: countryAutocompleteProps} = useAutocomplete({
- resource: 'country',
- })
+ // 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]);
- const {autocompleteProps: mediaAutocompleteProps} = useAutocomplete({
- resource: 'media',
+ // 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",
+ });
+
+ const { autocompleteProps: mediaAutocompleteProps } = useAutocomplete({
+ resource: "media",
onSearch: (value) => [
{
- field: 'media_name',
- operator: 'contains',
+ field: "media_name",
+ 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 (
-
-
+
+
+ (
+ render={({ field }) => (
option.code === field.value) || null}
- onChange={(_, value) => {
- field.onChange(value?.code || '')
+ value={
+ countryAutocompleteProps.options.find(
+ (option: { code: string; name: string; id: string }) =>
+ option.code === field.value
+ ) || null
+ }
+ onChange={(
+ _,
+ value: { code: string; name: string; id: string } | null
+ ) => {
+ field.onChange(value?.code || "");
}}
- getOptionLabel={(item) => {
- return item ? item.name : ''
+ getOptionLabel={(item: {
+ code: string;
+ name: string;
+ id: string;
+ }) => {
+ return item ? item.name : "";
}}
- isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
+ isOptionEqualToValue={(
+ option: { code: string; name: string; id: string },
+ value: { code: string; name: string; id: string }
+ ) => {
+ return option.id === value?.id;
}}
- renderInput={(params) => option.id === field.value) || null}
- onChange={(_, value) => {
- field.onChange(value?.id || '')
+ value={
+ mediaAutocompleteProps.options.find(
+ (option: { id: string; media_name: string }) =>
+ option.id === field.value
+ ) || null
+ }
+ onChange={(
+ _,
+ value: { id: string; media_name: string } | null
+ ) => {
+ field.onChange(value?.id || "");
}}
- getOptionLabel={(item) => {
- return item ? item.media_name : ''
+ getOptionLabel={(item: { id: string; media_name: string }) => {
+ return item ? item.media_name : "";
}}
- isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
+ isOptionEqualToValue={(
+ option: { id: string; media_name: string },
+ value: { id: string; media_name: string }
+ ) => {
+ return option.id === value?.id;
}}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
+ filterOptions={(
+ options: { id: string; media_name: string }[],
+ { inputValue }
+ ) => {
+ return options.filter((option) =>
+ option.media_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
}}
- renderInput={(params) =>
- )
-}
+ );
+};
diff --git a/src/pages/city/edit.tsx b/src/pages/city/edit.tsx
index 12e42d4..0f5bcf9 100644
--- a/src/pages/city/edit.tsx
+++ b/src/pages/city/edit.tsx
@@ -1,18 +1,26 @@
import {Autocomplete, Box, TextField} from '@mui/material'
import {Edit, useAutocomplete} from '@refinedev/mui'
import {useForm} from '@refinedev/react-hook-form'
+import { EVERY_LANGUAGE, Languages, languageStore, META_LANGUAGE } from '@stores'
+import { LanguageSelector } from '@ui'
+import { observer } from 'mobx-react-lite'
+import { useEffect, useState } from 'react'
import {Controller} from 'react-hook-form'
-export const CityEdit = () => {
+export const CityEdit = observer(() => {
+ const { language } = languageStore;
const {
saveButtonProps,
register,
control,
formState: {errors},
- } = useForm({})
+ } = useForm({
+ refineCoreProps: META_LANGUAGE(language)
+ })
const {autocompleteProps: countryAutocompleteProps} = useAutocomplete({
resource: 'country',
+ ...META_LANGUAGE(language)
})
const {autocompleteProps: mediaAutocompleteProps} = useAutocomplete({
@@ -24,11 +32,14 @@ export const CityEdit = () => {
value,
},
],
- })
+ ...META_LANGUAGE(language)
+ });
return (
+ {
)
-}
+})
\ No newline at end of file
diff --git a/src/pages/city/list.tsx b/src/pages/city/list.tsx
index d477288..32682a7 100644
--- a/src/pages/city/list.tsx
+++ b/src/pages/city/list.tsx
@@ -1,78 +1,100 @@
-import {type GridColDef} from '@mui/x-data-grid'
-import {CustomDataGrid} from '../../components/CustomDataGrid'
-import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import React from 'react'
+import { type GridColDef } from "@mui/x-data-grid";
+import { CustomDataGrid } from "../../components/CustomDataGrid";
+import {
+ DeleteButton,
+ EditButton,
+ List,
+ ShowButton,
+ useDataGrid,
+} from "@refinedev/mui";
+import React, { useEffect } from "react";
-export const CityList = () => {
- const {dataGridProps} = useDataGrid({})
+import { observer } from "mobx-react-lite";
+import { languageStore } from "../../store/LanguageStore";
+
+export const CityList = observer(() => {
+ const { language } = languageStore;
+
+ const { dataGridProps } = useDataGrid({
+ resource: "city",
+ meta: {
+ headers: {
+ "Accept-Language": language,
+ },
+ },
+ });
const columns = React.useMemo(
() => [
{
- field: 'id',
- headerName: 'ID',
- type: 'number',
+ field: "id",
+ headerName: "ID",
+ type: "number",
minWidth: 50,
- align: 'left',
- headerAlign: 'left',
+ align: "left",
+ headerAlign: "left",
},
{
- field: 'country_code',
- headerName: 'Код страны',
- type: 'string',
+ field: "country_code",
+ headerName: "Код страны",
+ type: "string",
minWidth: 150,
- align: 'left',
- headerAlign: 'left',
+ align: "left",
+ headerAlign: "left",
},
{
- field: 'country',
- headerName: 'Cтрана',
- type: 'string',
+ field: "country",
+ headerName: "Cтрана",
+ type: "string",
minWidth: 150,
- align: 'left',
- headerAlign: 'left',
+ align: "left",
+ headerAlign: "left",
},
{
- field: 'name',
- headerName: 'Название',
- type: 'string',
+ field: "name",
+ headerName: "Название",
+ type: "string",
minWidth: 150,
flex: 1,
},
{
- field: 'arms',
- headerName: 'Герб',
- type: 'string',
+ field: "arms",
+ headerName: "Герб",
+ type: "string",
flex: 1,
},
{
- field: 'actions',
- headerName: 'Действия',
- cellClassName: 'city-actions',
+ field: "actions",
+ headerName: "Действия",
+ cellClassName: "city-actions",
minWidth: 120,
- display: 'flex',
- align: 'right',
- headerAlign: 'center',
+ display: "flex",
+ align: "right",
+ headerAlign: "center",
sortable: false,
filterable: false,
disableColumnMenu: true,
- renderCell: function render({row}) {
+ renderCell: function render({ row }) {
return (
<>
+ ),
+ },
+ ];
return (
- {fields.map(({label, data, render}) => (
+ {fields.map(({ label, data, render }) => (
{label}
- {render ? render(record?.[data]) :
))}
- )
-}
+ );
+};
diff --git a/src/pages/country/edit.tsx b/src/pages/country/edit.tsx
index 651526d..1d48f29 100644
--- a/src/pages/country/edit.tsx
+++ b/src/pages/country/edit.tsx
@@ -1,44 +1,56 @@
-import {Box, TextField} from '@mui/material'
-import {Edit} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
+import { Box, TextField } from "@mui/material";
+import { Edit } from "@refinedev/mui";
+import { useForm } from "@refinedev/react-hook-form";
+import { languageStore, META_LANGUAGE } from "@stores";
+import { LanguageSelector } from "@ui";
+import { observer } from "mobx-react-lite";
-export const CountryEdit = () => {
+export const CountryEdit = observer(() => {
+ const { language } = languageStore;
const {
saveButtonProps,
register,
- formState: {errors},
- } = useForm({})
+ formState: { errors },
+ } = useForm({
+ refineCoreProps: META_LANGUAGE(language)
+ });
return (
-
+
+
- )
-}
+ );
+});
diff --git a/src/pages/country/list.tsx b/src/pages/country/list.tsx
index 7bfe487..a592e95 100644
--- a/src/pages/country/list.tsx
+++ b/src/pages/country/list.tsx
@@ -1,56 +1,82 @@
-import {type GridColDef} from '@mui/x-data-grid'
-import {CustomDataGrid} from '../../components/CustomDataGrid'
-import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import React from 'react'
+import { type GridColDef } from "@mui/x-data-grid";
+import { CustomDataGrid } from "../../components/CustomDataGrid";
+import {
+ DeleteButton,
+ EditButton,
+ List,
+ ShowButton,
+ useDataGrid,
+} from "@refinedev/mui";
+import React from "react";
+import { languageStore } from "../../store/LanguageStore";
+import { observer } from "mobx-react-lite";
-export const CountryList = () => {
- const {dataGridProps} = useDataGrid({})
+export const CountryList = observer(() => {
+ const { language } = languageStore;
+
+ const { dataGridProps } = useDataGrid({
+ resource: "country",
+ meta: {
+ headers: {
+ "Accept-Language": language,
+ },
+ },
+ });
const columns = React.useMemo(
() => [
{
- field: 'code',
- headerName: 'Код',
- type: 'string',
+ field: "code",
+ headerName: "Код",
+ type: "string",
minWidth: 150,
- align: 'left',
- headerAlign: 'left',
+ align: "left",
+ headerAlign: "left",
},
{
- field: 'name',
- headerName: 'Название',
- type: 'string',
+ field: "name",
+ headerName: "Название",
+ type: "string",
minWidth: 150,
flex: 1,
},
{
- field: 'actions',
- headerName: 'Действия',
- cellClassName: 'country-actions',
+ field: "actions",
+ headerName: "Действия",
+ cellClassName: "country-actions",
minWidth: 120,
- display: 'flex',
- align: 'right',
- headerAlign: 'center',
+ display: "flex",
+ align: "right",
+ headerAlign: "center",
sortable: false,
filterable: false,
disableColumnMenu: true,
- renderCell: function render({row}) {
+ renderCell: function render({ row }) {
return (
<>
({})
+ getValues,
+ } = useForm({});
- const selectedMediaType = watch('media_type')
+ const selectedMediaType = watch("media_type");
+ const file = getValues("file");
- const {selectedFile, previewUrl, handleFileChange, handleMediaTypeChange} = useMediaFileUpload({
- selectedMediaType,
- setError,
- clearErrors,
- setValue,
- })
+ const { selectedFile, previewUrl, handleFileChange, handleMediaTypeChange } =
+ useMediaFileUpload({
+ selectedMediaType,
+ setError,
+ clearErrors,
+ setValue,
+ });
return (
{
...saveButtonProps,
disabled: !!errors.file || !selectedFile,
onClick: handleSubmit((data) => {
+ console.log(data);
if (data.file) {
- const formData = new FormData()
- formData.append('media_name', data.media_name)
- formData.append('filename', data.file.name)
- formData.append('type', String(data.media_type))
- formData.append('file', data.file)
+ const formData = new FormData();
+ formData.append("media_name", data.media_name);
+ formData.append("filename", data.file.name);
+ formData.append("type", String(data.media_type));
+ formData.append("file", data.file);
- console.log('Отправляемые данные:')
+ console.log("Отправляемые данные:");
for (const pair of formData.entries()) {
- console.log(pair[0] + ': ' + pair[1])
+ console.log(pair[0] + ": " + pair[1]);
}
- onFinish(formData)
+ onFinish(formData);
}
}),
}}
@@ -63,47 +83,97 @@ export const MediaCreate = () => {
control={control}
name="media_type"
rules={{
- required: 'Это поле является обязательным',
+ required: "Это поле является обязательным",
}}
- render={({field}) => (
+ render={({ field }) => (
option.value === field.value) || null}
+ value={
+ MEDIA_TYPES.find((option) => option.value === field.value) || null
+ }
onChange={(_, value) => {
- field.onChange(value?.value || null)
- handleMediaTypeChange(value?.value || null)
+ field.onChange(value?.value || null);
+ handleMediaTypeChange(value?.value || null);
}}
getOptionLabel={(item) => {
- return item ? item.label : ''
+ return item ? item.label : "";
}}
isOptionEqualToValue={(option, value) => {
- return option.value === value?.value
+ return option.value === value?.value;
}}
- renderInput={(params) =>
-
-
-
- )
-}
+ );
+};
diff --git a/src/pages/media/edit.tsx b/src/pages/media/edit.tsx
index 732eb4e..8db550c 100644
--- a/src/pages/media/edit.tsx
+++ b/src/pages/media/edit.tsx
@@ -1,26 +1,44 @@
-import {Box, TextField, Button, Typography, Autocomplete} from '@mui/material'
-import {Edit} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
-import {useEffect} from 'react'
-import {useShow} from '@refinedev/core'
-import {Controller} from 'react-hook-form'
+import {
+ Box,
+ TextField,
+ Button,
+ Typography,
+ Autocomplete,
+} from "@mui/material";
+import { Edit } from "@refinedev/mui";
+import { useForm } from "@refinedev/react-hook-form";
+import { useEffect } from "react";
+import { useShow } from "@refinedev/core";
+import { Controller } from "react-hook-form";
-import {MEDIA_TYPES} from '../../lib/constants'
-import {ALLOWED_IMAGE_TYPES, ALLOWED_VIDEO_TYPES, useMediaFileUpload} from '../../components/media/MediaFormUtils'
-import {TOKEN_KEY} from '../../authProvider'
+import { TOKEN_KEY } from "@providers";
+import { MEDIA_TYPES } from "@lib";
+import {
+ ALLOWED_IMAGE_TYPES,
+ ALLOWED_VIDEO_TYPES,
+ ALLOWED_ICON_TYPES,
+ ALLOWED_WATERMARK_TYPES,
+ ALLOWED_PANORAMA_TYPES,
+ ALLOWED_3D_MODEL_TYPES,
+ useMediaFileUpload,
+} from "../../components/media/MediaFormUtils";
+import { languageStore, META_LANGUAGE } from "@stores";
+import { observer } from "mobx-react-lite";
+import { LanguageSelector, MediaData, MediaView } from "@ui";
type MediaFormValues = {
- media_name: string
- media_type: number
- file?: File
-}
+ media_name: string;
+ media_type: number;
+ file?: File;
+};
-export const MediaEdit = () => {
+export const MediaEdit = observer(() => {
+ const { language } = languageStore;
const {
saveButtonProps,
- refineCore: {onFinish},
+ refineCore: { onFinish },
register,
- formState: {errors},
+ formState: { errors },
setValue,
handleSubmit,
watch,
@@ -29,32 +47,43 @@ export const MediaEdit = () => {
control,
} = useForm({
defaultValues: {
- media_name: '',
- media_type: '',
+ media_name: "",
+ media_type: "",
file: undefined,
},
- })
+ refineCoreProps: META_LANGUAGE(language)
+ });
- const {query} = useShow()
- const {data} = query
- const record = data?.data
+ const { query } = useShow();
+ const { data } = query;
+ const record = data?.data;
- const selectedMediaType = watch('media_type')
+ const selectedMediaType = watch("media_type");
- const {selectedFile, previewUrl, setPreviewUrl, handleFileChange, handleMediaTypeChange} = useMediaFileUpload({
+ const {
+ selectedFile,
+ previewUrl,
+ setPreviewUrl,
+ handleFileChange,
+ handleMediaTypeChange,
+ } = useMediaFileUpload({
selectedMediaType,
setError,
clearErrors,
setValue,
- })
+ });
useEffect(() => {
if (record?.id) {
- setPreviewUrl(`https://wn.krbl.ru/media/${record.id}/download?token=${localStorage.getItem(TOKEN_KEY)}`)
- setValue('media_name', record?.media_name || '')
- setValue('media_type', record?.media_type)
+ setPreviewUrl(
+ `${import.meta.env.VITE_KRBL_MEDIA}${
+ record.id
+ }/download?token=${localStorage.getItem(TOKEN_KEY)}`
+ );
+ setValue("media_name", record?.media_name || "");
+ setValue("media_type", record?.media_type);
}
- }, [record, setValue, setPreviewUrl])
+ }, [record, setValue, setPreviewUrl]);
return (
{
media_name: data.media_name,
filename: selectedFile?.name || record?.filename,
type: Number(data.media_type),
- }
- onFinish(formData)
+ };
+ onFinish(formData);
}),
}}
>
-
+
+ (
+ render={({ field }) => (
option.value === field.value) || null}
+ value={
+ MEDIA_TYPES.find((option) => option.value === field.value) ||
+ null
+ }
onChange={(_, value) => {
- field.onChange(value?.value || null)
- handleMediaTypeChange(value?.value || null)
+ field.onChange(value?.value || null);
+ handleMediaTypeChange(value?.value || null);
}}
getOptionLabel={(item) => {
- return item ? item.label : ''
+ return item ? item.label : "";
}}
isOptionEqualToValue={(option, value) => {
- return option.value === value?.value
+ return option.value === value?.value;
}}
- renderInput={(params) =>
-
-
- )
-}
+ );
+});
diff --git a/src/pages/media/list.tsx b/src/pages/media/list.tsx
index dfed817..b70320a 100644
--- a/src/pages/media/list.tsx
+++ b/src/pages/media/list.tsx
@@ -1,83 +1,106 @@
-import {type GridColDef} from '@mui/x-data-grid'
-import {CustomDataGrid} from '../../components/CustomDataGrid'
-import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import React from 'react'
-import {MEDIA_TYPES} from '../../lib/constants'
+import { type GridColDef } from "@mui/x-data-grid";
+import { CustomDataGrid } from "../../components/CustomDataGrid";
+import {
+ DeleteButton,
+ EditButton,
+ List,
+ ShowButton,
+ useDataGrid,
+} from "@refinedev/mui";
+import React from "react";
+import { MEDIA_TYPES } from "../../lib/constants";
+import { observer } from "mobx-react-lite";
-import {localeText} from '../../locales/ru/localeText'
+import { localeText } from "../../locales/ru/localeText";
+import { languageStore, META_LANGUAGE } from "@stores";
-export const MediaList = () => {
- const {dataGridProps} = useDataGrid({})
+export const MediaList = observer(() => {
+ const { language } = languageStore;
+ const { dataGridProps } = useDataGrid({
+ ...META_LANGUAGE(language),
+ });
const columns = React.useMemo(
() => [
{
- field: 'id',
- headerName: 'ID',
- type: 'number',
+ field: "id",
+ headerName: "ID",
+ type: "number",
minWidth: 350,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
},
{
- field: 'filename',
- headerName: 'Название файла',
- type: 'string',
+ field: "filename",
+ headerName: "Название файла",
+ type: "string",
minWidth: 250,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
},
{
- field: 'media_name',
- headerName: 'Название',
- type: 'string',
+ field: "media_name",
+ headerName: "Название",
+ type: "string",
minWidth: 150,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
+ flex: 1,
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
},
{
- field: 'media_type',
- headerName: 'Тип',
- type: 'string',
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
+ field: "media_type",
+ headerName: "Тип",
+ type: "string",
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
flex: 1,
renderCell: (params) => {
- const value = params.row.media_type
- return MEDIA_TYPES.find((type) => type.value === value)?.label || value
+ const value = params.row.media_type;
+ return (
+ MEDIA_TYPES.find((type) => type.value === value)?.label || value
+ );
},
},
{
- field: 'actions',
- headerName: 'Действия',
+ field: "actions",
+ headerName: "Действия",
minWidth: 120,
- display: 'flex',
- align: 'right',
- headerAlign: 'center',
+ display: "flex",
+ align: "right",
+ headerAlign: "center",
sortable: false,
filterable: false,
disableColumnMenu: true,
- renderCell: function render({row}) {
+ renderCell: function render({ row }) {
return (
<>
- {record && record.media_type === 1 && (
- 
- )}
-
- {record && record.media_type === 2 && (
-
-
- Видео доступно для скачивания по ссылке:
-
-
-
- )}
-
- {fields.map(({label, data, render}) => (
+
{label}
-
))}
+
+
+ Доступно для скачивания по ссылке:
+
+
+
- )
-}
+ );
+};
diff --git a/src/pages/route-preview/Constants.ts b/src/pages/route-preview/Constants.ts
new file mode 100644
index 0000000..a4b646f
--- /dev/null
+++ b/src/pages/route-preview/Constants.ts
@@ -0,0 +1,9 @@
+export const UP_SCALE = 30000;
+export const PATH_WIDTH = 15;
+export const STATION_RADIUS = 20;
+export const STATION_OUTLINE_WIDTH = 10;
+export const SIGHT_SIZE = 60;
+export const SCALE_FACTOR = 50;
+
+export const BACKGROUND_COLOR = 0x111111;
+export const PATH_COLOR = 0xff4d4d;
\ No newline at end of file
diff --git a/src/pages/route-preview/InfiniteCanvas.tsx b/src/pages/route-preview/InfiniteCanvas.tsx
new file mode 100644
index 0000000..516d307
--- /dev/null
+++ b/src/pages/route-preview/InfiniteCanvas.tsx
@@ -0,0 +1,230 @@
+import { FederatedMouseEvent, FederatedWheelEvent } from "pixi.js";
+import { Component, ReactNode, useEffect, useState, useRef } from "react";
+import { useTransform } from "./TransformContext";
+import { useMapData } from "./MapDataContext";
+import { SCALE_FACTOR } from "./Constants";
+import { useApplication } from "@pixi/react";
+
+class ErrorBoundary extends Component<
+ { children: ReactNode },
+ { hasError: boolean }
+> {
+ state = { hasError: false };
+
+ static getDerivedStateFromError() {
+ return { hasError: true };
+ }
+
+ componentDidCatch(error: Error, info: React.ErrorInfo) {
+ console.error("Error caught:", error, info);
+ }
+
+ render() {
+ return this.state.hasError ? (undefined);
+
+ useEffect(() => {
+ const canvas = applicationRef?.app.canvas;
+ if (!canvas) return;
+
+ const canvasRect = canvas.getBoundingClientRect();
+ const canvasLeft = canvasRect.left;
+ const canvasTop = canvasRect.top;
+ const centerX = window.innerWidth / 2 - canvasLeft;
+ const centerY = window.innerHeight / 2 - canvasTop;
+ setScreenCenter({ x: centerX, y: centerY });
+ }, [applicationRef?.app.canvas, setScreenCenter]);
+
+ const handlePointerDown = (e: FederatedMouseEvent) => {
+ setIsDragging(true);
+ setIsUserInteracting(true); // Устанавливаем флаг взаимодействия пользователя
+ setStartPosition({
+ x: position.x,
+ y: position.y,
+ });
+ setStartMousePosition({
+ x: e.globalX,
+ y: e.globalY,
+ });
+ setStartRotation(rotation);
+ e.stopPropagation();
+ };
+
+ // Устанавливаем rotation только при изменении originalRouteData и отсутствии взаимодействия пользователя
+ useEffect(() => {
+ const newRotation = originalRouteData?.rotate ?? 0;
+
+ // Обновляем rotation только если:
+ // 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(
+ startMousePosition.y - center.y,
+ 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;
+
+ // Update rotation
+ setRotation(startRotation + rotationDiff);
+
+ const cosDelta = Math.cos(rotationDiff);
+ const sinDelta = Math.sin(rotationDiff);
+
+ setPosition({
+ x:
+ center.x * (1 - cosDelta) +
+ startPosition.x * cosDelta +
+ (center.y - startPosition.y) * sinDelta,
+ y:
+ center.y * (1 - cosDelta) +
+ startPosition.y * cosDelta +
+ (startPosition.x - center.x) * sinDelta,
+ });
+ } else {
+ setRotation(startRotation);
+ setPosition({
+ x: startPosition.x - startMousePosition.x + e.globalX,
+ y: startPosition.y - startMousePosition.y + e.globalY,
+ });
+ }
+ e.stopPropagation();
+ };
+
+ const handlePointerUp = (e: FederatedMouseEvent) => {
+ setIsDragging(false);
+ // Сбрасываем флаг взаимодействия через небольшую задержку
+ // чтобы избежать немедленного срабатывания useEffect
+ setTimeout(() => {
+ setIsUserInteracting(false);
+ }, 100);
+ e.stopPropagation();
+ };
+
+ const handleWheel = (e: FederatedWheelEvent) => {
+ e.stopPropagation();
+ setIsUserInteracting(true); // Устанавливаем флаг при зуме
+
+ // Get mouse position relative to canvas
+ const mouseX = e.globalX - position.x;
+ const mouseY = e.globalY - position.y;
+
+ // Calculate new scale
+ const scaleMin = (routeData?.scale_min ?? 10) / SCALE_FACTOR;
+ const scaleMax = (routeData?.scale_max ?? 20) / SCALE_FACTOR;
+
+ const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1; // Zoom out/in
+ const newScale = Math.max(scaleMin, Math.min(scaleMax, scale * zoomFactor));
+ const actualZoomFactor = newScale / scale;
+
+ if (scale === newScale) {
+ // Сбрасываем флаг, если зум не изменился
+ setTimeout(() => {
+ setIsUserInteracting(false);
+ }, 100);
+ return;
+ }
+
+ // Update position to zoom towards mouse cursor
+ setPosition({
+ x: position.x + mouseX * (1 - actualZoomFactor),
+ y: position.y + mouseY * (1 - actualZoomFactor),
+ });
+
+ setScale(newScale);
+
+ // Сбрасываем флаг взаимодействия через задержку
+ setTimeout(() => {
+ setIsUserInteracting(false);
+ }, 100);
+ };
+
+ useEffect(() => {
+ applicationRef?.app.render();
+ console.log(position, scale, rotation);
+ }, [position, scale, rotation]);
+
+ return (
+
+ {applicationRef?.app && (
+ {
+ const canvas = applicationRef.app.canvas;
+ g.clear();
+ g.rect(0, 0, canvas?.width ?? 0, canvas?.height ?? 0);
+ g.fill("#111");
+ }}
+ eventMode={"static"}
+ interactive
+ onPointerDown={handlePointerDown}
+ onGlobalPointerMove={handlePointerMove}
+ onPointerUp={handlePointerUp}
+ onPointerUpOutside={handlePointerUp}
+ onWheel={handleWheel}
+ />
+ )}
+
+ {children}
+
+ {/* Show center of the screen.
+ {
+ g.clear();
+ const center = screenCenter ?? {x: 0, y: 0};
+ g.circle(center.x, center.y, 1);
+ g.fill("#fff");
+ }}
+ /> */}
+
+ );
+}
diff --git a/src/pages/route-preview/LeftSidebar.tsx b/src/pages/route-preview/LeftSidebar.tsx
new file mode 100644
index 0000000..0e87c0e
--- /dev/null
+++ b/src/pages/route-preview/LeftSidebar.tsx
@@ -0,0 +1,89 @@
+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 (
+
+
+
+
+ ![logo]({"/Emblem.svg"})
+
+ При поддержке Правительства Санкт-Петербурга
+
+
+
+
+
+
+
+
+
+ ![logo]({"/GET.png"})
+
+
+
+ #ВсемПоПути
+
+
+ );
+}
diff --git a/src/pages/route-preview/MapDataContext.tsx b/src/pages/route-preview/MapDataContext.tsx
new file mode 100644
index 0000000..71dc694
--- /dev/null
+++ b/src/pages/route-preview/MapDataContext.tsx
@@ -0,0 +1,311 @@
+import { useApiUrl } from "@refinedev/core";
+import { useParams } from "react-router";
+import {
+ createContext,
+ ReactNode,
+ useContext,
+ useEffect,
+ useMemo,
+ useState,
+} from "react";
+import {
+ RouteData,
+ SightData,
+ SightPatchData,
+ StationData,
+ 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;
+ sightData?: SightData[];
+
+ isRouteLoading: boolean;
+ isStationLoading: boolean;
+ isSightLoading: boolean;
+ setScaleRange: (min: number, max: number) => void;
+ setMapRotation: (rotation: number) => void;
+ setMapCenter: (x: number, y: number) => void;
+ setStationOffset: (stationId: number, x: number, y: number) => void;
+ setSightCoordinates: (
+ sightId: number,
+ latitude: number,
+ longitude: number
+ ) => void;
+ saveChanges: () => void;
+}>({
+ originalRouteData: undefined,
+ originalStationData: undefined,
+ originalSightData: undefined,
+ routeData: undefined,
+ stationData: undefined,
+ sightData: undefined,
+
+ isRouteLoading: true,
+ isStationLoading: true,
+ isSightLoading: true,
+ setScaleRange: () => {},
+ setMapRotation: () => {},
+ setMapCenter: () => {},
+ setStationOffset: () => {},
+ setSightCoordinates: () => {},
+ saveChanges: () => {},
+});
+
+type StationDataWithLanguage = {
+ [key: string]: StationData[];
+};
+export const MapDataProvider = observer(
+ ({ children }: Readonly<{ children: ReactNode }>) => {
+ const { id: routeId } = useParams<{ id: string }>();
+ const apiUrl = useApiUrl();
+
+ const [originalRouteData, setOriginalRouteData] = useState();
+ const [originalStationData, setOriginalStationData] =
+ useState();
+ const [originalSightData, setOriginalSightData] = useState();
+
+ const [routeData, setRouteData] = useState();
+ const [stationData, setStationData] = useState({
+ RU: [],
+ EN: [],
+ ZH: [],
+ });
+ const [sightData, setSightData] = useState();
+
+ const [routeChanges, setRouteChanges] = useState>({});
+ const [stationChanges, setStationChanges] = useState(
+ []
+ );
+ const [sightChanges, setSightChanges] = useState([]);
+ const { language } = languageStore;
+
+ const [isRouteLoading, setIsRouteLoading] = useState(true);
+ const [isStationLoading, setIsStationLoading] = useState(true);
+ const [isSightLoading, setIsSightLoading] = useState(true);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ try {
+ setIsRouteLoading(true);
+ setIsStationLoading(true);
+ setIsSightLoading(true);
+
+ const [
+ routeResponse,
+ ruStationResponse,
+ enStationResponse,
+ zhStationResponse,
+ sightResponse,
+ ] = await Promise.all([
+ axiosInstanceForGet(language).get(`/route/${routeId}`),
+ axiosInstanceForGet("ru").get(`/route/${routeId}/station`),
+ axiosInstanceForGet("en").get(`/route/${routeId}/station`),
+ axiosInstanceForGet("zh").get(`/route/${routeId}/station`),
+ axiosInstanceForGet(language).get(`/route/${routeId}/sight`),
+ ]);
+
+ setOriginalRouteData(routeResponse.data as RouteData);
+ setOriginalStationData(ruStationResponse.data as StationData[]);
+ setStationData({
+ ru: ruStationResponse.data as StationData[],
+ en: enStationResponse.data as StationData[],
+ zh: zhStationResponse.data as StationData[],
+ });
+ setOriginalSightData(sightResponse.data as SightData[]);
+
+ setIsRouteLoading(false);
+ setIsStationLoading(false);
+ setIsSightLoading(false);
+ } catch (error) {
+ console.error("Error fetching data:", error);
+ setIsRouteLoading(false);
+ setIsStationLoading(false);
+ setIsSightLoading(false);
+ }
+ };
+
+ fetchData();
+ }, [routeId]);
+
+ useEffect(() => {
+ // combine changes with original data
+ if (originalRouteData)
+ setRouteData({ ...originalRouteData, ...routeChanges });
+ if (originalSightData) setSightData(originalSightData);
+ }, [
+ originalRouteData,
+ originalSightData,
+ routeChanges,
+ stationChanges,
+ sightChanges,
+ ]);
+
+ function setScaleRange(min: number, max: number) {
+ setRouteChanges((prev) => {
+ return { ...prev, scale_min: min, scale_max: max };
+ });
+ }
+
+ function setMapRotation(rotation: number) {
+ setRouteChanges((prev) => {
+ return { ...prev, rotate: rotation };
+ });
+ }
+
+ function setMapCenter(x: number, y: number) {
+ setRouteChanges((prev) => {
+ return { ...prev, center_latitude: x, center_longitude: y };
+ });
+ }
+
+ async function saveChanges() {
+ await axiosInstance.patch(`/route/${routeId}`, routeData);
+ await saveStationChanges();
+ await saveSightChanges();
+ }
+
+ async function saveStationChanges() {
+ for (const station of stationChanges) {
+ const response = await axiosInstance.patch(
+ `/route/${routeId}/station`,
+ station
+ );
+ }
+ }
+
+ async function saveSightChanges() {
+ console.log("sightChanges", sightChanges);
+ for (const sight of sightChanges) {
+ const response = await axiosInstance.patch(
+ `/route/${routeId}/sight`,
+ sight
+ );
+ }
+ }
+
+ function setStationOffset(stationId: number, x: number, y: number) {
+ setStationChanges((prev) => {
+ let found = prev.find((station) => station.station_id === stationId);
+ if (found) {
+ found.offset_x = x;
+ found.offset_y = y;
+
+ return prev.map((station) => {
+ if (station.station_id === stationId) {
+ return found;
+ }
+ return station;
+ });
+ } else {
+ const foundStation = stationData.ru?.find(
+ (station) => station.id === stationId
+ );
+ if (foundStation) {
+ return [
+ ...prev,
+ {
+ station_id: stationId,
+ offset_x: x,
+ offset_y: y,
+ transfers: foundStation.transfers,
+ },
+ ];
+ }
+ return prev;
+ }
+ });
+ }
+
+ function setSightCoordinates(
+ sightId: number,
+ latitude: number,
+ longitude: number
+ ) {
+ setSightChanges((prev) => {
+ let found = prev.find((sight) => sight.sight_id === sightId);
+ if (found) {
+ found.latitude = latitude;
+ found.longitude = longitude;
+
+ return prev.map((sight) => {
+ if (sight.sight_id === sightId) {
+ return found;
+ }
+ return sight;
+ });
+ } else {
+ const foundSight = sightData?.find((sight) => sight.id === sightId);
+ if (foundSight) {
+ return [
+ ...prev,
+ {
+ sight_id: sightId,
+ latitude,
+ longitude,
+ },
+ ];
+ }
+ return prev;
+ }
+ });
+ }
+
+ useEffect(() => {
+ console.log("sightChanges", sightChanges);
+ }, [sightChanges]);
+
+ const value = useMemo(
+ () => ({
+ originalRouteData,
+ originalStationData,
+ originalSightData,
+ routeData,
+ stationData,
+ sightData,
+ isRouteLoading,
+ isStationLoading,
+ isSightLoading,
+ setScaleRange,
+ setMapRotation,
+ setMapCenter,
+ saveChanges,
+ setStationOffset,
+ setSightCoordinates,
+ }),
+ [
+ originalRouteData,
+ originalStationData,
+ originalSightData,
+ routeData,
+ stationData,
+ sightData,
+ isRouteLoading,
+ isStationLoading,
+ isSightLoading,
+ ]
+ );
+
+ return (
+
+ {children}
+
+ );
+ }
+);
+
+export const useMapData = () => {
+ const context = useContext(MapDataContext);
+ if (!context) {
+ throw new Error("useMapData must be used within a MapDataProvider");
+ }
+ return context;
+};
diff --git a/src/pages/route-preview/RightSidebar.tsx b/src/pages/route-preview/RightSidebar.tsx
new file mode 100644
index 0000000..09a7347
--- /dev/null
+++ b/src/pages/route-preview/RightSidebar.tsx
@@ -0,0 +1,232 @@
+import { Button, Stack, TextField, Typography } from "@mui/material";
+import { useMapData } from "./MapDataContext";
+import { useEffect, useState } from "react";
+import { useTransform } from "./TransformContext";
+import { coordinatesToLocal, localToCoordinates } from "./utils";
+
+export function RightSidebar() {
+ const {
+ routeData,
+ setScaleRange,
+ saveChanges,
+ originalRouteData,
+ setMapRotation,
+ setMapCenter,
+ } = useMapData();
+ const {
+ rotation,
+ position,
+ screenToLocal,
+ screenCenter,
+ rotateToAngle,
+ setTransform,
+ } = useTransform();
+ const [minScale, setMinScale] = useState(1);
+ const [maxScale, setMaxScale] = useState(10);
+ const [localCenter, setLocalCenter] = useState<{ x: number; y: number }>({
+ x: 0,
+ y: 0,
+ });
+ const [rotationDegrees, setRotationDegrees] = useState(0);
+
+ useEffect(() => {
+ if (originalRouteData) {
+ setMinScale(originalRouteData.scale_min ?? 1);
+ setMaxScale(originalRouteData.scale_max ?? 10);
+ setRotationDegrees(originalRouteData.rotate ?? 0);
+ setLocalCenter({
+ x: originalRouteData.center_latitude ?? 0,
+ y: originalRouteData.center_longitude ?? 0,
+ });
+ }
+ }, [originalRouteData]);
+
+ useEffect(() => {
+ if (minScale && maxScale) {
+ setScaleRange(minScale, maxScale);
+ }
+ }, [minScale, maxScale]);
+
+ useEffect(() => {
+ setRotationDegrees(
+ ((Math.round((rotation * 180) / Math.PI) % 360) + 360) % 360
+ );
+ }, [rotation]);
+ useEffect(() => {
+ setMapRotation(rotationDegrees);
+ }, [rotationDegrees]);
+
+ useEffect(() => {
+ const center = screenCenter ?? { x: 0, y: 0 };
+ const localCenter = screenToLocal(center.x, center.y);
+ const coordinates = localToCoordinates(localCenter.x, localCenter.y);
+ setLocalCenter({ x: coordinates.latitude, y: coordinates.longitude });
+ }, [position]);
+
+ useEffect(() => {
+ setMapCenter(localCenter.x, localCenter.y);
+ }, [localCenter]);
+
+ function setRotationFromDegrees(degrees: number) {
+ rotateToAngle((degrees * Math.PI) / 180);
+ }
+
+ function pan({ x, y }: { x: number; y: number }) {
+ const coordinates = coordinatesToLocal(x, y);
+ setTransform(coordinates.x, coordinates.y);
+ }
+
+ if (!routeData) {
+ console.error("routeData is null");
+ return null;
+ }
+
+ return (
+
+
+ Детали о достопримечательностях
+
+
+
+ setMinScale(Number(e.target.value))}
+ style={{ backgroundColor: "#222", borderRadius: 4 }}
+ sx={{
+ "& .MuiInputLabel-root": {
+ color: "#fff",
+ },
+ "& .MuiInputBase-input": {
+ color: "#fff",
+ },
+ }}
+ slotProps={{
+ input: {
+ min: 0.1,
+ },
+ }}
+ />
+ setMaxScale(Number(e.target.value))}
+ style={{ backgroundColor: "#222", borderRadius: 4, color: "#fff" }}
+ sx={{
+ "& .MuiInputLabel-root": {
+ color: "#fff",
+ },
+ "& .MuiInputBase-input": {
+ color: "#fff",
+ },
+ }}
+ slotProps={{
+ input: {
+ min: 0.1,
+ },
+ }}
+ />
+
+
+ {
+ const value = Number(e.target.value);
+ if (!isNaN(value)) {
+ setRotationFromDegrees(value);
+ }
+ }}
+ onKeyDown={(e) => {
+ if (e.key === "Enter") {
+ e.currentTarget.blur();
+ }
+ }}
+ style={{ backgroundColor: "#222", borderRadius: 4 }}
+ sx={{
+ "& .MuiInputLabel-root": {
+ color: "#fff",
+ },
+ "& .MuiInputBase-input": {
+ color: "#fff",
+ },
+ }}
+ slotProps={{
+ input: {
+ min: 0,
+ max: 360,
+ },
+ }}
+ />
+
+
+ {
+ 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": {
+ color: "#fff",
+ },
+ "& .MuiInputBase-input": {
+ color: "#fff",
+ },
+ }}
+ />
+ {
+ 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": {
+ color: "#fff",
+ },
+ "& .MuiInputBase-input": {
+ color: "#fff",
+ },
+ }}
+ />
+
+
+
+
+ );
+}
diff --git a/src/pages/route-preview/Sight.tsx b/src/pages/route-preview/Sight.tsx
new file mode 100644
index 0000000..039ecfa
--- /dev/null
+++ b/src/pages/route-preview/Sight.tsx
@@ -0,0 +1,119 @@
+import { useEffect, useState } from "react";
+import { useTransform } from "./TransformContext";
+import { SightData } from "./types";
+import { Assets, FederatedMouseEvent, Graphics, Texture } from "pixi.js";
+import { COLORS } from "../../contexts/color-mode/theme";
+import { SIGHT_SIZE, UP_SCALE } from "./Constants";
+import { coordinatesToLocal, localToCoordinates } from "./utils";
+import { useMapData } from "./MapDataContext";
+
+interface SightProps {
+ sight: SightData;
+ id: number;
+}
+
+export function Sight({
+ sight, id
+}: Readonly) {
+ const { rotation, scale } = useTransform();
+ const { setSightCoordinates } = useMapData();
+
+ const [position, setPosition] = useState(coordinatesToLocal(sight.latitude, sight.longitude));
+ const [isDragging, setIsDragging] = useState(false);
+ const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });
+ const [startMousePosition, setStartMousePosition] = useState({ x: 0, y: 0 });
+
+ const handlePointerDown = (e: FederatedMouseEvent) => {
+ setIsDragging(true);
+ setStartPosition({
+ x: position.x,
+ y: position.y
+ });
+ setStartMousePosition({
+ x: e.globalX,
+ y: e.globalY
+ });
+
+ e.stopPropagation();
+ };
+ const handlePointerMove = (e: FederatedMouseEvent) => {
+ if (!isDragging) return;
+ const dx = (e.globalX - startMousePosition.x) / scale / UP_SCALE;
+ const dy = (e.globalY - startMousePosition.y) / scale / UP_SCALE;
+ const cos = Math.cos(rotation);
+ const sin = Math.sin(rotation);
+ const newPosition = {
+ x: startPosition.x + dx * cos + dy * sin,
+ y: startPosition.y - dx * sin + dy * cos
+ };
+ setPosition(newPosition);
+ const coordinates = localToCoordinates(newPosition.x, newPosition.y);
+ setSightCoordinates(sight.id, coordinates.latitude, coordinates.longitude);
+ e.stopPropagation();
+ };
+
+ const handlePointerUp = (e: FederatedMouseEvent) => {
+ setIsDragging(false);
+ e.stopPropagation();
+ };
+
+ const [texture, setTexture] = useState(Texture.EMPTY);
+ useEffect(() => {
+ if (texture === Texture.EMPTY) {
+ Assets
+ .load('/SightIcon.png')
+ .then((result) => {
+ setTexture(result)
+ });
+ }
+ }, [texture]);
+
+ function draw(g: Graphics) {
+ g.clear();
+ g.circle(0, 0, 20);
+ g.fill({color: COLORS.primary}); // Fill circle with primary color
+ }
+
+ if(!sight) {
+ console.error("sight is null");
+ return null;
+ }
+
+ const coordinates = coordinatesToLocal(sight.latitude, sight.longitude);
+
+ return (
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/route-preview/Station.tsx b/src/pages/route-preview/Station.tsx
new file mode 100644
index 0000000..f262fe2
--- /dev/null
+++ b/src/pages/route-preview/Station.tsx
@@ -0,0 +1,148 @@
+import { FederatedMouseEvent, Graphics } from "pixi.js";
+import {
+ 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(
+ ({ station, ruLabel }: Readonly) => {
+ const draw = useCallback((g: Graphics) => {
+ g.clear();
+ const coordinates = coordinatesToLocal(
+ station.latitude,
+ 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 });
+ }, []);
+
+ return (
+
+
+ );
+ }
+);
+
+export const StationLabel = observer(
+ ({ station, ruLabel }: Readonly) => {
+ const { language } = languageStore;
+ const { rotation, scale } = useTransform();
+ const { setStationOffset } = useMapData();
+
+ const [position, setPosition] = useState({
+ 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({
+ x: 0,
+ y: 0,
+ });
+
+ if (!station) {
+ console.error("station is null");
+ return null;
+ }
+
+ const handlePointerDown = (e: FederatedMouseEvent) => {
+ setIsDragging(true);
+ setStartPosition({
+ x: position.x,
+ y: position.y,
+ });
+ setStartMousePosition({
+ x: e.globalX,
+ y: e.globalY,
+ });
+
+ e.stopPropagation();
+ };
+ const handlePointerMove = (e: FederatedMouseEvent) => {
+ if (!isDragging) return;
+ const dx = e.globalX - startMousePosition.x;
+ const dy = e.globalY - startMousePosition.y;
+ const newPosition = {
+ x: startPosition.x + dx,
+ y: startPosition.y + dy,
+ };
+ setPosition(newPosition);
+ setStationOffset(station.id, newPosition.x, newPosition.y);
+ e.stopPropagation();
+ };
+
+ const handlePointerUp = (e: FederatedMouseEvent) => {
+ setIsDragging(false);
+ e.stopPropagation();
+ };
+ const coordinates = coordinatesToLocal(station.latitude, station.longitude);
+
+ return (
+
+
+ );
+ }
+);
diff --git a/src/pages/route-preview/TransformContext.tsx b/src/pages/route-preview/TransformContext.tsx
new file mode 100644
index 0000000..9e38225
--- /dev/null
+++ b/src/pages/route-preview/TransformContext.tsx
@@ -0,0 +1,204 @@
+import {
+ 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>;
+ setScale: React.Dispatch>;
+ setRotation: React.Dispatch>;
+ screenToLocal: (x: number, y: number) => { x: number; y: number };
+ localToScreen: (x: number, y: number) => { x: number; y: number };
+ rotateToAngle: (to: number, fromPosition?: { x: number; y: number }) => void;
+ setTransform: (
+ latitude: number,
+ longitude: number,
+ rotationDegrees?: number,
+ scale?: number
+ ) => void;
+ setScreenCenter: React.Dispatch<
+ React.SetStateAction<{ x: number; y: number } | undefined>
+ >;
+}>({
+ position: { x: 0, y: 0 },
+ scale: 1,
+ rotation: 0,
+ screenCenter: undefined,
+ setPosition: () => {},
+ setScale: () => {},
+ setRotation: () => {},
+ screenToLocal: () => ({ x: 0, y: 0 }),
+ localToScreen: () => ({ x: 0, y: 0 }),
+ rotateToAngle: () => {},
+ setTransform: () => {},
+ setScreenCenter: () => {},
+});
+
+// Provider component
+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 screenToLocal = useCallback(
+ (screenX: number, screenY: number) => {
+ // Translate point relative to current pan position
+ const translatedX = (screenX - position.x) / scale;
+ const translatedY = (screenY - position.y) / scale;
+
+ // Rotate point around center
+ const cosRotation = Math.cos(-rotation); // Negative rotation to reverse transform
+ const sinRotation = Math.sin(-rotation);
+ const rotatedX = translatedX * cosRotation - translatedY * sinRotation;
+ const rotatedY = translatedX * sinRotation + translatedY * cosRotation;
+
+ return {
+ x: rotatedX / UP_SCALE,
+ y: rotatedY / UP_SCALE,
+ };
+ },
+ [position.x, position.y, scale, rotation]
+ );
+
+ // Inverse of screenToLocal
+ const localToScreen = useCallback(
+ (localX: number, localY: number) => {
+ const upscaledX = localX * UP_SCALE;
+ const upscaledY = localY * UP_SCALE;
+
+ const cosRotation = Math.cos(rotation);
+ const sinRotation = Math.sin(rotation);
+ const rotatedX = upscaledX * cosRotation - upscaledY * sinRotation;
+ const rotatedY = upscaledX * sinRotation + upscaledY * cosRotation;
+
+ const translatedX = rotatedX * scale + position.x;
+ const translatedY = rotatedY * scale + position.y;
+
+ return {
+ x: translatedX,
+ y: translatedY,
+ };
+ },
+ [position.x, position.y, scale, rotation]
+ );
+
+ const rotateToAngle = useCallback(
+ (to: number, fromPosition?: { x: number; y: number }) => {
+ 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;
+
+ const newPosition = {
+ x:
+ center.x * (1 - cosDelta) +
+ currentFromPosition.x * cosDelta +
+ (center.y - currentFromPosition.y) * sinDelta,
+ y:
+ center.y * (1 - cosDelta) +
+ currentFromPosition.y * cosDelta +
+ (currentFromPosition.x - center.x) * sinDelta,
+ };
+
+ // Update both rotation and position in a single batch to avoid stale closure
+ setRotation(to);
+ setPosition(newPosition);
+ },
+ [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,
+ };
+
+ const cosRot = Math.cos(selectedRotation);
+ const sinRot = 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.y = dx * sinRot + dy * cosRot + center.y;
+
+ // Batch state updates to avoid intermediate renders
+ setPosition(newPosition);
+ setRotation(selectedRotation);
+ setScale(selectedScale);
+ },
+ [rotation, scale, screenCenter]
+ );
+
+ const value = useMemo(
+ () => ({
+ position,
+ scale,
+ rotation,
+ screenCenter,
+ setPosition,
+ setScale,
+ setRotation,
+ rotateToAngle,
+ screenToLocal,
+ localToScreen,
+ setTransform,
+ setScreenCenter,
+ }),
+ [
+ position,
+ scale,
+ rotation,
+ screenCenter,
+ rotateToAngle,
+ screenToLocal,
+ localToScreen,
+ setTransform,
+ ]
+ );
+
+ return (
+
+ {children}
+
+ );
+};
+
+// Custom hook for easy access to transform values
+export const useTransform = () => {
+ const context = useContext(TransformContext);
+ if (!context) {
+ throw new Error("useTransform must be used within a TransformProvider");
+ }
+ return context;
+};
diff --git a/src/pages/route-preview/TravelPath.tsx b/src/pages/route-preview/TravelPath.tsx
new file mode 100644
index 0000000..5102bcb
--- /dev/null
+++ b/src/pages/route-preview/TravelPath.tsx
@@ -0,0 +1,34 @@
+import { Graphics } from "pixi.js";
+import { useCallback } from "react";
+import { PATH_COLOR, PATH_WIDTH } from "./Constants";
+import { coordinatesToLocal } from "./utils";
+
+interface TravelPathProps {
+ points: { x: number; y: number }[];
+}
+
+export function TravelPath({ points }: Readonly) {
+ 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++) {
+ const coordinates = coordinatesToLocal(points[i].x, points[i].y);
+ g.lineTo(coordinates.x, coordinates.y);
+ }
+ g.stroke({
+ color: PATH_COLOR,
+ width: PATH_WIDTH,
+ });
+ },
+ [points]
+ );
+
+ if (points.length === 0) {
+ console.error("points is empty");
+ return null;
+ }
+
+ return
+
+
+ Станция
+
+
+
+
+ Погода
+
+
+
+ );
+}
diff --git a/src/pages/route-preview/index.tsx b/src/pages/route-preview/index.tsx
new file mode 100644
index 0000000..e7c91ea
--- /dev/null
+++ b/src/pages/route-preview/index.tsx
@@ -0,0 +1,176 @@
+import { useRef, useEffect, useState } from "react";
+
+import { Application, ApplicationRef, extend } from "@pixi/react";
+import {
+ Container,
+ Graphics,
+ Sprite,
+ Texture,
+ TilingSprite,
+ Text,
+} from "pixi.js";
+import { Stack } from "@mui/material";
+import { MapDataProvider, useMapData } from "./MapDataContext";
+import { TransformProvider, useTransform } from "./TransformContext";
+import { InfiniteCanvas } from "./InfiniteCanvas";
+import { Sight } from "./Sight";
+import { UP_SCALE } from "./Constants";
+import { Station } from "./Station";
+import { TravelPath } from "./TravelPath";
+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,
+ Graphics,
+ Sprite,
+ Texture,
+ TilingSprite,
+ Text,
+});
+
+export const RoutePreview = () => {
+ return (
+
+
+
+
+
+
+
+
+ );
+};
+
+export const RouteMap = observer(() => {
+ const { language } = languageStore;
+ const { setPosition, screenToLocal, setTransform, screenCenter } =
+ useTransform();
+ const { routeData, stationData, sightData, originalRouteData } = useMapData();
+ console.log(stationData);
+ const [points, setPoints] = useState<{ x: number; y: number }[]>([]);
+ const [isSetup, setIsSetup] = useState(false);
+
+ const parentRef = useRef(null);
+
+ useEffect(() => {
+ if (originalRouteData) {
+ const path = originalRouteData?.path;
+ const points =
+ path?.map(([x, y]: [number, number]) => ({
+ x: x * UP_SCALE,
+ y: y * UP_SCALE,
+ })) ?? [];
+ setPoints(points);
+ }
+ }, [originalRouteData]);
+
+ useEffect(() => {
+ if (isSetup || !screenCenter) {
+ return;
+ }
+
+ if (
+ originalRouteData?.center_latitude ===
+ originalRouteData?.center_longitude &&
+ originalRouteData?.center_latitude === 0
+ ) {
+ if (points.length > 0) {
+ let boundingBox = {
+ from: { x: Infinity, y: Infinity },
+ to: { x: -Infinity, y: -Infinity },
+ };
+ for (const point of points) {
+ boundingBox.from.x = Math.min(boundingBox.from.x, point.x);
+ boundingBox.from.y = Math.min(boundingBox.from.y, point.y);
+ boundingBox.to.x = Math.max(boundingBox.to.x, point.x);
+ boundingBox.to.y = Math.max(boundingBox.to.y, point.y);
+ }
+ const newCenter = {
+ x: -(boundingBox.from.x + boundingBox.to.x) / 2,
+ y: -(boundingBox.from.y + boundingBox.to.y) / 2,
+ };
+ setPosition(newCenter);
+ setIsSetup(true);
+ }
+ } else if (
+ originalRouteData?.center_latitude &&
+ originalRouteData?.center_longitude
+ ) {
+ const coordinates = coordinatesToLocal(
+ originalRouteData?.center_latitude,
+ originalRouteData?.center_longitude
+ );
+
+ setTransform(
+ coordinates.x,
+ coordinates.y,
+ originalRouteData?.rotate,
+ originalRouteData?.scale_min
+ );
+ setIsSetup(true);
+ }
+ }, [
+ points,
+ originalRouteData?.center_latitude,
+ originalRouteData?.center_longitude,
+ originalRouteData?.rotate,
+ isSetup,
+ screenCenter,
+ ]);
+
+ if (!routeData || !stationData || !sightData) {
+ console.error("routeData, stationData or sightData is null");
+ return
-
+
(
+ render={({ field }) => (
option.id === field.value) || null}
+ value={
+ carrierAutocompleteProps.options.find(
+ (option) => option.id === field.value
+ ) || null
+ }
onChange={(_, value) => {
- field.onChange(value?.id || '')
+ field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
- return item ? item.short_name : ''
+ return item ? item.short_name : "";
}}
isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
+ return option.id === value?.id;
}}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.short_name.toLowerCase().includes(inputValue.toLowerCase()))
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.short_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
}}
- renderInput={(params) => String(value),
})}
error={!!(errors as any)?.route_number}
helperText={(errors as any)?.route_number?.message}
margin="normal"
fullWidth
- InputLabelProps={{shrink: true}}
+ slotProps={{ inputLabel: { shrink: true } }}
type="text"
- label={'Номер маршрута *'}
+ label={"Номер маршрута *"}
name="route_number"
/>
- field.onChange(e.target.checked)} />} />}
- />
-
- (Прямой / Обратный)
-
-
{
try {
- // Парсим строку в массив массивов
- return JSON.parse(value)
+ // Разбиваем строку на строки и парсим каждую строку как пару координат
+ const lines = value.trim().split("\n");
+ return lines.map((line) => {
+ const [lat, lon] = line
+ .trim()
+ .split(/[\s,]+/)
+ .map(Number);
+ if (isNaN(lat) || isNaN(lon)) {
+ throw new Error("Invalid coordinates");
+ }
+ return [lat, lon];
+ });
} catch {
- return []
+ return [];
}
},
validate: (value: unknown) => {
- if (!Array.isArray(value)) return 'Неверный формат'
- if (!value.every((point: unknown) => Array.isArray(point) && point.length === 2)) {
- return 'Каждая точка должна быть массивом из двух координат'
+ if (!Array.isArray(value)) return "Неверный формат";
+ if (value.length === 0)
+ return "Введите хотя бы одну пару координат";
+ if (
+ !value.every(
+ (point: unknown) => Array.isArray(point) && point.length === 2
+ )
+ ) {
+ return "Каждая строка должна содержать две координаты";
}
- if (!value.every((point: unknown[]) => point.every((coord: unknown) => !isNaN(Number(coord)) && typeof coord === 'number'))) {
- return 'Координаты должны быть числами'
+ if (
+ !value.every((point: unknown[]) =>
+ point.every(
+ (coord: unknown) =>
+ !isNaN(Number(coord)) && typeof coord === "number"
+ )
+ )
+ ) {
+ return "Координаты должны быть числами";
}
- return true
+ return true;
},
})}
error={!!(errors as any)?.path}
- helperText={(errors as any)?.path?.message} // 'Формат: [[lat1,lon1], [lat2,lon2], ...]'
+ helperText={(errors as any)?.path?.message}
margin="normal"
fullWidth
- InputLabelProps={{shrink: true}}
+ slotProps={{ inputLabel: { shrink: true } }}
type="text"
- label={'Координаты маршрута *'}
+ label={"Координаты маршрута *"}
name="path"
- placeholder="[[1.1, 2.2], [2.1, 4.5]]"
+ placeholder="55.7558 37.6173
+55.7539 37.6208"
+ multiline
+ rows={4}
/>
(
+ option.id === field.value
+ ) ?? null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id ?? "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.heading : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.heading
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
+ }}
+ renderInput={(params) => (
+ el.value == false)}
+ onChange={(_, element) => {
+ if (element) {
+ setValue("route_direction", element.value);
+ setRouteDirection(element.value);
+ }
+ }}
+ renderInput={(params) => (
+ {
+ 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
- InputLabelProps={{shrink: true}}
+ slotProps={{ inputLabel: { shrink: true } }}
+ inputProps={{ min: 0 }}
type="number"
- label={'Масштаб (мин)'}
+ label={"Масштаб (мин)"}
name="scale_min"
/>
{
+ 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
- InputLabelProps={{shrink: true}}
+ slotProps={{ inputLabel: { shrink: true } }}
+ inputProps={{ min: 0 }}
type="number"
- label={'Масштаб (макс)'}
+ label={"Масштаб (макс)"}
name="scale_max"
/>
Number(value),
})}
error={!!(errors as any)?.rotate}
helperText={(errors as any)?.rotate?.message}
margin="normal"
fullWidth
- InputLabelProps={{shrink: true}}
+ slotProps={{ inputLabel: { shrink: true } }}
type="number"
- label={'Поворот'}
+ label={"Поворот"}
name="rotate"
/>
Number(value),
})}
error={!!(errors as any)?.center_latitude}
helperText={(errors as any)?.center_latitude?.message}
margin="normal"
fullWidth
- InputLabelProps={{shrink: true}}
+ slotProps={{ inputLabel: { shrink: true } }}
type="number"
- label={'Центр. широта'}
+ label={"Центр. широта"}
name="center_latitude"
/>
Number(value),
})}
error={!!(errors as any)?.center_longitude}
helperText={(errors as any)?.center_longitude?.message}
margin="normal"
fullWidth
- InputLabelProps={{shrink: true}}
+ slotProps={{ inputLabel: { shrink: true } }}
type="number"
- label={'Центр. долгота'}
+ label={"Центр. долгота"}
name="center_longitude"
/>
- )
-}
+ );
+};
diff --git a/src/pages/route/edit.tsx b/src/pages/route/edit.tsx
index 2582ecd..5328e3f 100644
--- a/src/pages/route/edit.tsx
+++ b/src/pages/route/edit.tsx
@@ -1,236 +1,439 @@
-import {Autocomplete, Box, TextField, FormControlLabel, Checkbox, Typography} from '@mui/material'
-import {Edit, useAutocomplete} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
-import {Controller} from 'react-hook-form'
-import {useParams} from 'react-router'
-import {LinkedItems} from '../../components/LinkedItems'
-import {StationItem, VehicleItem, stationFields, vehicleFields} from './types'
+import {
+ Autocomplete,
+ Box,
+ TextField,
+ FormControlLabel,
+ Checkbox,
+ Typography,
+ Button,
+} from "@mui/material";
+import { Edit, useAutocomplete } from "@refinedev/mui";
+import { useForm } from "@refinedev/react-hook-form";
+import { Controller, useWatch } from "react-hook-form";
+import { useNavigate, useParams } from "react-router";
+import { LinkedItems } from "../../components/LinkedItems";
+import {
+ StationItem,
+ VehicleItem,
+ stationFields,
+ vehicleFields,
+} from "./types";
+import { useEffect, useState } from "react";
+import { META_LANGUAGE, languageStore } from "@stores";
+import { observer } from "mobx-react-lite";
+import { LanguageSelector } from "@ui";
-export const RouteEdit = () => {
+export const RouteEdit = observer(() => {
+ const { language } = languageStore;
const {
saveButtonProps,
register,
control,
- formState: {errors},
- } = useForm({})
+ formState: { errors },
+ refineCore: { queryResult },
+ setValue,
+ getValues,
+ watch,
+ } = useForm({
+ refineCoreProps: META_LANGUAGE(language),
+ });
+ const routeDirectionFromServer = watch("route_direction");
- const {id: routeId} = useParams<{id: string}>()
+ const [routeDirection, setRouteDirection] = useState(false);
+ const navigate = useNavigate();
+ const directions = [
+ {
+ label: "Прямой",
+ value: true,
+ },
+ {
+ label: "Обратный",
+ value: false,
+ },
+ ];
- const {autocompleteProps: carrierAutocompleteProps} = useAutocomplete({
- resource: 'carrier',
+ const { id: routeId } = useParams<{ id: string }>();
+
+ useEffect(() => {
+ if (queryResult?.data?.data && Array.isArray(queryResult.data.data.path)) {
+ const formattedPath = queryResult.data.data.path
+ .map((coords) => coords.join(" "))
+ .join("\n");
+
+ setValue("path", formattedPath);
+ }
+ }, [queryResult?.data?.data, setValue]);
+
+ const { autocompleteProps: carrierAutocompleteProps } = useAutocomplete({
+ resource: "carrier",
onSearch: (value) => [
{
- field: 'short_name',
- operator: 'contains',
+ field: "short_name",
+ operator: "contains",
value,
},
],
- })
+ ...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",
+
+ onSearch: (value) => [
+ {
+ field: "heading",
+ operator: "contains",
+ value,
+ },
+ {
+ field: "media_type",
+ operator: "contains",
+ value,
+ },
+ ],
+ ...META_LANGUAGE(language),
+ });
+
+ useEffect(() => {
+ if (routeDirectionFromServer) {
+ setRouteDirection(routeDirectionFromServer);
+ }
+ }, [routeDirectionFromServer]);
return (
-
- (
- option.id === field.value) || null}
- onChange={(_, value) => {
- field.onChange(value?.id || '')
- }}
- getOptionLabel={(item) => {
- return item ? item.short_name : ''
- }}
- isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
- }}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.short_name.toLowerCase().includes(inputValue.toLowerCase()))
- }}
- renderInput={(params) => String(value),
- })}
- error={!!(errors as any)?.route_number}
- helperText={(errors as any)?.route_number?.message}
- margin="normal"
- fullWidth
- InputLabelProps={{shrink: true}}
- type="text"
- label={'Номер маршрута'}
- name="route_number"
- />
- field.onChange(e.target.checked)} />} />}
- />
-
-
- (Прямой / Обратный)
-
-
- {
- if (!Array.isArray(value)) return 'Неверный формат'
- if (!value.every((point: unknown) => Array.isArray(point) && point.length === 2)) {
- return 'Каждая точка должна быть массивом из двух координат'
- }
- if (!value.every((point: unknown[]) => point.every((coord: unknown) => !isNaN(Number(coord)) && typeof coord === 'number'))) {
- return 'Координаты должны быть числами'
- }
- return true
- },
- }}
- render={({field, fieldState: {error}}) => (
- {
- try {
- const parsed = JSON.parse(e.target.value)
- field.onChange(parsed)
- } catch {
- field.onChange([])
+
+
+ (
+ option.id === field.value
+ ) || null
}
- }}
- error={!!error}
- helperText={error?.message} // 'Формат: [[lat1,lon1], [lat2,lon2], ...]'
- margin="normal"
- fullWidth
- InputLabelProps={{shrink: true}}
- type="text"
- label={'Координаты маршрута'}
- placeholder="[[1.1, 2.2], [2.1, 4.5]]"
- sx={{
- marginBottom: 2,
- }}
+ onChange={(_, value) => {
+ field.onChange(value?.id || "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.short_name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.short_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
+ }}
+ renderInput={(params) => (
+ String(value),
+ })}
+ error={!!(errors as any)?.route_number}
+ helperText={(errors as any)?.route_number?.message}
+ margin="normal"
+ fullWidth
+ slotProps={{ inputLabel: { shrink: true } }}
+ type="text"
+ label={"Номер маршрута"}
+ name="route_number"
+ />
+
+
+
+ el.value == routeDirection)}
+ onChange={(_, element) => {
+ if (element) {
+ setValue("route_direction", element.value);
+ setRouteDirection(element.value);
+ }
+ }}
+ renderInput={(params) => (
+ {
+ try {
+ const lines = value.trim().split("\n");
+ return lines.map((line) => {
+ const [lat, lon] = line
+ .trim()
+ .split(/[\s,]+/)
+ .map(Number);
+ return [lat, lon];
+ });
+ } catch {
+ return [];
+ }
+ },
+ validate: (value: unknown) => {
+ if (!Array.isArray(value)) return "Неверный формат";
+ if (value.length === 0)
+ return "Введите хотя бы одну пару координат";
+ if (
+ !value.every(
+ (point: unknown) =>
+ Array.isArray(point) && point.length === 2
+ )
+ ) {
+ return "Каждая строка должна содержать две координаты";
+ }
+ if (
+ !value.every((point: unknown[]) =>
+ point.every(
+ (coord: unknown) =>
+ !isNaN(Number(coord)) && typeof coord === "number"
+ )
+ )
+ ) {
+ return "Координаты должны быть числами";
+ }
+ return true;
+ },
+ })}
+ error={!!(errors as any)?.path}
+ helperText={(errors as any)?.path?.message}
+ margin="normal"
+ fullWidth
+ slotProps={{ inputLabel: { shrink: true } }}
+ type="text"
+ label={"Координаты маршрута *"}
+ name="path"
+ placeholder="55.7558 37.6173
+55.7539 37.6208"
+ multiline
+ rows={4}
+ sx={{
+ marginBottom: 2,
+ }}
+ />
+
+ (
+ option.id === field.value
+ ) ?? null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id ?? "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.heading : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.heading
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
+ }}
+ renderInput={(params) => (
+ {
+ 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 } }}
+ type="number"
+ label={"Масштаб (мин)"}
+ name="scale_min"
+ />
+
+ {
+ 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 } }}
+ type="number"
+ label={"Масштаб (макс)"}
+ name="scale_max"
+ />
+
+ Number(value),
+ })}
+ error={!!(errors as any)?.rotate}
+ helperText={(errors as any)?.rotate?.message}
+ margin="normal"
+ fullWidth
+ slotProps={{ inputLabel: { shrink: true } }}
+ type="number"
+ label={"Поворот"}
+ name="rotate"
+ />
+
+ Number(value),
+ })}
+ error={!!(errors as any)?.center_latitude}
+ helperText={(errors as any)?.center_latitude?.message}
+ margin="normal"
+ fullWidth
+ slotProps={{ inputLabel: { shrink: true } }}
+ type="number"
+ label={"Центр. широта"}
+ name="center_latitude"
+ />
+
+ Number(value),
+ })}
+ error={!!(errors as any)?.center_longitude}
+ helperText={(errors as any)?.center_longitude?.message}
+ margin="normal"
+ fullWidth
+ slotProps={{ inputLabel: { shrink: true } }}
+ type="number"
+ label={"Центр. долгота"}
+ name="center_longitude"
+ />
+
+
+ {routeId && (
+ <>
+
+ type="edit"
+ parentId={routeId}
+ parentResource="route"
+ childResource="station"
+ fields={stationFields}
+ title="остановки"
+ dragAllowed={true}
+ cityId={cityId}
/>
- )}
- />
-
+ type="edit"
+ parentId={routeId}
+ parentResource="route"
+ childResource="vehicle"
+ fields={vehicleFields}
+ title="транспортные средства"
+ /> */}
+
+ )}
-
+
+
-
- {routeId && (
- <>
- type="edit" parentId={routeId} parentResource="route" childResource="station" fields={stationFields} title="станции" />
-
- type="edit" parentId={routeId} parentResource="route" childResource="vehicle" fields={vehicleFields} title="транспортные средства" />
-
- )}
- )
-}
+ );
+});
diff --git a/src/pages/route/list.tsx b/src/pages/route/list.tsx
index 364d046..7ffdb91 100644
--- a/src/pages/route/list.tsx
+++ b/src/pages/route/list.tsx
@@ -1,156 +1,190 @@
-import {type GridColDef} from '@mui/x-data-grid'
-import {CustomDataGrid} from '../../components/CustomDataGrid'
-import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import {Typography} from '@mui/material'
-import React from 'react'
+import { type GridColDef } from "@mui/x-data-grid";
+import { CustomDataGrid } from "../../components/CustomDataGrid";
+import {
+ DeleteButton,
+ EditButton,
+ List,
+ ShowButton,
+ useDataGrid,
+} from "@refinedev/mui";
+import { Button, Typography } from "@mui/material";
+import React from "react";
+import MapIcon from "@mui/icons-material/Map";
-import {localeText} from '../../locales/ru/localeText'
+import { localeText } from "../../locales/ru/localeText";
+import { useLink } from "@refinedev/core";
+import { observer } from "mobx-react-lite";
+import { languageStore, META_LANGUAGE } from "@stores";
-export const RouteList = () => {
- const {dataGridProps} = useDataGrid({
- resource: 'route/',
- })
+export const RouteList = observer(() => {
+ const Link = useLink();
+ const { language } = languageStore;
+ const { dataGridProps } = useDataGrid({
+ resource: "route/",
+ meta: META_LANGUAGE(language),
+ });
const columns = React.useMemo(
() => [
{
- field: 'id',
- headerName: 'ID',
- type: 'number',
+ field: "id",
+ headerName: "ID",
+ type: "number",
minWidth: 70,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
},
{
- field: 'carrier_id',
- headerName: 'ID перевозчика',
- type: 'number',
+ field: "carrier_id",
+ headerName: "ID перевозчика",
+ type: "number",
minWidth: 150,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
},
{
- field: 'carrier',
- headerName: 'Перевозчик',
- type: 'string',
+ field: "carrier",
+ headerName: "Перевозчик",
+ type: "string",
minWidth: 150,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
},
{
- field: 'route_number',
- headerName: 'Номер маршрута',
- type: 'string',
+ field: "route_number",
+ headerName: "Номер маршрута",
+ type: "string",
minWidth: 150,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'route_sys_number',
- headerName: 'Системный номер маршрута',
- type: 'string',
- minWidth: 120,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'governor_appeal',
- headerName: 'Обращение губернатора',
- type: 'number',
- minWidth: 120,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'scale_min',
- headerName: 'Масштаб (мин)',
- type: 'number',
- minWidth: 120,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'scale_max',
- headerName: 'Масштаб (макс)',
- type: 'number',
- minWidth: 120,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'rotate',
- headerName: 'Поворот',
- type: 'number',
- minWidth: 120,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'center_latitude',
- headerName: 'Центр. широта',
- type: 'number',
- minWidth: 120,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'center_longitude',
- headerName: 'Центр. долгота',
- type: 'number',
- minWidth: 120,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'route_direction',
- headerName: 'Направление маршрута',
- type: 'boolean',
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- minWidth: 120,
+ display: "flex",
+ align: "left",
flex: 1,
- renderCell: ({value}) => {value ? 'прямое' : 'обратное'} ,
+ headerAlign: "left",
},
{
- field: 'actions',
- headerName: 'Действия',
- cellClassName: 'route-actions',
- align: 'right',
- headerAlign: 'center',
+ field: "route_sys_number",
+ headerName: "Номер маршрута в Говорящем Городе",
+ type: "string",
minWidth: 120,
- display: 'flex',
+ display: "flex",
+
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "governor_appeal",
+ headerName: "Обращение губернатора",
+ type: "number",
+ minWidth: 120,
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "scale_min",
+ headerName: "Масштаб (мин)",
+ type: "number",
+ minWidth: 120,
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "scale_max",
+ headerName: "Масштаб (макс)",
+ type: "number",
+ minWidth: 120,
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "rotate",
+ headerName: "Поворот",
+ type: "number",
+ minWidth: 120,
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "center_latitude",
+ headerName: "Центр. широта",
+ type: "number",
+ minWidth: 120,
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "center_longitude",
+ headerName: "Центр. долгота",
+ type: "number",
+ minWidth: 120,
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "route_direction",
+ headerName: "Направление маршрута",
+ type: "boolean",
+ display: "flex",
+ flex: 1,
+ align: "left",
+ headerAlign: "left",
+ minWidth: 120,
+ renderCell: ({ value }) => (
+
+ {value ? "прямое" : "обратное"}
+
+ ),
+ },
+ {
+ field: "actions",
+ headerName: "Действия",
+ cellClassName: "route-actions",
+ align: "right",
+ headerAlign: "center",
+ minWidth: 160,
+ display: "flex",
sortable: false,
filterable: false,
disableColumnMenu: true,
- renderCell: function render({row}) {
+ renderCell: function render({ row }) {
return (
<>
{value ? 'прямое' : 'обратное'} ,
+ label: "Направление маршрута",
+ data: "route_direction",
+ render: (value: number[][]) => (
+
+ {value ? "прямое" : "обратное"}
+
+ ),
},
{
- label: 'Координаты маршрута',
- data: 'path',
+ label: "Координаты маршрута",
+ data: "path",
render: (value: number[][]) => (
theme.palette.background.paper,
p: 2,
borderRadius: 1,
- maxHeight: '200px',
- overflow: 'auto',
+ maxHeight: "200px",
+ overflow: "auto",
}}
>
- {JSON.stringify(value)}
- {/* {value?.map((point, index) => (
-
- Точка {index + 1}: [{point[0]}, {point[1]}]
+ {value?.map((point, index) => (
+
+ {point[0]}, {point[1]}
- ))} */}
+ ))}
),
},
- ]
+ ];
return (
- {fields.map(({label, data, render}) => (
+ {fields.map(({ label, data, render }) => (
{label}
- {render ? render(record?.[data]) :
))}
{record?.id && (
<>
- type="show" parentId={record.id} parentResource="route" childResource="station" fields={stationFields} title="станции" />
+
+ type="show"
+ parentId={record.id}
+ parentResource="route"
+ childResource="station"
+ fields={stationFields}
+ title="остановки"
+ />
- type="show" parentId={record.id} parentResource="route" childResource="vehicle" fields={vehicleFields} title="транспортные средства" />
+ {/*
+ type="show"
+ parentId={record.id}
+ parentResource="route"
+ childResource="vehicle"
+ fields={vehicleFields}
+ title="транспортные средства"
+ /> */}
+
+
+ type="show"
+ parentId={record.id}
+ parentResource="route"
+ childResource="sight"
+ fields={sightFields}
+ title="достопримечательности"
+ />
)}
+
+
+
+
- )
-}
+ );
+});
diff --git a/src/pages/route/types.ts b/src/pages/route/types.ts
index a5bf814..78da56c 100644
--- a/src/pages/route/types.ts
+++ b/src/pages/route/types.ts
@@ -1,35 +1,53 @@
-import {VEHICLE_TYPES} from '../../lib/constants'
+import { VEHICLE_TYPES } from "../../lib/constants";
export type StationItem = {
- id: number
- name: string
- description: string
- [key: string]: string | number
-}
+ id: number;
+ name: string;
+ description: string;
+ offset_x: number;
+ offset_y: number;
+ [key: string]: string | number;
+};
export type VehicleItem = {
- id: number
- tail_number: number
- type: number
- [key: string]: string | number
-}
+ id: number;
+ tail_number: number;
+ type: number;
+ [key: string]: string | number;
+};
+
+export type SightItem = {
+ id: number;
+ name: string;
+ city: string;
+ city_id: number;
+ address: string;
+ [key: string]: string | number;
+};
export type FieldType = {
- label: string
- data: keyof T
- render?: (value: any) => React.ReactNode
-}
+ label: string;
+ data: keyof T;
+ render?: (value: any) => React.ReactNode;
+};
export const stationFields: Array> = [
- {label: 'Название', data: 'system_name'},
- {label: 'Описание', data: 'description'},
-]
+ { label: "Название", data: "name" },
+ { label: "Описание", data: "description" },
+];
+
+export const sightFields: Array> = [
+ { label: "Название", data: "name" },
+ { label: "Город", data: "city" },
+ { label: "Адрес", data: "address" },
+];
export const vehicleFields: Array> = [
- {label: 'Бортовой номер', data: 'tail_number'},
+ { label: "Бортовой номер", data: "tail_number" },
{
- label: 'Тип',
- data: 'type',
- render: (value: number) => VEHICLE_TYPES.find((type) => type.value === value)?.label || value,
+ label: "Тип",
+ data: "type",
+ render: (value: number) =>
+ VEHICLE_TYPES.find((type) => type.value === value)?.label || value,
},
-]
+];
diff --git a/src/pages/sight/create.tsx b/src/pages/sight/create.tsx
index a745a0a..1f19e45 100644
--- a/src/pages/sight/create.tsx
+++ b/src/pages/sight/create.tsx
@@ -1,395 +1,729 @@
-import {Autocomplete, Box, TextField, Typography, Paper} from '@mui/material'
-import {Create, useAutocomplete} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
-import {Controller} from 'react-hook-form'
-import {Link} from 'react-router'
-import React, {useState, useEffect} from 'react'
-import {TOKEN_KEY} from '../../authProvider'
+import {
+ Autocomplete,
+ Box,
+ TextField,
+ Typography,
+ Paper,
+ Accordion,
+ AccordionSummary,
+ AccordionDetails,
+} from "@mui/material";
+import { Create, useAutocomplete } from "@refinedev/mui";
+import { useForm } from "@refinedev/react-hook-form";
+import { Controller, FieldValues } from "react-hook-form";
+import React, { useState, useEffect } from "react";
+import { ArticleItem, articleFields } from "./types";
+import { TOKEN_KEY } from "@providers";
+import { observer } from "mobx-react-lite";
+import { EVERY_LANGUAGE, Languages, languageStore, cityStore } from "@stores";
+import { LanguageSelector } from "@ui";
+import { CreateSightArticle } from "@components";
+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(""),
+ });
-export const SightCreate = () => {
const {
saveButtonProps,
- refineCore: {formLoading},
+ refineCore: { formLoading, onFinish },
register,
control,
watch,
- formState: {errors},
+ setValue,
+ formState: { errors },
+ handleSubmit,
} = useForm({
refineCoreProps: {
- resource: 'sight/',
+ resource: "sight",
},
- })
+ });
+ const { city_id } = cityStore;
- // Состояния для предпросмотра
- const [namePreview, setNamePreview] = useState('')
- const [coordinatesPreview, setCoordinatesPreview] = useState({latitude: '', longitude: ''})
- const [cityPreview, setCityPreview] = useState('')
- const [thumbnailPreview, setThumbnailPreview] = useState(null)
- const [watermarkLUPreview, setWatermarkLUPreview] = useState(null)
- const [watermarkRDPreview, setWatermarkRDPreview] = useState(null)
- const [leftArticlePreview, setLeftArticlePreview] = useState('')
- const [previewArticlePreview, setPreviewArticlePreview] = useState('')
+ useEffect(() => {
+ setValue("name", sightData.name[language]);
+ setValue("address", sightData.address[language]);
+ }, [sightData, language, setValue]);
+
+ function updateTranslations(update: boolean = true) {
+ const newSightData = {
+ ...sightData,
+ name: {
+ ...sightData.name,
+ [language]: watch("name") ?? "",
+ },
+ address: {
+ ...sightData.address,
+ [language]: watch("address") ?? "",
+ },
+ };
+ if (update) setSightData(newSightData);
+ return newSightData;
+ }
+
+ const handleLanguageChange = (lang: Languages) => {
+ updateTranslations();
+ setLanguageAction(lang);
+ };
+
+ const handleFormSubmit = handleSubmit((values: FieldValues) => {
+ const newTranslations = updateTranslations(false);
+ console.log(newTranslations);
+ return onFinish({
+ ...values,
+ translations: newTranslations,
+ });
+ });
+
+ const [namePreview, setNamePreview] = useState("");
+ const [coordinatesPreview, setCoordinatesPreview] = useState("");
+
+ const [creatingArticleHeading, setCreatingArticleHeading] =
+ useState("");
+ const [creatingArticleBody, setCreatingArticleBody] = useState("");
+
+ const [cityPreview, setCityPreview] = useState("");
+ const [thumbnailPreview, setThumbnailPreview] = useState(null);
+ const [watermarkLUPreview, setWatermarkLUPreview] = useState(
+ null
+ );
+ const [watermarkRDPreview, setWatermarkRDPreview] = useState(
+ null
+ );
+ const [leftArticlePreview, setLeftArticlePreview] = useState("");
+ const [customOptions, setCustomOptions] = useState([]);
+
+ const [previewArticlePreview, setPreviewArticlePreview] = useState("");
+
+ const handleCoordinatesChange = (e: React.ChangeEvent) => {
+ setCoordinates(e.target.value);
+ if (e.target.value) {
+ const [lat, lon] = e.target.value.split(" ").map((s) => s.trim());
+ setCoordinatesPreview(
+ `${lat ? Number(lat) : 0}, ${lon ? Number(lon) : 0}`
+ );
+ setValue("latitude", lat ? Number(lat) : 0);
+ setValue("longitude", lon ? Number(lon) : 0);
+ } else {
+ setCoordinatesPreview("");
+ setValue("latitude", "");
+ setValue("longitude", "");
+ }
+ };
// Автокомплиты
- const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
- resource: 'city',
+ const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
+ resource: "city",
onSearch: (value) => [
{
- field: 'name',
- operator: 'contains',
+ field: "name",
+ operator: "contains",
value,
},
],
- })
+ meta: {
+ headers: {
+ "Accept-Language": language,
+ },
+ },
+ });
- const {autocompleteProps: mediaAutocompleteProps} = useAutocomplete({
- resource: 'media',
+ const { autocompleteProps: mediaAutocompleteProps } = useAutocomplete({
+ resource: "media",
onSearch: (value) => [
{
- field: 'media_name',
- operator: 'contains',
+ field: "media_name",
+ operator: "contains",
value,
},
],
- })
+ });
+
+ const { autocompleteProps: articleAutocompleteProps } = useAutocomplete({
+ resource: "article",
- const {autocompleteProps: articleAutocompleteProps} = useAutocomplete({
- resource: 'article',
onSearch: (value) => [
{
- field: 'heading',
- operator: 'contains',
+ field: "heading",
+ operator: "contains",
value,
},
],
- })
+ });
+
+ const mergedOptions = [...articleAutocompleteProps.options, ...customOptions];
// Следим за изменениями во всех полях
- const nameContent = watch('name')
- const latitudeContent = watch('latitude')
- const longitudeContent = watch('longitude')
- const cityContent = watch('city_id')
- const thumbnailContent = watch('thumbnail')
- const watermarkLUContent = watch('watermark_lu')
- const watermarkRDContent = watch('watermark_rd')
- const leftArticleContent = watch('left_article')
- const previewArticleContent = watch('preview_article')
+ const nameContent = watch("name");
+ const addressContent = watch("address");
+ const latitudeContent = watch("latitude");
+ const longitudeContent = watch("longitude");
+ const cityContent = watch("city_id");
+ const thumbnailContent = watch("thumbnail");
+ const watermarkLUContent = watch("watermark_lu");
+ const watermarkRDContent = watch("watermark_rd");
+ const leftArticleContent = watch("left_article");
+ const previewArticleContent = watch("preview_article");
// Обновляем состояния при изменении полей
useEffect(() => {
- setNamePreview(nameContent || '')
- }, [nameContent])
+ setNamePreview(nameContent ?? "");
+ }, [nameContent]);
useEffect(() => {
- setCoordinatesPreview({
- latitude: latitudeContent || '',
- longitude: longitudeContent || '',
- })
- }, [latitudeContent, longitudeContent])
+ const selectedCity = cityAutocompleteProps.options.find(
+ (option) => option.id === cityContent
+ );
+ setCityPreview(selectedCity?.name ?? "");
+ }, [cityContent, cityAutocompleteProps.options]);
useEffect(() => {
- const selectedCity = cityAutocompleteProps.options.find((option) => option.id === cityContent)
- setCityPreview(selectedCity?.name || '')
- }, [cityContent, cityAutocompleteProps.options])
+ const selectedThumbnail = mediaAutocompleteProps.options.find(
+ (option) => option.id === thumbnailContent
+ );
+ setThumbnailPreview(
+ selectedThumbnail
+ ? `${import.meta.env.VITE_KRBL_MEDIA}${
+ selectedThumbnail.id
+ }/download?token=${localStorage.getItem(TOKEN_KEY)}`
+ : null
+ );
+ }, [thumbnailContent, mediaAutocompleteProps.options]);
useEffect(() => {
- const selectedThumbnail = mediaAutocompleteProps.options.find((option) => option.id === thumbnailContent)
- setThumbnailPreview(selectedThumbnail ? `https://wn.krbl.ru/media/${selectedThumbnail.id}/download?token=${localStorage.getItem(TOKEN_KEY)}` : null)
- }, [thumbnailContent, mediaAutocompleteProps.options])
+ if (city_id) {
+ setValue("city_id", +city_id);
+ }
+ }, [city_id, setValue]);
useEffect(() => {
- const selectedWatermarkLU = mediaAutocompleteProps.options.find((option) => option.id === watermarkLUContent)
- setWatermarkLUPreview(selectedWatermarkLU ? `https://wn.krbl.ru/media/${selectedWatermarkLU.id}/download?token=${localStorage.getItem(TOKEN_KEY)}` : null)
- }, [watermarkLUContent, mediaAutocompleteProps.options])
+ const selectedWatermarkLU = mediaAutocompleteProps.options.find(
+ (option) => option.id === watermarkLUContent
+ );
+ setWatermarkLUPreview(
+ selectedWatermarkLU
+ ? `${import.meta.env.VITE_KRBL_MEDIA}${
+ selectedWatermarkLU.id
+ }/download?token=${localStorage.getItem(TOKEN_KEY)}`
+ : null
+ );
+ }, [watermarkLUContent, mediaAutocompleteProps.options]);
useEffect(() => {
- const selectedWatermarkRD = mediaAutocompleteProps.options.find((option) => option.id === watermarkRDContent)
- setWatermarkRDPreview(selectedWatermarkRD ? `https://wn.krbl.ru/media/${selectedWatermarkRD.id}/download?token=${localStorage.getItem(TOKEN_KEY)}` : null)
- }, [watermarkRDContent, mediaAutocompleteProps.options])
+ const selectedWatermarkRD = mediaAutocompleteProps.options.find(
+ (option) => option.id === watermarkRDContent
+ );
+ setWatermarkRDPreview(
+ selectedWatermarkRD
+ ? `${import.meta.env.VITE_KRBL_MEDIA}${
+ selectedWatermarkRD.id
+ }/download?token=${localStorage.getItem(TOKEN_KEY)}`
+ : null
+ );
+ }, [watermarkRDContent, mediaAutocompleteProps.options]);
useEffect(() => {
- const selectedLeftArticle = articleAutocompleteProps.options.find((option) => option.id === leftArticleContent)
- setLeftArticlePreview(selectedLeftArticle?.heading || '')
- }, [leftArticleContent, articleAutocompleteProps.options])
+ const selectedLeftArticle = articleAutocompleteProps.options.find(
+ (option) => option.id === leftArticleContent
+ );
+ setLeftArticlePreview(selectedLeftArticle?.heading ?? "");
+ }, [leftArticleContent, articleAutocompleteProps.options]);
useEffect(() => {
- const selectedPreviewArticle = articleAutocompleteProps.options.find((option) => option.id === previewArticleContent)
- setPreviewArticlePreview(selectedPreviewArticle?.heading || '')
- }, [previewArticleContent, articleAutocompleteProps.options])
+ const selectedPreviewArticle = articleAutocompleteProps.options.find(
+ (option) => option.id === previewArticleContent
+ );
+ setPreviewArticlePreview(selectedPreviewArticle?.heading ?? "");
+ }, [previewArticleContent, articleAutocompleteProps.options]);
return (
-
-
- {/* Форма создания */}
-
-
+
+
+ {/* Форма создания */}
+ (
- option.id === field.value) || null}
- onChange={(_, value) => {
- field.onChange(value?.id || '')
- }}
- getOptionLabel={(item) => {
- return item ? item.name : ''
- }}
- isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
- }}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()))
- }}
- renderInput={(params) =>
+ (
- option.id === field.value) || null}
- onChange={(_, value) => {
- field.onChange(value?.id || '')
- }}
- getOptionLabel={(item) => {
- return item ? item.media_name : ''
- }}
- isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
- }}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
- }}
- renderInput={(params) => (
- option.id === field.value) || null}
- onChange={(_, value) => {
- field.onChange(value?.id || '')
- }}
- getOptionLabel={(item) => {
- return item ? item.media_name : ''
- }}
- isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
- }}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
- }}
- renderInput={(params) => (
- option.id === field.value) || null}
- onChange={(_, value) => {
- field.onChange(value?.id || '')
- }}
- getOptionLabel={(item) => {
- return item ? item.media_name : ''
- }}
- isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
- }}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
- }}
- renderInput={(params) => (
- option.id === field.value) || null}
- onChange={(_, value) => {
- field.onChange(value?.id || '')
- }}
- getOptionLabel={(item) => {
- return item ? item.heading : ''
- }}
- isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
- }}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.heading.toLowerCase().includes(inputValue.toLowerCase()))
- }}
- renderInput={(params) => (
+ option.id === field.value
+ ) ?? null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id ?? "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
+ }}
+ renderInput={(params) => (
+ (
- option.id === field.value) || null}
- onChange={(_, value) => {
- field.onChange(value?.id || '')
- }}
- getOptionLabel={(item) => {
- return item ? item.heading : ''
- }}
- isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
- }}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.heading.toLowerCase().includes(inputValue.toLowerCase()))
- }}
- renderInput={(params) => (
+ option.id === field.value
+ ) ?? null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id ?? "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.media_name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.media_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
+ }}
+ renderInput={(params) => (
+ (
+ option.id === field.value
+ ) ?? null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id ?? "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.media_name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.media_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
+ }}
+ renderInput={(params) => (
+ (
+ option.id === field.value
+ ) ?? null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id ?? "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.media_name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.media_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
+ }}
+ renderInput={(params) => (
+ (
+ option.id === field.value) ??
+ null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id ?? "");
+ }}
+ getOptionLabel={(item) => (item ? item.service_name : "")}
+ isOptionEqualToValue={(option, value) =>
+ option.id === value?.id
+ }
+ filterOptions={(options, { inputValue }) =>
+ options.filter((option) =>
+ option.service_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ )
+ }
+ renderInput={(params) => (
+
+ Создать новую статью
+
+
+ {
+ setCustomOptions((prev) => [...prev, something]);
+ }}
+ />
+
+
)}
- />
+
+ (
+ option.id === field.value
+ ) || null
+ }
+ onChange={(_, value) => {
+ console.log(value, _);
+ field.onChange(value?.id || "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.media_name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter(
+ (option) =>
+ option.media_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase()) &&
+ [1, 2, 3, 4, 5, 6].includes(option.media_type)
+ );
+ }}
+ renderInput={(params) => (
+ {
+ //setPreviewSelected(true);
+ //setSelectedMediaIndex(-1);
+ }}
+ label="Медиа-предпросмотр"
+ margin="normal"
+ variant="outlined"
+ error={!!errors.arms}
+ helperText={(errors as any)?.arms?.message}
+ />
+ )}
+ />
+ )}
+ />
+
- {/* Блок предпросмотра */}
+ {/* Preview Panel */}
(theme.palette.mode === 'dark' ? 'background.paper' : '#fff'),
+ border: "1px solid",
+ borderColor: "primary.main",
+ bgcolor: (theme) =>
+ theme.palette.mode === "dark" ? "background.paper" : "#fff",
}}
>
Предпросмотр
- {/* Название */}
- (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800')}}>
+ {/* Название достопримечательности */}
+
+ theme.palette.mode === "dark" ? "grey.300" : "grey.800",
+ mb: 3,
+ }}
+ >
{namePreview}
{/* Город */}
-
-
- Город:{' '}
+
+
+ Город:{" "}
- (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800')}}>
+
+ theme.palette.mode === "dark" ? "grey.300" : "grey.800",
+ }}
+ >
{cityPreview}
- {/* Координаты */}
-
-
- Координаты:{' '}
+ {/* Адрес */}
+
+
+ Адрес:{" "}
- (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800')}}>
- {coordinatesPreview.latitude}, {coordinatesPreview.longitude}
+
+ theme.palette.mode === "dark" ? "grey.300" : "grey.800",
+ }}
+ >
+ {addressContent}
+ {/* Координаты */}
+ {coordinatesPreview && (
+
+
+ Координаты:{" "}
+
+
+ theme.palette.mode === "dark" ? "grey.300" : "grey.800",
+ }}
+ >
+ {coordinatesPreview}
+
+
+ )}
{/* Обложка */}
{thumbnailPreview && (
-
-
- Обложка:
+
+
+ Логотип достопримечательности:
)}
{/* Водяные знаки */}
-
-
+
+
Водяные знаки:
-
+
{watermarkLUPreview && (
-
+
Левый верхний:
{
sx={{
width: 100,
height: 100,
- objectFit: 'cover',
+ objectFit: "cover",
borderRadius: 1,
- border: '1px solid',
- borderColor: 'primary.main',
+ border: "1px solid",
+ borderColor: "primary.main",
}}
/>
)}
{watermarkRDPreview && (
-
- Правый нижний:
+
+ Правый верхний:
{
sx={{
width: 100,
height: 100,
- objectFit: 'cover',
+ objectFit: "cover",
borderRadius: 1,
- border: '1px solid',
- borderColor: 'primary.main',
+ border: "1px solid",
+ borderColor: "primary.main",
}}
/>
@@ -432,23 +770,16 @@ export const SightCreate = () => {
{/* Связанные статьи */}
-
- Связанные статьи:
-
{leftArticlePreview && (
-
- Левая статья:{' '}
+
+ Левая статья:{" "}
(theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
- textDecoration: 'none',
- '&:hover': {
- textDecoration: 'underline',
- },
+ color: (theme) =>
+ theme.palette.mode === "dark" ? "grey.300" : "grey.800",
}}
>
{leftArticlePreview}
@@ -457,18 +788,14 @@ export const SightCreate = () => {
)}
{previewArticlePreview && (
-
- Статья-предпросмотр:{' '}
+
+ Статья-предпросмотр:{" "}
(theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
- textDecoration: 'none',
- '&:hover': {
- textDecoration: 'underline',
- },
+ color: (theme) =>
+ theme.palette.mode === "dark" ? "grey.300" : "grey.800",
}}
>
{previewArticlePreview}
@@ -479,5 +806,5 @@ export const SightCreate = () => {
- )
-}
+ );
+});
diff --git a/src/pages/sight/edit.tsx b/src/pages/sight/edit.tsx
index d814bc7..d1569fe 100644
--- a/src/pages/sight/edit.tsx
+++ b/src/pages/sight/edit.tsx
@@ -1,501 +1,1691 @@
-import {Autocomplete, Box, TextField, Paper, Typography} from '@mui/material'
-import {Edit, useAutocomplete} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
-import {Controller} from 'react-hook-form'
-import {useParams} from 'react-router'
-import React, {useState, useEffect} from 'react'
-import {LinkedItems} from '../../components/LinkedItems'
-import {CreateSightArticle} from '../../components/CreateSightArticle'
-import {ArticleItem, articleFields} from './types'
-import {TOKEN_KEY} from '../../authProvider'
-import {Link} from 'react-router'
+import {
+ Autocomplete,
+ Box,
+ TextField,
+ Paper,
+ Typography,
+ Tab,
+ Tabs,
+ Button,
+ Stack,
+} from "@mui/material";
+import { Edit, useAutocomplete } from "@refinedev/mui";
+import { useForm } from "@refinedev/react-hook-form";
+import { Controller, FieldValues } from "react-hook-form";
+import { Link, useParams } from "react-router";
+import React, { useState, useEffect } from "react";
+import { CreateSightArticle, LinkedItemsContents } from "@components";
+import { ArticleItem, articleFields } from "./types";
+import { axiosInstance, TOKEN_KEY } from "@providers";
+import { observer } from "mobx-react-lite";
-export const SightEdit = () => {
- const {id: sightId} = useParams<{id: string}>()
+import {
+ Languages,
+ languageStore,
+ articleStore,
+ META_LANGUAGE,
+ EVERY_LANGUAGE,
+} from "@stores";
+import axios from "axios";
+import { LanguageSelector, MediaData, MediaView } from "@ui";
+import { ArticleEditModal } from "../../components/modals/ArticleEditModal/index";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+
+function a11yProps(index: number) {
+ return {
+ id: `simple-tab-${index}`,
+ "aria-controls": `simple-tabpanel-${index}`,
+ };
+}
+
+interface TabPanelProps {
+ children?: React.ReactNode;
+ index: number;
+ value: number;
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+ const { children, value, index, ...other } = props;
+
+ return (
+ ();
+ const [leftArticleData, setLeftArticleData] = useState<{
+ heading: string;
+ body: string;
+ media: MediaData;
+ }>();
- const {autocompleteProps: mediaAutocompleteProps} = useAutocomplete({
- resource: 'media',
+ const [tabValue, setTabValue] = useState(0);
+
+ const { autocompleteProps: mediaAutocompleteProps } = useAutocomplete({
+ resource: "media",
onSearch: (value) => [
{
- field: 'media_name',
- operator: 'contains',
+ field: "media_name",
+ operator: "contains",
value,
},
],
- })
+ });
+
+ const { autocompleteProps: articleAutocompleteProps } = useAutocomplete({
+ resource: "article",
- const {autocompleteProps: articleAutocompleteProps} = useAutocomplete({
- resource: 'article',
onSearch: (value) => [
{
- field: 'heading',
- operator: 'contains',
+ field: "heading",
+ operator: "contains",
+ value,
+ },
+ {
+ field: "media_type",
+ operator: "contains",
value,
},
],
- })
+ });
+
+ useEffect(() => {
+ if (sightData.name[language]) setValue("name", sightData.name[language]);
+ if (sightData.address[language])
+ setValue("address", sightData.address[language]);
+ }, [language, sightData, setValue]);
// Состояния для предпросмотра
- const [namePreview, setNamePreview] = useState('')
- const [coordinatesPreview, setCoordinatesPreview] = useState({
- latitude: '',
- longitude: '',
- })
- const [cityPreview, setCityPreview] = useState('')
- const [thumbnailPreview, setThumbnailPreview] = useState(null)
- const [watermarkLUPreview, setWatermarkLUPreview] = useState(null)
- const [watermarkRDPreview, setWatermarkRDPreview] = useState(null)
- const [leftArticlePreview, setLeftArticlePreview] = useState('')
- const [previewArticlePreview, setPreviewArticlePreview] = useState('')
+ const [creatingArticleHeading, setCreatingArticleHeading] =
+ useState("");
+ const [creatingArticleBody, setCreatingArticleBody] = useState("");
+
+ const [coordinatesPreview, setCoordinatesPreview] = useState("");
+ const [selectedArticleIndex, setSelectedArticleIndex] = useState(-1);
+ const [previewMediaFile, setPreviewMediaFile] = useState();
+ const [thumbnailPreview, setThumbnailPreview] = useState(null);
+ const [watermarkLUPreview, setWatermarkLUPreview] = useState(
+ null
+ );
+ const [watermarkRDPreview, setWatermarkRDPreview] = useState(
+ null
+ );
+
+ const [linkedArticles, setLinkedArticles] = useState([]);
// Следим за изменениями во всех полях
- const nameContent = watch('name')
- const latitudeContent = watch('latitude')
- const longitudeContent = watch('longitude')
- const cityContent = watch('city_id')
- const thumbnailContent = watch('thumbnail')
- const watermarkLUContent = watch('watermark_lu')
- const watermarkRDContent = watch('watermark_rd')
- const leftArticleContent = watch('left_article')
- const previewArticleContent = watch('preview_article')
+ const selectedArticle = linkedArticles[selectedArticleIndex];
- // Обновляем состояния при изменении полей
- useEffect(() => {
- setNamePreview(nameContent || '')
- }, [nameContent])
+ const previewMediaId = watch("preview_media");
+ const leftArticleId = watch("left_article");
useEffect(() => {
- setCoordinatesPreview({
- latitude: latitudeContent || '',
- longitude: longitudeContent || '',
- })
- }, [latitudeContent, longitudeContent])
+ if (previewMediaId) {
+ const selectedMedia = mediaAutocompleteProps.options.find(
+ (option) => option.id === previewMediaId
+ );
+ console.log("Triggering", previewMediaId);
+ if (!selectedMedia) return;
+ setPreviewMediaFile(selectedMedia);
+ }
+ }, [previewMediaId, mediaAutocompleteProps.options]);
+
+ // useEffect(() => {
+ // const selectedWatermarkLU = mediaAutocompleteProps.options.find(
+ // (option) => option.id === watermarkLUContent
+ // );
+ // setWatermarkLUPreview(
+ // selectedWatermarkLU
+ // ? `${import.meta.env.VITE_KRBL_MEDIA}${
+ // selectedWatermarkLU.id
+ // }/download?token=${localStorage.getItem(TOKEN_KEY)}`
+ // : null
+ // );
+ // }, [watermarkLUContent, ]);
+
+ const addressContent = watch("address");
+ const latitudeContent = watch("latitude");
+ const longitudeContent = watch("longitude");
+ const thumbnailContent = watch("thumbnail");
+ const watermarkLUContent = watch("watermark_lu");
+ const watermarkRDContent = watch("watermark_rd");
useEffect(() => {
- const selectedCity = cityAutocompleteProps.options.find((option) => option.id === cityContent)
- setCityPreview(selectedCity?.name || '')
- }, [cityContent, cityAutocompleteProps.options])
+ if (latitudeContent && longitudeContent) {
+ setCoordinates(`${latitudeContent} ${longitudeContent}`);
+ }
+ }, [latitudeContent, longitudeContent]);
+
+ const handleCoordinatesChange = (e: React.ChangeEvent) => {
+ 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(() => {
- const selectedThumbnail = mediaAutocompleteProps.options.find((option) => option.id === thumbnailContent)
- setThumbnailPreview(selectedThumbnail ? `https://wn.krbl.ru/media/${selectedThumbnail.id}/download?token=${localStorage.getItem(TOKEN_KEY)}` : null)
- }, [thumbnailContent, mediaAutocompleteProps.options])
+ if (linkedArticles[selectedArticleIndex]?.id) {
+ getMedia(linkedArticles[selectedArticleIndex].id).then((media) => {
+ setMediaFile(media);
+ });
+ }
+ }, [selectedArticleIndex, linkedArticles]);
useEffect(() => {
- const selectedWatermarkLU = mediaAutocompleteProps.options.find((option) => option.id === watermarkLUContent)
- setWatermarkLUPreview(selectedWatermarkLU ? `https://wn.krbl.ru/media/${selectedWatermarkLU.id}/download?token=${localStorage.getItem(TOKEN_KEY)}` : null)
- }, [watermarkLUContent, mediaAutocompleteProps.options])
+ const selectedThumbnail = mediaAutocompleteProps.options.find(
+ (option) => option.id === thumbnailContent
+ );
+ setThumbnailPreview(
+ selectedThumbnail
+ ? `${import.meta.env.VITE_KRBL_MEDIA}${
+ selectedThumbnail.id
+ }/download?token=${localStorage.getItem(TOKEN_KEY)}`
+ : null
+ );
+ }, [thumbnailContent, mediaAutocompleteProps.options]);
useEffect(() => {
- const selectedWatermarkRD = mediaAutocompleteProps.options.find((option) => option.id === watermarkRDContent)
- setWatermarkRDPreview(selectedWatermarkRD ? `https://wn.krbl.ru/media/${selectedWatermarkRD.id}/download?token=${localStorage.getItem(TOKEN_KEY)}` : null)
- }, [watermarkRDContent, mediaAutocompleteProps.options])
+ const selectedWatermarkLU = mediaAutocompleteProps.options.find(
+ (option) => option.id === watermarkLUContent
+ );
+ setWatermarkLUPreview(
+ selectedWatermarkLU
+ ? `${import.meta.env.VITE_KRBL_MEDIA}${
+ selectedWatermarkLU.id
+ }/download?token=${localStorage.getItem(TOKEN_KEY)}`
+ : null
+ );
+ }, [watermarkLUContent, mediaAutocompleteProps.options]);
useEffect(() => {
- const selectedLeftArticle = articleAutocompleteProps.options.find((option) => option.id === leftArticleContent)
- setLeftArticlePreview(selectedLeftArticle?.heading || '')
- }, [leftArticleContent, articleAutocompleteProps.options])
+ const selectedWatermarkRD = mediaAutocompleteProps.options.find(
+ (option) => option.id === watermarkRDContent
+ );
+ setWatermarkRDPreview(
+ selectedWatermarkRD
+ ? `${import.meta.env.VITE_KRBL_MEDIA}${
+ selectedWatermarkRD.id
+ }/download?token=${localStorage.getItem(TOKEN_KEY)}`
+ : null
+ );
+ }, [watermarkRDContent, mediaAutocompleteProps.options]);
useEffect(() => {
- const selectedPreviewArticle = articleAutocompleteProps.options.find((option) => option.id === previewArticleContent)
- setPreviewArticlePreview(selectedPreviewArticle?.heading || '')
- }, [previewArticleContent, articleAutocompleteProps.options])
+ const selectedLeftArticle = articleAutocompleteProps.options.find(
+ (option) => option.id === leftArticleId
+ );
+ if (!selectedLeftArticle?.id) return;
+ getMedia(selectedLeftArticle.id).then((media) => {
+ setLeftArticleData({
+ heading: selectedLeftArticle.heading,
+ body: selectedLeftArticle.body,
+ media,
+ });
+ });
+ }, [leftArticleId, articleAutocompleteProps.loading]);
+
+ function updateTranslations(update: boolean = true) {
+ const newSightData = {
+ ...sightData,
+ name: {
+ ...sightData.name,
+ [language]: watch("name") ?? "",
+ },
+ address: {
+ ...sightData.address,
+ [language]: watch("address") ?? "",
+ },
+ };
+ if (update) setSightData(newSightData);
+ return newSightData;
+ }
+
+ const handleLanguageChange = (lang: Languages) => {
+ updateTranslations();
+ setLanguageAction(lang);
+ };
+
+ const handleFormSubmit = handleSubmit(async (values: FieldValues) => {
+ const newTranslations = updateTranslations(false);
+ console.log(newTranslations);
+ await onFinish({
+ ...values,
+ translations: newTranslations,
+ });
+ });
+
+ useEffect(() => {
+ return () => {
+ setLanguageAction("ru");
+ };
+ }, [setLanguageAction]);
+
+ const [articleAdditionMode, setArticleAdditionMode] = useState<
+ "attaching" | "creating"
+ >("attaching");
+ const [selectedItemId, setSelectedItemId] = useState();
+ const [updatedLinkedArticles, setUpdatedLinkedArticles] = useState<
+ ArticleItem[]
+ >([]);
+
+ const linkItem = () => {
+ if (!selectedItemId) return;
+ const requestData = {
+ article_id: selectedItemId,
+ page_num: linkedArticles.length + 1,
+ };
+
+ axiosInstance
+ .post(
+ `${import.meta.env.VITE_KRBL_API}/sight/${sightId}/article`,
+ requestData
+ )
+ .then(() => {
+ axiosInstance
+ .get(`${import.meta.env.VITE_KRBL_API}/sight/${sightId}/article`)
+ .then((response) => {
+ setUpdatedLinkedArticles(response?.data || []);
+ setSelectedItemId(undefined);
+ });
+ })
+ .catch((error) => {
+ console.error("Error linking item:", error);
+ });
+ };
return (
-
-
- {/* Форма редактирования */}
-
- (
- option.id === field.value) || null}
- onChange={(_, value) => {
- field.onChange(value?.id || '')
- }}
- getOptionLabel={(item) => {
- return item ? item.name : ''
- }}
- isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
- }}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()))
- }}
- renderInput={(params) => (
- option.id === field.value) || null}
- onChange={(_, value) => {
- field.onChange(value?.id || '')
- }}
- getOptionLabel={(item) => {
- return item ? item.media_name : ''
- }}
- isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
- }}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
- }}
- renderInput={(params) => (
- option.id === field.value) || null}
- onChange={(_, value) => {
- field.onChange(value?.id || '')
- }}
- getOptionLabel={(item) => {
- return item ? item.media_name : ''
- }}
- isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
- }}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
- }}
- renderInput={(params) => (
- option.id === field.value) || null}
- onChange={(_, value) => {
- field.onChange(value?.id || '')
- }}
- getOptionLabel={(item) => {
- return item ? item.media_name : ''
- }}
- isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
- }}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
- }}
- renderInput={(params) => (
- option.id === field.value) || null}
- onChange={(_, value) => {
- field.onChange(value?.id || '')
- }}
- getOptionLabel={(item) => {
- return item ? item.heading : ''
- }}
- isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
- }}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.heading.toLowerCase().includes(inputValue.toLowerCase()))
- }}
- renderInput={(params) => (
- option.id === field.value) || null}
- onChange={(_, value) => {
- field.onChange(value?.id || '')
- }}
- getOptionLabel={(item) => {
- return item ? item.heading : ''
- }}
- isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
- }}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.heading.toLowerCase().includes(inputValue.toLowerCase()))
- }}
- renderInput={(params) =>
-
- {/* Блок предпросмотра */}
- (theme.palette.mode === 'dark' ? 'background.paper' : '#fff'),
- }}
+
+
+ setTabValue(newValue)}
+ aria-label="basic tabs example"
>
-
- Предпросмотр
-
-
- {/* Название достопримечательности */}
- (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
- mb: 3,
- }}
- >
- {namePreview}
-
-
- {/* Город */}
-
-
- Город:{' '}
-
- (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800')}}>
- {cityPreview}
-
-
-
- {/* Координаты */}
-
-
- Координаты:{' '}
-
- (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800')}}>
- {coordinatesPreview.latitude}, {coordinatesPreview.longitude}
-
-
-
- {/* Обложка */}
- {thumbnailPreview && (
-
-
- Обложка:
-
-
- )}
-
- {/* Водяные знаки */}
-
-
- Водяные знаки:
-
-
- {watermarkLUPreview && (
-
-
- Левый верхний:
-
-
- )}
- {watermarkRDPreview && (
-
-
- Правый нижний:
-
-
- )}
-
-
-
- {/* Связанные статьи */}
-
- {/*
- Связанные статьи:
- */}
- {leftArticlePreview && (
-
-
- Левая статья:{' '}
-
- (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
- textDecoration: 'none',
- '&:hover': {
- textDecoration: 'underline',
- },
- }}
- >
- {leftArticlePreview}
-
-
- )}
- {previewArticlePreview && (
-
-
- Статья-предпросмотр:{' '}
-
- (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
- textDecoration: 'none',
- '&:hover': {
- textDecoration: 'underline',
- },
- }}
- >
- {previewArticlePreview}
-
-
- )}
-
-
+
- {sightId && (
-
- type="edit" parentId={sightId} parentResource="sight" childResource="article" fields={articleFields} title="статьи" />
+
+
+
+
+
+
- )}
-
- )
-}
+ {/* Форма редактирования */}
+
+
+ (
+ option.id === field.value
+ ) || null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id || "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.media_name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ // filterOptions={(options, { inputValue }) => {
+ // return options.filter((option) =>
+ // option.media_name
+ // .toLowerCase()
+ // .includes(inputValue.toLowerCase())
+ // );
+ // }}
+ renderInput={(params) => (
+ {
+ //setPreviewSelected(true);
+ //setSelectedMediaIndex(-1);
+ }}
+ label="Медиа-предпросмотр"
+ margin="normal"
+ variant="outlined"
+ error={!!errors.arms}
+ helperText={(errors as any)?.arms?.message}
+ />
+ )}
+ />
+ )}
+ />
+
+
+
+
+
+ }
+ />
+
+
+ (
+ option.id === field.value
+ ) || null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id || "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.media_name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter(
+ (option) =>
+ option.media_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase()) &&
+ option.media_type === 3
+ );
+ }}
+ renderInput={(params) => (
+
+
+
+ (
+ option.id === field.value
+ ) || null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id || "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.media_name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.media_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
+ }}
+ renderInput={(params) => (
+
+
+ (
+ option.id === field.value
+ ) || null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id || "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.media_name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.media_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
+ }}
+ renderInput={(params) => (
+
+
+ (
+ option.id === field.value
+ ) || null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id || "");
+ setLeftArticleData(undefined);
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.service_name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.service_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
+ }}
+ renderInput={(params) => (
+
+ Создать и прикрепить новую статью:
+
+ {
+ //console.log("Updating", heading)
+ setCreatingArticleHeading(heading);
+ }}
+ setBodyParent={(body) => {
+ setCreatingArticleBody(body);
+ }}
+ />
+
+
+ //
+ //
+ //
+ )}
+
+
+
+
+ {leftArticleData?.media && (
+
+ theme.palette.mode === "dark" ? "grey.300" : "grey.800",
+ mb: 3,
+ mt: 3,
+ }}
+ >
+ {name}
+
+
+ {/* Адрес */}
+
+
+ Адрес:{" "}
+
+
+ theme.palette.mode === "dark" ? "grey.300" : "grey.800",
+ }}
+ >
+ {addressContent}
+
+
+
+
+ theme.palette.mode === "dark" ? "grey.300" : "grey.800",
+ },
+ "& a": {
+ color: "primary.main",
+ textDecoration: "none",
+ "&:hover": {
+ textDecoration: "underline",
+ },
+ },
+ "& blockquote": {
+ borderLeft: "4px solid",
+ borderColor: "primary.main",
+ pl: 2,
+ my: 2,
+ color: "text.secondary",
+ },
+ "& code": {
+ bgcolor: (theme) =>
+ theme.palette.mode === "dark" ? "grey.900" : "grey.100",
+ p: 0.5,
+ borderRadius: 0.5,
+ color: "primary.main",
+ },
+ }}
+ >
+
+ {leftArticleId ? leftArticleData?.body : creatingArticleBody}
+
+
+
+
+
+
+
+
+
+
+
+
+ (
+ option.id === field.value
+ ) || null
+ }
+ onChange={(_, value) => {
+ console.log(value, _);
+ field.onChange(value?.id || "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.media_name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.media_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
+ }}
+ renderInput={(params) => (
+ {
+ setPreviewSelected(true);
+ //setSelectedMediaIndex(-1);
+ }}
+ label="Медиа-предпросмотр"
+ margin="normal"
+ variant="outlined"
+ error={!!errors.arms}
+ helperText={(errors as any)?.arms?.message}
+ />
+ )}
+ />
+ )}
+ />
+
+
+
+
+ setArticleAdditionMode("attaching")}
+ >
+ Добавить существующую статью
+
+ setArticleAdditionMode("creating")}
+ >
+ Создать и привязать новую статью
+
+
+
+ {articleAdditionMode === "attaching" && (
+
+ option.id === selectedItemId
+ ) || null
+ }
+ onChange={(_, value) => {
+ setSelectedItemId(value?.id || "");
+ setLeftArticleData(undefined);
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.service_name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.service_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
+ }}
+ renderInput={(params) => (
+
+
+
+
+
+ )}
+ {articleAdditionMode === "creating" && (
+ {
+ console.log("Updating", heading);
+ setCreatingArticleHeading(heading);
+ }}
+ setBodyParent={(body) => {
+ setCreatingArticleBody(body);
+ }}
+ />
+ )}
+
+ Привязанные статьи
+
+
+
+ type="edit"
+ disableCreation
+ parentId={sightId!}
+ dragAllowed={true}
+ setItemsParent={setLinkedArticles}
+ parentResource="sight"
+ fields={articleFields}
+ childResource="article"
+ title="статьи"
+ updatedLinkedItems={updatedLinkedArticles}
+ />
+
+
+ {/* Предпросмотр */}
+
+
+
+ {previewSelected && previewMediaFile && (
+
+
+ {
+
+ {!previewSelected && articleAdditionMode !== "creating" && (
+
+ {selectedArticle && (
+
+ {selectedArticle.heading}
+
+ )}
+
+ {selectedArticle && (
+
+ theme.palette.mode === "dark"
+ ? "grey.300"
+ : "grey.800",
+ },
+ "& a": {
+ color: "primary.main",
+ textDecoration: "none",
+ "&:hover": {
+ textDecoration: "underline",
+ },
+ },
+ "& blockquote": {
+ borderLeft: "4px solid",
+ borderColor: "primary.main",
+ pl: 2,
+ my: 2,
+ color: "text.secondary",
+ },
+ "& code": {
+ bgcolor: (theme) =>
+ theme.palette.mode === "dark"
+ ? "grey.900"
+ : "grey.100",
+ p: 0.5,
+ borderRadius: 0.5,
+ color: "primary.main",
+ },
+ }}
+ >
+
+ {selectedArticle.body}
+
+
+ )}
+
+ )}
+
+ {articleAdditionMode === "creating" && (
+
+
+ {creatingArticleHeading}
+
+
+
+ theme.palette.mode === "dark"
+ ? "grey.300"
+ : "grey.800",
+ },
+ "& a": {
+ color: "primary.main",
+ textDecoration: "none",
+ "&:hover": {
+ textDecoration: "underline",
+ },
+ },
+ "& blockquote": {
+ borderLeft: "4px solid",
+ borderColor: "primary.main",
+ pl: 2,
+ my: 2,
+ color: "text.secondary",
+ },
+ "& code": {
+ bgcolor: (theme) =>
+ theme.palette.mode === "dark"
+ ? "grey.900"
+ : "grey.100",
+ p: 0.5,
+ borderRadius: 0.5,
+ color: "primary.main",
+ },
+ }}
+ >
+
+ {creatingArticleBody}
+
+
+
+ )}
+
+
+
+ {linkedArticles.map((article, index) => (
+ {
+ setSelectedArticleIndex(index);
+ setPreviewSelected(false);
+ }}
+ sx={{
+ cursor: "pointer",
+ bgcolor: "transparent",
+ color: "inherit",
+ textDecoration:
+ selectedArticleIndex === index
+ ? "underline"
+ : "none",
+ p: 1,
+ borderRadius: 1,
+ }}
+ >
+
+ {article.heading}
+
+
+ ))}
+
+
+
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+ (
+ option.id === field.value
+ ) || null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id || "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ console.log(cityAutocompleteProps.options);
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase())
+ );
+ }}
+ renderInput={(params) => (
+ (
+ option.id === field.value
+ ) || null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id || "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.media_name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter(
+ (option) =>
+ option.media_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase()) &&
+ option.media_type === 3
+ );
+ }}
+ renderInput={(params) => (
+ (
+ option.id === field.value
+ ) || null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id || "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.media_name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter(
+ (option) =>
+ option.media_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase()) &&
+ option.media_type === 4
+ );
+ }}
+ renderInput={(params) => (
+ (
+ option.id === field.value
+ ) || null
+ }
+ onChange={(_, value) => {
+ field.onChange(value?.id || "");
+ }}
+ getOptionLabel={(item) => {
+ return item ? item.media_name : "";
+ }}
+ isOptionEqualToValue={(option, value) => {
+ return option.id === value?.id;
+ }}
+ filterOptions={(options, { inputValue }) => {
+ return options.filter(
+ (option) =>
+ option.media_name
+ .toLowerCase()
+ .includes(inputValue.toLowerCase()) &&
+ option.media_type === 4
+ );
+ }}
+ renderInput={(params) => (
+
+
+ {/* Предпросмотр */}
+
+ theme.palette.mode === "dark" ? "background.paper" : "#fff",
+ }}
+ >
+
+ Предпросмотр
+
+
+ {thumbnailPreview && (
+
+
+
+ Адрес:{" "}
+
+
+ theme.palette.mode === "dark"
+ ? "grey.300"
+ : "grey.800",
+ }}
+ >
+ {`${addressContent}`}
+
+
+
+ Логотип достопримечательности:
+
+
+ )}
+
+ {/* Водяные знаки */}
+
+
+ Водяные знаки:
+
+
+ {watermarkLUPreview && (
+
+
+ Левый верхний:
+
+
+ )}
+ {watermarkRDPreview && (
+
+
+ Правый верхний:
+
+
+ )}
+
+ {/* Координаты */}
+
+
+ Координаты:{" "}
+
+
+ theme.palette.mode === "dark"
+ ? "grey.300"
+ : "grey.800",
+ }}
+ >
+ {coordinatesPreview}
+
+
+
+
+
+
+
+
+
+ );
+});
diff --git a/src/pages/sight/list.tsx b/src/pages/sight/list.tsx
index 42d3177..a41b838 100644
--- a/src/pages/sight/list.tsx
+++ b/src/pages/sight/list.tsx
@@ -1,128 +1,169 @@
-import React from 'react'
-import {type GridColDef} from '@mui/x-data-grid'
-import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import {Stack} from '@mui/material'
-import {CustomDataGrid} from '../../components/CustomDataGrid'
-import {localeText} from '../../locales/ru/localeText'
+import React from "react";
+import { type GridColDef } from "@mui/x-data-grid";
+import {
+ DeleteButton,
+ EditButton,
+ List,
+ ShowButton,
+ useDataGrid,
+} from "@refinedev/mui";
+import { Stack } from "@mui/material";
+import { CustomDataGrid } from "@components";
+import { localeText } from "../../locales/ru/localeText";
+import { cityStore, languageStore } from "@stores";
+import { observer } from "mobx-react-lite";
-export const SightList = () => {
- const {dataGridProps} = useDataGrid({resource: 'sight/'})
+export const SightList = observer(() => {
+ const { city_id } = cityStore;
+ const { language } = languageStore;
+
+ const { dataGridProps } = useDataGrid({
+ resource: "sight",
+
+ meta: {
+ headers: {
+ "Accept-Language": language,
+ },
+ },
+
+ filters: {
+ permanent: [
+ {
+ field: "cityID",
+ operator: "eq",
+ value: city_id === "0" ? null : city_id,
+ },
+ ],
+ },
+ });
const columns = React.useMemo(
() => [
{
- field: 'id',
- headerName: 'ID',
- type: 'number',
+ field: "id",
+ headerName: "ID",
+ type: "number",
minWidth: 70,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
},
{
- field: 'name',
- headerName: 'Название',
- type: 'string',
+ field: "name",
+ headerName: "Название",
+ type: "string",
minWidth: 150,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'latitude',
- headerName: 'Широта',
- type: 'number',
- minWidth: 150,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'longitude',
- headerName: 'Долгота',
- type: 'number',
- minWidth: 150,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'city_id',
- headerName: 'ID города',
- type: 'number',
- minWidth: 70,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'city',
- headerName: 'Город',
- type: 'string',
- minWidth: 100,
- align: 'left',
- headerAlign: 'left',
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
flex: 1,
},
{
- field: 'thumbnail',
- headerName: 'Карточка',
- type: 'string',
+ field: "latitude",
+ headerName: "Широта",
+ type: "number",
+ minWidth: 150,
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "longitude",
+ headerName: "Долгота",
+ type: "number",
+ minWidth: 150,
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "city_id",
+ headerName: "ID города",
+ type: "number",
+ minWidth: 70,
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "city",
+ headerName: "Город",
+ type: "string",
+ minWidth: 100,
+ align: "left",
+ headerAlign: "left",
+ flex: 1,
+ },
+ {
+ field: "thumbnail",
+ headerName: "Карточка",
+ type: "string",
minWidth: 150,
},
{
- field: 'watermark_lu',
- headerName: 'Вод. знак (lu)',
- type: 'string',
+ field: "watermark_lu",
+ headerName: "Вод. знак (lu)",
+ type: "string",
minWidth: 150,
},
{
- field: 'watermark_rd',
- headerName: 'Вод. знак (rd)',
- type: 'string',
+ field: "watermark_rd",
+ headerName: "Вод. знак (rd)",
+ type: "string",
minWidth: 150,
},
{
- field: 'left_article',
- headerName: 'Левая статья',
- type: 'number',
+ field: "left_article",
+ headerName: "Левая статья",
+ type: "number",
minWidth: 150,
},
{
- field: 'preview_article',
- headerName: 'Пред. просмотр статьи',
- type: 'number',
+ field: "preview_article",
+ headerName: "Пред. просмотр статьи",
+ type: "number",
minWidth: 150,
},
{
- field: 'actions',
- headerName: 'Действия',
+ field: "actions",
+ headerName: "Действия",
minWidth: 120,
- display: 'flex',
- align: 'right',
- headerAlign: 'center',
+ display: "flex",
+ align: "right",
+ headerAlign: "center",
sortable: false,
filterable: false,
disableColumnMenu: true,
- renderCell: function render({row}) {
+ renderCell: function render({ row }) {
return (
<>
- {fields.map(({label, data}) => (
+ {fields.map(({ label, data }) => (
{label}
@@ -30,8 +31,17 @@ export const SightShow = () => {
))}
- {record?.id && type="show" parentId={record.id} parentResource="sight" childResource="article" fields={articleFields} title="статьи" />}
+ {record?.id && (
+
+ type="show"
+ parentId={record.id}
+ parentResource="sight"
+ childResource="article"
+ fields={articleFields}
+ title="статьи"
+ />
+ )}
- )
-}
+ );
+};
diff --git a/src/pages/snapshot/create.tsx b/src/pages/snapshot/create.tsx
new file mode 100644
index 0000000..225280a
--- /dev/null
+++ b/src/pages/snapshot/create.tsx
@@ -0,0 +1,61 @@
+import { Box, TextField, Typography, Paper } from "@mui/material";
+import { Create } from "@refinedev/mui";
+import { useForm } from "@refinedev/react-hook-form";
+import { Controller, FieldValues } from "react-hook-form";
+import React, { useState, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+import { MarkdownEditor } from "../../components/MarkdownEditor";
+import "easymde/dist/easymde.min.css";
+import { LanguageSelector } from "@ui";
+import { observer } from "mobx-react-lite";
+import {
+ EVERY_LANGUAGE,
+ Languages,
+ languageStore,
+ META_LANGUAGE,
+} from "@stores";
+import rehypeRaw from "rehype-raw";
+
+const MemoizedSimpleMDE = React.memo(MarkdownEditor);
+
+export const SnapshotCreate = observer(() => {
+ const {
+ saveButtonProps,
+ refineCore: { formLoading, onFinish },
+ register,
+ control,
+ watch,
+ formState: { errors },
+ setValue,
+ handleSubmit,
+ } = useForm();
+
+ return (
+
+
+ {/* Форма создания */}
+
+
+
+
+
+
+ );
+});
diff --git a/src/pages/snapshot/index.ts b/src/pages/snapshot/index.ts
new file mode 100644
index 0000000..19f3566
--- /dev/null
+++ b/src/pages/snapshot/index.ts
@@ -0,0 +1,3 @@
+export * from "./create";
+export * from "./list";
+export * from "./show";
diff --git a/src/pages/snapshot/list.tsx b/src/pages/snapshot/list.tsx
new file mode 100644
index 0000000..41a232c
--- /dev/null
+++ b/src/pages/snapshot/list.tsx
@@ -0,0 +1,149 @@
+import React from "react";
+import { type GridColDef } from "@mui/x-data-grid";
+import {
+ DeleteButton,
+ EditButton,
+ List,
+ ShowButton,
+ useDataGrid,
+} from "@refinedev/mui";
+import { Stack } from "@mui/material";
+import { CustomDataGrid } from "@components";
+import { localeText } from "../../locales/ru/localeText";
+import { observer } from "mobx-react-lite";
+import { useMany } from "@refinedev/core";
+import { DatabaseBackup } from "lucide-react";
+import axios from "axios";
+import { TOKEN_KEY } from "../../providers/authProvider";
+import { toast } from "react-toastify";
+import { useNotification } from "@refinedev/core";
+
+export const SnapshotList = observer(() => {
+ const notification = useNotification();
+ const { dataGridProps } = useDataGrid({
+ resource: "snapshots",
+ hasPagination: false,
+ });
+
+ // Получаем список уникальных ParentID
+ const parentIds = React.useMemo(() => {
+ return (
+ dataGridProps?.rows
+ ?.map((row: any) => row.ParentID)
+ .filter((id) => id !== null && id !== undefined)
+ .filter((value, index, self) => self.indexOf(value) === index) || []
+ );
+ }, [dataGridProps?.rows]);
+
+ // Загружаем родительские снапшоты
+ const { data: parentsData } = useMany({
+ resource: "snapshots",
+ ids: parentIds,
+ queryOptions: {
+ enabled: parentIds.length > 0,
+ },
+ });
+
+ // Создаем мапу ID → Name
+ const parentNameMap = React.useMemo(() => {
+ const map: Record = {};
+ parentsData?.data?.forEach((parent) => {
+ map[parent.ID] = parent.Name;
+ });
+ return map;
+ }, [parentsData]);
+
+ const handleBackup = async (id: number) => {
+ try {
+ const response = await axios.post(
+ `${import.meta.env.VITE_KRBL_API}/snapshots/${id}/restore`,
+ {},
+ {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,
+ },
+ }
+ );
+
+ if (notification && typeof notification.open === "function") {
+ notification.open({
+ message: "Cнапшот восстановлен",
+ type: "success",
+ });
+ }
+ } catch (error) {
+ if (notification && typeof notification.open === "function") {
+ notification.open({
+ message: "Ошибка при восстановлении снимка",
+ type: "error",
+ });
+ }
+ }
+ };
+
+ const columns = React.useMemo(
+ () => [
+ {
+ field: "Name",
+ headerName: "Название",
+ type: "string",
+ minWidth: 150,
+ flex: 1,
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "ParentID",
+ headerName: "Родитель",
+ minWidth: 150,
+ flex: 1,
+ renderCell: ({ value }) => parentNameMap[value] || "—",
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "actions",
+ headerName: "Действия",
+ minWidth: 150,
+ display: "flex",
+ align: "center",
+ headerAlign: "center",
+ sortable: false,
+ filterable: false,
+ disableColumnMenu: true,
+ renderCell: function render({ row }) {
+ return (
+ <>
+
+
+
+ {fields.map(({ label, data }) => (
+
+
+ {label}
+
+
+ ))}
+
+
+ );
+};
diff --git a/src/pages/station/create.tsx b/src/pages/station/create.tsx
index 00b3940..42bbf67 100644
--- a/src/pages/station/create.tsx
+++ b/src/pages/station/create.tsx
@@ -1,183 +1,314 @@
-import {Autocomplete, Box, TextField, Typography, Paper, Grid} from '@mui/material'
-import {Create, useAutocomplete} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
-import {Controller} from 'react-hook-form'
+import {
+ Autocomplete,
+ Box,
+ TextField,
+ Typography,
+ FormControlLabel,
+ Checkbox,
+ Grid,
+ Paper,
+} from "@mui/material";
+import { Create, useAutocomplete } from "@refinedev/mui";
+import { useForm } from "@refinedev/react-hook-form";
+import { useEffect, useState } from "react";
+import { Controller } from "react-hook-form";
const TRANSFER_FIELDS = [
- {name: 'bus', label: 'Автобус'},
- {name: 'metro_blue', label: 'Метро (синяя)'},
- {name: 'metro_green', label: 'Метро (зеленая)'},
- {name: 'metro_orange', label: 'Метро (оранжевая)'},
- {name: 'metro_purple', label: 'Метро (фиолетовая)'},
- {name: 'metro_red', label: 'Метро (красная)'},
- {name: 'train', label: 'Электричка'},
- {name: 'tram', label: 'Трамвай'},
- {name: 'trolleybus', label: 'Троллейбус'},
-]
+ { name: "bus", label: "Автобус" },
+ { name: "metro_blue", label: "Метро (синяя)" },
+ { name: "metro_green", label: "Метро (зеленая)" },
+ { name: "metro_orange", label: "Метро (оранжевая)" },
+ { name: "metro_purple", label: "Метро (фиолетовая)" },
+ { name: "metro_red", label: "Метро (красная)" },
+ { name: "train", label: "Электричка" },
+ { name: "tram", label: "Трамвай" },
+ { name: "trolleybus", label: "Троллейбус" },
+];
export const StationCreate = () => {
const {
saveButtonProps,
- refineCore: {formLoading},
+ refineCore: { formLoading },
register,
+ setValue,
control,
- formState: {errors},
+ getValues,
+ watch,
+ formState: { errors },
} = useForm({
refineCoreProps: {
- resource: 'station/',
+ resource: "station",
},
- })
+ });
- const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
- resource: 'city',
+ const [coordinates, setCoordinates] = useState("");
+
+ const handleCoordinatesChange = (e: React.ChangeEvent) => {
+ setCoordinates(e.target.value);
+ const [lat, lon] = e.target.value
+ .replace(/,/g, "") // Remove all commas from the string
+ .split(" ")
+ .map((s) => s.trim());
+ console.log(lat, lon);
+ setValue("latitude", lat);
+ setValue("longitude", lon);
+ };
+
+ const directions = [
+ {
+ label: "Прямой",
+ value: true,
+ },
+ {
+ label: "Обратный",
+ value: false,
+ },
+ ];
+
+ const [routeDirection, setRouteDirection] = useState(false);
+
+ const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
+ resource: "city",
onSearch: (value) => [
{
- field: 'name',
- operator: 'contains',
+ field: "name",
+ operator: "contains",
value,
},
],
- })
+ });
return (
-
+
el.value == false)}
+ onChange={(_, element) => {
+ if (element) {
+ setValue("direction", element.value);
+ setRouteDirection(element.value);
+ }
+ }}
+ renderInput={(params) => (
+ {
+ if (value === "") {
+ return 0;
+ }
+ return Number(value);
+ },
+ })}
+ />
+ {
+ if (value === "") {
+ return 0;
+ }
+ return Number(value);
+ },
})}
- error={!!(errors as any)?.longitude}
- helperText={(errors as any)?.longitude?.message}
- margin="normal"
- fullWidth
- InputLabelProps={{shrink: true}}
- type="number"
- label={'Долгота *'}
- name="longitude"
/>
(
+ render={({ field }) => (
option.id === field.value) || null}
+ value={
+ cityAutocompleteProps.options.find(
+ (option) => option.id === field.value
+ ) || null
+ }
onChange={(_, value) => {
- field.onChange(value?.id || '')
+ field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
- return item ? item.name : ''
+ return item ? item.name : "";
}}
isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
+ return option.id === value?.id;
}}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()))
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.name.toLowerCase().includes(inputValue.toLowerCase())
+ );
}}
- renderInput={(params) =>
+ {
+ if (value === "") {
+ return 0;
+ }
+ },
+ })}
+ error={!!(errors as any)?.offset_x}
+ helperText={(errors as any)?.offset_x?.message}
+ margin="normal"
+ fullWidth
+ InputLabelProps={{ shrink: true }}
+ type="number"
+ label={"Смещение (X)"}
+ name="offset_x"
+ />
-
-
- Пересадки
-
-
- {TRANSFER_FIELDS.map((field) => (
-
-
- ))}
-
-
+ {
+ if (value === "") {
+ return 0;
+ }
+ },
+ // required: 'Это поле является обязательным',
+ })}
+ error={!!(errors as any)?.offset_y}
+ helperText={(errors as any)?.offset_y?.message}
+ margin="normal"
+ fullWidth
+ InputLabelProps={{ shrink: true }}
+ type="number"
+ label={"Смещение (Y)"}
+ name="offset_y"
+ />
+
+
+ {/* Группа полей пересадок */}
+
+
+ Пересадки
+
+
+ {TRANSFER_FIELDS.map((field) => (
+
+
+ ))}
+
+
- )
-}
+ );
+};
diff --git a/src/pages/station/edit.tsx b/src/pages/station/edit.tsx
index 983ec74..395f01b 100644
--- a/src/pages/station/edit.tsx
+++ b/src/pages/station/edit.tsx
@@ -1,183 +1,377 @@
-import {Autocomplete, Box, TextField, Typography, Paper, Grid} from '@mui/material'
-import {Edit, useAutocomplete} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
-import {Controller} from 'react-hook-form'
+import {
+ Autocomplete,
+ Box,
+ TextField,
+ Typography,
+ FormControlLabel,
+ Paper,
+ Grid,
+ Checkbox,
+} from "@mui/material";
+import { Edit, useAutocomplete } from "@refinedev/mui";
+import { useForm } from "@refinedev/react-hook-form";
+import { Controller } from "react-hook-form";
-import {useParams} from 'react-router'
-import {LinkedItems} from '../../components/LinkedItems'
-import {type SightItem, sightFields} from './types'
+import { useParams } from "react-router";
+import { LinkedItems } from "../../components/LinkedItems";
+import { type SightItem, sightFields } from "./types";
+import { observer } from "mobx-react-lite";
+import { languageStore } from "../../store/LanguageStore";
+import { useEffect, useState } from "react";
+import { LanguageSwitch } from "../../components/LanguageSwitch/index";
const TRANSFER_FIELDS = [
- {name: 'bus', label: 'Автобус'},
- {name: 'metro_blue', label: 'Метро (синяя)'},
- {name: 'metro_green', label: 'Метро (зеленая)'},
- {name: 'metro_orange', label: 'Метро (оранжевая)'},
- {name: 'metro_purple', label: 'Метро (фиолетовая)'},
- {name: 'metro_red', label: 'Метро (красная)'},
- {name: 'train', label: 'Электричка'},
- {name: 'tram', label: 'Трамвай'},
- {name: 'trolleybus', label: 'Троллейбус'},
-]
+ { name: "bus", label: "Автобус" },
+ { name: "metro_blue", label: "Метро (синяя)" },
+ { name: "metro_green", label: "Метро (зеленая)" },
+ { name: "metro_orange", label: "Метро (оранжевая)" },
+ { name: "metro_purple", label: "Метро (фиолетовая)" },
+ { name: "metro_red", label: "Метро (красная)" },
+ { name: "train", label: "Электричка" },
+ { name: "tram", label: "Трамвай" },
+ { name: "trolleybus", label: "Троллейбус" },
+];
+
+export const StationEdit = observer(() => {
+ const { language, setLanguageAction } = languageStore;
+ const [stationData, setStationData] = useState({
+ ru: {
+ name: "",
+ system_name: "",
+ description: "",
+ address: "",
+ latitude: 0,
+ longitude: 0,
+ },
+ en: {
+ name: "",
+ system_name: "",
+ description: "",
+ address: "",
+ latitude: 0,
+ longitude: 0,
+ },
+ zh: {
+ name: "",
+ system_name: "",
+ description: "",
+ address: "",
+ latitude: 0,
+ longitude: 0,
+ },
+ });
+
+ const handleLanguageChange = () => {
+ setStationData((prevData) => ({
+ ...prevData,
+ [language]: {
+ name: watch("name") ?? "",
+ system_name: watch("system_name") ?? "",
+ description: watch("description") ?? "",
+ address: watch("address") ?? "",
+ latitude: Number(watch("latitude")) || 0,
+ longitude: Number(watch("longitude")) || 0,
+ },
+ }));
+ };
+
+ const [coordinatesPreview, setCoordinatesPreview] = useState({
+ latitude: "",
+ longitude: "",
+ });
-export const StationEdit = () => {
const {
saveButtonProps,
register,
control,
- formState: {errors},
- } = useForm({})
+ getValues,
+ setValue,
+ watch,
+ formState: { errors },
+ } = useForm({
+ refineCoreProps: {
+ meta: {
+ headers: { "Accept-Language": language },
+ },
+ },
+ });
- const {id: stationId} = useParams<{id: string}>()
+ const directions = [
+ {
+ label: "Прямой",
+ value: true,
+ },
+ {
+ label: "Обратный",
+ value: false,
+ },
+ ];
- const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
- resource: 'city',
+ const directionContent = watch("direction");
+ const [routeDirection, setRouteDirection] = useState(false);
+
+ useEffect(() => {
+ if (directionContent) {
+ setRouteDirection(directionContent);
+ }
+ }, [directionContent]);
+
+ useEffect(() => {
+ 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) {
+ setValue(
+ "system_name",
+ stationData[language as keyof typeof stationData]?.system_name || ""
+ );
+ }
+ if (stationData[language as keyof typeof stationData]?.description) {
+ setValue(
+ "description",
+ stationData[language as keyof typeof stationData]?.description || ""
+ );
+ }
+ if (
+ stationData[language as keyof typeof stationData]?.latitude !== undefined
+ ) {
+ setValue(
+ "latitude",
+ stationData[language as keyof typeof stationData]?.latitude || 0
+ );
+ }
+ if (
+ stationData[language as keyof typeof stationData]?.longitude !== undefined
+ ) {
+ setValue(
+ "longitude",
+ stationData[language as keyof typeof stationData]?.longitude || 0
+ );
+ }
+ }, [language, stationData, setValue]);
+
+ useEffect(() => {
+ setLanguageAction("ru");
+ }, []);
+
+ const [coordinates, setCoordinates] = useState("");
+
+ const { id: stationId } = useParams<{ id: string }>();
+
+ const latitudeContent = watch("latitude");
+ const longitudeContent = watch("longitude");
+
+ useEffect(() => {
+ if (latitudeContent && longitudeContent) {
+ setCoordinates(`${latitudeContent} ${longitudeContent}`);
+ }
+ }, [latitudeContent, longitudeContent]);
+
+ const handleCoordinatesChange = (e: React.ChangeEvent) => {
+ 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) => [
{
- field: 'name',
- operator: 'contains',
+ field: "name",
+ operator: "contains",
value,
},
],
- })
+
+ meta: {
+ headers: {
+ "Accept-Language": "ru",
+ },
+ },
+ queryOptions: {
+ queryKey: ["city"],
+ },
+ });
+
+ const cityId = watch("city_id");
return (
-
+
+ el.value == routeDirection)}
+ onChange={(_, element) => {
+ if (element) {
+ setValue("direction", element.value);
+ setRouteDirection(element.value);
+ }
+ }}
+ renderInput={(params) => (
+ {
+ if (value === "") {
+ return 0;
+ }
+ return Number(value);
+ },
+ })}
+ />
+ {
+ if (value === "") {
+ return 0;
+ }
+ return Number(value);
+ },
})}
- error={!!(errors as any)?.longitude}
- helperText={(errors as any)?.longitude?.message}
- margin="normal"
- fullWidth
- InputLabelProps={{shrink: true}}
- type="number"
- label={'Долгота *'}
- name="longitude"
/>
(
+ render={({ field }) => (
option.id === field.value) || null}
+ value={
+ cityAutocompleteProps.options.find(
+ (option) => option.id === field.value
+ ) || null
+ }
onChange={(_, value) => {
- field.onChange(value?.id || '')
+ field.onChange(value?.id || "");
}}
getOptionLabel={(item) => {
- return item ? item.name : ''
+ return item ? item.name : "";
}}
isOptionEqualToValue={(option, value) => {
- return option.id === value?.id
+ return option.id === value?.id;
}}
- filterOptions={(options, {inputValue}) => {
- return options.filter((option) => option.name.toLowerCase().includes(inputValue.toLowerCase()))
+ filterOptions={(options, { inputValue }) => {
+ return options.filter((option) =>
+ option.name.toLowerCase().includes(inputValue.toLowerCase())
+ );
}}
- renderInput={(params) =>
-
- Пересадки
-
-
- {TRANSFER_FIELDS.map((field) => (
-
-
- ))}
-
-
{stationId && (
@@ -188,8 +382,10 @@ export const StationEdit = () => {
childResource="sight"
fields={sightFields}
title="достопримечательности"
+ dragAllowed={false}
+ cityId={cityId}
/>
)}
- )
-}
+ );
+});
diff --git a/src/pages/station/list.tsx b/src/pages/station/list.tsx
index 6b858f7..e89cce2 100644
--- a/src/pages/station/list.tsx
+++ b/src/pages/station/list.tsx
@@ -1,126 +1,180 @@
-import React from 'react'
-import {type GridColDef} from '@mui/x-data-grid'
-import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import {Stack} from '@mui/material'
-import {CustomDataGrid} from '../../components/CustomDataGrid'
-import {localeText} from '../../locales/ru/localeText'
+import React, { useEffect, useMemo } from "react";
+import { type GridColDef } from "@mui/x-data-grid";
+import {
+ DeleteButton,
+ EditButton,
+ List,
+ ShowButton,
+ useDataGrid,
+} from "@refinedev/mui";
+import { Stack, Typography } from "@mui/material";
+import { CustomDataGrid } from "../../components/CustomDataGrid";
+import { localeText } from "../../locales/ru/localeText";
+import { cityStore } from "../../store/CityStore";
+import { observer } from "mobx-react-lite";
+import { languageStore } from "../../store/LanguageStore";
-export const StationList = () => {
- const {dataGridProps} = useDataGrid({resource: 'station/'})
+export const StationList = observer(() => {
+ const { city_id } = cityStore;
+ const { language } = languageStore;
+
+ const { dataGridProps } = useDataGrid({
+ resource: "station",
+ meta: {
+ headers: {
+ "Accept-Language": language,
+ },
+ },
+ filters: {
+ permanent: [
+ {
+ field: "cityID",
+ operator: "eq",
+ value: city_id === "0" ? null : city_id,
+ },
+ ],
+ },
+ });
const columns = React.useMemo(
() => [
{
- field: 'id',
- headerName: 'ID',
- type: 'number',
+ field: "id",
+ headerName: "ID",
+ type: "number",
minWidth: 70,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
},
{
- field: 'name',
- headerName: 'Название',
- type: 'string',
+ field: "name",
+ headerName: "Название",
+ type: "string",
minWidth: 300,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'system_name',
- headerName: 'Системное название',
- type: 'string',
- minWidth: 200,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'latitude',
- headerName: 'Широта',
- type: 'number',
- minWidth: 150,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'longitude',
- headerName: 'Долгота',
- type: 'number',
- minWidth: 150,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'city_id',
- headerName: 'ID города',
- type: 'number',
- minWidth: 120,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'offset_x',
- headerName: 'Смещение (X)',
- type: 'number',
- minWidth: 120,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'offset_y',
- headerName: 'Смещение (Y)',
- type: 'number',
- minWidth: 120,
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
- },
- {
- field: 'description',
- headerName: 'Описание',
- type: 'string',
- display: 'flex',
- align: 'left',
- headerAlign: 'left',
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
flex: 1,
},
{
- field: 'actions',
- headerName: 'Действия',
- cellClassName: 'station-actions',
- align: 'right',
- headerAlign: 'center',
+ field: "system_name",
+ headerName: "Системное название",
+ type: "string",
+ minWidth: 200,
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
+ flex: 1,
+ },
+ {
+ field: "direction",
+ headerName: "Направление",
+ type: "boolean",
+ minWidth: 200,
+ display: "flex",
+
+ renderCell: ({ value }) => (
+
+ {value ? "прямой" : "обратный"}
+
+ ),
+ },
+ {
+ field: "latitude",
+ headerName: "Широта",
+ type: "number",
+ minWidth: 150,
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "longitude",
+ headerName: "Долгота",
+ type: "number",
+ minWidth: 150,
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "city_id",
+ headerName: "ID города",
+ type: "number",
minWidth: 120,
- display: 'flex',
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "offset_x",
+ headerName: "Смещение (X)",
+ type: "number",
+ minWidth: 120,
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
+ },
+ {
+ field: "offset_y",
+ headerName: "Смещение (Y)",
+ type: "number",
+ minWidth: 120,
+ display: "flex",
+ align: "left",
+ headerAlign: "left",
+ },
+ // {
+ // field: "description",
+ // headerName: "Описание",
+ // type: "string",
+ // display: "flex",
+ // align: "left",
+ // headerAlign: "left",
+ // flex: 1,
+ // },
+ {
+ field: "actions",
+ headerName: "Действия",
+ cellClassName: "station-actions",
+ align: "right",
+ headerAlign: "center",
+ minWidth: 120,
+ display: "flex",
sortable: false,
filterable: false,
disableColumnMenu: true,
- renderCell: function render({row}) {
+ renderCell: function render({ row }) {
return (
<>
+
- )
+ );
}
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
new file mode 100644
index 0000000..35aae8c
--- /dev/null
+++ b/src/components/ui/index.ts
@@ -0,0 +1,5 @@
+export * from './Icons';
+export * from './LanguageSelector';
+export * from './SidebarTitle';
+export * from './MediaView';
+export * from './ModelViewer';
\ No newline at end of file
diff --git a/src/contexts/color-mode/theme.ts b/src/contexts/color-mode/theme.ts
index 3a77ef3..ff19a33 100644
--- a/src/contexts/color-mode/theme.ts
+++ b/src/contexts/color-mode/theme.ts
@@ -1,7 +1,7 @@
import {createTheme} from '@mui/material/styles'
import {RefineThemes} from '@refinedev/mui'
-const COLORS = {
+export const COLORS = {
primary: '#7f6b58',
secondary: '#48989f',
}
diff --git a/src/globals.css b/src/globals.css
index aae62fc..113f0d5 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -1,5 +1,5 @@
-@import './stylesheets/hidden-functionality.css';
-@import './stylesheets/roles-functionality.css';
+@import "./stylesheets/hidden-functionality.css";
+@import "./stylesheets/roles-functionality.css";
.limited-text {
overflow: hidden;
@@ -7,3 +7,19 @@
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
+
+.backup-button {
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ padding: 0;
+ margin: 0;
+ width: 32px;
+ height: 32px;
+ color: rgba(79, 138, 95, 1);
+ border-radius: 10%;
+ transition: all 0.3s ease;
+}
+.backup-button:hover {
+ background-color: rgba(79, 138, 95, 0.05);
+}
diff --git a/src/icons/124.svg b/src/icons/124.svg
new file mode 100644
index 0000000..f1ee3b0
--- /dev/null
+++ b/src/icons/124.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/icons/Logo.tsx b/src/icons/Logo.tsx
new file mode 100644
index 0000000..ccd4f8a
--- /dev/null
+++ b/src/icons/Logo.tsx
@@ -0,0 +1,22 @@
+export const Logo = ({
+ width = 103,
+ height = 75,
+}: {
+ width?: number;
+ height?: number;
+}) => {
+ return (
+
+ );
+};
diff --git a/src/index.tsx b/src/index.tsx
index bc97292..cac0874 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,14 +1,9 @@
-import React from 'react'
-import {createRoot} from 'react-dom/client'
+import { createRoot } from "react-dom/client";
-import App from './App'
-import './globals.css'
+import App from "./App";
+import "./globals.css";
-const container = document.getElementById('root') as HTMLElement
-const root = createRoot(container)
+const container = document.getElementById("root") as HTMLElement;
+const root = createRoot(container);
-root.render(
-
+ {/* -
-
{value}
,
+ renderCell: ({ value }) => (
+
+ {value}
+
+ ),
},
{
- field: 'left_color',
- headerName: 'Цвет левого виджета',
- type: 'string',
+ field: "left_color",
+ headerName: "Цвет левого виджета",
+ type: "string",
minWidth: 150,
- renderCell: ({value}) => {value}
,
+ renderCell: ({ value }) => (
+
+ {value}
+
+ ),
},
{
- field: 'right_color',
- headerName: 'Цвет правого виджета',
- type: 'string',
+ field: "right_color",
+ headerName: "Цвет правого виджета",
+ type: "string",
minWidth: 150,
- renderCell: ({value}) => {value}
,
+ renderCell: ({ value }) => (
+
+ {value}
+
+ ),
},
{
- field: 'logo',
- headerName: 'Лого',
- type: 'string',
+ field: "logo",
+ headerName: "Лого",
+ type: "string",
minWidth: 150,
},
{
- field: 'slogan',
- headerName: 'Слоган',
- type: 'string',
+ field: "slogan",
+ headerName: "Слоган",
+ type: "string",
minWidth: 150,
},
{
- field: 'actions',
- headerName: 'Действия',
+ field: "actions",
+ headerName: "Действия",
minWidth: 120,
- display: 'flex',
- align: 'right',
- headerAlign: 'center',
+ display: "flex",
+ align: "right",
+ headerAlign: "center",
sortable: false,
filterable: false,
disableColumnMenu: true,
- renderCell: function render({row}) {
+ renderCell: function render({ row }) {
return (
<>
-
-
,
+ label: "Логотип",
+ data: "logo",
+ render: (value: number) => (
+ -
-
},
- ]
+ { label: "Страна", data: "country" },
+ {
+ label: "Герб",
+ data: "arms",
+ render: (value: number) => (
+ -
-
-
-
- )}
-
- {record && record.media_type === 2 && (
- Whoopsie Daisy!
: this.props.children; + } +} + +export function InfiniteCanvas({ + children, +}: Readonly<{ children?: ReactNode }>) { + const { + position, + setPosition, + scale, + setScale, + rotation, + setRotation, + setScreenCenter, + screenCenter, + } = useTransform(); + const { routeData, originalRouteData } = useMapData(); + + const applicationRef = useApplication(); + + const [isDragging, setIsDragging] = useState(false); + const [startMousePosition, setStartMousePosition] = useState({ x: 0, y: 0 }); + const [startRotation, setStartRotation] = useState(0); + const [startPosition, setStartPosition] = useState({ x: 0, y: 0 }); + + // Флаг для предотвращения конфликта между пользовательским вводом и данными маршрута + const [isUserInteracting, setIsUserInteracting] = useState(false); + + // Реф для отслеживания последнего значения originalRouteData?.rotate + const lastOriginalRotation = useRef
+
+
+
+ Loading...
;
+ }
+
+ return (
+
+
+
+ {
+ g.clear();
+ const localCenter = screenToLocal(0, 0);
+ g.circle(localCenter.x, localCenter.y, 10);
+ g.fill("#fff");
+ }}
+ />
+
+
+
+ );
+});
diff --git a/src/pages/route-preview/types.ts b/src/pages/route-preview/types.ts
new file mode 100644
index 0000000..6ced8be
--- /dev/null
+++ b/src/pages/route-preview/types.ts
@@ -0,0 +1,69 @@
+export interface RouteData {
+ carrier: string;
+ carrier_id: number;
+ center_latitude: number;
+ center_longitude: number;
+ governor_appeal: number;
+ id: number;
+ path: [number, number][];
+ rotate: number;
+ route_direction: boolean;
+ route_number: string;
+ route_sys_number: string;
+ scale_max: number;
+ scale_min: number;
+}
+
+export interface StationTransferData {
+ bus: string;
+ metro_blue: string;
+ metro_green: string;
+ metro_orange: string;
+ metro_purple: string;
+ metro_red: string;
+ train: string;
+ tram: string;
+ trolleybus: string;
+}
+
+export interface StationData {
+ address: string;
+ city_id?: number;
+ description: string;
+ id: number;
+ latitude: number;
+ longitude: number;
+ name: string;
+ offset_x: number;
+ offset_y: number;
+ system_name: string;
+ transfers: StationTransferData;
+}
+
+export interface StationPatchData {
+ station_id: number;
+ offset_x: number;
+ offset_y: number;
+ transfers: StationTransferData;
+}
+
+export interface SightPatchData {
+ sight_id: number;
+ latitude: number;
+ longitude: number;
+}
+
+export interface SightData {
+ address: string;
+ city: string;
+ city_id: number;
+ id: number;
+ latitude: number;
+ left_article: number;
+ longitude: number;
+ name: string;
+ preview_media: number;
+ thumbnail: string; // uuid
+ watermark_lu: string; // uuid
+ watermark_rd: string; // uuid
+}
\ No newline at end of file
diff --git a/src/pages/route-preview/utils.ts b/src/pages/route-preview/utils.ts
new file mode 100644
index 0000000..fca59b8
--- /dev/null
+++ b/src/pages/route-preview/utils.ts
@@ -0,0 +1,14 @@
+// approximation
+export function coordinatesToLocal(latitude: number, longitude: number) {
+ return {
+ x: longitude,
+ y: -latitude*2,
+ }
+}
+
+export function localToCoordinates(x: number, y: number) {
+ return {
+ longitude: x,
+ latitude: -y/2,
+ }
+}
\ No newline at end of file
diff --git a/src/pages/route/create.tsx b/src/pages/route/create.tsx
index 66f1849..32a1d8d 100644
--- a/src/pages/route/create.tsx
+++ b/src/pages/route/create.tsx
@@ -1,217 +1,369 @@
-import {Autocomplete, Box, TextField, FormControlLabel, Checkbox, Typography} from '@mui/material'
-import {Create, useAutocomplete} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
-import {Controller} from 'react-hook-form'
+import {
+ Autocomplete,
+ Box,
+ TextField,
+ FormControlLabel,
+ Checkbox,
+ Typography,
+} from "@mui/material";
+import { Create, useAutocomplete } from "@refinedev/mui";
+import { useForm } from "@refinedev/react-hook-form";
+import { useState } from "react";
+import { Controller } from "react-hook-form";
export const RouteCreate = () => {
const {
saveButtonProps,
- refineCore: {formLoading},
+ refineCore: { formLoading },
register,
control,
- formState: {errors},
+ setValue,
+ formState: { errors },
} = useForm({
refineCoreProps: {
- resource: 'route/',
+ resource: "route",
},
- })
+ });
- const {autocompleteProps: carrierAutocompleteProps} = useAutocomplete({
- resource: 'carrier',
+ const directions = [
+ {
+ label: "Прямой",
+ value: true,
+ },
+ {
+ label: "Обратный",
+ value: false,
+ },
+ ];
+ const { autocompleteProps: carrierAutocompleteProps } = useAutocomplete({
+ resource: "carrier",
onSearch: (value) => [
{
- field: 'short_name',
- operator: 'contains',
+ field: "short_name",
+ operator: "contains",
value,
},
],
- })
+ });
+
+ const { autocompleteProps: governorAppealAutocompleteProps } =
+ useAutocomplete({
+ resource: "article",
+
+ onSearch: (value) => [
+ {
+ field: "heading",
+ operator: "contains",
+ value,
+ },
+ {
+ field: "media_type",
+ operator: "contains",
+ value,
+ },
+ ],
+ });
+
+ const [routeDirection, setRouteDirection] = useState(false);
return (
-
-
+ {value === index && {children} }
+
+ );
+}
+
+export const SightEdit = observer(() => {
+ const { id: sightId } = useParams<{ id: string }>();
+ const { language, setLanguageAction } = languageStore;
+ const [previewSelected, setPreviewSelected] = useState(true);
+ const { setArticleModalOpenAction, setArticleIdAction } = articleStore;
+ const [sightData, setSightData] = useState({
+ name: EVERY_LANGUAGE(""),
+ address: EVERY_LANGUAGE(""),
+ });
+ const [coordinates, setCoordinates] = useState("");
const {
saveButtonProps,
register,
+ refineCore: { onFinish },
control,
watch,
- formState: {errors},
- } = useForm({})
+ getValues,
+ setValue,
+ handleSubmit,
+ formState: { errors },
+ } = useForm({
+ refineCoreProps: META_LANGUAGE(language),
+ warnWhenUnsavedChanges: false,
+ });
+ const name = watch("name");
- const {autocompleteProps: cityAutocompleteProps} = useAutocomplete({
- resource: 'city',
+ const getMedia = async (id?: string | number) => {
+ if (!id) return;
+ try {
+ const response = await axios.get(
+ `${import.meta.env.VITE_KRBL_API}/article/${id}/media`,
+ {
+ headers: {
+ Authorization: `Bearer ${localStorage.getItem(TOKEN_KEY)}`,
+ "Accept-Language": language,
+ },
+ }
+ );
+ return response.data[0];
+ } catch {
+ return;
+ }
+ };
+
+ useEffect(() => {
+ setLanguageAction("ru");
+ }, []);
+
+ const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
+ resource: "city",
onSearch: (value) => [
{
- field: 'name',
- operator: 'contains',
+ field: "name",
+ operator: "contains",
value,
},
],
- })
+ ...META_LANGUAGE("ru"),
+ });
+ const [mediaFile, setMediaFile] = useState-
+
-
+
-
-