Show alternate routes

src/Controls/Directions/Maneuvers.jsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import * as R from 'ramda'
 import { Header, Icon, Divider, Popup } from 'semantic-ui-react'
 
 import { highlightManeuver, zoomToManeuver } from 'actions/directionsActions'
@@ -17,15 +16,17 @@ const getLength = (length) => {
 class Maneuvers extends React.Component {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
-    results: PropTypes.object,
+    legs: PropTypes.object.isRequired,
+    idx: PropTypes.number.isRequired,
     header: PropTypes.string,
-    provider: PropTypes.string,
     profile: PropTypes.string,
   }
 
   highlightMnv = (sIdx, eIdx) => {
-    const { dispatch } = this.props
-    dispatch(highlightManeuver({ startIndex: sIdx, endIndex: eIdx }))
+    const { dispatch, idx } = this.props
+    dispatch(
+      highlightManeuver({ startIndex: sIdx, endIndex: eIdx, alternate: idx })
+    )
   }
 
   zoomToMnv = (sIdx) => {
@@ -34,9 +35,7 @@ class Maneuvers extends React.Component {
   }
 
   render() {
-    const { provider, results } = this.props
-
-    const legs = R.path([provider, 'data', 'trip', 'legs'], results)
+    const { legs } = this.props
 
     const startIndices = {
       0: 0,

src/Controls/Directions/OutputControl.jsx

@@ -24,8 +24,20 @@ class OutputControl extends React.Component {
   constructor(props) {
     super(props)
 
+    const { results } = this.props
+    const { data } = results[VALHALLA_OSM_URL]
+
+    let alternates = []
+
+    if (data.alternates) {
+      alternates = data.alternates.map((_, i) => i)
+    }
+
     this.state = {
-      showResults: false,
+      showResults: {
+        '-1': false,
+        ...alternates.reduce((acc, v) => ({ ...acc, [v]: false }), {}),
+      },
     }
     this.showManeuvers = this.showManeuvers.bind(this)
   }
@@ -37,14 +49,16 @@ class OutputControl extends React.Component {
     if (nextProps.activeTab === 0 && this.props.activeTab === 1) {
       nextProps.dispatch(makeRequest())
     }
-    // if (nextProps.activeTab === 1) {
-    //   return false
-    // }
     return true
   }
 
-  showManeuvers() {
-    this.setState({ showResults: !this.state.showResults })
+  showManeuvers(idx) {
+    this.setState({
+      showResults: {
+        ...this.state.showResults,
+        [idx]: !this.state.showResults[idx],
+      },
+    })
   }
 
   dateNow() {
@@ -83,53 +97,129 @@ class OutputControl extends React.Component {
   }
 
   render() {
-    const { successful } = this.props
+    const { results, successful } = this.props
 
-    return (
-      <Segment
-        style={{
-          margin: '0 1rem 10px',
-          display: successful ? 'block' : 'none',
-        }}
-      >
-        <div className={'flex-column'}>
-          <Summary provider={VALHALLA_OSM_URL} />
-          <div className={'flex justify-between'}>
-            <Button
-              size="mini"
-              toggle
-              active={this.state.showResults}
-              onClick={this.showManeuvers}
-            >
-              {this.state.showResults ? 'Hide Maneuvers' : 'Show Maneuvers'}
-            </Button>
-            <div className={'flex'}>
-              <div
-                className={'flex pointer'}
-                style={{ alignSelf: 'center' }}
-                onClick={this.exportToJson}
-              >
-                <Icon circular name={'download'} />
-                <div className={'pa1 b f6'}>{'JSON'}</div>
+    const data = results[VALHALLA_OSM_URL].data
+
+    let alternates = []
+    if (data.alternates) {
+      alternates = data.alternates.map((alternate, i) => {
+        const legs = alternate.trip.legs
+        return (
+          <Segment
+            key={`alternate_${i}`}
+            style={{
+              margin: '0 1rem 10px',
+              display: successful ? 'block' : 'none',
+            }}
+          >
+            <div className={'flex-column'}>
+              <Summary
+                header={`Alternate ${i + 1}`}
+                idx={i}
+                summary={alternate.trip.summary}
+              />
+              <div className={'flex justify-between'}>
+                <Button
+                  size="mini"
+                  toggle
+                  active={this.state.showResults[i]}
+                  onClick={() => this.showManeuvers(i)}
+                >
+                  {this.state.showResults[i]
+                    ? 'Hide Maneuvers'
+                    : 'Show Maneuvers'}
+                </Button>
+                <div className={'flex'}>
+                  <div
+                    className={'flex pointer'}
+                    style={{ alignSelf: 'center' }}
+                    onClick={this.exportToJson}
+                  >
+                    <Icon circular name={'download'} />
+                    <div className={'pa1 b f6'}>{'JSON'}</div>
+                  </div>
+                  <div
+                    className={'ml2 flex pointer'}
+                    style={{ alignSelf: 'center' }}
+                    onClick={this.exportToGeoJson}
+                  >
+                    <Icon circular name={'download'} />
+                    <div className={'pa1 b f6'}>{'GeoJSON'}</div>
+                  </div>
+                </div>
               </div>
-              <div
-                className={'ml2 flex pointer'}
-                style={{ alignSelf: 'center' }}
-                onClick={this.exportToGeoJson}
+
+              {this.state.showResults[i] ? (
+                <div className={'flex-column'}>
+                  <Maneuvers legs={legs} idx={i} />
+                </div>
+              ) : null}
+            </div>
+          </Segment>
+        )
+      })
+    }
+    if (!data.trip) {
+      return ''
+    }
+    return (
+      <>
+        <Segment
+          style={{
+            margin: '0 1rem 10px',
+            display: successful ? 'block' : 'none',
+          }}
+        >
+          <div className={'flex-column'}>
+            <Summary
+              header={'Directions'}
+              summary={data.trip.summary}
+              idx={-1}
+            />
+            <div className={'flex justify-between'}>
+              <Button
+                size="mini"
+                toggle
+                active={this.state.showResults[-1]}
+                onClick={() => this.showManeuvers(-1)}
               >
-                <Icon circular name={'download'} />
-                <div className={'pa1 b f6'}>{'GeoJSON'}</div>
+                {this.state.showResults[-1]
+                  ? 'Hide Maneuvers'
+                  : 'Show Maneuvers'}
+              </Button>
+              <div className={'flex'}>
+                <div
+                  className={'flex pointer'}
+                  style={{ alignSelf: 'center' }}
+                  onClick={this.exportToJson}
+                >
+                  <Icon circular name={'download'} />
+                  <div className={'pa1 b f6'}>{'JSON'}</div>
+                </div>
+                <div
+                  className={'ml2 flex pointer'}
+                  style={{ alignSelf: 'center' }}
+                  onClick={this.exportToGeoJson}
+                >
+                  <Icon circular name={'download'} />
+                  <div className={'pa1 b f6'}>{'GeoJSON'}</div>
+                </div>
               </div>
             </div>
-          </div>
 
-          {this.state.showResults ? (
-            <div className={'flex-column'}>
-              <Maneuvers provider={VALHALLA_OSM_URL} />
-            </div>
-          ) : null}
-        </div>
-      </Segment>
+            {this.state.showResults[-1] ? (
+              <div className={'flex-column'}>
+                <Maneuvers
+                  legs={data.trip ? data.trip.legs : undefined}
+                  idx={-1}
+                />
+              </div>
+            ) : null}
+          </div>
+        </Segment>
+        {alternates.length ? alternates : ''}
+      </>
     )
   }
 }

src/Controls/Directions/Summary.jsx

@@ -1,37 +1,37 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import * as R from 'ramda'
 
 import { Icon, Checkbox, Popup } from 'semantic-ui-react'
 import { showProvider } from '../../actions/directionsActions'
 
 import formatDuration from 'utils/date_time'
+import { VALHALLA_OSM_URL } from 'utils/valhalla'
 class Summary extends React.Component {
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     results: PropTypes.object,
     inclineDeclineTotal: PropTypes.object,
-    header: PropTypes.string,
+    summary: PropTypes.object.isRequired,
+    header: PropTypes.string.isRequired,
+    idx: PropTypes.number.isRequired,
     provider: PropTypes.string,
   }
 
   handleChange = (event, data) => {
-    const { dispatch } = this.props
-    dispatch(showProvider(data.provider, data.checked))
+    const { dispatch, idx } = this.props
+    dispatch(showProvider(data.provider, data.checked, idx))
   }
 
   render() {
-    const { provider, results, inclineDeclineTotal } = this.props
-
-    const summary = R.path([provider, 'data', 'trip', 'summary'], results)
+    const { results, summary, inclineDeclineTotal, header, idx } = this.props
 
     return (
       <React.Fragment>
         {summary ? (
           <React.Fragment>
             <div className="flex mb1">
-              <span className="b">Directions</span>
+              <span className="b">{header}</span>
               {summary.has_highway && (
                 <div style={{ marginLeft: '1em' }}>
                   <Popup
@@ -119,9 +119,9 @@ class Summary extends React.Component {
                 <Checkbox
                   slider
                   label={'Map'}
-                  checked={results[provider].show}
-                  provider={provider}
-                  onChange={this.handleChange}
+                  checked={results[VALHALLA_OSM_URL].show[idx]}
+                  provider={VALHALLA_OSM_URL}
+                  onChange={(event, data) => this.handleChange(event, data)}
                 />
               </div>
             </div>

src/Controls/index.jsx

@@ -257,17 +257,8 @@ class MainControl extends React.Component {
                 <ServiceTabs />
               </div>
             </Segment>
-            {/* because apparently on small screens it's not showing both, so we switch the order on tab switch */}
-            {(activeTab === 0 && (
-              <>
-                <DirectionOutputControl />
-                <IsochronesOutputControl />
-              </>
-            )) || (
-              <>
-                <IsochronesOutputControl />
-                <DirectionOutputControl />
-              </>
+            {(activeTab === 0 && <DirectionOutputControl />) || (
+              <IsochronesOutputControl />
             )}
           </div>
           <div

src/Controls/settings-options.js

@@ -422,6 +422,18 @@ const useGeocoding = {
   param: 'use_geocoding',
 }
 
+const alternates = {
+  name: 'Alternates',
+  description: 'You want more?',
+  param: 'alternates',
+  unit: 'alternates',
+  settings: {
+    min: 0,
+    max: 5,
+    step: 1,
+  },
+}
+
 const ignoreHierarchies = {
   name: 'Disable Hierarchies',
   description:
@@ -728,6 +740,7 @@ export const settingsInit = {
   use_trails: 0,
   denoise: 0.1,
   generalize: 0,
+  alternates: 0,
 }
 
 export const settingsInitTruckOverride = {
@@ -995,6 +1008,7 @@ export const settings_general = {
   },
   all: {
     boolean: [useGeocoding],
+    numeric: [alternates],
   },
 }