Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(itinerary): add walking step instructions #817

Merged
merged 7 commits into from
Nov 19, 2024
Merged

feat(itinerary): add walking step instructions #817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
dc2c0c4
feat(itinerary): add walking step instructions
Nov 13, 2024
30864df
feat(itinerary): extend circle line for steps
Nov 15, 2024
2bacdc7
feat(translations): add missing strings for en
Nov 15, 2024
58f3691
fix(tests): fix walk leg unit tests
Nov 15, 2024
0992b5f
feat(itinerary): add direction icons and update strings
Nov 18, 2024
81819a9
feat(itinerary): focus to walking leg step
Nov 18, 2024
8d57f8e
feat(itinerary): add more leg step instructions and icons
Nov 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 25 additions & 16 deletions app/component/ItineraryCircleLineWithIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ class ItineraryCircleLineWithIcon extends React.Component {
static defaultProps = {
isVia: false,
color: null,
hideIcons: false,
};

static propTypes = {
Expand All @@ -20,6 +21,7 @@ class ItineraryCircleLineWithIcon extends React.Component {
color: PropTypes.string,
appendClass: PropTypes.string,
icon: PropTypes.string,
hideIcons: PropTypes.bool,
};

state = {
Expand Down Expand Up @@ -107,6 +109,9 @@ class ItineraryCircleLineWithIcon extends React.Component {
) {
// eslint-disable-next-line global-require
legBeforeLineStyle.backgroundImage = this.state.imageUrl;
if (this.props.hideIcons) {
legBeforeLineStyle.height = '100%';
}
}
return (
<div
Expand All @@ -116,7 +121,7 @@ class ItineraryCircleLineWithIcon extends React.Component {
})}
aria-hidden="true"
>
{topMarker}
{!this.props.hideIcons && topMarker}

<div
style={legBeforeLineStyle}
Expand All @@ -126,21 +131,25 @@ class ItineraryCircleLineWithIcon extends React.Component {
this.props.appendClass,
)}
/>
<RouteNumber
appendClass={this.props.appendClass}
mode={this.props.modeClassName}
icon={this.props.icon}
vertical
/>
<div
style={legBeforeLineStyle}
className={cx(
'leg-before-line',
this.props.modeClassName,
'bottom',
this.props.appendClass,
)}
/>
{!this.props.hideIcons && (
<>
<RouteNumber
appendClass={this.props.appendClass}
mode={this.props.modeClassName}
icon={this.props.icon}
vertical
/>
<div
style={legBeforeLineStyle}
className={cx(
'leg-before-line',
this.props.modeClassName,
'bottom',
this.props.appendClass,
)}
/>
</>
)}
</div>
);
}
Expand Down
9 changes: 9 additions & 0 deletions app/component/ItineraryLegs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ class ItineraryLegs extends React.Component {
toggleCanceledLegsBanner: PropTypes.func.isRequired,
waitThreshold: PropTypes.number.isRequired,
focusToLeg: PropTypes.func,
focusToStep: PropTypes.func,
toggleCarpoolDrawer: PropTypes.func,
};

Expand Down Expand Up @@ -85,6 +86,11 @@ class ItineraryLegs extends React.Component {
this.props.focusToLeg(leg);
};

focusToStep = position => e => {
e.stopPropagation();
this.props.focusToStep(position.lat, position.lon);
};

stopCode = stop => stop && stop.code && <StopCode code={stop.code} />;

