KRBL/WhiteNightsAdminPanel
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update color carrier

Browse Source
This commit is contained in:
Илья Куприец
2026-05-05 15:07:18 +03:00
parent e3469763ce
commit 6af95bb449
25 changed files with 620 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/client/src/components/ListOfSights/SightFrame.jsx
View File

@@ -43,9 +43,51 @@ const SightFrame = observer(({ media, sight_id, sight_name }) => {
const [threeViewResetKey, setThreeViewResetKey] = useState(0);
const threeViewControlRef = useRef(null);
const mediaCache = useRef({});
const idleTimerRef = useRef(null);
const textWrapperRef = useRef(null);
// Автозакрытие fullscreen 3D при бездействии (45 сек)
useEffect(() => {
if (!isFullscreen3D) {
if (idleTimerRef.current) {
clearInterval(idleTimerRef.current);
idleTimerRef.current = null;
}
return;
}
let idleSeconds = 0;
const checkIdle = () => {
idleSeconds += 1;
if (idleSeconds >= 45) {
setIsFullscreen3D(false);
}
};
idleTimerRef.current = 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 () => {
if (idleTimerRef.current) {
clearInterval(idleTimerRef.current);
idleTimerRef.current = null;
}
events.forEach((event) => {
window.removeEventListener(event, resetIdle);
});
};
}, [isFullscreen3D]);
const {
routeSights,
routeSightsEn,

13
src/client/src/components/side-menu/SideMenu.jsx
View File

@@ -13,6 +13,7 @@ import StationsList from "./StationsList";
import LeftWidget from "./LeftWidget";
import { apiStore } from "../../api/ApiStore/store";
import { getMediaUrl } from "../../api/apiConfig";
import defaultCrest from "../../assets/images/Герб.png";
const SideMenu = observer(({ onMenuToggle }) => {
const {
@@ -369,13 +370,11 @@ const SideMenu = observer(({ onMenuToggle }) => {
"background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease",
}}
>
{designData?.creastPath && (
<img
className="side-menu-crest"
src={designData?.creastPath}
alt="Герб"
/>
)}
<img
className="side-menu-crest"
src={designData?.creastPath || defaultCrest}
alt="Герб"
/>
{carrier?.slogan && (
<div className="side-menu-label">{carrier.slogan}</div>
)}

2
src/client/src/stores/ColorStore.ts
View File

@@ -68,4 +68,4 @@ class ColorStore implements ColorStore {
}
export const colorStore = new ColorStore();
export { ColorStore };
export { ColorStore };

162
src/pages/Carrier/CarrierCreatePage/index.tsx
View File

@@ -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="Логотип перевозчика"

176
src/pages/Carrier/CarrierEditPage/index.tsx
View File

@@ -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="Логотип перевозчика"

7
src/pages/City/CityCreatePage/index.tsx
View File

@@ -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;

7
src/pages/City/CityEditPage/index.tsx
View File

@@ -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);

27
src/pages/City/CityListPage/index.tsx
View File

@@ -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>
),
}}

9
src/pages/Country/CountryAddPage/index.tsx
View File

@@ -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;

10
src/pages/Country/CountryCreatePage/index.tsx
View File

@@ -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;

8
src/pages/Country/CountryEditPage/index.tsx
View File

@@ -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;

23
src/pages/Country/CountryListPage/index.tsx
View File

@@ -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>
),
}}

6
src/pages/CreateSightPage/index.tsx
View File

@@ -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);
};

6
src/pages/EditSightPage/index.tsx
View File

@@ -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;

8
src/pages/Route/RouteCreatePage/index.tsx
View File

@@ -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) => {

9
src/pages/Route/RouteEditPage/index.tsx
View File

@@ -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) => {

17
src/pages/Route/RouteListPage/index.tsx
View File

@@ -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>
),
}}

12
src/pages/Sight/SightListPage/index.tsx
View File

@@ -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 ? (
"Выберите город"
) : (
"Нет достопримечательностей"
)}

7
src/pages/Station/StationCreatePage/index.tsx
View File

@@ -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 {

7
src/pages/Station/StationEditPage/index.tsx
View File

@@ -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;

19
src/pages/Station/StationListPage/index.tsx
View File

@@ -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>
),
}}

81
src/shared/store/CarrierStore/index.tsx
View File

