Change autopilot speed (#311)

* Add change autopilot speed functionality

* Display current travel mode icon

src/models/autopilot.js

@@ -15,6 +15,7 @@ class Autopilot {
   @observable speed = 9 / 3600 // 0.0025 ~= 2,5m/s ~= 9 km/h
   @observable distance = 0 // remaining distance to arrival in km
   @observable rawOverviewPath = null // save last query to re-calculate optimized route
+  @observable destination = { lat: null, lng: null };
 
   @computed get accurateSteps() {
     if (this.rawOverviewPath) {
@@ -47,12 +48,13 @@ class Autopilot {
 
   findDirectionPath = (lat, lng) => new Promise((resolve, reject) => {
     const { google: { maps } } = window
+    this.destination = { lat, lng }
 
     // prepare `directionsRequest` to google map
     const directionsService = new maps.DirectionsService()
     const directionsRequest = {
       origin: { lat: userLocation[0], lng: userLocation[1] },
-      destination: { lat, lng },
+      destination: this.destination,
       travelMode: maps.TravelMode.WALKING,
       unitSystem: maps.UnitSystem.METRIC
     }

src/styles/map/autopilot.css

@@ -49,4 +49,8 @@
       margin-top: 20px;
     }
   }
+
+  .edit {
+    margin-left: 10px;
+  }
 }

src/views/map/autopilot.js

@@ -33,6 +33,11 @@ class Autopilot extends Component {
     return travelModeName
   }
 
+  @computed get travelModeIcon() {
+    const [ , , travelModeIcon ] = travelModes.find(([ t ]) => t === this.travelMode)
+    return travelModeIcon
+  }
+
   componentDidMount() {
     // initialize algolia places input
     const { placesEl } = this.refs
@@ -68,6 +73,14 @@ class Autopilot extends Component {
     this.travelMode = name
   }
 
+  @action handleChangeSpeed = () => {
+    const { destination: { lat, lng } } = autopilot
+
+    autopilot.pause()
+    autopilot.scheduleTrip(lat, lng)
+      .then(() => { if (!this.isModalOpen) this.isModalOpen = true })
+  }
+
   renderTogglePause() {
     if (autopilot.running && !autopilot.paused) {
       return (
@@ -97,6 +110,14 @@ class Autopilot extends Component {
       <div className='autopilot'>
         { this.renderTogglePause() }
 
+        { !autopilot.clean &&
+          <div
+            className='edit btn btn-primary'
+            onClick={ this.handleChangeSpeed }>
+            <i className={ `fa fa-${this.travelModeIcon}` } />
+          </div>
+        }
+
         <div className={ cx('algolia-places', { hide: !autopilot.clean }) }>
           <input ref='placesEl' type='search' placeholder='Destination' />
         </div>
@@ -171,7 +192,7 @@ class Autopilot extends Component {
                 className='btn btn-block btn-sm btn-success'
                 disabled={ autopilot.accurateSteps.length === 0 }
                 onClick={ this.handleStartAutopilot }>
-                Start autopilot!
+                { !autopilot.clean ? 'Update' : 'Start' } autopilot!
               </button>
             </div>
           </div>