From 0c773eb58b320e1e983fe6a4b2226fefdb489515 Mon Sep 17 00:00:00 2001
From: Emmanuel Pilande <manny@sudokrew.com>
Date: Wed, 3 Aug 2016 06:10:56 -1000
Subject: [PATCH] Change autopilot speed (#311)

* Add change autopilot speed functionality

* Display current travel mode icon
---
 src/models/autopilot.js      |  4 +++-
 src/styles/map/autopilot.css |  4 ++++
 src/views/map/autopilot.js   | 23 ++++++++++++++++++++++-
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/models/autopilot.js b/src/models/autopilot.js
index 2b915d9..da40514 100644
--- a/src/models/autopilot.js
+++ b/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
     }
diff --git a/src/styles/map/autopilot.css b/src/styles/map/autopilot.css
index 731e062..f3387ed 100644
--- a/src/styles/map/autopilot.css
+++ b/src/styles/map/autopilot.css
@@ -49,4 +49,8 @@
       margin-top: 20px;
     }
   }
+
+  .edit {
+    margin-left: 10px;
+  }
 }
diff --git a/src/views/map/autopilot.js b/src/views/map/autopilot.js
index 9e42069..cfc83c3 100644
--- a/src/views/map/autopilot.js
+++ b/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>