feat: Add comprehensive address-first geolocation system for events

This implementation provides automatic geocoding and map integration:

- **Event Model Enhancements:**
  - Automatic geocoding callback using OpenStreetMap Nominatim API
  - 3-tier fallback system: exact coordinates → city-based → country default
  - Fallback coordinates for major French cities (Paris, Lyon, Marseille, etc.)
  - Robust error handling that prevents event creation failures

- **User-Friendly Event Forms:**
  - Address-first approach - users just enter addresses
  - Hidden coordinate fields (auto-generated behind scenes)
  - Real-time geocoding with 1.5s debounce
  - "Ma position" button for current location with reverse geocoding
  - "Prévisualiser" button to show map links
  - Smart feedback system (loading, success, warnings, errors)

- **Enhanced Event Show Page:**
  - Map provider links (OpenStreetMap, Google Maps, Apple Plans)
  - Warning badges when approximate coordinates are used
  - Address-based URLs for better map integration

- **Comprehensive JavaScript Controller:**
  - Debounced auto-geocoding to minimize API calls
  - Multiple geocoding strategies (manual vs automatic)
  - Promise-based geolocation with proper error handling
  - Dynamic map link generation with address + coordinates

- **Failure Handling:**
  - Events never fail to save due to missing coordinates
  - Fallback to city-based coordinates when exact geocoding fails
  - User-friendly warnings when approximate locations are used
  - Maintains existing coordinates on update failures

🤖 Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
kbe
2025-09-10 19:36:47 +02:00
parent 46d042b85e
commit 332827c6da
6 changed files with 596 additions and 35 deletions

View File

@@ -116,26 +116,35 @@
</div>
<div>
<%= form.label :venue_address, "Adresse", class: "block text-sm font-medium text-gray-700 mb-2" %>
<%= form.text_field :venue_address, class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent", placeholder: "Ex: 1 Boulevard Poissonnière, 75002 Paris" %>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<%= form.label :latitude, "Latitude", class: "block text-sm font-medium text-gray-700 mb-2" %>
<%= form.number_field :latitude, step: :any, class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent", placeholder: "48.8566" %>
<%= form.label :venue_address, "Adresse complète", class: "block text-sm font-medium text-gray-700 mb-2" %>
<div class="space-y-2">
<%= form.text_field :venue_address, class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent", placeholder: "Ex: 1 Boulevard Poissonnière, 75002 Paris", data: { "event-form-target": "address", action: "input->event-form#addressChanged" } %>
<!-- Location Actions -->
<div class="flex flex-wrap gap-2">
<button type="button" data-action="click->event-form#getCurrentLocation" class="inline-flex items-center px-3 py-2 text-xs font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 transition-colors">
<i data-lucide="map-pin" class="w-3 h-3 mr-1"></i>
Ma position
</button>
<button type="button" data-action="click->event-form#previewLocation" class="inline-flex items-center px-3 py-2 text-xs font-medium text-purple-700 bg-purple-50 border border-purple-200 rounded-lg hover:bg-purple-100 transition-colors">
<i data-lucide="map" class="w-3 h-3 mr-1"></i>
Prévisualiser
</button>
</div>
</div>
<div>
<%= form.label :longitude, "Longitude", class: "block text-sm font-medium text-gray-700 mb-2" %>
<%= form.number_field :longitude, step: :any, class: "w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent", placeholder: "2.3522" %>
</div>
<p class="mt-2 text-sm text-gray-500">
<i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
Les coordonnées GPS seront automatiquement calculées à partir de cette adresse.
</p>
</div>
<p class="text-sm text-gray-500">
<i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
Utilisez un service comme <a href="https://www.latlong.net/" target="_blank" class="text-purple-600 hover:text-purple-800">latlong.net</a> pour obtenir les coordonnées GPS.
</p>
<!-- Hidden coordinate fields for form submission -->
<%= form.hidden_field :latitude, data: { "event-form-target": "latitude" } %>
<%= form.hidden_field :longitude, data: { "event-form-target": "longitude" } %>
<!-- Map Links Container (shown when address is valid) -->
<div data-event-form-target="mapLinksContainer" class="empty:hidden bg-gray-50 rounded-lg p-3 border border-gray-200"></div>
</div>
<% if @event.published? && @event.tickets.any? %>