Add return and inbound journey support

This commit is contained in:
Edward Betts 2026-05-21 08:46:35 +01:00
parent 6ba71447ef
commit 9691632f65
12 changed files with 1687 additions and 486 deletions

View file

@ -2,7 +2,7 @@
{% block content %}
<div class="card">
<h2>Plan your journey</h2>
<form method="get" action="{{ url_for('search') }}">
<form method="get" action="{{ url_for('search') }}" id="search-form">
<div class="form-group-lg">
<label for="station_crs" class="field-label">Departure point</label>
<select id="station_crs" name="station_crs" class="form-control">
@ -12,6 +12,33 @@
</select>
</div>
<div class="form-group">
<span class="field-label">Journey type</span>
<div class="destination-grid" role="radiogroup" aria-label="Journey type">
<div class="destination-option">
<input type='radio' id="journey-outbound" name="journey_type" value="outbound" checked>
<label for="journey-outbound">
<strong>Out</strong>
<span>UK to Europe</span>
</label>
</div>
<div class="destination-option">
<input type='radio' id="journey-inbound" name="journey_type" value="inbound">
<label for="journey-inbound">
<strong>Back</strong>
<span>Europe to UK</span>
</label>
</div>
<div class="destination-option">
<input type='radio' id="journey-return" name="journey_type" value="return">
<label for="journey-return">
<strong>Return</strong>
<span>Out and back</span>
</label>
</div>
</div>
</div>
<div class="form-group">
<span class="field-label">Eurostar destination</span>
<div class="destination-grid" role="radiogroup" aria-label="Eurostar destination">
@ -36,13 +63,22 @@
<div class="form-group-lg">
<label for="travel_date" class="field-label">
Travel date
Outbound / single date
</label>
<input type="date" id="travel_date" name="travel_date" required
min="{{ today }}" value="{{ today }}"
class="form-control">
</div>
<div class="form-group-lg">
<label for="return_date" class="field-label">
Return date
</label>
<input type="date" id="return_date" name="return_date"
min="{{ today }}" value="{{ default_return_date }}"
class="form-control">
</div>
<div class="form-group">
<label for="min_connection" class="field-label">
Minimum connection time (Paddington &rarr; St&nbsp;Pancras)
@ -69,5 +105,37 @@
Search journeys
</button>
</form>
<script>
(function() {
var form = document.getElementById('search-form');
var returnDate = document.getElementById('return_date');
var returnRadio = document.getElementById('journey-return');
var journeyRadios = document.querySelectorAll('input[name="journey_type"]');
var returnDateName = returnDate.name;
function currentJourneyType() {
var checked = document.querySelector('input[name="journey_type"]:checked');
return checked ? checked.value : 'outbound';
}
function syncReturnDate() {
returnDate.name = currentJourneyType() === 'return' ? returnDateName : '';
}
returnDate.addEventListener('focus', function() {
returnRadio.checked = true;
syncReturnDate();
});
returnDate.addEventListener('change', function() {
returnRadio.checked = true;
syncReturnDate();
});
journeyRadios.forEach(function(radio) {
radio.addEventListener('change', syncReturnDate);
});
form.addEventListener('submit', syncReturnDate);
syncReturnDate();
})();
</script>
</div>
{% endblock %}