Improving user discover on ofn map

The context for this update is here: https://community.openfoodnetwork.org/t/improving-user-discovery-on-ofn-map/2013

Also with rebasing help from Maikel Linke <mkllnk@web.de>

app/assets/javascripts/darkswarm/all.js.coffee

@@ -11,8 +11,9 @@
 #= require leaflet-1.6.0.js
 #= require leaflet-providers.js
 #= require lodash.underscore.js
-# bluebird.js is a dependency of angular-google-maps.js 2.0.0
+# bluebird.js and angular-simple-logger are dependencies of angular-google-maps.js 2.0.0
 #= require bluebird.js
+#= require angular-simple-logger.min.js
 #= require angular-scroll.min.js
 #= require angular-google-maps.min.js
 #= require ../shared/mm-foundation-tpls-0.9.0-20180826174721.min.js
@@ -60,4 +61,4 @@
 $ ->
   # Hacky fix for issue - http://foundation.zurb.com/forum/posts/2112-foundation-5100-syntax-error-in-js
   Foundation.set_namespace ""
-  $(document).foundation()
+  $(document).foundation()

app/assets/javascripts/darkswarm/controllers/registration/registration_controller.js.coffee

@@ -1,9 +1,12 @@
-Darkswarm.controller "RegistrationCtrl", ($scope, RegistrationService, EnterpriseRegistrationService, availableCountries) ->
+Darkswarm.controller "RegistrationCtrl", ($scope, RegistrationService, EnterpriseRegistrationService, availableCountries, GmapsGeo) ->
   $scope.currentStep = RegistrationService.currentStep
   $scope.enterprise = EnterpriseRegistrationService.enterprise
   $scope.select = RegistrationService.select
-
+  $scope.geocodedAddress = ''
+  $scope.latLong = null
+  $scope.addressConfirmed
   $scope.steps = ['details', 'contact', 'type', 'about', 'images', 'social']
+  $scope.enableMapConfirm = GmapsGeo and GmapsGeo.OK
 
   # Filter countries without states since the form requires a state to be selected.
   # Consider changing the form to require a state only if a country requires them (Spree option).
@@ -22,3 +25,26 @@ Darkswarm.controller "RegistrationCtrl", ($scope, RegistrationService, Enterpris
 
   $scope.countryHasStates = ->
     $scope.enterprise.country.states.length > 0
+
+  $scope.map = {center: {latitude: 0.000000, longitude: 0.000000 }, zoom: 1}
+  $scope.options = {scrollwheel: false}
+  $scope.locateAddress = () ->
+    { address1, address2, city, state_id, zipcode } = $scope.enterprise.address
+    addressQuery = [address1, address2, city, state_id, zipcode].filter((value) => !!value).join(", ")
+    GmapsGeo.geocode addressQuery, (results, status) =>
+      $scope.geocodedAddress = results && results[0]?.formatted_address
+      location = results[0]?.geometry?.location
+      if location
+        $scope.$apply(() =>
+          $scope.latLong = {latitude: location.lat(), longitude: location.lng()}
+          $scope.map = {center: {latitude: location.lat(), longitude: location.lng()}, zoom: 16 }
+        )
+
+  $scope.confirmAddressChange = (isConfirmed) ->
+    $scope.addressConfirmed = isConfirmed
+    if isConfirmed
+      $scope.enterprise.address.latitude = $scope.latLong.latitude
+      $scope.enterprise.address.longitude = $scope.latLong.longitude
+    else
+      $scope.enterprise.address.latitude = null
+      $scope.enterprise.address.longitude = null

app/assets/stylesheets/darkswarm/registration.scss

@@ -167,6 +167,26 @@
       height: 166px;
     }
   }
+
+  .map-container--registration {
+    width: 100%;
+    height: 244px;
+    margin-bottom: 1em;
+
+    map, .angular-google-map-container, google-map, .angular-google-map {
+      display: block;
+      height: 220px;
+      width: 100%;
+    }
+  }
+
+  .center {
+    justify-content: center;
+  }
+
+  .button.primary {
+    border-radius: 0;
+  }
 }
 
 #registration-type {

app/models/enterprise.rb

@@ -100,7 +100,6 @@ class Enterprise < ActiveRecord::Base
 
   before_validation :initialize_permalink, if: lambda { permalink.nil? }
   before_validation :set_unused_address_fields
-  after_validation :geocode_address
   after_validation :ensure_owner_is_manager, if: lambda { owner_id_changed? && !owner_id.nil? }
 
   after_touch :touch_distributors

app/models/spree/address.rb

@@ -10,12 +10,16 @@ module Spree
     has_one :enterprise, dependent: :restrict_with_exception
     has_many :shipments
 