printItinerary = e => {
Expand Down Expand Up @@ -222,6 +228,7 @@ class ItineraryLegs extends React.Component {
previousLeg={previousLeg}
focusAction={this.focus(leg.from)}
focusToLeg={this.focusToLeg(leg)}
focusToStep={this.focusToStep}
startTime={startTime}
>
{this.stopCode(leg.from.stop)}
Expand Down Expand Up @@ -412,6 +419,8 @@ class ItineraryLegs extends React.Component {
previousLeg={compressedLegs[numberOfLegs - 2]}
focusAction={this.focus(compressedLegs[numberOfLegs - 1].to)}
focusToLeg={this.focusToLeg(compressedLegs[numberOfLegs - 1])}
focusToPoint={this.focus}
focusToStep={this.focusToStep}
>
{this.stopCode(compressedLegs[numberOfLegs - 1].to.stop)}
</WalkLeg>,
Expand Down
76 changes: 50 additions & 26 deletions app/component/ItineraryTab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ class ItineraryTab extends React.Component {
itinerary: ItineraryShape.isRequired,
focusToPoint: PropTypes.func.isRequired,
focusToLeg: PropTypes.func.isRequired,
focusToStep: PropTypes.func.isRequired,
isMobile: PropTypes.bool.isRequired,
currentTime: PropTypes.number.isRequired,
hideTitle: PropTypes.bool,
Expand All @@ -94,7 +95,7 @@ class ItineraryTab extends React.Component {
fares: [],
lang: '',
fetchedFares: false,
}
};

handleFocus = (lat, lon) => {
this.props.focusToPoint(lat, lon);
Expand Down Expand Up @@ -184,14 +185,14 @@ class ItineraryTab extends React.Component {
componentDidMount() {
const { itinerary } = this.props;
const { config } = this.context;

if (!this.state.fetchedFares && config.URL?.FARES) {
fetchFares(itinerary, config.URL.FARES)
.then(data => {
this.setState({
fares: data,
lang: this.context.getStore('PreferencesStore').getLanguage(),
fetchedFares: true
fetchedFares: true,
});
})
// eslint-disable-next-line no-console
Expand All @@ -200,7 +201,7 @@ class ItineraryTab extends React.Component {
this.setState({
fares: itinerary.fares,
lang: this.context.getStore('PreferencesStore').getLanguage(),
fetchedFares: true
fetchedFares: true,
});
}
}
Expand All @@ -213,7 +214,12 @@ class ItineraryTab extends React.Component {
return null;
}

const fares = getFares(this.state.fares, getRoutes(itinerary.legs), config, this.state.lang)
const fares = getFares(
this.state.fares,
getRoutes(itinerary.legs),
config,
this.state.lang,
);
const extraProps = this.setExtraProps(itinerary);
const legsWithRentalBike = compressLegs(itinerary.legs).filter(leg =>
legContainsRentalBike(leg),
Expand Down Expand Up @@ -318,33 +324,35 @@ class ItineraryTab extends React.Component {
'bp-large': breakpoint === 'large',
})}
>
{shouldShowFareInfo(config) && config.displayFareInfoTop &&
fares.some(fare => fare.isUnknown) && (
<div className="disclaimer-container unknown-fare-disclaimer__top">
<div className="icon-container">
<Icon className="info" img="icon-icon_info" />
</div>
<div className="description-container">
<FormattedMessage
id="separate-ticket-required-disclaimer"
values={{
agencyName: get(
config,
'ticketInformation.primaryAgencyName',
),
}}
/>
{shouldShowFareInfo(config) &&
config.displayFareInfoTop &&
fares.some(fare => fare.isUnknown) && (
<div className="disclaimer-container unknown-fare-disclaimer__top">
<div className="icon-container">
<Icon className="info" img="icon-icon_info" />
</div>
<div className="description-container">
<FormattedMessage
id="separate-ticket-required-disclaimer"
values={{
agencyName: get(
config,
'ticketInformation.primaryAgencyName',
),
}}
/>
</div>
</div>
</div>
)}
)}
<ItineraryLegs
fares={fares}
itinerary={itinerary}
focusToPoint={this.handleFocus}
focusToLeg={this.props.focusToLeg}
focusToStep={this.props.focusToStep}
toggleCarpoolDrawer={this.props.toggleCarpoolDrawer}
/>
{ this.shouldShowCarpoolDisclaimer(itinerary, config) && (
{this.shouldShowCarpoolDisclaimer(itinerary, config) && (
<div className="itinerary-disclaimer">
<div className="info-container">
<div className="icon-container">
Expand All @@ -355,8 +363,8 @@ class ItineraryTab extends React.Component {
</div>
</div>
</div>
)}
)}

{shouldShowFareInfo(config) && (
<TicketInformation
fares={fares}
Expand Down Expand Up @@ -539,6 +547,22 @@ const withRelay = createFragmentContainer(
bookingUrl
}
}
steps {
distance
lon
lat
relativeDirection
absoluteDirection
streetName
exit
stayOn
area
walkingBike
bogusName
alerts {
feed
}
}
legGeometry {
length
points
Expand Down
47 changes: 46 additions & 1 deletion app/component/SummaryPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -755,6 +755,22 @@ class SummaryPage extends React.Component {
legs {
mode
...ItineraryLine_legs
steps {
distance
lon
lat
relativeDirection
absoluteDirection
streetName
exit
stayOn
area
walkingBike
bogusName
alerts {
feed
}
}
legGeometry {
points
}
Expand Down Expand Up @@ -1437,6 +1453,22 @@ class SummaryPage extends React.Component {
mode
...ItineraryLine_legs
transitLeg
steps {
distance
lon
lat
relativeDirection
absoluteDirection
streetName
exit
stayOn
area
walkingBike
bogusName
alerts {
feed
}
}
legGeometry {
points
}
Expand Down Expand Up @@ -2020,7 +2052,10 @@ class SummaryPage extends React.Component {
this.expandMap += 1;
}
this.navigateMap();
this.setState({ center: { lat, lon }, bounds: null });
this.setState({
center: { lat, lon },
bounds: null,
});
};

focusToLeg = leg => {
Expand All @@ -2046,6 +2081,15 @@ class SummaryPage extends React.Component {
});
};

focusToStep = (lat, lon) => {
this.setState({
bounds: [
[lat, lon],
[lat, lon],
],
});
};

// These are icons that contains sun
dayNightIconIds = [1, 2, 21, 22, 23, 41, 42, 43, 61, 62, 71, 72, 73];

Expand Down Expand Up @@ -2947,6 +2991,7 @@ class SummaryPage extends React.Component {
itinerary={itinerary}
focusToPoint={this.focusToPoint}
focusToLeg={this.focusToLeg}
focusToStep={this.focusToStep}
isMobile={false}
toggleCarpoolDrawer={this.toggleCarpoolDrawer}
/>
Expand Down
Loading
Loading