Add return and inbound journey support
This commit is contained in:
parent
6ba71447ef
commit
9691632f65
12 changed files with 1687 additions and 486 deletions
|
|
@ -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 → St 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 %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue