Skip to content

Commit

Permalink
Merge pull request #5918 from leonardehrenfried/debug-itinerary
Browse files Browse the repository at this point in the history
Prettify leg view in debug client
  • Loading branch information
leonardehrenfried authored Jun 20, 2024
2 parents 2257f88 + 9e16294 commit e8ea4dd
Show file tree
Hide file tree
Showing 11 changed files with 97 additions and 43 deletions.
2 changes: 1 addition & 1 deletion client-next/.env
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
VITE_API_URL=/otp/routers/default/transmodel/index/graphql
VITE_API_URL=/otp/transmodel/v3
VITE_DEBUG_STYLE_URL=/otp/routers/default/inspector/vectortile/style.json
2 changes: 1 addition & 1 deletion client-next/.env.development
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
VITE_API_URL=http://localhost:8080/otp/routers/default/transmodel/index/graphql
VITE_API_URL=http://localhost:8080/otp/transmodel/v3
VITE_DEBUG_STYLE_URL=http://localhost:8080/otp/routers/default/inspector/vectortile/style.json
35 changes: 21 additions & 14 deletions client-next/src/components/ItineraryList/ItineraryLegDetails.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,27 @@ import { formatDuration } from '../../util/formatDuration.ts';

export function ItineraryLegDetails({ leg, isLast }: { leg: Leg; isLast: boolean }) {
return (
<div style={{ border: '1px dotted grey' }}>
<LegTime aimedTime={leg.aimedStartTime} expectedTime={leg.expectedStartTime} hasRealtime={leg.realtime} />-{' '}
<LegTime aimedTime={leg.aimedEndTime} expectedTime={leg.expectedEndTime} hasRealtime={leg.realtime} />{' '}
<b>{leg.mode}</b>{' '}
{leg.line && (
<>
<u>
{leg.line.publicCode} {leg.toEstimatedCall?.destinationDisplay?.frontText}
</u>
, {leg.authority?.name}
</>
)}{' '}
{formatDistance(leg.distance)}, {formatDuration(leg.duration)}
{leg.mode !== Mode.Foot && <u>from {leg.fromPlace.name}</u>} {!isLast && <u>to {leg.toPlace.name}</u>}
<div className="itinerary-leg-details">
<div className="times">
{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} />
</div>
<div className="mode">
<b>{leg.mode}</b>{' '}
{leg.line && (
<>
<u>
{leg.line.publicCode} {leg.toEstimatedCall?.destinationDisplay?.frontText}
</u>
, {leg.authority?.name}
</>
)}{' '}
<div></div>
{leg.mode !== Mode.Foot && <u>{leg.fromPlace.name}</u>} {!isLast && <u>{leg.toPlace.name}</u>}
</div>
</div>
);
}
6 changes: 3 additions & 3 deletions client-next/src/components/ItineraryList/LegTime.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ export function LegTime({
}) {
return aimedTime !== expectedTime ? (
<>
<span style={{ color: 'red' }}>{formatTime(expectedTime)}</span>
<span style={{ textDecoration: 'line-through' }}>{formatTime(aimedTime)}</span>
<span style={{ color: 'red' }}>{formatTime(expectedTime, 'short')}</span>
<span style={{ textDecoration: 'line-through' }}>{formatTime(aimedTime, 'short')}</span>
</>
) : (
<span>
{formatTime(expectedTime)}
{formatTime(expectedTime, 'short')}
{hasRealtime && <span> (on time)</span>}
</span>
);
Expand Down
3 changes: 3 additions & 0 deletions client-next/src/components/MapView/LayerControl.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,9 @@ class LayerControl implements IControl {
.getLayersOrder()
.map((l) => map.getLayer(l))
.filter((s) => s?.type !== 'raster')
// the polylines of the routing result are put in map layers called jsx-1, jsx-2...
// we don't want them to show up in the debug layer selector
.filter((s) => !s?.id.startsWith('jsx'))
.reverse()
.forEach((layer) => {
if (layer) {
Expand Down
33 changes: 33 additions & 0 deletions client-next/src/hooks/useTripQueryVariables.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { useEffect, useState } from 'react';
import { TripQueryVariables } from '../gql/graphql.ts';

const DEFAULT_VARIABLES: TripQueryVariables = {
from: {},
to: {},
dateTime: new Date().toISOString(),
};

const getInitialVariables = () => {
const urlParams = new URLSearchParams(window.location.search);
const variablesJson = urlParams.get('variables');
return variablesJson ? JSON.parse(decodeURIComponent(variablesJson)) : DEFAULT_VARIABLES;
};

const updateUrlWithVariables = (variables: TripQueryVariables) => {
const urlParams = new URLSearchParams(window.location.search);
urlParams.set('variables', encodeURIComponent(JSON.stringify(variables)));
history.pushState({}, '', '?' + urlParams.toString() + window.location.hash);
};

export const useTripQueryVariables = () => {
const [tripQueryVariables, setTripQueryVariables] = useState<TripQueryVariables>(getInitialVariables());

useEffect(() => {
updateUrlWithVariables(tripQueryVariables);
}, [tripQueryVariables]);

return {
tripQueryVariables,
setTripQueryVariables,
};
};
10 changes: 2 additions & 8 deletions client-next/src/screens/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,12 @@ import { MapView } from '../components/MapView/MapView.tsx';
import { SearchBar } from '../components/SearchBar/SearchBar.tsx';
import { ItineraryListContainer } from '../components/ItineraryList/ItineraryListContainer.tsx';
import { useState } from 'react';
import { TripQueryVariables } from '../gql/graphql.ts';
import { useTripQuery } from '../hooks/useTripQuery.ts';
import { useServerInfo } from '../hooks/useServerInfo.ts';

const INITIAL_VARIABLES: TripQueryVariables = {
from: {},
to: {},
dateTime: new Date().toISOString(),
};
import { useTripQueryVariables } from '../hooks/useTripQueryVariables.ts';

export function App() {
const [tripQueryVariables, setTripQueryVariables] = useState<TripQueryVariables>(INITIAL_VARIABLES);
const { tripQueryVariables, setTripQueryVariables } = useTripQueryVariables();
const [tripQueryResult, loading, callback] = useTripQuery(tripQueryVariables);
const serverInfo = useServerInfo();
const [selectedTripPatternIndex, setSelectedTripPatternIndex] = useState<number>(0);
Expand Down
17 changes: 17 additions & 0 deletions client-next/src/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,23 @@
--bs-accordion-active-bg: pink;
}

.itinerary-leg-details {
border: 1px solid #80808063;
padding: 10px;
border-radius: 3px;
margin-bottom: 3px;
}

.itinerary-leg-details .times {
margin-top: 3px;
float: right;
font-size: 11px;
}

.itinerary-leg-details .mode {
margin-top: 10px;
}

.itinerary-header-itinerary-number {
position: absolute;
}
Expand Down
28 changes: 14 additions & 14 deletions client-next/src/util/getColorForMode.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@ import { Mode } from '../gql/graphql.ts';

export const getColorForMode = function (mode: Mode) {
if (mode === Mode.Foot) return '#444';
if (mode === Mode.Bicycle) return '#44f';
if (mode === Mode.Scooter) return '#88f';
if (mode === Mode.Bicycle) return '#5076D9';
if (mode === Mode.Scooter) return '#253664';
if (mode === Mode.Car) return '#444';
if (mode === Mode.Rail) return '#b00';
if (mode === Mode.Coach) return '#0f0';
if (mode === Mode.Metro) return '#f00';
if (mode === Mode.Bus) return '#0f0';
if (mode === Mode.Tram) return '#f00';
if (mode === Mode.Trolleybus) return '#0f0';
if (mode === Mode.Water) return '#f0f';
if (mode === Mode.Air) return '#f0f';
if (mode === Mode.Cableway) return '#f0f';
if (mode === Mode.Funicular) return '#f0f';
if (mode === Mode.Monorail) return '#f0f';
if (mode === Mode.Taxi) return '#f0f';
if (mode === Mode.Rail) return '#86BF8B';
if (mode === Mode.Coach) return '#25642A';
if (mode === Mode.Metro) return '#D9B250';
if (mode === Mode.Bus) return '#25642A';
if (mode === Mode.Tram) return '#D9B250';
if (mode === Mode.Trolleybus) return '#25642A';
if (mode === Mode.Water) return '#81304C';
if (mode === Mode.Air) return '#81304C';
if (mode === Mode.Cableway) return '#81304C';
if (mode === Mode.Funicular) return '#81304C';
if (mode === Mode.Monorail) return '#81304C';
if (mode === Mode.Taxi) return '#81304C';
return '#aaa';
};
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ static StyleSpec build(
.lineColor(MAGENTA)
.edgeFilter(EDGES_TO_DISPLAY)
.lineWidth(LINE_WIDTH)
.minZoom(13)
.minZoom(6)
.maxZoom(MAX_ZOOM)
.intiallyHidden(),
StyleBuilder
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
"type" : "line",
"source" : "vectorSource",
"source-layer" : "edges",
"minzoom" : 13,
"minzoom" : 6,
"maxzoom" : 23,
"paint" : {
"line-color" : "#f21d52",
Expand Down

0 comments on commit e8ea4dd

Please sign in to comment.