paddington-eurostar/templates/results.html

{% extends "base.html" %}
{% block title %}{{ departure_station_name }} to {{ destination }} via Eurostar{% endblock %}
{% block og_title %}{{ departure_station_name }} to {{ destination }} via Eurostar{% endblock %}
{% block og_description %}Train options from {{ departure_station_name }} to {{ destination }} on {{ travel_date_display }} via Paddington, St Pancras, and Eurostar.{% endblock %}
{% block twitter_title %}{{ departure_station_name }} to {{ destination }} via Eurostar{% endblock %}
{% block twitter_description %}Train options from {{ departure_station_name }} to {{ destination }} on {{ travel_date_display }} via Paddington, St Pancras, and Eurostar.{% endblock %}
{% block content %}

<p class="back-link">
  <a href="{{ url_for('index') }}">&larr; New search</a>
</p>

<div class="card" style="margin-bottom:1.5rem">
  <h2>
    {{ departure_station_name }} &rarr; {{ destination }}
  </h2>
  <div class="date-nav">
    <a href="{{ url_for('results', station_crs=station_crs, slug=slug, travel_date=prev_date, min_connection=url_min_connection, max_connection=url_max_connection, nr_class=url_nr_class, es_class=url_es_class) }}"
       class="btn-nav">&larr; Prev</a>
    <strong>{{ travel_date_display }}</strong>
    <a href="{{ url_for('results', station_crs=station_crs, slug=slug, travel_date=next_date, min_connection=url_min_connection, max_connection=url_max_connection, nr_class=url_nr_class, es_class=url_es_class) }}"
       class="btn-nav">Next &rarr;</a>
  </div>
  <div class="switcher-section">
    <div class="section-label">Switch destination for {{ travel_date_display }}</div>
    <div class="chip-row">
      {% for destination_slug, destination_name in destinations.items() %}
        {% if destination_slug == slug %}
          <span class="chip-current">{{ destination_name }}</span>
        {% else %}
          <a
            class="chip-link"
            href="{{ url_for('results', station_crs=station_crs, slug=destination_slug, travel_date=travel_date, min_connection=url_min_connection, max_connection=url_max_connection, nr_class=url_nr_class, es_class=url_es_class) }}"
          >{{ destination_name }}</a>
        {% endif %}
      {% endfor %}
    </div>
  </div>
  <div class="filter-row">
    <div>
      <label for="min_conn_select" class="filter-label">Min connection:</label>
      <select id="min_conn_select" onchange="applyConnectionFilter()" class="select-inline">
        {% for mins in valid_min_connections %}
          <option value="{{ mins }}" {% if mins == min_connection %}selected{% endif %}>{{ mins }} min</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label for="max_conn_select" class="filter-label">Max connection:</label>
      <select id="max_conn_select" onchange="applyConnectionFilter()" class="select-inline">
        {% for mins in valid_max_connections %}
          <option value="{{ mins }}" {% if mins == max_connection %}selected{% endif %}>{{ mins }} min</option>
        {% endfor %}
      </select>
    </div>
  </div>
  <div class="filter-row" style="margin-top:0.5rem">
    <div>
      <span class="filter-label">NR ticket:</span>
      <div class="btn-group">
        <button class="btn-group-option {% if nr_class == 'walkon' %}active{% endif %}" onclick="setNrClass('walkon')">Walk-on Std</button>
        <button class="btn-group-option {% if nr_class == 'advance_std' %}active{% endif %}" onclick="setNrClass('advance_std')">Advance Std</button>
        <button class="btn-group-option {% if nr_class == 'advance_1st' %}active{% endif %}" onclick="setNrClass('advance_1st')">Advance 1st</button>
      </div>
      <span id="advance-loading" style="display:none">Loading&#8230;</span>
    </div>
    <div>
      <span class="filter-label">Eurostar:</span>
      <div class="btn-group">
        <button class="btn-group-option {% if es_class == 'standard' %}active{% endif %}" onclick="setEsClass('standard')">Standard</button>
        <button class="btn-group-option {% if es_class == 'plus' %}active{% endif %}" onclick="setEsClass('plus')">Standard Premier</button>
      </div>
    </div>
  </div>
  <script>
    const RESULTS_BASE = '{{ url_for('results', station_crs=station_crs, slug=slug, travel_date=travel_date) }}';
    const DEFAULT_MIN_CONN = {{ default_min_connection }};
    const DEFAULT_MAX_CONN = {{ default_max_connection }};
    const ADVANCE_FARES_STREAM_URL = '{{ advance_fares_stream_url }}';
    let TRIP_FARES = {{ trip_fares_json | safe }};
    let ADVANCE_FARES = {{ advance_fares_json | safe }};
    let currentNrClass = '{{ nr_class }}';
    let currentEsClass = '{{ es_class }}';
    let advanceLoading = false;

    function buildUrl(nrCls, esCls) {
      var min = parseInt(document.getElementById('min_conn_select').value);
      var max = parseInt(document.getElementById('max_conn_select').value);
      var params = [];
      if (min !== DEFAULT_MIN_CONN) params.push('min_connection=' + min);
      if (max !== DEFAULT_MAX_CONN) params.push('max_connection=' + max);
      if (nrCls !== 'walkon') params.push('nr_class=' + nrCls);
      if (esCls !== 'standard') params.push('es_class=' + esCls);
      return params.length ? RESULTS_BASE + '?' + params.join('&') : RESULTS_BASE;
    }

    function applyConnectionFilter() {
      window.location = buildUrl(currentNrClass, currentEsClass);
    }

    function setNrClass(cls) {
      currentNrClass = cls;
      document.querySelectorAll('.btn-group-option[onclick^="setNrClass"]').forEach(function(btn) {
        btn.classList.toggle('active', btn.getAttribute('onclick') === "setNrClass('" + cls + "')");
      });
      history.replaceState(null, '', buildUrl(cls, currentEsClass));
      if ((cls === 'advance_std' || cls === 'advance_1st') && ADVANCE_FARES === null) {
        loadAdvanceFares();
      } else {
        updateDisplay();
      }
    }

    function setEsClass(cls) {
      currentEsClass = cls;
      document.querySelectorAll('.btn-group-option[onclick^="setEsClass"]').forEach(function(btn) {
        btn.classList.toggle('active', btn.getAttribute('onclick') === "setEsClass('" + cls + "')");
      });
      history.replaceState(null, '', buildUrl(currentNrClass, cls));
      updateDisplay();
    }

    function loadAdvanceFares() {
      advanceLoading = true;
      if (ADVANCE_FARES === null) ADVANCE_FARES = {};
      document.getElementById('advance-loading').style.display = 'inline';

      var source = new EventSource(ADVANCE_FARES_STREAM_URL);

      source.onmessage = function(event) {
        var msg = JSON.parse(event.data);
        if (msg.type === 'fares') {
          for (var time in msg.fares) {
            if (!ADVANCE_FARES[time]) ADVANCE_FARES[time] = {advance_std: null, advance_1st: null};
            if (msg.fares[time].advance_std) ADVANCE_FARES[time].advance_std = msg.fares[time].advance_std;
            if (msg.fares[time].advance_1st) ADVANCE_FARES[time].advance_1st = msg.fares[time].advance_1st;
          }
          updateDisplay();
        } else if (msg.type === 'done') {
          advanceLoading = false;
          document.getElementById('advance-loading').style.display = 'none';
          source.close();
          updateDisplay();
        } else if (msg.type === 'error') {
          advanceLoading = false;
          document.getElementById('advance-loading').textContent = 'Failed to load advance fares.';
          source.close();
        }
      };

      source.onerror = function() {
        advanceLoading = false;
        document.getElementById('advance-loading').style.display = 'none';
        source.close();
      };
    }

    function fmtPrice(p) {
      return '\u00a3' + p.toFixed(2);
    }

    function fareHtml(fare) {
      return '<span class="text-sm font-bold">' + fmtPrice(fare.price) + '</span>'
           + (fare.ticket ? ' <span class="text-xs text-muted">' + fare.ticket + '</span>' : '')
           + (fare.seats != null ? ' <span class="text-xs text-muted">' + fare.seats + ' at this price</span>' : '');
    }

    function updateDisplay() {
      // First pass: collect totals for min/max emoji badges
      var totals = {};
      document.querySelectorAll('tr[data-stp]').forEach(function(tr) {
        var stp = tr.getAttribute('data-stp');
        var row = TRIP_FARES[stp];
        if (!row) return;
        var advFares = ADVANCE_FARES && row.depart_bristol ? ADVANCE_FARES[row.depart_bristol] : null;
        var nrFare = currentNrClass === 'walkon' ? row.walkon
                   : advFares ? (currentNrClass === 'advance_std' ? advFares.advance_std : advFares.advance_1st)
                   : null;
        var esFare = currentEsClass === 'standard' ? row.es_standard : row.es_plus;
        if (nrFare && esFare) totals[stp] = nrFare.price + esFare.price + (row.circle_fare || 0);
      });
      var totalValues = Object.values(totals);
      var minTotal = totalValues.length > 1 ? Math.min.apply(null, totalValues) : null;
      var maxTotal = totalValues.length > 1 ? Math.max.apply(null, totalValues) : null;
      var flash = false;

      document.querySelectorAll('tr[data-stp]').forEach(function(tr) {
        var stp = tr.getAttribute('data-stp');
        var row = TRIP_FARES[stp];
        if (!row) return;
        var advFares = ADVANCE_FARES && row.depart_bristol ? ADVANCE_FARES[row.depart_bristol] : null;

        // NR fares — walk-on always shown; advance shown when loaded
        var walkonEl = tr.querySelector('.nr-walkon');
        var advStdEl = tr.querySelector('.nr-advance-std');
        var adv1stEl = tr.querySelector('.nr-advance-1st');

        if (walkonEl) {
          walkonEl.innerHTML = row.walkon ? fareHtml(row.walkon) : '<span class="text-sm text-muted">\u2013</span>';
          walkonEl.classList.toggle('fare-inactive', currentNrClass !== 'walkon');
        }
        if (advStdEl) {
          var aStd = advFares && advFares.advance_std;
          advStdEl.innerHTML = aStd ? fareHtml(aStd) : (advanceLoading ? '<span class="text-sm text-muted">\u2026</span>' : '');
          advStdEl.classList.toggle('fare-inactive', currentNrClass !== 'advance_std');
        }
        if (adv1stEl) {
          var a1st = advFares && advFares.advance_1st;
          adv1stEl.innerHTML = a1st ? fareHtml(a1st) : (advanceLoading ? '<span class="text-sm text-muted">\u2026</span>' : '');
          adv1stEl.classList.toggle('fare-inactive', currentNrClass !== 'advance_1st');
        }

        // ES fares — always show both
        var esStdEl = tr.querySelector('.es-standard');
        var esPlusEl = tr.querySelector('.es-plus');
        if (esStdEl) {
          esStdEl.innerHTML = row.es_standard ? fareHtml(row.es_standard) : '<span class="text-sm text-muted">\u2013</span>';
          esStdEl.classList.toggle('fare-inactive', currentEsClass !== 'standard');
        }
        if (esPlusEl) {
          esPlusEl.innerHTML = row.es_plus ? fareHtml(row.es_plus) : '<span class="text-sm text-muted">\u2013</span>';
          esPlusEl.classList.toggle('fare-inactive', currentEsClass !== 'plus');
        }

        // Total
        var totalSpan = tr.querySelector('.total-price');
        if (totalSpan) {
          if (stp in totals) {
            var total = totals[stp];
            var html = '<span class="text-sm text-green" style="font-weight:700">' + fmtPrice(total);
            if (minTotal !== null && maxTotal !== null) {
              if (total <= minTotal + 10) html += ' <span title="Cheapest journey">\uD83E\uDE99</span>';
              else if (total >= maxTotal - 10) html += ' <span title="Most expensive journey">\uD83D\uDCB8</span>';
            }
            html += '</span>';
            totalSpan.innerHTML = html;
            flash = true;
          } else {
            totalSpan.innerHTML = '';
          }
        }
      });
      if (flash) flashTotals();
    }

    function flashTotals() {
      document.querySelectorAll('.total-price').forEach(function(el) {
        el.classList.remove('price-flash');
        void el.offsetWidth; // force reflow to restart animation
        el.classList.add('price-flash');
      });
    }

    document.addEventListener('DOMContentLoaded', function() {
      updateDisplay();
      if ((currentNrClass === 'advance_std' || currentNrClass === 'advance_1st') && ADVANCE_FARES === null) {
        loadAdvanceFares();
      }
    });
  </script>
  <p class="card-meta">
    {{ gwr_count }} GWR service{{ 's' if gwr_count != 1 }}
    &nbsp;&middot;&nbsp;
    {{ eurostar_count }} Eurostar service{{ 's' if eurostar_count != 1 }}
    {% if from_cache %}
      &nbsp;&middot;&nbsp; <span class="text-muted text-sm">(cached)</span>
    {% endif %}
  </p>
  {% if error %}
    <div class="alert alert-error">
      <strong>Warning:</strong> {{ error }}
    </div>
  {% endif %}
  {% if no_prices_note %}
    <div class="alert alert-warning">
      {{ no_prices_note }}
    </div>
  {% endif %}
