diff --git a/lib/components/app/print-layout.js b/lib/components/app/print-layout.js
index 0222b0f0c..231c479ae 100644
--- a/lib/components/app/print-layout.js
+++ b/lib/components/app/print-layout.js
@@ -1,16 +1,17 @@
import BaseMap from '@opentripplanner/base-map'
import EndpointsOverlay from '@opentripplanner/endpoints-overlay'
+import TriMetLegIcon from '@opentripplanner/icons/lib/trimet-leg-icon'
+import PrintableItinerary from '@opentripplanner/printable-itinerary'
import TransitiveOverlay from '@opentripplanner/transitive-overlay'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { Button } from 'react-bootstrap'
import { connect } from 'react-redux'
-import PrintableItinerary from '../narrative/printable/printable-itinerary'
import { parseUrlQueryString } from '../../actions/form'
import { routingQuery } from '../../actions/api'
import { getActiveItinerary } from '../../util/state'
-import { getTimeFormat } from '../../util/time'
+import TripDetails from '../narrative/connected-trip-details'
class PrintLayout extends Component {
static propTypes = {
@@ -34,14 +35,14 @@ class PrintLayout extends Component {
}
componentDidMount () {
- const { location } = this.props
+ const { location, parseUrlQueryString } = this.props
// Add print-view class to html tag to ensure that iOS scroll fix only applies
// to non-print views.
const root = document.getElementsByTagName('html')[0]
root.setAttribute('class', 'print-view')
// Parse the URL query parameters, if present
if (location && location.search) {
- this.props.parseUrlQueryString()
+ parseUrlQueryString()
}
}
@@ -53,8 +54,24 @@ class PrintLayout extends Component {
root.removeAttribute('class')
}
+ /**
+ * Use one of the customIcons if provided,
+ * (similar to @opentriplanner/trip-form/ModeIcon)
+ * otherwise, fall back on TriMetLegIcon.
+ * TODO: Combine all custom icon rendering in one place.
+ */
+ customLegIcon = icons => {
+ return function ({leg, props}) {
+ // Check if there is a custom icon (exact match required).
+ if (icons && leg.mode in icons) {
+ return icons[leg.mode]
+ }
+ return TriMetLegIcon({leg, props})
+ }
+ }
+
render () {
- const { configCompanies, customIcons, itinerary, timeFormat } = this.props
+ const { config, customIcons, itinerary } = this.props
return (
{/* The header bar, including the Toggle Map and Print buttons */}
@@ -82,13 +99,15 @@ class PrintLayout extends Component {
}
{/* The main itinerary body */}
- {itinerary
- ?
- : null
+ {itinerary &&
+ <>
+
+
+
}
- {itinerary.legs.length > 0 && (
-
-
-
- Depart from {itinerary.legs[0].from.name}
-
-
-
- )}
- {itinerary.legs.map((leg, k) => leg.transitLeg
- ?
- : leg.hailedCar
- ?
- :
- )}
-
-
-
-
- Continues as{' '}
- {leg.routeShortName} {leg.routeLongName} {' '}
- to {leg.to.name}
-
-
-
- Get off at {leg.to.name} {' '}
- at {formatTime(leg.endTime, timeOptions)}
-
-
-
-
-
{getLegIcon(leg, customIcons)}
-
-
- {leg.routeShortName} {leg.routeLongName} to {leg.to.name}
-
-
-
- Board at {leg.from.name} {' '}
- at {formatTime(leg.startTime, timeOptions)}
-
-
- {interlineFollows
- ? Stay on board at {leg.to.name}
- :
- Get off at {leg.to.name} {' '}
- at {formatTime(leg.endTime, timeOptions)}
-
- }
-
-
-
-
-
{getLegIcon(leg, customIcons)}
-
-
- {legModeLabel} {' '}
- {!leg.hailedCar &&
- leg.distance > 0 &&
- {distanceString(leg.distance)} }
- to {getPlaceName(leg.to, configCompanies)}
-
- {!leg.hailedCar && (
-
- {leg.steps.map((step, k) => {
- return (
-
- {getStepDirection(step)} on {getStepStreetName(step)}
-
- )
- })}
-
- )}
-
-
-
{getLegIcon(leg, customIcons)}
-
-
- Take {tncData.displayName} to {leg.to.name}
-
-
-
- Estimated wait time for pickup:{' '}
- {formatDuration(tncData.estimatedArrival)}
-
-
- Estimated travel time:{' '}
- {formatDuration(leg.duration)} (does not account for traffic)
-
-
-
-
- {transitFare && (
- Transit Fare: {centsToString(transitFare)}
- )}
- {minTNCFare !== 0 && (
-
-
- {companies.toLowerCase()}
- {' '}
- Fare: {dollarsToString(minTNCFare)} - {dollarsToString(maxTNCFare)}
-
- )}
-
- )
- }
-
- // Compute calories burned.
- const { bikeDuration, caloriesBurned, walkDuration } = calculatePhysicalActivity(itinerary)
-
- const timeOptions = {
- format: timeFormat,
- offset: getTimeZoneOffset(itinerary)
- }
-
- return (
-
-
Trip Details
-
-
}
- summary={
-
- Depart {date.format(longDateFormat)}
- {this.props.routingType === 'ITINERARY' && at {formatTime(itinerary.startTime, timeOptions)} }
-
- }
- />
- {fare && (
-
}
- summary={fare}
- />
- )}
- {caloriesBurned > 0 && (
-
}
- summary={
Calories Burned: {Math.round(caloriesBurned)} }
- description={
-
- Calories burned is based on {Math.round(walkDuration / 60)} minute(s) {' '}
- spent walking and {Math.round(bikeDuration / 60)} minute(s) {' '}
- spent biking during this trip. Adapted from{' '}
-
- Dietary Guidelines for Americans 2005, page 16, Table 4
- .
-
- }
- />
- )}
-
-
-
{icon}
-
- {summary}
- {description && (
-
-
- )}
-
- {this.state.expanded && (
-
-
-
- {description}
-
- )}
-
-
-