Fix RouteLayout Pagination

i18n/english.yml

@@ -1157,6 +1157,14 @@ components:
     line: Line
     priority: Priority
     problemType: Problem Type
+  RouteLayout:
+    errorOccurred: An error occurred while trying to fetch the data
+    jumpToRoute: Jump to a Route
+    route: "Route:"
+    RouteRow:
+      patterns: "%num% Patterns"
+      stops: "%num% Stops"
+      trips: "%num% Trips"
   SelectFileModal:
     ok: OK
     cancel: Cancel

i18n/german.yml

@@ -1159,6 +1159,14 @@ components:
       und eine detailierte Beschreibung der Schritte, die Sie zuvor ausgeführt haben
       an <a href='mailto:%supportEmail%'>%supportEmail%</a>.
     view: Ansehen
+  RouteLayout:
+    errorOccurred: An error occurred while trying to fetch the data
+    jumpToRoute: Jump to a Route
+    route: "Route:"
+    RouteRow:
+      patterns: "%num% Patterns"
+      stops: "%num% Stops"
+      trips: "%num% Trips"
   SelectFileModal:
     cancel: Abbrechen
     ok: OK

i18n/polish.yml

@@ -1145,6 +1145,14 @@ components:
       the following text (current URL and error details), and a detailed description
       of the steps you followed to <a href='mailto:%supportEmail%'>%supportEmail%</a>.
     view: View
+  RouteLayout:
+    errorOccurred: An error occurred while trying to fetch the data
+    jumpToRoute: Jump to a Route
+    route: "Route:"
+    RouteRow:
+      patterns: "%num% Patterns"
+      stops: "%num% Stops"
+      trips: "%num% Trips"
   SelectFileModal:
     cancel: Cancel
     ok: OK

lib/manager/components/reporter/components/RouteLayout.js

@@ -17,13 +17,14 @@ import Loading from '../../../../common/components/Loading'
 import ActiveDateTimeFilter from '../containers/ActiveDateTimeFilter'
 import * as routesActions from '../../../../gtfs/actions/routes'
 import * as patternsActions from '../../../../gtfs/actions/patterns'
-import TripsPerHourChart from './TripsPerHourChart'
-
+import { getComponentMessages } from '../../../../common/util/config'
 import type {Props as ContainerProps} from '../containers/Routes'
 import type {RouteRowData} from '../../../selectors'
 import type {FetchStatus} from '../../../../types'
 import type {AllRoutesSubState, RouteListItem} from '../../../../types/reducers'
 
+import TripsPerHourChart from './TripsPerHourChart'
+
 type Props = ContainerProps & {
   allRoutes: AllRoutesSubState,
   fetchRouteDetails: typeof routesActions.fetchRouteDetails,
@@ -40,6 +41,8 @@ type Props = ContainerProps & {
 const PAGE_SIZE = 10
 
 export default class RouteLayout extends Component<Props> {
+  messages = getComponentMessages('RouteLayout')
+
   componentWillMount () {
     const {fetchRouteDetails, fetchRoutes, fetchStatus, version} = this.props
     const {namespace} = version
@@ -54,8 +57,9 @@ export default class RouteLayout extends Component<Props> {
     fetchRouteDetails(version.namespace)
   }
 
-  _onPaginationSelect = (value: number) => {
+  _onPaginationSelect = (e: SyntheticMouseEvent<HTMLSpanElement>) => {
     const {routeOffsetChange, version} = this.props
+    const value = +e.currentTarget.textContent
     routeOffsetChange({
       namespace: version.namespace,
       offset: (value - 1) * PAGE_SIZE
@@ -98,18 +102,33 @@ export default class RouteLayout extends Component<Props> {
     // order to see items 1 - 4).
     const extraPage = +(routeOffset % PAGE_SIZE > 0)
     const activePage = Math.floor(routeOffset / PAGE_SIZE) + 1 + extraPage
+    const numPages = Math.ceil(numRoutes / PAGE_SIZE)
+
+    const paginationItems = []
+    for (let pageNum = 1; pageNum <= numPages; pageNum++) {
+      paginationItems.push(
+        <Pagination.Item
+          active={pageNum === activePage}
+          key={pageNum}
+          onClick={this._onPaginationSelect}
+        >
+          {pageNum}
+        </Pagination.Item>
+      )
+    }
 
     return (
       <div>
         {allRoutes !== null && allRoutes.data !== null && <Row>
           <Col xs={12} md={6}>
-            <label htmlFor='route_name'>Route:</label>
+            <label htmlFor='route_name'>{this.messages('route')}</label>
             <Select
               id='route_name'
+              // $FlowFixMe: Flow does not recognize null check for allRoutes.data
               options={allRoutes.data.map((r, index) => ({...r, index}))}
               labelKey={'route_name'}
               valueKey={'route_id'}
-              placeholder={'Jump to a Route'}
+              placeholder={this.messages('jumpToRoute')}
               // value={routeFilter}
               onChange={this._onSelectRoute} />
           </Col>
@@ -125,7 +144,7 @@ export default class RouteLayout extends Component<Props> {
 
         {error &&
           <Alert bsStyle='danger'>
-            An error occurred while trying to fetch the data
+            {this.messages('errorOccurred')}
           </Alert>
         }
 
@@ -144,16 +163,13 @@ export default class RouteLayout extends Component<Props> {
                     selectTab={selectTab} />
                 ))}
               </ListGroup>
-              <Pagination
-                activePage={activePage}
-                bsSize='large'
-                ellipsis
-                first
-                items={Math.ceil(numRoutes / PAGE_SIZE)}
-                last
-                next
-                onSelect={this._onPaginationSelect}
-                prev />
+              {numPages > 1 &&
+                <div>
+                  <Pagination bsSize='small'>
+                    {paginationItems}
+                  </Pagination>
+                </div>
+              }
             </Col>
           </Row>
         }
@@ -171,6 +187,8 @@ class RouteRow extends Pure {
     selectTab: string => void
   }
 
+  messages = getComponentMessages('RouteLayout')
+
   _changePatternRouteFilter (tabToSelect: string) {
     const {namespace, patternRouteFilterChange, selectTab} = this.props
     patternRouteFilterChange(namespace, this.props.routeId)
@@ -218,17 +236,17 @@ class RouteRow extends Pure {
           </Col>
           <Col xs={12} md={2} style={{textAlign: 'center'}}>
             <Button onClick={this._onStopsClick}>
-              <h5>{numStops} Stops</h5>
+              <h5>{this.messages('RouteRow.stops').replace('%num%', numStops.toString())}</h5>
             </Button>
           </Col>
           <Col xs={12} md={2} style={{textAlign: 'center'}}>
             <Button onClick={this._onTripsClick}>
-              <h5>{numTrips} Trips</h5>
+              <h5>{this.messages('RouteRow.trips').replace('%num%', numTrips.toString())}</h5>
             </Button>
           </Col>
           <Col xs={12} md={2} style={{textAlign: 'center'}}>
             <Button onClick={this._onPatternsClick}>
-              <h5>{numPatterns} Patterns</h5>
+              <h5>{this.messages('RouteRow.patterns').replace('%num%', numPatterns.toString())}</h5>
             </Button>
           </Col>
         </Row>