Edward Betts
34d1ee3b30
Enhance trip UI by adding photo links for authenticated users. This provides quick access to relevant trip photos. Closes: #184
231 lines
8 KiB
HTML
231 lines
8 KiB
HTML
{% 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 %}
|