+    before_validation :geocode, if: :use_geocoder?
+
     validates :firstname, :lastname, :address1, :city, :country, presence: true
     validates :zipcode, presence: true, if: :require_zipcode?
     validates :phone, presence: true, if: :require_phone?
 
     validate :state_validate
 
+    attr_accessor :use_geocoder
+
     after_save :touch_enterprise
 
     alias_attribute :first_name, :firstname
@@ -107,6 +111,10 @@ module Spree
 
     private
 
+    def use_geocoder?
+      @use_geocoder == true || @use_geocoder == 'true' || @use_geocoder == '1'
+    end
+
     def require_phone?
       true
     end

app/services/permitted_attributes/address.rb

@@ -6,7 +6,8 @@ module PermittedAttributes
       [
         :firstname, :lastname, :address1, :address2,
         :city, :country_id, :state_id, :zipcode,
-        :phone, :state_name, :alternative_phone, :company
+        :phone, :state_name, :alternative_phone, :company,
+        :latitude, :longitude, :use_geocoder
       ]
     end
   end

app/views/admin/enterprises/_new_form.html.haml

@@ -97,10 +97,28 @@
         %input.ofn-select2.fullwidth#enterprise_address_attributes_state_id{ name: 'enterprise[address_attributes][state_id]', type: 'number', data: 'countriesById[Enterprise.address.country_id].states', placeholder: t('admin.choose'), ng: { model: 'Enterprise.address.state_id' } }
       .five.columns.omega
         %input.ofn-select2.fullwidth#enterprise_address_attributes_country_id{ name: 'enterprise[address_attributes][country_id]', type: 'number', data: 'countries', placeholder: t('admin.choose'), ng: { model: 'Enterprise.address.country_id' } }
-
+  .row
+    .three.columns.alpha
+      = af.label :latitude, t(:latitude)
+      \/
+      = af.label :longitude, t(:longitude)
+      %span.required *
+      %div{'ofn-with-tip' => t('latitude_longitude_tip')}
+        %a= t('admin.whats_this')
+    .four.columns
+      = af.text_field :latitude, { placeholder: t(:latitude_placeholder) }
+    .four.columns.omega
+      = af.text_field :longitude, { placeholder: t(:longitude_placeholder) }
+  .row
+    .three.columns.alpha
+      = " ".html_safe
+    .five.columns.omega
+      = af.check_box :use_geocoder
+      = af.label :use_geocoder, t('use_geocoder')
 .row
   .twelve.columns.alpha
      
 .row
   .twelve.columns.alpha
     = render partial: "spree/admin/shared/new_resource_links"
+    

app/views/admin/enterprises/form/_address.html.haml

@@ -35,3 +35,21 @@
     %input.ofn-select2.fullwidth#enterprise_address_attributes_state_id{ name: 'enterprise[address_attributes][state_id]', type: 'number', data: 'countriesById[Enterprise.address.country_id].states', placeholder: t('admin.choose'), ng: { model: 'Enterprise.address.state_id' } }
   .four.columns.omega{ "ng-controller" => "countryCtrl" }
     %input.ofn-select2.fullwidth#enterprise_address_attributes_country_id{ name: 'enterprise[address_attributes][country_id]', type: 'number', data: 'countries', placeholder: t('admin.choose'), ng: { model: 'Enterprise.address.country_id' } }
+.row
+  .three.columns.alpha
+    = af.label :latitude, t(:latitude)
+    \/
+    = af.label :longitude, t(:longitude)
+    %span.required *
+    %div{'ofn-with-tip' => t('latitude_longitude_tip')}
+      %a= t('admin.whats_this')
+  .four.columns
+    = af.text_field :latitude, { placeholder: t(:latitude_placeholder) }
+  .four.columns.omega
+    = af.text_field :longitude, { placeholder: t(:longitude_placeholder) }
+.row
+  .three.columns.alpha
+    = " ".html_safe
+  .five.columns.omega
+    = af.check_box :use_geocoder
+    = af.label :use_geocoder, t('use_geocoder')

app/views/layouts/registration.html.haml

@@ -27,7 +27,7 @@
           #footer
     %loading
 
-    %script{src: "//maps.googleapis.com/maps/api/js?libraries=places"}
+    %script{src: "//maps.googleapis.com/maps/api/js?libraries=places#{ ENV['GOOGLE_MAPS_API_KEY'] ? '&key=' + ENV['GOOGLE_MAPS_API_KEY'] : ''}"}
     = javascript_include_tag "darkswarm/all"
     = yield :scripts
 

app/views/registration/steps/_details.html.haml

@@ -7,7 +7,6 @@
           %h2= t('.headline')
           %h5{ ng: { if: "::enterprise.type != 'own'" } }= t(".enterprise")
           %h5{ ng: { if: "::enterprise.type == 'own'" } }= t(".producer")
-
     %form{ name: 'details', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "selectIfValid('contact',details)" } }
 
       .row
