tgvmax/templates/index.html

147 lines
6.6 KiB
HTML
Raw Permalink Normal View History

<!doctype html>
<html lang="fr">
<head>
<title>Calculateur TGVMax</title>
2023-02-13 12:19:14 +00:00
<link href="/static/bootstrap5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<main class="container">
<form id="form" action="#">
<datalist id="iataCodes">
<option value="Chargement…">
</datalist>
<div class="mb-3">
<label for="origin" class="form-label">Origine :</label>
<input type="text" class="form-control" list="iataCodes" id="origin"
placeholder="Origine…" aria-describedby="originHelp">
<input type="hidden" class="form-control" id="originIata">
<div id="originHelp" class="form-text">Le point de départ de votre trajet.</div>
</div>
<div class="mb-3">
<label for="destination" class="form-label">Destination :</label>
<input type="text" class="form-control" list="iataCodes" id="destination"
placeholder="Destination…" aria-describedby="destinationHelp">
<input type="hidden" class="form-control" id="destinationIata">
<div id="destinationHelp" class="form-text">Le point d'arrivée de votre trajet.</div>
</div>
<div class="mb-3">
<label for="day" class="form-label">Jour de départ :</label>
2023-02-12 22:30:10 +00:00
<input type="date" class="form-control" id="day" aria-describedby="dayHelp"
min="{{ today }}" max="{{ max_day }}" value="{{ today }}">
<div id="dayHelp" class="form-text">Le jour de votre départ.</div>
</div>
<div class="mb-3">
<input type="submit" class="form-control btn btn-primary" value="Rechercher…">
</div>
</form>
<div id="result"></div>
</main>
</body>
2023-02-12 22:30:10 +00:00
2023-02-13 12:19:14 +00:00
<script src="/static/bootstrap5/js/bootstrap.bundle.min.js"></script>
<script>
fetch('/api/iata-codes/').then(res => res.json()).then(out => {
let datalist = document.getElementById('iataCodes')
datalist.innerHTML = ''
for (let name in out.name2iata) {
let iata = out.name2iata[name]
let elem = document.createElement('option')
elem.value = name
elem.setAttribute('data-iata', iata)
datalist.appendChild(elem)
}
})
let origin_elem = document.getElementById('origin')
let origin_iata_elem = document.getElementById('originIata')
origin_elem.addEventListener('change', () => {
let selector = document.querySelector('option[value="' + origin_elem.value + '"]')
if (selector !== null) {
origin_iata_elem.value = selector.getAttribute('data-iata')
}
})
let destination_elem = document.getElementById('destination')
let destination_iata_elem = document.getElementById('destinationIata')
destination_elem.addEventListener('change', () => {
let selector = document.querySelector('option[value="' + destination_elem.value + '"]')
if (selector !== null) {
destination_iata_elem.value = selector.getAttribute('data-iata')
}
})
2023-02-12 22:30:10 +00:00
let day_elem = document.getElementById('day')
let result_elem = document.getElementById('result')
document.getElementById('form').addEventListener('submit', () => {
2023-02-19 16:43:36 +00:00
result_elem.innerHTML = '<div class="spinner-border" role="status"><span class="visually-hidden">Chargement…</span></div>'
fetch('/api/routes/' + day_elem.value + '/' + origin_elem.value + '/' + (destination_elem.value || 'undefined') + '/')
2023-02-12 22:30:10 +00:00
.then(resp => resp.json())
.then(routes => {
result_elem.innerHTML = ''
2023-02-13 12:02:34 +00:00
let cities_number = Object.keys(routes).length
let accordion = document.createElement('div')
accordion.classList.add('accordion')
accordion.setAttribute('id', 'result-accordion')
result_elem.appendChild(accordion)
2023-02-12 22:30:10 +00:00
for (let city in routes) {
let city_routes = routes[city]
2023-02-13 12:02:34 +00:00
let city_id = city.replaceAll(' ', '_')
let city_elem = document.createElement('div')
city_elem.classList.add('accordion-item')
accordion.appendChild(city_elem)
let city_header = document.createElement('h2')
city_header.classList.add('accordion-header')
city_header.setAttribute('id', 'collapse-header-' + city_id)
city_elem.appendChild(city_header)
let city_name_button = document.createElement('button')
city_name_button.classList.add('accordion-button')
if (cities_number > 1)
city_name_button.classList.add('collapsed')
city_name_button.setAttribute('type', 'button')
city_name_button.setAttribute('data-bs-toggle', 'collapse')
city_name_button.setAttribute('data-bs-target', '#collapse-' + city_id)
city_name_button.setAttribute('aria-expanded', cities_number > 1 ? 'false' : 'true')
city_name_button.setAttribute('aria-controls', 'collapse-' + city_id)
city_name_button.textContent = city
city_header.appendChild(city_name_button)
let collapse = document.createElement('div')
collapse.setAttribute('id', 'collapse-' + city_id)
collapse.classList.add('accordion-collapse')
if (cities_number > 1)
collapse.classList.add('collapse')
collapse.setAttribute('aria-labelled-by', 'collapse-header-' + city_id)
collapse.setAttribute('data-bs-parent', '#result-accordion')
city_elem.appendChild(collapse)
let collapse_body = document.createElement('div')
collapse_body.classList.add('accordion-body')
collapse.appendChild(collapse_body)
let routes_elem = document.createElement('ul')
2023-02-13 12:02:34 +00:00
collapse_body.appendChild(routes_elem)
for (let route of city_routes) {
let route_elem = document.createElement('li')
routes_elem.appendChild(route_elem)
let text = route[0].origin
for (let train of route) {
text += " (" + train.departure + ") --> (" + train.arrival + ") " + train.destination + " "
}
route_elem.textContent = text
2023-02-12 22:30:10 +00:00
}
}
})
})
</script>
</html>