<!doctype html> <html lang="fr"> <head> <title>Calculateur TGVMax</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> </head> <body> <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> <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> </body> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> <script> fetch('/api/iata-codes/').then(res => res.json()).then(out => { let datalist = document.getElementById('iataCodes') datalist.innerHTML = '' for (let iata in out.iata2name) { let name = out.iata2name[iata] 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') } }) let day_elem = document.getElementById('day') let result_elem = document.getElementById('result') document.getElementById('form').addEventListener('submit', () => { result_elem.innerHTML = 'Chargement…' fetch('/api/routes/' + day_elem.value + '/' + origin_iata_elem.value + '/' + destination_iata_elem.value + '/') .then(resp => resp.json()) .then(routes => { console.log(routes) result_elem.innerHTML = '' let routes_elem = document.createElement('ul') result_elem.appendChild(routes_elem) for (let route in routes) { route = routes[route] console.log(route) let route_elem = document.createElement('li') routes_elem.appendChild(route_elem) let text = route[0].origin for (let train in route) { train = route[train] console.log(train) text += " (" + train.departure + ") --> (" + train.arrival + ") " + train.destination + ", " } route_elem.textContent = text } }) }) </script> </html>