diff --git a/src/features/schedule/components/DayGroupedFlightList.scss b/src/features/schedule/components/DayGroupedFlightList.scss index a886bc04..798cf3f1 100644 --- a/src/features/schedule/components/DayGroupedFlightList.scss +++ b/src/features/schedule/components/DayGroupedFlightList.scss @@ -3,6 +3,19 @@ flex-direction: column; gap: 18px; + &__column-headers { + display: grid; + grid-template-columns: 80px 1fr 100px 120px 1fr; + gap: 12px; + padding: 8px 16px; + color: #6b7280; + font-size: 11px; + font-weight: 500; + text-transform: uppercase; + letter-spacing: 0.04em; + border-bottom: 1px solid #e8edf3; + } + &__group { border: 1px solid #e8edf3; border-radius: 6px; diff --git a/src/features/schedule/components/DayGroupedFlightList.tsx b/src/features/schedule/components/DayGroupedFlightList.tsx index 9b169f69..08806595 100644 --- a/src/features/schedule/components/DayGroupedFlightList.tsx +++ b/src/features/schedule/components/DayGroupedFlightList.tsx @@ -11,6 +11,7 @@ */ import { type FC, useMemo } from "react"; +import { useTranslation } from "@/i18n/provider.js"; import { FlightList } from "@/ui/flights/FlightList.js"; import { FlightListSkeleton } from "@/ui/flights/FlightListSkeleton.js"; import { useLocale } from "@/i18n/useLocale.js"; @@ -72,8 +73,25 @@ export const DayGroupedFlightList: FC = ({ initialCurrentFlightId, }) => { const { language } = useLocale(); + const { t } = useTranslation(); const groups = useMemo(() => groupFlightsByDay(flights), [flights]); + /** Angular's schedule renders a sortable column header row above the + * list. We render the same labels as a non-sortable bar — sortable + * headers are tracked separately. Skipped while loading or empty. */ + const headerRow = ( +
+ {t("SCHEDULE.COL-FLIGHT") || "РЕЙС"} + {t("SCHEDULE.COL-AIRLINE") || "АВИАКОМПАНИЯ, БОРТ"} + {t("SCHEDULE.COL-DEPARTURE") || "ВЫЛЕТ"} + {t("SCHEDULE.COL-DURATION") || "ВРЕМЯ В ПУТИ"} + {t("SCHEDULE.COL-ARRIVAL") || "ПРИЛЕТ"} +
+ ); + if (loading) return ; if (groups.length === 0) { @@ -83,13 +101,16 @@ export const DayGroupedFlightList: FC = ({ // Single-day result: skip grouping noise and render the flat list. if (groups.length === 1) { return ( - +
+ {headerRow} + +
); } @@ -103,6 +124,7 @@ export const DayGroupedFlightList: FC = ({ return (
+ {headerRow} {groups.map((g) => { const weekday = weekdayFmt.format(g.parsed); const dayMonth = dayMonthFmt.format(g.parsed); diff --git a/src/features/schedule/components/ScheduleSearchPage.tsx b/src/features/schedule/components/ScheduleSearchPage.tsx index 584620e0..97a637c9 100644 --- a/src/features/schedule/components/ScheduleSearchPage.tsx +++ b/src/features/schedule/components/ScheduleSearchPage.tsx @@ -97,7 +97,10 @@ export const ScheduleSearchPage: FC = ({ params }) => { }; const depName = describeStation(outbound.departure); const arrName = describeStation(outbound.arrival); - const routeHeading = `${t("BOARD.ROUTE-TEXT")}${depName} - ${arrName}`; + // Angular's schedule pages render the heading as + // `Расписание по маршруту: Москва - Самара` (SCHEDULE.SCHEDULE-BY-ROUTE); + // the onlineboard variant uses the shorter `Маршрут:` (BOARD.ROUTE-TEXT). + const routeHeading = `${t("SCHEDULE.SCHEDULE-BY-ROUTE")}: ${depName} - ${arrName}`; // Fetch outbound flights const outboundRequest = toSearchRequest(outbound); diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json index ab5126d8..59bb58db 100644 --- a/src/i18n/locales/en/common.json +++ b/src/i18n/locales/en/common.json @@ -177,6 +177,11 @@ "TO-HOME": "HOME" }, "SCHEDULE": { + "COL-FLIGHT": "Flight", + "COL-AIRLINE": "Airline, aircraft", + "COL-DEPARTURE": "Departure", + "COL-DURATION": "Duration", + "COL-ARRIVAL": "Arrival", "DOWNLOAD-SCHEDULE": "Download schedule", "DOWNLOAD-SCHEDULE-FOR-DAY": "For the day", "DOWNLOAD-SCHEDULE-FOR-THE-CURRENT-MONTH": "For the current month", diff --git a/src/i18n/locales/ru/common.json b/src/i18n/locales/ru/common.json index f6742072..096e1313 100644 --- a/src/i18n/locales/ru/common.json +++ b/src/i18n/locales/ru/common.json @@ -177,6 +177,11 @@ "TO-HOME": "НА ГЛАВНУЮ" }, "SCHEDULE": { + "COL-FLIGHT": "Рейс", + "COL-AIRLINE": "Авиакомпания, борт", + "COL-DEPARTURE": "Вылет", + "COL-DURATION": "Время в пути", + "COL-ARRIVAL": "Прилет", "DOWNLOAD-SCHEDULE": "Выгрузить расписание", "DOWNLOAD-SCHEDULE-FOR-DAY": "На день", "DOWNLOAD-SCHEDULE-FOR-THE-CURRENT-MONTH": "На текущий месяц",