Working calculator

templates/index.html

@@ -28,15 +28,17 @@
         </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 }}">
+            <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>
@@ -72,8 +74,32 @@
         }
     })
 
+    let day_elem = document.getElementById('day')
+    let result_elem = document.getElementById('result')
     document.getElementById('form').addEventListener('submit', () => {
-        console.log("Hello world!")
+        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>