agenda/templates/trip/stats.html
Edward Betts 905c9c330d Redesign trip stats page with collapsible sections
Use Bootstrap cards and collapsible sections to make the long
lists of airlines, airports, and stations easier to read. Items
are now displayed as badges and hidden by default.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-03 09:30:58 +00:00

121 lines
4.5 KiB
HTML

{% extends "base.html" %}
{% from "macros.html" import format_distance with context %}
{% set heading = "Trip statistics" %}
{% block title %}{{ heading }} - Edward Betts{% endblock %}
{% macro stat_list(id, label, counter, show_top=5) %}
<div class="mb-2">
<strong>{{ label }}:</strong> {{ counter | count }}
{% if counter | count > 0 %}
<a class="btn btn-sm btn-outline-secondary ms-2" data-bs-toggle="collapse" href="#{{ id }}" role="button" aria-expanded="false">
show/hide
</a>
<div class="collapse mt-2" id="{{ id }}">
<div class="d-flex flex-wrap gap-1">
{% for item, count in counter.most_common() %}
<span class="badge text-bg-secondary">{{ item }} <span class="badge text-bg-light text-dark">{{ count }}</span></span>
{% endfor %}
</div>
</div>
{% endif %}
</div>
{% endmacro %}
{% block content %}
<div class="container-fluid">
<h1>Trip statistics</h1>
<div class="card mb-4">
<div class="card-header"><strong>Overall Summary</strong></div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div>Trips: {{ count }}</div>
<div>Conferences: {{ conferences }}</div>
<div>Total distance: {{ format_distance(total_distance) }}</div>
{% for transport_type, distance in distances_by_transport_type %}
<div class="ms-3">{{ transport_type | title }}: {{ format_distance(distance) }}</div>
{% endfor %}
</div>
<div class="col-md-6">
<div>Flight segments: {{ overall_stats.flight_count }}</div>
<div>Train segments: {{ overall_stats.train_count }}</div>
</div>
</div>
<hr>
{{ stat_list("overall-airlines", "Airlines", overall_stats.airlines) }}
{{ stat_list("overall-airports", "Airports", overall_stats.airports) }}
{{ stat_list("overall-stations", "Stations", overall_stats.stations) }}
</div>
</div>
{% for year, year_stats in yearly_stats | dictsort(reverse=True) %}
{% set countries = year_stats.countries | default([]) | sort(attribute="name") %}
{% set new_countries = year_stats.new_countries | default([]) %}
<div class="card mb-3">
<div class="card-header">
<strong>{{ year }}</strong>
<span class="text-muted ms-2">{{ year_stats.count }} trips</span>
</div>
<div class="card-body">
<div class="row mb-2">
<div class="col-md-6">
<div>Trips: {{ year_stats.count }}</div>
<div>Conferences: {{ year_stats.conferences }}</div>
<div>Distance: {{ format_distance(year_stats.total_distance or 0) }}</div>
{% if year_stats.distances_by_transport_type %}
{% for transport_type, distance in year_stats.distances_by_transport_type.items() %}
<div class="ms-3">{{ transport_type | title }}: {{ format_distance(distance) }}</div>
{% endfor %}
{% endif %}
</div>
<div class="col-md-6">
<div>Flight segments: {{ year_stats.flight_count or 0 }}</div>
<div>Train segments: {{ year_stats.train_count or 0 }}</div>
{% if year_stats.co2_kg %}
<div>CO₂:
{% if year_stats.co2_kg >= 1000 %}
{{ "{:,.2f}".format(year_stats.co2_kg / 1000.0) }} tonnes
{% else %}
{{ "{:,.0f}".format(year_stats.co2_kg) }} kg
{% endif %}
</div>
{% endif %}
</div>
</div>
<div class="mb-2">
<strong>Countries:</strong> {{ countries | count }}
{% if new_countries %}({{ new_countries | count }} new){% endif %}
<div class="d-flex flex-wrap gap-1 mt-1">
{% for c in countries %}
<span class="badge text-bg-light text-dark border">
{{ c.flag }} {{ c.name }}
{% if c in new_countries %}
<span class="badge text-bg-info">new</span>
{% endif %}
</span>
{% endfor %}
</div>
</div>
{% if year_stats.airlines %}
{{ stat_list("airlines-" ~ year, "Airlines", year_stats.airlines) }}
{% endif %}
{% if year_stats.airports %}
{{ stat_list("airports-" ~ year, "Airports", year_stats.airports) }}
{% endif %}
{% if year_stats.stations %}
{{ stat_list("stations-" ~ year, "Stations", year_stats.stations) }}
{% endif %}
</div>
</div>
{% endfor %}
</div>
{% endblock %}