Split trip list into future and past pages

Redo page layout and trip display. Map is now shown on the right.

agenda/types.py

@@ -1,5 +1,6 @@
 """Types."""
 
+import collections
 import datetime
 import typing
 from collections import Counter
@@ -22,6 +23,26 @@ def as_date(d: DateOrDateTime) -> datetime.date:
     return d
 
 
+def as_datetime(d: DateOrDateTime) -> datetime.datetime:
+    """Date/time of event."""
+    t0 = datetime.datetime.min.time()
+    return (
+        d
+        if isinstance(d, datetime.datetime)
+        else datetime.datetime.combine(d, t0).replace(tzinfo=datetime.timezone.utc)
+    )
+
+
+@dataclass
+class TripElement:
+    """Trip element."""
+
+    when: DateOrDateTime
+    title: str
+    element_type: str
+    detail: StrDict
+
+
 @dataclass
 class Trip:
     """Trip."""
@@ -157,6 +178,88 @@ class Trip:
 
         return list(transport_distances.items())
 
+    def elements(self) -> list[TripElement]:
+        """Trip elements ordered by time."""
+        elements: list[TripElement] = []
+
+        for item in self.accommodation:
+            title = "Airbnb" if item.get("operator") == "airbnb" else item["name"]
+            start = TripElement(
+                when=item["from"],
+                title=title,
+                detail=item,
+                element_type="check-in",
+            )
+
+            elements.append(start)
+
+            end = TripElement(
+                when=item["to"],
+                title=title,
+                detail=item,
+                element_type="check-out",
+            )
+
+            elements.append(end)
+
+        for item in self.travel:
+            if item["type"] == "flight":
+                flight_from = item["from_airport"]
+                flight_to = item["to_airport"]
+                name = (
+                    "✈️ "
+                    + f"{flight_from['name']} ({flight_from['iata']}) -> "
+                    + f"{flight_to['name']} ({flight_to['iata']})"
+                )
+
+                elements.append(
+                    TripElement(
+                        when=item["depart"],
+                        title=name,
+                        detail=item,
+                        element_type="flight",
+                    )
+                )
+            if item["type"] == "train":
+                name = f"{item['from']} -> {item['to']}"
+                elements.append(
+                    TripElement(
+                        when=item["depart"],
+                        title=name,
+                        detail=item,
+                        element_type="train",
+                    )
+                )
+            if item["type"] == "ferry":
+                name = f"{item['from']} -> {item['to']}"
+                elements.append(
+                    TripElement(
+                        when=item["depart"],
+                        title=name,
+                        detail=item,
+                        element_type="ferry",
+                    )
+                )
+
+        return sorted(elements, key=lambda e: as_datetime(e.when))
+
+    def elements_grouped_by_day(self) -> list[tuple[datetime.date, list[TripElement]]]:
+        """Group trip elements by day."""
+        # Create a dictionary to hold lists of TripElements grouped by their date
+        grouped_elements: collections.defaultdict[datetime.date, list[TripElement]] = (
+            collections.defaultdict(list)
+        )
+
+        for element in self.elements():
+            # Extract the date part of the 'when' attribute
+            day = as_date(element.when)
+            grouped_elements[day].append(element)
+
+        # Convert the dictionary to a sorted list of tuples
+        grouped_elements_list = sorted(grouped_elements.items())
+
+        return grouped_elements_list
+
 
 # Example usage:
 # You would call the function with your travel list here to get the results.

templates/navbar.html

@@ -2,7 +2,8 @@
 
 {% set pages = [
   {"endpoint": "index", "label": "Home" },
-  {"endpoint": "trip_list", "label": "Trips" },
+  {"endpoint": "trip_future_list", "label": "Future trips" },
+  {"endpoint": "trip_past_list", "label": "Past trips" },
   {"endpoint": "conference_list", "label": "Conference" },
   {"endpoint": "travel_list", "label": "Travel" },
   {"endpoint": "accommodation_list", "label": "Accommodation" },

templates/trip/list.html

@@ -0,0 +1,193 @@
+{% extends "base.html" %}
+
+{% from "macros.html" import trip_link, display_date_no_year, display_date, display_datetime, display_time, conference_row, accommodation_row, flight_row, train_row, ferry_row with context %}
+
+{% set row = { "flight": flight_row, "train": train_row, "ferry": ferry_row } %}
+
+{% block title %}Trips - Edward Betts{% endblock %}
+
+{% block style %}
+
+ <link rel="stylesheet" href="{{ url_for("static", filename="leaflet/leaflet.css") }}">
+
+{% set conference_column_count = 8 %}
+{% set accommodation_column_count = 8 %}
+{% set travel_column_count = 10 %}
+<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 */
+}
+
+        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 section(heading, item_list) %}
+  {% 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 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>
+        <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 %}
+        {% if total_distance %}
+          <div>Total distance:
+          {{ "{:,.0f} km / {:,.0f} miles".format(total_distance, total_distance / 1.60934) }}
+          </div>
+        {% endif %}
+
+        {#
+        {% for day in trip.days() %}
+          <h4>{{ display_date_no_year(day) }}</h4>
+        {% endfor %}
+        #}
+
+    {% 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 %}
+
+
+
+        {% set date_heading = None %}
+        {% for day, elements in trip.elements_grouped_by_day() %}
+            <h4>{{ display_date_no_year(day) }}</h4>
+            {% for e in elements %}
+              <div>
+                <div>
+                  {{ display_time(e.when) }}
+                  &mdash;
+                  {{ e.element_type }}
+                  &mdash;
+                  {{ e.title }}
+                </div>
+              </div>
+            {% endfor %}
+        {% endfor %}
+
+      </div>
+    {% endfor %}
+  {% endif %}
+{% 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 %}

web_view.py

@@ -280,6 +280,54 @@ def trip_list() -> str:
     )
 
 
+@app.route("/trip/past")
+def trip_past_list() -> str:
+    """Page showing a list of past trips."""
+    route_distances = agenda.travel.load_route_distances(app.config["DATA_DIR"])
+    trip_list = get_trip_list(route_distances)
+    today = date.today()
+
+    past = [item for item in trip_list if (item.end or item.start) < today]
+
+    coordinates, routes = agenda.trip.get_coordinates_and_routes(past)
+
+    return flask.render_template(
+        "trip/list.html",
+        heading="Past trips",
+        trips=reversed(past),
+        coordinates=coordinates,
+        routes=routes,
+        today=today,
+        get_country=agenda.get_country,
+        format_list_with_ampersand=format_list_with_ampersand,
+        fx_rate=agenda.fx.get_rates(app.config),
+    )
+
+
+@app.route("/trip/future")
+def trip_future_list() -> str:
+    """Page showing a list of future trips."""
+    route_distances = agenda.travel.load_route_distances(app.config["DATA_DIR"])
+    trip_list = get_trip_list(route_distances)
+    today = date.today()
+
+    future = [item for item in trip_list if item.start > today]
+
+    coordinates, routes = agenda.trip.get_coordinates_and_routes(future)
+
+    return flask.render_template(
+        "trip/list.html",
+        heading="Future trips",
+        trips=future,
+        coordinates=coordinates,
+        routes=routes,
+        today=today,
+        get_country=agenda.get_country,
+        format_list_with_ampersand=format_list_with_ampersand,
+        fx_rate=agenda.fx.get_rates(app.config),
+    )
+
+
 @app.route("/trip/text")
 def trip_list_text() -> str:
     """Page showing a list of trips."""