Merge pull request #6090 from entur/debug-ui-wheelchair-accessible

Add wheelchair accessible checkbox to Debug UI

client/src/components/SearchBar/SearchBar.tsx

@@ -15,6 +15,7 @@ import { ServerInfoTooltip } from './ServerInfoTooltip.tsx';
 import { useRef, useState } from 'react';
 import logo from '../../static/img/otp-logo.svg';
 import GraphiQLRouteButton from './GraphiQLRouteButton.tsx';
+import WheelchairAccessibleCheckBox from './WheelchairAccessibleCheckBox.tsx';
 
 type SearchBarProps = {
   onRoute: () => void;
@@ -50,6 +51,11 @@ export function SearchBar({ onRoute, tripQueryVariables, setTripQueryVariables,
         tripQueryVariables={tripQueryVariables}
         setTripQueryVariables={setTripQueryVariables}
       />
+      <WheelchairAccessibleCheckBox
+        tripQueryVariables={tripQueryVariables}
+        setTripQueryVariables={setTripQueryVariables}
+      />
+
       <div className="search-bar-route-button-wrapper">
         <Button variant="primary" onClick={() => onRoute()} disabled={loading}>
           {loading && (

client/src/components/SearchBar/WheelchairAccessibleCheckBox.tsx

@@ -0,0 +1,35 @@
+import { Form } from 'react-bootstrap';
+import wheelchairIcon from '../../static/img/wheelchair.svg';
+import { TripQueryVariables } from '../../gql/graphql.ts';
+
+export default function WheelchairAccessibleCheckBox({
+  tripQueryVariables,
+  setTripQueryVariables,
+}: {
+  tripQueryVariables: TripQueryVariables;
+  setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
+}) {
+  return (
+    <Form.Group>
+      <Form.Label column="sm" htmlFor="wheelchairAccessibleCheck">
+        <img
+          alt="Wheelchair Accessible Trip"
+          title="Wheelchair Accessible Trip"
+          src={wheelchairIcon}
+          width="20"
+          height="20"
+          className="d-inline-block align-middle"
+        />
+      </Form.Label>
+      <Form.Check
+        id="wheelchairAccessible"
+        onChange={(e) => {
+          setTripQueryVariables({
+            ...tripQueryVariables,
+            wheelchairAccessible: e.target.checked,
+          });
+        }}
+      ></Form.Check>
+    </Form.Group>
+  );
+}

client/src/static/query/tripQuery.tsx

@@ -11,6 +11,7 @@ export const query = graphql(`
     $searchWindow: Int
     $modes: Modes
     $itineraryFiltersDebug: ItineraryFilterDebugProfile
+    $wheelchairAccessible: Boolean
     $pageCursor: String
   ) {
     trip(
@@ -22,6 +23,7 @@ export const query = graphql(`
       searchWindow: $searchWindow
       modes: $modes
       itineraryFilters: { debug: $itineraryFiltersDebug }
+      wheelchairAccessible: $wheelchairAccessible
       pageCursor: $pageCursor
     ) {
       previousPageCursor