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;