Skip to content

Commit

Permalink
refactor(print-view): use getPlaceName for describing print access leg
Browse files Browse the repository at this point in the history
  • Loading branch information
@landonreed
landonreed committed Aug 14, 2019
1 parent 5b4294d commit ce93f97
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 20 deletions.
12 changes: 9 additions & 3 deletions lib/components/app/print-layout.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ class PrintLayout extends Component {
}

render () {
const { itinerary, companies, timeFormat } = this.props
const { companies, itinerary, timeFormat } = this.props
return (
<div className='otp print-layout'>
{/* The header bar, including the Toggle Map and Print buttons */}
Expand Down Expand Up @@ -87,7 +87,13 @@ class PrintLayout extends Component {
}

{/* The main itinerary body */}
{itinerary && <PrintableItinerary itinerary={itinerary} companies={companies} timeFormat={timeFormat} />}
{itinerary
? <PrintableItinerary
itinerary={itinerary}
companies={companies}
timeFormat={timeFormat} />
: null
}
</div>
)
}
Expand All @@ -98,7 +104,7 @@ class PrintLayout extends Component {
const mapStateToProps = (state, ownProps) => {
return {
itinerary: getActiveItinerary(state.otp),
companies: state.otp.currentQuery.companies,
companies: state.otp.config.companies,
timeFormat: getTimeFormat(state.otp.config)
}
}
Expand Down
74 changes: 57 additions & 17 deletions lib/components/narrative/printable/printable-itinerary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,21 @@ import PropTypes from 'prop-types'
import ModeIcon from '../../icons/mode-icon'
import TripDetails from '../trip-details'
import { formatTime, formatDuration } from '../../../util/time'
import { getLegModeLabel, getStepDirection, getStepStreetName, getTimeZoneOffset } from '../../../util/itinerary'
import {
getLegModeLabel,
getPlaceName,
getStepDirection,
getStepStreetName,
getTimeZoneOffset
} from '../../../util/itinerary'

export default class PrintableItinerary extends Component {
static propTypes = {
itinerary: PropTypes.object
}

render () {
const { itinerary, timeFormat } = this.props
const { companies, itinerary, timeFormat } = this.props

const timeOptions = {
format: timeFormat,
Expand All @@ -31,10 +37,22 @@ export default class PrintableItinerary extends Component {
</div>
)}
{itinerary.legs.map((leg, k) => leg.transitLeg
? <TransitLeg key={k} leg={leg} interlineFollows={k < itinerary.legs.length - 1 && itinerary.legs[k + 1].interlineWithPreviousLeg} timeOptions={timeOptions} />
? <TransitLeg
key={k}
leg={leg}
interlineFollows={k < itinerary.legs.length - 1 &&
itinerary.legs[k + 1].interlineWithPreviousLeg
}
timeOptions={timeOptions} />
: leg.hailedCar
? <TNCLeg leg={leg} timeOptions={timeOptions} />
: <AccessLeg key={k} leg={leg} timeOptions={timeOptions} />
? <TNCLeg
leg={leg}
timeOptions={timeOptions} />
: <AccessLeg
key={k}
leg={leg}
timeOptions={timeOptions}
companies={companies} />
)}
<TripDetails itinerary={itinerary} />
</div>
Expand All @@ -56,10 +74,15 @@ class TransitLeg extends Component {
<div className='leg collapse-top'>
<div className='leg-body'>
<div className='leg-header'>
Continues as <b>{leg.routeShortName} {leg.routeLongName}</b> to <b>{leg.to.name}</b>
Continues as{' '}
<b>{leg.routeShortName} {leg.routeLongName}</b>{' '}
to <b>{leg.to.name}</b>
</div>
<div className='leg-details'>
<div className='leg-detail'>Get off at <b>{leg.to.name}</b> at {formatTime(leg.endTime, timeOptions)}</div>
<div className='leg-detail'>
Get off at <b>{leg.to.name}</b>{' '}
at {formatTime(leg.endTime, timeOptions)}
</div>
</div>
</div>
</div>
Expand All @@ -74,11 +97,19 @@ class TransitLeg extends Component {
<b>{leg.routeShortName} {leg.routeLongName}</b> to <b>{leg.to.name}</b>
</div>
<div className='leg-details'>
<div className='leg-detail'>Board at <b>{leg.from.name}</b> at {formatTime(leg.startTime, timeOptions)}</div>
{interlineFollows
? <div className='leg-detail'>Stay on board at <b>{leg.to.name}</b></div>
: <div className='leg-detail'>Get off at <b>{leg.to.name}</b> at {formatTime(leg.endTime, timeOptions)}</div>
}
<div className='leg-detail'>
Board at <b>{leg.from.name}</b>{' '}
at {formatTime(leg.startTime, timeOptions)}
</div>
<div className='leg-detail'>
{interlineFollows
? <span>Stay on board at <b>{leg.to.name}</b></span>
: <span>
Get off at <b>{leg.to.name}</b>{' '}
at {formatTime(leg.endTime, timeOptions)}
</span>
}
</div>
</div>
</div>
</div>
Expand All @@ -92,19 +123,22 @@ class AccessLeg extends Component {
}

render () {
const { leg } = this.props
const { companies, leg } = this.props
return (
<div className='leg'>
<div className='mode-icon'><ModeIcon mode={leg.mode} /></div>
<div className='leg-body'>
<div className='leg-header'>
<b>{getLegModeLabel(leg)}</b> to <b>{leg.to.name}</b>
<b>{getLegModeLabel(leg)}</b>{' '}
to <b>{getPlaceName(leg.to, companies)}</b>
</div>
{!leg.hailedCar && (
<div className='leg-details'>
{leg.steps.map((step, k) => {
return (
<div key={k} className='leg-detail'>{getStepDirection(step)} on <b>{getStepStreetName(step)}</b></div>
<div key={k} className='leg-detail'>
{getStepDirection(step)} on <b>{getStepStreetName(step)}</b>
</div>
)
})}
</div>
Expand Down Expand Up @@ -133,8 +167,14 @@ class TNCLeg extends Component {
<b>Take {tncData.displayName}</b> to <b>{leg.to.name}</b>
</div>
<div className='leg-details'>
<div className='leg-detail'>Estimated wait time for pickup: <b>{formatDuration(tncData.estimatedArrival)}</b></div>
<div className='leg-detail'>Estimated travel time: <b>{formatDuration(leg.duration)}</b> (does not account for traffic)</div>
<div className='leg-detail'>
Estimated wait time for pickup:{' '}
<b>{formatDuration(tncData.estimatedArrival)}</b>
</div>
<div className='leg-detail'>
Estimated travel time:{' '}
<b>{formatDuration(leg.duration)}</b> (does not account for traffic)
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit ce93f97

Please sign in to comment.