@@ -16,9 +16,10 @@ export type Carrier = {
city: string;
city_id: number;
logo: string;
// main_color: string;
// left_color: string;
// right_color: string;
main_color: string;
left_color: string;
right_color: string;
rgb_color: string;
};
type CarrierData = {
@@ -112,6 +113,10 @@ class CarrierStore {
createCarrierData = {
city_id: 0,
logo: "",
main_color: "",
left_color: "",
right_color: "",
rgb_color: "",
ru: {
full_name: "",
short_name: "",
@@ -135,10 +140,17 @@ class CarrierStore {
cityId: number,
slogan: string,
logoId: string,
language: Language
language: Language,
colors?: { main_color?: string; left_color?: string; right_color?: string; rgb_color?: string }
) => {
this.createCarrierData.city_id = cityId;
this.createCarrierData.logo = logoId;
if (colors) {
if (colors.main_color !== undefined) this.createCarrierData.main_color = colors.main_color;
if (colors.left_color !== undefined) this.createCarrierData.left_color = colors.left_color;
if (colors.right_color !== undefined) this.createCarrierData.right_color = colors.right_color;
if (colors.rgb_color !== undefined) this.createCarrierData.rgb_color = colors.rgb_color;
}
this.createCarrierData[language] = {
full_name: fullName,
short_name: shortName,
@@ -198,9 +210,11 @@ class CarrierStore {
city: cityName,
city_id: this.createCarrierData.city_id,
slogan: (this.createCarrierData[language].slogan || "").trim(),
...(this.createCarrierData.logo
? { logo: this.createCarrierData.logo }
: {}),
...(this.createCarrierData.logo ? { logo: this.createCarrierData.logo } : {}),
...(this.createCarrierData.rgb_color ? { rgb_color: this.createCarrierData.rgb_color } : {}),
...(this.createCarrierData.main_color ? { main_color: this.createCarrierData.main_color } : {}),
...(this.createCarrierData.left_color ? { left_color: this.createCarrierData.left_color } : {}),
...(this.createCarrierData.right_color ? { right_color: this.createCarrierData.right_color } : {}),
};
const response = await languageInstance(language).post("/carrier", payload);
@@ -243,6 +257,10 @@ class CarrierStore {
this.createCarrierData = {
city_id: 0,
logo: "",
main_color: "",
left_color: "",
right_color: "",
rgb_color: "",
ru: {
full_name: "",
short_name: "",
@@ -265,53 +283,46 @@ class CarrierStore {
ru: {
full_name: "",
short_name: "",
// main_color: "",
// left_color: "",
// right_color: "",
slogan: "",
},
en: {
full_name: "",
short_name: "",
// main_color: "",
// left_color: "",
// right_color: "",
slogan: "",
},
zh: {
full_name: "",
short_name: "",
slogan: "",
},
city_id: 0,
logo: "",
zh: {
full_name: "",
short_name: "",
// main_color: "",
// left_color: "",
// right_color: "",
slogan: "",
},
main_color: "",
left_color: "",
right_color: "",
rgb_color: "",
};
setEditCarrierData = (
fullName: string,
shortName: string,
cityId: number,
// main_color: string,
// left_color: string,
// right_color: string,
slogan: string,
logoId: string,
language: Language
language: Language,
colors?: { main_color?: string; left_color?: string; right_color?: string; rgb_color?: string }
) => {
this.editCarrierData.city_id = cityId;
this.editCarrierData.logo = logoId;
if (colors) {
if (colors.main_color !== undefined) this.editCarrierData.main_color = colors.main_color;
if (colors.left_color !== undefined) this.editCarrierData.left_color = colors.left_color;
if (colors.right_color !== undefined) this.editCarrierData.right_color = colors.right_color;
if (colors.rgb_color !== undefined) this.editCarrierData.rgb_color = colors.rgb_color;
}
this.editCarrierData[language] = {
full_name: fullName,
short_name: shortName,
// main_color: main_color,
// left_color: left_color,
// right_color: right_color,
slogan: slogan,
};
};
@@ -326,9 +337,11 @@ class CarrierStore {
slogan: (this.editCarrierData[lang].slogan || "").trim(),
city: cityName,
city_id: this.editCarrierData.city_id,
...(this.editCarrierData.logo
? { logo: this.editCarrierData.logo }
: {}),
...(this.editCarrierData.logo ? { logo: this.editCarrierData.logo } : {}),
...(this.editCarrierData.rgb_color ? { rgb_color: this.editCarrierData.rgb_color } : {}),
...(this.editCarrierData.main_color ? { main_color: this.editCarrierData.main_color } : {}),
...(this.editCarrierData.left_color ? { left_color: this.editCarrierData.left_color } : {}),
...(this.editCarrierData.right_color ? { right_color: this.editCarrierData.right_color } : {}),
});
runInAction(() => {

7
src/shared/store/SelectedCityStore/index.ts
View File

@@ -3,6 +3,7 @@ import { City } from "../CityStore";
class SelectedCityStore {
selectedCity: City | null = null;
isLocked: boolean = false;
constructor() {
makeAutoObservable(this);
@@ -32,6 +33,12 @@ class SelectedCityStore {
});
};
setIsLocked = (locked: boolean) => {
runInAction(() => {
this.isLocked = locked;
});
};
clearSelectedCity = () => {
this.setSelectedCity(null);
};

21
src/widgets/CitySelector/index.tsx
View File

@@ -12,7 +12,7 @@ import { authStore, cityStore, selectedCityStore, type City } from "@shared";
import { MapPin } from "lucide-react";
export const CitySelector: React.FC = observer(() => {
const { selectedCity, setSelectedCity } = selectedCityStore;
const { selectedCity, setSelectedCity, isLocked } = selectedCityStore;
const canLoadAllCities = authStore.isAdmin && authStore.canRead("cities");
useEffect(() => {
@@ -58,26 +58,35 @@ export const CitySelector: React.FC = observer(() => {
return (
<Box className="flex items-center gap-2">
<MapPin size={16} className="text-white" />
<MapPin size={16} className={isLocked ? "text-gray-400" : "text-white"} />
<FormControl size="medium" sx={{ minWidth: 120 }}>
<Select
value={selectedCity?.id?.toString() || ""}
onChange={handleCityChange}
displayEmpty
disabled={isLocked}
sx={{
height: "40px",
color: "white",
"&.Mui-disabled": {
color: "rgba(255, 255, 255, 0.5)",
WebkitTextFillColor: "rgba(255, 255, 255, 0.5)",
},
"& .MuiOutlinedInput-notchedOutline": {
borderColor: "rgba(255, 255, 255, 0.3)",
borderColor: isLocked
? "rgba(255, 255, 255, 0.1)"
: "rgba(255, 255, 255, 0.3)",
},
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "rgba(255, 255, 255, 0.5)",
borderColor: isLocked
? "rgba(255, 255, 255, 0.1)"
: "rgba(255, 255, 255, 0.5)",
},
"&.Mui.focused .MuiOutlinedInput-notchedOutline": {
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "white",
},
"& .MuiSvgIcon-root": {
color: "white",
color: isLocked ? "rgba(255, 255, 255, 0.3)" : "white",
},
}}
>