diff --git a/app/assets/javascripts/labs.js.coffee b/app/assets/javascripts/labs.js.coffee index 4ddde787..cd94a1df 100644 --- a/app/assets/javascripts/labs.js.coffee +++ b/app/assets/javascripts/labs.js.coffee @@ -75,13 +75,22 @@ ready = -> $('.row-offcanvas').toggleClass('active') -# Map in a Lab page +# Map in a Lab page $('#lab_name').on 'change', () -> unless $('#lab_slug').val() $('#lab_slug').val( $(this).val().toLowerCase().replace(/[^A-Za-z0-9]/g,''); ) + updateFormWithLatLng = (lat, lng) -> + $('.c-labs.a-new #lab_address_1').focus() + $("input#lab_latitude").val lat + $("input#lab_longitude").val lng + $('select#lab_country_code').trigger('change') + $('#lab_geoinfo') + .find('strong') + .text(Number(lat).toFixed(6) + ' / ' + Number(lng).toFixed(6)) + # $('.step-2').css(opacity: 0.5) $(".c-labs input#geocomplete").geocomplete map: "#location-picker-map" @@ -91,15 +100,9 @@ ready = -> markerOptions: draggable: true .on 'geocode:dragged', (event, latLng) -> - $("input#lab_latitude").val latLng.lat() - $("input#lab_longitude").val latLng.lng() + updateFormWithLatLng(latLng.lat(), latLng.lng()) .on 'geocode:result', (event, result) -> - $('.c-labs.a-new #lab_address_1').focus() - $("input#lab_latitude").val result.geometry.location.lat() - $("input#lab_longitude").val result.geometry.location.lng() - $('select#lab_country_code').trigger('change') - - + updateFormWithLatLng(result.geometry.location.lat(), result.geometry.location.lng()) $(document).ready ready # $(document).on "page:load", ready \ No newline at end of file diff --git a/app/views/labs/_form.html.haml b/app/views/labs/_form.html.haml index 4c1b0aea..e6e78bf1 100644 --- a/app/views/labs/_form.html.haml +++ b/app/views/labs/_form.html.haml @@ -125,7 +125,7 @@ .question %h5 Step 1 .text-small Enter the lab's address in the textbox below. Then drag the map marker to pinpoint its exact position. - = f.input :geocomplete, input_html: { id: 'geocomplete', data: { latlng: "#{@lab.latitude}, #{@lab.longitude}"} }, label: false + = f.input :geocomplete, input_html: { id: 'geocomplete', data: { latlng: (@lab.latitude.present? ? "#{@lab.latitude}, #{@lab.longitude}" : "false")} }, label: false .question.step-2 %h5 Step 2 .text-small Edit the details in the address fields below. @@ -133,6 +133,8 @@ .col-lg-6#map-holder #location-picker-map .col-lg-6 + #lab_geoinfo + %p Marker Lat/Lng coordinates: #{(@lab.latitude.present? ? "#{@lab.latitude} / #{@lab.longitude}" : "")} = f.input :address_1, input_html: { data: {geo: "street_address"}}, label: 'Lab Address', placeholder: 'Address Line 1' = f.input :address_2, label: false, placeholder: 'Address Line 2 (Optional)' = f.input :city, input_html: { data: {geo: "locality"}}