Trip Details, Trip Viewer Overlay, and Printable Itinerary.

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 (
       <div className='otp print-layout'>
         {/* The header bar, including the Toggle Map and Print buttons */}
@@ -82,13 +99,15 @@ class PrintLayout extends Component {
         }
 
         {/* The main itinerary body */}
-        {itinerary
-          ? <PrintableItinerary
-            configCompanies={configCompanies}
-            customIcons={customIcons}
-            itinerary={itinerary}
-            timeFormat={timeFormat} />
-          : null
+        {itinerary &&
+          <>
+            <PrintableItinerary
+              config={config}
+              itinerary={itinerary}
+              LegIcon={this.customLegIcon(customIcons)}
+            />
+            <TripDetails itinerary={itinerary} />
+          </>
         }
       </div>
     )
@@ -99,9 +118,8 @@ class PrintLayout extends Component {
 
 const mapStateToProps = (state, ownProps) => {
   return {
-    itinerary: getActiveItinerary(state.otp),
-    configCompanies: state.otp.config.companies,
-    timeFormat: getTimeFormat(state.otp.config)
+    config: state.otp.config,
+    itinerary: getActiveItinerary(state.otp)
   }
 }
 

lib/components/narrative/connected-trip-details.js

@@ -0,0 +1,25 @@
+import { connect } from 'react-redux'
+import styled from 'styled-components'
+import TripDetailsBase from '@opentripplanner/trip-details'
+
+import { getTimeFormat, getLongDateFormat } from '../../util/time'
+
+const TripDetails = styled(TripDetailsBase)`
+  border: 2px solid gray;
+  border-radius: 0;
+  padding: 6px 10px;
+  margin: 16px 0 10px;
+`
+
+// Connect imported TripDetails class to redux store.
+
+const mapStateToProps = (state, ownProps) => {
+  return {
+    routingType: state.otp.currentQuery.routingType,
+    tnc: state.otp.tnc,
+    timeFormat: getTimeFormat(state.otp.config),
+    longDateFormat: getLongDateFormat(state.otp.config)
+  }
+}
+
+export default connect(mapStateToProps)(TripDetails)

lib/components/narrative/default/default-itinerary.js

@@ -3,7 +3,7 @@ import React from 'react'
 import NarrativeItinerary from '../narrative-itinerary'
 import ItinerarySummary from './itinerary-summary'
 import ItineraryDetails from './itinerary-details'
-import TripDetails from '../trip-details'
+import TripDetails from '../connected-trip-details'
 import TripTools from '../trip-tools'
 import { formatDuration, formatTime } from '../../../util/time'
 

lib/components/narrative/line-itin/itin-body.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import isEqual from 'lodash.isequal'
 
-import TripDetails from '../trip-details'
+import TripDetails from '../connected-trip-details'
 import TripTools from '../trip-tools'
 
 import PlaceRow from './place-row'

lib/components/narrative/narrative.css

@@ -116,58 +116,6 @@
   fontSize: 16px;
 }
 
-/* TRIP DETAILS */
-
-.otp .trip-details {
-  border: 2px solid gray;
-  padding: 6px 10px;
-  margin-top: 16px;
-}
-
-.otp .trip-details .trip-details-header {
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.otp .trip-details .trip-detail {
-  margin-top: 6px;
-}
-
-.otp .trip-details .trip-detail .icon {
-  float: left;
-  font-size: 17px;
-}
-
-.otp .trip-details .trip-detail .summary {
-  margin-left: 28px;
-  padding-top: 2px;
-}
-
-.otp .trip-details .trip-detail .expand-button {
-  margin-left: 6px;
-  margin-top: -2px;
-  font-size: 16px;
-  color: blue;
-}
-
-.otp .trip-details .trip-detail .description {
-  background-color: #fff;
-  border: 1px solid #888;
-  padding: 8px;
-  margin-top: 2px;
-  font-size: 12px;
-}
-
-.otp .trip-details .trip-detail b {
-  font-weight: 600;
-}
-
-.otp .trip-details .trip-detail .hide-button {
-  float: right;
-  top: 5;
-  right: 5;
-}
-
 /* TRIP TOOLS ROW */
 .otp .trip-tools {
   margin-top: 10px;