Merge remote-tracking branch 'upstream/dev-2.x' into upstream-merge-2…

…024-09-30

client/.env.development

@@ -1,3 +1,3 @@
 VITE_API_URL=http://localhost:8080/otp/transmodel/v3
 VITE_DEBUG_STYLE_URL=http://localhost:8080/otp/routers/default/inspector/vectortile/style.json
-VITE_GRAPHIQL_URL=http://localhost:8080/graphiql?flavor=transmodel
+VITE_GRAPHIQL_URL=http://localhost:8080/graphiql?flavor=transmodel

client/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "@googlemaps/polyline-codec": "1.0.28",
+    "@js-temporal/polyfill": "0.4.4",
     "bootstrap": "5.3.3",
     "graphql": "16.9.0",
     "graphql-request": "7.1.0",

client/src/components/ItineraryList/ItineraryHeaderContent.tsx

@@ -1,8 +1,9 @@
 import { TripPattern } from '../../gql/graphql.ts';
 import { TIME_BOX_WIDTH, useHeaderContentStyleCalculations } from './useHeaderContentStyleCalculations.ts';
 import { ItineraryHeaderLegContent } from './ItineraryHeaderLegContent.tsx';
-import { useMemo } from 'react';
+import { useContext, useMemo } from 'react';
 import { formatTime } from '../../util/formatTime.ts';