@@ -57,8 +56,25 @@
                 %select.chunky{ id: 'enterprise_country', name: 'country', required: true, ng: { init: "setDefaultCountry(#{Spree::Config[:default_country_id]})", model: 'enterprise.country', options: 'c as c.name for c in countries' } }
                 %span.error{ ng: { show: "details.country.$error.required && submitted" } }
                   = t(".country_field_error")
-
+      %div{ ng: {if: "enableMapConfirm"}}
+        .center{ ng: {if: "latLong"}} 
+          %strong {{'registration.steps.details.drag_pin' | t}}
+        .small-12.medium-9.large-12.columns.end
+          .map-container--registration{id: "registration-map", ng: {if: "!!map"}}
+            %ui-gmap-google-map{ center: "map.center", zoom: "map.zoom"}
+              %ui-gmap-marker{idKey: 1, coords: "latLong", options: '{ draggable: true}'}
+            
+        .center
+          %input.button.primary{ type: "button", value: "{{'registration.steps.details.locate_address' | t}}", ng: { click: "locateAddress()" } }
+        .center{ ng: {if: "latLong"}} 
+          .field
+            %input{ type: 'checkbox', id: 'confirm_address', name: 'confirm_address', ng: { model: 'addressConfirmed', change: 'confirmAddressChange(confirmAddress)'} }
+            %label{ for: 'confirm_address' } {{'registration.steps.details.confirm_address' | t}}
+        .small-12.medium-9.large-12.columns.end{ ng: {if: "latLong"}} 
+          .field
+            %strong {{'registration.steps.details.drag_map_marker' | t}}
       .row.buttons
         .small-12.columns
           %hr
           %input.button.primary.right{ type: "submit", value: "{{'continue' | t}}" }
+          

config/locales/en.yml

@@ -1431,6 +1431,12 @@ en:
   address2: Address (contd.)
   city: City
   city_placeholder: eg. Northcote
+  latitude: Latitude
+  latitude_placeholder: eg. -37.4713077
+  latitude_longitude_tip: Latitude and longitude are needed to display your enterprise on the map.
+  longitude: Longitude
+  longitude_placeholder: eg. 144.7851531
+  use_geocoder: Calculate latitude and longitude automatically from address?
   state: State
   postcode: Postcode
   postcode_placeholder: eg. 3070
@@ -2013,7 +2019,7 @@ See the %{link} to find out more about %{sitename}'s features and to start using
       details:
         title: "Details"
         headline: "Let's Get Started"
-        enterprise: "Woot! First need to know a little bit about your enterprise:"
+        enterprise: "Woot! First we need to know a little bit about your enterprise:"
         producer: "Woot! First we need to know a little bit about your farm:"
         enterprise_name_field: "Enterprise Name:"
         producer_name_field: "Farm Name:"
@@ -2033,6 +2039,11 @@ See the %{link} to find out more about %{sitename}'s features and to start using
         state_field_error: "State required"
         country_field: "Country:"
         country_field_error: "Please select a country"
+        map_location: "Map Location"
+        locate_address: "Locate address on map"
+        drag_pin: "Drag and drop the pin to the correct location if not accurate."
+        confirm_address: "I confirm that the indicated position of the enterprise on the map is correct."
+        drag_map_marker: "Due to many producers operating in rural areas, the accuracy of maps is always being improved on. Help us to understand where you’re located better by interacting with the map above to move the pin by clicking or tapping to hold the pin and then dragging to the location that is more accurate based off your knowledge."
       contact:
         title: "Contact"
         who_is_managing_enterprise: "Who is responsible for managing %{enterprise}?"

spec/features/admin/enterprises_spec.rb

@@ -51,6 +51,8 @@ feature '
     fill_in 'enterprise_address_attributes_address1', with: '35 Ballantyne St'
     fill_in 'enterprise_address_attributes_city', with: 'Thornbury'
     fill_in 'enterprise_address_attributes_zipcode', with: '3072'
+    fill_in 'enterprise_address_attributes_latitude', with: '-37.4713077'
+    fill_in 'enterprise_address_attributes_longitude', with: '144.7851531'
     # default country (Australia in this test) should be selected by default
     select2_select 'Victoria', from: 'enterprise_address_attributes_state_id'
 
@@ -167,6 +169,8 @@ feature '
     fill_in 'enterprise_address_attributes_address1', with: '35 Ballantyne St'
     fill_in 'enterprise_address_attributes_city', with: 'Thornbury'
     fill_in 'enterprise_address_attributes_zipcode', with: '3072'
+    fill_in 'enterprise_address_attributes_latitude', with: '-37.4713077'
+    fill_in 'enterprise_address_attributes_longitude', with: '144.7851531'
     # default country (Australia in this test) should be selected by default
     select2_select 'Victoria', from: 'enterprise_address_attributes_state_id'