From ab5f35bbcbde8c77dda999435807a30cc85a2715 Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Tue, 10 Dec 2024 08:32:19 +0200 Subject: [PATCH 1/3] extendedroutetypes for transit --- app/component/itinerary/navigator/NaviCard.js | 37 ++++++++++++------- .../itinerary/navigator/NaviCardExtension.js | 13 ++++++- .../itinerary/navigator/navigator.scss | 8 ++++ 3 files changed, 43 insertions(+), 15 deletions(-) diff --git a/app/component/itinerary/navigator/NaviCard.js b/app/component/itinerary/navigator/NaviCard.js index e48d845aac..3d0bd93fa7 100644 --- a/app/component/itinerary/navigator/NaviCard.js +++ b/app/component/itinerary/navigator/NaviCard.js @@ -1,12 +1,13 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import PropTypes from 'prop-types'; -import { legShape } from '../../../util/shapes'; +import { legShape, configShape } from '../../../util/shapes'; import Icon from '../../Icon'; import { isRental } from '../../../util/legUtils'; import NaviInstructions from './NaviInstructions'; import NaviCardExtension from './NaviCardExtension'; import { LEGTYPE } from './NaviUtils'; +import { ExtendedRouteTypes } from '../../../constants'; const iconMap = { BICYCLE: 'icon-icon_cyclist', @@ -19,18 +20,14 @@ const iconMap = { SUBWAY: 'icon-icon_subway', TRAM: 'icon-icon_tram', FERRY: 'icon-icon_ferry', + BUS_EXPRESS: 'icon-icon_bus-express', + SPEED_TRAM: 'icon-icon_speed-tram', }; -export default function NaviCard({ - leg, - nextLeg, - legType, - cardExpanded, - startTime, - time, - position, - origin, -}) { +export default function NaviCard( + { leg, nextLeg, legType, cardExpanded, startTime, time, position, origin }, + { config }, +) { if (legType === LEGTYPE.PENDING) { return (
- +
{ } if (legType === LEGTYPE.TRANSIT) { - const { intermediatePlaces, headsign, trip, realtimeState } = leg; + const { intermediatePlaces, headsign, trip, realtimeState, route } = leg; const hs = headsign || trip.tripHeadsign; const idx = intermediatePlaces.findIndex(p => legTime(p.arrival) > time); const count = idx > -1 ? intermediatePlaces.length - idx : 0; @@ -45,7 +46,15 @@ const NaviCardExtension = ({ legType, leg, nextLeg, time }, { config }) => { ); const translationId = count === 1 ? 'navileg-one-stop-remaining' : 'navileg-stops-remaining'; - const mode = leg.mode.toLowerCase(); + let mode; + if (route.type === ExtendedRouteTypes.BusExpress) { + mode = 'bus-express'; + } else if (route.type === ExtendedRouteTypes.SpeedTram) { + mode = 'speedtram'; + } else { + mode = leg.mode.toLowerCase(); + } + return (
diff --git a/app/component/itinerary/navigator/navigator.scss b/app/component/itinerary/navigator/navigator.scss index 254d15f523..107158b5a6 100644 --- a/app/component/itinerary/navigator/navigator.scss +++ b/app/component/itinerary/navigator/navigator.scss @@ -257,6 +257,14 @@ color: $bus-color; } + &.bus-express { + color: $bus-express-color; + } + + &.speedtram { + color: $speedtram-color; + } + &.tram-stop { color: $tram-color; } From a8acbd9398c481804009f099ae96f6a2263d9e20 Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Wed, 11 Dec 2024 09:43:16 +0200 Subject: [PATCH 2/3] use modeutils to determine routemode --- app/component/itinerary/navigator/NaviCard.js | 25 ++++++++----------- .../itinerary/navigator/NaviCardExtension.js | 11 ++------ .../itinerary/navigator/NaviInstructions.js | 12 ++++++--- 3 files changed, 22 insertions(+), 26 deletions(-) diff --git a/app/component/itinerary/navigator/NaviCard.js b/app/component/itinerary/navigator/NaviCard.js index 3d0bd93fa7..f5f75b8261 100644 --- a/app/component/itinerary/navigator/NaviCard.js +++ b/app/component/itinerary/navigator/NaviCard.js @@ -7,7 +7,7 @@ import { isRental } from '../../../util/legUtils'; import NaviInstructions from './NaviInstructions'; import NaviCardExtension from './NaviCardExtension'; import { LEGTYPE } from './NaviUtils'; -import { ExtendedRouteTypes } from '../../../constants'; +import { getRouteMode } from '../../../util/modeUtils'; const iconMap = { BICYCLE: 'icon-icon_cyclist', @@ -20,8 +20,9 @@ const iconMap = { SUBWAY: 'icon-icon_subway', TRAM: 'icon-icon_tram', FERRY: 'icon-icon_ferry', - BUS_EXPRESS: 'icon-icon_bus-express', - SPEED_TRAM: 'icon-icon_speed-tram', + 'BUS-EXPRESS': 'icon-icon_bus-express', + 'BUS-LOCAL': 'icon-icon_bus-local', + SPEEDTRAM: 'icon-icon_speedtram', }; export default function NaviCard( @@ -42,10 +43,14 @@ export default function NaviCard( if (!leg && !nextLeg) { return null; } + let iconColor = 'currentColor'; let iconName; - let instructions = ''; if (legType === LEGTYPE.TRANSIT) { + const m = getRouteMode(leg.route, config) || leg.mode; + iconColor = config.colors.iconColors[`mode-${m}`] || leg.route.color; + iconName = iconMap[m.toUpperCase()]; + instructions = `navileg-in-transit`; } else if (legType !== LEGTYPE.WAIT && isRental(leg, nextLeg)) { if (leg.mode === 'WALK' && nextLeg?.mode === 'SCOOTER') { @@ -53,18 +58,10 @@ export default function NaviCard( } else { instructions = 'rent-cycle-at'; } + iconName = iconMap[leg.mode]; } else if (legType === LEGTYPE.MOVE) { instructions = `navileg-${leg?.mode.toLowerCase()}`; - } - let iconColor = 'currentColor'; - if (leg?.route?.type === ExtendedRouteTypes.BusExpress) { - iconColor = config.colors.iconColors['mode-bus-express']; - iconName = iconMap.BUS_EXPRESS; - } else if (leg?.route?.type === ExtendedRouteTypes.SpeedTram) { - iconColor = config.colors.iconColors['mode-speedtram']; - iconName = iconMap.SPEED_TRAM; - } else { - iconName = legType === LEGTYPE.WAIT ? iconMap.WAIT : iconMap[leg.mode]; + iconName = iconMap.WALK; } return ( diff --git a/app/component/itinerary/navigator/NaviCardExtension.js b/app/component/itinerary/navigator/NaviCardExtension.js index 2bf162a6e9..98e4d8e199 100644 --- a/app/component/itinerary/navigator/NaviCardExtension.js +++ b/app/component/itinerary/navigator/NaviCardExtension.js @@ -9,7 +9,7 @@ import { getZoneLabel, legTime } from '../../../util/legUtils'; import ZoneIcon from '../../ZoneIcon'; import { legShape, configShape } from '../../../util/shapes'; import { getDestinationProperties, LEGTYPE } from './NaviUtils'; -import { ExtendedRouteTypes } from '../../../constants'; +import { getRouteMode } from '../../../util/modeUtils'; import RouteNumberContainer from '../../RouteNumberContainer'; @@ -46,14 +46,7 @@ const NaviCardExtension = ({ legType, leg, nextLeg, time }, { config }) => { ); const translationId = count === 1 ? 'navileg-one-stop-remaining' : 'navileg-stops-remaining'; - let mode; - if (route.type === ExtendedRouteTypes.BusExpress) { - mode = 'bus-express'; - } else if (route.type === ExtendedRouteTypes.SpeedTram) { - mode = 'speedtram'; - } else { - mode = leg.mode.toLowerCase(); - } + const mode = getRouteMode(route, config) || leg.mode; return (
diff --git a/app/component/itinerary/navigator/NaviInstructions.js b/app/component/itinerary/navigator/NaviInstructions.js index b4b1095595..9f3ff167e6 100644 --- a/app/component/itinerary/navigator/NaviInstructions.js +++ b/app/component/itinerary/navigator/NaviInstructions.js @@ -8,6 +8,7 @@ import { legDestination, legTimeStr, legTime } from '../../../util/legUtils'; import RouteNumber from '../../RouteNumber'; import { LEGTYPE, getLocalizedMode, pathProgress } from './NaviUtils'; import { durationToString } from '../../../util/timeUtils'; +import { getRouteMode } from '../../../util/modeUtils'; export default function NaviInstructions( { leg, nextLeg, instructions, legType, time, position, origin }, @@ -50,7 +51,6 @@ export default function NaviInstructions( if (legType === LEGTYPE.WAIT && nextLeg.mode !== 'WALK') { const { mode, headsign, route, start } = nextLeg; const hs = headsign || nextLeg.trip?.tripHeadsign; - const color = route.color || 'currentColor'; const localizedMode = getLocalizedMode(mode, intl); const remainingDuration = Math.ceil((legTime(start) - time) / 60000); // ms to minutes @@ -59,6 +59,12 @@ export default function NaviInstructions( duration: withRealTime(rt, remainingDuration), legTime: withRealTime(rt, legTimeStr(start)), }; + const routeMode = getRouteMode(route, config) || mode; + const iconColor = + config.colors.iconColors[`mode-${routeMode}`] || + route.color || + 'currentColor'; + return ( <>
@@ -71,11 +77,11 @@ export default function NaviInstructions(
{hs}
From b29bd2e79d5cd109928721da987f66fe49fcef07 Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Wed, 11 Dec 2024 12:39:45 +0200 Subject: [PATCH 3/3] add mode to query --- app/component/itinerary/PlanConnection.js | 1 + app/component/itinerary/navigator/NaviCard.js | 2 +- app/component/itinerary/navigator/NaviCardExtension.js | 2 +- app/component/itinerary/navigator/NaviInstructions.js | 2 +- app/component/itinerary/navigator/NaviUtils.js | 1 + 5 files changed, 5 insertions(+), 3 deletions(-) diff --git a/app/component/itinerary/PlanConnection.js b/app/component/itinerary/PlanConnection.js index b6f69f3aa4..d5ad43fe59 100644 --- a/app/component/itinerary/PlanConnection.js +++ b/app/component/itinerary/PlanConnection.js @@ -118,6 +118,7 @@ const planConnection = graphql` color gtfsId type + mode agency { name } diff --git a/app/component/itinerary/navigator/NaviCard.js b/app/component/itinerary/navigator/NaviCard.js index f5f75b8261..00658ff9ba 100644 --- a/app/component/itinerary/navigator/NaviCard.js +++ b/app/component/itinerary/navigator/NaviCard.js @@ -47,7 +47,7 @@ export default function NaviCard( let iconName; let instructions = ''; if (legType === LEGTYPE.TRANSIT) { - const m = getRouteMode(leg.route, config) || leg.mode; + const m = getRouteMode(leg.route, config); iconColor = config.colors.iconColors[`mode-${m}`] || leg.route.color; iconName = iconMap[m.toUpperCase()]; diff --git a/app/component/itinerary/navigator/NaviCardExtension.js b/app/component/itinerary/navigator/NaviCardExtension.js index 98e4d8e199..75c493550e 100644 --- a/app/component/itinerary/navigator/NaviCardExtension.js +++ b/app/component/itinerary/navigator/NaviCardExtension.js @@ -46,7 +46,7 @@ const NaviCardExtension = ({ legType, leg, nextLeg, time }, { config }) => { ); const translationId = count === 1 ? 'navileg-one-stop-remaining' : 'navileg-stops-remaining'; - const mode = getRouteMode(route, config) || leg.mode; + const mode = getRouteMode(route, config); return (
diff --git a/app/component/itinerary/navigator/NaviInstructions.js b/app/component/itinerary/navigator/NaviInstructions.js index 9f3ff167e6..ccadacc953 100644 --- a/app/component/itinerary/navigator/NaviInstructions.js +++ b/app/component/itinerary/navigator/NaviInstructions.js @@ -59,7 +59,7 @@ export default function NaviInstructions( duration: withRealTime(rt, remainingDuration), legTime: withRealTime(rt, legTimeStr(start)), }; - const routeMode = getRouteMode(route, config) || mode; + const routeMode = getRouteMode(route, config); const iconColor = config.colors.iconColors[`mode-${routeMode}`] || route.color || diff --git a/app/component/itinerary/navigator/NaviUtils.js b/app/component/itinerary/navigator/NaviUtils.js index 16483126ff..a8f21f8fbb 100644 --- a/app/component/itinerary/navigator/NaviUtils.js +++ b/app/component/itinerary/navigator/NaviUtils.js @@ -67,6 +67,7 @@ export const getAdditionalMessages = (leg, time, intl, config, messages) => { return msgs; }; +// TODO: DATA SHOULD BE UPDATED export const getTransitLegState = (leg, intl, messages, time) => { const { start, realtimeState, from, mode, legId, route, end } = leg; const { scheduledTime, estimated } = start;