Add debug information for stop/quay ID and stay-seated transfers

client/src/components/ItineraryList/InterchangeInfo.tsx

@@ -0,0 +1,22 @@
+import logo from '../../static/img/stay-seated.svg';
+import { Leg } from '../../gql/graphql.ts';
+
+/**
+ * Displays an icon if a leg has a stay-seated transfer from the previous one.
+ */
+export function InterchangeInfo({ leg }: { leg: Leg }) {
+  if (leg.interchangeFrom?.staySeated) {
+    return (
+      <img
+        alt="Stay-seated transfer"
+        title="Stay-seated transfer"
+        src={logo}
+        width="20"
+        height="20"
+        className="d-inline-block align-middle"
+      />
+    );
+  } else {
+    return <></>;
+  }
+}

client/src/components/ItineraryList/ItineraryLegDetails.tsx

@@ -2,6 +2,7 @@ import { Leg, Mode } from '../../gql/graphql.ts';
 import { LegTime } from './LegTime.tsx';
 import { formatDistance } from '../../util/formatDistance.ts';
 import { formatDuration } from '../../util/formatDuration.ts';
+import { InterchangeInfo } from './InterchangeInfo.tsx';
 
 export function ItineraryLegDetails({ leg, isLast }: { leg: Leg; isLast: boolean }) {
   return (
@@ -10,8 +11,12 @@ export function ItineraryLegDetails({ leg, isLast }: { leg: Leg; isLast: boolean
         {formatDistance(leg.distance)}, {formatDuration(leg.duration)}
       </div>
       <div>
-        <LegTime aimedTime={leg.aimedStartTime} expectedTime={leg.expectedStartTime} hasRealtime={leg.realtime} /> -{' '}
-        <LegTime aimedTime={leg.aimedEndTime} expectedTime={leg.expectedEndTime} hasRealtime={leg.realtime} />
+        <InterchangeInfo leg={leg} />
+        <LegTime
+          aimedTime={leg.aimedStartTime}
+          expectedTime={leg.expectedStartTime}
+          hasRealtime={leg.realtime}
+        /> - <LegTime aimedTime={leg.aimedEndTime} expectedTime={leg.expectedEndTime} hasRealtime={leg.realtime} />
       </div>
       <div className="mode">
         <b>{leg.mode}</b>{' '}
@@ -24,7 +29,12 @@ export function ItineraryLegDetails({ leg, isLast }: { leg: Leg; isLast: boolean
           </>
         )}{' '}
         <div></div>
-        {leg.mode !== Mode.Foot && <u>{leg.fromPlace.name}</u>} {!isLast && <u>→ {leg.toPlace.name}</u>}
+        {leg.mode !== Mode.Foot && (
+          <>
+            <u title={leg.fromPlace.quay?.id}>{leg.fromPlace.name}</u> →{' '}
+          </>
+        )}{' '}
+        {!isLast && <u title={leg.toPlace.quay?.id}>{leg.toPlace.name}</u>}
       </div>
     </div>
   );

client/src/hooks/useTripQuery.ts

@@ -52,9 +52,15 @@ const query = graphql(`
           duration
           fromPlace {
             name
+            quay {
+              id
+            }
           }
           toPlace {
             name
+            quay {
+              id
+            }
           }
           toEstimatedCall {
             destinationDisplay {
@@ -71,6 +77,12 @@ const query = graphql(`
           pointsOnLink {
             points
           }
+          interchangeTo {
+            staySeated
+          }
+          interchangeFrom {
+            staySeated
+          }
         }
         systemNotices {
           tag