Add form with autocompletion for origin, destination and date

2023-02-12 23:09:20 +01:00
parent eeb45ebd02
commit b170557b24
3 changed files with 104 additions and 2 deletions
--- a/templates/index.html
+++ b/templates/index.html
@ -0,0 +1,79 @@
+<!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="origin" aria-describedby="dayHelp"
+                   min="{{ today }}" max="{{ today }}" 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>
+</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')
+        }
+    })
+
+    document.getElementById('form').addEventListener('submit', () => {
+        console.log("Hello world!")
+    })
+</script>
+</html>