Add access and egress selects

entur · Oct 5, 2023 · d4d2a03 · d4d2a03
1 parent 29a2058
commit d4d2a03
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 2 deletions.
diff --git a/client-next/src/components/SearchBar/AccessSelect.tsx b/client-next/src/components/SearchBar/AccessSelect.tsx
@@ -0,0 +1,53 @@
+import { Form } from 'react-bootstrap';
+import { StreetMode, TripQueryVariables } from '../../gql/graphql.ts';
+
+export function AccessSelect({
+  tripQueryVariables,
+  setTripQueryVariables,
+}: {
+  tripQueryVariables: TripQueryVariables;
+  setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
+}) {
+  return (
+    <Form.Group>
+      <Form.Label column="sm" htmlFor="accessSelect">
+        Access
+      </Form.Label>
+      <Form.Select
+        size="sm"
+        onChange={(e) => {
+          if (e.target.value !== 'not_selected') {
+            setTripQueryVariables({
+              ...tripQueryVariables,
+              modes: {
+                ...tripQueryVariables.modes,
+                accessMode: e.target.value as StreetMode,
+                egressMode: tripQueryVariables.modes?.egressMode || (e.target.value as StreetMode),
+              },
+            });
+          } else {
+            setTripQueryVariables({
+              ...tripQueryVariables,
+              modes:
+                tripQueryVariables.modes?.directMode || tripQueryVariables.modes?.transportModes
+                  ? {
+                      ...tripQueryVariables.modes,
+                      accessMode: undefined,
+                      egressMode: undefined,
+                    }
+                  : undefined,
+            });
+          }
+        }}
+        value={tripQueryVariables.modes?.accessMode || 'not_selected'}
+      >
+        <option value="not_selected">Not selected</option>
+        {Object.values(StreetMode).map((mode) => (
+          <option key={mode} value={mode}>
+            {mode}
+          </option>
+        ))}
+      </Form.Select>
+    </Form.Group>
+  );
+}
diff --git a/client-next/src/components/SearchBar/EgressSelect.tsx b/client-next/src/components/SearchBar/EgressSelect.tsx
@@ -0,0 +1,53 @@
+import { Form } from 'react-bootstrap';
+import { StreetMode, TripQueryVariables } from '../../gql/graphql.ts';
+
+export function EgressSelect({
+  tripQueryVariables,
+  setTripQueryVariables,
+}: {
+  tripQueryVariables: TripQueryVariables;
+  setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
+}) {
+  return (
+    <Form.Group>
+      <Form.Label column="sm" htmlFor="egressSelect">
+        Egress
+      </Form.Label>
+      <Form.Select
+        size="sm"
+        onChange={(e) => {
+          if (e.target.value !== 'not_selected') {
+            setTripQueryVariables({
+              ...tripQueryVariables,
+              modes: {
+                ...tripQueryVariables.modes,
+                accessMode: tripQueryVariables.modes?.accessMode || (e.target.value as StreetMode),
+                egressMode: e.target.value as StreetMode,
+              },
+            });
+          } else {
+            setTripQueryVariables({
+              ...tripQueryVariables,
+              modes:
+                tripQueryVariables.modes?.directMode || tripQueryVariables.modes?.transportModes
+                  ? {
+                      ...tripQueryVariables.modes,
+                      accessMode: undefined,
+                      egressMode: undefined,
+                    }
+                  : undefined,
+            });
+          }
+        }}
+        value={tripQueryVariables.modes?.egressMode || 'not_selected'}
+      >
+        <option value="not_selected">Not selected</option>
+        {Object.values(StreetMode).map((mode) => (
+          <option key={mode} value={mode}>
+            {mode}
+          </option>
+        ))}
+      </Form.Select>
+    </Form.Group>
+  );
+}
diff --git a/client-next/src/components/SearchBar/SearchBar.tsx b/client-next/src/components/SearchBar/SearchBar.tsx
@@ -5,6 +5,8 @@ import { DepartureArrivalSelect } from './DepartureArrivalSelect.tsx';
 import { TimeInputField } from './TimeInputField.tsx';
 import { DateInputField } from './DateInputField.tsx';
 import { SearchWindowInput } from './SearchWindowInput.tsx';
+import { AccessSelect } from './AccessSelect.tsx';
+import { EgressSelect } from './EgressSelect.tsx';
 
 export function SearchBar({
   onRoute,
@@ -24,6 +26,8 @@ export function SearchBar({
         <TimeInputField tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
         <DateInputField tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
         <SearchWindowInput tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+        <AccessSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+        <EgressSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
         <div className="search-bar-route-button-wrapper">
           <Button variant="primary" onClick={onRoute}>
             Route

diff --git a/client-next/src/hooks/useTripQuery.ts b/client-next/src/hooks/useTripQuery.ts
@@ -11,8 +11,15 @@ const endpoint = `https://api.entur.io/journey-planner/v3/graphql`;
   TODO: should live in a separate file, and split into fragments for readability
  */
 const query = graphql(`
-  query trip($from: Location!, $to: Location!, $arriveBy: Boolean, $dateTime: DateTime, $searchWindow: Int) {
-    trip(from: $from, to: $to, arriveBy: $arriveBy, dateTime: $dateTime, searchWindow: $searchWindow) {
+  query trip(
+    $from: Location!
+    $to: Location!
+    $arriveBy: Boolean
+    $dateTime: DateTime
+    $searchWindow: Int
+    $modes: Modes
+  ) {
+    trip(from: $from, to: $to, arriveBy: $arriveBy, dateTime: $dateTime, searchWindow: $searchWindow, modes: $modes) {
       tripPatterns {
         aimedStartTime
         aimedEndTime