- {Object.entries(typeLabels).map(([type, { label, count }]) => (
-
- ))}
-
-
- Отображение: {filteredRoutes.length} из {routes.length}
-
-
-
-
+
+
+
+ {ROUTE_TYPES.map(({ value, label }) => (
+
+ ))}
+
+
+ setSearchQuery(event.target.value)} />
+
- {/* Routes Grid/List */}
- {filteredRoutes.length > 0 ? (
-
- {filteredRoutes.map((route, index) => (
- viewMode === 'grid' ? (
- handleEdit(route)}
- onDelete={() => handleDelete(route.id)}
- />
- ) : (
- handleEdit(route)}
- onDelete={() => handleDelete(route.id)}
- />
- )
- ))}
-
- ) : (
-
-
-
- {searchQuery || typeFilter !== 'all'
- ? 'Маршруты не найдены. Попробуйте изменить фильтры.'
- : 'Нет маршрутов. Создайте первый!'}
-
- {!searchQuery && typeFilter === 'all' && (
-
- )}
-
- )}
+ {error &&
}
- {/* Mobile FAB */}
- {routes.length > 0 && (
-
+ {loading ?
: filteredRoutes.length > 0 ? (
+
+
+ Список маршрутов
+
+ | Маршрут |
+ Тип транспорта |
+ Остановки |
+ Действия |
+
+
+ {filteredRoutes.map(route => (
+
+ |
+
+
+
+ {route.name}
+ Маршрут № {route.route_number}
+
+
+ |
+
+
+ {ROUTE_TYPES.find(type => type.value === route.type)?.singular || route.type}
+
+ |
+
+ {route.stops_count ?? 0} ост.
+ |
+
+
+ Остановки
+
+
+
+ |
+
+ ))}
+
+
+
Показано {filteredRoutes.length} из {routes.length}
+
+ ) : !error && (
+
+
+
{routes.length ? 'Маршруты не найдены' : 'Пока нет маршрутов'}
+
{routes.length ? 'Измените поисковый запрос или сбросьте фильтры.' : 'Добавьте первый маршрут, чтобы настроить остановки и расписание.'}
+ {routes.length ?
+ :
}
+
)}
);
}
-
-function RouteCard({ route, index, onEdit, onDelete }) {
- const typeLabels = {
- bus: 'Автобус',
- minibus: 'Маршрутка',
- trolleybus: 'Троллейбус',
- tram: 'Трамвай'
- };
-
- // Lighten color for gradient
- const hexToRgb = (hex) => {
- const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
- return result ? {
- r: parseInt(result[1], 16),
- g: parseInt(result[2], 16),
- b: parseInt(result[3], 16)
- } : null;
- };
-
- const rgb = hexToRgb(route.color);
- const lightColor = rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)` : '#f3f4f6';
-
- return (
-
- {/* Color accent bar */}
-
-
- {/* Header */}
-
-
-
- {route.route_number}
-
-
-
- {route.name}
-
-
-
- {typeLabels[route.type]}
-
-
-
-
-
- {/* Stats */}
-
-
-
-
- Остановок
-
-
{route.stops_count || 0}
-
-
-
-
- Расписаний
-
-
{route.schedules_count || 0}
-
-
-
- {/* Actions */}
-
-
-
- Редактировать остановки
-
-
-
-
-
-
-
- );
-}
-
-function RouteListItem({ route, index, onEdit, onDelete }) {
- const typeLabels = {
- bus: 'Автобус',
- minibus: 'Маршрутка',
- trolleybus: 'Троллейбус',
- tram: 'Трамвай'
- };
-
- return (
-
-
- {/* Route Number Badge */}
-
- {route.route_number}
-
-
- {/* Route Info */}
-
-
{route.name}
-
-
-
- {typeLabels[route.type]}
-
-
-
- {route.stops_count || 0} остановок
-
-
-
- {route.schedules_count || 0} расписаний
-
-
-
-
- {/* Actions */}
-
-
-
- Остановки
-
-
-
-
-
- {/* Mobile Actions */}
-
-
-
-
-
-
-
-
-
- );
-}
\ No newline at end of file
diff --git a/frontend/src/pages/SchedulesPage.css b/frontend/src/pages/SchedulesPage.css
new file mode 100644
index 0000000..2751b77
--- /dev/null
+++ b/frontend/src/pages/SchedulesPage.css
@@ -0,0 +1,19 @@
+.schedules-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
+.schedule-route-panel.card { padding: 20px; }
+.schedule-route-list { display: flex; flex-direction: column; gap: 8px; max-height: max(360px, calc(100dvh - 240px)); overflow-y: auto; padding: 4px; margin: -4px; }
+.schedule-route-option { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; text-align: left; border: 1px solid #e5e7eb; border-radius: var(--control-radius); background: white; }
+.schedule-route-option:hover { background: #fafafa; }
+.schedule-route-option[aria-pressed="true"] { border-color: #1677ff; background: #eff6ff; }
+.schedule-route-text { min-width: 0; }
+.schedule-route-name { display: block; font-size: 14px; font-weight: 500; line-height: 21px; overflow-wrap: anywhere; }
+.schedule-route-count { display: block; color: #8c8c8c; font-size: 12px; line-height: 18px; margin-top: 4px; }
+.schedule-selected-route { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
+.schedule-selected-route h2 { overflow-wrap: anywhere; }
+.schedule-details { min-width: 0; }
+.schedule-days-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
+@media (min-width: 1024px) {
+ .schedules-layout { grid-template-columns: 300px minmax(0, 1fr); }
+}
+@media (min-width: 1440px) {
+ .schedules-layout { grid-template-columns: 340px minmax(0, 1fr); }
+}
diff --git a/frontend/src/pages/SchedulesPage.jsx b/frontend/src/pages/SchedulesPage.jsx
index d483e22..dcb5adc 100644
--- a/frontend/src/pages/SchedulesPage.jsx
+++ b/frontend/src/pages/SchedulesPage.jsx
@@ -1,7 +1,9 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
import { Calendar, Plus, Edit, Trash2, ChevronDown, ChevronUp, AlertCircle } from 'lucide-react';
import { routesApi, routeStopsApi, schedulesApi, holidaysApi } from '../services/api';
import { PageLoader } from '../components/AnimatedComponents';
+import RouteBadge from '../components/RouteBadge';
+import './SchedulesPage.css';
const DAY_TYPES = [
{ value: 'weekday', label: 'Будние дни', description: 'Пн-Пт' },
@@ -30,6 +32,10 @@ export default function SchedulesPage() {
const [editingSchedule, setEditingSchedule] = useState(null);
const [upcomingHolidays, setUpcomingHolidays] = useState([]);
const [expandedSchedule, setExpandedSchedule] = useState(null);
+ const [detailsLoading, setDetailsLoading] = useState(false);
+ const [detailsError, setDetailsError] = useState('');
+ const detailsRequest = useRef(0);
+ const activeRouteId = useRef(null);
useEffect(() => {
loadRoutes();
@@ -37,11 +43,14 @@ export default function SchedulesPage() {
}, []);
useEffect(() => {
- if (selectedRoute) {
- loadSchedules(selectedRoute.id);
- loadRouteStops(selectedRoute.id);
- }
- }, [selectedRoute]);
+ activeRouteId.current = selectedRoute?.id;
+ setSchedules([]);
+ setRouteStops([]);
+ setExpandedSchedule(null);
+ setShowEditor(false);
+ if (selectedRoute) loadRouteDetails(selectedRoute.id);
+ return () => { activeRouteId.current = null; detailsRequest.current += 1; };
+ }, [selectedRoute?.id]);
const loadRoutes = async () => {
try {
@@ -57,23 +66,25 @@ export default function SchedulesPage() {
}
};
- const loadSchedules = async (routeId) => {
+ const loadRouteDetails = async (routeId) => {
+ if (routeId !== activeRouteId.current) return;
+ const request = ++detailsRequest.current;
+ setDetailsLoading(true);
+ setDetailsError('');
try {
- const response = await schedulesApi.getRouteSchedules(routeId);
- setSchedules(response.data);
- } catch (error) {
- console.error('Error loading schedules:', error);
- setSchedules([]);
- }
- };
-
- const loadRouteStops = async (routeId) => {
- try {
- const response = await routeStopsApi.getRouteStops(routeId);
- setRouteStops(response.data);
- } catch (error) {
- console.error('Error loading route stops:', error);
- setRouteStops([]);
+ const [scheduleResponse, stopsResponse] = await Promise.all([
+ schedulesApi.getRouteSchedules(routeId),
+ routeStopsApi.getRouteStops(routeId),
+ ]);
+ if (request !== detailsRequest.current) return;
+ setSchedules(scheduleResponse.data);
+ setRouteStops(stopsResponse.data);
+ } catch {
+ if (request === detailsRequest.current) {
+ setDetailsError('Не удалось загрузить расписание и остановки маршрута.');
+ }
+ } finally {
+ if (request === detailsRequest.current) setDetailsLoading(false);
}
};
@@ -106,7 +117,7 @@ export default function SchedulesPage() {
try {
await schedulesApi.delete(id);
- loadSchedules(selectedRoute.id);
+ loadRouteDetails(selectedRoute.id);
} catch (error) {
console.error('Error deleting schedule:', error);
alert('Ошибка удаления расписания');
@@ -116,7 +127,7 @@ export default function SchedulesPage() {
const handleCopySchedule = async (fromDayType, toDayType) => {
try {
await schedulesApi.copy(selectedRoute.id, fromDayType, toDayType);
- loadSchedules(selectedRoute.id);
+ loadRouteDetails(selectedRoute.id);
} catch (error) {
console.error('Error copying schedule:', error);
alert('Ошибка копирования расписания');
@@ -132,7 +143,7 @@ export default function SchedulesPage() {
}
setShowEditor(false);
setEditingSchedule(null);
- loadSchedules(selectedRoute.id);
+ loadRouteDetails(selectedRoute.id);
} catch (error) {
console.error('Error saving schedule:', error);
alert(error.response?.data?.message || 'Ошибка сохранения расписания');
@@ -177,11 +188,12 @@ export default function SchedulesPage() {
{/* Mobile: Route selector dropdown */}
-
+
-
- {/* Routes List - Desktop only */}
-
-
Маршруты
-
+
+
+ Маршруты
+
{routes.map(route => (
-
+
- {/* Schedules Grid */}
-
+
{selectedRoute ? (
<>
-
-
- {selectedRoute.route_number}
-
-
-
{selectedRoute.name}
+
+
+
+
{selectedRoute.name}
Расписание движения
-
+ {detailsLoading ?
: detailsError ? (
+
+
{detailsError}
+
+
+ ) : (
+
{DAY_TYPES.map((dayType, index) => {
const schedule = getScheduleForDayType(dayType.value);
const isExpanded = expandedSchedule === dayType.value;
@@ -340,7 +335,7 @@ export default function SchedulesPage() {
@@ -362,6 +357,7 @@ export default function SchedulesPage() {
);
})}
+ )}
) : (
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 7fda8c1..9b37149 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -6,13 +6,15 @@ export default {
],
theme: {
extend: {
+ fontFamily: { sans: ['Roboto', 'Arial', 'sans-serif'] },
colors: {
primary: {
- 50: '#f0f9ff',
- 100: '#e0f2fe',
- 500: '#0ea5e9',
- 600: '#0284c7',
- 700: '#0369a1',
+ 50: '#eff6ff',
+ 100: '#dbeafe',
+ 200: '#bfdbfe',
+ 500: '#1677ff',
+ 600: '#0958d9',
+ 700: '#003eb3',
}
}
},