{% extends "base.html" %} {% from "macros.html" import trip_link, 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 %} <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/> {% set conference_column_count = 7 %} {% set accommodation_column_count = 7 %} {% set travel_column_count = 8 %} <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: 80vh; } </style> {% endblock %} {% macro section(heading, item_list, badge) %} {% if item_list %} {% set items = item_list | list %} <div class="heading"><h2>{{ heading }}</h2></div> <p>{{ items | count }} trips</p> {% for trip in items %} {% set end = trip.end %} <div class="border border-2 rounded mb-2 p-2"> <h3> {{ trip_link(trip) }} <small class="text-muted">({{ display_date(trip.start) }})</small></h3> <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> </div> {% endfor %} {% endif %} {% endmacro %} {% block content %} <div class="p-2"> <h1>Trips</h1> <div class="row"> <div class="col-1"> </div> <div class="col-11"> <div id="future-map" class="map"></div> </div> {{ section("Current", current, "attending") }} {{ section("Future", future, "going") }} <div class="col-1"> </div> <div class="col-11"> <div id="past-map" class="map"></div> </div> {{ section("Past", past|reverse, "went") }} </div> {% endblock %} {% block scripts %} <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script> <script src="https://unpkg.com/leaflet.geodesic@2.7.1/dist/leaflet.geodesic.umd.min.js"></script> <script src="{{ url_for("static", filename="js/map.js") }}"></script> <script> var future_coordinates = {{ future_coordinates | tojson }}; var future_routes = {{ future_routes | tojson }}; build_map("future-map", future_coordinates, future_routes); var past_coordinates = {{ past_coordinates | tojson }}; var past_routes = {{ past_routes | tojson }}; build_map("past-map", past_coordinates, past_routes); </script> {% endblock %}