Merge pull request #367 from RefugeRestrooms/develop

Deploy to master

app/assets/javascripts/maps.js

@@ -268,4 +268,10 @@ $(function(){
 	if($map.length > 0) {
 		initMap($map.data('latitude'), $map.data('longitude'), showMarkerImage);
 	}
+
+	window.Maps = {
+		reloadMap: function(map) {
+			initMap(map.dataset.latitude, map.dataset.longitude, showMarkerImage);
+		}
+	}
 });

app/assets/javascripts/views/restrooms/new.coffee

@@ -7,12 +7,15 @@ class Refuge.Restrooms.NewRestroomForm
     @_guessButton = @_form.find('.guess-btn')
     @_nearbyContainer = $('.nearby-container')
     @_form_container = $('.new-restrooms-form-container')
+    @_previewButton = @_form.find('.preview-btn')
+    @_map = @_form.find('#mapArea')[0]
 
     # Initialization Methods
     @_bindEvents()
 
   _bindEvents: =>
     @_bindGuessButton()
+    @_bindPreviewButton()
 
   _bindGuessButton: =>
     @_guessButton.click (event) =>
@@ -28,6 +31,31 @@ class Refuge.Restrooms.NewRestroomForm
               console.log data
               $('.form-container').html(data).hide().fadeIn()
               @_requestNearbyRestrooms(coords)
+              @_updateMap(coords)
+
+
+  _bindPreviewButton: =>
+    @_previewButton.click (event) =>
+      # Show map
+      @_map.classList.remove("hidden")
+
+      form = @_form[0]
+      name = form.elements.restroom_name.value
+      street = form.elements.restroom_street.value
+      city = form.elements.restroom_city.value
+      state = form.elements.restroom_state.value
+      country = form.elements.restroom_country.value
+      address = "#{name}, #{street}, #{city}, #{state}, #{country}"
+
+      # Obtain coordinates
+      @_geocoder.geocodeSearchString(address).then (coords) =>
+        @_updateMap(coords)
+
+
+  _updateMap: (coords) =>
+    @_map.dataset.latitude = coords.lat
+    @_map.dataset.longitude = coords.long
+    Maps.reloadMap(@_map)
 
 
   _getNewForm: (coords) =>

app/views/restrooms/_formsubmit.html.haml

@@ -7,6 +7,9 @@
       = t('restroom.guess_location')
       %i.fa.fa-refresh.fa-spin
 
+  / Add map for preview
+  #mapArea.hidden{ data: { latitude: 38.904735, longitude: -77.033812 } }
+
   .nearby-container.footroom
     // Content of nearby restrooms gets rendered here.
 
@@ -22,4 +25,8 @@
   = f.input :changing_table, :collection => [[t('restroom.changing_table'), true], [t('restroom.no_changing_table'), false]], :include_blank => false
   = f.input :directions, :placeholder => t('restroom.directions_hint'), :as => :text, :required => false, :input_html => { :class => "span6" }
   = f.input :comment, :placeholder => t('restroom.comments_hint'), :as => :text, :required => false, :input_html => { :class => "span6" }
+
+  / Click to preview location
+  %button{type: 'button', class: 'preview-btn linkbutton'}
+    = t('restroom.preview')
   = f.button :submit, t('restroom.restsubmit'), :class => "linkbutton"

config/locales/restroom.en.yml

@@ -12,6 +12,7 @@ en:
 
   restroom:
     add_new: 'Submit a restroom to our database'
+    preview: 'Preview'
     required: '* marks required field'
     guess_location: 'Guess current location'
     directions: 'Directions'

features/preview.feature

@@ -0,0 +1,7 @@
+@javascript
+Feature: Preview a restroom's location
+
+  Scenario: Preview a restroom before submitting
+    Given I have filled out the address information
+    When I click the preview button
+    Then I should see the map preview

features/step_definitions/preview_steps.rb

@@ -0,0 +1,17 @@
+Given(/^I have filled out the address information$/) do
+  visit "/"
+  click_link "Submit a New Restroom"
+  fill_in "restroom[name]", with: "Vancouver restroom"
+  fill_in "restroom[street]", with: "684 East Hastings"
+  fill_in "restroom[city]", with: "Vancouver"
+  fill_in "restroom[state]", with: "British Columbia"
+  find(:select, "Country").first(:option, "Canada").select_option
+end
+
+When(/^I click the preview button$/) do
+  click_button "Preview"
+end
+
+Then(/^I should see the map preview$/) do
+  expect(page).to have_css("div#mapArea", :visible => true)
+end