feat(trip): add ascending/descending sort toggle button

Button sits in the right filter group alongside Stats/Cycling.
Default state: ascending (↑ Oldest first, no highlight).
Toggled state: descending (↓ Newest first, is-active pill style).
DOM reversal uses insertBefore against the anchored #feed-filter-empty
so the empty-state message stays last regardless of sort direction.
Interacts safely with the type filter (show/hide by data-type).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Vgmzx8VTTTmCskSpQtsLTr
This commit is contained in:
2026-06-21 22:21:55 +02:00
parent 53bfe5955d
commit b6142cee44
@@ -132,6 +132,7 @@
{% if has_gpx %} {% if has_gpx %}
<button class="trip-stats-btn" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling</button> <button class="trip-stats-btn" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling</button>
{% endif %} {% endif %}
<button class="trip-stats-btn" id="trip-sort-toggle" aria-label="Sort: oldest first">↑ Oldest first</button>
</div> </div>
</div> </div>
</div> </div>
@@ -327,6 +328,23 @@ setTimeout(function () { tripMap.resize(); }, 100);
}); });
})(); })();
(function() {
var sortBtn = document.getElementById('trip-sort-toggle');
if (!sortBtn) return;
var feed = document.querySelector('.feed');
var emptyMsg = document.getElementById('feed-filter-empty');
var ascending = true;
sortBtn.addEventListener('click', function() {
ascending = !ascending;
var entries = Array.from(feed.querySelectorAll('[data-type]'));
entries.reverse().forEach(function(el) { feed.insertBefore(el, emptyMsg); });
sortBtn.textContent = ascending ? '↑ Oldest first' : '↓ Newest first';
sortBtn.setAttribute('aria-label', ascending ? 'Sort: oldest first' : 'Sort: newest first');
sortBtn.classList.toggle('is-active', !ascending);
});
})();
var STATS_GPS = {{ gps_points|json_encode|raw }}; var STATS_GPS = {{ gps_points|json_encode|raw }};
var HAS_GPX = {{ has_gpx ? 'true' : 'false' }}; var HAS_GPX = {{ has_gpx ? 'true' : 'false' }};