+import { TimeZoneContext } from '../../hooks/TimeZoneContext.ts';
 
 export function ItineraryHeaderContent({
   tripPattern,
@@ -24,14 +25,16 @@ export function ItineraryHeaderContent({
     latestEndTime,
   );
 
+  const timeZone = useContext(TimeZoneContext);
+
   const formattedStartTime = useMemo(
-    () => formatTime(tripPattern.expectedStartTime, 'short'),
-    [tripPattern.expectedStartTime],
+    () => formatTime(tripPattern.expectedStartTime, timeZone, 'short'),
+    [tripPattern.expectedStartTime, timeZone],
   );
 
   const formattedEndTime = useMemo(
-    () => formatTime(tripPattern.expectedEndTime, 'short'),
-    [tripPattern.expectedEndTime],
+    () => formatTime(tripPattern.expectedEndTime, timeZone, 'short'),
+    [tripPattern.expectedEndTime, timeZone],
   );
 
   return (

client/src/components/ItineraryList/ItineraryListContainer.tsx

@@ -5,6 +5,8 @@ import { ItineraryHeaderContent } from './ItineraryHeaderContent.tsx';
 import { useEarliestAndLatestTimes } from './useEarliestAndLatestTimes.ts';
 import { ItineraryDetails } from './ItineraryDetails.tsx';
 import { ItineraryPaginationControl } from './ItineraryPaginationControl.tsx';
+import { useContext } from 'react';
+import { TimeZoneContext } from '../../hooks/TimeZoneContext.ts';
 
 export function ItineraryListContainer({
   tripQueryResult,
@@ -21,6 +23,7 @@ export function ItineraryListContainer({
 }) {
   const [earliestStartTime, latestEndTime] = useEarliestAndLatestTimes(tripQueryResult);
   const { containerRef, containerWidth } = useContainerWidth();
+  const timeZone = useContext(TimeZoneContext);
 
   return (
     <section className="itinerary-list-container below-content" ref={containerRef}>
@@ -56,6 +59,9 @@ export function ItineraryListContainer({
             </Accordion.Item>
           ))}
       </Accordion>
+      <div className="time-zone-info">
+        All times in <code>{timeZone}</code>
+      </div>
     </section>
   );
 }

client/src/components/ItineraryList/LegTime.tsx

@@ -1,4 +1,6 @@
 import { formatTime } from '../../util/formatTime.ts';
+import { useContext } from 'react';
+import { TimeZoneContext } from '../../hooks/TimeZoneContext.ts';
 
 export function LegTime({
   aimedTime,
@@ -9,18 +11,19 @@ export function LegTime({
   expectedTime: string;
   hasRealtime: boolean;
 }) {
+  const timeZone = useContext(TimeZoneContext);
   return aimedTime !== expectedTime ? (
     <>
       <span title={expectedTime} style={{ color: 'red' }}>
-        {formatTime(expectedTime, 'short')}
+        {formatTime(expectedTime, timeZone, 'short')}
       </span>
       <span title={aimedTime} style={{ textDecoration: 'line-through' }}>
-        {formatTime(aimedTime, 'short')}
+        {formatTime(aimedTime, timeZone, 'short')}
       </span>
     </>
   ) : (
     <span title={expectedTime}>
-      {formatTime(expectedTime, 'short')}
+      {formatTime(expectedTime, timeZone, 'short')}
       {hasRealtime && <span> (on time)</span>}
     </span>
   );

client/src/components/SearchBar/DateTimeInputField.tsx

@@ -0,0 +1,42 @@
+import { Form } from 'react-bootstrap';
+import { TripQueryVariables } from '../../gql/graphql.ts';
+import { ChangeEvent, useCallback, useContext } from 'react';
+import { Temporal } from '@js-temporal/polyfill';
+import { TimeZoneContext } from '../../hooks/TimeZoneContext.ts';
+
+export function DateTimeInputField({
+  tripQueryVariables,
+  setTripQueryVariables,
+}: {
+  tripQueryVariables: TripQueryVariables;
+  setTripQueryVariables: (tripQueryVariables: TripQueryVariables) => void;
+}) {
+  const timeZone = useContext(TimeZoneContext);
+  const current = Temporal.Instant.from(tripQueryVariables.dateTime)
+    .toZonedDateTimeISO(timeZone)
+    .toPlainDateTime()
+    .toString({ smallestUnit: 'minute', calendarName: 'never' });
+
+  const onChange = useCallback(
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const dateTime = Temporal.PlainDateTime.from(event.target.value)
+        .toZonedDateTime(timeZone)
+        .toString({ calendarName: 'never', timeZoneName: 'never' });
+
+      setTripQueryVariables({
+        ...tripQueryVariables,
+        dateTime: dateTime,
+      });
+    },
+    [tripQueryVariables, setTripQueryVariables, timeZone],
+  );
+
+  return (
+    <Form.Group>
+      <Form.Label column="sm" htmlFor="timePicker" title={'Time zone: ' + timeZone}>
+        Time
+      </Form.Label>
+      <Form.Control type="datetime-local" id="timePicker" size="sm" onChange={onChange} value={current} />
+    </Form.Group>
+  );
+}

client/src/components/SearchBar/SearchBar.tsx

@@ -2,8 +2,7 @@ import { Button, Spinner } from 'react-bootstrap';
 import { ServerInfo, TripQueryVariables } from '../../gql/graphql.ts';
 import { LocationInputField } from './LocationInputField.tsx';
 import { DepartureArrivalSelect } from './DepartureArrivalSelect.tsx';
-import { TimeInputField } from './TimeInputField.tsx';
-import { DateInputField } from './DateInputField.tsx';
+import { DateTimeInputField } from './DateTimeInputField.tsx';
 import { SearchWindowInput } from './SearchWindowInput.tsx';
 import { AccessSelect } from './AccessSelect.tsx';
 import { EgressSelect } from './EgressSelect.tsx';
@@ -40,8 +39,7 @@ export function SearchBar({ onRoute, tripQueryVariables, setTripQueryVariables,
       <LocationInputField location={tripQueryVariables.from} label="From" id="fromInputField" />
       <LocationInputField location={tripQueryVariables.to} label="To" id="toInputField" />
       <DepartureArrivalSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
-      <TimeInputField tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
-      <DateInputField tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
+      <DateTimeInputField tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
       <NumTripPatternsInput tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
       <SearchWindowInput tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />
       <AccessSelect tripQueryVariables={tripQueryVariables} setTripQueryVariables={setTripQueryVariables} />

client/src/hooks/TimeZoneContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const TimeZoneContext = createContext('UTC');

client/src/hooks/useServerInfo.ts

@@ -13,6 +13,7 @@ const query = graphql(`
       routerConfigVersion
       gitCommit
       gitBranch
+      internalTransitModelTimeZone
     }
   }
 `);

client/src/screens/App.tsx

@@ -6,39 +6,43 @@ import { useState } from 'react';
 import { useTripQuery } from '../hooks/useTripQuery.ts';
 import { useServerInfo } from '../hooks/useServerInfo.ts';
 import { useTripQueryVariables } from '../hooks/useTripQueryVariables.ts';
+import { TimeZoneContext } from '../hooks/TimeZoneContext.ts';
 
 export function App() {
+  const serverInfo = useServerInfo();
   const { tripQueryVariables, setTripQueryVariables } = useTripQueryVariables();
   const [tripQueryResult, loading, callback] = useTripQuery(tripQueryVariables);
-  const serverInfo = useServerInfo();
   const [selectedTripPatternIndex, setSelectedTripPatternIndex] = useState<number>(0);
+  const timeZone = serverInfo?.internalTransitModelTimeZone || Intl.DateTimeFormat().resolvedOptions().timeZone;
 
   return (
     <div className="app">
-      <SearchBar
-        onRoute={callback}
-        tripQueryVariables={tripQueryVariables}
-        setTripQueryVariables={setTripQueryVariables}
-        serverInfo={serverInfo}
-        loading={loading}
-      />
-
-      <Stack direction="horizontal" gap={0}>
-        <ItineraryListContainer
-          tripQueryResult={tripQueryResult}
-          selectedTripPatternIndex={selectedTripPatternIndex}
-          setSelectedTripPatternIndex={setSelectedTripPatternIndex}
-          pageResults={callback}
-          loading={loading}
-        />
-        <MapView
-          tripQueryResult={tripQueryResult}
+      <TimeZoneContext.Provider value={timeZone}>
+        <SearchBar
+          onRoute={callback}
           tripQueryVariables={tripQueryVariables}
           setTripQueryVariables={setTripQueryVariables}
-          selectedTripPatternIndex={selectedTripPatternIndex}
+          serverInfo={serverInfo}
           loading={loading}
         />
-      </Stack>
+
+        <Stack direction="horizontal" gap={0}>
+          <ItineraryListContainer
+            tripQueryResult={tripQueryResult}
+            selectedTripPatternIndex={selectedTripPatternIndex}
+            setSelectedTripPatternIndex={setSelectedTripPatternIndex}
+            pageResults={callback}
+            loading={loading}
+          />
+          <MapView
+            tripQueryResult={tripQueryResult}
+            tripQueryVariables={tripQueryVariables}
+            setTripQueryVariables={setTripQueryVariables}
+            selectedTripPatternIndex={selectedTripPatternIndex}
+            loading={loading}
+          />
+        </Stack>
+      </TimeZoneContext.Provider>
     </div>
   );
 }

client/src/style.css

@@ -60,6 +60,12 @@
   overflow-y: auto;
 }
 
+.itinerary-list-container .time-zone-info {
+  margin: 10px 20px;
+  font-size: 12px;
+  text-align: right;
+}
+
 .itinerary-header-wrapper {
   position: relative;
   background: #0a53be;

client/src/util/formatTime.ts

@@ -4,10 +4,11 @@
  * If style argument is provided formatted with ('medium') or without ('short') seconds,
  * otherwise seconds are shown if not 0.
  */
-export function formatTime(dateTime: string, style?: 'short' | 'medium') {
+export function formatTime(dateTime: string, timeZone: string, style?: 'short' | 'medium') {
   const parsed = new Date(dateTime);
   return parsed.toLocaleTimeString('en-US', {
     timeStyle: style ? style : parsed.getSeconds() === 0 ? 'short' : 'medium',
     hourCycle: 'h24',
+    timeZone: timeZone,
   });
 }

doc/templates/BuildConfiguration.md

@@ -2,7 +2,7 @@
   NOTE! Part of this document is generated. Make sure you edit the template, not the generated doc.
 
    - Template directory is:  /doc/templates
-   - Generated directory is: /docs 
+   - Generated directory is: /doc/user 
 -->
 
 # Graph Build Configuration