572 lines
26 KiB
Twig
572 lines
26 KiB
Twig
{% extends 'partials/base.html.twig' %}
|
|
|
|
{% block content %}
|
|
{% set dailies_page = grav.pages.find(page.route ~ '/dailies') %}
|
|
{% set stories_page = grav.pages.find(page.route ~ '/stories') %}
|
|
{% set journal_entries = dailies_page ? dailies_page.children.published() : [] %}
|
|
{% set story_entries = stories_page ? stories_page.children.published() : [] %}
|
|
|
|
{% set all_items = [] %}
|
|
{% for e in journal_entries %}
|
|
{% set all_items = all_items|merge([{'type': 'journal', 'page': e, 'date': e.header.date}]) %}
|
|
{% endfor %}
|
|
{% for s in story_entries %}
|
|
{% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.header.date}]) %}
|
|
{% endfor %}
|
|
{% set all_items = all_items|sort_by_key('date', 4) %}
|
|
|
|
{% set journal_count = journal_entries|length %}
|
|
{% set story_count = story_entries|length %}
|
|
|
|
{# Stats computation #}
|
|
{% set days_on_road = 0 %}
|
|
{% if page.header.date_end is not empty %}
|
|
{% set start_ts = page.header.date_start|date('U') %}
|
|
{% set end_ts = page.header.date_end|date('U') %}
|
|
{% set days_on_road = ((end_ts - start_ts) / 86400)|round(0, 'ceil') %}
|
|
{% else %}
|
|
{% 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 diff_seconds = "now"|date('U') - first_ts %}
|
|
{% set days_raw = (diff_seconds / 86400)|round(0, 'floor') %}
|
|
{% set days_on_road = days_raw < 1 ? 1 : days_raw %}
|
|
{% endif %}
|
|
{% 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 seen_city_lower = [] %}
|
|
{% set city_display = [] %}
|
|
{% for entry in journal_entries %}
|
|
{% if entry.header.location_city is not empty %}
|
|
{% set lower = entry.header.location_city|trim|lower %}
|
|
{% if lower not in seen_city_lower %}
|
|
{% set seen_city_lower = seen_city_lower|merge([lower]) %}
|
|
{% set city_display = city_display|merge([entry.header.location_city|trim]) %}
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% set temp_min = null %}
|
|
{% set temp_max = null %}
|
|
{% for entry in journal_entries %}
|
|
{% if entry.header.weather_temp_c is defined and entry.header.weather_temp_c is not empty %}
|
|
{% set t = entry.header.weather_temp_c %}
|
|
{% if temp_min is null or t < temp_min %}{% set temp_min = t %}{% endif %}
|
|
{% if temp_max is null or t > temp_max %}{% set temp_max = t %}{% 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' %}
|
|
{% set gpx_urls = gpx_urls|merge([page.url ~ '/' ~ name]) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% set has_gpx = gpx_urls|length > 0 %}
|
|
|
|
{% set map_entries = [] %}
|
|
{% for item in all_items %}
|
|
{% if item.page.header.lat is not empty and item.page.header.lng is not empty %}
|
|
{% set map_entries = map_entries|merge([{
|
|
'type': item.type,
|
|
'lat': item.page.header.lat|number_format(6, '.', ''),
|
|
'lng': item.page.header.lng|number_format(6, '.', ''),
|
|
'slug': item.page.slug,
|
|
'title': item.page.title,
|
|
'url': item.page.url,
|
|
'force_connect': item.page.header.force_connect ? true : false,
|
|
'transport_mode': item.page.header.transport_mode ? item.page.header.transport_mode : null
|
|
}]) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
<div class="home-layout">
|
|
<div class="home-map-col">
|
|
<div class="home-map" id="trip-map"></div>
|
|
</div>
|
|
|
|
<div class="home-feed-col">
|
|
<div class="home-trip-header">
|
|
<h1 class="home-trip-name">{{ page.title }}</h1>
|
|
{% if page.header.date_start %}
|
|
<p class="trip-dates" style="font-size:var(--text-sm);color:var(--color-ink-muted);margin:var(--space-1) 0 var(--space-2);">
|
|
{{ page.header.date_start|date('d M Y') }}
|
|
{% if page.header.date_end %} — {{ page.header.date_end|date('d M Y') }}{% else %} — Ongoing{% endif %}
|
|
</p>
|
|
{% endif %}
|
|
<span class="home-trip-counts">
|
|
{{ journal_count }} journal {{ journal_count == 1 ? 'entry' : 'entries' }}
|
|
{% if story_count > 0 %} · {{ story_count }} {{ story_count == 1 ? 'story' : 'stories' }}{% endif %}
|
|
</span>
|
|
<div class="trip-filter-bar">
|
|
<div class="trip-filter-group">
|
|
<button class="trip-filter-btn is-active" data-filter="all" aria-pressed="true">All content</button>
|
|
<button class="trip-filter-btn" data-filter="journal" aria-pressed="false">Journal</button>
|
|
<button class="trip-filter-btn" data-filter="story" aria-pressed="false">Stories</button>
|
|
</div>
|
|
<div class="trip-filter-group">
|
|
<button class="trip-stats-btn" id="trip-stats-toggle" aria-expanded="false" aria-controls="trip-stats-block">Stats</button>
|
|
{% if has_gpx %}
|
|
<button class="trip-stats-btn" id="trip-cycling-toggle" aria-expanded="false" aria-controls="trip-cycling-block">Cycling</button>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="trip-stats-block" class="trip-stats-block" style="display:none">
|
|
<div class="trip-stats-grid">
|
|
<div class="stat-block">
|
|
<span class="stat-value">{{ days_on_road }}</span>
|
|
<span class="stat-label">{{ days_on_road == 1 ? 'day' : 'days' }} on the road</span>
|
|
</div>
|
|
<div class="stat-block">
|
|
<span class="stat-value">{{ journal_count }}</span>
|
|
<span class="stat-label">{{ journal_count == 1 ? 'entry' : 'entries' }} posted</span>
|
|
</div>
|
|
<div class="stat-block">
|
|
<span class="stat-value">{{ country_display|length }}</span>
|
|
<span class="stat-label">{{ country_display|length == 1 ? 'country' : 'countries' }} visited</span>
|
|
</div>
|
|
<div class="stat-block">
|
|
<span class="stat-value">{{ city_display|length }}</span>
|
|
<span class="stat-label">{{ city_display|length == 1 ? 'city' : 'cities' }} visited</span>
|
|
</div>
|
|
<div class="stat-block">
|
|
<span class="stat-value" id="stat-distance">—</span>
|
|
<span class="stat-label">{{ has_gpx ? '🚴 km cycled' : '🧭 km roamed' }}</span>
|
|
</div>
|
|
<div class="stat-block">
|
|
{% if temp_min is not null %}
|
|
<span class="stat-value">{{ temp_min == temp_max ? temp_min : temp_min ~ ' → ' ~ temp_max }}</span>
|
|
{% else %}
|
|
<span class="stat-value">—</span>
|
|
{% endif %}
|
|
<span class="stat-label">°C range</span>
|
|
</div>
|
|
</div>
|
|
{% if country_display|length > 0 %}
|
|
<p class="trip-stats-countries">{{ country_display|join(' · ') }}</p>
|
|
{% endif %}
|
|
<p class="trip-stats-note">{{ has_gpx ? 'Distance based on GPS track data.' : 'Distance is approximate — straight lines between entry locations.' }}</p>
|
|
</div>
|
|
|
|
{% if has_gpx %}
|
|
<div id="trip-cycling-block" class="trip-cycling-block" style="display:none">
|
|
<div class="trip-cycling-header">
|
|
<span class="trip-cycling-icon">🚴</span>
|
|
<span class="trip-cycling-title">Cycling Stats</span>
|
|
</div>
|
|
<div class="trip-cycling-grid">
|
|
<div class="stat-block">
|
|
<span class="stat-value" id="cyc-distance">—</span>
|
|
<span class="stat-label">km distance</span>
|
|
</div>
|
|
<div class="stat-block">
|
|
<span class="stat-value" id="cyc-ele-gain">—</span>
|
|
<span class="stat-label">m ↑ gain</span>
|
|
</div>
|
|
<div class="stat-block">
|
|
<span class="stat-value" id="cyc-ele-loss">—</span>
|
|
<span class="stat-label">m ↓ loss</span>
|
|
</div>
|
|
<div class="stat-block">
|
|
<span class="stat-value" id="cyc-highest">—</span>
|
|
<span class="stat-label">m highest</span>
|
|
</div>
|
|
<div class="stat-block">
|
|
<span class="stat-value" id="cyc-lowest">—</span>
|
|
<span class="stat-label">m lowest</span>
|
|
</div>
|
|
<div class="stat-block">
|
|
<span class="stat-value" id="cyc-moving-time">—</span>
|
|
<span class="stat-label">moving time</span>
|
|
</div>
|
|
<div class="stat-block">
|
|
<span class="stat-value" id="cyc-avg-speed">—</span>
|
|
<span class="stat-label">km/h avg speed</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="feed">
|
|
{% if all_items|length > 0 %}
|
|
{% for item in all_items %}
|
|
{% set entry = item.page %}
|
|
|
|
{% if item.type == 'journal' %}
|
|
{% set weather_icons = {
|
|
'Sunny': '☀️', 'Partly cloudy': '⛅', 'Cloudy': '☁️',
|
|
'Foggy': '🌫️', 'Drizzle': '🌦️', 'Rain': '🌧️',
|
|
'Snow': '❄️', 'Thunderstorm': '⛈️'
|
|
} %}
|
|
<article class="journal-post" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
|
|
<header class="journal-post-header">
|
|
<h2 class="journal-post-title">{{ entry.title }}</h2>
|
|
<p class="journal-post-meta">
|
|
<a class="journal-post-permalink" href="{{ entry.url }}">
|
|
<time datetime="{{ entry.date|date('Y-m-d') }}">{{ entry.date|date('d M Y')|upper }}</time>
|
|
</a>
|
|
{% if entry.header.location_city or entry.header.location_country %}
|
|
<span class="journal-post-location">
|
|
· 📍
|
|
{%- set _loc = [] -%}
|
|
{%- if entry.header.location_city -%}{%- set _loc = _loc|merge([entry.header.location_city]) -%}{%- endif -%}
|
|
{%- if entry.header.location_country -%}{%- set _loc = _loc|merge([entry.header.location_country]) -%}{%- endif -%}
|
|
{{ _loc|join(', ') }}
|
|
</span>
|
|
{% endif %}
|
|
{% if entry.header.weather_desc %}
|
|
<span class="journal-post-weather">· {{ weather_icons[entry.header.weather_desc] ?? '' }} {{ entry.header.weather_desc }}</span>
|
|
{% endif %}
|
|
</p>
|
|
</header>
|
|
|
|
{% set images = entry.media.images %}
|
|
{% if images|length > 0 %}
|
|
<div class="journal-photo-strip" data-slides="{{ images|length }}">
|
|
{% for img in images %}
|
|
<div class="journal-photo-slide">
|
|
<img src="{{ img.cropResize(900, 600).url }}" alt="{{ entry.title }}" loading="lazy">
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% if images|length > 1 %}
|
|
<div class="journal-photo-dots" aria-hidden="true">
|
|
{% for img in images %}
|
|
<span class="journal-photo-dot{% if loop.first %} is-active{% endif %}"></span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
<div class="journal-post-body">{{ entry.content|raw }}</div>
|
|
</article>
|
|
{% else %}
|
|
{% set hero = null %}
|
|
{% if entry.header.hero_image and entry.media[entry.header.hero_image] is defined %}
|
|
{% set hero = entry.media[entry.header.hero_image] %}
|
|
{% elseif entry.media.images|length > 0 %}
|
|
{% set hero = entry.media.images|first %}
|
|
{% endif %}
|
|
<a class="entry-card entry-card--story" id="entry-{{ entry.slug }}" data-type="story" href="{{ entry.url }}">
|
|
{% if hero %}
|
|
<div class="entry-card-photo entry-card-photo--story">
|
|
<img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
|
|
</div>
|
|
{% endif %}
|
|
<div class="entry-card-body">
|
|
<span class="story-badge">✦ Story</span>
|
|
<h2 class="entry-title">{{ entry.title }}</h2>
|
|
</div>
|
|
</a>
|
|
{% endif %}
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="feed-empty">No entries yet. The journey is about to begin.</p>
|
|
{% endif %}
|
|
<p id="feed-filter-empty" class="feed-empty" style="display:none;"></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/maplibre-gl@4/dist/maplibre-gl.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@mapbox/togeojson@0.16.2/togeojson.min.js"></script>
|
|
<script src="{{ url('theme://js/maplibre-utils.js') }}"></script>
|
|
<script>
|
|
var TRIP_ENTRIES = {{ map_entries|json_encode|raw }};
|
|
var GPX_URLS = {{ gpx_urls|json_encode|raw }};
|
|
|
|
var tripMap = new maplibregl.Map({
|
|
container: 'trip-map',
|
|
style: MapUtils.MAP_STYLE,
|
|
center: [20, 20],
|
|
zoom: 2
|
|
});
|
|
|
|
tripMap.on('load', function () {
|
|
if (TRIP_ENTRIES.length === 0) {
|
|
tripMap.jumpTo({ center: [0, 20], zoom: 2 });
|
|
return;
|
|
}
|
|
|
|
/* ── Markers + bounds ──────────────────────────────────────── */
|
|
var bounds = new maplibregl.LngLatBounds();
|
|
|
|
TRIP_ENTRIES.forEach(function (entry, i) {
|
|
var isLatest = (entry.type !== 'story') && (i === TRIP_ENTRIES.length - 1);
|
|
var lngLat = [parseFloat(entry.lng), parseFloat(entry.lat)];
|
|
bounds.extend(lngLat);
|
|
|
|
var el = entry.type === 'story' ? MapUtils.createStoryMarker() : MapUtils.createDotMarker(isLatest);
|
|
el.dataset.url = entry.url;
|
|
var popup = new maplibregl.Popup({ offset: 12, closeButton: false, closeOnClick: false, className: 'map-tip-popup' })
|
|
.setLngLat(lngLat)
|
|
.setHTML('<span class="map-tip">' + entry.title + '</span>');
|
|
el.addEventListener('mouseenter', function () { popup.addTo(tripMap); });
|
|
el.addEventListener('mouseleave', function () { popup.remove(); });
|
|
el.addEventListener('click', function () {
|
|
var card = document.getElementById('entry-' + entry.slug);
|
|
if (!card) return;
|
|
card.scrollIntoView({ behavior: 'smooth', block: 'center' });
|
|
setTimeout(function () {
|
|
card.classList.add('is-highlighted');
|
|
setTimeout(function () { card.classList.remove('is-highlighted'); }, 700);
|
|
}, 350);
|
|
});
|
|
|
|
new maplibregl.Marker({ element: el }).setLngLat(lngLat).addTo(tripMap);
|
|
});
|
|
|
|
/* ── Fit bounds ─────────────────────────────────────────────── */
|
|
if (TRIP_ENTRIES.length === 1) {
|
|
tripMap.jumpTo({ center: [parseFloat(TRIP_ENTRIES[0].lng), parseFloat(TRIP_ENTRIES[0].lat)], zoom: 10 });
|
|
} else {
|
|
tripMap.fitBounds(bounds, { padding: 60, maxZoom: 11 });
|
|
}
|
|
|
|
/* ── GPX tracks + journey segments ─────────────────────────── */
|
|
Promise.all(GPX_URLS.map(function (url, idx) {
|
|
return fetch(url)
|
|
.then(function (r) { return r.text(); })
|
|
.then(function (text) {
|
|
var xml = new DOMParser().parseFromString(text, 'text/xml');
|
|
var geojson = toGeoJSON.gpx(xml);
|
|
var sid = 'gpx-' + idx;
|
|
tripMap.addSource(sid, { type: 'geojson', data: geojson });
|
|
tripMap.addLayer({
|
|
id: sid + '-line', type: 'line', source: sid,
|
|
layout: { 'line-join': 'round', 'line-cap': 'round' },
|
|
paint: { 'line-color': MapUtils.ACCENT, 'line-width': 2, 'line-opacity': 0.7 }
|
|
});
|
|
return MapUtils.extractTrackpoints(geojson);
|
|
})
|
|
.catch(function (err) {
|
|
console.warn('GPX load failed:', url, err);
|
|
return [];
|
|
});
|
|
})).then(function (allTrackpoints) {
|
|
var validTrackpoints = allTrackpoints.filter(function (tp) { return tp.length > 0; });
|
|
var segments = MapUtils.buildJourneySegments(TRIP_ENTRIES, validTrackpoints, 10);
|
|
MapUtils.addJourneySegments(tripMap, segments, 'trip-journey');
|
|
});
|
|
});
|
|
setTimeout(function () { tripMap.resize(); }, 100);
|
|
|
|
(function() {
|
|
var filterBtns = document.querySelectorAll('.trip-filter-btn');
|
|
var cards = document.querySelectorAll('[data-type]');
|
|
var filterEmpty = document.getElementById('feed-filter-empty');
|
|
|
|
filterBtns.forEach(function(btn) {
|
|
btn.addEventListener('click', function() {
|
|
filterBtns.forEach(function(b) { b.classList.remove('is-active'); b.setAttribute('aria-pressed', 'false'); });
|
|
btn.classList.add('is-active');
|
|
btn.setAttribute('aria-pressed', 'true');
|
|
|
|
var filter = btn.getAttribute('data-filter');
|
|
var visible = 0;
|
|
|
|
cards.forEach(function(card) {
|
|
var show = filter === 'all' || card.getAttribute('data-type') === filter;
|
|
card.style.display = show ? '' : 'none';
|
|
if (show) visible++;
|
|
});
|
|
|
|
if (filterEmpty) {
|
|
if (visible === 0) {
|
|
filterEmpty.textContent = filter === 'story'
|
|
? 'No stories yet for this trip.'
|
|
: 'No entries yet.';
|
|
filterEmpty.style.display = '';
|
|
} else {
|
|
filterEmpty.style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
})();
|
|
|
|
var STATS_GPS = {{ gps_points|json_encode|raw }};
|
|
var HAS_GPX = {{ has_gpx ? 'true' : 'false' }};
|
|
|
|
function haversineKm(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));
|
|
}
|
|
|
|
function parseGpxFiles(urls, callback) {
|
|
var pending = urls.length;
|
|
var fileResults = new Array(urls.length);
|
|
if (pending === 0) { callback({ error: 'no files' }); return; }
|
|
urls.forEach(function(url, idx) {
|
|
fetch(url)
|
|
.then(function(r) { return r.text(); })
|
|
.then(function(text) {
|
|
var xml = new DOMParser().parseFromString(text, 'text/xml');
|
|
var trkpts = xml.querySelectorAll('trkpt');
|
|
var pts = [];
|
|
trkpts.forEach(function(pt) {
|
|
var eleEl = pt.querySelector('ele');
|
|
var timeEl = pt.querySelector('time');
|
|
pts.push({
|
|
lat: parseFloat(pt.getAttribute('lat')),
|
|
lon: parseFloat(pt.getAttribute('lon')),
|
|
ele: eleEl ? parseFloat(eleEl.textContent) : NaN,
|
|
time: timeEl ? timeEl.textContent : null
|
|
});
|
|
});
|
|
fileResults[idx] = pts;
|
|
pending--;
|
|
if (pending === 0) { computeAndCallback(); }
|
|
})
|
|
.catch(function(err) {
|
|
console.warn('GPX load failed:', url, err);
|
|
fileResults[idx] = [];
|
|
pending--;
|
|
if (pending === 0) { computeAndCallback(); }
|
|
});
|
|
});
|
|
|
|
function computeAndCallback() {
|
|
var totalDistance = 0, totalEleGain = 0, totalEleLoss = 0;
|
|
var globalHighest = NaN, globalLowest = NaN, totalMovingTime = 0;
|
|
|
|
fileResults.forEach(function(pts) {
|
|
if (!pts || pts.length < 2) return;
|
|
for (var i = 1; i < pts.length; i++) {
|
|
var p0 = pts[i-1], p1 = pts[i];
|
|
var d = haversineKm(p0.lat, p0.lon, p1.lat, p1.lon);
|
|
totalDistance += d;
|
|
|
|
if (!isNaN(p0.ele) && !isNaN(p1.ele)) {
|
|
var dEle = p1.ele - p0.ele;
|
|
if (dEle > 0) totalEleGain += dEle;
|
|
if (dEle < 0) totalEleLoss += (-dEle);
|
|
if (isNaN(globalHighest) || p1.ele > globalHighest) globalHighest = p1.ele;
|
|
if (isNaN(globalLowest) || p1.ele < globalLowest) globalLowest = p1.ele;
|
|
}
|
|
|
|
if (p0.time && p1.time) {
|
|
var dtHrs = (Date.parse(p1.time) - Date.parse(p0.time)) / 3600000;
|
|
if (dtHrs > 0) {
|
|
var speed = d / dtHrs;
|
|
if (speed >= 1) totalMovingTime += dtHrs;
|
|
}
|
|
}
|
|
}
|
|
// include first point of each file in elevation range
|
|
if (pts.length > 0 && !isNaN(pts[0].ele)) {
|
|
if (isNaN(globalHighest) || pts[0].ele > globalHighest) globalHighest = pts[0].ele;
|
|
if (isNaN(globalLowest) || pts[0].ele < globalLowest) globalLowest = pts[0].ele;
|
|
}
|
|
});
|
|
|
|
var avgSpeed = totalMovingTime > 0 ? totalDistance / totalMovingTime : 0;
|
|
var movHours = Math.floor(totalMovingTime);
|
|
var movMins = Math.round((totalMovingTime - movHours) * 60);
|
|
if (movMins === 60) { movHours++; movMins = 0; }
|
|
|
|
callback({
|
|
distance: totalDistance,
|
|
eleGain: totalEleGain,
|
|
eleLoss: totalEleLoss,
|
|
highest: globalHighest,
|
|
lowest: globalLowest,
|
|
movingTime: movHours + ':' + (movMins < 10 ? '0' : '') + movMins,
|
|
avgSpeed: avgSpeed
|
|
});
|
|
}
|
|
}
|
|
|
|
(function() {
|
|
var distEl = document.getElementById('stat-distance');
|
|
|
|
if (HAS_GPX) {
|
|
parseGpxFiles(GPX_URLS, function(result) {
|
|
// Mode A: update distance stat
|
|
if (distEl) {
|
|
distEl.textContent = result.distance > 0 ? Math.round(result.distance).toLocaleString() : '—';
|
|
}
|
|
// Populate cycling panel
|
|
function setText(id, val) {
|
|
var el = document.getElementById(id);
|
|
if (el) el.textContent = val;
|
|
}
|
|
setText('cyc-distance', result.distance > 0 ? Math.round(result.distance).toLocaleString() : '—');
|
|
setText('cyc-ele-gain', !isNaN(result.eleGain) ? Math.round(result.eleGain) : '—');
|
|
setText('cyc-ele-loss', !isNaN(result.eleLoss) ? Math.round(result.eleLoss) : '—');
|
|
setText('cyc-highest', !isNaN(result.highest) ? Math.round(result.highest) : '—');
|
|
setText('cyc-lowest', !isNaN(result.lowest) ? Math.round(result.lowest) : '—');
|
|
setText('cyc-moving-time', result.movingTime || '—');
|
|
setText('cyc-avg-speed', result.avgSpeed > 0 ? result.avgSpeed.toFixed(1) : '—');
|
|
});
|
|
} else {
|
|
// Mode B: haversine between entry points
|
|
var total = 0;
|
|
for (var i = 1; i < STATS_GPS.length; i++) {
|
|
total += haversineKm(
|
|
parseFloat(STATS_GPS[i-1][0]), parseFloat(STATS_GPS[i-1][1]),
|
|
parseFloat(STATS_GPS[i][0]), parseFloat(STATS_GPS[i][1])
|
|
);
|
|
}
|
|
if (distEl) {
|
|
distEl.textContent = STATS_GPS.length < 2 ? '—' : '~' + Math.round(total).toLocaleString();
|
|
}
|
|
}
|
|
|
|
// Stats toggle
|
|
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);
|
|
statsToggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
|
|
});
|
|
}
|
|
|
|
// Cycling toggle (only present when has_gpx)
|
|
var cycToggle = document.getElementById('trip-cycling-toggle');
|
|
var cycBlock = document.getElementById('trip-cycling-block');
|
|
if (cycToggle && cycBlock) {
|
|
cycToggle.addEventListener('click', function() {
|
|
var isOpen = cycBlock.style.display !== 'none';
|
|
cycBlock.style.display = isOpen ? 'none' : '';
|
|
cycToggle.classList.toggle('is-active', !isOpen);
|
|
cycToggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
{% endblock %}
|