feat: update color carrier

2026-05-05 15:07:18 +03:00
parent e3469763ce
commit 6af95bb449
25 changed files with 620 additions and 80 deletions
--- a/src/pages/Carrier/CarrierCreatePage/index.tsx
+++ b/src/pages/Carrier/CarrierCreatePage/index.tsx
@@ -6,6 +6,8 @@ import {
  MenuItem,
  FormControl,
  InputLabel,
+  ToggleButtonGroup,
+  ToggleButton,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Loader2, Save } from "lucide-react";
@@ -27,7 +29,59 @@ import {
 import { useState, useEffect } from "react";
 import { ImageUploadCard, LanguageSwitcher } from "@widgets";

+type ColorFields = { main_color: string; left_color: string; right_color: string; rgb_color: string };
+
+const colorFields = (data: ColorFields) => ({
+  main_color: data.main_color,
+  left_color: data.left_color,
+  right_color: data.right_color,
+  rgb_color: data.rgb_color,
+});
+
+const ColorPickerField = ({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  onChange: (val: string) => void;
+}) => (
+  <div className="flex items-center gap-3 w-full">
+    <div
+      className="w-10 h-10 rounded border border-gray-300 flex-shrink-0 cursor-pointer overflow-hidden relative"
+      style={{ backgroundColor: value || "#ffffff" }}
+    >
+      <input
+        type="color"
+        value={value || "#ffffff"}
+        onChange={(e) => onChange(e.target.value)}
+        className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+      />
+    </div>
+    <TextField
+      fullWidth
+      label={label}
+      value={value}
+      placeholder="#000000"
+      onChange={(e) => onChange(e.target.value)}
+      InputProps={{
+        endAdornment: value ? (
+          <button
+            type="button"
+            onClick={() => onChange("")}
+            className="text-gray-400 hover:text-gray-600 text-xs px-1"
+          >
+            ✕
+          </button>
+        ) : undefined,
+      }}
+    />
+  </div>
+);
+
 export const CarrierCreatePage = observer(() => {
+  const [colorMode, setColorMode] = useState<"rgb" | "three">("three");
  const navigate = useNavigate();
  const { createCarrierData, setCreateCarrierData } = carrierStore;
  const { language } = languageStore;
@@ -220,6 +274,114 @@ export const CarrierCreatePage = observer(() => {
          }
        />

+        <div className="w-full flex flex-col gap-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <span className="text-sm font-medium">Режим цвета:</span>
+            <ToggleButtonGroup
+              size="small"
+              exclusive
+              value={colorMode}
+              onChange={(_, val) => {
+                if (!val) return;
+                setColorMode(val);
+                if (val === "rgb") {
+                  setCreateCarrierData(
+                    createCarrierData[language].full_name,
+                    createCarrierData[language].short_name,
+                    createCarrierData.city_id,
+                    createCarrierData[language].slogan,
+                    selectedMediaId || "",
+                    language,
+                    { main_color: "", left_color: "", right_color: "", rgb_color: createCarrierData.rgb_color }
+                  );
+                } else {
+                  setCreateCarrierData(
+                    createCarrierData[language].full_name,
+                    createCarrierData[language].short_name,
+                    createCarrierData.city_id,
+                    createCarrierData[language].slogan,
+                    selectedMediaId || "",
+                    language,
+                    { main_color: createCarrierData.main_color, left_color: createCarrierData.left_color, right_color: createCarrierData.right_color, rgb_color: "" }
+                  );
+                }
+              }}
+            >
+              <ToggleButton value="rgb">Один цвет</ToggleButton>
+              <ToggleButton value="three">Три цвета</ToggleButton>
+            </ToggleButtonGroup>
+            </div>
+            <span className="text-xs text-gray-400">* при переключении цвет сбрасывается</span>
+          </div>
+
+          {colorMode === "rgb" ? (
+            <ColorPickerField
+              label="Один цвет"
+              value={createCarrierData.rgb_color}
+              onChange={(val) =>
+                setCreateCarrierData(
+                  createCarrierData[language].full_name,
+                  createCarrierData[language].short_name,
+                  createCarrierData.city_id,
+                  createCarrierData[language].slogan,
+                  selectedMediaId || "",
+                  language,
+                  { ...colorFields(createCarrierData), rgb_color: val }
+                )
+              }
+            />
+          ) : (
+            <>
+              <ColorPickerField
+                label="Основной цвет"
+                value={createCarrierData.main_color}
+                onChange={(val) =>
+                  setCreateCarrierData(
+                    createCarrierData[language].full_name,
+                    createCarrierData[language].short_name,
+                    createCarrierData.city_id,
+                    createCarrierData[language].slogan,
+                    selectedMediaId || "",
+                    language,
+                    { ...colorFields(createCarrierData), main_color: val }
+                  )
+                }
+              />
+              <ColorPickerField
+                label="Левый цвет"
+                value={createCarrierData.left_color}
+                onChange={(val) =>
+                  setCreateCarrierData(
+                    createCarrierData[language].full_name,
+                    createCarrierData[language].short_name,
+                    createCarrierData.city_id,
+                    createCarrierData[language].slogan,
+                    selectedMediaId || "",
+                    language,
+                    { ...colorFields(createCarrierData), left_color: val }
+                  )
+                }
+              />
+              <ColorPickerField
+                label="Правый цвет"
+                value={createCarrierData.right_color}
+                onChange={(val) =>
+                  setCreateCarrierData(
+                    createCarrierData[language].full_name,
+                    createCarrierData[language].short_name,
+                    createCarrierData.city_id,
+                    createCarrierData[language].slogan,
+                    selectedMediaId || "",
+                    language,
+                    { ...colorFields(createCarrierData), right_color: val }
+                  )
+                }
+              />
+            </>
+          )}
+        </div>
+
        <div className="w-full flex flex-col gap-4 max-w-[300px] mx-auto">
          <ImageUploadCard
            title="Логотип перевозчика"
--- a/src/pages/Carrier/CarrierEditPage/index.tsx
+++ b/src/pages/Carrier/CarrierEditPage/index.tsx
@@ -7,6 +7,8 @@ import {
  FormControl,
  InputLabel,
  Box,
+  ToggleButtonGroup,
+  ToggleButton,
 } from "@mui/material";
 import { observer } from "mobx-react-lite";
 import { ArrowLeft, Save } from "lucide-react";
@@ -30,6 +32,57 @@ import {
  UploadMediaDialog,
 } from "@shared";

+type ColorFields = { main_color: string; left_color: string; right_color: string; rgb_color: string };
+
+const colorFields = (data: ColorFields) => ({
+  main_color: data.main_color,
+  left_color: data.left_color,
+  right_color: data.right_color,
+  rgb_color: data.rgb_color,
+});
+
+const ColorPickerField = ({
+  label,
+  value,
+  onChange,
+}: {
+  label: string;
+  value: string;
+  onChange: (val: string) => void;
+}) => (
+  <div className="flex items-center gap-3 w-full">
+    <div
+      className="w-10 h-10 rounded border border-gray-300 flex-shrink-0 cursor-pointer overflow-hidden relative"
+      style={{ backgroundColor: value || "#ffffff" }}
+    >
+      <input
+        type="color"
+        value={value || "#ffffff"}
+        onChange={(e) => onChange(e.target.value)}
+        className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+      />
+    </div>
+    <TextField
+      fullWidth
+      label={label}
+      value={value}
+      placeholder="#000000"
+      onChange={(e) => onChange(e.target.value)}
+      InputProps={{
+        endAdornment: value ? (
+          <button
+            type="button"
+            onClick={() => onChange("")}
+            className="text-gray-400 hover:text-gray-600 text-xs px-1"
+          >
+            ✕
+          </button>
+        ) : undefined,
+      }}
+    />
+  </div>
+);
+
 export const CarrierEditPage = observer(() => {
  const navigate = useNavigate();
  const { id } = useParams();
@@ -37,6 +90,7 @@ export const CarrierEditPage = observer(() => {
  const { language } = languageStore;
  const canReadCities = authStore.canRead("cities");

+  const [colorMode, setColorMode] = useState<"rgb" | "three">("rgb");
  const [isLoading, setIsLoading] = useState(false);
  const [isLoadingData, setIsLoadingData] = useState(true);
  const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
@@ -68,13 +122,25 @@ export const CarrierEditPage = observer(() => {
        const carrierData = await getCarrier(Number(id));

        if (carrierData) {
+          const colors = {
+            main_color: carrierData.ru?.main_color || "",
+            left_color: carrierData.ru?.left_color || "",
+            right_color: carrierData.ru?.right_color || "",
+            rgb_color: carrierData.ru?.rgb_color || "",
+          };
+          if (colors.rgb_color) {
+            setColorMode("rgb");
+          } else {
+            setColorMode("three");
+          }
          setEditCarrierData(
            carrierData.ru?.full_name || "",
            carrierData.ru?.short_name || "",
            carrierData.ru?.city_id || 0,
            carrierData.ru?.slogan || "",
            carrierData.ru?.logo || "",
-            "ru"
+            "ru",
+            colors
          );
          setEditCarrierData(
            carrierData.en?.full_name || "",
@@ -273,6 +339,114 @@ export const CarrierEditPage = observer(() => {
          }
        />

+        <div className="w-full flex flex-col gap-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <span className="text-sm font-medium">Режим цвета:</span>
+            <ToggleButtonGroup
+              size="small"
+              exclusive
+              value={colorMode}
+              onChange={(_, val) => {
+                if (!val) return;
+                setColorMode(val);
+                if (val === "rgb") {
+                  setEditCarrierData(
+                    editCarrierData[language].full_name,
+                    editCarrierData[language].short_name,
+                    editCarrierData.city_id,
+                    editCarrierData[language].slogan,
+                    editCarrierData.logo,
+                    language,
+                    { main_color: "", left_color: "", right_color: "", rgb_color: editCarrierData.rgb_color }
+                  );
+                } else {
+                  setEditCarrierData(
+                    editCarrierData[language].full_name,
+                    editCarrierData[language].short_name,
+                    editCarrierData.city_id,
+                    editCarrierData[language].slogan,
+                    editCarrierData.logo,
+                    language,
+                    { main_color: editCarrierData.main_color, left_color: editCarrierData.left_color, right_color: editCarrierData.right_color, rgb_color: "" }
+                  );
+                }
+              }}
+            >
+              <ToggleButton value="rgb">Один цвет</ToggleButton>
+              <ToggleButton value="three">Три цвета</ToggleButton>
+            </ToggleButtonGroup>
+            </div>
+            <span className="text-xs text-gray-400">* при переключении цвет сбрасывается</span>
+          </div>
+
+          {colorMode === "rgb" ? (
+            <ColorPickerField
+              label="Один цвет"
+              value={editCarrierData.rgb_color}
+              onChange={(val) =>
+                setEditCarrierData(
+                  editCarrierData[language].full_name,
+                  editCarrierData[language].short_name,
+                  editCarrierData.city_id,
+                  editCarrierData[language].slogan,
+                  editCarrierData.logo,
+                  language,
+                  { ...colorFields(editCarrierData), rgb_color: val }
+                )
+              }
+            />
+          ) : (
+            <>
+              <ColorPickerField
+                label="Основной цвет"
+                value={editCarrierData.main_color}
+                onChange={(val) =>
+                  setEditCarrierData(
+                    editCarrierData[language].full_name,
+                    editCarrierData[language].short_name,
+                    editCarrierData.city_id,
+                    editCarrierData[language].slogan,
+                    editCarrierData.logo,
+                    language,
+                    { ...colorFields(editCarrierData), main_color: val }
+                  )
+                }
+              />
+              <ColorPickerField
+                label="Левый цвет"
+                value={editCarrierData.left_color}
+                onChange={(val) =>
+                  setEditCarrierData(
+                    editCarrierData[language].full_name,
+                    editCarrierData[language].short_name,
+                    editCarrierData.city_id,
+                    editCarrierData[language].slogan,
+                    editCarrierData.logo,
+                    language,
+                    { ...colorFields(editCarrierData), left_color: val }
+                  )
+                }
+              />
+              <ColorPickerField
+                label="Правый цвет"
+                value={editCarrierData.right_color}
+                onChange={(val) =>
+                  setEditCarrierData(
+                    editCarrierData[language].full_name,
+                    editCarrierData[language].short_name,
+                    editCarrierData.city_id,
+                    editCarrierData[language].slogan,
+                    editCarrierData.logo,
+                    language,
+                    { ...colorFields(editCarrierData), right_color: val }
+                  )
+                }
+              />
+            </>
+          )}
+        </div>
+
        <div className="w-full flex flex-col gap-4 max-w-[300px] mx-auto">
          <ImageUploadCard
            title="Логотип перевозчика"
--- a/src/pages/City/CityCreatePage/index.tsx
+++ b/src/pages/City/CityCreatePage/index.tsx
@@ -21,12 +21,19 @@ import {
  SelectMediaDialog,
  UploadMediaDialog,
  PreviewMediaDialog,
+  selectedCityStore,
 } from "@shared";
 import { useState, useEffect } from "react";
 import { LanguageSwitcher, ImageUploadCard } from "@widgets";

 export const CityCreatePage = observer(() => {
  const navigate = useNavigate();
+
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
  const { language } = languageStore;
  const { createCityData, setCreateCityData, setCreateCityWeatherCode } =
    cityStore;
--- a/src/pages/City/CityEditPage/index.tsx
+++ b/src/pages/City/CityEditPage/index.tsx
@@ -23,12 +23,19 @@ import {
  SelectMediaDialog,
  UploadMediaDialog,
  PreviewMediaDialog,
+  selectedCityStore,
 } from "@shared";
 import { useEffect, useState } from "react";
 import { LanguageSwitcher, ImageUploadCard } from "@widgets";

 export const CityEditPage = observer(() => {
  const navigate = useNavigate();
+
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
  const [isLoading, setIsLoading] = useState(false);
  const [isLoadingData, setIsLoadingData] = useState(true);
  const [isSelectMediaOpen, setIsSelectMediaOpen] = useState(false);
--- a/src/pages/City/CityListPage/index.tsx
+++ b/src/pages/City/CityListPage/index.tsx
@@ -1,6 +1,6 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { ruRU } from "@mui/x-data-grid/locales";
-import { authStore, languageStore, cityStore, countryStore, SearchInput } from "@shared";
+import { authStore, languageStore, cityStore, countryStore, selectedCityStore, SearchInput } from "@shared";
 import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { Pencil, Trash2, Minus } from "lucide-react";
@@ -59,16 +59,21 @@ export const CityListPage = observer(() => {
  }, [cities, countryStore.countries, language, isLoading]);

  const filteredRows = useMemo(() => {
+    const { selectedCityId } = selectedCityStore;
+    if (!selectedCityId) return [];
+    
    const query = searchQuery.trim().toLowerCase();
-    if (!query) return rows;
-    return rows.filter((row) => {
+    const result = rows.filter((row) => row.id === selectedCityId);
+
+    if (!query) return result;
+    return result.filter((row) => {
      const cityName = (row.name ?? "").toLowerCase();
      const countryName = (
        countryStore.countries[language]?.data?.find((c) => c.code === row.country)?.name ?? ""
      ).toLowerCase();
      return cityName.includes(query) || countryName.includes(query);
    });
-  }, [rows, searchQuery, countryStore.countries, language]);
+  }, [rows, searchQuery, countryStore.countries, language, selectedCityStore.selectedCityId]);

  const columns: GridColDef[] = [
    {
@@ -139,7 +144,11 @@ export const CityListPage = observer(() => {
        <div className="flex justify-between items-center mb-10">
          <h1 className="text-2xl">Города</h1>
          {canWriteCities && (
-            <CreateButton label="Создать город" path="/city/create" />
+            <CreateButton 
+              label="Создать город" 
+              path="/city/create" 
+              disabled={!selectedCityStore.selectedCityId}
+            />
          )}
        </div>

@@ -195,7 +204,13 @@ export const CityListPage = observer(() => {
          slots={{
            noRowsOverlay: () => (
              <Box sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}>
-                {isLoading ? <CircularProgress size={20} /> : "Нет городов"}
+                {isLoading ? (
+                  <CircularProgress size={20} />
+                ) : !selectedCityStore.selectedCityId ? (
+                  "Выберите город"
+                ) : (
+                  "Нет городов"
+                )}
              </Box>
            ),
          }}
--- a/src/pages/Country/CountryAddPage/index.tsx
+++ b/src/pages/Country/CountryAddPage/index.tsx
@@ -15,11 +15,18 @@ import {
  RU_COUNTRIES,
  EN_COUNTRIES,
  ZH_COUNTRIES,
+  selectedCityStore,
 } from "@shared";
-import { useState } from "react";
+import { useState, useEffect } from "react";

 export const CountryAddPage = observer(() => {
  const navigate = useNavigate();
+
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
  const [isLoading, setIsLoading] = useState(false);
  const { createCountryData, setCountryData, createCountry } = countryStore;

--- a/src/pages/Country/CountryCreatePage/index.tsx
+++ b/src/pages/Country/CountryCreatePage/index.tsx
@@ -4,12 +4,18 @@ import { ArrowLeft, Save } from "lucide-react";
 import { Loader2 } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { toast } from "react-toastify";
-import { countryStore, languageStore } from "@shared";
-import { useState } from "react";
+import { countryStore, languageStore, selectedCityStore } from "@shared";
+import { useState, useEffect } from "react";
 import { LanguageSwitcher } from "@widgets";

 export const CountryCreatePage = observer(() => {
  const navigate = useNavigate();
+
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
  const [isLoading, setIsLoading] = useState(false);
  const { language } = languageStore;
  const { createCountryData, setCountryData, createCountry } = countryStore;
--- a/src/pages/Country/CountryEditPage/index.tsx
+++ b/src/pages/Country/CountryEditPage/index.tsx
@@ -4,12 +4,18 @@ import { ArrowLeft, Save } from "lucide-react";
 import { Loader2 } from "lucide-react";
 import { useNavigate, useParams } from "react-router-dom";
 import { toast } from "react-toastify";
-import { countryStore, languageStore, LoadingSpinner } from "@shared";
+import { countryStore, languageStore, LoadingSpinner, selectedCityStore } from "@shared";
 import { useEffect, useState } from "react";
 import { LanguageSwitcher } from "@widgets";

 export const CountryEditPage = observer(() => {
  const navigate = useNavigate();
+
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
  const [isLoading, setIsLoading] = useState(false);
  const [isLoadingData, setIsLoadingData] = useState(true);
  const { language } = languageStore;
--- a/src/pages/Country/CountryListPage/index.tsx
+++ b/src/pages/Country/CountryListPage/index.tsx
@@ -1,6 +1,6 @@
 import { DataGrid, GridColDef, GridRenderCellParams } from "@mui/x-data-grid";
 import { ruRU } from "@mui/x-data-grid/locales";
-import { authStore, countryStore, languageStore, SearchInput } from "@shared";
+import { authStore, countryStore, languageStore, selectedCityStore, SearchInput } from "@shared";
 import { useEffect, useState, useMemo } from "react";
 import { observer } from "mobx-react-lite";
 import { Trash2, Minus } from "lucide-react";
@@ -74,15 +74,20 @@ export const CountryListPage = observer(() => {
  ];

  const rows = useMemo(() => {
+    const { selectedCity } = selectedCityStore;
+    if (!selectedCity) {
+      return [];
+    }
    const query = searchQuery.trim().toLowerCase();
    return (countries[language]?.data ?? [])
+      .filter((country) => country.code === selectedCity.country_code)
      .filter((country) => !query || (country.name ?? "").toLowerCase().includes(query))
      .map((country) => ({
        id: country.code,
        code: country.code,
        name: country.name,
      }));
-  }, [countries[language]?.data, searchQuery]);
+  }, [countries[language]?.data, searchQuery, selectedCityStore.selectedCity]);

  return (
    <>
@@ -92,7 +97,11 @@ export const CountryListPage = observer(() => {
        <div className="flex justify-between items-center mb-10">
          <h1 className="text-2xl">Страны</h1>
          {canWriteCountries && (
-            <CreateButton label="Добавить страну" path="/country/add" />
+            <CreateButton 
+              label="Добавить страну" 
+              path="/country/add" 
+              disabled={!selectedCityStore.selectedCityId}
+            />
          )}
        </div>

@@ -148,7 +157,13 @@ export const CountryListPage = observer(() => {
          slots={{
            noRowsOverlay: () => (
              <Box sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}>
-                {isLoading ? <CircularProgress size={20} /> : "Нет стран"}
+                {isLoading ? (
+                  <CircularProgress size={20} />
+                ) : !selectedCityStore.selectedCityId ? (
+                  "Выберите город"
+                ) : (
+                  "Нет стран"
+                )}
              </Box>
            ),
          }}
--- a/src/pages/CreateSightPage/index.tsx
+++ b/src/pages/CreateSightPage/index.tsx
@@ -5,6 +5,7 @@ import {
  cityStore,
  createSightStore,
  languageStore,
+  selectedCityStore,
 } from "@shared";
 import {
  CreateInformationTab,
@@ -30,6 +31,11 @@ export const CreateSightPage = observer(() => {
  const { getArticles } = articlesStore;
  const needLeave = createSightStore.needLeaveAgree;

+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
  const handleChange = (_: React.SyntheticEvent, newValue: number) => {
    setValue(newValue);
  };
--- a/src/pages/EditSightPage/index.tsx
+++ b/src/pages/EditSightPage/index.tsx
@@ -9,6 +9,7 @@ import {
  cityStore,
  editSightStore,
  LoadingSpinner,
+  selectedCityStore,
 } from "@shared";
 import { useBlocker, useParams } from "react-router-dom";

@@ -25,6 +26,11 @@ export const EditSightPage = observer(() => {
  const { sight, getSightInfo, needLeaveAgree, getRightArticles } = editSightStore;
  const { getArticles } = articlesStore;

+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
  const { id } = useParams();
  const { getCities } = cityStore;

--- a/src/pages/Route/RouteCreatePage/index.tsx
+++ b/src/pages/Route/RouteCreatePage/index.tsx
@@ -39,6 +39,12 @@ import type { Route } from "@shared";

 export const RouteCreatePage = observer(() => {
  const navigate = useNavigate();
+
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
  const [carrier, setCarrier] = useState<string>("");
  const [routeNumber, setRouteNumber] = useState("");
  const [routeCoords, setRouteCoords] = useState("");
@@ -555,7 +561,7 @@ export const RouteCreatePage = observer(() => {
          />
          <TextField
            className="w-full"
-            label="Таймер видео (сек)"
+            label="Таймер видео заставки (сек)"
            type="number"
            value={videoTimer}
            onChange={(e) => {
--- a/src/pages/Route/RouteEditPage/index.tsx
+++ b/src/pages/Route/RouteEditPage/index.tsx
@@ -36,11 +36,18 @@ import {
  UploadMediaDialog,
  PreviewMediaDialog,
  LoadingSpinner,
+  selectedCityStore,
 } from "@shared";
 import { LinkedItems } from "../LinekedStations";

 export const RouteEditPage = observer(() => {
  const navigate = useNavigate();
+
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
  const { id } = useParams();
  const { editRouteData, copyRouteAction } = routeStore;
  const [isLoading, setIsLoading] = useState(false);
@@ -548,7 +555,7 @@ export const RouteEditPage = observer(() => {
          />
          <TextField
            className="w-full"
-            label="Таймер видео (сек)"
+            label="Таймер видео заставки (сек)"
            type="number"
            value={editRouteData.video_timer ?? 60}
            onChange={(e) => {
--- a/src/pages/Route/RouteListPage/index.tsx
+++ b/src/pages/Route/RouteListPage/index.tsx
@@ -210,6 +210,9 @@ export const RouteListPage = observer(() => {

  const rows = useMemo(() => {
    const { selectedCityId } = selectedCityStore;
+    if (!selectedCityId) {
+      return [];
+    }
    const query = searchQuery.trim().toLowerCase();
    let filtered = routes.data;
    if (selectedCityId) {
@@ -247,7 +250,11 @@ export const RouteListPage = observer(() => {
        <div className="flex justify-between items-center mb-10">
          <h1 className="text-2xl">Маршруты</h1>
          {canWriteRoutes && (
-            <CreateButton label="Создать маршрут" path="/route/create" />
+            <CreateButton 
+              label="Создать маршрут" 
+              path="/route/create" 
+              disabled={!selectedCityStore.selectedCityId}
+            />
          )}
        </div>

@@ -304,7 +311,13 @@ export const RouteListPage = observer(() => {
          slots={{
            noRowsOverlay: () => (
              <Box sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}>
-                {isLoading ? <CircularProgress size={20} /> : "Нет маршрутов"}
+                {isLoading ? (
+                  <CircularProgress size={20} />
+                ) : !selectedCityStore.selectedCityId ? (
+                  "Выберите город"
+                ) : (
+                  "Нет маршрутов"
+                )}
              </Box>
            ),
          }}
--- a/src/pages/Sight/SightListPage/index.tsx
+++ b/src/pages/Sight/SightListPage/index.tsx
@@ -121,8 +121,11 @@ export const SightListPage = observer(() => {
    }] : []),
  ];

+  const { selectedCityId } = selectedCityStore;
  const filteredSights = useMemo(() => {
-    const { selectedCityId } = selectedCityStore;
+    if (!selectedCityId) {
+      return [];
+    }
    const allowedCityIds = canReadCities
      ? null
      : authStore.meCities["ru"].map((c) => c.city_id);
@@ -131,12 +134,12 @@ export const SightListPage = observer(() => {
      if (allowedCityIds && !allowedCityIds.includes(sight.city_id)) {
        return false;
      }
-      if (selectedCityId && sight.city_id !== selectedCityId) {
+      if (sight.city_id !== selectedCityId) {
        return false;
      }
      return true;
    });
-  }, [sights, selectedCityStore.selectedCityId, canReadCities, authStore.meCities]);
+  }, [sights, selectedCityId, canReadCities, authStore.meCities]);

  const query = searchQuery.trim().toLowerCase();
  const rows = filteredSights
@@ -161,6 +164,7 @@ export const SightListPage = observer(() => {
            <CreateButton
              label="Создать достопримечательность"
              path="/sight/create"
+              disabled={!selectedCityStore.selectedCityId}
            />
          )}
        </div>
@@ -216,6 +220,8 @@ export const SightListPage = observer(() => {
              <Box sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}>
                {isLoading ? (
                  <CircularProgress size={20} />
+                ) : !selectedCityId ? (
+                  "Выберите город"
                ) : (
                  "Нет достопримечательностей"
                )}
--- a/src/pages/Station/StationCreatePage/index.tsx
+++ b/src/pages/Station/StationCreatePage/index.tsx
@@ -19,6 +19,7 @@ import {
  mediaStore,
  isMediaIdEmpty,
  useSelectedCity,
+  selectedCityStore,
  SelectMediaDialog,
  UploadMediaDialog,
  PreviewMediaDialog,
@@ -32,6 +33,12 @@ import {

 export const StationCreatePage = observer(() => {
  const navigate = useNavigate();
+
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
  const [isLoading, setIsLoading] = useState(false);
  const { language } = languageStore;
  const {
--- a/src/pages/Station/StationEditPage/index.tsx
+++ b/src/pages/Station/StationEditPage/index.tsx
@@ -19,6 +19,7 @@ import {
  mediaStore,
  isMediaIdEmpty,
  LoadingSpinner,
+  selectedCityStore,
  SelectMediaDialog,
  PreviewMediaDialog,
  UploadMediaDialog,
@@ -34,6 +35,12 @@ import { LinkedSights } from "../LinkedSights";

 export const StationEditPage = observer(() => {
  const navigate = useNavigate();
+
+  useEffect(() => {
+    selectedCityStore.setIsLocked(true);
+    return () => selectedCityStore.setIsLocked(false);
+  }, []);
+
  const [isLoading, setIsLoading] = useState(false);
  const [isLoadingData, setIsLoadingData] = useState(true);
  const { language } = languageStore;
--- a/src/pages/Station/StationListPage/index.tsx
+++ b/src/pages/Station/StationListPage/index.tsx
@@ -174,9 +174,12 @@ export const StationListPage = observer(() => {

  const rows = useMemo(() => {
    const { selectedCityId } = selectedCityStore;
+    if (!selectedCityId) {
+      return [];
+    }
    const query = searchQuery.trim().toLowerCase();
    return stationLists[language].data
-      .filter((station: any) => !selectedCityId || station.city_id === selectedCityId)
+      .filter((station: any) => station.city_id === selectedCityId)
      .filter(
        (station: any) =>
          !query ||
@@ -202,7 +205,11 @@ export const StationListPage = observer(() => {
        <div className="flex justify-between items-center mb-10">
          <h1 className="text-2xl">Остановки</h1>
          {canWriteStations && (
-            <CreateButton label="Создать остановку" path="/station/create" />
+            <CreateButton 
+              label="Создать остановку" 
+              path="/station/create" 
+              disabled={!selectedCityStore.selectedCityId}
+            />
          )}
        </div>

@@ -277,7 +284,13 @@ export const StationListPage = observer(() => {
          slots={{
            noRowsOverlay: () => (
              <Box sx={{ mt: 5, textAlign: "center", color: "text.secondary" }}>
-                {isLoading ? <CircularProgress size={20} /> : "Нет остановок"}
+                {isLoading ? (
+                  <CircularProgress size={20} />
+                ) : !selectedCityStore.selectedCityId ? (
+                  "Выберите город"
+                ) : (
+                  "Нет остановок"
+                )}
              </Box>
            ),
          }}