{% extends "base.html" %} {% from "macros.html" import display_date_no_year, display_date, conference_row, accommodation_row, flight_row, train_row with context %} {% set row = { "flight": flight_row, "train": train_row } %} {% block style %} {% if station_coordinates %} <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/> {% endif %} {% set conference_column_count = 6 %} {% set accommodation_column_count = 7 %} {% set travel_column_count = 7 %} <style> .conferences { display: grid; grid-template-columns: repeat({{ conference_column_count }}, auto); /* 7 columns for each piece of information */ gap: 10px; justify-content: start; } .accommodation { display: grid; grid-template-columns: repeat({{ accommodation_column_count }}, auto); gap: 10px; justify-content: start; } .travel { display: grid; grid-template-columns: repeat({{ travel_column_count }}, auto); gap: 10px; justify-content: start; } .grid-item { /* Additional styling for grid items can go here */ } #map { height: 400px; } </style> {% endblock %} {% set end = trip.end %} {% block content %} <div class="p-2"> <h1>{{ trip.title }}<small class="text-muted">({{ display_date(trip.start) }})</small></h1> <div>Countries: {{ trip.countries_str }}</div> {% if end %} <div>Dates: {{ display_date_no_year(trip.start) }} to {{ display_date_no_year(end) }}</div> {% else %} <div>Start: {{ display_date_no_year(trip.start) }} (end date missing)</div> {% endif %} <div class="conferences"> {% for conf in trip.conferences %} {{ conference_row(conf, "going") }} {% endfor %} </div> <div class="accommodation"> {% for conf in trip.accommodation %} {{ accommodation_row(conf, "going") }} {% endfor %} </div> <div class="travel"> {% for item in trip.travel %} {{ row[item.type](item) }} {% endfor %} </div> {% if station_coordinates %} <div id="map"></div> {% endif %} </div> {% endblock %} {% block scripts %} {% if station_coordinates %} <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script> <script> var station_coordinates = {{ station_coordinates | tojson }}; // Initialize the map var map = L.map('map').fitBounds(station_coordinates); // Set up the tile layer L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map); // Add markers to the map station_coordinates.forEach(function(coord) { L.marker(coord).addTo(map); }); </script> {% endif %} {% endblock %}