{
return {
- languageConfig: state.otp.config.language
+ languageConfig: state.otp.config.language,
+ stop: ownProps.entity
}
}
diff --git a/lib/components/map/connected-stops-overlay.js b/lib/components/map/connected-stops-overlay.js
index ff77d1a07..d52f845f1 100644
--- a/lib/components/map/connected-stops-overlay.js
+++ b/lib/components/map/connected-stops-overlay.js
@@ -8,8 +8,13 @@ import { findStopsWithinBBox } from '../../actions/api'
const mapStateToProps = (state, ownProps) => {
return {
- StopMarker,
- stops: state.otp.overlay.transit.stops
+ stops: state.otp.overlay.transit.stops,
+ symbols: [
+ {
+ minZoom: 15,
+ symbol: StopMarker
+ }
+ ]
}
}
diff --git a/lib/components/mobile/main.js b/lib/components/mobile/main.js
index abec5db02..0eb07e688 100644
--- a/lib/components/mobile/main.js
+++ b/lib/components/mobile/main.js
@@ -50,7 +50,7 @@ class MobileMain extends Component {
// check for route viewer
if (uiState.mainPanelContent === MainPanelContent.ROUTE_VIEWER) {
- return
}
// check for viewed stop
diff --git a/lib/components/mobile/route-viewer.js b/lib/components/mobile/route-viewer.js
index 6293747b9..2c0f77715 100644
--- a/lib/components/mobile/route-viewer.js
+++ b/lib/components/mobile/route-viewer.js
@@ -12,6 +12,7 @@ import { setViewedRoute, setMainPanelContent } from '../../actions/ui'
class MobileRouteViewer extends Component {
static propTypes = {
+ ModeIcon: PropTypes.element.isRequired,
setViewedRoute: PropTypes.func,
setMainPanelContent: PropTypes.func
}
@@ -22,6 +23,7 @@ class MobileRouteViewer extends Component {
}
render () {
+ const { ModeIcon } = this.props
return (
)
diff --git a/lib/components/viewers/route-viewer.js b/lib/components/viewers/route-viewer.js
index cf3a51a83..597040a60 100644
--- a/lib/components/viewers/route-viewer.js
+++ b/lib/components/viewers/route-viewer.js
@@ -4,19 +4,13 @@ import PropTypes from 'prop-types'
import { Label, Button } from 'react-bootstrap'
import { VelocityTransitionGroup } from 'velocity-react'
import { connect } from 'react-redux'
+import styled from 'styled-components'
import Icon from '../narrative/icon'
import { setMainPanelContent, setViewedRoute } from '../../actions/ui'
import { findRoutes, findRoute } from '../../actions/api'
-
-function operatorIndexForRoute (transitOperators, route) {
- if (!route.agency) return 0
- const index = transitOperators.findIndex(o =>
- o.id.toLowerCase() === route.agency.id.split(':')[0].toLowerCase())
- if (index !== -1 && typeof transitOperators[index].order !== 'undefined') return transitOperators[index].order
- else return 0
-}
+import { getModeFromRoute } from '../../util/viewer'
/**
* Determine the appropriate contrast color for text (white or black) based on
@@ -38,6 +32,7 @@ function getContrastYIQ (hexcolor) {
class RouteViewer extends Component {
static propTypes = {
hideBackButton: PropTypes.bool,
+ ModeIcon: PropTypes.element.isRequired,
routes: PropTypes.object
}
@@ -52,19 +47,17 @@ class RouteViewer extends Component {
findRoute,
hideBackButton,
languageConfig,
+ ModeIcon,
transitOperators,
routes,
setViewedRoute,
viewedRoute
} = this.props
const sortedRoutes = routes
- ? Object.values(routes).sort(coreUtils.route.routeComparator)
+ ? Object.values(routes).sort(
+ coreUtils.route.makeRouteComparator(transitOperators)
+ )
: []
- const agencySortedRoutes = transitOperators.length > 0
- ? sortedRoutes.sort((a, b) => {
- return operatorIndexForRoute(transitOperators, a) - operatorIndexForRoute(transitOperators, b)
- })
- : sortedRoutes
return (
{/* Header Block */}
@@ -90,17 +83,20 @@ class RouteViewer extends Component {
- {agencySortedRoutes
+ {sortedRoutes
.map(route => {
// Find operator based on agency_id (extracted from OTP route ID).
- // TODO: re-implement multi-agency logos for route viewer.
- // const operator = operatorForRoute(transitOperators, route) || {}
+ const operator = coreUtils.route.getTransitOperatorFromOtpRoute(
+ route,
+ transitOperators
+ ) || {}
return (
@@ -113,6 +109,54 @@ class RouteViewer extends Component {
}
}
+const StyledRouteRow = styled.div`
+ background-color: ${props => props.isActive ? '#f6f8fa' : 'white'};
+ border-bottom: 1px solid gray;
+`
+
+const RouteRowButton = styled(Button)`
+ padding: 8px;
+ width: 100%;
+`
+
+const RouteRowElement = styled.div`
+ display: inline-block;
+ vertical-align: middle;
+`
+
+const OperatorImg = styled.img`
+ height: 25px;
+ margin-right: 8px;
+`
+
+const ModeIconElement = styled(RouteRowElement)`
+ height: 22px;
+`
+
+const RouteNameElement = styled(RouteRowElement)`
+ margin-top: 2px;
+`
+
+const StyledLabel = styled(Label)`
+ background-color: ${props => (
+ props.backgroundColor === '#ffffff'
+ ? 'rgba(0,0,0,0)'
+ : props.backgroundColor
+ )};
+ color: ${props => props.color};
+ margin-left: ${props => (
+ props.backgroundColor === '#ffffff' || props.backgroundColor === 'white'
+ ? 0
+ : '8px'
+ )};
+ font-size: medium;
+ font-weight: 400;
+`
+
+const RouteDetails = styled.div`
+ padding: 8px;
+`
+
class RouteRow extends PureComponent {
_onClick = () => {
const { findRoute, isActive, route, setViewedRoute } = this.props
@@ -126,17 +170,7 @@ class RouteRow extends PureComponent {
}
}
- render () {
- const {isActive, route, operator} = this.props
- const {defaultRouteColor, defaultRouteTextColor, longNameSplitter} = operator || {}
- const backgroundColor = `#${defaultRouteColor || route.color || 'ffffff'}`
- // NOTE: text color is not a part of short response route object, so there
- // is no way to determine from OTP what the text color should be if the
- // background color is, say, black. Instead, determine the appropriate
- // contrast color and use that if no text color is available.
- const contrastColor = getContrastYIQ(backgroundColor)
- const color = `#${defaultRouteTextColor || route.textColor || contrastColor}`
- // Default long name is empty string (long name is an optional GTFS value).
+ getCleanRouteLongName ({ route, longNameSplitter }) {
let longName = ''
if (route.longName) {
// Attempt to split route name if splitter is defined for operator (to
@@ -149,46 +183,55 @@ class RouteRow extends PureComponent {
// string.
if (longName === route.shortName) longName = ''
}
+ return longName
+ }
+
+ render () {
+ const {isActive, ModeIcon, route, operator} = this.props
+ const {defaultRouteColor, defaultRouteTextColor, longNameSplitter} = operator || {}
+ const backgroundColor = `#${defaultRouteColor || route.color || 'ffffff'}`
+ // NOTE: text color is not a part of short response route object, so there
+ // is no way to determine from OTP what the text color should be if the
+ // background color is, say, black. Instead, determine the appropriate
+ // contrast color and use that if no text color is available.
+ const contrastColor = getContrastYIQ(backgroundColor)
+ const color = `#${defaultRouteTextColor || route.textColor || contrastColor}`
+ // Default long name is empty string (long name is an optional GTFS value).
+ const longName = this.getCleanRouteLongName({ route, longNameSplitter })
return (
-
-
+
-
- {// TODO: re-implement multi-agency logos for route viewer.
- // Currently, the agency object is not nested within the get all
- // routes endpoint and causing this to only display transitOperators for
- // the selected route.
- // operator &&
+
+ {operator && operator.logo &&
+
-
+
+
+
+
+
{route.shortName} {longName}
-
-
-
+
+
+
{isActive && (
-
+
)}
-
+
)
}
}
diff --git a/lib/components/viewers/stop-viewer.js b/lib/components/viewers/stop-viewer.js
index 242c12533..5efc37347 100644
--- a/lib/components/viewers/stop-viewer.js
+++ b/lib/components/viewers/stop-viewer.js
@@ -250,12 +250,31 @@ class StopViewer extends Component {
stopData,
stopViewerArriving,
stopViewerConfig,
- timeFormat
+ timeFormat,
+ transitOperators
} = this.props
const { scheduleView, spin } = this.state
const hasStopTimesAndRoutes = !!(stopData && stopData.stopTimes && stopData.stopTimes.length > 0 && stopData.routes)
- // construct a lookup table mapping pattern (e.g. 'ROUTE_ID-HEADSIGN') to an array of stoptimes
+ // construct a lookup table mapping pattern (e.g. 'ROUTE_ID-HEADSIGN') to
+ // an array of stoptimes
const stopTimesByPattern = getStopTimesByPattern(stopData)
+ const routeComparator = coreUtils.route.makeRouteComparator(
+ transitOperators
+ )
+ const patternHeadsignComparator = coreUtils.route.makeStringValueComparator(
+ pattern => pattern.pattern.headsign
+ )
+ const patternComparator = (patternA, patternB) => {
+ // first sort by routes
+ const routeCompareValue = routeComparator(
+ patternA.route,
+ patternB.route
+ )
+ if (routeCompareValue !== 0) return routeCompareValue
+
+ // if same route, sort by headsign
+ return patternHeadsignComparator(patternA, patternB)
+ }
return (
{/* Header Block */}
@@ -268,7 +287,7 @@ class StopViewer extends Component {
? <>
{Object.values(stopTimesByPattern)
- .sort((a, b) => coreUtils.route.routeComparator(a.route, b.route))
+ .sort(patternComparator)
.map(patternTimes => {
// Only add pattern row if route is found.
// FIXME: there is currently a bug with the alernative transit index
@@ -344,7 +363,8 @@ const mapStateToProps = (state, ownProps) => {
stopData: state.otp.transitIndex.stops[state.otp.ui.viewedStop.stopId],
stopViewerArriving: state.otp.config.language.stopViewerArriving,
stopViewerConfig,
- timeFormat: getTimeFormat(state.otp.config)
+ timeFormat: getTimeFormat(state.otp.config),
+ transitOperators: state.otp.config.transitOperators
}
}
diff --git a/lib/components/viewers/viewer-container.js b/lib/components/viewers/viewer-container.js
index 0deb6b713..20fd071d2 100644
--- a/lib/components/viewers/viewer-container.js
+++ b/lib/components/viewers/viewer-container.js
@@ -9,15 +9,16 @@ import { MainPanelContent } from '../../actions/ui'
class ViewerContainer extends Component {
static propTypes = {
+ ModeIcon: PropTypes.element.isRequired,
uiState: PropTypes.object
}
render () {
- const { uiState } = this.props
+ const { ModeIcon, uiState } = this.props
// check for main panel content
if (uiState.mainPanelContent === MainPanelContent.ROUTE_VIEWER) {
- return