Merge pull request #6166 from leonardehrenfried/swap-from-to

Add button to swap from/to in debug UI

client/src/components/SearchBar/SearchBar.tsx

@@ -16,6 +16,7 @@ import { useRef, useState } from 'react';
 import logo from '../../static/img/otp-logo.svg';
 import GraphiQLRouteButton from './GraphiQLRouteButton.tsx';
 import WheelchairAccessibleCheckBox from './WheelchairAccessibleCheckBox.tsx';
+import { SwapLocationsButton } from './SwapLocationsButton.tsx';
 
 type SearchBarProps = {
   onRoute: () => void;
@@ -38,6 +39,7 @@ export function SearchBar({ onRoute, tripQueryVariables, setTripQueryVariables,
         </div>
       </Navbar.Brand>
       <LocationInputField location={tripQueryVariables.from} label="From" id="fromInputField" />
+      <SwapLocationsButton tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
       <LocationInputField location={tripQueryVariables.to} label="To" id="toInputField" />
       <DepartureArrivalSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
       <DateTimeInputField tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />

client/src/components/SearchBar/SwapLocationsButton.tsx

@@ -0,0 +1,24 @@
+import { TripQueryVariables } from '../../gql/graphql.ts';
+import icon from '../../static/img/swap.svg';
+
+export function SwapLocationsButton({
+  tripQueryVariables,
+  setTripQueryVariables,
+}: {
+  tripQueryVariables: TripQueryVariables;
+  setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
+}) {
+  const swapFromTo = () => {
+    setTripQueryVariables({
+      ...tripQueryVariables,
+      from: tripQueryVariables.to,
+      to: tripQueryVariables.from,
+    });
+  };
+
+  return (
+    <button className="swap-from-to" onClick={swapFromTo} title="Swap from/to">
+      <img alt="Swap from/to" src={icon} />
+    </button>
+  );
+}

client/src/style.css

@@ -67,6 +67,16 @@
   margin-top: -2px;
 }
 
+.search-bar .swap-from-to {
+  border: none;
+  background: none;
+  margin: 30px 0 auto 0;
+}
+
+.search-bar .swap-from-to img {
+  width: 15px;
+}
+
 .itinerary-list-container {
   width: 36rem;
   overflow-y: auto;