Skip to content

Commit

Permalink
DRY up details
Browse files Browse the repository at this point in the history
  • Loading branch information
@nimmolo
nimmolo committed Jul 26, 2024
1 parent 95f748a commit 39b6d36
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 51 deletions.
22 changes: 15 additions & 7 deletions app/javascript/controllers/autocompleter_controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
75 changes: 31 additions & 44 deletions app/views/controllers/observations/form/_details.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 + ":",
Expand All @@ -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) %>
Expand All @@ -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,
Expand Down Expand Up @@ -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,
Expand All @@ -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",
Expand Down Expand Up @@ -149,9 +136,9 @@
action: "map#clearMap form-exif#reenableButtons" }
) %>
<% end %>
</div>
<% end %>
<!-- /MAP -->

</div><!--.row-->
<% end %><!--.row-->

<% end %>

0 comments on commit 39b6d36

Please sign in to comment.