+
+ );
+});
+
+export default ErrorOverlay;
diff --git a/src/client/src/components/Fullscreen3DModal.jsx b/src/client/src/components/Fullscreen3DModal.jsx
new file mode 100644
index 0000000..989c088
--- /dev/null
+++ b/src/client/src/components/Fullscreen3DModal.jsx
@@ -0,0 +1,56 @@
+import React, { useMemo, useState } from "react";
+import { createPortal } from "react-dom";
+import { ThreeView } from "./widgets/ThreeView";
+import { ThreeViewErrorBoundary } from "./ThreeViewErrorBoundary";
+import scale_plus from "../assets/fullscreen-modal-actions/scale_plus.png";
+import scale_minus from "../assets/fullscreen-modal-actions/scale_minus.png";
+import closeIcon from "../assets/fullscreen-modal-actions/close.png";
+
+const Fullscreen3DModal = ({ isOpen, onClose, fileUrl }) => {
+ if (!isOpen || !fileUrl) return null;
+
+ const [scale, setScale] = useState(0.1);
+ const [fullscreenResetKey, setFullscreenResetKey] = useState(0);
+
+ const handleResetScale = (e) => {
+ e.stopPropagation();
+ setScale(0.1);
+ };
+
+ return createPortal(
+
+ 
+
+
+ {error}
+
+
,
+ document.body
+ );
+};
+
+export default Fullscreen3DModal;
diff --git a/src/client/src/components/ListOfSights.jsx b/src/client/src/components/ListOfSights.jsx
new file mode 100644
index 0000000..06e2957
--- /dev/null
+++ b/src/client/src/components/ListOfSights.jsx
@@ -0,0 +1,521 @@
+import React, {
+ useState,
+ useEffect,
+ useRef,
+ useCallback,
+ useMemo,
+} from "react";
+import { observer } from "mobx-react-lite";
+import "../styles/ListOfSights.css";
+import { useGeolocationStore, useColorStore } from "../stores";
+import ContentAPI from "../api/content/content.api";
+import { getMediaType } from "../utils/getMediaType";
+
+// Импортируем новые компоненты
+import SightFrame from "./ListOfSights/SightFrame";
+import ListHeader from "./ListOfSights/ListHeader";
+import SightsList from "./ListOfSights/SightsList";
+import AlphabetNavigator from "./ListOfSights/AlphabetNavigator";
+import LanguageSelector from "./ListOfSights/LanguageSelector";
+import TransferWidget from "./ListOfSights/TransferWidget";
+import { apiStore } from "../api/ApiStore/store";
+
+const LANGUAGES = {
+ EN: "en",
+ RU: "ru",
+ ZH: "zh",
+};
+
+const ListOfSights = observer(() => {
+ const [sightData, setSightData] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ const store = useGeolocationStore();
+ const colorStore = useColorStore();
+ const { currentColor, startColorAnimation } = colorStore;
+ const { routeSights, routeSightsEn, routeSightsZh } = apiStore;
+ const {
+ nearestSightId,
+ selectedSightId,
+ setSelectedSightId,
+ selectedLanguage,
+ selectedLanguageRight,
+ setSelectedLanguageRight,
+ nearestStationId,
+ isInteractingWith3D,
+ isManualSelection,
+ setIsManualSelection,
+ isRightWidgetSelectorOpen,
+ setIsRightWidgetSelectorOpen,
+ isLeftWidgetOpen,
+ isTransferWidgetOpen,
+ setIsTransferWidgetOpen,
+ } = store;
+ const { context: contextData, routeStations } = apiStore;
+
+ const [isLangMenuOpen, setIsLangMenuOpen] = useState(false);
+ const [selectedLetter, setSelectedLetter] = useState(null);
+ const [TransferWidgetData, setTransferWidgetData] = useState(null);
+ const [isTransferButtonVisible, setIsTransferButtonVisible] = useState(false);
+ const [showTransferButton, setShowTransferButton] = useState(false);
+ const [highlightedSights, setHighlightedSights] = useState(new Set());
+ const [isAlphabetDisabled, setIsAlphabetDisabled] = useState(false);
+
+ const sightRefs = useRef({});
+ const sightsListRef = useRef(null);
+ const alphabetRef = useRef(null);
+ const isInitialSelectionDone = useRef(false);
+
+ const handleIconClick = () => {
+ setIsRightWidgetSelectorOpen(!isRightWidgetSelectorOpen);
+ };
+
+ const handleSightClick = useCallback(
+ (id) => {
+ setSelectedSightId(String(id));
+ setIsManualSelection(true);
+ setIsRightWidgetSelectorOpen(false);
+ // Закрываем виджет губернатора при выборе достопримечательности
+ store.closeGovernorModal();
+ },
+ [setSelectedSightId, setIsRightWidgetSelectorOpen, store],
+ );
+
+ const handleLetterClick = (letter) => {
+ // Если алфавит заблокирован, игнорируем клик
+ if (isAlphabetDisabled) return;
+
+ setSelectedLetter((prevLetter) => {
+ const newLetter = prevLetter === letter ? null : letter;
+
+ if (newLetter && sightData) {
+ // Блокируем алфавит на время анимации
+ setIsAlphabetDisabled(true);
+
+ // Находим все достопримечательности, начинающиеся с выбранной буквы
+ const sightsForLetter = sightData.filter((sight) => {
+ const name = sight.name;
+ if (!name) return false;
+
+ let sightFirstChar = name.trim().charAt(0);
+
+ // Для китайского языка используем пиньинь или иероглиф
+ if (selectedLanguageRight === "zh") {
+ if (sight.name_pinyin) {
+ sightFirstChar = sight.name_pinyin.trim().toUpperCase().charAt(0);
+ } else {
+ // Если пиньинь нет, используем первый иероглиф
+ sightFirstChar = name.trim().charAt(0);
+ }
+ } else {
+ sightFirstChar = sightFirstChar.toUpperCase();
+ }
+
+ return sightFirstChar === newLetter;
+ });
+
+ const sightIds = new Set(sightsForLetter.map((sight) => sight.id));
+
+ // Скроллим к первой достопримечательности
+ const firstSightForLetter = sightsForLetter[0];
+ if (firstSightForLetter && sightRefs.current[firstSightForLetter.id]) {
+ const targetElement = sightRefs.current[firstSightForLetter.id];
+
+ if (targetElement) {
+ // Используем setTimeout для гарантии, что OverlayScrollbars инициализирован
+ setTimeout(() => {
+ try {
+ // Используем scrollIntoView, чтобы scroll-margin-top из CSS работал правильно
+ targetElement.scrollIntoView({
+ behavior: "smooth",
+ block: "start",
+ });
+
+ // Fallback mechanism if scrollIntoView fails or is intercepted
+ setTimeout(() => {
+ if (sightsListRef.current) {
+ const container = sightsListRef.current;
+ const rect = targetElement.getBoundingClientRect();
+ const containerRect = container.getBoundingClientRect();
+
+ // Check if element is visible in container
+ const isVisible =
+ rect.top >= containerRect.top &&
+ rect.bottom <= containerRect.bottom;
+
+ if (!isVisible && container.scrollTo) {
+ // Calculate relative position
+ const relativeTop = targetElement.offsetTop;
+ container.scrollTo({
+ top: relativeTop - 15,
+ behavior: "smooth",
+ });
+ }
+ }
+ }, 100);
+ } catch (error) {
+ console.error("Ошибка при скролле к элементу:", error);
+ }
+ }, 100);
+
+ // Запускаем анимацию после завершения скролла (примерно 500-600ms для smooth scroll)
+ setTimeout(() => {
+ setHighlightedSights(sightIds);
+
+ // Через 1.5 секунды убираем подсветку и разблокируем алфавит
+ setTimeout(() => {
+ setHighlightedSights(new Set());
+ setIsAlphabetDisabled(false);
+ }, 1500);
+ }, 600);
+ }
+ } else {
+ setIsAlphabetDisabled(false);
+ }
+ } else {
+ // Если буква отменена, убираем подсветку
+ setHighlightedSights(new Set());
+ }
+ return newLetter;
+ });
+ };
+
+ const handleLanguageChange = (val) => {
+ setIsLangMenuOpen(false);
+ setSelectedLanguageRight(val);
+ };
+
+ const handleTransferToggle = () => {
+ setIsTransferWidgetOpen(!isTransferWidgetOpen);
+ };
+
+ const handleBackToNearest = useCallback(() => {
+ setIsManualSelection(false);
+ const sightData =
+ selectedLanguageRight === "ru"
+ ? routeSights
+ : selectedLanguageRight === "en"
+ ? routeSightsEn
+ : routeSightsZh;
+
+ if (sightData && sightData.length > 0) {
+ const nearestSightInList = sightData.find((s) => s.id == nearestSightId);
+ if (nearestSightInList) {
+ setSelectedSightId(String(nearestSightInList.id));
+ } else {
+ setSelectedSightId(String(sightData[0].id));
+ }
+ } else {
+ setSelectedSightId(null);
+ }
+ setIsRightWidgetSelectorOpen(false);
+ // Закрываем виджет губернатора при возврате к ближайшей достопримечательности
+ store.closeGovernorModal();
+ }, [
+ setSelectedSightId,
+ routeSights,
+ routeSightsEn,
+ routeSightsZh,
+ nearestSightId,
+ selectedLanguageRight,
+ setIsRightWidgetSelectorOpen,
+ store,
+ ]);
+
+ // Запуск анимации цвета при монтировании компонента
+ useEffect(() => {
+ startColorAnimation();
+ }, [startColorAnimation]);
+
+ // Загрузка достопримечательностей
+ useEffect(() => {
+ setError(null);
+ setIsLoading(true);
+
+ const fetchSights = async () => {
+ try {
+ const sights =
+ selectedLanguageRight === "ru"
+ ? routeSights
+ : selectedLanguageRight === "en"
+ ? routeSightsEn
+ : routeSightsZh;
+
+ const processedSights = sights.map((sight) => ({
+ ...sight,
+ preview_media_type: getMediaType(sight.preview_media_type_raw),
+ thumbnail_type: getMediaType(sight.thumbnail_type_raw),
+ }));
+
+ const sortedSights = [...processedSights].sort((a, b) => {
+ if (a.name && b.name) {
+ return a.name.localeCompare(b.name, selectedLanguageRight, {
+ sensitivity: "base",
+ });
+ }
+ return 0;
+ });
+
+ setSightData(sortedSights);
+ } catch (err) {
+ console.error("Ошибка загрузки достопримечательностей:", err);
+ setError(
+ "Не удалось загрузить достопримечательности. Пожалуйста, попробуйте позже.",
+ );
+ setSightData([]);
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ fetchSights();
+ }, [contextData?.routeId, selectedLanguageRight]);
+
+ // Анимация кнопки пересадок при открытии/закрытии левого меню
+ useEffect(() => {
+ if (isLeftWidgetOpen) {
+ // При открытии левого меню - сначала показываем кнопку пересадок
+ setIsTransferButtonVisible(true);
+ } else {
+ // При закрытии левого меню - сначала скрываем кнопку пересадок
+ setIsTransferButtonVisible(false);
+ }
+ }, [isLeftWidgetOpen]);
+
+ // Логика выбора достопримечательности
+ useEffect(() => {
+ if (!isLoading && sightData && sightData.length > 0) {
+ if (!isInitialSelectionDone.current && !isManualSelection) {
+ const nearestSightInList = sightData.find(
+ (s) => s.id == nearestSightId,
+ );
+ if (nearestSightInList) {
+ setSelectedSightId(String(nearestSightInList.id));
+ } else {
+ setSelectedSightId(String(sightData[0].id));
+ }
+ isInitialSelectionDone.current = true;
+ } else if (!isInitialSelectionDone.current && isManualSelection) {
+ const nearestSightInList = sightData.find(
+ (s) => s.id == nearestSightId,
+ );
+ if (
+ isManualSelection &&
+ nearestSightInList &&
+ nearestSightInList.id === selectedSightId
+ ) {
+ // Все ОК, продолжаем использовать выбранную вручную, если она совпадает с ближайшей
+ } else if (isManualSelection && selectedSightId) {
+ // Ничего не делаем здесь, выбранная вручную достопримечательность уже установлена.
+ } else {
+ if (nearestSightInList) {
+ setSelectedSightId(String(nearestSightInList.id));
+ } else {
+ setSelectedSightId(String(sightData[0].id));
+ }
+ }
+ isInitialSelectionDone.current = true;
+ setIsManualSelection(false);
+ }
+
+ if (
+ nearestSightId &&
+ selectedSightId !== nearestSightId &&
+ !isManualSelection &&
+ !isInteractingWith3D
+ ) {
+ const newNearestSight = sightData.find((s) => s.id == nearestSightId);
+ if (newNearestSight) {
+ setSelectedSightId(String(newNearestSight.id));
+ }
+ }
+ } else if (
+ !isLoading &&
+ (!sightData || sightData.length === 0) &&
+ isInitialSelectionDone.current
+ ) {
+ setSelectedSightId(null);
+ isInitialSelectionDone.current = false;
+ setIsManualSelection(false);
+ }
+ }, [
+ isLoading,
+ sightData,
+ nearestSightId,
+ setSelectedSightId,
+ selectedSightId,
+ isManualSelection,
+ isInteractingWith3D,
+ ]);
+
+ // Загрузка данных о пересадках для ближайшей станции
+ useEffect(() => {
+ if (!isLoading && nearestStationId != null) {
+ const fetchTransferWidgetData = async () => {
+ try {
+ const station = routeStations.find((s) => s.id == nearestStationId);
+ const response = station.transfers;
+
+ setTransferWidgetData(response);
+ } catch (err) {
+ console.error("Ошибка в получении пересадок:", err);
+ setTransferWidgetData(null);
+ }
+ };
+ fetchTransferWidgetData();
+ } else if (!isLoading && (!contextData?.routeId || !nearestStationId)) {
+ setTransferWidgetData(null);
+ }
+ }, [isLoading, contextData?.routeId, nearestStationId, routeStations]);
+
+ const currentSelectedSight = sightData
+ ? sightData.find((sight) => sight.id == selectedSightId)
+ : null;
+
+ const sightFrameMedia = useMemo(() => {
+ if (!currentSelectedSight) return null;
+
+ // Если preview_media это строка (URL), используем её как path
+ if (typeof currentSelectedSight.preview_media === "string") {
+ return {
+ id: currentSelectedSight.preview_media,
+ path: currentSelectedSight.preview_media,
+ media_type: currentSelectedSight.preview_media_type || null,
+ type: currentSelectedSight.preview_media_type || null,
+ };
+ }
+
+ if (
+ typeof currentSelectedSight.preview_media === "object" &&
+ currentSelectedSight.preview_media
+ ) {
+ return {
+ id:
+ currentSelectedSight.preview_media.id ||
+ currentSelectedSight.preview_media,
+ path:
+ currentSelectedSight.preview_media.path ||
+ currentSelectedSight.preview_media.url,
+ media_type:
+ currentSelectedSight.preview_media.type ||
+ currentSelectedSight.preview_media.media_type,
+ type:
+ currentSelectedSight.preview_media.type ||
+ currentSelectedSight.preview_media.media_type,
+ };
+ }
+
+ return {
+ id: currentSelectedSight.preview_media,
+ };
+ }, [currentSelectedSight]);
+
+ return (
+
+
+
+ {
+ setFullscreenResetKey((prev) => prev + 1);
+ }}
+ >
+
+
+
+
+
+
+
+
+
+ {currentSelectedSight && (
+
+ );
+});
+
+export default ListOfSights;
diff --git a/src/client/src/components/ListOfSights/AlphabetNavigator.jsx b/src/client/src/components/ListOfSights/AlphabetNavigator.jsx
new file mode 100644
index 0000000..cdd79d7
--- /dev/null
+++ b/src/client/src/components/ListOfSights/AlphabetNavigator.jsx
@@ -0,0 +1,100 @@
+import React, { useMemo, forwardRef } from "react";
+
+const AlphabetNavigator = forwardRef(function AlphabetNavigator(
+ { selectedLetter, onLetterClick, sightData, selectedLanguage, isDisabled },
+ ref
+) {
+ // Генерируем алфавит на основе доступных достопримечательностей
+ const availableLetters = useMemo(() => {
+ if (!sightData || sightData.length === 0) {
+ return [];
+ }
+
+ // Получаем уникальные первые символы из названий достопримечательностей
+ const letters = new Set();
+
+ sightData.forEach((sight) => {
+ const name = sight.short_name || sight.name;
+ if (name && name.trim()) {
+ let firstChar = name.trim().charAt(0);
+
+ // Для китайского языка используем пиньинь (если доступен) или иероглиф
+ if (selectedLanguage === "zh") {
+ if (sight.name_pinyin) {
+ firstChar = sight.name_pinyin.trim().toUpperCase().charAt(0);
+ } else {
+ // Если пиньинь нет, используем первый иероглиф
+ firstChar = name.trim().charAt(0);
+ }
+ } else {
+ firstChar = firstChar.toUpperCase();
+ }
+
+ // Проверяем, что символ подходит для алфавита
+ if (
+ firstChar &&
+ (/[A-ZА-ЯЁ]/.test(firstChar) ||
+ (selectedLanguage === "zh" && /[\u4e00-\u9fff]/.test(firstChar)))
+ ) {
+ letters.add(firstChar);
+ }
+ }
+ });
+
+ // Сортируем символы в зависимости от языка
+ const sortedLetters = Array.from(letters).sort((a, b) => {
+ if (selectedLanguage === "zh") {
+ // Для китайского языка сортируем по пиньинь или по Unicode
+ if (/[A-Z]/.test(a) && /[A-Z]/.test(b)) {
+ // Если оба символа - латинские буквы (пиньинь)
+ return a.localeCompare(b, "en", { sensitivity: "base" });
+ } else if (/[\u4e00-\u9fff]/.test(a) && /[\u4e00-\u9fff]/.test(b)) {
+ // Если оба символа - иероглифы, сортируем по Unicode
+ return a.localeCompare(b, "zh", { sensitivity: "base" });
+ } else {
+ // Смешанные символы: сначала латинские, потом иероглифы
+ return /[A-Z]/.test(a) ? -1 : 1;
+ }
+ }
+ return a.localeCompare(b, selectedLanguage, { sensitivity: "base" });
+ });
+
+ return sortedLetters;
+ }, [sightData, selectedLanguage]);
+
+ // Если нет доступных букв, не показываем компонент
+ if (availableLetters.length === 0) {
+ return null;
+ }
+
+ return (
+
+ setIsLangMenuOpen(true)}
+ onBackToNearest={handleBackToNearest}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {availableLetters.map((letter) => (
+ !isDisabled && onLetterClick(letter)}
+ role="button"
+ tabIndex="0"
+ data-lang={selectedLanguage === "zh" ? "zh" : undefined}
+ aria-label={
+ selectedLanguage === "en"
+ ? `Scroll to sights starting with letter ${letter}`
+ : selectedLanguage === "zh"
+ ? `滚动到以字母 ${letter} 开头的景点`
+ : `Прокрутить к достопримечательностям на букву ${letter}`
+ }
+ >
+ {letter}
+
+ ))}
+
+ );
+});
+
+export default AlphabetNavigator;
diff --git a/src/client/src/components/ListOfSights/LanguageSelector.jsx b/src/client/src/components/ListOfSights/LanguageSelector.jsx
new file mode 100644
index 0000000..d2d6a46
--- /dev/null
+++ b/src/client/src/components/ListOfSights/LanguageSelector.jsx
@@ -0,0 +1,172 @@
+import React from "react";
+import { useGeolocationStore } from "../../stores";
+import { observer } from "mobx-react-lite";
+const LANGUAGES = {
+ EN: "en",
+ RU: "ru",
+ ZH: "zh",
+};
+
+const LANGUAGE_NAMES = {
+ [LANGUAGES.EN]: "en",
+ [LANGUAGES.RU]: "ru",
+ [LANGUAGES.ZH]: "zh",
+};
+
+const LanguageSelector = observer(function LanguageSelector({
+ selectedLanguageRight,
+ onLanguageChange,
+ isOpen,
+ onToggle,
+ onBackToNearest,
+}) {
+ const store = useGeolocationStore();
+ const { isManualSelection, selectedSightId, nearestSightId } = store;
+
+ const SelectLangHandler = (val) => {
+ onLanguageChange(val);
+ };
+
+ const handleBackClick = () => {
+ if (onBackToNearest) {
+ onBackToNearest();
+ }
+ };
+
+ if (isOpen) {
+ return (
+
+
+ );
+ }
+
+ return (
+ SelectLangHandler(LANGUAGES.EN)}
+ >
+
+
+ SelectLangHandler(LANGUAGES.RU)}
+ >
+
+
+ SelectLangHandler(LANGUAGES.ZH)}
+ >
+
+
+
+
+ );
+});
+
+export default LanguageSelector;
diff --git a/src/client/src/components/ListOfSights/ListHeader.jsx b/src/client/src/components/ListOfSights/ListHeader.jsx
new file mode 100644
index 0000000..d026881
--- /dev/null
+++ b/src/client/src/components/ListOfSights/ListHeader.jsx
@@ -0,0 +1,106 @@
+import React, { useState, useEffect, useRef } from "react";
+
+const LANGUAGES = {
+ EN: "en",
+ RU: "ru",
+ ZH: "zh",
+};
+
+const ListHeader = function ListHeader({
+ isLangOpen,
+ isOpen,
+ onIconClick,
+ selectedLanguageRight,
+ isManualSelection,
+ selectedSightId,
+ nearestSightId,
+ onTransferToggle,
+ isTransferWidgetOpen,
+ onBackToNearest,
+}) {
+ const [isIdle, setIsIdle] = useState(false);
+ const timerRef = useRef(null);
+
+ useEffect(() => {
+ const resetTimer = () => {
+ setIsIdle(false);
+ clearTimeout(timerRef.current);
+ timerRef.current = setTimeout(() => setIsIdle(true), 15000);
+ };
+
+ const events = ["pointermove", "pointerdown", "touchstart", "keydown"];
+ events.forEach((e) => window.addEventListener(e, resetTimer));
+ resetTimer();
+
+ return () => {
+ clearTimeout(timerRef.current);
+ events.forEach((e) => window.removeEventListener(e, resetTimer));
+ };
+ }, []);
+
+ const getTitle = () => {
+ return selectedLanguageRight === LANGUAGES.RU
+ ? "Достопримечательности"
+ : selectedLanguageRight === LANGUAGES.ZH
+ ? "景点"
+ : "Attractions";
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default ListHeader;
diff --git a/src/client/src/components/ListOfSights/SightComponent.jsx b/src/client/src/components/ListOfSights/SightComponent.jsx
new file mode 100644
index 0000000..18902d5
--- /dev/null
+++ b/src/client/src/components/ListOfSights/SightComponent.jsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { getMediaUrl } from "../../api/apiConfig";
+import { useClickDetection } from "../../hooks/useClickDetection";
+
+const SightComponent = function SightComponent({
+ media,
+ title,
+ onPointerUp,
+ sightId,
+ componentRef,
+ isHighlighted,
+}) {
+ // Используем общий хук для различения клика и скролла
+ const { handlePointerDown, handlePointerUp, handleScroll } =
+ useClickDetection();
+
+ const renderThumbnail = () => {
+ if (!media || !media.id) {
+ return
+
+
+
+
+ {getTitle()}
+
+ No Media
;
+ }
+
+ const mediaUrl = getMediaUrl(media.id);
+
+ return handlePointerDown(e, sightId)}
+ onPointerUp={(e) => handlePointerUp(e, sightId, onPointerUp)}
+ onScroll={handleScroll}
+ ref={componentRef}
+ role="button"
+ tabIndex="0"
+ aria-label={`Выбрать достопримечательность ${title}`}
+ >
+
+ );
+};
+
+export default SightComponent;
diff --git a/src/client/src/components/ListOfSights/SightFrame.jsx b/src/client/src/components/ListOfSights/SightFrame.jsx
new file mode 100644
index 0000000..4d20d42
--- /dev/null
+++ b/src/client/src/components/ListOfSights/SightFrame.jsx
@@ -0,0 +1,802 @@
+import React, { useState, useEffect, useRef, useMemo, useLayoutEffect, useCallback } from "react";
+import axios from "axios";
+import { observer } from "mobx-react-lite";
+import { useGeolocationStore } from "../../stores";
+import ContentAPI from "../../api/content/content.api";
+import { getMediaType } from "../../utils/getMediaType";
+import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";
+import { ThreeView } from "../widgets/ThreeView";
+import {
+ MinusIcon,
+ PlusIcon,
+ SizeIcon,
+ SizeOpenIcon,
+} from "../widgets/ThreeViewIcons";
+import { ThreeViewErrorBoundary } from "../ThreeViewErrorBoundary";
+import { apiStore } from "../../api/ApiStore/store";
+import { ReactMarkdownComponent } from "../ReactMarkdown";
+import { TouchableLayout } from "../TouchableLayout";
+import rotate3DIcon from "../../assets/icons/three-view-rotate.svg";
+import zoom3DIcon from "../../assets/icons/three-view-zoom.svg";
+import pan3DIcon from "../../assets/icons/three-view-pan.svg";
+import subtractHomeIcon from "../../assets/icons/subtract-home.svg";
+
+const Watermark = ({ path }) => {
+ if (!path) return null;
+ return {renderThumbnail()}
+
+ {title}
+
+
+ {isLoadingContent ? "Загрузка медиа..." : "Нет медиа для отображения"}
+
+ );
+ }
+
+ const section = articleSections[selectedSection];
+ if (!section) return null;
+
+ const sectionId = section.id?.toString();
+ const currentMediaData = mediaData[sectionId];
+ if (!currentMediaData) return null;
+
+ const className = "sight-frame-media-item visible";
+
+ try {
+ switch (currentMediaData.type) {
+ case "image":
+ return (
+
+
+ );
+ case "3d":
+ return (
+
+ {
+ setThreeViewResetKey((prev) => prev + 1);
+ }}
+ >
+
+
+ );
+ default:
+ return (
+
+
+
+
+
+
+ {isFullscreen3D && (
+
+
+ )}
+
+ {[
+ {
+ label: "Вращать",
+ icon: (
+ 
+ ),
+ },
+ {
+ label: "Приблизить / Отдалить",
+ icon: (
+ 
+ ),
+ },
+ {
+ label: "Переместить",
+ icon: (
+ 
+ ),
+ },
+ ].map((item, index, arr) => (
+
+
+
+ {item.icon}
+
+
+ {item.label}
+
+
+ ))}
+
+
+ );
+ }
+ } catch (error) {
+ console.error(`Error rendering media ${sectionId}:`, error);
+ return (
+
+ Неподдерживаемый тип медиа: {currentMediaData.type}
+
+
+
+ );
+ }
+ };
+
+ const isCurrentMedia3D =
+ currentSection && mediaData[currentSection.id]?.type === "3d";
+
+ const getMediaStackStyle = () => {
+ if (isCurrentMedia3D && isFullscreen3D) {
+ const fullHeight = window.innerHeight * 0.8;
+
+ const width = modelAspectRatio
+ ? fullHeight * modelAspectRatio
+ : fullHeight * 1.3;
+
+ const finalWidth = Math.max(width, 550);
+ const containerWidth = 550;
+ const extraWidth = Math.max(0, finalWidth - containerWidth);
+
+ return {
+ height: `${fullHeight}px`,
+ width: `${finalWidth}px`,
+ maxWidth: "100vw",
+ overflow: "visible",
+ marginLeft: `-${extraWidth}px`,
+ marginTop: `-2px`,
+ };
+ }
+ if (isCurrentMedia3D) {
+ if (modelAspectRatio) {
+ const width = 400;
+ const height = Math.min(
+ width / modelAspectRatio,
+ window.innerHeight * 0.7,
+ );
+ return { height: `${height}px` };
+ }
+ return { height: "500px" };
+ }
+ return {};
+ };
+
+ const processedSightName = useMemo(() => {
+ if (!sight_name) return sight_name;
+
+ if (sight_name.includes("\n")) {
+ return sight_name.split("\n").map((line, i) => (
+
+ Ошибка отображения медиа
+
+ } + {line} +
+ {part} +
+ {sightData?.watermark_lu && !isFullscreen3D && (
+
+
+ {contentError ? (
+
+
+ {contentError}
+
+ ) : isLoadingContent || !articleSections ? (
+
+ Загрузка контента...
+
+ ) : (
+ renderCurrentMedia()
+ )}
+
+ {contentError ? (
+
+
+
+ )}
+
+ {contentError}
+ ) : ( + <> + {!isFullscreen3D && ( +
+
+ )}
+ + {selectedSection === 0 + ? processedSightName || sightData?.name + : sightData?.short_name || sightData?.name} +
+
+ {isLoadingContent || !currentSection ? (
+
+ ) : (
+ selectedSection !== 0 && (
+
+
+
+
+
+
+ {contentError ? (
+
+ {contentError}
+ ) : ( + articleSections && + articleSections.length > 1 && + articleSections.slice(1).map((section, index) => ( + requestSection(index + 1)}
+ key={section.id || section.heading || index}
+ data-label={section.heading}
+ className={`sight-frame-menu-point ${
+ index + 1 === selectedSection ? "active" : ""
+ }`}
+ role="button"
+ tabIndex="0"
+ >
+ {section.heading}
+
+ ))
+ )}
+ requestSection(0)}
+ >
+ 
+
+
+ );
+});
+
+export default SightFrame;
diff --git a/src/client/src/components/ListOfSights/SightsList.jsx b/src/client/src/components/ListOfSights/SightsList.jsx
new file mode 100644
index 0000000..3c31462
--- /dev/null
+++ b/src/client/src/components/ListOfSights/SightsList.jsx
@@ -0,0 +1,50 @@
+import React from "react";
+import SightComponent from "./SightComponent";
+import { TouchableLayout } from "../TouchableLayout";
+
+const SightsList = function SightsList({
+ isOpen,
+ isLoading,
+ error,
+ sightData,
+ onSightClick,
+ sightRefs,
+ sightsListRef,
+ highlightedSights,
+}) {
+ return (
+
+ {isLoading ? (
+ (sightRefs.current[sight.id] = el)}
+ isHighlighted={
+ highlightedSights && highlightedSights.has(sight.id)
+ }
+ />
+ ))
+ )}
+
+ Загрузка достопримечательностей...
+ ) : error ? ( +{error}
+ ) : !sightData || sightData.length === 0 ? ( +Достопримечательности не найдены.
+ ) : ( + sightData.map((sight) => ( +Пересадка на остановке
+ «{stationName}»:
+
+ ) : (
+ "Ближайшая остановка не обнаружена"
+ );
+ }
+
+ if (selectedLanguageRight === "en") {
+ return stationName ? (
+ <>
+ Transfer at stop
+ «{stationName}»:
+
+ ) : (
+ "Nearest station not found"
+ );
+ }
+
+ return stationName ? (
+ <>
+ 在站点换乘
+ «{stationName}»:
+
+ ) : (
+ "最近的站点未找到"
+ );
+ };
+
+ const getNoTransfersMessage = () => {
+ return selectedLanguageRight === "ru"
+ ? "Нет доступных пересадок"
+ : selectedLanguageRight === "en"
+ ? "No transfers available"
+ : "没有可用的中转";
+ };
+
+ return (
+
+
+ );
+});
+
+export default TransferWidget;
diff --git a/src/client/src/components/ListOfSights/index.js b/src/client/src/components/ListOfSights/index.js
new file mode 100644
index 0000000..76a97bc
--- /dev/null
+++ b/src/client/src/components/ListOfSights/index.js
@@ -0,0 +1,7 @@
+export { default as SightFrame } from "./SightFrame";
+export { default as SightComponent } from "./SightComponent";
+export { default as LanguageSelector } from "./LanguageSelector";
+export { default as TransferWidget } from "./TransferWidget";
+export { default as AlphabetNavigator } from "./AlphabetNavigator";
+export { default as SightsList } from "./SightsList";
+export { default as ListHeader } from "./ListHeader";
diff --git a/src/client/src/components/Loader.jsx b/src/client/src/components/Loader.jsx
new file mode 100644
index 0000000..765df0b
--- /dev/null
+++ b/src/client/src/components/Loader.jsx
@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from "react";
+import { createPortal } from "react-dom";
+import "../styles/Loader.css";
+import { getMediaUrl } from "../api/apiConfig";
+
+const loaderVideoPath = new URL("../assets/video/taganai.mp4", import.meta.url)
+ .href;
+
+const Loader = ({
+ loadingStatus = null,
+ loadingProgress = null,
+ onToggleDebug,
+ videoId = null,
+}) => {
+ const [showLoadingInfo, setShowLoadingInfo] = useState(false);
+ const [isCustomVideoError, setIsCustomVideoError] = useState(false);
+
+ useEffect(() => {
+ setIsCustomVideoError(false);
+ }, [videoId]);
+
+ useEffect(() => {
+ const handleKeyDown = (event) => {
+ if (event.key === "F3") {
+ event.preventDefault();
+ setShowLoadingInfo((prev) => !prev);
+ }
+ if (event.key === "F4") {
+ event.preventDefault();
+ onToggleDebug?.();
+ }
+ };
+
+ window.addEventListener("keydown", handleKeyDown);
+
+ return () => {
+ window.removeEventListener("keydown", handleKeyDown);
+ };
+ }, [onToggleDebug]);
+
+ const getStatusText = () => {
+ if (!loadingStatus) return "Данные не загружены";
+
+ if (loadingProgress) {
+ const percentage = Math.round(
+ (loadingProgress.current / loadingProgress.total) * 100,
+ );
+ return `${loadingStatus} [${loadingProgress.current}/${loadingProgress.total}] ${percentage}%`;
+ }
+
+ return loadingStatus;
+ };
+
+ return createPortal(
+
+ {getTransferLabel()}
+ {currentTransferData != null &&
+ !Object.values(currentTransferData).every((value) => value === "") ? (
+ <>
+
+
+ {currentTransferData?.metro_red?.length > 0 ? (
+
+
+ 
+ {currentTransferData.metro_red}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.metro_green?.length > 0 ? (
+
+
+ 
+ {currentTransferData.metro_green}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.metro_blue?.length > 0 ? (
+
+
+ 
+ {currentTransferData.metro_blue}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.metro_orange?.length > 0 ? (
+
+
+ 
+ {currentTransferData.metro_orange}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.metro_purple?.length > 0 ? (
+
+
+ 
+ {currentTransferData.metro_purple}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.tram?.length > 0 ? (
+
+
+ 
+ {currentTransferData.tram}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.trolleybus?.length > 0 ? (
+
+
+ 
+ {currentTransferData.trolleybus}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.bus?.length > 0 ? (
+
+
+ 
+ {currentTransferData.bus}
+
+ ) : (
+ ""
+ )}
+
+ {currentTransferData?.train?.length > 0 ? (
+
+
+ ) : (
+
+ 
+ {currentTransferData.train}
+
+ ) : (
+ ""
+ )}
+ {getNoTransfersMessage()}
+ )}
+
+ {showLoadingInfo &&
,
+ document.body,
+ );
+};
+
+export default Loader;
diff --git a/src/client/src/components/OverlayScrollbarsWrapper.d.ts b/src/client/src/components/OverlayScrollbarsWrapper.d.ts
new file mode 100644
index 0000000..26e322e
--- /dev/null
+++ b/src/client/src/components/OverlayScrollbarsWrapper.d.ts
@@ -0,0 +1,13 @@
+import React from "react";
+
+export declare const OverlayScrollbarsWrapper: React.ForwardRefExoticComponent<
+ React.PropsWithChildren<{
+ className?: string;
+ onScroll?: (event: Event) => void;
+ overflowX?: string;
+ overflowY?: string;
+ scrollbarVisibility?: string;
+ [key: string]: any;
+ }> &
+ React.RefAttributes{getStatusText()}
}
+
+ {value}
+
+ );
+};
diff --git a/src/client/src/components/SimulationSettings.tsx b/src/client/src/components/SimulationSettings.tsx
new file mode 100644
index 0000000..c99fc06
--- /dev/null
+++ b/src/client/src/components/SimulationSettings.tsx
@@ -0,0 +1,135 @@
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { apiStore } from "../api/ApiStore/store";
+
+export const SimulationSettings = observer(() => {
+ const [open, setOpen] = useState(false);
+
+ return (
+
+
+
+ {open && (
+
+ );
+});
+
+function Row({ children }: { children: React.ReactNode }) {
+ return (
+
+ {/* Пауза */}
+
+ Пауза
+
+
+ {/* Направление */}
+
+ Направление
+
+
+
+ {/* Скорость */}
+
+ Скорость
+
+
+ {/* Без анимации */}
+
+ Без анимации
+
+
+ {/* Хитбоксы */}
+
+ Хитбоксы
+
+
+ )}
+
+
+
+ {apiStore.simulationSpeed}x
+
+
+
+
+ {children}
+
+ );
+}
+
+function Toggle({ on, onClick }: { on: boolean; onClick: () => void }) {
+ return (
+
+ );
+}
+
+const btnStyle: React.CSSProperties = {
+ width: 28, height: 24, borderRadius: 4,
+ border: "1px solid rgba(255,255,255,0.2)",
+ background: "rgba(255,255,255,0.08)",
+ color: "white", cursor: "pointer", fontSize: 14,
+ display: "flex", alignItems: "center", justifyContent: "center",
+};
diff --git a/src/client/src/components/StoreDebugInfo.jsx b/src/client/src/components/StoreDebugInfo.jsx
new file mode 100644
index 0000000..9a67726
--- /dev/null
+++ b/src/client/src/components/StoreDebugInfo.jsx
@@ -0,0 +1,118 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { observer } from "mobx-react-lite";
+import { apiStore } from "../api/ApiStore/store";
+import { geolocationStore } from "../stores/GeolocationStore";
+import { apiBaseURL, geoBaseURL, weatherBaseURL } from "../api/apiConfig";
+
+const StoreDebugInfo = observer(({ isVisible }) => {
+ if (!isVisible) return null;
+
+ const serializeMap = (map) => {
+ if (!map || !(map instanceof Map)) return map;
+ const obj = {};
+ map.forEach((value, key) => {
+ obj[key] = value;
+ });
+ return obj;
+ };
+
+ const serializeSet = (set) => {
+ if (!set || !(set.forEach)) return set;
+ const arr = [];
+ set.forEach((value) => arr.push(value));
+ return arr;
+ };
+
+ const debugData = {
+ apiStore: {
+ isLoading: apiStore.isLoading,
+ loadingStatus: apiStore.loadingStatus,
+ loadingProgress: apiStore.loadingProgress,
+ context: apiStore.context,
+ weather: apiStore.weather,
+ route: apiStore.route,
+ carrier: apiStore.carrier,
+ city: apiStore.city,
+ routeId: apiStore.routeId,
+ routeSights: { count: apiStore.routeSights?.length ?? 0, items: apiStore.routeSights ?? [] },
+ routeSightsEn: { count: apiStore.routeSightsEn?.length ?? 0 },
+ routeSightsZh: { count: apiStore.routeSightsZh?.length ?? 0 },
+ routeStations: { count: apiStore.routeStations?.length ?? 0, items: apiStore.routeStations ?? [] },
+ routeStationsEn: { count: apiStore.routeStationsEn?.length ?? 0 },
+ routeStationsZh: { count: apiStore.routeStationsZh?.length ?? 0 },
+ orderedRouteStations: { count: apiStore.orderedRouteStations?.length ?? 0 },
+ sightArticlesIds: serializeMap(apiStore.sightArticlesIds),
+ sightArticles: serializeMap(apiStore.sightArticles),
+ media: { count: apiStore.media?.length ?? 0, items: apiStore.media ?? [] },
+ },
+ geolocationStore: {
+ contextData: geolocationStore.contextData,
+ nearestSightId: geolocationStore.nearestSightId,
+ selectedSightId: geolocationStore.selectedSightId,
+ selectedLanguage: geolocationStore.selectedLanguage,
+ selectedLanguageRight: geolocationStore.selectedLanguageRight,
+ nearestStationId: geolocationStore.nearestStationId,
+ currentStationId: geolocationStore.currentStationId,
+ isLeftWidgetOpen: geolocationStore.isLeftWidgetOpen,
+ isTransferWidgetOpen: geolocationStore.isTransferWidgetOpen,
+ isGovernorWidgetOpen: geolocationStore.isGovernorWidgetOpen,
+ isManualSelection: geolocationStore.isManualSelection,
+ isRightWidgetSelectorOpen: geolocationStore.isRightWidgetSelectorOpen,
+ activeClusterId: geolocationStore.activeClusterId,
+ isLoading: geolocationStore.isLoading,
+ error: geolocationStore.error,
+ },
+ };
+
+ return createPortal(
+
+
,
+ document.body
+ );
+});
+
+export default StoreDebugInfo;
diff --git a/src/client/src/components/ThreeViewErrorBoundary.css b/src/client/src/components/ThreeViewErrorBoundary.css
new file mode 100644
index 0000000..9605852
--- /dev/null
+++ b/src/client/src/components/ThreeViewErrorBoundary.css
@@ -0,0 +1,147 @@
+.three-view-error-boundary {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 20px;
+ background-color: rgba(0, 0, 0, 0.05);
+ min-height: 300px;
+}
+
+.error-container {
+ max-width: 500px;
+ width: 100%;
+ padding: 24px;
+ background: linear-gradient(
+ 114deg,
+ rgba(255, 255, 255, 0.1) 8.71%,
+ rgba(255, 255, 255, 0.05) 69.69%
+ ), var(--carrier-main, #006F3A);
+ border-radius: 12px;
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+ color: white;
+ position: relative;
+}
+
+.error-header {
+ display: flex;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.error-icon {
+ font-size: 32px;
+ margin-right: 12px;
+}
+
+.error-title {
+ margin: 0;
+ font-size: 20px;
+ font-weight: 600;
+ color: white;
+}
+
+.error-message {
+ margin-bottom: 16px;
+ font-size: 16px;
+ line-height: 1.5;
+ color: rgba(255, 255, 255, 0.9);
+}
+
+.error-reasons {
+ margin-bottom: 16px;
+}
+
+.error-reasons p {
+ margin: 0 0 8px 0;
+ font-size: 14px;
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.8);
+}
+
+.error-reasons ul {
+ margin: 8px 0;
+ padding-left: 20px;
+ color: rgba(255, 255, 255, 0.7);
+}
+
+.error-reasons li {
+ margin-bottom: 4px;
+ font-size: 14px;
+}
+
+.error-details {
+ margin-bottom: 16px;
+ background-color: rgba(0, 0, 0, 0.2);
+ padding: 12px;
+ border-radius: 6px;
+ border-left: 3px solid rgba(255, 255, 255, 0.3);
+}
+
+.error-details pre {
+ margin: 0;
+ font-family: 'Courier New', monospace;
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.8);
+ word-break: break-word;
+ white-space: pre-wrap;
+ max-height: 100px;
+ overflow-y: auto;
+}
+
+.error-actions {
+ display: flex;
+ gap: 12px;
+}
+
+.retry-button {
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ color: white;
+ padding: 12px 24px;
+ border-radius: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ transition: all 0.2s ease;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.retry-button:hover {
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
+ border-color: rgba(255, 255, 255, 0.5);
+ transform: translateY(-1px);
+}
+
+.retry-button:active {
+ transform: translateY(0);
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+}
+
+/* Адаптивность */
+@media (max-width: 768px) {
+ .three-view-error-boundary {
+ padding: 16px;
+ }
+
+ .error-container {
+ padding: 20px;
+ max-width: 100%;
+ }
+
+ .error-title {
+ font-size: 18px;
+ }
+
+ .error-message {
+ font-size: 14px;
+ }
+
+ .retry-button {
+ padding: 10px 20px;
+ font-size: 13px;
+ }
+}
diff --git a/src/client/src/components/ThreeViewErrorBoundary.tsx b/src/client/src/components/ThreeViewErrorBoundary.tsx
new file mode 100644
index 0000000..075bd69
--- /dev/null
+++ b/src/client/src/components/ThreeViewErrorBoundary.tsx
@@ -0,0 +1,177 @@
+import React, { Component, ReactNode } from "react";
+import "./ThreeViewErrorBoundary.css";
+
+interface Props {
+ children: ReactNode;
+ onReset?: () => void;
+ resetKey?: number | string;
+}
+
+interface State {
+ hasError: boolean;
+ error: Error | null;
+ lastResetKey?: number | string;
+}
+
+export class ThreeViewErrorBoundary extends Component
+
+
+ Store Debug (F4 — закрыть)
+
+
+
+ {JSON.stringify(debugData, null, 2)}
+ API: {apiBaseURL}
+ GEO: {geoBaseURL}
+ WEATHER: {weatherBaseURL}
+
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
diff --git a/src/client/src/components/TouchableLayout/index.tsx b/src/client/src/components/TouchableLayout/index.tsx
new file mode 100644
index 0000000..dc15894
--- /dev/null
+++ b/src/client/src/components/TouchableLayout/index.tsx
@@ -0,0 +1,304 @@
+import React, {
+ useEffect,
+ useRef,
+ useState,
+ useCallback,
+ ReactNode,
+ forwardRef,
+} from "react";
+import "../../styles/TouchableLayout.css";
+
+interface TouchableLayoutProps {
+ children?: ReactNode;
+ className?: string;
+ maxHeight?: string | number;
+ style?: React.CSSProperties;
+}
+
+function useThumbSync(scrollableRef: React.RefObject
+
+
+
+
+ ⚠️
+ Ошибка загрузки 3D модели
+
+
+
+
+
+ );
+ },
+);
+
+TouchableLayout.displayName = "TouchableLayout";
diff --git a/src/client/src/components/WeatherWidget.jsx b/src/client/src/components/WeatherWidget.jsx
new file mode 100644
index 0000000..30a0632
--- /dev/null
+++ b/src/client/src/components/WeatherWidget.jsx
@@ -0,0 +1,197 @@
+import "../styles/WeatherWidget.css";
+import { useState, useEffect, useRef } from "react";
+import { observer } from "mobx-react-lite";
+import weatherApi from "../api/weather/weather.api";
+
+import getWeatherIcon from "../utils/getWeatherIcon";
+import windIcon from "../assets/weather-icons/wind.png";
+import humidityIcon from "../assets/weather-icons/humidity.png";
+import { useGeolocationStore } from "../stores";
+import { translateWeatherStatus } from "../utils/translateWeatherStatus";
+import { apiStore } from "../api/ApiStore";
+
+function WeatherDataLine({ icon, value, unit }) {
+ return (
+
+
+
+ {children}
+
+
+
+
+
+ 
+
+ );
+}
+
+const WeatherWidget = observer(() => {
+ const [currentTime, setCurrentTime] = useState(new Date());
+ const [weather, setWeather] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+ const [hasLoadedOnce, setHasLoadedOnce] = useState(false);
+ const lastDateRef = useRef(() => {
+ const today = new Date();
+ return `${today.getFullYear()}-${today.getMonth()}-${today.getDate()}`;
+ });
+
+ const store = useGeolocationStore();
+ const { selectedLanguage, setError: setErrorStore } = store;
+
+ const fetchWeather = async () => {
+ try {
+ const data = await weatherApi.getFormattedWeather({
+ lat: apiStore.context?.currentCoordinates?.latitude,
+ lng: apiStore.context?.currentCoordinates?.longitude,
+ cityCode: apiStore.city?.weather_city_code,
+ });
+ setWeather(data);
+ setError(null);
+ setHasLoadedOnce(true);
+ } catch (err) {
+ setError(err.message);
+ setErrorStore(err.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ fetchWeather();
+ }, []);
+
+ useEffect(() => {
+ const timer = setInterval(() => {
+ const now = new Date();
+ setCurrentTime(now);
+
+ const newDate = `${now.getFullYear()}-${now.getMonth()}-${now.getDate()}`;
+ if (newDate !== lastDateRef.current) {
+ lastDateRef.current = newDate;
+
+ fetchWeather();
+ }
+ }, 1000);
+
+ return () => clearInterval(timer);
+ }, []);
+
+ useEffect(() => {
+ const intervalId = setInterval(
+ () => {
+ fetchWeather();
+ },
+ 5 * 60 * 1000,
+ );
+
+ return () => clearInterval(intervalId);
+ }, [setErrorStore]);
+
+ const formattedTime = currentTime.toLocaleTimeString(
+ selectedLanguage === "ru"
+ ? "ru-RU"
+ : selectedLanguage === "zh"
+ ? "zh-ZH"
+ : "en-GB",
+ { hour: "2-digit", minute: "2-digit" },
+ );
+ const day = currentTime.getDate().toString().padStart(2, "0");
+ const month = (currentTime.getMonth() + 1).toString().padStart(2, "0");
+ const weekday = currentTime.toLocaleDateString(
+ selectedLanguage === "ru"
+ ? "ru-RU"
+ : selectedLanguage === "zh"
+ ? "zh-ZH"
+ : "en-GB",
+ { weekday: "long" },
+ );
+ const formattedDate = `${day}.${month}, ${weekday}`;
+
+ const formatDayOfWeek = (daysToAdd) => {
+ const date = new Date();
+ date.setDate(date.getDate() + daysToAdd);
+ const dayName = date.toLocaleDateString(
+ selectedLanguage === "ru"
+ ? "ru-RU"
+ : selectedLanguage === "zh"
+ ? "zh-ZH"
+ : "en-US",
+ { weekday: "short" },
+ );
+ return dayName.charAt(0).toUpperCase() + dayName.slice(1);
+ };
+
+ if (!hasLoadedOnce) {
+ return null;
+ }
+
+ if (!weather) {
+ return null;
+ }
+
+ return (
+
+ {unit ? (
+ <>
+ {value}
+ {unit}
+
+ ) : (
+ value
+ )}
+
+
+
+ );
+});
+
+export default WeatherWidget;
diff --git a/src/client/src/components/map/Constants.tsx b/src/client/src/components/map/Constants.tsx
new file mode 100644
index 0000000..d69c2ef
--- /dev/null
+++ b/src/client/src/components/map/Constants.tsx
@@ -0,0 +1,12 @@
+export const UP_SCALE = 10000;
+export const PATH_WIDTH = 5;
+export const STATION_RADIUS = 8;
+export const STATION_OUTLINE_WIDTH = 4;
+export const BACKGROUND_COLOR = 0x111111;
+export const PATH_COLOR = 0xed1c24;
+export const BUS_COLOR = 0xfcd500;
+export const UNPASSED_STATION_COLOR = 0xcccccc;
+export const BASE_ICON_SIZE = 30;
+export const CLUSTER_RADIUS_BASE = 10;
+export const CLUSTER_COLOR = 0x896f58;
+export const ACTIVE_STATION_COLOR = 0xffa500;
diff --git a/src/client/src/components/map/Map.tsx b/src/client/src/components/map/Map.tsx
new file mode 100644
index 0000000..ecf745e
--- /dev/null
+++ b/src/client/src/components/map/Map.tsx
@@ -0,0 +1,237 @@
+import {
+ useCallback,
+ useEffect,
+ useState,
+ useMemo,
+} from "react";
+import { observer } from "mobx-react-lite";
+import { MapDataProvider, useMapData } from "./MapDataContext";
+import { TransformProvider, useTransform } from "./transformContext";
+// @ts-ignore
+import Loader from "../Loader";
+import { UP_SCALE } from "./Constants";
+import "../../styles/MapLayer.css";
+import { useCameraAnimationStore } from "../../stores";
+import { coordinatesToLocal } from "./utils";
+import { SCALE_FACTOR } from "../../assets/Constants";
+import { apiStore } from "../../api/ApiStore/store";
+import WebGLMap from "./WebGLMap";
+
+export function Map() {
+ return (
+ {formattedTime}
+ {formattedDate}
+
+
+
+
+ })
+
+
+ {weather.today.temperature}°
+
+
+ {translateWeatherStatus(weather.today.status, selectedLanguage)}
+
+
+ {weather.tomorrow.temperature !== "N/A" && (
+
+
+
+ );
+};
diff --git a/src/client/src/components/map/WebGLMap.tsx b/src/client/src/components/map/WebGLMap.tsx
new file mode 100644
index 0000000..7c020f4
--- /dev/null
+++ b/src/client/src/components/map/WebGLMap.tsx
@@ -0,0 +1,3217 @@
+import React, {
+ useEffect,
+ useMemo,
+ useRef,
+ useCallback,
+ useState,
+} from "react";
+import { observer } from "mobx-react-lite";
+import { useMapData } from "./MapDataContext";
+import { SightData } from "./types";
+import { useTransform } from "./transformContext";
+import { coordinatesToLocal } from "./utils";
+import {
+ UP_SCALE,
+ PATH_COLOR,
+ BACKGROUND_COLOR,
+ UNPASSED_STATION_COLOR,
+ BUS_COLOR,
+ BASE_ICON_SIZE,
+} from "./Constants";
+import { SCALE_FACTOR } from "../../assets/Constants";
+import { apiStore } from "../../api/ApiStore/store";
+import { useGeolocationStore } from "../../stores/hooks/useGeolocationStore";
+import { useRouteFollowingPosition } from "../../hooks/useRouteFollowingPosition";
+import { useCameraAnimationStore } from "../../stores";
+import { TramIconWebGL } from "./TramIconWebGL";
+import { OverlayScrollbarsWrapper } from "../OverlayScrollbarsWrapper";
+import { apiBaseURL } from "../../api/apiConfig";
+import "../../styles/OverlayScrollbars.css";
+const SIGHT_ICON_URL = new URL("../../assets/images/sight.svg", import.meta.url)
+ .href;
+const SIGHT_ICON_BASE_SIZE = 30;
+const CUSTOM_SIGHT_ICON_BASE_SCALE = 0.1;
+const DEBUG_WEBGL_ROUTE_MAP = true;
+const YELLOW_ICON_FILTER =
+ "brightness(0) saturate(100%) invert(84%) sepia(99%) saturate(3457%) hue-rotate(358deg) brightness(104%) contrast(99%)";
+const clamp = (value: number, min: number, max: number) =>
+ Math.min(max, Math.max(min, value));
+
+const debugWebglLog = (..._args: unknown[]) => {
+ if (!DEBUG_WEBGL_ROUTE_MAP) return;
+};
+
+const isMediaIdEmpty = (id: string | null) => {
+ if (id == null || id === "") return true;
+ const digits = id.replace(/-/g, "");
+ return digits === "" || /^0+$/.test(digits);
+};
+
+const appendTokenToUrl = (url: string, token: string): string => {
+ if (!token) return url;
+ if (/([?&])token=/.test(url)) return url;
+ const separator = url.includes("?") ? "&" : "?";
+ return `${url}${separator}token=${encodeURIComponent(token)}`;
+};
+
+const buildMediaDownloadUrl = (
+ baseUrl: string,
+ mediaId: string,
+ token: string,
+): string => {
+ if (/^https?:\/\//i.test(mediaId)) {
+ return appendTokenToUrl(mediaId, token);
+ }
+
+ const normalizedBase = baseUrl.replace(/\/+$/, "");
+ const normalizedMediaId = mediaId.replace(/^\/+/, "");
+
+ if (/^media\/.+\/download$/i.test(normalizedMediaId)) {
+ return appendTokenToUrl(`${normalizedBase}/${normalizedMediaId}`, token);
+ }
+
+ if (/^media$/i.test(normalizedBase.split("/").pop() ?? "")) {
+ return appendTokenToUrl(
+ `${normalizedBase}/${normalizedMediaId}/download`,
+ token,
+ );
+ }
+
+ return appendTokenToUrl(
+ `${normalizedBase}/media/${normalizedMediaId}/download`,
+ token,
+ );
+};
+
+type Cluster = {
+ id: string;
+ longitude: number;
+ latitude: number;
+ count: number;
+ sights: SightData[];
+};
+
+type PointItem = { type: "point"; id: string; data: SightData };
+type ClusterItem = { type: "cluster"; id: string; data: Cluster };
+type ClusteredItem = PointItem | ClusterItem;
+
+const getDistance = (
+ p1: { longitude: number; latitude: number },
+ p2: { longitude: number; latitude: number },
+) => {
+ return Math.sqrt(
+ Math.pow(p1.longitude - p2.longitude, 2) +
+ Math.pow(p1.latitude - p2.latitude, 2),
+ );
+};
+
+const getDistanceFromPointToPath = (
+ point: { longitude: number; latitude: number },
+ pathPoints: { x: number; y: number }[],
+): number => {
+ if (!pathPoints || pathPoints.length < 2) {
+ return Infinity;
+ }
+
+ let minDistance = Infinity;
+
+ for (let i = 0; i < pathPoints.length - 1; i++) {
+ const p1 = pathPoints[i];
+ const p2 = pathPoints[i + 1];
+
+ const lineLengthSq = (p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2;
+ if (lineLengthSq === 0) continue;
+
+ const t =
+ ((point.longitude - p1.x) * (p2.x - p1.x) +
+ (point.latitude - p1.y) * (p2.y - p1.y)) /
+ lineLengthSq;
+ const projectionT = Math.max(0, Math.min(1, t));
+
+ const projectedX = p1.x + projectionT * (p2.x - p1.x);
+ const projectedY = p1.y + projectionT * (p2.y - p1.y);
+
+ const dist = Math.sqrt(
+ (point.longitude - projectedX) ** 2 + (point.latitude - projectedY) ** 2,
+ );
+ minDistance = Math.min(minDistance, dist);
+ }
+ return minDistance;
+};
+
+const useSightClustering = (
+ sights: SightData[],
+ distanceThreshold: number,
+ pathPoints: { x: number; y: number }[],
+): ClusteredItem[] => {
+ return useMemo(() => {
+ const unclusteredSights: (SightData & { visited?: boolean })[] = sights.map(
+ (s) => ({ ...s }),
+ );
+ const clusteredResult: ClusteredItem[] = [];
+
+ for (const sight of unclusteredSights) {
+ if (sight.visited) {
+ continue;
+ }
+
+ const hasCustomIcon =
+ sight.is_default_icon === false && !isMediaIdEmpty(sight.icon ?? null);
+
+ if (hasCustomIcon) {
+ sight.visited = true;
+ clusteredResult.push({
+ type: "point",
+ id: String(sight.id),
+ data: sight,
+ });
+ continue;
+ }
+
+ const clusterSights: SightData[] = [];
+ const queue = [sight];
+ sight.visited = true;
+
+ while (queue.length > 0 && clusterSights.length < 4) {
+ const current = queue.shift()!;
+ clusterSights.push(current);
+
+ for (const potentialNeighbor of unclusteredSights) {
+ const neighborHasCustomIcon =
+ potentialNeighbor.is_default_icon === false &&
+ !isMediaIdEmpty(potentialNeighbor.icon ?? null);
+ if (
+ !potentialNeighbor.visited &&
+ !neighborHasCustomIcon &&
+ clusterSights.length < 4 &&
+ getDistance(current, potentialNeighbor) < distanceThreshold
+ ) {
+ potentialNeighbor.visited = true;
+ queue.push(potentialNeighbor);
+ }
+ }
+ }
+
+ for (const leftover of queue) {
+ leftover.visited = false;
+ }
+
+ if (clusterSights.length > 1) {
+ let furthestSight: SightData | null = null;
+ let maxDistanceToPath = -1;
+
+ for (const s of clusterSights) {
+ const dist = getDistanceFromPointToPath(s, pathPoints);
+ if (dist > maxDistanceToPath) {
+ maxDistanceToPath = dist;
+ furthestSight = s;
+ }
+ }
+
+ const count = clusterSights.length;
+ const longitude = furthestSight
+ ? furthestSight.longitude
+ : clusterSights.reduce((sum, s) => sum + s.longitude, 0) / count;
+ const latitude = furthestSight
+ ? furthestSight.latitude
+ : clusterSights.reduce((sum, s) => sum + s.latitude, 0) / count;
+
+ const id = `cluster-${clusterSights[0].id}`;
+ clusteredResult.push({
+ type: "cluster",
+ id,
+ data: { id, count, longitude, latitude, sights: clusterSights },
+ });
+ } else {
+ const singleSight = clusterSights[0];
+ clusteredResult.push({
+ type: "point",
+ id: String(singleSight.id),
+ data: singleSight,
+ });
+ }
+ }
+ return clusteredResult;
+ }, [sights, distanceThreshold, pathPoints]);
+};
+
+const getAnchorFromOffset = (align: number): { x: number; y: number } => {
+ let anchorX: number;
+ if (align === 1) {
+ anchorX = 0;
+ } else if (align === 3) {
+ anchorX = 1;
+ } else {
+ anchorX = 0.5;
+ }
+
+ const anchorY = 0.5;
+
+ return { x: anchorX, y: anchorY };
+};
+
+function initWebGLContext(
+ canvas: HTMLCanvasElement,
+): WebGLRenderingContext | null {
+ const gl =
+ (canvas.getContext("webgl") as WebGLRenderingContext | null) ||
+ (canvas.getContext("experimental-webgl") as WebGLRenderingContext | null);
+ return gl;
+}
+
+function resizeCanvasToDisplaySize(canvas: HTMLCanvasElement): boolean {
+ const dpr = Math.max(1, window.devicePixelRatio || 1);
+ const displayWidth = Math.floor(canvas.clientWidth * dpr);
+ const displayHeight = Math.floor(canvas.clientHeight * dpr);
+ if (canvas.width !== displayWidth || canvas.height !== displayHeight) {
+ canvas.width = displayWidth;
+ canvas.height = displayHeight;
+ return true;
+ }
+ return false;
+}
+
+export const WebGLMap = observer(() => {
+ const canvasRef = useRef
+ 
+
+
+ 53.7 ? -bgWidth / 1.42 : -bgWidth / 0.98,
+ top: 0,
+ transform: `translate(-50%, -50%) rotate(${innerRotation}deg)`,
+ width: minTramWidth,
+ height: minTramHeight,
+ }}
+ >
+ 
+
+
+
+
+ );
+});
+
+export default WebGLMap;
diff --git a/src/client/src/components/map/custom.d.ts b/src/client/src/components/map/custom.d.ts
new file mode 100644
index 0000000..6dabad2
--- /dev/null
+++ b/src/client/src/components/map/custom.d.ts
@@ -0,0 +1,26 @@
+declare module "*.svg" {
+ import React = require("react");
+ export const ReactComponent: React.FC
+ {stationLabels.map((l, idx) => {
+ let station = stationData?.[idx];
+
+ const backendAlign = station?.align ?? 3;
+ const anchor = getAnchorFromOffset(backendAlign);
+ const transformCss = `translate(${-anchor.x * 100}%, ${
+ -anchor.y * 100
+ }%)`;
+
+ const fontSizePercent = routeData?.font_size ?? 100;
+ const fontScale = fontSizePercent / 100;
+
+ const clampedScale = Math.min(Math.max(scale, 1), 3);
+ const scaleFactor = 1 + (clampedScale - 1) * 0.4;
+
+ const primaryFontSize = 16 * fontScale * scaleFactor;
+ const secondaryFontSize = 13 * fontScale * scaleFactor;
+ const secondaryMarginTop = 5 * fontScale * scaleFactor;
+ const secondaryLineHeight = 1.2 * scaleFactor;
+
+ const alignment =
+ backendAlign === 1
+ ? "left"
+ : backendAlign === 3
+ ? "right"
+ : "center";
+
+ const secondaryPositionStyle =
+ alignment === "left"
+ ? { left: 0, transform: "none" }
+ : alignment === "right"
+ ? { right: 0, transform: "none" }
+ : { left: "50%", transform: "translateX(-50%)" };
+
+ const isMediaIdEmptyResult = isMediaIdEmpty(station?.icon);
+ const iconSrc = isMediaIdEmptyResult
+ ? null
+ : buildMediaDownloadUrl(mediaBaseUrl, station!.icon!, mediaToken);
+ const iconSizePx = Math.round(primaryFontSize * 1.2);
+
+ return (
+
+ {!isExpanded ? (
+
+ );
+ }
+ })}
+
+ {(() => {
+ if (!routeData) return null;
+ const centerLat = routeData.center_latitude;
+ const centerLon = routeData.center_longitude;
+ if (centerLat === undefined || centerLon === undefined) return null;
+
+ if (!apiStore?.context?.currentCoordinates) return null;
+
+ const rx = animatedYellowDotPosition.x;
+ const ry = animatedYellowDotPosition.y;
+ if (rx === 0 && ry === 0) return null;
+
+ const dpr2 = Math.max(
+ 1,
+ (typeof window !== "undefined" && window.devicePixelRatio) || 1,
+ );
+ const cosR = Math.cos(rotationAngle);
+ const sinR = Math.sin(rotationAngle);
+ const pathPts: { x: number; y: number }[] = [];
+ for (let i = 0; i < routePath.length; i += 2)
+ pathPts.push({ x: routePath[i], y: routePath[i + 1] });
+ const stationsForAngle = (stationData || []).map((st: any) => {
+ const loc = coordinatesToLocal(
+ st.latitude - centerLat,
+ st.longitude - centerLon,
+ );
+ const x = loc.x * UP_SCALE,
+ y = loc.y * UP_SCALE;
+ const rx2 = x * cosR - y * sinR,
+ ry2 = x * sinR + y * cosR;
+ return {
+ longitude: rx2,
+ latitude: ry2,
+ offset_x: st.offset_x,
+ offset_y: st.offset_y,
+ align: st.align,
+ };
+ });
+ let tramSegIndex = getCurrentSegIndex();
+ if (tramSegIndex < 0 && routePath.length >= 4) {
+ let best = -1,
+ bestD = Infinity;
+ for (let i = 0; i < routePath.length - 2; i += 2) {
+ const p1x = routePath[i],
+ p1y = routePath[i + 1];
+ const p2x = routePath[i + 2],
+ p2y = routePath[i + 3];
+ const dx = p2x - p1x,
+ dy = p2y - p1y;
+ const len2 = dx * dx + dy * dy;
+ if (!len2) continue;
+ const t = ((rx - p1x) * dx + (ry - p1y) * dy) / len2;
+ const cl = Math.max(0, Math.min(1, t));
+ const px = p1x + cl * dx,
+ py = p1y + cl * dy;
+ const d = Math.hypot(rx - px, ry - py);
+ if (d < bestD) {
+ bestD = d;
+ best = i / 2;
+ }
+ }
+ tramSegIndex = best;
+ }
+ const optimalAngle = (() => {
+ const testRadiusInMap = 100 / scale;
+ const minPath = 60,
+ minPassed = 60,
+ minStation = 100;
+ let bestAng = 0,
+ bestScore = Infinity;
+ for (let i = 0; i < 12; i++) {
+ const ang = (i * Math.PI * 2) / 12;
+ const tx = rx + Math.cos(ang) * testRadiusInMap;
+ const ty = ry + Math.sin(ang) * testRadiusInMap;
+ const distPath = (function () {
+ if (pathPts.length < 2) return Infinity;
+ let md = Infinity;
+ for (let k = 0; k < pathPts.length - 1; k++) {
+ const p1 = pathPts[k],
+ p2 = pathPts[k + 1];
+ const L2 = (p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2;
+ if (!L2) continue;
+ const tt =
+ ((tx - p1.x) * (p2.x - p1.x) +
+ (ty - p1.y) * (p2.y - p1.y)) /
+ L2;
+ const cl = Math.max(0, Math.min(1, tt));
+ const px = p1.x + cl * (p2.x - p1.x),
+ py = p1.y + cl * (p2.y - p1.y);
+ const d = Math.hypot(tx - px, ty - py);
+ if (d < md) md = d;
+ }
+ return md * scale;
+ })();
+ const distPassed = (function () {
+ if (pathPts.length < 2 || tramSegIndex < 0) return Infinity;
+ let md = Infinity;
+ for (
+ let k = 0;
+ k <= Math.min(tramSegIndex, pathPts.length - 2);
+ k++
+ ) {
+ const p1 = pathPts[k],
+ p2 = pathPts[k + 1];
+ const L2 = (p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2;
+ if (!L2) continue;
+ const tt =
+ ((tx - p1.x) * (p2.x - p1.x) +
+ (ty - p1.y) * (p2.y - p1.y)) /
+ L2;
+ const cl = Math.max(0, Math.min(1, tt));
+ const px = p1.x + cl * (p2.x - p1.x),
+ py = p1.y + cl * (p2.y - p1.y);
+ const d = Math.hypot(tx - px, ty - py);
+ if (d < md) md = d;
+ }
+ return md * scale;
+ })();
+ const distStation = (function () {
+ if (!stationsForAngle.length) return Infinity;
+ let md = Infinity;
+
+ const LABEL_WIDTH_PX = 120;
+
+ const labelWidthMap = LABEL_WIDTH_PX / scale;
+
+ for (const st of stationsForAngle) {
+ const align = st.align ?? 3;
+
+ let lx = st.longitude;
+ let ly = st.latitude;
+
+ if (align === 1 || align === 0) {
+ lx += labelWidthMap / 2;
+ } else if (align === 3) {
+ lx -= labelWidthMap / 2;
+ }
+
+ const d = Math.hypot(tx - lx, ty - ly);
+ if (d < md) md = d;
+ }
+ return md * scale;
+ })();
+ let weight = 0;
+ if (distPath < minPath) weight += 100 * (1 - distPath / minPath);
+ if (distPassed < minPassed)
+ weight += 10 * (1 - distPassed / minPassed);
+ if (distStation < minStation)
+ weight += 1000 * (1 - distStation / minStation);
+ if (weight < bestScore) {
+ bestScore = weight;
+ bestAng = ang;
+ }
+ }
+ return bestAng;
+ })();
+
+ const offsetBack = 5 / scale;
+ const adjustedRx = rx - Math.cos(optimalAngle) * offsetBack;
+ const adjustedRy = ry - Math.sin(optimalAngle) * offsetBack;
+ const screenX = (adjustedRx * scale + position.x) / dpr2;
+ const screenY = (adjustedRy * scale + position.y) / dpr2;
+
+ const screenXDot = (rx * scale + position.x) / dpr2;
+ const screenYDot = (ry * scale + position.y) / dpr2;
+
+ let activeStationIndex = -1;
+ const tramCoords = apiStore?.context?.currentCoordinates;
+
+ if (
+ tramCoords &&
+ stationData &&
+ stationData.length > 0 &&
+ Number.isFinite(tramCoords.latitude) &&
+ Number.isFinite(tramCoords.longitude)
+ ) {
+ let bestD = Infinity;
+ const DISTANCE_THRESHOLD = 0.00015;
+
+ for (let i = 0; i < stationData.length; i++) {
+ const station = stationData[i];
+ if (
+ Number.isFinite(station.latitude) &&
+ Number.isFinite(station.longitude)
+ ) {
+ const d = getDistance(
+ {
+ latitude: tramCoords.latitude,
+ longitude: tramCoords.longitude,
+ },
+ {
+ latitude: station.latitude,
+ longitude: station.longitude,
+ },
+ );
+ if (d < bestD) {
+ bestD = d;
+ activeStationIndex = i;
+ }
+ }
+ }
+
+ if (bestD > DISTANCE_THRESHOLD) {
+ activeStationIndex = -1;
+ }
+ }
+
+ const isAtStation = activeStationIndex !== -1;
+
+ const dotColor = isAtStation ? "#fcd500" : "white";
+
+ return (
+ <>
+
+
+
+
+ );
+ })}
+ {clusteredSights.map((item) => {
+ const dpr = Math.max(
+ 1,
+ (typeof window !== "undefined" && window.devicePixelRatio) || 1,
+ );
+
+ if (item.type === "point") {
+ const s = item.data;
+ const rx = s.longitude;
+ const ry = s.latitude;
+ const isSelected = selectedSightId === String(s.id);
+ const hasIcon = !isMediaIdEmpty(s.icon ?? null);
+ const isCustomIcon = s.is_default_icon === false && hasIcon;
+ const hasSelectedAltIcon =
+ isSelected && isCustomIcon && !isMediaIdEmpty(s.alt_icon ?? null);
+ const defaultCustomIcon = isCustomIcon;
+ const shouldUseCustomSightIcon =
+ hasSelectedAltIcon || defaultCustomIcon;
+ const customSightIconScaleFactor = shouldUseCustomSightIcon
+ ? scale / Math.max(customSightIconBaseScaleRef.current ?? 1, 1e-6)
+ : 1;
+ const sightIconSizePercent = resolveSightIconSizePercent(s);
+ const sightIconUrl = hasSelectedAltIcon
+ ? buildMediaDownloadUrl(
+ mediaBaseUrl,
+ String(s.alt_icon),
+ mediaToken,
+ )
+ : defaultCustomIcon
+ ? buildMediaDownloadUrl(
+ mediaBaseUrl,
+ String(s.icon),
+ mediaToken,
+ )
+ : SIGHT_ICON_URL;
+ const iconSize =
+ SIGHT_ICON_BASE_SIZE *
+ clamp(sightIconSizePercent / 100, 0.1, 10) *
+ customSightIconScaleFactor;
+
+ const screenX = (rx * scale + position.x) / dpr;
+ const screenY = (ry * scale + position.y) / dpr;
+ const iconLeft = screenX - iconSize;
+ const iconTop = screenY - iconSize;
+
+ const handleSightClick = () => {
+ setIsGovernorWidgetOpen(false);
+ setSelectedSightId(String(s.id));
+ setIsManualSelection(true);
+ setIsRightWidgetSelectorOpen(false);
+ store.closeGovernorModal();
+ };
+
+ const handleSightTouch = (e: React.TouchEvent) => {
+ e.stopPropagation();
+ handleSightClick();
+ };
+
+ return (
+
+ {iconSrc ? (
+ 
+ ) : null}
+
+
+ {l.name}
+
+ {l.sub ? (
+
+ {l.sub}
+
+ ) : null}
+
+
+ );
+ } else {
+ const cluster = item.data;
+ const rx = cluster.longitude;
+ const ry = cluster.latitude;
+
+ const screenX = (rx * scale + position.x) / dpr;
+ const screenY = (ry * scale + position.y) / dpr;
+
+ const isExpanded = activeClusterId === cluster.id;
+ const selectedSightInCluster = cluster.sights.find(
+ (sight) => selectedSightId === String(sight.id),
+ );
+ const selectedHasIconInCluster =
+ selectedSightInCluster != null &&
+ !isMediaIdEmpty(selectedSightInCluster.icon ?? null);
+ const selectedIsCustomInCluster =
+ selectedSightInCluster?.is_default_icon === false &&
+ selectedHasIconInCluster;
+
+ const iconSizePercent = resolveSightIconSizePercent(
+ cluster.sights[0],
+ );
+ const clusterCustomScaleFactor = selectedIsCustomInCluster
+ ? scale / Math.max(customSightIconBaseScaleRef.current ?? 1, 1e-6)
+ : 1;
+ const iconSize =
+ SIGHT_ICON_BASE_SIZE *
+ clamp(iconSizePercent / 100, 0.1, 10) *
+ clusterCustomScaleFactor;
+
+ const iconLeft = screenX - iconSize;
+ const iconTop = screenY - iconSize;
+ const hasSelectedAltIconInCluster =
+ selectedSightInCluster != null &&
+ selectedIsCustomInCluster &&
+ !isMediaIdEmpty(selectedSightInCluster.alt_icon ?? null);
+ const clusterIconUrl = hasSelectedAltIconInCluster
+ ? buildMediaDownloadUrl(
+ mediaBaseUrl,
+ String(selectedSightInCluster?.alt_icon),
+ mediaToken,
+ )
+ : selectedIsCustomInCluster
+ ? buildMediaDownloadUrl(
+ mediaBaseUrl,
+ String(selectedSightInCluster?.icon),
+ mediaToken,
+ )
+ : SIGHT_ICON_URL;
+
+ const handleClusterClick = (
+ e: React.MouseEvent | React.TouchEvent,
+ ) => {
+ e.stopPropagation();
+ if (isExpanded) {
+ setActiveClusterId(null);
+ } else {
+ setActiveClusterId(cluster.id);
+ }
+ };
+
+ const handleCircleInteraction = () => {
+ if (isExpanded && clusterAutoCloseTimerRef.current) {
+ clearTimeout(clusterAutoCloseTimerRef.current);
+ clusterAutoCloseTimerRef.current = setTimeout(() => {
+ setActiveClusterId(null);
+ }, 20000);
+ }
+ };
+
+ const handleSightInClusterClick = (
+ sightId: string,
+ e: React.MouseEvent | React.TouchEvent,
+ ) => {
+ e.stopPropagation();
+ setIsGovernorWidgetOpen(false);
+ setSelectedSightId(sightId);
+ setIsManualSelection(true);
+ setIsRightWidgetSelectorOpen(false);
+ store.closeGovernorModal();
+ setActiveClusterId(null);
+ };
+
+ const hasSelectedSight = selectedSightId
+ ? cluster.sights.some(
+ (sight) => String(sight.id) === selectedSightId,
+ )
+ : false;
+
+ const badgeColor = "var(--carrier-main, #006F3A)";
+ const listPanelWidth = 200;
+ const listItemHeight = 30;
+ const listMaxHeight = 250;
+ const hasMoreThanTwo = cluster.sights.length > 2;
+ const shouldShowScrollbar = hasMoreThanTwo;
+
+ return (
+
+ 
+
+
+
+ ) : (
+
+ 
+
+
+ {cluster.count}
+
+
+
+ )}
+
+
+
+
+
+ {cluster.count}
+
+ e.stopPropagation()}
+ >
+
+ {cluster.sights.map((sight, index) => {
+ const isSelected =
+ selectedSightId === String(sight.id);
+ const getSightName = () => {
+ const originalSight =
+ selectedLanguage === "ru"
+ ? routeSights?.find((s) => s.id === sight.id)
+ : selectedLanguage === "en"
+ ? routeSightsEn?.find(
+ (s) => s.id === sight.id,
+ )
+ : routeSightsZh?.find(
+ (s) => s.id === sight.id,
+ );
+
+ if (originalSight?.short_name) {
+ return originalSight.short_name;
+ }
+
+ if (!originalSight?.left_article) {
+ return (
+ sight.name ||
+ `Достопримечательность ${index + 1}`
+ );
+ }
+
+ const leftArticleData =
+ selectedLanguage === "ru"
+ ? sightArticles.get(
+ originalSight.left_article + "_ru",
+ )
+ : selectedLanguage === "en"
+ ? sightArticlesEn.get(
+ originalSight.left_article + "_en",
+ )
+ : sightArticlesZh.get(
+ originalSight.left_article + "_zh",
+ );
+
+ return (
+ leftArticleData?.heading ||
+ sight.name ||
+ `Достопримечательность ${index + 1}`
+ );
+ };
+
+ const sightName = getSightName();
+
+ return (
+
+
+
+ handleSightInClusterClick(String(sight.id), e)
+ }
+ onTouchEnd={(e) =>
+ handleSightInClusterClick(String(sight.id), e)
+ }
+ style={{
+ display: "flex",
+ alignItems: "center",
+ height: `${listItemHeight}px`,
+ cursor: "pointer",
+ userSelect: "none",
+ touchAction: "none",
+ padding: "0 4px",
+ zIndex: 1000000000000,
+ borderBottom:
+ "1px solid rgba(255, 255, 255, 0.1)",
+ transition: "background-color 0.2s",
+ }}
+ >
+ {(() => {
+ const hasRowIcon = !isMediaIdEmpty(
+ sight.icon ?? null,
+ );
+ const isRowCustomIcon =
+ sight.is_default_icon === false && hasRowIcon;
+ const hasRowAltIcon =
+ isSelected &&
+ isRowCustomIcon &&
+ !isMediaIdEmpty(sight.alt_icon ?? null);
+ const rowIconUrl = hasRowAltIcon
+ ? buildMediaDownloadUrl(
+ mediaBaseUrl,
+ String(sight.alt_icon),
+ mediaToken,
+ )
+ : isRowCustomIcon
+ ? buildMediaDownloadUrl(
+ mediaBaseUrl,
+ String(sight.icon),
+ mediaToken,
+ )
+ : SIGHT_ICON_URL;
+ return (
+ 
+ );
+ })()}
+
+ {sightName}
+
+
+ );
+ })}
+
+ {children}
+
+ );
+};
+
+export default Collapsible;
diff --git a/src/client/src/components/side-menu/LeftWidget.jsx b/src/client/src/components/side-menu/LeftWidget.jsx
new file mode 100644
index 0000000..079c7c1
--- /dev/null
+++ b/src/client/src/components/side-menu/LeftWidget.jsx
@@ -0,0 +1,209 @@
+import { useEffect, useState, useRef, useLayoutEffect } from "react";
+import { observer } from "mobx-react-lite";
+import ContentAPI from "../../api/content/content.api";
+import { useGeolocationStore } from "../../stores";
+import "../../styles/LeftWidget.css";
+import { apiStore } from "../../api/ApiStore/store";
+import { apiBaseURL } from "../../api/apiConfig";
+import { ReactMarkdownComponent } from "../ReactMarkdown";
+import { TouchableLayout } from "../TouchableLayout";
+
+const LeftWidget = observer(
+ ({ selectedSightId, onClose, isVisible, sightTop }) => {
+ const [selectedSightData, setSelectedSightData] = useState(null);
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState(null);
+ const [shouldAnimateIn, setShouldAnimateIn] = useState(false);
+ const [isImageLoaded, setIsImageLoaded] = useState(false);
+ const [widgetHeight, setWidgetHeight] = useState(0);
+
+ const layoutRef = useRef(null);
+ const widgetRef = useRef(null);
+
+ const store = useGeolocationStore();
+ const { selectedLanguage, isLeftWidgetOpen } = store;
+ const {
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+ routeSights,
+ routeSightsEn,
+ routeSightsZh,
+ } = apiStore;
+
+ useLayoutEffect(() => {
+ if (widgetRef.current) {
+ setWidgetHeight(widgetRef.current.getBoundingClientRect().height);
+ }
+ }, [selectedSightData, isImageLoaded, isVisible, isLoading, error]);
+
+ useEffect(() => {
+ if (layoutRef.current) {
+ const scrollable = layoutRef.current.querySelector(".scrollable");
+ if (scrollable) scrollable.scrollTop = 0;
+ }
+ }, [selectedSightData]);
+
+ useEffect(() => {
+ if (!selectedSightId) {
+ setSelectedSightData(null);
+ setError(null);
+ setIsLoading(false);
+ setShouldAnimateIn(false);
+ setIsImageLoaded(false);
+ return;
+ }
+
+ async function fetchData() {
+ if (!isLeftWidgetOpen) {
+ setIsLoading(true);
+ setError(null);
+ setIsImageLoaded(false);
+ setShouldAnimateIn(false);
+ }
+
+ try {
+ const sight =
+ selectedLanguage === "ru"
+ ? routeSights.find((sight) => sight.id === selectedSightId)
+ : selectedLanguage === "en"
+ ? routeSightsEn.find((sight) => sight.id === selectedSightId)
+ : routeSightsZh.find((sight) => sight.id === selectedSightId);
+
+ if (!sight) return;
+
+ const leftArticle = sight.left_article;
+
+ const leftArticleData =
+ selectedLanguage === "ru"
+ ? sightArticles.get(leftArticle + "_" + selectedLanguage)
+ : selectedLanguage === "en"
+ ? sightArticlesEn.get(leftArticle + "_" + selectedLanguage)
+ : sightArticlesZh.get(leftArticle + "_" + selectedLanguage);
+
+ if (!leftArticleData?.media?.length) return;
+
+ const media = await ContentAPI.getMediaPreview(
+ leftArticleData.media[0].id,
+ selectedLanguage,
+ );
+
+ const response = {
+ mediaPath: media.path,
+ mediaType: media.type,
+ title: leftArticleData.heading,
+ text: leftArticleData.body,
+ address: sight.address,
+ };
+
+ setSelectedSightData(response);
+ } catch (err) {
+ console.error("Ошибка отображения левого виджета:", err);
+ setError("Не удалось загрузить информацию о достопримечательности.");
+ setSelectedSightData(null);
+ setShouldAnimateIn(false);
+ } finally {
+ if (!isLeftWidgetOpen) {
+ setIsLoading(false);
+ }
+ }
+ }
+
+ if (isLeftWidgetOpen && isVisible) {
+ fetchData();
+ } else if (!isLeftWidgetOpen) {
+ setShouldAnimateIn(false);
+ }
+ }, [selectedSightId, isLeftWidgetOpen, selectedLanguage, isVisible]);
+
+ const handleImageLoad = () => {
+ setIsImageLoaded(true);
+ if (isVisible) {
+ setTimeout(() => {
+ setShouldAnimateIn(true);
+ }, 50);
+ }
+ };
+
+ const handleImageError = () => {
+ setIsImageLoaded(false);
+ console.error(
+ "Ошибка загрузки изображения для достопримечательности:",
+ selectedSightId,
+ );
+ if (isVisible) {
+ setTimeout(() => {
+ setShouldAnimateIn(true);
+ }, 50);
+ }
+ };
+
+ const getTopPosition = () => {
+ if (!sightTop) return "500px";
+ if (!widgetHeight) return `${sightTop}px`;
+
+ const windowHeight = window.innerHeight;
+ const margin = 90;
+ const maxBottom = windowHeight - margin;
+
+ const projectedBottom = sightTop + widgetHeight;
+
+ if (projectedBottom > maxBottom) {
+ return `${maxBottom - widgetHeight}px`;
+ }
+ return `${sightTop}px`;
+ };
+
+ const widgetTransformStyle = {
+ top: getTopPosition(),
+ };
+
+ return (
+
+ {isLoading ? (
+ 
+ ) : (
+ <>
+ )}
+
+ );
+ },
+);
+
+export default LeftWidget;
diff --git a/src/client/src/components/side-menu/SideMenu.jsx b/src/client/src/components/side-menu/SideMenu.jsx
new file mode 100644
index 0000000..437cb69
--- /dev/null
+++ b/src/client/src/components/side-menu/SideMenu.jsx
@@ -0,0 +1,834 @@
+import "../../styles/SideMenu.css";
+import AppealWidget from "../widgets/AppealWidget";
+import { useEffect, useState, useCallback, useRef } from "react";
+import { observer } from "mobx-react-lite";
+import sideMenuPhoto from "/side-menu-photo.png";
+import RouteWidget from "../widgets/RouteWidget";
+import WeatherWidget from "../WeatherWidget";
+import ContentAPI from "../../api/content/content.api";
+import { useGeolocationStore, useColorStore } from "../../stores";
+import "../../styles/LeftWidget.css";
+import SightsList from "./SightsList";
+import StationsList from "./StationsList";
+import LeftWidget from "./LeftWidget";
+import { apiStore } from "../../api/ApiStore/store";
+import { getMediaUrl } from "../../api/apiConfig";
+
+const SideMenu = observer(({ onMenuToggle }) => {
+ const {
+ carrier,
+ route,
+ getArticle,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+ routeSights,
+ routeSightsEn,
+ routeSightsZh,
+ } = apiStore;
+ const [isMenuOpen, openMenu] = useState(false);
+ const [isSightsOpen, openSights] = useState(false);
+ const [isStationOpen, openStation] = useState(false);
+ const [isWidgetOpen, openWidget] = useState(false);
+ const [isWeatherVisible, setIsWeatherVisible] = useState(true);
+ const [isPreviewMediaError, setIsPreviewMediaError] = useState(false);
+ const [isLeftWidgetVisible, setIsLeftWidgetVisible] = useState(false);
+ const [localSelectedSightId, setLocalSelectedSightId] = useState(null);
+ const [isSightsAnimating, setIsSightsAnimating] = useState(false);
+ const [isStationAnimating, setIsStationAnimating] = useState(false);
+ const [shouldRenderSights, setShouldRenderSights] = useState(false);
+ const [shouldRenderStation, setShouldRenderStation] = useState(false);
+ const [sightTop, setSightTop] = useState(null);
+ const isSortingChangingRef = useRef(false);
+
+ const store = useGeolocationStore();
+ const { setIsGovernorWidgetOpen, sortingBy, setSortingBy } = store;
+ const colorStore = useColorStore();
+ const { currentColor, startColorAnimation } = colorStore;
+ const {
+ contextData,
+ isGovernorWidgetOpen,
+ isLoading: isGeolocationLoading,
+ selectedLanguage,
+ setSelectedLanguage,
+ setIsLeftWidgetOpen,
+ nearestSightId,
+ selectedSightId,
+ isManualSelection,
+ setSelectedSightId,
+ setIsManualSelection,
+ setIsRightWidgetSelectorOpen,
+ isLeftWidgetOpen,
+ } = store;
+
+ const sideMenuRef = useRef(null);
+ const sightsListRef = useRef(null);
+ const stationsListRef = useRef(null);
+ const activeTouches = useRef(new Map());
+
+ // Запуск анимации цвета при монтировании компонента
+ useEffect(() => {
+ startColorAnimation();
+ }, [startColorAnimation]);
+
+ useEffect(() => {
+ const menuContainer = sideMenuRef.current;
+ if (!menuContainer) return;
+
+ const SCROLL_THRESHOLD = 10;
+
+ const handleTouchStart = (e) => {
+ const sightsContainer = sightsListRef.current;
+ const stationsContainer = stationsListRef.current;
+
+ for (const touch of e.changedTouches) {
+ let scrollTarget = null;
+ const targetElement = document.elementFromPoint(
+ touch.clientX,
+ touch.clientY,
+ );
+
+ // Определяем, над каким из скролл-контейнеров находится палец
+ if (sightsContainer && sightsContainer.contains(targetElement)) {
+ scrollTarget = sightsContainer;
+ } else if (
+ stationsContainer &&
+ stationsContainer.contains(targetElement)
+ ) {
+ scrollTarget = stationsContainer;
+ }
+
+ if (scrollTarget) {
+ activeTouches.current.set(touch.identifier, {
+ target: scrollTarget,
+ startY: touch.clientY,
+ lastY: touch.clientY,
+ isScrolling: false, // Флаг, что скролл еще не начался
+ });
+ }
+ }
+ };
+
+ const handleTouchMove = (e) => {
+ for (const touch of e.changedTouches) {
+ const activeTouch = activeTouches.current.get(touch.identifier);
+ if (activeTouch) {
+ const deltaY = touch.clientY - activeTouch.startY;
+
+ if (!activeTouch.isScrolling && Math.abs(deltaY) > SCROLL_THRESHOLD) {
+ activeTouch.isScrolling = true;
+ }
+
+ if (activeTouch.isScrolling) {
+ e.preventDefault(); // Предотвращаем стандартное поведение только при скролле
+ const moveDelta = touch.clientY - activeTouch.lastY;
+ activeTouch.target.scrollTop -= moveDelta;
+ activeTouch.lastY = touch.clientY;
+ }
+ }
+ }
+ };
+
+ const handleTouchEnd = (e) => {
+ for (const touch of e.changedTouches) {
+ activeTouches.current.delete(touch.identifier);
+ }
+ };
+
+ menuContainer.addEventListener("touchstart", handleTouchStart, {
+ passive: true,
+ });
+ menuContainer.addEventListener("touchmove", handleTouchMove, {
+ passive: false,
+ });
+ menuContainer.addEventListener("touchend", handleTouchEnd, {
+ passive: true,
+ });
+ menuContainer.addEventListener("touchcancel", handleTouchEnd, {
+ passive: true,
+ });
+
+ return () => {
+ menuContainer.removeEventListener("touchstart", handleTouchStart);
+ menuContainer.removeEventListener("touchmove", handleTouchMove);
+ menuContainer.removeEventListener("touchend", handleTouchEnd);
+ menuContainer.removeEventListener("touchcancel", handleTouchEnd);
+ };
+ }, [isSightsOpen, isStationOpen]); // Перезапускаем эффект, когда списки появляются/исчезают
+ // --- КОНЕЦ: Улучшенная логика ---
+
+ useEffect(() => {
+ if (isGovernorWidgetOpen) {
+ openWidget(true);
+ } else {
+ openWidget(false);
+ }
+ }, [isGovernorWidgetOpen]);
+
+ useEffect(() => {
+ setIsLeftWidgetVisible(isMenuOpen && isLeftWidgetOpen);
+ }, [isMenuOpen, isLeftWidgetOpen]);
+
+ useEffect(() => {}, [
+ localSelectedSightId,
+ sightTop,
+ isLeftWidgetVisible,
+ isLeftWidgetOpen,
+ isMenuOpen,
+ ]);
+
+ useEffect(() => {
+ if (isLeftWidgetVisible) {
+ setIsWeatherVisible(false);
+ } else {
+ setIsWeatherVisible(true);
+ }
+ }, [isLeftWidgetVisible]);
+
+ const [routeData, setRouteData] = useState(null);
+ const [isLangMenuOpen, setIsLangMenuOpen] = useState(false);
+
+ useEffect(() => {
+ setIsPreviewMediaError(false);
+ }, [carrier?.preview_media]);
+
+ useEffect(() => {
+ if (isGeolocationLoading || !contextData?.routeId) {
+ return;
+ }
+ async function fetchRoutePathData() {
+ try {
+ setRouteData(route);
+ } catch (err) {
+ console.error("Ошибка в получении данных маршрута:", err);
+ }
+ }
+ fetchRoutePathData();
+ }, [contextData?.routeId, isGeolocationLoading, selectedLanguage]);
+
+ useEffect(() => {
+ const fetchArticles = async () => {
+ if (route && route?.governor_appeal > 0) {
+ await getArticle(route?.governor_appeal, "ru");
+ await getArticle(route?.governor_appeal, "en");
+ await getArticle(route?.governor_appeal, "zh");
+ }
+ };
+ fetchArticles();
+ }, [route, route?.governor_appeal]);
+
+ const handleLanguageChange = (langCode) => {
+ setSelectedLanguage(langCode);
+ setIsLangMenuOpen(false);
+ };
+
+ const handleMenuToggle = (newMenuState) => {
+ openWidget(false);
+ store.closeGovernorModal();
+ if (onMenuToggle) onMenuToggle(newMenuState);
+ if (newMenuState) {
+ openMenu(newMenuState);
+ } else {
+ setIsLeftWidgetVisible(false);
+ // Закрываем списки мгновенно
+ if (isSightsOpen) {
+ openSights(false);
+ setLocalSelectedSightId(null);
+ setSightTop(null);
+ setIsSightsAnimating(false);
+ setShouldRenderSights(false);
+ }
+ if (isStationOpen) {
+ openStation(false);
+ setIsStationAnimating(false);
+ setShouldRenderStation(false);
+ }
+ openMenu(newMenuState);
+ setIsLeftWidgetOpen(false);
+ }
+ };
+
+ const handleMenuToggleRef = useRef(handleMenuToggle);
+ handleMenuToggleRef.current = handleMenuToggle;
+
+ const isMenuOpenRef = useRef(isMenuOpen);
+ isMenuOpenRef.current = isMenuOpen;
+
+ useEffect(() => {
+ let idleSeconds = 0;
+
+ const checkIdle = () => {
+ idleSeconds += 1;
+ if (idleSeconds >= 60 && isMenuOpenRef.current) {
+ handleMenuToggleRef.current(false);
+ }
+ };
+
+ const intervalId = setInterval(checkIdle, 1000);
+
+ const resetIdle = () => {
+ idleSeconds = 0;
+ };
+
+ const events = [
+ "mousedown",
+ "mousemove",
+ "keypress",
+ "scroll",
+ "touchstart",
+ "click",
+ ];
+
+ events.forEach((event) => {
+ window.addEventListener(event, resetIdle, { passive: true });
+ });
+
+ return () => {
+ clearInterval(intervalId);
+ events.forEach((event) => {
+ window.removeEventListener(event, resetIdle);
+ });
+ };
+ }, []);
+
+ // Автоматическое скрытие левого виджета через 60 секунд бездействия
+ useEffect(() => {
+ if (!isLeftWidgetVisible) return;
+
+ let idleSeconds = 0;
+
+ const checkIdle = () => {
+ idleSeconds += 1;
+ if (idleSeconds >= 60) {
+ setIsLeftWidgetVisible(false);
+ setTimeout(() => {
+ setIsLeftWidgetOpen(false);
+ }, 1000);
+ }
+ };
+
+ const intervalId = setInterval(checkIdle, 1000);
+
+ const resetIdle = () => {
+ idleSeconds = 0;
+ };
+
+ const events = [
+ "mousedown",
+ "mousemove",
+ "keypress",
+ "scroll",
+ "touchstart",
+ "click",
+ ];
+
+ events.forEach((event) =>
+ window.addEventListener(event, resetIdle, { passive: true }),
+ );
+
+ return () => {
+ clearInterval(intervalId);
+ events.forEach((event) => window.removeEventListener(event, resetIdle));
+ };
+ }, [isLeftWidgetVisible, setIsLeftWidgetOpen]);
+
+ // Закрываем и открываем список достопримечательностей при изменении сортировки
+ const prevSortingByRef = useRef(sortingBy);
+ const isFirstRenderRef = useRef(true);
+ useEffect(() => {
+ // Пропускаем первый рендер
+ if (isFirstRenderRef.current) {
+ isFirstRenderRef.current = false;
+ prevSortingByRef.current = sortingBy;
+ return;
+ }
+
+ // Если список достопримечательностей открыт и сортировка изменилась, закрываем и открываем заново
+ if (isSightsOpen && prevSortingByRef.current !== sortingBy) {
+ // Блокируем обновление позиции виджета во время процесса
+ isSortingChangingRef.current = true;
+
+ setIsSightsAnimating(true);
+ openSights(false);
+
+ setTimeout(() => {
+ setIsSightsAnimating(false);
+ setShouldRenderSights(false);
+
+ // Открываем список заново
+ setShouldRenderSights(true);
+ setTimeout(() => {
+ openSights(true);
+ // Разблокируем обновление позиции после полного открытия
+ setTimeout(() => {
+ isSortingChangingRef.current = false;
+ }, 350);
+ }, 10);
+ }, 300);
+ }
+
+ prevSortingByRef.current = sortingBy;
+ }, [sortingBy, isSightsOpen]);
+
+ return (
+ Загрузка информации...
+ ) : error ? (
+ {error}
+ ) : selectedSightData ? (
+ <>
+ {selectedSightData.mediaType == 1 ||
+ selectedSightData.mediaType == 3 ? (
+
+
+
+
+
+ ) : (isVisible || selectedSightData) && !isLoading ? (
+ {selectedSightData.title}
+
+ {selectedSightData.address}
+
+
+
+
+ {selectedLanguage === "ru"
+ ? "Выберите достопримечательность для просмотра деталей."
+ : selectedLanguage === "zh"
+ ? "选择一个地标来查看详细信息。"
+ : "Select a landmark to view details."}
+
+ ) : null}
+
+
+ );
+});
+
+export default SideMenu;
diff --git a/src/client/src/components/side-menu/SightStationsList.jsx b/src/client/src/components/side-menu/SightStationsList.jsx
new file mode 100644
index 0000000..f59d01e
--- /dev/null
+++ b/src/client/src/components/side-menu/SightStationsList.jsx
@@ -0,0 +1,286 @@
+import {
+ useEffect,
+ useState,
+ forwardRef,
+ useRef,
+ useLayoutEffect,
+} from "react";
+import { observer } from "mobx-react-lite";
+import { useGeolocationStore } from "../../stores";
+import { apiStore } from "../../api/ApiStore/store";
+import { useClickDetection } from "../../hooks/useClickDetection";
+import { OverlayScrollbarsWrapper } from "../OverlayScrollbarsWrapper";
+import "../../styles/OverlayScrollbars.css";
+import { getSightStations } from "../../api/ApiStore/api";
+import busIcon from "../../assets/transport-icons/bus.svg";
+import metroBlueIcon from "../../assets/transport-icons/metroBlue.svg";
+import metroGreenIcon from "../../assets/transport-icons/metroGreen.svg";
+import metroOrangeIcon from "../../assets/transport-icons/metroOrange.svg";
+import metroPurpleIcon from "../../assets/transport-icons/metroPurple.svg";
+import metroRedIcon from "../../assets/transport-icons/metroRed.svg";
+import trainIcon from "../../assets/transport-icons/train.svg";
+import tramIcon from "../../assets/transport-icons/tram.svg";
+import trolleyIcon from "../../assets/transport-icons/trolley.svg";
+
+const StationItem = ({
+ station,
+ handlePointerDown,
+ handlePointerUp,
+ handleStationClick,
+ selectedStationId,
+ transferIcons,
+ getNoTransfersMessage,
+ isLast,
+}) => {
+ const containerRef = useRef(null);
+ const textRef = useRef(null);
+ const [shouldAnimate, setShouldAnimate] = useState(false);
+
+ useLayoutEffect(() => {
+ const checkWidth = () => {
+ if (containerRef.current && textRef.current) {
+ const containerWidth = containerRef.current.offsetWidth;
+ const textWidth = textRef.current.scrollWidth;
+ const threshold = containerWidth * 1.1;
+ setShouldAnimate(textWidth > threshold);
+ }
+ };
+
+ checkWidth();
+ window.addEventListener("resize", checkWidth);
+ return () => window.removeEventListener("resize", checkWidth);
+ }, [station.name]);
+
+ return (
+
+ {shouldRenderSights && (
+ {
+ setIsSightsAnimating(true);
+ openSights(false);
+ setIsLeftWidgetVisible(false);
+ setTimeout(() => {
+ setIsLeftWidgetOpen(false);
+ setIsSightsAnimating(false);
+ setShouldRenderSights(false);
+ }, 300);
+ }}
+ setWeatherVisible={setIsWeatherVisible}
+ setLocalSelectedSightId={setLocalSelectedSightId}
+ localSelectedSightId={localSelectedSightId}
+ onSightTopChange={(top) => {
+ // Не обновляем позицию виджета во время смены сортировки
+ if (isSortingChangingRef.current) {
+ return;
+ }
+ setSightTop(top);
+ }}
+ onSightSelected={(sightId) => {
+ // Обработка выбора достопримечательности уже в компоненте
+ }}
+ />
+ )}
+ {shouldRenderStation && (
+ {
+ setIsStationAnimating(true);
+ openStation(false);
+ setIsLeftWidgetVisible(false);
+ setTimeout(() => {
+ setIsLeftWidgetOpen(false);
+ setIsStationAnimating(false);
+ setShouldRenderStation(false);
+ setIsWeatherVisible(true);
+ }, 300);
+ }}
+ onStationSelected={(stationId) => {
+ // Обработка выбора остановки уже в компоненте
+ }}
+ onSightClick={(sightId, top) => {
+ setLocalSelectedSightId(sightId);
+ if (top !== undefined) {
+ setSightTop(top);
+ }
+ setIsLeftWidgetOpen(true);
+ }}
+ />
+ )}
+ {route?.governor_appeal > 0 && (
+
+ {
+ openWidget(!isWidgetOpen);
+ store.setIsGovernorWidgetOpen(!isWidgetOpen);
+ }}
+ className="appeal-button"
+ >
+ {route?.button_text
+ ? route.button_text
+ : selectedLanguage == "ru"
+ ? "Обращение губернатора"
+ : selectedLanguage == "zh"
+ ? "州长致辞"
+ : "Governor's appeal"}
+
+ )}
+ 0 ? '40px' : '260px' }}>
+
+ {
+ if (!isSightsOpen) {
+ if (isStationOpen) {
+ setIsStationAnimating(true);
+ openStation(false);
+ setTimeout(() => {
+ setIsStationAnimating(false);
+ setShouldRenderStation(false);
+
+ setLocalSelectedSightId(null);
+ setSightTop(null);
+ setShouldRenderSights(true);
+ setTimeout(() => {
+ openSights(true);
+ }, 10);
+ }, 300);
+ } else {
+ setLocalSelectedSightId(null);
+ setSightTop(null);
+ setShouldRenderSights(true);
+ setTimeout(() => {
+ openSights(true);
+ }, 10);
+ }
+ openWidget(false);
+ store.closeGovernorModal();
+ setIsLeftWidgetOpen(false);
+ } else {
+ setIsSightsAnimating(true);
+ openSights(false);
+ setIsLeftWidgetVisible(false);
+ setLocalSelectedSightId(null);
+ setSightTop(null);
+ setTimeout(() => {
+ setIsLeftWidgetOpen(false);
+ setIsSightsAnimating(false);
+ setShouldRenderSights(false);
+ }, 300);
+ }
+ }}
+ className={`side-menu-button side-menu-button--sights ${
+ isSightsOpen ? "side-menu-button--active" : ""
+ }`}
+ >
+ {selectedLanguage == "ru"
+ ? "Достопримечательности"
+ : selectedLanguage == "zh"
+ ? "景点"
+ : "Attractions"}
+
+ {
+ if (!isStationOpen) {
+ if (isSightsOpen) {
+ setIsSightsAnimating(true);
+ openSights(false);
+ setIsLeftWidgetVisible(false);
+ setLocalSelectedSightId(null);
+ setSightTop(null);
+ setTimeout(() => {
+ setIsLeftWidgetOpen(false);
+ setIsSightsAnimating(false);
+ setShouldRenderSights(false);
+ setShouldRenderStation(true);
+ setTimeout(() => {
+ openStation(true);
+ }, 10);
+ }, 300);
+ } else {
+ setLocalSelectedSightId(null);
+ setSightTop(null);
+ setShouldRenderStation(true);
+ setTimeout(() => {
+ openStation(true);
+ }, 10);
+ }
+ openWidget(false);
+ store.closeGovernorModal();
+ setIsLeftWidgetOpen(false);
+ } else {
+ setIsStationAnimating(true);
+ openStation(false);
+ setTimeout(() => {
+ setIsStationAnimating(false);
+ setShouldRenderStation(false);
+ }, 300);
+ }
+ }}
+ className={`side-menu-button ${
+ isStationOpen ? "side-menu-button--active" : ""
+ }`}
+ >
+ {selectedLanguage == "ru"
+ ? "Остановки"
+ : selectedLanguage == "zh"
+ ? "车站"
+ : "Stations"}
+
+
+ {/* {selectedLanguage == "ru"
+ ? "#ВсемПоПути"
+ : selectedLanguage == "zh"
+ ? "#每个人都在路上"
+ : "#EveryoneOnTheWay"} */}
+
+
+ 
setIsPreviewMediaError(true)}
+ alt=""
+ />
+
+
+ {
+ const m = sightArticles.get(route?.governor_appeal + "_ru")?.media;
+ const mediaId = Array.isArray(m) ? m[0]?.id : m?.id;
+ return mediaId ? ContentAPI.getMediaPath(mediaId) : undefined;
+ })()}
+ isOpen={isWidgetOpen}
+ style={{
+ transform: isWidgetOpen ? "translateX(0)" : "translateX(-200%)",
+ transition: "transform 0.5s ease",
+ zIndex: -1,
+ pointerEvents: isWidgetOpen ? "auto" : "none",
+ }}
+ widgetLabel={
+ selectedLanguage == "ru"
+ ? sightArticles.get(route?.governor_appeal + "_ru")?.heading
+ : selectedLanguage == "zh"
+ ? sightArticlesZh.get(route?.governor_appeal + "_zh")?.heading
+ : sightArticlesEn.get(route?.governor_appeal + "_en")?.heading
+ }
+ widgetText={
+ selectedLanguage == "ru"
+ ? sightArticles.get(route?.governor_appeal + "_ru")?.body
+ : selectedLanguage == "zh"
+ ? sightArticlesZh.get(route?.governor_appeal + "_zh")?.body
+ : sightArticlesEn.get(route?.governor_appeal + "_en")?.body
+ }
+ />
+
+
+
+
+
+
+
+
+ {isLangMenuOpen ? (
+
+
+
+
+
+
+ ) : (
+
+ )}
+
+ {isSightsOpen && (
+
+ )}
+
+ {
+ setIsLeftWidgetVisible(false);
+ setTimeout(() => {
+ setIsLeftWidgetOpen(false);
+ }, 1000);
+ }}
+ isVisible={isLeftWidgetVisible}
+ sightTop={sightTop}
+ />
+
+
+
+ );
+};
+
+const SightStationsList = observer(
+ forwardRef(
+ ({ style, className, onClose, sightId, selectedLanguage }, ref) => {
+ const [stationList, setStationList] = useState([]);
+ const [error, setError] = useState(null);
+ const [isStationListLoading, setIsStationListLoading] = useState(true);
+ const [selectedStationId, setSelectedStationId] = useState(null);
+
+ const { handlePointerDown, handlePointerUp, handleScroll } =
+ useClickDetection();
+
+ const getNoTransfersMessage = () => {
+ if (selectedLanguage === "ru") return "Нет пересадок";
+ if (selectedLanguage === "zh") return "没有转移";
+ return "No transfers";
+ };
+
+ const transferIcons = {
+ metro_red: metroRedIcon,
+ metro_green: metroGreenIcon,
+ metro_blue: metroBlueIcon,
+ metro_orange: metroOrangeIcon,
+ metro_purple: metroPurpleIcon,
+ tram: tramIcon,
+ trolleybus: trolleyIcon,
+ bus: busIcon,
+ train: trainIcon,
+ };
+
+ useEffect(() => {
+ async function fetchStationList() {
+ if (!sightId) {
+ setIsStationListLoading(false);
+ return;
+ }
+
+ setIsStationListLoading(true);
+ setError(null);
+ try {
+ const response = await getSightStations(sightId, selectedLanguage);
+
+ const sortedStations = [...(response || [])].sort((a, b) => {
+ const nameA = a.name.trim();
+ const nameB = b.name.trim();
+
+ return nameA.localeCompare(
+ nameB,
+ selectedLanguage === "ru"
+ ? "ru"
+ : selectedLanguage === "zh"
+ ? "zh"
+ : "en",
+ {
+ sensitivity: "base",
+ }
+ );
+ });
+
+ setStationList(sortedStations);
+ } catch (err) {
+ setError(
+ "Не удалось получить остановки. Пожалуйста, попробуйте позже."
+ );
+ setStationList([]);
+ } finally {
+ setIsStationListLoading(false);
+ }
+ }
+
+ fetchStationList();
+ }, [sightId, selectedLanguage]);
+
+ const handleStationClick = (stationId) => {
+ setSelectedStationId((prevId) =>
+ prevId === stationId ? null : stationId
+ );
+ };
+
+ return (
+ handlePointerDown(e, station.id)}
+ onPointerUp={(e) => handlePointerUp(e, station.id, handleStationClick)}
+ >
+
+ {station.name}
+
+
+
+ {station.transfers != null &&
+ !Object.values(station.transfers).every((value) => value === "") ? (
+ Object.entries(station.transfers).map(
+ ([transferType, transferValue]) => {
+ const IconComponent = transferIcons[transferType];
+
+ if (transferValue && transferValue.length > 0) {
+ return (
+
+
+ {IconComponent && (
+ 
+ )}
+ {transferValue}
+
+ );
+ }
+ return null;
+ }
+ )
+ ) : (
+
+ {getNoTransfersMessage()}
+
+ )}
+
+
+ {isStationListLoading ? (
+
+
+ );
+ }
+ )
+);
+
+export default SightStationsList;
diff --git a/src/client/src/components/side-menu/SightsList.jsx b/src/client/src/components/side-menu/SightsList.jsx
new file mode 100644
index 0000000..a31ec8e
--- /dev/null
+++ b/src/client/src/components/side-menu/SightsList.jsx
@@ -0,0 +1,458 @@
+import {
+ useEffect,
+ useState,
+ forwardRef,
+ useRef,
+ useLayoutEffect,
+} from "react";
+import { observer } from "mobx-react-lite";
+import { useGeolocationStore } from "../../stores";
+import { apiStore } from "../../api/ApiStore/store";
+import { useClickDetection } from "../../hooks/useClickDetection";
+import { TouchableLayout } from "../TouchableLayout";
+import Collapsible from "./Collapsible";
+import { getMediaUrl } from "../../api/apiConfig";
+import stationIcon from "../../assets/transport-icons/station.svg";
+
+export const isMediaIdEmpty = (id) => {
+ if (id == null || id === "") return true;
+ const digits = id.replace(/-/g, "");
+ return digits === "" || /^0+$/.test(digits);
+};
+
+const SightItem = ({
+ sight,
+ handlePointerDown,
+ handlePointerUp,
+ handleSightClick,
+ localSelectedSightId,
+ selectedLanguage,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+ selectedSightId,
+ onSightSelected,
+ sightStationsCache,
+}) => {
+ const containerRef = useRef(null);
+ const textRef = useRef(null);
+ const [shouldAnimate, setShouldAnimate] = useState(false);
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ const getSightName = () => {
+ return sight.short_name || sight.name;
+ };
+
+ const sightName = getSightName();
+
+ useLayoutEffect(() => {
+ const checkWidth = () => {
+ if (containerRef.current && textRef.current) {
+ const containerWidth = containerRef.current.offsetWidth;
+ const textWidth = textRef.current.scrollWidth;
+ const shouldAnimateValue = textWidth > containerWidth;
+ setShouldAnimate(shouldAnimateValue);
+
+ // Устанавливаем CSS переменную для анимации
+ if (shouldAnimateValue && containerRef.current) {
+ containerRef.current.style.setProperty(
+ "--container-width",
+ `${containerWidth}px`,
+ );
+ }
+ }
+ };
+
+ checkWidth();
+ window.addEventListener("resize", checkWidth);
+ return () => window.removeEventListener("resize", checkWidth);
+ }, [sightName]);
+
+ const handleClick = (e) => {
+ const newExpanded = !isExpanded;
+ setIsExpanded(newExpanded);
+
+ // Всегда открываем виджет при клике на достопримечательность
+ handleSightClick(sight.id);
+ };
+
+ const cacheKey = `${sight.id}_${selectedLanguage}`;
+ const stations = sightStationsCache.get(cacheKey) || [];
+
+ useEffect(() => {
+ if (localSelectedSightId !== sight.id) {
+ setIsExpanded(false);
+ }
+ }, [localSelectedSightId, sight.id]);
+
+ // Логирование при открытии списка станций для достопримечательности (только один раз)
+ const wasExpandedRef = useRef(false);
+ useEffect(() => {
+ // Выводим логи только когда список открывается (переход из закрытого в открытое состояние)
+ if (isExpanded && !wasExpandedRef.current && stations.length > 0) {
+ wasExpandedRef.current = true;
+ }
+
+ // Сбрасываем флаг когда список закрывается
+ if (!isExpanded) {
+ wasExpandedRef.current = false;
+ }
+ }, [isExpanded, sight.id, selectedLanguage, stations.length]);
+
+ return (
+ {
+ if (onClose) {
+ onClose();
+ }
+ }}
+ >
+
+ + {selectedLanguage === "ru" + ? "Остановки" + : selectedLanguage === "zh" + ? "车站" + : "Stations"} +
+ +
+ {selectedLanguage === "ru"
+ ? "Загрузка остановок..."
+ : selectedLanguage === "zh"
+ ? "加载停止..."
+ : "Loading stops..."}
+
+ ) : error ? (
+ {error}
+ ) : stationList.length === 0 ? (
+
+ {selectedLanguage === "ru"
+ ? "Остановки не найдены"
+ : selectedLanguage === "zh"
+ ? "没有找到停靠站"
+ : "No stops found"}
+
+ ) : (
+ stationList.map((station, index) => (
+
+
+ {stations.length > 0 ? (
+ stations.map((station, index) => {
+ let isMediaIdEmptyResult = isMediaIdEmpty(station.icon);
+ const iconSrc = isMediaIdEmptyResult
+ ? stationIcon
+ : getMediaUrl(station.icon);
+
+ return (
+
+
+ );
+};
+
+const SightsList = observer(
+ forwardRef(
+ (
+ {
+ style,
+ className,
+ onCloseSights,
+ setWeatherVisible,
+ setLocalSelectedSightId,
+ localSelectedSightId,
+ onSightTopChange,
+ onSightSelected,
+ },
+ ref,
+ ) => {
+ const containerRef = useRef(null);
+ const store = useGeolocationStore();
+ const {
+ sortingBy,
+ contextData,
+ isLoading: isGeolocationLoading,
+ selectedLanguage,
+ isLeftWidgetOpen,
+ setIsLeftWidgetOpen,
+ } = store;
+
+ useLayoutEffect(() => {
+ if (containerRef.current) {
+ if (className === "slide-in") {
+ // Применяем стили для slide-in
+ requestAnimationFrame(() => {
+ if (containerRef.current) {
+ containerRef.current.style.transform = "translateY(0)";
+ containerRef.current.style.opacity = "1";
+ }
+ });
+ } else if (className === "slide-out") {
+ // Очищаем inline стили, чтобы CSS transition работал
+ containerRef.current.style.transform = "";
+ // Принудительно применяем reflow для запуска transition
+ void containerRef.current.offsetHeight;
+ }
+ }
+ }, [className]);
+ const {
+ routeSights,
+ routeSightsEn,
+ routeSightsZh,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+ sightStationsCache,
+ } = apiStore;
+ const [sightList, setSightList] = useState([]);
+ const [error, setError] = useState(null);
+ const [isSightListLoading, setIsSightListLoading] = useState(true);
+
+ const { handlePointerDown, handlePointerUp, handleScroll } =
+ useClickDetection();
+
+ useEffect(() => {
+ async function fetchSightList() {
+ setIsSightListLoading(true);
+ setError(null);
+ try {
+ const sights =
+ selectedLanguage === "ru"
+ ? routeSights
+ : selectedLanguage === "en"
+ ? routeSightsEn
+ : routeSightsZh;
+ const getSightNameForSort = (sight) => {
+ return (sight.short_name || sight.name).trim();
+ };
+
+ const sortedSights = [...(sights || [])].sort((a, b) => {
+ const nameA = getSightNameForSort(a);
+ const nameB = getSightNameForSort(b);
+
+ if (sortingBy === "asc") {
+ return nameA.localeCompare(
+ nameB,
+ selectedLanguage === "ru"
+ ? "ru"
+ : selectedLanguage === "zh"
+ ? "zh"
+ : "en",
+ {
+ sensitivity: "base",
+ },
+ );
+ } else {
+ return nameB.localeCompare(
+ nameA,
+ selectedLanguage === "ru"
+ ? "ru"
+ : selectedLanguage === "zh"
+ ? "zh"
+ : "en",
+ {
+ sensitivity: "base",
+ },
+ );
+ }
+ });
+ setSightList(sortedSights);
+ } catch (err) {
+ setError(
+ "Не удалось получить достопримечательности. Пожалуйста, попробуйте позже.",
+ );
+ setSightList([]);
+ setIsLeftWidgetOpen(false);
+ } finally {
+ setIsSightListLoading(false);
+ }
+ }
+
+ fetchSightList();
+ }, [
+ contextData?.routeId,
+ isGeolocationLoading,
+ selectedLanguage,
+ sortingBy,
+ setIsLeftWidgetOpen,
+ setLocalSelectedSightId,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+ routeSights,
+ routeSightsEn,
+ routeSightsZh,
+ ]);
+
+ const measureSelectedSight = () => {
+ if (localSelectedSightId && onSightTopChange) {
+ const element = document.getElementById(
+ `sight-${localSelectedSightId}`,
+ );
+ if (element && containerRef.current) {
+ const elementRect = element.getBoundingClientRect();
+ const containerRect = containerRef.current.getBoundingClientRect();
+
+ // Используем позицию элемента относительно viewport (elementRect.top)
+ // чтобы верхняя граница виджета совпадала с верхней границей элемента
+ const elementTop = elementRect.top;
+ onSightTopChange(elementTop);
+ } else {
+ console.warn(
+ "[SightsList] Element or container not found:",
+ `sight-${localSelectedSightId}`,
+ { element: !!element, container: !!containerRef.current },
+ );
+ }
+ }
+ };
+
+ useEffect(() => {
+ if (!localSelectedSightId) return;
+
+ // Run measurement after render/update
+ // Используем requestAnimationFrame для точности измерения после рендеринга
+ const timer = setTimeout(() => {
+ requestAnimationFrame(() => {
+ requestAnimationFrame(measureSelectedSight);
+ });
+ }, 0);
+
+ return () => clearTimeout(timer);
+ }, [localSelectedSightId, sightList, className]);
+
+ const handleSightClick = (sightId) => {
+ // Если кликнули на уже выбранную достопримечательность — закрываем виджет и сбрасываем цвет
+ if (isLeftWidgetOpen && localSelectedSightId === sightId) {
+ setLocalSelectedSightId(null);
+ setIsLeftWidgetOpen(false);
+ return;
+ }
+ // Открываем левый виджет
+ setLocalSelectedSightId(sightId);
+ setIsLeftWidgetOpen(true);
+ if (onSightSelected) {
+ onSightSelected(sightId);
+ }
+ };
+
+ const handleClose = () => {
+ setIsLeftWidgetOpen(false);
+ setWeatherVisible(true);
+ onCloseSights();
+ };
+
+ return (
+ handlePointerDown(e, sight.id)}
+ onPointerUp={(e) => handlePointerUp(e, sight.id, handleClick)}
+ className="side-menu-sight pointer"
+ >
+
+ {sightName}
+
+
+
+
+ {station.name}
+
+ );
+ })
+ ) : (
+
+ {selectedLanguage === "ru"
+ ? "Нет остановок"
+ : selectedLanguage === "zh"
+ ? "没有站"
+ : "No stations"}
+
+ )}
+
+
+ {isSightListLoading ? (
+
+
+ );
+ },
+ ),
+);
+
+export default SightsList;
diff --git a/src/client/src/components/side-menu/StationSightsList.jsx b/src/client/src/components/side-menu/StationSightsList.jsx
new file mode 100644
index 0000000..0298231
--- /dev/null
+++ b/src/client/src/components/side-menu/StationSightsList.jsx
@@ -0,0 +1,312 @@
+import {
+ useEffect,
+ useState,
+ forwardRef,
+ useRef,
+ useLayoutEffect,
+} from "react";
+import { observer } from "mobx-react-lite";
+import { useGeolocationStore } from "../../stores";
+import { apiStore } from "../../api/ApiStore/store";
+import { useClickDetection } from "../../hooks/useClickDetection";
+import { OverlayScrollbarsWrapper } from "../OverlayScrollbarsWrapper";
+import "../../styles/OverlayScrollbars.css";
+import { getStationSights } from "../../api/ApiStore/api";
+
+const SightItem = ({
+ sight,
+ handlePointerDown,
+ handlePointerUp,
+ handleSightClick,
+ localSelectedSightId,
+ selectedLanguage,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+}) => {
+ const containerRef = useRef(null);
+ const textRef = useRef(null);
+ const [shouldAnimate, setShouldAnimate] = useState(false);
+
+ // Получаем название из left_article или используем short_name/name
+ const getSightName = () => {
+ if (!sight.left_article) {
+ return sight.short_name || sight.name;
+ }
+
+ const leftArticleData =
+ selectedLanguage === "ru"
+ ? sightArticles.get(sight.left_article + "_ru")
+ : selectedLanguage === "en"
+ ? sightArticlesEn.get(sight.left_article + "_en")
+ : sightArticlesZh.get(sight.left_article + "_zh");
+
+ return leftArticleData?.heading || sight.short_name || sight.name;
+ };
+
+ const sightName = getSightName();
+
+ useLayoutEffect(() => {
+ const checkWidth = () => {
+ if (containerRef.current && textRef.current) {
+ const containerWidth = containerRef.current.offsetWidth;
+ const textWidth = textRef.current.scrollWidth;
+ const threshold = containerWidth;
+ setShouldAnimate(textWidth > threshold);
+ }
+ };
+
+ checkWidth();
+ window.addEventListener("resize", checkWidth);
+ return () => window.removeEventListener("resize", checkWidth);
+ }, [sightName]);
+
+ return (
+ {
+ handleClose();
+ }}
+ >
+
+ + {" "} + {selectedLanguage === "ru" + ? "Достопримечательности" + : selectedLanguage === "zh" + ? "景点" + : "Attractions"} +
+ + +
+ {selectedLanguage === "ru"
+ ? "Загрузка..."
+ : selectedLanguage === "zh"
+ ? "正在加载..."
+ : "Loading..."}
+
+ ) : error ? (
+ {error}
+ ) : sightList.length === 0 ? (
+
+ {selectedLanguage === "ru"
+ ? "Ничего не найдено"
+ : selectedLanguage === "zh"
+ ? "没有找到"
+ : "Nothing found"}
+
+ ) : (
+ sightList.map((sight) => (
+ handlePointerDown(e, sight.id)}
+ onPointerUp={(e) => handlePointerUp(e, sight.id, handleSightClick)}
+ className={`side-menu-sight pointer ${
+ localSelectedSightId === sight.id ? "selected" : ""
+ }`}
+ >
+
+ {sightName}
+
+
+ );
+};
+
+const StationSightsList = observer(
+ forwardRef(
+ (
+ {
+ style,
+ className,
+ onClose,
+ stationId,
+ selectedLanguage,
+ setLocalSelectedSightId,
+ setIsLeftWidgetOpen,
+ isLeftWidgetOpen,
+ localSelectedSightId,
+ onSightTopChange,
+ onSightSelected,
+ },
+ ref
+ ) => {
+ const { sightArticles, sightArticlesEn, sightArticlesZh } = apiStore;
+ const [sightList, setSightList] = useState([]);
+ const [error, setError] = useState(null);
+ const [isSightListLoading, setIsSightListLoading] = useState(true);
+
+ const { handlePointerDown, handlePointerUp, handleScroll } =
+ useClickDetection();
+
+ useEffect(() => {
+ async function fetchSightList() {
+ if (!stationId) {
+ setIsSightListLoading(false);
+ return;
+ }
+
+ setIsSightListLoading(true);
+ setError(null);
+ try {
+ const response = await getStationSights(
+ stationId,
+ selectedLanguage
+ );
+
+ const getSightNameForSort = (sight) => {
+ if (!sight.left_article) {
+ return (sight.short_name || sight.name).trim();
+ }
+
+ const leftArticleData =
+ selectedLanguage === "ru"
+ ? sightArticles.get(sight.left_article + "_ru")
+ : selectedLanguage === "en"
+ ? sightArticlesEn.get(sight.left_article + "_en")
+ : sightArticlesZh.get(sight.left_article + "_zh");
+
+ return (leftArticleData?.heading || sight.short_name || sight.name).trim();
+ };
+
+ const sortedSights = [...(response || [])].sort((a, b) => {
+ const nameA = getSightNameForSort(a);
+ const nameB = getSightNameForSort(b);
+
+ return nameA.localeCompare(
+ nameB,
+ selectedLanguage === "ru"
+ ? "ru"
+ : selectedLanguage === "zh"
+ ? "zh"
+ : "en",
+ {
+ sensitivity: "base",
+ }
+ );
+ });
+ setSightList(sortedSights);
+ } catch (err) {
+ setError(
+ "Не удалось получить достопримечательности. Пожалуйста, попробуйте позже."
+ );
+ setSightList([]);
+ } finally {
+ setIsSightListLoading(false);
+ }
+ }
+
+ fetchSightList();
+ }, [
+ stationId,
+ selectedLanguage,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+ ]);
+
+ const measureSelectedSight = () => {
+ if (localSelectedSightId && onSightTopChange) {
+ const element = document.getElementById(
+ `sight-${localSelectedSightId}`
+ );
+ if (element) {
+ const rect = element.getBoundingClientRect();
+ onSightTopChange(rect.top);
+ }
+ }
+ };
+
+ useEffect(() => {
+ const timer = setTimeout(measureSelectedSight, 0);
+ return () => clearTimeout(timer);
+ }, [localSelectedSightId, sightList]);
+
+ const handleSightClick = (sightId) => {
+ // Открываем левый виджет
+ if (isLeftWidgetOpen && localSelectedSightId !== sightId) {
+ setTimeout(() => {
+ setLocalSelectedSightId(sightId);
+ setIsLeftWidgetOpen(true);
+ if (onSightSelected) {
+ onSightSelected(sightId);
+ }
+ }, 0);
+ } else if (!isLeftWidgetOpen) {
+ setLocalSelectedSightId(sightId);
+ setIsLeftWidgetOpen(true);
+ if (onSightSelected) {
+ onSightSelected(sightId);
+ }
+ } else {
+ if (onSightSelected) {
+ onSightSelected(sightId);
+ }
+ }
+ };
+
+ return (
+
+ {
+ handleScroll(e);
+ measureSelectedSight();
+ }}
+ >
+ {isSightListLoading ? (
+
+
+ );
+ }
+ )
+);
+
+export default StationSightsList;
+nSightsList;
diff --git a/src/client/src/components/side-menu/StationsList.jsx b/src/client/src/components/side-menu/StationsList.jsx
new file mode 100644
index 0000000..9d9cf4b
--- /dev/null
+++ b/src/client/src/components/side-menu/StationsList.jsx
@@ -0,0 +1,384 @@
+import {
+ useEffect,
+ useState,
+ forwardRef,
+ useRef,
+ useLayoutEffect,
+} from "react";
+import { observer } from "mobx-react-lite";
+import { useGeolocationStore } from "../../stores";
+import { apiStore } from "../../api/ApiStore/store";
+import { useClickDetection } from "../../hooks/useClickDetection";
+import { TouchableLayout } from "../TouchableLayout";
+import Collapsible from "./Collapsible";
+
+const SightTransferItem = ({ name, style, onPointerUp }) => {
+ const containerRef = useRef(null);
+ const textRef = useRef(null);
+ const [shouldAnimate, setShouldAnimate] = useState(false);
+
+ useLayoutEffect(() => {
+ const checkWidth = () => {
+ if (containerRef.current && textRef.current) {
+ const containerWidth = containerRef.current.offsetWidth;
+ const textWidth = textRef.current.scrollWidth;
+ const shouldAnimateValue = textWidth > containerWidth;
+ setShouldAnimate(shouldAnimateValue);
+ if (shouldAnimateValue) {
+ containerRef.current.style.setProperty("--container-width", `${containerWidth}px`);
+ }
+ }
+ };
+ checkWidth();
+ window.addEventListener("resize", checkWidth);
+ return () => window.removeEventListener("resize", checkWidth);
+ }, [name]);
+
+ return (
+ {
+ if (onClose) {
+ onClose();
+ }
+ }}
+ >
+
+ + {selectedLanguage === "ru" + ? "Достопримечательности" + : selectedLanguage === "zh" + ? "景点" + : "Attractions"} +
+ +
+ {selectedLanguage === "ru"
+ ? "Загрузка..."
+ : selectedLanguage === "zh"
+ ? "正在加载..."
+ : "Loading..."}
+
+ ) : error ? (
+ {error}
+ ) : sightList.length === 0 ? (
+
+ {selectedLanguage === "ru"
+ ? "Ничего не найдено"
+ : selectedLanguage === "zh"
+ ? "没有找到"
+ : "Nothing found"}
+
+ ) : (
+ sightList.map((sight) => (
+
+
+ {name}
+
+
+ );
+};
+
+const StationItem = ({
+ station,
+ handlePointerDown,
+ handlePointerUp,
+ handleStationClick,
+ selectedStationId,
+ selectedLanguage,
+ stationSightsCache,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+ onSightClick,
+}) => {
+ const containerRef = useRef(null);
+ const textRef = useRef(null);
+ const [shouldAnimate, setShouldAnimate] = useState(false);
+
+ useLayoutEffect(() => {
+ const checkWidth = () => {
+ if (containerRef.current && textRef.current) {
+ const containerWidth = containerRef.current.offsetWidth;
+ const textWidth = textRef.current.scrollWidth;
+ const threshold = containerWidth * 1.1; // 110% от ширины контейнера
+ const shouldAnimateValue = textWidth > threshold;
+ setShouldAnimate(shouldAnimateValue);
+
+ // Устанавливаем CSS переменную для анимации
+ if (shouldAnimateValue && containerRef.current) {
+ containerRef.current.style.setProperty(
+ "--container-width",
+ `${containerWidth}px`,
+ );
+ }
+ }
+ };
+
+ checkWidth();
+ window.addEventListener("resize", checkWidth);
+ return () => window.removeEventListener("resize", checkWidth);
+ }, [station.name]);
+
+ const cacheKey = `${station.id}_${selectedLanguage}`;
+ const sights = stationSightsCache.get(cacheKey) || [];
+
+ const getSightName = (sight) => {
+ return sight.short_name || sight.name;
+ };
+
+ return (
+
+
+ {sights.length > 0 ? (
+ sights.map((sight, index) => (
+ {
+ e.stopPropagation();
+ if (onSightClick) {
+ const elementRect = e.currentTarget.getBoundingClientRect();
+ onSightClick(sight.id, elementRect.top);
+ }
+ }}
+ />
+ ))
+ ) : (
+
+
+ );
+};
+
+const StationsList = observer(
+ forwardRef(
+ (
+ {
+ style,
+ className,
+ onCloseStation,
+ isOpen,
+ onStationSelected,
+ onSightClick,
+ setWeatherVisible,
+ },
+ ref,
+ ) => {
+ const containerRef = useRef(null);
+ const store = useGeolocationStore();
+ const {
+ contextData,
+ isLoading: isGeolocationLoading,
+ selectedLanguage,
+ isLeftWidgetOpen,
+ setIsLeftWidgetOpen,
+ } = store;
+ const [stationList, setStationList] = useState([]);
+ const [error, setError] = useState(null);
+ const [isStationListLoading, setIsStationListLoading] = useState(true);
+ const [selectedStationId, setSelectedStationId] = useState(null);
+
+ useLayoutEffect(() => {
+ if (containerRef.current) {
+ if (className === "slide-in") {
+ // Применяем стили для slide-in
+ requestAnimationFrame(() => {
+ if (containerRef.current) {
+ containerRef.current.style.transform = "translateY(0)";
+ containerRef.current.style.opacity = "1";
+ }
+ });
+ } else if (className === "slide-out") {
+ // Очищаем inline стили, чтобы CSS transition работал
+ containerRef.current.style.transform = "";
+ // Принудительно применяем reflow для запуска transition
+ void containerRef.current.offsetHeight;
+ }
+ }
+ }, [className]);
+ const {
+ routeStations,
+ routeStationsEn,
+ routeStationsZh,
+ stationSightsCache,
+ sightArticles,
+ sightArticlesEn,
+ sightArticlesZh,
+ } = apiStore;
+
+ const { handlePointerDown, handlePointerUp, handleScroll } =
+ useClickDetection();
+
+ useEffect(() => {
+ async function fetchStationList() {
+ setIsStationListLoading(true);
+ setError(null);
+ try {
+ const response =
+ selectedLanguage === "ru"
+ ? routeStations
+ : selectedLanguage === "en"
+ ? routeStationsEn
+ : routeStationsZh;
+
+ // Сортировка по умолчанию по возрастанию (не зависит от sortingBy)
+ const sortedStations = [...(response || [])].sort((a, b) => {
+ const nameA = a.name.trim();
+ const nameB = b.name.trim();
+
+ return nameA.localeCompare(
+ nameB,
+ selectedLanguage === "ru"
+ ? "ru"
+ : selectedLanguage === "zh"
+ ? "zh"
+ : "en",
+ {
+ sensitivity: "base",
+ },
+ );
+ });
+
+ setStationList(sortedStations);
+ } catch (err) {
+ setError(
+ "Не удалось получить остановки. Пожалуйста, попробуйте позже.",
+ );
+ setStationList([]);
+ } finally {
+ setIsStationListLoading(false);
+ }
+ }
+
+ fetchStationList();
+ }, [
+ contextData?.routeId,
+ isGeolocationLoading,
+ selectedLanguage,
+ routeStations,
+ routeStationsEn,
+ routeStationsZh,
+ ]);
+
+ const handleStationClick = (stationId) => {
+ const newSelectedId =
+ selectedStationId === stationId ? null : stationId;
+ setSelectedStationId(newSelectedId);
+
+ // Если остановка выбрана, вызываем callback для открытия списка достопримечательностей
+ if (newSelectedId !== null && onStationSelected) {
+ onStationSelected(newSelectedId);
+ }
+ };
+
+ const handleClose = () => {
+ setIsLeftWidgetOpen(false);
+ setWeatherVisible(true);
+ onCloseStation();
+ };
+
+ return (
+ handlePointerDown(e, station.id)}
+ onPointerUp={(e) => {
+ // Если у станции нет достопримечательностей, не открываем список
+ if (sights.length > 0) {
+ handlePointerUp(e, station.id, () =>
+ handleStationClick(station.id),
+ );
+ }
+ }}
+ >
+
+ {station.name}
+
+
+
+ {selectedLanguage === "ru"
+ ? "Нет достопримечательностей"
+ : selectedLanguage === "zh"
+ ? "没有景点"
+ : "No sights"}
+
+ )}
+
+
+ {isStationListLoading ? (
+
+
+ );
+ },
+ ),
+);
+
+export default StationsList;
diff --git a/src/client/src/components/widgets/AppealWidget.jsx b/src/client/src/components/widgets/AppealWidget.jsx
new file mode 100644
index 0000000..06c91cb
--- /dev/null
+++ b/src/client/src/components/widgets/AppealWidget.jsx
@@ -0,0 +1,50 @@
+import { useRef, useEffect } from "react";
+import "../../styles/AppealWidget.css";
+import { TouchableLayout } from "../TouchableLayout";
+import { ReactMarkdownComponent } from "../ReactMarkdown";
+
+function AppealWidget({
+ widgetImgPath,
+ widgetLabel,
+ widgetText,
+ style,
+ isOpen,
+}) {
+ const stopProp = (e) => {
+ e.stopPropagation();
+ e.preventDefault();
+ };
+ const layoutRef = useRef(null);
+
+ useEffect(() => {
+ if (isOpen && layoutRef.current) {
+ const scrollable = layoutRef.current.querySelector(".scrollable");
+ if (scrollable) scrollable.scrollTop = 0;
+ }
+ }, [isOpen]);
+
+ return (
+ {
+ handleClose();
+ }}
+ >
+
+ + {selectedLanguage === "ru" + ? "Остановки" + : selectedLanguage === "zh" + ? "车站" + : "Stations"} +
+ +
+ {selectedLanguage === "ru"
+ ? "Загрузка остановок..."
+ : selectedLanguage === "zh"
+ ? "加载停止..."
+ : "Loading stops..."}
+
+ ) : error ? (
+ {error}
+ ) : stationList.length === 0 ? (
+
+ {selectedLanguage === "ru"
+ ? "Остановки не найдены"
+ : selectedLanguage === "zh"
+ ? "没有找到停靠站"
+ : "No stops found"}
+
+ ) : (
+ stationList.map((station) => (
+
+ {widgetImgPath && (
+ 
+ )}
+
+
+
+ );
+}
+
+export default AppealWidget;
diff --git a/src/client/src/components/widgets/PanoramView.tsx b/src/client/src/components/widgets/PanoramView.tsx
new file mode 100644
index 0000000..5116112
--- /dev/null
+++ b/src/client/src/components/widgets/PanoramView.tsx
@@ -0,0 +1,147 @@
+import React from "react";
+import { Viewer, ViewerConfig, AnimateOptions, CssSize, ExtendedPosition, UpdatableViewerConfig, events, PluginConstructor, NavbarCustomButton, TooltipConfig, Tooltip, Position, Size, PanoramaOptions, utils, AbstractPlugin } from "@photo-sphere-viewer/core";
+import "./styles.css";
+import "@photo-sphere-viewer/core/index.css";
+
+type MakeOptional{widgetLabel}
+
+
+
+
+ );
+});
+
+export default RouteWidget;
diff --git a/src/client/src/components/widgets/ThreeView.tsx b/src/client/src/components/widgets/ThreeView.tsx
new file mode 100644
index 0000000..2a4c634
--- /dev/null
+++ b/src/client/src/components/widgets/ThreeView.tsx
@@ -0,0 +1,345 @@
+import { Canvas, useThree, useFrame } from "@react-three/fiber";
+import { OrbitControls, Center, useGLTF } from "@react-three/drei";
+import React, { useEffect, useRef, Suspense, useCallback } from "react";
+import { BACKGROUND_COLOR } from "../../assets/Constants";
+import * as THREE from "three";
+import type { OrbitControls as OrbitControlsImpl } from "three-stdlib";
+
+export interface ThreeViewHandle {
+ zoomIn: () => void;
+ zoomOut: () => void;
+}
+
+interface ThreeViewProps {
+ fileUrl: string;
+ width?: string;
+ height?: string;
+ onLoad?: () => void;
+ onError?: (error: string) => void;
+ onAspectRatioCalculated?: (ratio: number) => void;
+ controlRef?: React.MutableRefObject
+ {context?.routeNumber || "No number"}
+
+
+
+
+ {startStation?.name}
+
+
+ {endStation?.name}
+
+ {(selectedLanguage === "en" || selectedLanguage === "ru") && (
+
+ {routeEnSubtitle}
+
+ )}
+ {selectedLanguage === "zh" && (
+
+ {routeZhSubtitle}
+
+ )}
+
+ {!isReady && (
+
+ )}
+
+
+ );
+};
diff --git a/src/client/src/components/widgets/ThreeViewIcons.tsx b/src/client/src/components/widgets/ThreeViewIcons.tsx
new file mode 100644
index 0000000..d81ab04
--- /dev/null
+++ b/src/client/src/components/widgets/ThreeViewIcons.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+
+export const MinusIcon: React.FC
+ {showVideo && activeSightId && (
+
,
+ document.body,
+ );
+});
+
+export default VideoPreviewWidget;
diff --git a/src/client/src/context/GeolocationContext.tsx b/src/client/src/context/GeolocationContext.tsx
new file mode 100644
index 0000000..ec63836
--- /dev/null
+++ b/src/client/src/context/GeolocationContext.tsx
@@ -0,0 +1,101 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+
+import { observer } from "mobx-react-lite";
+import { apiStore } from "../api/ApiStore/store";
+
+// Обновленный тип контекста
+type GeolocationContextType = {
+ contextData: any; // Сохраняем для других данных (например, routeId)
+ setContextData: React.Dispatch
+
+ )}
+
-
+ renderCell: (params: GridRenderCellParams) => (
+
+ ),
},
];
- const rows = articleList[language].data.map((article) => ({
- id: article.id,
- heading: article.heading,
- body: article.body,
- }));
+ const rows = useMemo(() => {
+ const query = searchQuery.trim().toLowerCase();
+ const cityId = selectedCityStore.selectedCityId;
+ return articleList[language].data
+ .filter((article) => !query || (article.heading ?? "").toLowerCase().includes(query))
+ .filter((article) => !cityId || article.city_id === cityId)
+ .map((article) => ({
+ id: article.id,
+ heading: article.heading,
+ body: article.body,
+ }));
+ }, [articleList[language].data, searchQuery, selectedCityStore.selectedCityId]);
return (
<>
@@ -83,31 +96,58 @@ export const ArticleListPage = observer(() => {
+
+ {canWriteArticles && (
-
- );
- },
+ )}
+ Статьи
- 0 ? 1 : 0 }}
- >
-
-
+ {canWriteArticles && ids.length > 0 && (
+
+
+
+ )}
+
+ {(rows.length > 0 || searchQuery) && (
+
diff --git a/src/pages/Carrier/CarrierCreatePage/index.tsx b/src/pages/Carrier/CarrierCreatePage/index.tsx
index 98e795a..fb055e1 100644
--- a/src/pages/Carrier/CarrierCreatePage/index.tsx
+++ b/src/pages/Carrier/CarrierCreatePage/index.tsx
@@ -1,6 +1,5 @@
import {
Button,
- Paper,
TextField,
Select,
MenuItem,
@@ -8,59 +7,157 @@ import {
InputLabel,
} from "@mui/material";
import { observer } from "mobx-react-lite";
-import { ArrowLeft, Save } from "lucide-react";
-import { Loader2 } from "lucide-react";
+import { ArrowLeft, Loader2, Save } from "lucide-react";
+
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import {
carrierStore,
cityStore,
+ authStore,
mediaStore,
languageStore,
+ isMediaIdEmpty,
useSelectedCity,
-} from "@shared";
-import { useState, useEffect } from "react";
-import { ImageUploadCard, LanguageSwitcher } from "@widgets";
-import {
+ selectedCityStore,
SelectMediaDialog,
UploadMediaDialog,
PreviewMediaDialog,
+ editSightStore,
} from "@shared";
+import { useState, useEffect } from "react";
+import { ImageUploadCard, LanguageSwitcher, VideoPreviewCard } from "@widgets";
+
+type ColorFields = { main_color: string; left_color: string; right_color: string };
+
+const colorFields = (data: ColorFields) => ({
+ main_color: data.main_color,
+ left_color: data.left_color,
+ right_color: data.right_color,
+});
+
+const ColorPickerField = ({
+ label,
+ value,
+ onChange,
+}: {
+ label: string;
+ value: string;
+ onChange: (val: string) => void;
+}) => (
+ (null);
+ const canReadCities = authStore.canRead("cities");
+ const { selectedCityId, selectedCity } = useSelectedCity();
const [isLoading, setIsLoading] = useState(false);
const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
const [isUploadMediaOpen, setIsUploadMediaOpen] = useState(false);
const [isPreviewMediaOpen, setIsPreviewMediaOpen] = useState(false);
const [mediaId, setMediaId] = useState("");
+ const [activeMediaField, setActiveMediaField] = useState<
+ "preview_media" | "video_preview"
+ >("preview_media");
const [activeMenuType, setActiveMenuType] = useState<
- "thumbnail" | "watermark_lu" | "watermark_rd" | "image" | null
+ | "thumbnail"
+ | "watermark_lu"
+ | "watermark_rd"
+ | "image"
+ | "video_preview"
+ | null
>(null);
useEffect(() => {
- cityStore.getCities("ru");
+ selectedCityStore.setIsLocked(true);
+ return () => selectedCityStore.setIsLocked(false);
+ }, []);
+
+ useEffect(() => {
+ const fetchCities = async () => {
+ if (!authStore.me) {
+ await authStore.getMeAction().catch(() => undefined);
+ }
+ if (authStore.canRead("cities")) {
+ await cityStore.getCities("ru");
+ return;
+ }
+ await authStore.fetchMeCities().catch(() => undefined);
+ };
+
+ fetchCities();
mediaStore.getMedia();
languageStore.setLanguage("ru");
}, []);
- // Автоматически устанавливаем выбранный город при загрузке страницы
+ const baseCities = canReadCities
+ ? cityStore.cities["ru"].data
+ : authStore.meCities["ru"].map((city) => ({
+ id: city.city_id,
+ name: city.name,
+ country: "",
+ country_code: "",
+ arms: "",
+ }));
+
+ const availableCities =
+ selectedCity?.id && !baseCities.some((city) => city.id === selectedCity.id)
+ ? [selectedCity, ...baseCities]
+ : baseCities;
+
useEffect(() => {
if (selectedCityId && !createCarrierData.city_id) {
setCreateCarrierData(
createCarrierData[language].full_name,
createCarrierData[language].short_name,
selectedCityId,
- createCarrierData[language].slogan,
- selectedMediaId || "",
- language
+ language,
);
}
- }, [selectedCityId, createCarrierData.city_id]);
+ }, [
+ selectedCityId,
+ createCarrierData,
+ createCarrierData.city_id,
+ language,
+ setCreateCarrierData,
+ ]);
const handleCreate = async () => {
try {
@@ -69,7 +166,7 @@ export const CarrierCreatePage = observer(() => {
toast.success("Перевозчик успешно создан");
navigate("/carrier");
- } catch (error) {
+ } catch {
toast.error("Ошибка при создании перевозчика");
} finally {
setIsLoading(false);
@@ -82,23 +179,22 @@ export const CarrierCreatePage = observer(() => {
media_name?: string;
media_type: number;
}) => {
- setSelectedMediaId(media.id);
- setCreateCarrierData(
- createCarrierData[language].full_name,
- createCarrierData[language].short_name,
- createCarrierData.city_id,
- createCarrierData[language].slogan,
- media.id,
- language
- );
+ setCreateCarrierMedia(activeMediaField, media.id);
};
- const selectedMedia = selectedMediaId
- ? mediaStore.media.find((m) => m.id === selectedMediaId)
- : null;
+ const effectivePreviewMediaUrl = isMediaIdEmpty(
+ createCarrierData.preview_media,
+ )
+ ? null
+ : createCarrierData.preview_media;
+ const effectiveVideoPreviewId = isMediaIdEmpty(
+ createCarrierData.video_preview,
+ )
+ ? null
+ : createCarrierData.video_preview;
return (
-
+
+ onChange(e.target.value)}
+ InputProps={{
+ endAdornment: value ? (
+
+ ) : undefined,
+ }}
+ />
+
+);
export const CarrierCreatePage = observer(() => {
const navigate = useNavigate();
- const { createCarrierData, setCreateCarrierData } = carrierStore;
+ const {
+ createCarrierData,
+ setCreateCarrierData,
+ setCreateCarrierMedia,
+ } = carrierStore;
const { language } = languageStore;
- const { selectedCityId } = useSelectedCity();
- const [selectedMediaId, setSelectedMediaId] = useState
+ onChange(e.target.value)}
+ className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+ />
+
+