feat: demo page realisation

src/pages/Route/DemoPage/index.tsx

@@ -0,0 +1,26 @@
+import React, { useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { apiStore } from "../../../client/src/api/ApiStore/store";
+import App from "../../../client/src/App";
+import "../../../client/src/index.css";
+import "../../../client/src/App.css";
+
+export const DemoPage = () => {
+  const { id } = useParams<{ id: string }>();
+
+  // Устанавливаем routeId синхронно при рендере,
+  // чтобы App уже имел его при монтировании
+  if (id && apiStore.routeId !== id) {
+    apiStore.setRouteId(id);
+  }
+
+  useEffect(() => {
+    return () => {
+      apiStore.stopPositionSimulation();
+    };
+  }, []);
+
+  if (!id) return null;
+
+  return <App />;
+};

src/pages/Route/RouteListPage/index.tsx

@@ -3,7 +3,7 @@ import { ruRU } from "@mui/x-data-grid/locales";
 import { authStore, carrierStore, languageStore, routeStore, selectedCityStore, SearchInput } from "@shared";
 import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
-import { Map, Pencil, Trash2, Minus } from "lucide-react";
+import { Map, Pencil, Trash2, Minus, Monitor } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { CreateButton, DeleteModal, LanguageSwitcher } from "@widgets";
 import { Box, CircularProgress } from "@mui/material";
@@ -148,6 +148,11 @@ export const RouteListPage = observer(() => {
                 <Map size={20} className="text-purple-500" />
               </button>
             )}
+            {canShowRoutePreview && (
+              <button onClick={() => window.open(`/demo/${params.row.id}`, "_blank")}>
+                <Monitor size={20} className="text-green-500" />
+              </button>
+            )}
             {canWriteRoutes && (
               <button
                 onClick={() => {

src/pages/Route/index.ts

@@ -2,3 +2,4 @@ export * from "./RouteListPage";
 export * from "./RouteCreatePage";
 export { RoutePreview } from "./route-preview";
 export * from "./RouteEditPage";
+export * from "./DemoPage";

src/pages/Route/route-preview/Sight.tsx

@@ -89,9 +89,11 @@ export const Sight = ({ sight, id }: Readonly<SightProps>) => {
     return null;
   }
 
-  // Компенсируем масштаб для сохранения постоянного размера
+  // Компенсируем масштаб, но при зуме текст немного увеличивается
+  const clampedScale = Math.min(Math.max(scale, 1), 3);
+  const textScaleFactor = 1 + (clampedScale - 1) * 0.4;
   const compensatedSize = SIGHT_SIZE / scale;
-  const compensatedFontSize = 24 / scale;
+  const compensatedFontSize = (24 / scale) * textScaleFactor;
 
   return (
     <pixiContainer

src/pages/Route/route-preview/Station.tsx

@@ -326,8 +326,10 @@ const StationLabel = observer(
     if (!station) return null;
 
     const coordinates = coordinatesToLocal(station.latitude, station.longitude);
-    const compensatedRuFontSize = (26 * 0.75) / scale;
-    const compensatedNameFontSize = (16 * 0.75) / scale;
+    const clampedScale = Math.min(Math.max(scale, 1), 3);
+    const textScaleFactor = 1 + (clampedScale - 1) * 0.4;
+    const compensatedRuFontSize = ((26 * 0.75) / scale) * textScaleFactor;
+    const compensatedNameFontSize = ((16 * 0.75) / scale) * textScaleFactor;
 
     useEffect(() => {
       if (ruLabelRef.current && ruLabel) {

src/pages/Route/route-preview/webgl-prototype/WebGLRouteMapPrototype.tsx

@@ -2353,10 +2353,13 @@ export const WebGLRouteMapPrototype = observer(() => {
               routeData?.font_size ?? originalRouteData?.font_size ?? 100;
             const fontScale = fontSizePercent / 100;
 
-            const primaryFontSize = 16 * fontScale;
-            const secondaryFontSize = 13 * fontScale;
+            const zoomClampedScale = Math.min(Math.max(camera.scale, 1), 3);
+            const scaleFactor = 1 + (zoomClampedScale - 1) * 0.4;
 
-            const secondaryMarginTop = 5 * fontScale;
+            const primaryFontSize = 16 * fontScale * scaleFactor;
+            const secondaryFontSize = 13 * fontScale * scaleFactor;
+
+            const secondaryMarginTop = 5 * fontScale * scaleFactor;
 
             const alignmentFromData: StationAlignment =
               backendAlign === 1
@@ -2720,9 +2723,11 @@ export const WebGLRouteMapPrototype = observer(() => {
                 resizingSightIconId === sight.id);
             const iconLeft = cssX - iconSize;
             const iconTop = cssY - iconSize;
-            const labelHeight = 24;
-            const labelPadding = 6;
-            const labelFontSize = 14;
+            const sightZoomClampedScale = Math.min(Math.max(camera.scale, 1), 3);
+            const sightScaleFactor = 1 + (sightZoomClampedScale - 1) * 0.4;
+            const labelHeight = 24 * sightScaleFactor;
+            const labelPadding = 6 * sightScaleFactor;
+            const labelFontSize = 14 * sightScaleFactor;
 
             return (
               <div

src/pages/Station/StationListPage/index.tsx

@@ -9,7 +9,7 @@ import {
 } from "@shared";
 import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
-import { Pencil, Trash2, Minus, Route } from "lucide-react";
+import { Pencil, Trash2, Minus, Route, Check, X } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import {
   CreateButton,
@@ -17,10 +17,10 @@ import {
   LanguageSwitcher,
   EditStationTransfersModal,
 } from "@widgets";
-import { Box, CircularProgress } from "@mui/material";
+import { Box, CircularProgress, Tooltip } from "@mui/material";
 
 export const StationListPage = observer(() => {
-  const { stationLists, getStationList, deleteStation } = stationsStore;
+  const { stationLists, getStationList, deleteStation, sightCounts, sightCountsLoading, loadSightCounts } = stationsStore;
   const navigate = useNavigate();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [isBulkDeleteModalOpen, setIsBulkDeleteModalOpen] = useState(false);
@@ -44,6 +44,9 @@ export const StationListPage = observer(() => {
       setIsLoading(true);
       await getStationList();
       setIsLoading(false);
+
+      const stationIds = stationLists[language].data.map((s: any) => s.id);
+      loadSightCounts(stationIds);
     };
     fetchStations();
   }, [language]);
@@ -81,6 +84,52 @@ export const StationListPage = observer(() => {
         );
       },
     },
+    {
+      field: "sightCount",
+      headerName: "Достопримечательности",
+      width: 180,
+      align: "center" as const,
+      headerAlign: "center" as const,
+      sortable: true,
+      renderHeader: (params) => (
+        <Tooltip title="Количество привязанных достопримечательностей">
+          <span>{params.colDef.headerName}</span>
+        </Tooltip>
+      ),
+      renderCell: (params: GridRenderCellParams) => (
+        <div className="w-full h-full flex items-center justify-center">
+          {params.value === null ? (
+            <CircularProgress size={14} />
+          ) : (
+            params.value
+          )}
+        </div>
+      ),
+    },
+    {
+      field: "hasTransfers",
+      headerName: "Пересадки",
+      width: 120,
+      align: "center" as const,
+      headerAlign: "center" as const,
+      sortable: true,
+      renderHeader: (params) => (
+        <Tooltip title="Подтверждение добавленных пересадок">
+          <span>{params.colDef.headerName}</span>
+        </Tooltip>
+      ),
+      renderCell: (params: GridRenderCellParams) => (
+        <Box
+          sx={{ display: "flex", justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }}
+        >
+          {params.value ? (
+            <Check size={18} className="text-green-600" />
+          ) : (
+            <X size={18} className="text-red-600" />
+          )}
+        </Box>
+      ),
+    },
     {
       field: "actions",
       headerName: "Действия",
@@ -138,8 +187,12 @@ export const StationListPage = observer(() => {
         id: station.id,
         name: station.name,
         description: station.description,
+        sightCount: sightCounts.has(station.id) ? sightCounts.get(station.id) : null,
+        hasTransfers: station.transfers
+          ? Object.values(station.transfers).some((v: any) => v != null && v !== "")
+          : false,
       }));
-  }, [stationLists[language].data, selectedCityStore.selectedCityId, searchQuery]);
+  }, [stationLists[language].data, selectedCityStore.selectedCityId, searchQuery, sightCounts.size, sightCountsLoading]);
 
   return (
     <>