replaced show page reload with ajax

app/controllers/stops.js

@@ -3,10 +3,14 @@
 var Stop = require('../models/stop');
 
 exports.create = function(req, res){
-  console.log(req.body);
-  Stop.create(req.body, function(){
-    res.redirect('/trips/' + req.params.tripId);
+  req.body.tripId = req.params.tripId;
+  // console.log(req.body);
+  // res.redirect('/trips/' + req.params.tripId);
+  Stop.create(req.body, function(data){
+    res.send(data);
+    // res.redirect('/trips/' + req.params.tripId);
   });
+
 };
 
 exports.show = function(req, res){

app/models/stop.js

@@ -34,17 +34,28 @@ Stop.findById = function(id, cb){
 };
 
 Stop.create = function(obj, cb){
-  var stops = Object.keys(obj).map(function(k){
-    return obj[k];
+  var stops = obj.stops.map(function(s){
+    s.tripId = obj.tripId;
+    return s;
   });
-  async.map(stops, function(o, done){
-    var s = new Stop(o);
-    s.save(function(){
+
+  async.map(stops, saveStops, finished);
+
+  function saveStops(obj, done){
+    var s = new Stop(obj);
+    Stop.collection.save(s, function(){
+      console.log(s);
       done(null, s);
     });
-  }, function(err, savedStops){
-    cb();
-  });
+  }
+
+  function finished(err, savedStops){
+    var stopData = savedStops.map(function(s){
+      return {name:s.loc.name, lat:s.loc.lat, lng:s.loc.lng, _id:s._id, tripId:s.tripId};
+    });
+    cb(stopData);
+  }
+
 };
 
 Stop.prototype.moveFiles = function(files){

app/models/trip.js

@@ -81,7 +81,7 @@ Trip.prototype.moveFile = function(files){
     return relPath;
   });
   photos = _.compact(photos);
-  this.photo = photos[0];
+  this.carPhoto = photos[0];
 };
 
 Trip.updateDist = function(id, body, cb){

app/static/css/style.less

@@ -4,6 +4,7 @@ body{
 
 #trip-map {
   height: 300px;
+  margin: 10px 0;
 }
 
 tr {
@@ -13,3 +14,8 @@ tr {
 .trip-row {
   font-size: 12px;
 }
+
+#car-photo {
+  height: 200px;
+  background-size: cover;
+}

app/static/js/user/trips-show.js

@@ -1,66 +1,69 @@
-/* global cartographer, google, calcRoute, async, geocode */
+/* global cartographer, google, calcRoute, async, geocode, _ */
 
 (function(){
   'use strict';
 
-  var count = 1,
-      map;
+  var map,
+      directionsDisplay = new google.maps.DirectionsRenderer();
 
   $(document).ready(function(){
     $('button[type=button]').click(addStop);
-    $('button[type=submit]').click(createStops);
+    $('button[type=submit]').click(geocodeAndSubmit);
     map = cartographer('trip-map', 39.8282, -98.5795, 4);
 
-    var directionsDisplay = new google.maps.DirectionsRenderer(),
-        waypoints         = makeWaypoints();
-
     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('directions'));
 
+    var waypoints = makeWaypoints();
     calcRoute(waypoints, function(response){
       directionsDisplay.setDirections(response);
-      updateTripDistance(response);
     });
 
   });
 
-  function createStops(e){
-    // debugger;
-    var stopGroups = $('.stop-group').toArray();
-    console.log(stopGroups);
-    async.map(stopGroups, function(stopGroup, done){
-      var locName = $(stopGroup).children('input[data-id=name]').val();
-      geocode(locName, function(name, lat, lng){
-        $(stopGroup).children('input[data-id=name]').val(name);
-        $(stopGroup).children('input[data-id=lat]').val(lat);
-        $(stopGroup).children('input[data-id=lng]').val(lng);
-        done(null, stopGroup);
-      });
-    }, function(err, geocodedDivs){
-      console.log(geocodedDivs);
-      $('form').submit();
+  function geocodeAndSubmit(e){
+    var locations = $('input').toArray().map(function(input){
+      return $(input).val().trim();
     });
+    locations = _.compact(locations);
+    if(locations.length){async.map(locations, lookUpGeocode, appendAndSubmit);}
     e.preventDefault();
   }
 
-  function addStop(){
-    count++;
-    var $last      = $('form > .stop-group:last-of-type'),
-        $formGroup = $('<div>'),
-        name       = 'stop' + count,
-        $i;
+  function lookUpGeocode(location, cb){
+    geocode(location, function(name, lat, lng){
+      cb(null, {name:name, lat:lat, lng:lng});
+    });
+  }
 
-    $formGroup.addClass('form-group').addClass('stop-group');
-    $i = $('<input>').prop('type', 'text').prop('name', name + '[name]').attr('data-id', 'name').addClass('form-control');
-    $formGroup.append($i);
-    $i = $('<input>').prop('type', 'hidden').prop('name', name + '[lat]').attr('data-id', 'lat');
-    $formGroup.append($i);
-    $i = $('<input>').prop('type', 'hidden').prop('name', name + '[lng]').attr('data-id', 'lng');
-    $formGroup.append($i);
-    $i = $('<input>').prop('type', 'hidden').prop('name', name + '[tripId]').attr('data-id', 'tripId').val($('h2').attr('data-trip-id'));
-    $formGroup.append($i);
-    $last.after($formGroup);
-    $formGroup.children('input[type=text]').focus();
+  function appendAndSubmit(err, geocodedLocations){
+    geocodedLocations.forEach(function(location, index){
+      $('form').append('<input name="stops['+index+'][name]" value="'+location.name+'" type="hidden">');
+      $('form').append('<input name="stops['+index+'][lat]" value="'+location.lat+'" type="hidden">');
+      $('form').append('<input name="stops['+index+'][lng]" value="'+location.lng+'" type="hidden">');
+    });
+    var url = $('form').attr('action'),
+        data = $('form').serialize(),
+        type = $('form').attr('method');
+    $.ajax({url:url, type:type, data:data, dataType:'json', success:function(data){
+      data.forEach(function(s){
+        $('#stops').append('<li data-name="'+s.name+'" data-lat="'+s.lat+'" data-lng="'+s.lng+'"><a href="/trips/'+s.tripId+'/stops/'+s._id+'">'+s.name+'</a></li>');
+      });
+      var waypoints = makeWaypoints();
+      calcRoute(waypoints, function(response){
+        directionsDisplay.setDirections(response);
+        updateTripDistance(response);
+      });
+    }});
+  }
+
+  function addStop(){
+    var $last  = $('form > .stop-group:last-of-type'),
+        $clone = $last.clone();
+    // debugger;
+    $clone.children('input').val('');
+    $last.after($clone);
+    $clone.children('input').focus();
   }
 
   function makeWaypoints(){

app/views/trips/show.jade

@@ -3,8 +3,10 @@ block content
   .panel.panel-default
     .panel-body
       .row
-        .col-xs-12
+        .col-xs-6
           h2(data-trip-id='#{trip._id}')= trip.name
+        .col-xs-6
+          #car-photo(style='background-image:url(#{trip.carPhoto})')
       .row
         .col-xs-12
           #trip-map(data-orig-name='#{trip.originLoc.name}', data-orig-lat='#{trip.originLoc.lat}', data-orig-lng='#{trip.originLoc.lng}', data-dest-name='#{trip.destinationLoc.name}', data-dest-lat='#{trip.destinationLoc.lat}', data-dest-lng='#{trip.destinationLoc.lng}')
@@ -20,10 +22,7 @@ block content
             .form-group
               button.btn.btn-info.btn-xs(type='button') + Stops
             .form-group.stop-group
-              input.form-control(name='stop1[name]', type='text', data-id='name', placeholder='Tucson, AZ')
-              input(type='hidden', name='stop1[lat]', data-id='lat')
-              input(type='hidden', name='stop1[lng]', data-id='lng')
-              input(type='hidden', name='stop1[tripId]', data-id='tripId', value='#{trip._id}')
+              input.form-control(name='stopNames', type='text', placeholder='Tucson, AZ')
             button.btn.btn-primary(type='submit') Add Stops
       .row
         .col-xs-12

test/unit/stop.js

@@ -7,7 +7,13 @@ var expect    = require('chai').expect,
     Stop      = require('../../app/models/stop'),
     dbConnect = require('../../app/lib/mongodb'),
     cp        = require('child_process'),
-    db        = 'road-trip-test';
+    db        = 'road-trip-test',
+    obj       = {
+      name:'Test, USA',
+      lat: '0',
+      lng: '0',
+      tripId: '000000000000000000000002'
+    };
 
 describe('Stop', function(){
   before(function(done){
@@ -24,7 +30,7 @@ describe('Stop', function(){
 
   describe('constructor', function(){
     it('should create a new Stop object', function(){
-      var s = new Stop();
+      var s = new Stop(obj);
       expect(s).to.be.instanceof(Stop);
     });
   });