From a2ab4fda1640d0fa4c3010d46f42fbb8ef549ca2 Mon Sep 17 00:00:00 2001
From: gnezim <gnezim@gmail.com>
Date: Thu, 16 Apr 2026 11:45:40 +0300
Subject: [PATCH] Match Angular form controls: swap icon, city dropdowns,
 schedule date range
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Online board filter: use Angular sprite SVG for swap button, add dropdown
chevron to city AutoComplete inputs.

Schedule filter: add swap button between cities, replace two separate
date fields with single range Calendar matching Angular. Fix button text
to "Показать расписание", date label to "Показать расписание на".
Add dropdown chevrons to city inputs.
---
 .../components/OnlineBoardFilter.tsx          |  6 ++-
 .../schedule/components/ScheduleStartPage.tsx | 50 +++++++++++--------
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/src/features/online-board/components/OnlineBoardFilter.tsx b/src/features/online-board/components/OnlineBoardFilter.tsx
index 3bfc9ed5..d4897791 100644
--- a/src/features/online-board/components/OnlineBoardFilter.tsx
+++ b/src/features/online-board/components/OnlineBoardFilter.tsx
@@ -257,6 +257,7 @@ export const OnlineBoardFilter: FC = () => {
                       suggestions={routeDepSuggestions}
                       completeMethod={handleRouteDepSearch}
                       field="name"
+                      dropdown
                       onChange={(e) => setRouteDeparture(e.value as CitySuggestion | string)}
                       placeholder={t("SHARED.CITY_PLACEHOLDER")}
                       className="input--filter"
@@ -272,8 +273,8 @@ export const OnlineBoardFilter: FC = () => {
                         onClick={handleExchange}
                         data-testid="swap-cities-button"
                       >
-                        <svg className="svg--change-city" viewBox="0 0 24 24" width="24" height="24">
-                          <path d="M7.5 3L3 7.5M3 7.5L7.5 12M3 7.5H21M16.5 21L21 16.5M21 16.5L16.5 12M21 16.5H3" stroke="currentColor" strokeWidth="1.5" fill="none" />
+                        <svg className="svg--change-city">
+                          <use xlinkHref="/assets/img/sprite.svg#changeCity" />
                         </svg>
                       </button>
                     </div>
@@ -286,6 +287,7 @@ export const OnlineBoardFilter: FC = () => {
                       suggestions={routeArrSuggestions}
                       completeMethod={handleRouteArrSearch}
                       field="name"
+                      dropdown
                       onChange={(e) => setRouteArrival(e.value as CitySuggestion | string)}
                       placeholder={t("SHARED.CITY_PLACEHOLDER")}
                       className="input--filter"
diff --git a/src/features/schedule/components/ScheduleStartPage.tsx b/src/features/schedule/components/ScheduleStartPage.tsx
index 11fdadbb..2bf0d259 100644
--- a/src/features/schedule/components/ScheduleStartPage.tsx
+++ b/src/features/schedule/components/ScheduleStartPage.tsx
@@ -141,6 +141,7 @@ export const ScheduleStartPage: FC = () => {
           suggestions={departureSuggestions}
           completeMethod={handleDepartureSearch}
           field="name"
+          dropdown
           onChange={(e) => setDepartureAirport(e.value as CitySuggestion | string)}
           placeholder={t("SHARED.CITY_PLACEHOLDER")}
           className="input--filter"
@@ -150,6 +151,23 @@ export const ScheduleStartPage: FC = () => {
         />
       </div>
 
+      <div className="change-container">
+        <button
+          className="button-change"
+          type="button"
+          onClick={() => {
+            const tmp = departureAirport;
+            setDepartureAirport(arrivalAirport);
+            setArrivalAirport(tmp);
+          }}
+          data-testid="swap-cities-button"
+        >
+          <svg className="svg--change-city">
+            <use xlinkHref="/assets/img/sprite.svg#changeCity" />
+          </svg>
+        </button>
+      </div>
+
       <div className="schedule-start__field">
         <label htmlFor="schedule-arrival">{t("SHARED.ARRIVAL_CITY")}</label>
         <AutoComplete
@@ -157,6 +175,7 @@ export const ScheduleStartPage: FC = () => {
           suggestions={arrivalSuggestions}
           completeMethod={handleArrivalSearch}
           field="name"
+          dropdown
           onChange={(e) => setArrivalAirport(e.value as CitySuggestion | string)}
           placeholder={t("SHARED.CITY_PLACEHOLDER")}
           className="input--filter"
@@ -167,30 +186,21 @@ export const ScheduleStartPage: FC = () => {
       </div>
 
       <div className="schedule-start__field">
-        <label htmlFor="schedule-date-from">{t("SHARED.DEPARTURE_DATE")}</label>
+        <label htmlFor="schedule-date-from">{t("SHARED.SCHEDULES_DATE")}</label>
         <Calendar
-          value={dateFrom}
-          onChange={(e) => setDateFrom(e.value as Date | null)}
+          value={dateFrom && dateTo ? [dateFrom, dateTo] : null}
+          onChange={(e) => {
+            const val = e.value as Date[] | null;
+            if (val && val.length >= 1) setDateFrom(val[0] ?? null);
+            if (val && val.length >= 2) setDateTo(val[1] ?? null);
+          }}
+          selectionMode="range"
           dateFormat="dd.mm.yy"
-          placeholder={t("SHARED.DATE_FORMAT")}
+          placeholder={`${t("SHARED.DATE_FORMAT")} - ${t("SHARED.DATE_FORMAT")}`}
           showIcon
           className="input--filter"
           inputId="schedule-date-from"
-          data-testid="date-from-input"
-        />
-      </div>
-
-      <div className="schedule-start__field">
-        <label htmlFor="schedule-date-to">{t("SHARED.ARRIVAL_DATE")}</label>
-        <Calendar
-          value={dateTo}
-          onChange={(e) => setDateTo(e.value as Date | null)}
-          dateFormat="dd.mm.yy"
-          placeholder={t("SHARED.DATE_FORMAT")}
-          showIcon
-          className="input--filter"
-          inputId="schedule-date-to"
-          data-testid="date-to-input"
+          data-testid="date-range-input"
         />
       </div>
 
@@ -287,7 +297,7 @@ export const ScheduleStartPage: FC = () => {
         className="schedule-start__submit"
         data-testid="schedule-search-submit"
       >
-        {t("SHARED.SEARCH")}
+        {t("SHARED.SCHEDULES_VIEW")}
       </button>
     </form>
   );