Reorder tour waypoints on list change

When user drags to reorder tour destination list, update directions. Closes azavea#1112.
flibbertigibbet · Oct 8, 2019 · 2965297 · 2965297
1 parent f5fbe82
commit 2965297
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 14 deletions.
diff --git a/src/app/scripts/cac/control/cac-control-directions.js b/src/app/scripts/cac/control/cac-control-directions.js
@@ -6,9 +6,12 @@ CAC.Control.Directions = (function (_, $, moment, Control, Places, Routing, User
 
     'use strict';
 
-    // Number of millis to wait on input changes before sending directions request
+    // Number of milliseconds to wait on input changes before sending directions request
     var DIRECTION_THROTTLE_MILLIS = 750;
 
+    // Number of milliseconds to wait on destination list reorder before requerying directions
+    var REORDER_TOUR_THROTTLE_MILLIS = 1000;
+
     var defaults = {
         selectors: {
             directions: '.directions-results',
@@ -119,6 +122,11 @@ CAC.Control.Directions = (function (_, $, moment, Control, Places, Routing, User
                     $(options.selectors.spinner).addClass(options.selectors.hiddenClass);
                 }
         });
+
+        tourListControl.events.on(tourListControl.eventNames.destinationsReordered,
+            function(e, destinations) {
+                reorderTourDestinations(destinations);
+        });
     }
 
     DirectionsControl.prototype = {
@@ -248,6 +256,17 @@ CAC.Control.Directions = (function (_, $, moment, Control, Places, Routing, User
         });
     }, DIRECTION_THROTTLE_MILLIS, {leading: true, trailing: true});
 
+    /**
+     * Reorder tour destination waypoints and end point and requery for directions.
+     * Throttled to cut down on requests.
+     */
+    var reorderTourDestinations = _.debounce(function(destinations) {  // jshint ignore:line
+        tour.destinations = destinations;
+        itineraryControl.clearItineraries();
+        mapControl.setDirectionsMarkers(null, null, true);
+        onTypeaheadSelectDone('destination', destinations);
+    }, REORDER_TOUR_THROTTLE_MILLIS, {leading: false, trailing: true});
+
     return DirectionsControl;
 
     function onTabShown(event, tabId) {

diff --git a/src/app/scripts/cac/control/cac-control-tour-list.js b/src/app/scripts/cac/control/cac-control-tour-list.js
@@ -27,11 +27,13 @@ CAC.Control.TourList = (function (_, $, MapTemplates) {
     var events = $({});
     var eventNames = {
         destinationClicked: 'cac:control:tourlist:destinationclicked',
-        destinationHovered: 'cac:control:tourlist:destinationhovered'
+        destinationHovered: 'cac:control:tourlist:destinationhovered',
+        destinationsReordered: 'cac:control:tourlist:destinationsreordered'
     };
 
     var $container = null;
     var destinations = [];
+    var tourId = null;
 
     function TourListControl(params) {
         options = $.extend({}, defaults, params);
@@ -52,7 +54,13 @@ CAC.Control.TourList = (function (_, $, MapTemplates) {
     return TourListControl;
 
     function setTourDestinations(tour) {
-        destinations = tour.destinations;
+        if (tour.id !== tourId) {
+            tourId = tour.id;
+            destinations = tour.destinations;
+        } else {
+            // tour unchanged; preserve user assigned destination order
+            tour.destinations = destinations;
+        }
 
         // Show the directions div and populate with tour destinations
         var html = MapTemplates.tourDestinationList(tour);
@@ -69,17 +77,30 @@ CAC.Control.TourList = (function (_, $, MapTemplates) {
             $destinationList.sortable('destroy');
         }
 
-        // Set up sortable list
-        var $sortableList = $destinationList.sortable({
-            animation: 150,
-            direction: 'vertical',
-            draggable: '.tour-place-card',
-            sort: true,
-            onUpdate: function(e) {
-                console.log('sortable updated');
-                console.log(e);
-            }
-        });
+        // Set up sortable list for tours (not events)
+        if (tour.is_tour) {
+            var $sortableList = $destinationList.sortable({
+                animation: 150,
+                direction: 'vertical',
+                draggable: '.tour-place-card',
+                sort: true,
+                onUpdate: onDestinationListReordered
+            });
+        }
+    }
+
+    // Called when Sortable list of destinations gets updated
+    function onDestinationListReordered(e) {
+        var kids = e.to.children;
+        for (var i = 0; i < kids.length; i++) {
+            var k = kids[i];
+            var originalIndex = k.getAttribute('data-tour-place-index');
+            // assign property with new order
+            destinations[originalIndex].userOrder = i;
+        }
+
+        destinations = _.sortBy(destinations, 'userOrder');
+        events.trigger(eventNames.destinationsReordered, [destinations]);
     }
 
     /**