From 39b6d363edf7025e4ea7b1ac39fde6432028b243 Mon Sep 17 00:00:00 2001
From: andrew nimmo <andrnimm@fastmail.fm>
Date: Thu, 25 Jul 2024 22:34:59 -0700
Subject: [PATCH] DRY up details

---
 .../controllers/autocompleter_controller.js   | 22 ++++--
 .../observations/form/_details.html.erb       | 75 ++++++++-----------
 2 files changed, 46 insertions(+), 51 deletions(-)

diff --git a/app/javascript/controllers/autocompleter_controller.js b/app/javascript/controllers/autocompleter_controller.js
index e487e09c1b..2f343f4981 100644
--- a/app/javascript/controllers/autocompleter_controller.js
+++ b/app/javascript/controllers/autocompleter_controller.js
@@ -189,14 +189,22 @@ export default class extends Controller {
     this.prepareInputElement();
   }
 
-  // Swap out autocompleter type (and properties)
-  // Callable externally. Action may be called from a <select> with
-  // `data-action: "autocompleter-swap:swap->autocompleter#swap"`
-  // or an event dispatched by another controller.
-  // The event may not pass a type, or it may be the same as the current type.
-  // Re-initializing the current type is ok, often means we need to refresh
-  // the primer (as with location_containing a changed lat/lng)
+  // Reinitialize autocompleter type (and properties). Callable externally.
+  // For example, `swap` may be called from a change event dispatched by another
+  // controller: `data-action: "map:pointChanged->autocompleter#swap"`. Both the
+  // map & form-exif controllers dispatch a pointChanged event, when changing
+  // lat/lngs. For now we need both events - when form-exif updates the lat/lng
+  // inputs programmatically, it's not caught as a `change` by map. (Also, map
+  // only fires its event after buffering.)
+  //
+  // Events should pass a detail object with a type property. Example: `event: {
+  // detail: { type, request_params: { lat, lng } } }`. However, the calling
+  // event may not pass a type, or it may be the same as the current type.
+  // Re-initializing the current type is ok, often means we need to refresh the
+  // primer (as with location_containing a changed lat/lng).
+  //
   // Callable internally if you pass a detail object with a type property.
+  //
   swap({ detail }) {
     let type;
     if (this.hasSelectTarget) {
diff --git a/app/views/controllers/observations/form/_details.html.erb b/app/views/controllers/observations/form/_details.html.erb
index b3f180a847..88af7d9bc0 100644
--- a/app/views/controllers/observations/form/_details.html.erb
+++ b/app/views/controllers/observations/form/_details.html.erb
@@ -2,12 +2,19 @@
 
 <%# When and Where (location) section of create_observation form
     including location autocomplete, map, lat/long/alt %>
+<%
+t_s = {
+  lat: { abbr: :LAT.l, full: :LATITUDE.l },
+  lng: { abbr: :LNG.l, full: :LONGITUDE.l },
+  alt: { abbr: :ALT.l, full: :ALTITUDE.l }
+}
+%>
 
 <%= panel_block(id: "observation_details",
                 heading: :show_observation_details.l) do %>
 
-  <div class="row mt-3">
-    <div class="col-xs-12 col-md-6">
+  <%= tag.div(class: "row mt-3") do %>
+    <%= tag.div(class: "col-xs-12 col-md-6") do %>
       <!-- WHEN -->
       <%= date_select_with_label(
         form: f, field: :when, label: :WHEN.t + ":",
@@ -19,39 +26,23 @@
           [tag.strong("#{:WHERE_GROUP.l}:"),
            collapse_info_trigger("geolocation_help")].safe_join(" ")
         end %>
+
         <!-- LAT_LONG_ALT -->
-        <div class="row no-gutters" id="observation_lat_lng_alt">
-          <div class="col-xs-4">
-            <%= text_field_with_label(
-              form: f, field: :lat, class: "mb-0", addon: "º",
-              label: [
-                tag.span("#{:LATITUDE.l}:", class: "d-none d-sm-inline"),
-                tag.span("#{:LAT.l}:", class: "d-inline d-sm-none")
-              ].safe_join,
-              data: { map_target: "latInput", action: "map#bufferInputs" }
-            ) %>
-          </div>
-          <div class="col-xs-4">
-            <%= text_field_with_label(
-              form: f, field: :lng, class: "mb-0", addon: "º",
-              label: [
-                tag.span("#{:LONGITUDE.l}:", class: "d-none d-sm-inline"),
-                tag.span("#{:LNG.l}:", class: "d-inline d-sm-none")
-              ].safe_join,
-              data: { map_target: "lngInput", action: "map#bufferInputs" }
-            ) %>
-          </div>
-          <div class="col-xs-4">
-            <%= text_field_with_label(
-              form: f, field: :alt, class: "mb-0", addon: "m",
-              label: [
-                tag.span("#{:ALTITUDE.l}:", class: "d-none d-sm-inline"),
-                tag.span("#{:ALT.l}:", class: "d-inline d-sm-none")
-              ].safe_join, # (#{:units_meters.t})
-              data: { map_target: "altInput" }
-            ) %>
-          </div>
-        </div><!--.row-->
+        <%= tag.div(class: "row no-gutters",
+                    id: "observation_lat_lng_alt") do %>
+          <% [:lat, :lng, :alt].each do |key| %>
+            <%= tag.div(class: "col-xs-4") do
+              text_field_with_label(
+                form: f, field: key, class: "mb-0", addon: "º",
+                label: [
+                  tag.span("#{t_s[key][:full]}:", class: "d-none d-sm-inline"),
+                  tag.span("#{t_s[key][:abbr]}:", class: "d-inline d-sm-none")
+                ].safe_join,
+                data: { map_target: "#{key}Input", action: "map#bufferInputs" }
+              )
+            end %>
+          <% end %>
+        <% end %>
 
         <%= collapse_help_block(nil, id: "geolocation_help") do %>
           <%= tag.p(:form_observations_click_point.l) %>
@@ -67,12 +58,6 @@
                    locals: { button: button_name } ) %>
         <!-- /WHERE_REASONS -->
 
-        <%# NOTE:
-        Both the map & form-exif controllers dispatch a pointChanged event.
-            detail: { type, request_params: { lat, lng } }
-        For now we need both events. When form-exif updates the lat/lng inputs,
-        it's not caught as a change by map, because it's been changed by js.
-        Also, map only fires the event after buffering. %>
         <!-- WHERE -->
         <%= autocompleter_field(
           form: f, field: :place_name, type: :location,
@@ -101,6 +86,7 @@
             ].join(" ")
           }
         ) %>
+
         <%= fields_for(:location) do |f_l| %>
           <% %w[north south east west low high].each do |key| %>
             <%= f_l.hidden_field(:"#{key}", value: @location&.send(key) || nil,
@@ -117,10 +103,11 @@
         ) %>
         <!-- /IS_COLLECTION_LOCATION -->
       <% end %>
-    </div><!--.col-->
+    <% end %><!--.col-->
 
     <!-- MAP -->
-    <div class="col-xs-12 col-md-6" id="observation_geolocation">
+    <%= tag.div(class: "col-xs-12 col-md-6",
+                id: "observation_geolocation") do %>
       <%= tag.div(
         "", id: "observation_form_map",
             class: "observation-form-map collapse",
@@ -149,9 +136,9 @@
                   action: "map#clearMap form-exif#reenableButtons" }
         ) %>
       <% end %>
-    </div>
+    <% end %>
     <!-- /MAP -->
 
-  </div><!--.row-->
+  <% end %><!--.row-->
 
 <% end %>