82 lines
2.9 KiB
HTML
82 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>calco2la.to API client example</title>
|
|
<style>
|
|
#wrapper {
|
|
max-width: 40em;
|
|
height: 100%;
|
|
margin: 0em auto;
|
|
}
|
|
#airport-results, #flight-results {
|
|
min-height: 5em;
|
|
border: 1px solid grey;
|
|
margin: 1em auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="wrapper">
|
|
<h1>Search for airports</h1>
|
|
<form id="airport-search-form">
|
|
<input type="text" id="iata" name="iata" />
|
|
<button type="submit" name="Los" title="Los">Search ...</button>
|
|
</form>
|
|
<div id="airport-results">
|
|
<ul id="airport-list"></ul>
|
|
</div>
|
|
<h1>Calculate flight</h1>
|
|
<form id="flight-search-form">
|
|
<input type="text" id="departure" name="departure" />
|
|
<input type="text" id="arrival" name="arrival" />
|
|
<input type="date" id="departuredate" name="departuredate" value="2025-09-26" min="2017-01-01" max="2025-12-31" />
|
|
<select id="cabinclass" name="cabinclass">
|
|
<option value="economy">Economy</option>
|
|
<option value="premium_economy">Business Economy</option>
|
|
<option value="business">Business</option>
|
|
<option value="first">First</option>
|
|
</select>
|
|
<button type="submit" name="Los" title="Los">Calculate ...</button>
|
|
</form>
|
|
<div id="flight-results">
|
|
<pre id="flight-output"></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module">
|
|
import { Calco2latoClient } from '/js/calco2lato.js';
|
|
|
|
const api = new Calco2latoClient('/api-proxy.php');
|
|
|
|
const searchform = document.querySelector('#airport-search-form');
|
|
const list = document.querySelector('#airport-list');
|
|
|
|
searchform.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
list.innerHTML = 'Loading…';
|
|
try {
|
|
const iata = new FormData(searchform).get('iata');
|
|
const airports = await api.searchAirports(iata, 10, 1);
|
|
list.innerHTML = airports.map(a => `<li>${a.display}</li>`).join('');
|
|
} catch (err) {
|
|
list.innerHTML = `<li style="color:red">${err.message}</li>`;
|
|
}
|
|
});
|
|
|
|
const flightform = document.querySelector('#flight-search-form');
|
|
const flightresult = document.querySelector('#flight-output');
|
|
|
|
flightform.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
flightresult.innerHTML = 'Loading…';
|
|
try {
|
|
const f = new FormData(flightform);
|
|
const flight = await api.estimateFlight({"flights": [{"departure": f.get('departure'), "arrival": f.get('arrival'), "passengerCount": 1, "travelClass": f.get('cabinclass'), "departureDate": f.get('departuredate')}]});
|
|
flightresult.innerHTML = flight.summary();
|
|
} catch (err) {
|
|
flightresult.innerHTML = `<span style="color:red">${err.message}</span>`;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |