Merge pull request #200 from nvcnvn/master

add date-time option for easy testing conditional-turn-restriction

src/Controls/Directions/index.jsx

@@ -9,6 +9,7 @@ import { ProfilePicker } from 'components/profile-picker'
 import { SettingsButton } from 'components/SettingsButton'
 import { SettingsFooter } from 'components/SettingsFooter'
 import { Settings } from './settings'
+import { DateTimePicker } from 'components/DateTimePicker'
 
 import {
   doAddWaypoint,
@@ -21,13 +22,18 @@ import {
   doShowSettings,
   updatePermalink,
   resetSettings,
+  doUpdateDateTime,
 } from 'actions/commonActions'
 
 class DirectionsControl extends React.Component {
   static propTypes = {
     profile: PropTypes.string.isRequired,
     dispatch: PropTypes.func.isRequired,
     loading: PropTypes.bool,
+    dateTime: PropTypes.shape({
+      type: PropTypes.number,
+      value: PropTypes.string,
+    }),
   }
 
   handleUpdateProfile = (event, data) => {
@@ -62,8 +68,24 @@ class DirectionsControl extends React.Component {
     dispatch(doShowSettings())
   }
 
+  handleDateTime = (type, value) => {
+    const { dispatch } = this.props
+    dispatch(doUpdateDateTime(type, value))
+  }
+
+  shouldComponentUpdate(nextProps) {
+    const { dateTime } = this.props
+    const shouldUpdate =
+      dateTime.type !== nextProps.dateTime.type ||
+      dateTime.value !== nextProps.dateTime.value
+    if (shouldUpdate) {
+      this.props.dispatch(makeRequest())
+    }
+    return shouldUpdate
+  }
+
   render() {
-    const { profile, loading } = this.props
+    const { profile, loading, dateTime } = this.props
     return (
       <React.Fragment>
         <div className="flex flex-column content-between">
@@ -104,6 +126,11 @@ class DirectionsControl extends React.Component {
                 handleRemoveWaypoints={this.handleRemoveWaypoints}
               />
             </div>
+            <DateTimePicker
+              type={dateTime.type}
+              value={dateTime.value}
+              onChange={this.handleDateTime}
+            />
           </div>
           <Divider fitted />
           <SettingsFooter />
@@ -114,10 +141,11 @@ class DirectionsControl extends React.Component {
 }
 
 const mapStateToProps = (state) => {
-  const { profile, loading } = state.common
+  const { profile, loading, dateTime } = state.common
   return {
     profile,
     loading,
+    dateTime,
   }
 }
 

src/actions/commonActions.js

@@ -8,6 +8,7 @@ import {
   ZOOM_TO,
   RESET_SETTINGS,
   TOGGLE_DIRECTIONS,
+  UPDATE_DATETIME,
 } from './types'
 
 import {
@@ -60,6 +61,11 @@ export const zoomTo = (coords) => ({
   payload: coords,
 })
 
+export const doUpdateDateTime = (key, value) => ({
+  type: UPDATE_DATETIME,
+  payload: { key, value },
+})
+
 export const updatePermalink = () => (dispatch, getState) => {
   const { waypoints } = getState().directions
   const { geocodeResults, maxRange, interval } = getState().isochrones

src/actions/directionsActions.js

@@ -43,7 +43,7 @@ const serverMapping = {
 export const makeRequest = () => (dispatch, getState) => {
   dispatch(updatePermalink())
   const { waypoints } = getState().directions
-  const { profile } = getState().common
+  const { profile, dateTime } = getState().common
   let { settings } = getState().common
   // if 2 results are selected
   const activeWaypoints = getActiveWaypoints(waypoints)
@@ -53,6 +53,7 @@ export const makeRequest = () => (dispatch, getState) => {
       profile,
       activeWaypoints,
       settings,
+      dateTime,
     })
     dispatch(fetchValhallaDirections(valhallaRequest))
   }

src/actions/types.js

@@ -29,3 +29,4 @@ export const ZOOM_TO_MNV = 'ZOOM_TO_MNV'
 export const ZOOM_TO = 'ZOOM_TO'
 export const RESET_SETTINGS = 'RESET_SETTINGS'
 export const UPDATE_INCLINE_DECLINE = 'UPDATE_INCLINE_DECLINE'
+export const UPDATE_DATETIME = 'UPDATE_DATETIME'

src/components/DateTimePicker.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Input, Dropdown } from 'semantic-ui-react'
+
+export const DateTimePicker = ({ type, value, onChange }) => {
+  return (
+    <div className="pa2 flex flex-wrap justify-between">
+      <Dropdown
+        clearable
+        options={[
+          {
+            key: 0,
+            text: 'Nonspecific time',
+            value: -1,
+          },
+          {
+            key: 1,
+            text: 'Leave now',
+            value: 0,
+          },
+          {
+            key: 2,
+            text: 'Depart at',
+            value: 1,
+          },
+          {
+            key: 3,
+            text: 'Arrive at',
+            value: 2,
+          },
+        ]}
+        selection
+        defaultValue={type}
+        style={{ marginLeft: '3px' }}
+        onChange={(e, data) => {
+          onChange('type', data.value)
+        }}
+      />
+      <Input placeholder="Search..." style={{ marginLeft: '3px' }}>
+        <input
+          type="datetime-local"
+          value={value}
+          onChange={(e) => onChange('value', e.target.value)}
+          disabled={type < 0}
+        />
+      </Input>
+    </div>
+  )
+}
+
+DateTimePicker.propTypes = {
+  type: PropTypes.number,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+}

src/reducers/common.js

@@ -8,6 +8,7 @@ import {
   ZOOM_TO,
   RESET_SETTINGS,
   TOGGLE_DIRECTIONS,
+  UPDATE_DATETIME,
 } from 'actions/types'
 import {
   settingsInit,
@@ -29,6 +30,10 @@ const initialState = {
   },
   profile: 'bicycle',
   settings: { ...settingsInit },
+  dateTime: {
+    type: -1,
+    value: new Date(Date.now()).toISOString().slice(0, 16),
+  },
 }
 
 export const common = (state = initialState, action) => {
@@ -105,6 +110,17 @@ export const common = (state = initialState, action) => {
       }
     }
 
+    case UPDATE_DATETIME: {
+      const { key, value } = action.payload
+      return {
+        ...state,
+        dateTime: {
+          ...state.dateTime,
+          [key]: value,
+        },
+      }
+    }
+
     default: {
       return state
     }

src/utils/valhalla.js

@@ -29,13 +29,14 @@ export const buildDirectionsRequest = ({
   profile,
   activeWaypoints,
   settings,
+  dateTime,
 }) => {
   let valhalla_profile = profile
   if (profile === 'car') {
     valhalla_profile = 'auto'
   }
 
-  return {
+  const req = {
     json: {
       costing: valhalla_profile,
       costing_options: {
@@ -49,6 +50,11 @@ export const buildDirectionsRequest = ({
       id: 'valhalla_directions',
     },
   }
+
+  if (dateTime.type > -1) {
+    req.json.date_time = dateTime
+  }
+  return req
 }
 
 export const parseDirectionsGeometry = (data) => {