From e657f347b0309c5e92ea9b202b1c7a74b61161c9 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 23 Mar 2020 11:37:11 -0400
Subject: [PATCH 1/7] refactor(trip-details): Replace TripDetails component
with its OTP-UI counterpart.
---
.../narrative/connected-trip-details.js | 17 ++
.../narrative/default/default-itinerary.js | 2 +-
.../narrative/line-itin/itin-body.js | 2 +-
.../printable/printable-itinerary.js | 2 +-
lib/components/narrative/trip-details.js | 157 ------------------
lib/index.js | 2 +-
package.json | 7 +-
yarn.lock | 89 +++++-----
8 files changed, 65 insertions(+), 213 deletions(-)
create mode 100644 lib/components/narrative/connected-trip-details.js
delete mode 100644 lib/components/narrative/trip-details.js
diff --git a/lib/components/narrative/connected-trip-details.js b/lib/components/narrative/connected-trip-details.js
new file mode 100644
index 000000000..ee9042b03
--- /dev/null
+++ b/lib/components/narrative/connected-trip-details.js
@@ -0,0 +1,17 @@
+import { connect } from 'react-redux'
+import TripDetails from '@opentripplanner/trip-details'
+
+import { getTimeFormat, getLongDateFormat } from '../../util/time'
+
+// 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)
diff --git a/lib/components/narrative/default/default-itinerary.js b/lib/components/narrative/default/default-itinerary.js
index b6b66a227..57f2717de 100644
--- a/lib/components/narrative/default/default-itinerary.js
+++ b/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'
diff --git a/lib/components/narrative/line-itin/itin-body.js b/lib/components/narrative/line-itin/itin-body.js
index c38ced30d..713e02b7b 100644
--- a/lib/components/narrative/line-itin/itin-body.js
+++ b/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'
diff --git a/lib/components/narrative/printable/printable-itinerary.js b/lib/components/narrative/printable/printable-itinerary.js
index ecb13c545..cf8d40cae 100644
--- a/lib/components/narrative/printable/printable-itinerary.js
+++ b/lib/components/narrative/printable/printable-itinerary.js
@@ -1,7 +1,7 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
-import TripDetails from '../trip-details'
+import TripDetails from '../connected-trip-details'
import { distanceString } from '../../../util/distance'
import { formatTime, formatDuration } from '../../../util/time'
import {
diff --git a/lib/components/narrative/trip-details.js b/lib/components/narrative/trip-details.js
deleted file mode 100644
index 0b7118d4f..000000000
--- a/lib/components/narrative/trip-details.js
+++ /dev/null
@@ -1,157 +0,0 @@
-import React, { Component } from 'react'
-import { connect } from 'react-redux'
-import { Button } from 'react-bootstrap'
-import { VelocityTransitionGroup } from 'velocity-react'
-import moment from 'moment'
-
-import { calculateFares, calculatePhysicalActivity, getTimeZoneOffset } from '../../util/itinerary'
-import { formatTime, getTimeFormat, getLongDateFormat } from '../../util/time'
-
-class TripDetails extends Component {
- render () {
- const { itinerary, timeFormat, longDateFormat } = this.props
- const date = moment(itinerary.startTime)
-
- // process the transit fare
- const { centsToString, dollarsToString, maxTNCFare, minTNCFare, transitFare } = calculateFares(itinerary)
- let companies
- itinerary.legs.forEach(leg => {
- if (leg.tncData) {
- companies = leg.tncData.company
- }
- })
- let fare
- if (transitFare || minTNCFare) {
- fare = (
-
- {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}
-
- )}
-
-
-
-
- )
- }
-}
-
-// connect to the redux store
-
-const mapStateToProps = (state, ownProps) => {
- const viewedTrip = state.otp.ui.viewedTrip
- return {
- viewedTrip,
- tripData: viewedTrip
- ? state.otp.transitIndex.trips[viewedTrip.tripId]
- : null
- }
-}
-
-const mapDispatchToProps = {
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(withLeaflet(TripViewerOverlay))
diff --git a/package.json b/package.json
index 445f85cbc..6a963e51f 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
"@opentripplanner/geocoder": "^0.0.18",
"@opentripplanner/location-field": "^0.0.18",
"@opentripplanner/trip-details": "^0.0.18",
+ "@opentripplanner/trip-viewer-overlay": "^0.0.18",
"bootstrap": "^3.3.7",
"clone": "^2.1.0",
"connected-react-router": "^6.5.2",
diff --git a/yarn.lock b/yarn.lock
index 89f6e994a..85016c4be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1394,6 +1394,15 @@
styled-icons "^9.1.0"
velocity-react "^1.4.3"
+"@opentripplanner/trip-viewer-overlay@^0.0.18":
+ version "0.0.18"
+ resolved "https://registry.yarnpkg.com/@opentripplanner/trip-viewer-overlay/-/trip-viewer-overlay-0.0.18.tgz#7e774378cc274caf7603aa14a08d4b57cd220b14"
+ integrity sha512-iz+KQBFRZORz36w10kXEUHhxS4CwTCXWb8xcLYAwh9LmWkHhbGXPnClwn6PJ+BPj0PcdvLukcQaCUpoxZggfqg==
+ dependencies:
+ "@mapbox/polyline" "^1.1.0"
+ "@opentripplanner/core-utils" "^0.0.18"
+ prop-types "^15.7.2"
+
"@semantic-release/commit-analyzer@^6.1.0":
version "6.2.0"
resolved "https://registry.yarnpkg.com/@semantic-release/commit-analyzer/-/commit-analyzer-6.2.0.tgz#5cd25ce67ba9ba5b46e47457505e63629e186695"
From b0e3cd51e405759bf94c4d748253845d495292f7 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 23 Mar 2020 12:35:23 -0400
Subject: [PATCH 3/7] refactor(narrative.css): Remove old trip-details styles.
---
lib/components/narrative/narrative.css | 52 --------------------------
1 file changed, 52 deletions(-)
diff --git a/lib/components/narrative/narrative.css b/lib/components/narrative/narrative.css
index 21c1ab760..ac8c4effa 100644
--- a/lib/components/narrative/narrative.css
+++ b/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;
From 6a6aaee4bb552ad9d11fb580e4e1cc19f9ad09bc Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 23 Mar 2020 14:16:16 -0400
Subject: [PATCH 4/7] fix(connected-trip-details): Bring back styling using
styled-components.
---
lib/components/narrative/connected-trip-details.js | 10 +++++++++-
1 file changed, 9 insertions(+), 1 deletion(-)
diff --git a/lib/components/narrative/connected-trip-details.js b/lib/components/narrative/connected-trip-details.js
index ee9042b03..cfdccb898 100644
--- a/lib/components/narrative/connected-trip-details.js
+++ b/lib/components/narrative/connected-trip-details.js
@@ -1,8 +1,16 @@
import { connect } from 'react-redux'
-import TripDetails from '@opentripplanner/trip-details'
+import styled from 'styled-components'
+import UITripDetails from '@opentripplanner/trip-details'
import { getTimeFormat, getLongDateFormat } from '../../util/time'
+const TripDetails = styled(UITripDetails)`
+ 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) => {
From cd26acfdc78624f2e4425af6d6ed4cf0be3a380e Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 23 Mar 2020 14:18:01 -0400
Subject: [PATCH 5/7] refactor(connected-trip-details): Rename imported class.
---
lib/components/narrative/connected-trip-details.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/lib/components/narrative/connected-trip-details.js b/lib/components/narrative/connected-trip-details.js
index cfdccb898..16183ea1e 100644
--- a/lib/components/narrative/connected-trip-details.js
+++ b/lib/components/narrative/connected-trip-details.js
@@ -1,10 +1,10 @@
import { connect } from 'react-redux'
import styled from 'styled-components'
-import UITripDetails from '@opentripplanner/trip-details'
+import TripDetailsBase from '@opentripplanner/trip-details'
import { getTimeFormat, getLongDateFormat } from '../../util/time'
-const TripDetails = styled(UITripDetails)`
+const TripDetails = styled(TripDetailsBase)`
border: 2px solid gray;
border-radius: 0;
padding: 6px 10px;
From b72c501084958eec8d1a037bfb9a52d54d5d9f17 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Mon, 23 Mar 2020 18:21:47 -0400
Subject: [PATCH 6/7] refactor(printable-itinerary): Replace PrintableItinerary
with its counterpart from OTP-UI.
Also change PrintLayout to support customIcons from configuration, and remove unused CSS.
---
lib/components/app/print-layout.js | 48 ++--
.../narrative/printable/itinerary.css | 33 ---
.../printable/printable-itinerary.js | 221 ------------------
lib/index.css | 1 -
package.json | 2 +
yarn.lock | 17 ++
6 files changed, 52 insertions(+), 270 deletions(-)
delete mode 100644 lib/components/narrative/printable/itinerary.css
delete mode 100644 lib/components/narrative/printable/printable-itinerary.js
diff --git a/lib/components/app/print-layout.js b/lib/components/app/print-layout.js
index d6d126747..fa00581df 100644
--- a/lib/components/app/print-layout.js
+++ b/lib/components/app/print-layout.js
@@ -2,15 +2,16 @@ import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Button } from 'react-bootstrap'
+import TriMetLegIcon from '@opentripplanner/icons/lib/trimet-leg-icon'
+import PrintableItinerary from '@opentripplanner/printable-itinerary'
import BaseMap from '../map/base-map'
import EndpointsOverlay from '../map/endpoints-overlay'
import TransitiveOverlay from '../map/transitive-overlay'
-import PrintableItinerary from '../narrative/printable/printable-itinerary'
+import TripDetails from '../narrative/connected-trip-details'
import { parseUrlQueryString } from '../../actions/form'
import { routingQuery } from '../../actions/api'
import { getActiveItinerary } from '../../util/state'
-import { getTimeFormat } from '../../util/time'
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 @opentraiplanner/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)
-
-
-
-