Skip to content

Rebuild timelapse as Stimulus controller#1258

Open
maltehuebner wants to merge 3 commits intomainfrom
feature/timelapse-stimulus
Open

Rebuild timelapse as Stimulus controller#1258
maltehuebner wants to merge 3 commits intomainfrom
feature/timelapse-stimulus

Conversation

@maltehuebner
Copy link
Copy Markdown
Contributor

Summary

  • Expose Leaflet map instance from ride_map_controller via DOM property and custom event so other controllers can access it
  • Add new timelapse_controller.js Stimulus controller that animates rider positions on the ride map using existing backend timelapse API
  • Wire up existing TracksTab template elements with Stimulus data attributes (targets, actions, values) and convert sliders to native range inputs

Fixes #794

Test plan

  • Open a ride page with uploaded GPS tracks
  • Go to Tracks tab → click "Timelapse starten"
  • Verify tracks load with progress indicator (Track X von Y)
  • Verify animated circle markers appear on the map
  • Test Play/Pause/Stop buttons
  • Test Step Forward/Step Backward buttons
  • Test Speed slider (1-20x)
  • Test Time slider (drag to jump to position)
  • Verify clock and elapsed time update during animation
  • Verify markers are removed when navigating away

🤖 Generated with Claude Code

maltehuebner and others added 3 commits February 26, 2026 01:30
Make the map accessible to other controllers by storing it on the DOM
element and dispatching a custom event after initialization. This is
needed so the timelapse controller can add animated markers to the
existing ride map.

Closes #794

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Implement a new Stimulus controller that animates rider positions on the
ride map using GPS timelapse data from the existing backend API:

- Load track list and per-track timelapse data with progress indicator
- Animate circleMarkers via requestAnimationFrame with linear interpolation
- Binary search for efficient position lookup in timestamp arrays
- Play/Pause/Stop/Step Forward/Step Backward controls
- Speed slider (1-20x) and time position slider (0-100%)
- Live clock and elapsed time display
- Clean marker removal on disconnect

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Replace static IDs with Stimulus data attributes on the existing
timelapse card: data-controller, data-timelapse-target on all UI
elements, data-action on buttons, and convert text inputs to native
range sliders with form-range styling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@maltehuebner maltehuebner added enhancement javascript Pull requests that update Javascript code AI-generated labels Feb 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

AI-generated enhancement javascript Pull requests that update Javascript code

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Timelapse of tracks doesn't work

1 participant