</div>

{% if trips or unreachable_morning_services %}
<div class="card">
  <table class="results-table">
    <thead>
      <tr>
        <th>National Rail<br><span class="text-xs font-normal text-muted">{{ departure_station_name }} &rarr; Paddington</span></th>
        <th class="col-transfer">Transfer<br><span class="text-xs font-normal text-muted">Paddington &rarr; St Pancras</span></th>
        <th>Eurostar<br><span class="text-xs font-normal text-muted">St Pancras &rarr; {{ destination }}</span></th>
        <th class="nowrap">Total</th>
      </tr>
    </thead>
    <tbody>
      {% if trips %}
      {% set best_mins = trips | map(attribute='total_minutes') | min %}
      {% set worst_mins = trips | map(attribute='total_minutes') | max %}
      {% endif %}
      {% for row in result_rows %}
      {% if row.row_type == 'trip' and row.total_minutes <= best_mins + 5 and trips | length > 1 %}
        {% set row_class = 'row-fast' %}
      {% elif row.row_type == 'trip' and row.total_minutes >= worst_mins - 5 and trips | length > 1 %}
        {% set row_class = 'row-slow' %}
      {% elif row.row_type == 'unreachable' %}
        {% set row_class = 'row-unreachable' %}
      {% elif loop.index is odd %}
        {% set row_class = 'row-alt' %}
      {% else %}
        {% set row_class = '' %}
      {% endif %}
      <tr class="{{ row_class }}" data-stp="{{ row.depart_st_pancras }}">
        {% if row.row_type == 'trip' %}
        <td>
          <span class="font-bold nowrap">{{ row.depart_bristol }} &rarr; {{ row.arrive_paddington }}</span>
          <span class="text-sm text-muted nowrap">({{ row.gwr_duration }})</span>
          {% if row.headcode or row.arrive_platform %}
            <br><span class="text-xs text-muted">
              {%- if row.headcode %}{{ row.headcode }}{% endif %}
              {%- if row.headcode and row.arrive_platform %} &middot; {% endif %}
              {%- if row.arrive_platform %}Plat {{ row.arrive_platform }}{% endif %}
            </span>
          {% endif %}
          <span class="fare-line nr-walkon"></span>
          <span class="fare-line nr-advance-std"></span>
          <span class="fare-line nr-advance-1st"></span>
        </td>
        <td class="col-transfer" style="color:#4a5568">
          <span class="nowrap">{{ row.connection_duration }}{% if row.connection_minutes < 80 %} <span title="Tight connection">⚠️</span>{% endif %}</span>
          {% if row.circle_services %}
            {% set c = row.circle_services[0] %}
            <br><span class="text-xs text-muted nowrap">Circle {{ c.depart }} → KX {{ c.arrive_kx }} · £{{ "%.2f"|format(c.fare) }}</span>
            {% if row.circle_services | length > 1 %}
              {% set c2 = row.circle_services[1] %}
              <br><span class="text-xs text-muted nowrap" style="opacity:0.7">next {{ c2.depart }} → KX {{ c2.arrive_kx }} · £{{ "%.2f"|format(c2.fare) }}</span>
            {% endif %}
          {% endif %}
        </td>
        <td>
          <span class="font-bold nowrap">{{ row.depart_st_pancras }} &rarr; {{ row.arrive_destination }} <span class="font-normal text-muted" style="font-size:0.85em">(CET)</span></span>
          {% if row.eurostar_duration or row.train_number %}
            <br><span class="text-xs text-muted">
              {%- if row.eurostar_duration %}<span class="nowrap">({{ row.eurostar_duration }})</span>{% endif %}
              {%- if row.eurostar_duration and row.train_number %} &middot; {% endif %}
              {%- if row.train_number %}{% for part in row.train_number.split(' + ') %}<span class="nowrap">{{ part }}</span>{% if not loop.last %} + {% endif %}{% endfor %}{% endif %}
            </span>
          {% endif %}
          <span class="fare-line es-standard"></span>
          <span class="fare-line es-plus"></span>
        </td>
        <td class="font-bold nowrap">
          {% if row.total_minutes <= best_mins + 5 and trips | length > 1 %}
            <span class="text-green" title="Fastest journey">{{ row.total_duration }} ⚡</span>
          {% elif row.total_minutes >= worst_mins - 5 and trips | length > 1 %}
            <span class="text-red" title="Slowest journey">{{ row.total_duration }} 🐢</span>
          {% else %}
            <span class="text-blue">{{ row.total_duration }}</span>
          {% endif %}
          <br><span class="total-price"></span>
        </td>
        {% else %}
        <td>
          <span class="text-dimmed text-sm" title="Too early to reach from {{ departure_station_name }}">Too early</span>
        </td>
        <td class="col-transfer text-dimmed">&mdash;</td>
        <td>
          <span class="font-bold nowrap text-dimmed">{{ row.depart_st_pancras }} &rarr; {{ row.arrive_destination }} <span class="font-normal" style="font-size:0.85em">(CET)</span></span>
          {% if row.eurostar_duration or row.train_number %}
            <br><span class="text-xs text-dimmed">
              {%- if row.eurostar_duration %}<span class="nowrap">({{ row.eurostar_duration }})</span>{% endif %}
              {%- if row.eurostar_duration and row.train_number %} &middot; {% endif %}
              {%- if row.train_number %}{% for part in row.train_number.split(' + ') %}<span class="nowrap">{{ part }}</span>{% if not loop.last %} + {% endif %}{% endfor %}{% endif %}
            </span>
          {% endif %}
          <span class="fare-line es-standard"></span>
          <span class="fare-line es-plus"></span>
        </td>
        <td class="text-dimmed">&mdash;</td>
        {% endif %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<p class="footnote">
  Paddington &rarr; St&nbsp;Pancras connection: {{ min_connection }}&ndash;{{ max_connection }}&nbsp;min.
  GWR walk-on and advance prices from
  <a href="https://www.gwr.com/" target="_blank" rel="noopener">gwr.com</a>.
  Eurostar Standard and Standard Premier prices are for 1 adult in GBP; always check
  <a href="{{ eurostar_url }}" target="_blank" rel="noopener">eurostar.com</a> to book.
  &nbsp;&middot;&nbsp;
  <a href="{{ rtt_station_url }}" target="_blank" rel="noopener">{{ departure_station_name }} departures on RTT</a>
  &nbsp;&middot;&nbsp;
  <a href="{{ rtt_url }}" target="_blank" rel="noopener">Paddington arrivals on RTT</a>
</p>

{% else %}
<div class="card empty-state">
  <p>No valid journeys found.</p>
  <p>
    {% if gwr_count == 0 and eurostar_count == 0 %}
      Could not retrieve train data. Check your network connection or try again.
    {% elif gwr_count == 0 %}
      No GWR trains found for this date.
    {% elif eurostar_count == 0 %}
      No Eurostar services found for {{ destination }} on this date.
    {% else %}
      No GWR&nbsp;+&nbsp;Eurostar combination has at least a {{ min_connection }}-minute connection at Paddington/St&nbsp;Pancras.
    {% endif %}
  </p>
</div>
{% endif %}

{% endblock %}