Display travels per day and display better marks on the map

client/src/App.js

@@ -1,11 +1,19 @@
-import {useState} from "react"
+import {useRef, useState} from "react"
 
 import {Icon} from 'leaflet'
 import {Polyline, MapContainer, Marker, TileLayer} from 'react-leaflet'
 
 import './App.css';
 
-function Map({dep, arr}) {
+
+function distance(apt1, apt2) {
+    const [lat1, lng1] = [Math.PI * apt1.lat / 180,  Math.PI * apt1.lng / 180]
+    const [lat2, lng2] = [Math.PI * apt2.lat / 180,  Math.PI * apt2.lng / 180]
+    const a = Math.sin((lat2 - lat1) / 2) ** 2 + Math.cos(lat1) * Math.cos(lat2) * Math.sin((lng2 - lng1) / 2) ** 2
+    return (6371 * 2 * Math.atan(Math.sqrt(a) / Math.sqrt(1 - a))).toFixed(0)
+}
+
+function Map({mapRef, dep, arr}) {
     const redIcon = new Icon({
         iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png",
         iconSize: [25, 41],
@@ -20,50 +28,84 @@ function Map({dep, arr}) {
         popupAnchor: [1, -34],
         shadowSize: [41, 41]
     })
+
+    let depCoords = [dep.lat, dep.lng]
+    let arrCoords = [arr.lat, arr.lng]
+
     return (
-        <MapContainer center={[46.449, 2.210]} zoom={6} style={{height: "600px"}}>
+        <MapContainer ref={mapRef} center={[(dep.lat + arr.lat) / 2, (dep.lng + arr.lng) / 2]} zoom={6} style={{height: "600px"}}>
             <TileLayer
                 attribution="&copy; Les contributeur⋅rices d'<a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
             />
-            <Marker position={dep} icon={redIcon} />
-            <Marker position={arr} icon={greenIcon} />
-            <Polyline positions={[dep, arr]} />
+            <Marker position={depCoords} icon={redIcon} />
+            <Marker position={arrCoords} icon={greenIcon} />
+            <Polyline positions={[depCoords, arrCoords]} />
         </MapContainer>
     )
 }
 
-function AirportSearch({name, updateFun}) {
+function AirportSearch({name, type, updateFun, dep, arr, updateFlights, mapRef}) {
     const [airports, setAirports] = useState([])
 
     function autocomplete(event) {
         const target = event.target
         const value = target.value
-        fetch(`/api/airports?search=${value}`).then(resp => resp.json()).then(setAirports)
+        fetch(`/api/airports?search=${value}&limit=10`).then(resp => resp.json()).then(airports => {
+            setAirports(airports)
+            if (airports.length === 1)
+                selectAirport(airports[0])
+        })
+    }
+
+    function selectAirport(airport) {
+        updateFun(airport)
+        if (type === 'dep')
+            dep = airport
+        else
+            arr = airport
+
+        if (dep.icao_code && arr.icao_code)
+            fetch(`/api/flights/${dep.icao_code}/${arr.icao_code}`).then(resp => resp.json()).then(updateFlights)
+        mapRef.current.flyToBounds([[dep.lat, dep.lng], [arr.lat, arr.lng]])
     }
 
     return <>
         <datalist id={name + "-list"}>
             {airports.map(airport => <>
-                <option value={airport.icao_code}
+                <option key={airport.icao_code}
+                        value={airport.icao_code}
                         data-lat={airport.lat}
-                        data-lng={airport.lng}
-                        onClick={updateFun([airport.lat, airport.lng])}>{airport.name}</option>
+                        data-lng={airport.lng}>{airport.name}</option>
             </>)}
         </datalist>
         <input type="hidden" name={name + "-icao"}/>
-        <input name={name} list={name + "-list"} onChange={autocomplete}/>
+        <input name={name} list={name + "-list"} onInput={autocomplete}/>
     </>
 }
 
+function FlightsTable({dep, arr, flights}) {
+    return <div id={"flights-table"} style={{width: "100%"}}>
+        <h1>{dep.name} --> {arr.name} ({distance(dep, arr)} km)</h1>
+        <ul>
+            {flights.map(flight => <li>
+                {flight.days.join(', ')}, {flight.dep_time_utc} => {flight.arr_time_utc} ({flight.duration} minutes)
+            </li>)}
+        </ul>
+    </div>
+}
+
 function App() {
-    const [dep, setDep] = useState([0, 0])
-    const [arr, setArr] = useState([0, 0])
+    const [dep, setDep] = useState({lat: 0, lng: 0})
+    const [arr, setArr] = useState({lat: 0, lng: 0})
+    const [flights, setFlights] = useState([])
+    const mapRef = useRef(null)
 
     return <>
-        <Map dep={dep} arr={arr}></Map>
-        <AirportSearch name={"departure"} updateFun={setDep}></AirportSearch>
-        <AirportSearch name={"arrival"} updateFun={setArr}></AirportSearch>
+        <Map mapRef={mapRef} dep={dep} arr={arr} />
+        <AirportSearch name={"departure"} type={"dep"} updateFun={setDep} dep={dep} arr={arr} updateFlights={setFlights} mapRef={mapRef} />
+        <AirportSearch name={"arrival"} type={"arr"} updateFun={setArr} dep={dep} arr={arr} updateFlights={setFlights} mapRef={mapRef} />
+        <FlightsTable dep={dep} arr={arr} flights={flights} />
     </>
 }