intotheeast-com-content/themes/intotheeast/templates/trip.html.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.date}]) %}
{% endfor %}
{% for s in story_entries %}
    {% set all_items = all_items|merge([{'type': 'story', 'page': s, 'date': s.date}]) %}
{% endfor %}
{% set all_items = all_items|sort((a, b) => a.date < b.date ? 1 : -1) %}

{% 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' %}
        {% set gpx_urls = gpx_urls|merge([page.url ~ '/' ~ name]) %}
    {% endif %}
{% endfor %}

{% set map_entries = [] %}
{% for item in all_items %}
    {% if item.type == 'journal' and item.page.header.lat is not empty and item.page.header.lng is not empty %}
        {% set map_entries = map_entries|merge([{
            'lat': item.page.header.lat|number_format(6, '.', ''),
            'lng': item.page.header.lng|number_format(6, '.', ''),
            'slug': item.page.slug,
            'title': item.page.title
        }]) %}
    {% 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">All content</button>
                    <button class="trip-filter-btn" data-filter="journal">Journal</button>
                    <button class="trip-filter-btn" data-filter="story">Stories</button>
                </div>
                <button class="trip-stats-btn" id="trip-stats-toggle">Stats</button>
            </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" id="stat-distance">—</span>
                    <span class="stat-label">km traveled</span>
                </div>
            </div>
            {% if country_display|length > 0 %}
            <p class="trip-stats-countries">{{ country_display|join(' · ') }}</p>
            {% endif %}
            <p class="trip-stats-note">Distance is approximate — straight lines between entry locations.</p>
        </div>

        <div class="feed">
            {% if all_items|length > 0 %}
                {% for item in all_items %}
                    {% set entry = item.page %}
                    {% 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 %}

                    {% if item.type == 'journal' %}
                    <article class="entry-card" id="entry-{{ entry.slug }}" data-type="journal" data-lat="{{ entry.header.lat }}" data-lng="{{ entry.header.lng }}">
                        <a class="entry-card-inner" href="{{ entry.url }}">
                            {% if hero %}
                            <div class="entry-card-photo">
                                <img src="{{ hero.cropResize(720, 405).url }}" alt="{{ entry.title }}" loading="lazy">
                                <div class="entry-card-photo-overlay">
                                    <time class="entry-date-overlay" datetime="{{ entry.date|date('Y-m-d') }}">
                                        {{ entry.date|date('d M Y')|upper }}
                                    </time>
                                    {% if entry.header.location_city or entry.header.location_country %}
                                    <span class="entry-location-overlay">
                                        📍
                                        {% if entry.header.location_city %}{{ entry.header.location_city|slice(0,20) }}{% endif %}
                                        {% if entry.header.location_city and entry.header.location_country %}, {% endif %}
                                        {% if entry.header.location_country %}{{ entry.header.location_country }}{% endif %}
                                    </span>
                                    {% endif %}
                                </div>
                            </div>
                            {% else %}
                            <div class="entry-card-textmeta">
                                <time class="entry-date-plain" datetime="{{ entry.date|date('Y-m-d') }}">
                                    {{ entry.date|date('d M Y')|upper }}
                                </time>
                                {% if entry.header.location_city or entry.header.location_country %}
                                <span class="entry-location-plain">
                                    {%- 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 %}
                            </div>
                            {% endif %}
                            <div class="entry-card-body">
                                <h2 class="entry-title">{{ entry.title }}</h2>
                                <p class="entry-excerpt">{{ entry.summary|striptags|slice(0, 250)|trim }}</p>
                                <span class="entry-read-more">Read entry →</span>
                            </div>
                        </a>
                    </article>
                    {% else %}
                    <article class="entry-card entry-card--story" id="entry-{{ entry.slug }}" data-type="story">
                        <a class="entry-card-inner" 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>
                    </article>
                    {% 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/leaflet@1.9.4/dist/leaflet.min.css">
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet-gpx@2.1.2/gpx.min.js"></script>
<script>
var TRIP_ENTRIES = {{ map_entries|json_encode|raw }};
var GPX_URLS = {{ gpx_urls|json_encode|raw }};

var map = L.map('trip-map', { minZoom: 2, maxZoom: 18, zoomControl: true });
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
    maxZoom: 20,
    attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>'
}).addTo(map);

GPX_URLS.forEach(function(url) {
    new L.GPX(url, {
        async: true,
        polyline_options: { color: '#1F6B5A', weight: 2, opacity: 0.6 },
        marker_options: { startIconUrl: null, endIconUrl: null, shadowUrl: null }
    }).addTo(map);
});

if (TRIP_ENTRIES.length === 0) {
    map.setView([20, 0], 2);
} else {
    var latLngs = TRIP_ENTRIES.map(function(e) { return [parseFloat(e.lat), parseFloat(e.lng)]; });
    L.polyline(latLngs, { color: '#2A8C73', weight: 3, opacity: 0.7 }).addTo(map);

    TRIP_ENTRIES.forEach(function(entry, i) {
        var isLatest = (i === TRIP_ENTRIES.length - 1);
        var size = isLatest ? 16 : 10;
        var color = isLatest ? '#155244' : '#1F6B5A';
        var icon = L.divIcon({
            className: '',
            html: '<div style="width:' + size + 'px;height:' + size + 'px;background:' + color + ';border:2px solid #fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,0.35);cursor:pointer;"></div>',
            iconSize: [size, size],
            iconAnchor: [size/2, size/2]
        });
        L.marker([parseFloat(entry.lat), parseFloat(entry.lng)], { icon: icon })
            .addTo(map)
            .on('click', function() {
                var card = document.getElementById('entry-' + entry.slug);
                if (card) { card.scrollIntoView({ behavior: 'smooth', block: 'center' }); }
            });
    });

    map.fitBounds(L.latLngBounds(latLngs), { padding: [20, 20] });
}
setTimeout(function() { map.invalidateSize(); }, 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'); });
            btn.classList.add('is-active');

            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 }};

(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);
        });
    }
})();
</script>
{% endblock %}