Merge pull request #52 from opentripplanner/dev

New release

Author: evansiroky

Diff for: .travis.yml

@@ -3,12 +3,13 @@ cache:
   yarn: true
 notifications:
   email: false
+  webhooks: https://outlook.office.com/webhook/03fa4a79-572f-4c68-b756-e4e851d0215a@9093f1a3-8771-4fb7-8596-d51eeef18cda/TravisCI/449087910d3647598cf3d7c6387fb8fc/286c079f-6085-4aa0-8f8d-e2a3e8d1f568
 node_js:
-  - '6'
+  - '8'
 before_install:
   - npm i -g yarn codecov
 after_success:
-  - yarn run semantic-release
+  - semantic-release
 before_script:
   - yarn global add codecov
 script:

Diff for: __tests__/actions/__snapshots__/api.js.snap

@@ -1,8 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`OTP Query Path 1`] = `"/api/plan?fromPlace=12%2C34&toPlace=34%2C12"`;
-
-exports[`actions > api > routingQuery should gracefully handle bad response 1`] = `
+exports[`actions > api routingQuery should gracefully handle bad response 1`] = `
 Array [
   Array [
     Object {
@@ -13,19 +11,10 @@ Array [
       "type": "ROUTING_REQUEST",
     },
   ],
-  Array [
-    Object {
-      "payload": Object {
-        "error": [Error: Received error from server],
-        "searchId": 2,
-      },
-      "type": "ROUTING_ERROR",
-    },
-  ],
 ]
 `;
 
-exports[`actions > api > routingQuery should make a query to OTP 1`] = `
+exports[`actions > api routingQuery should make a query to OTP 1`] = `
 Array [
   Array [
     Object {
@@ -36,16 +25,7 @@ Array [
       "type": "ROUTING_REQUEST",
     },
   ],
-  Array [
-    Object {
-      "payload": Object {
-        "response": Object {
-          "fake": "response",
-        },
-        "searchId": 1,
-      },
-      "type": "ROUTING_RESPONSE",
-    },
-  ],
 ]
 `;
+
+exports[`actions > api routingQuery should make a query to OTP: OTP Query Path 1`] = `"/api/plan?fromPlace=Origin%20%2812%2C34%29%3A%3A12%2C34&toPlace=Destination%20%2834%2C12%29%3A%3A34%2C12&mode=WALK%2CTRANSIT"`;

Diff for: __tests__/actions/__snapshots__/form.js.snap

@@ -2,12 +2,10 @@
 
 import nock from 'nock'
 
-import {timeoutPromise} from '../test-utils'
-
 import {routingQuery} from '../../lib/actions/api'
 
 describe('actions > api', () => {
-  describe('> routingQuery', () => {
+  describe('routingQuery', () => {
     const defaultState = {
       otp: {
         config: {
@@ -19,6 +17,7 @@ describe('actions > api', () => {
         },
         currentQuery: {
           from: { lat: 12, lon: 34 },
+          mode: 'WALK,TRANSIT',
           routingType: 'ITINERARY',
           to: { lat: 34, lon: 12 }
         },
@@ -31,21 +30,16 @@ describe('actions > api', () => {
 
       nock('http://mock-host.com')
         .get(/api\/plan/)
-        .reply(200, {
-          fake: 'response'
-        })
-        .on('request', (req, interceptor) => {
-          expect(req.path).toMatchSnapshot('OTP Query Path')
+        .reply(200, (uri, requestBody) => {
+          expect(uri).toMatchSnapshot('OTP Query Path')
+          return { fake: 'response' }
         })
 
       const mockDispatch = jest.fn()
-      routingQueryAction(mockDispatch, () => {
+      await routingQueryAction(mockDispatch, () => {
         return defaultState
       })
 
-      // wait for request to complete
-      await timeoutPromise(100)
-
       expect(mockDispatch.mock.calls).toMatchSnapshot()
     })
 
@@ -59,13 +53,10 @@ describe('actions > api', () => {
         })
 
       const mockDispatch = jest.fn()
-      routingQueryAction(mockDispatch, () => {
+      await routingQueryAction(mockDispatch, () => {
         return defaultState
       })
 
-      // wait for request to complete
-      await timeoutPromise(100)
-
       expect(mockDispatch.mock.calls).toMatchSnapshot()
     })
   })

Diff for: __tests__/actions/api.js

@@ -1,3 +1,6 @@
+// Test file renamed because it is no longer valid
+// TODO: write tests for form actions
+
 /* globals describe, expect, it, jest */
 
 import {timeoutPromise} from '../test-utils'

Diff for: __tests__/actions/form.js renamed to __tests__/actions/form.js_old

@@ -0,0 +1,3 @@
+window.localStorage = {
+  getItem: () => null
+}

Diff for: __tests__/test-utils/setup.js

@@ -1,3 +1,26 @@
+.otp .navbar {
+  border-radius: 0;
+  background-color: #444;
+}
+
+.otp .navbar .container {
+  margin-left: 0;
+}
+
+.otp .navbar-brand {
+  padding: 7px 10px;
+}
+
+.otp .navbar-title {
+  color: #fff;
+  font-size: 24px;
+  padding-top: 7px;
+}
+
+.otp.mobile .navbar-title {
+  padding-top: 2px;
+}
+
 .main-row {
   position: fixed;
   top: 52px;
@@ -18,7 +41,3 @@
   margin: 0px;
   padding: 0px;
 }
-
-.date-time-selector {
-  margin-top: 20px;
-}

Diff for: example.css

@@ -11,39 +11,32 @@ import { Navbar, Grid, Row, Col } from 'react-bootstrap'
 
 // import OTP-RR components
 import {
-  BaseLayers,
-  BaseMap,
-  BikeRentalOverlay,
-  DateTimeSelector,
-  EndpointsOverlay,
+  DefaultSearchForm,
   ErrorMessage,
-  ItineraryOverlay,
-  LocationField,
-  NarrativeItineraries,
-  PlanTripButton,
-  TransitiveOverlay,
-  SettingsSelectorPanel,
-  SwitchButton,
-
+  MobileMain,
+  NarrativeRoutingResults,
+  ResponsiveWebapp,
+  Map,
+  ViewerContainer,
+  AppMenu,
   createOtpReducer
 } from './lib'
 
 // load the OTP configuration
 import otpConfig from './config.yml'
 
 // create an initial query for demo/testing purposes
-/* const initialQuery = {
+const initialQuery = {
   from: {
-    name: 'PDX',
-    lat: 45.589180,
-    lon: -122.593460
+    lat: 45.5246,
+    lon: -122.6710
   },
   to: {
-    name: 'TTO',
-    lat: 45.518950,
-    lon: -122.679565
-  }
-} */
+    lat: 45.5307,
+    lon: -122.6647
+  },
+  type: 'ITINERARY'
+}
 
 // set up the Redux store
 const store = createStore(
@@ -57,42 +50,66 @@ const store = createStore(
 // define a simple responsive UI using Bootstrap and OTP-RR
 class OtpRRExample extends Component {
   render () {
-    return (<div className='otp'>
-      <Navbar fluid>
-        <Navbar.Brand>OpenTripPlanner</Navbar.Brand>
-      </Navbar>
-      <Grid fluid>
-        <Row className='main-row'>
-          <Col xs={12} md={4} className='sidebar'>
-            <LocationField type='from' label='Enter start location or click on map...' />
-            <LocationField type='to' label='Enter destination or click on map...' />
-            <SwitchButton />
-            <DateTimeSelector />
-            <SettingsSelectorPanel />
-            <ErrorMessage />
-            <PlanTripButton />
-            <NarrativeItineraries />
-          </Col>
 
-          <Col xsHidden md={8} className='map-container'>
-            <BaseMap>
-              <BaseLayers />
-              <BikeRentalOverlay />
-              <ItineraryOverlay />
-              <TransitiveOverlay />
-              <EndpointsOverlay />
-            </BaseMap>
-          </Col>
-        </Row>
-      </Grid>
-    </div>)
+    /** desktop view **/
+    const desktopView = (
+      <div className='otp'>
+        <Navbar>
+          <Navbar.Header>
+            <Navbar.Brand>
+              <div style={{ float: 'left', color: 'white', fontSize: 28 }}>
+                <AppMenu />
+              </div>
+              <div className='navbar-title' style={{ marginLeft: 50 }}>OpenTripPlanner</div>
+            </Navbar.Brand>
+          </Navbar.Header>
+        </Navbar>
+        <Grid>
+          <Row className='main-row'>
+            <Col sm={6} md={4} className='sidebar'>
+              <ViewerContainer>
+                <DefaultSearchForm />
+                <ErrorMessage />
+                <div className='desktop-narrative-container'>
+                  <NarrativeRoutingResults />
+                </div>
+              </ViewerContainer>
+            </Col>
+
+            <Col sm={6} md={8} className='map-container'>
+              <Map />
+            </Col>
+          </Row>
+        </Grid>
+      </div>
+    )
+
+    /** mobile view **/
+    const mobileView = (
+      <MobileMain map={(<Map />)} title={(<div className='navbar-title'>OpenTripPlanner</div>)} />
+    )
+
+    /** the main webapp **/
+    return (
+      <ResponsiveWebapp
+        desktopView={desktopView}
+        mobileView={mobileView}
+      />
+    )
   }
 }
 
 // render the app
 render(
   <Provider store={store}>
+    { /**
+     * If not using router history, simply include OtpRRExample here:
+     * e.g.
+     * <OtpRRExample />
+     */
+    }
     <OtpRRExample />
+
   </Provider>,
   document.getElementById('root')
 )

Diff for: example.js

@@ -5,10 +5,13 @@
     <title>OTP R.R.</title>
 
     <link rel="stylesheet" href="dist/index.css">
+    <link rel="stylesheet" href="node_modules/transitive-js/lib/transitive.css">
     <link rel="stylesheet" href="example.css">
+    <link rel="stylesheet" href="node_modules/leaflet.polylinemeasure/Leaflet.PolylineMeasure.css" />
+
   </head>
   <body>
     <div id="root"></div>
-    <script src="example.js"></script>
+    <script src="/example.js"></script>
   </body>
 </html>