diff --git a/themes/intotheeast/css/style.css b/themes/intotheeast/css/style.css index 16376cc..f251ec1 100644 --- a/themes/intotheeast/css/style.css +++ b/themes/intotheeast/css/style.css @@ -898,3 +898,35 @@ body::after { .trip-feed { min-width: 0; } .trip-sidebar-section {} + +/* ── Trip page inline stats block ───────────────────────────────────────────── */ + +.trip-stats-block { + background: var(--color-canvas); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: var(--space-6); + margin-bottom: var(--space-6); +} + +.trip-stats-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-4); + margin-bottom: var(--space-4); +} + +@media (max-width: 600px) { + .trip-stats-grid { grid-template-columns: repeat(2, 1fr); } +} + +.trip-stats-countries { + font-size: var(--text-sm); + color: var(--color-ink-2); + margin-bottom: var(--space-2); +} + +.trip-stats-note { + font-size: var(--text-xs); + color: var(--color-ink-muted); +} diff --git a/themes/intotheeast/templates/trip.html.twig b/themes/intotheeast/templates/trip.html.twig index 9bf0f10..96fe4fb 100644 --- a/themes/intotheeast/templates/trip.html.twig +++ b/themes/intotheeast/templates/trip.html.twig @@ -18,6 +18,41 @@ {% set journal_count = journal_entries|length %} {% set story_count = story_entries|length %} +{# Stats computation #} +{% set days_on_road = 0 %} +{% set first_ts = null %} +{% for entry in journal_entries %} + {% set ts = entry.date|date('U') %} + {% if first_ts is null or ts < first_ts %} + {% set first_ts = ts %} + {% endif %} +{% endfor %} +{% if first_ts is not null %} + {% set now_ts = "now"|date('U') %} + {% set diff_seconds = now_ts - first_ts %} + {% set days_raw = (diff_seconds / 86400)|round(0, 'floor') %} + {% set days_on_road = days_raw < 1 ? 1 : days_raw %} +{% endif %} + +{% set seen_lower = [] %} +{% set country_display = [] %} +{% for entry in journal_entries %} + {% if entry.header.location_country is not empty %} + {% set lower = entry.header.location_country|trim|lower %} + {% if lower not in seen_lower %} + {% set seen_lower = seen_lower|merge([lower]) %} + {% set country_display = country_display|merge([entry.header.location_country|trim]) %} + {% endif %} + {% endif %} +{% endfor %} + +{% set gps_points = [] %} +{% for entry in journal_entries %} + {% if entry.header.lat is not empty and entry.header.lng is not empty %} + {% set gps_points = gps_points|merge([[entry.header.lat, entry.header.lng]]) %} + {% endif %} +{% endfor %} + {% set gpx_urls = [] %} {% for name, media in page.media.all %} {% if name|split('.')|last == 'gpx' %} @@ -65,6 +100,31 @@ + +
{% if all_items|length > 0 %} {% for item in all_items %} @@ -223,5 +283,41 @@ setTimeout(function() { map.invalidateSize(); }, 100); }); }); })(); + +var STATS_GPS = {{ gps_points|json_encode|raw }}; + +(function() { + function haversine(lat1, lng1, lat2, lng2) { + var R = 6371; + var dLat = (lat2 - lat1) * Math.PI / 180; + var dLng = (lng2 - lng1) * Math.PI / 180; + var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * + Math.sin(dLng / 2) * Math.sin(dLng / 2); + return R * 2 * Math.asin(Math.sqrt(a)); + } + + var totalKm = 0; + for (var i = 1; i < STATS_GPS.length; i++) { + totalKm += haversine( + parseFloat(STATS_GPS[i - 1][0]), parseFloat(STATS_GPS[i - 1][1]), + parseFloat(STATS_GPS[i][0]), parseFloat(STATS_GPS[i][1]) + ); + } + var distEl = document.getElementById('stat-distance'); + if (distEl) { + distEl.textContent = STATS_GPS.length < 2 ? '—' : '~' + Math.round(totalKm).toLocaleString(); + } + + var statsToggle = document.getElementById('trip-stats-toggle'); + var statsBlock = document.getElementById('trip-stats-block'); + if (statsToggle && statsBlock) { + statsToggle.addEventListener('click', function() { + var isOpen = statsBlock.style.display !== 'none'; + statsBlock.style.display = isOpen ? 'none' : ''; + statsToggle.classList.toggle('is-active', !isOpen); + }); + } +})(); {% endblock %}