{% extends "base.html" %} {% from "macros.html" import trip_link, display_date_no_year, display_date, display_datetime, display_time, format_distance with context %} {% block title %}{{ heading }} - Edward Betts{% endblock %} {% block style %} <link rel="stylesheet" href="{{ url_for("static", filename="leaflet/leaflet.css") }}"> <style> body, html { height: 100%; margin: 0; } .container-fluid { height: calc(100% - 56px); /* Subtracting the height of the navbar */ } .text-content { overflow-y: scroll; height: 100%; } .map-container { position: sticky; top: 56px; /* Adjust to be below the navbar */ height: calc(100vh - 56px); /* Subtracting the height of the navbar */ } #map { height: 100%; } @media (max-width: 767.98px) { .container-fluid { display: block; height: auto; } .map-container { position: relative; top: 0; height: 50vh; /* Adjust as needed */ } .text-content { height: auto; overflow-y: auto; } } </style> {% endblock %} {% macro flag(trip, flag) %}{% if trip.show_flags %}{{ flag }}{% endif %}{% endmacro %} {% macro section(heading, item_list) %} {% if item_list %} {% set items = item_list | list %} <div class="heading"><h2>{{ heading }}</h2></div> <p><a href="{{ url_for("trip_stats") }}">Trip statistics</a></p> <p>{{ items | count }} trips</p> <div>Total distance: {{ format_distance(total_distance) }}</div> {% for transport_type, distance in distances_by_transport_type %} <div> {{ transport_type | title }} distance: {{format_distance(distance) }} </div> {% endfor %} {% for trip in items %} {% set distances_by_transport_type = trip.distances_by_transport_type() %} {% set total_distance = trip.total_distance() %} {% 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> <ul class="list-unstyled"> {% for c in trip.countries %} <li> {{ c.name }} {{ c.flag }} </li> {% endfor %} </ul> {% if end %} <div>Dates: {{ display_date_no_year(trip.start) }} to {{ display_date_no_year(end) }} {% if g.user.is_authenticated and trip.start <= today %} <a href="https://photos.4angle.com/search?query=%7B%22takenAfter%22%3A%22{{trip.start}}T00%3A00%3A00.000Z%22%2C%22takenBefore%22%3A%22{{end}}T23%3A59%3A59.999Z%22%7D">photos</a> {% endif %} </div> {% else %} <div>Start: {{ display_date_no_year(trip.start) }} (end date missing)</div> {% endif %} {% if total_distance %} <div> Total distance: {{ format_distance(total_distance) }} </div> {% endif %} {% if distances_by_transport_type %} {% for transport_type, distance in distances_by_transport_type %} <div> {{ transport_type | title }} distance: {{format_distance(distance) }} </div> {% endfor %} {% endif %} {{ conference_list(trip) }} {% for day, elements in trip.elements_grouped_by_day() %} <h4>{{ display_date_no_year(day) }} {% if g.user.is_authenticated and day <= today %} <span class="lead"> <a href="https://photos.4angle.com/search?query=%7B%22takenAfter%22%3A%22{{day}}T00%3A00%3A00.000Z%22%2C%22takenBefore%22%3A%22{{day}}T23%3A59%3A59.999Z%22%7D">photos</a> </span> {% endif %} </h4> {% set accommodation_label = {"check-in": "check-in from", "check-out": "check-out by"} %} {% for e in elements %} {% if e.element_type in accommodation_label %} {% set c = get_country(e.detail.country) %} <div> {{ e.get_emoji() }} {{ e.title }} {{ flag(trip, c.flag) }} ({{ accommodation_label[e.element_type] }} {{ display_time(e.start_time) }}) </div> {% else %} <div> {{ e.get_emoji() }} {{ display_time(e.start_time) }} – {{ e.start_loc }} {{ flag(trip, e.start_country.flag) }} → {{ display_time(e.end_time) }} – {{ e.end_loc }} {{ flag(trip, e.end_country.flag) }} {% if e.element_type == "flight" %} {% set full_flight_number = e.detail.airline + e.detail.flight_number %} {% set radarbox_url = "https://www.radarbox.com/data/flights/" + full_flight_number %} <span class="text-nowrap"><strong>airline:</strong> {{ e.detail.airline_name }}</span> <span class="text-nowrap"><strong>flight number:</strong> {{ e.detail.airline }}{{ e.detail.flight_number }}</span> {% if e.detail.duration %} <span class="text-nowrap"><strong>duration:</strong> {{ e.detail.duration }}</span> {% endif %} {# <pre>{{ e.detail | pprint }}</pre> #} {% endif %} {% if e.detail.distance %} <span class="text-nowrap"><strong>distance:</strong> {{ format_distance(e.detail.distance) }}</span> {% endif %} {% if e.element_type == "flight" %} <a href="https://www.flightradar24.com/data/flights/{{ full_flight_number | lower }}">flightradar24</a> | <a href="https://uk.flightaware.com/live/flight/{{ full_flight_number | replace("U2", "EZY") }}">FlightAware</a> | <a href="{{ radarbox_url }}">radarbox</a> {% endif %} </div> {% endif %} {% endfor %} {% endfor %} </div> {% endfor %} {% endif %} {% endmacro %} {% macro conference_list(trip) %} {% for item in trip.conferences %} {% set country = get_country(item.country) if item.country else None %} <div class="card my-1"> <div class="card-body"> <h5 class="card-title"> <a href="{{ item.url }}">{{ item.name }}</a> <small class="text-muted"> {{ display_date_no_year(item.start) }} to {{ display_date_no_year(item.end) }} </small> </h5> <p class="card-text"> Topic: {{ item.topic }} | Venue: {{ item.venue }} | Location: {{ item.location }} {% if country %} {{ country.flag }} {% elif item.online %} 💻 Online {% else %} <span class="text-bg-danger p-2"> country code <strong>{{ item.country }}</strong> not found </span> {% endif %} {% if item.free %} | <span class="badge bg-success text-nowrap">free to attend</span> {% elif item.price and item.currency %} | <span class="badge bg-info text-nowrap">price: {{ item.price }} {{ item.currency }}</span> {% endif %} </p> </div> </div> {% endfor %} {% endmacro %} {% block content %} <div class="container-fluid d-flex flex-column flex-md-row"> <div class="map-container col-12 col-md-6 order-1 order-md-2"> <div id="map" class="map"></div> </div> <div class="text-content col-12 col-md-6 order-2 order-md-1 pe-3"> {{ section(heading, trips) }} </div> </div> {% endblock %} {% block scripts %} <script src="{{ url_for("static", filename="leaflet/leaflet.js") }}"></script> <script src="{{ url_for("static", filename="leaflet-geodesic/leaflet.geodesic.umd.min.js") }}"></script> <script src="{{ url_for("static", filename="js/map.js") }}"></script> <script> var coordinates = {{ coordinates | tojson }}; var routes = {{ routes | tojson }}; build_map("map", coordinates, routes); </script> {% endblock %}