jamesp/ppr-ng
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Pilot self-bookout

Browse Source
This commit is contained in:
James Pattinson
2026-02-20 11:52:43 -05:00
parent 24971ac5fc
commit 7f4e4a8459
14 changed files with 1354 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
web/admin.html
View File

@@ -562,7 +562,7 @@
</div>
</form>
<!-- Circuits Section (for CIRCUITS flights only) -->
<!-- Touch & Go Records Section (for all local flight types) -->
<div id="circuits-section" style="display: none; margin-top: 2rem; border-top: 1px solid #ddd; padding-top: 1rem;">
<h3>✈️ Touch & Go Records</h3>
<div id="circuits-list" style="margin-top: 1rem;">
@@ -2019,7 +2019,7 @@
if (isLocal) {
row.innerHTML = `
<td style="padding: 0.3rem 0.4rem !important; font-size: 0.85rem !important;">${flight.registration || '-'}</td>
<td style="padding: 0.3rem 0.4rem !important; font-size: 0.85rem !important; text-align: center; width: 30px;"></td>
<td style="padding: 0.3rem 0.4rem !important; font-size: 0.85rem !important; text-align: center; width: 30px;">${flight.submitted_via === 'PUBLIC' ? '<span style="color: #b8860b; font-weight: bold;" title="Submitted by Pilot Online">O</span>' : ''}</td>
<td style="padding: 0.3rem 0.4rem !important; font-size: 0.85rem !important;">${flight.callsign || '-'}</td>
<td style="padding: 0.3rem 0.4rem !important; font-size: 0.85rem !important;">-</td>
<td style="padding: 0.3rem 0.4rem !important; font-size: 0.85rem !important;">${formatTimeOnly(flight.departed_dt)}</td>
@@ -2027,7 +2027,7 @@
} else if (isDeparture) {
row.innerHTML = `
<td style="padding: 0.3rem 0.4rem !important; font-size: 0.85rem !important;">${flight.registration || '-'}</td>
<td style="padding: 0.3rem 0.4rem !important; font-size: 0.85rem !important; text-align: center; width: 30px;"></td>
<td style="padding: 0.3rem 0.4rem !important; font-size: 0.85rem !important; text-align: center; width: 30px;">${flight.submitted_via === 'PUBLIC' ? '<span style="color: #b8860b; font-weight: bold;" title="Submitted by Pilot Online">O</span>' : ''}</td>
<td style="padding: 0.3rem 0.4rem !important; font-size: 0.85rem !important;">${flight.callsign || '-'}</td>
<td style="padding: 0.3rem 0.4rem !important; font-size: 0.85rem !important;">${flight.out_to || '-'}</td>
<td style="padding: 0.3rem 0.4rem !important; font-size: 0.85rem !important;">${formatTimeOnly(flight.departed_dt)}</td>
@@ -2336,7 +2336,7 @@
aircraftDisplay = `<strong>${flight.registration}</strong>`;
}
acType = flight.type;
typeIcon = '';
typeIcon = flight.submitted_via === 'PUBLIC' ? '<span style="color: #b8860b; font-weight: bold; font-size: 0.9em;" title="Submitted by Pilot Online">O</span>' : '';
fromDisplay = `<i>${flight.flight_type === 'CIRCUITS' ? 'Circuits' : flight.flight_type === 'LOCAL' ? 'Local Flight' : 'Departure'}</i>`;
// Calculate ETA: use departed_dt (actual departure) if available, otherwise etd (planned departure)
@@ -2351,22 +2351,17 @@
pob = flight.pob || '-';
fuel = '-';
// For circuits, add a circuit button
// Allow touch and go for all local flight types
let circuitButton = '';
if (flight.flight_type === 'CIRCUITS') {
circuitButton = `<button class="btn btn-info btn-icon" onclick="event.stopPropagation(); currentLocalFlightId = ${flight.id}; showCircuitModal()" title="Record Touch & Go">
T&G
</button>`;
}
circuitButton = `<button class="btn btn-info btn-icon" onclick="event.stopPropagation(); currentLocalFlightId = ${flight.id}; showCircuitModal()" title="Record Touch & Go">
T&G
</button>`;
actionButtons = `
${circuitButton}
<button class="btn btn-success btn-icon" onclick="event.stopPropagation(); currentLocalFlightId = ${flight.id}; showTimestampModal('LANDED', ${flight.id}, true)" title="Mark as Landed">
LAND
</button>
<button class="btn btn-danger btn-icon" onclick="event.stopPropagation(); updateLocalFlightStatusFromTable(${flight.id}, 'CANCELLED')" title="Cancel Flight">
CANCEL
</button>
`;
} else if (isBookedIn) {
// Booked-in arrival display
@@ -2376,7 +2371,7 @@
aircraftDisplay = `<strong>${flight.registration}</strong>`;
}
acType = flight.type;
typeIcon = '';
typeIcon = flight.submitted_via === 'PUBLIC' ? '<span style="color: #b8860b; font-weight: bold; font-size: 0.9em;" title="Submitted by Pilot Online">O</span>' : '';
// Lookup airport name for in_from
let fromDisplay_temp = flight.in_from;
@@ -2421,9 +2416,6 @@
<button class="btn btn-warning btn-icon" onclick="event.stopPropagation(); showTimestampModal('LANDED', ${flight.id})" title="Mark as Landed">
LAND
</button>
<button class="btn btn-danger btn-icon" onclick="event.stopPropagation(); updateStatusFromTable(${flight.id}, 'CANCELED')" title="Cancel Arrival">
CANCEL
</button>
`;
}
@@ -2495,7 +2487,7 @@
} else {
aircraftDisplay = `<strong>${flight.registration}</strong>`;
}
typeIcon = '';
typeIcon = flight.submitted_via === 'PUBLIC' ? '<span style="color: #b8860b; font-weight: bold; font-size: 0.9em;" title="Submitted by Pilot Online">O</span>' : '';
toDisplay = `<i>${flight.flight_type === 'CIRCUITS' ? 'Circuits' : flight.flight_type === 'LOCAL' ? 'Local Flight' : 'Departure'}</i>`;
etd = flight.etd ? formatTimeOnly(flight.etd) : (flight.created_dt ? formatTimeOnly(flight.created_dt) : '-');
pob = flight.pob || '-';
@@ -2508,26 +2500,17 @@
<button class="btn btn-primary btn-icon" onclick="event.stopPropagation(); currentLocalFlightId = ${flight.id}; showTimestampModal('DEPARTED', ${flight.id}, true)" title="Mark as Departed">
TAKE OFF
</button>
<button class="btn btn-danger btn-icon" onclick="event.stopPropagation(); updateLocalFlightStatusFromTable(${flight.id}, 'CANCELLED')" title="Cancel Flight">
CANCEL
</button>
`;
} else if (flight.status === 'DEPARTED') {
// For circuits, add a circuit button; for other flights, just show land button
let circuitButton = '';
if (flight.flight_type === 'CIRCUITS') {
circuitButton = `<button class="btn btn-info btn-icon" onclick="event.stopPropagation(); currentLocalFlightId = ${flight.id}; showCircuitModal()" title="Record Touch & Go">
T&G
</button>`;
}
// Allow touch and go for all local flight types
let circuitButton = `<button class="btn btn-info btn-icon" onclick="event.stopPropagation(); currentLocalFlightId = ${flight.id}; showCircuitModal()" title="Record Touch & Go">
T&G
</button>`;
actionButtons = `
${circuitButton}
<button class="btn btn-success btn-icon" onclick="event.stopPropagation(); currentLocalFlightId = ${flight.id}; showTimestampModal('LANDED', ${flight.id}, true)" title="Mark as Landed">
LAND
</button>
<button class="btn btn-danger btn-icon" onclick="event.stopPropagation(); updateLocalFlightStatusFromTable(${flight.id}, 'CANCELLED')" title="Cancel Flight">
CANCEL
</button>
`;
} else {
actionButtons = '<span style="color: #999;">-</span>';
@@ -2539,7 +2522,7 @@
} else {
aircraftDisplay = `<strong>${flight.registration}</strong>`;
}
typeIcon = '';
typeIcon = flight.submitted_via === 'PUBLIC' ? '<span style="color: #b8860b; font-weight: bold; font-size: 0.9em;" title="Submitted by Pilot Online">O</span>' : '';
toDisplay = flight.out_to || '-';
if (flight.out_to && flight.out_to.length === 4 && /^[A-Z]{4}$/.test(flight.out_to)) {
toDisplay = await getAirportDisplay(flight.out_to);
@@ -2555,9 +2538,6 @@
<button class="btn btn-primary btn-icon" onclick="event.stopPropagation(); currentDepartureId = ${flight.id}; showTimestampModal('DEPARTED', ${flight.id}, false, true)" title="Mark as Departed">
TAKE OFF
</button>
<button class="btn btn-danger btn-icon" onclick="event.stopPropagation(); updateDepartureStatusFromTable(${flight.id}, 'CANCELLED')" title="Cancel">
CANCEL
</button>
`;
} else if (flight.status === 'DEPARTED') {
actionButtons = '<span style="color: #999;">Departed</span>';
@@ -2585,9 +2565,6 @@
<button class="btn btn-primary btn-icon" onclick="event.stopPropagation(); showTimestampModal('DEPARTED', ${flight.id})" title="Mark as Departed">
TAKE OFF
</button>
<button class="btn btn-danger btn-icon" onclick="event.stopPropagation(); updateStatusFromTable(${flight.id}, 'CANCELED')" title="Cancel Departure">
CANCEL
</button>
`;
}
@@ -3994,14 +3971,10 @@
document.getElementById('local-flight-edit-title').textContent = `${flight.registration} - ${flight.flight_type}`;
// Load and display circuits if this is a CIRCUITS flight
// Load and display circuits for all local flight types
const circuitsSection = document.getElementById('circuits-section');
if (flight.flight_type === 'CIRCUITS') {
circuitsSection.style.display = 'block';
loadCircuitsDisplay(flight.id);
} else {
circuitsSection.style.display = 'none';
}
circuitsSection.style.display = 'block';
loadCircuitsDisplay(flight.id);
document.getElementById('localFlightEditModal').style.display = 'block';

866
web/book.html Normal file
View File

@@ -0,0 +1,866 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flight Booking - Pilot Portal</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: #f5f5f5;
padding: 10px;
color: #333;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.header {
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
color: white;
padding: 20px;
margin: -20px -20px 20px -20px;
border-radius: 8px 8px 0 0;
text-align: center;
}
.header h1 {
font-size: 24px;
margin-bottom: 5px;
}
.header p {
font-size: 14px;
opacity: 0.9;
}
.tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.tab-btn {
flex: 1;
padding: 12px;
border: 2px solid #ddd;
background: white;
color: #333;
border-radius: 6px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.3s ease;
min-width: 120px;
}
.tab-btn.active {
background: #3498db;
color: white;
border-color: #3498db;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 600;
font-size: 14px;
color: #2c3e50;
}
input, select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
font-family: inherit;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: #3498db;
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
textarea {
resize: vertical;
min-height: 80px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.btn-submit {
width: 100%;
padding: 14px;
background: #27ae60;
color: white;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-submit:hover {
background: #229954;
}
.btn-submit:active {
transform: scale(0.98);
}
.btn-submit:disabled {
background: #bdc3c7;
cursor: not-allowed;
}
.success-message {
display: none;
background: #d4edda;
color: #155724;
padding: 15px;
border-radius: 6px;
margin-bottom: 15px;
border-left: 4px solid #28a745;
}
.error-message {
display: none;
background: #f8d7da;
color: #721c24;
padding: 15px;
border-radius: 6px;
margin-bottom: 15px;
border-left: 4px solid #f5c6cb;
}
.info-box {
background: #e3f2fd;
border-left: 4px solid #2196f3;
padding: 12px;
border-radius: 4px;
font-size: 13px;
margin-bottom: 15px;
color: #1565c0;
}
.required {
color: #e74c3c;
}
.loading {
display: none;
text-align: center;
padding: 20px;
}
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.footer {
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #eee;
font-size: 13px;
color: #666;
}
.aircraft-lookup-results {
margin-top: 5px;
padding: 5px;
background-color: #f8f9fa;
border-radius: 4px;
font-size: 13px;
min-height: 20px;
border: 1px solid #e9ecef;
}
.airport-lookup-results {
margin-top: 5px;
padding: 5px;
background-color: #f8f9fa;
border-radius: 4px;
font-size: 13px;
min-height: 20px;
border: 1px solid #e9ecef;
}
.lookup-match {
padding: 3px;
background-color: #e8f5e8;
border: 1px solid #c3e6c3;
border-radius: 4px;
font-family: 'Courier New', monospace;
font-weight: bold;
}
.lookup-no-match {
color: #6c757d;
font-style: italic;
}
.lookup-searching {
color: #007bff;
}
.aircraft-list {
max-height: 200px;
overflow-y: auto;
border: 1px solid #dee2e6;
border-radius: 4px;
background-color: white;
}
.aircraft-option {
padding: 5px;
border-bottom: 1px solid #f0f0f0;
cursor: pointer;
transition: background-color 0.2s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.aircraft-option:hover {
background-color: #f8f9fa;
}
.aircraft-option:last-child {
border-bottom: none;
}
.aircraft-code {
font-family: 'Courier New', monospace;
font-weight: bold;
color: #495057;
}
.aircraft-details {
color: #6c757d;
font-size: 12px;
}
@media (max-width: 480px) {
.container {
padding: 15px;
}
.header {
margin: -15px -15px 15px -15px;
padding: 15px;
}
.form-row {
grid-template-columns: 1fr;
}
.tabs {
gap: 5px;
}
.tab-btn {
font-size: 12px;
padding: 10px;
min-width: 100px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Swansea - Book Out</h1>
</div>
<div id="successMessage" class="success-message"></div>
<div id="errorMessage" class="error-message"></div>
<div class="info-box">
Booking out really helps our volunteers in the tower, thank you!
</div>
<div class="tabs">
<button class="tab-btn active" onclick="switchTab(this, 'local')">Local</button>
<button class="tab-btn" onclick="switchTab(this, 'circuits')">Circuits</button>
<button class="tab-btn" onclick="switchTab(this, 'departure')">Departure</button>
<button class="tab-btn" onclick="switchTab(this, 'arrival')">Arrival</button>
</div>
<!-- Local Flight Form -->
<div id="local" class="tab-content active">
<form id="localFlightForm" onsubmit="handleSubmit(event, 'local')">
<div class="form-group">
<label for="localReg">Aircraft Registration <span class="required">*</span></label>
<input type="text" id="localReg" name="registration" placeholder="e.g gbamc" required oninput="handleAircraftLookup(this.value, 'local')">
<div id="localReg-lookup-results" class="aircraft-lookup-results"></div>
</div>
<div class="form-row">
<div class="form-group">
<label for="localType">Aircraft Type</label>
<input type="text" id="localType" name="type" placeholder="e.g., Cessna 172">
</div>
<div class="form-group">
<label for="localCallsign">Callsign</label>
<input type="text" id="localCallsign" name="callsign" placeholder="Optional">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="localPOB">Persons on Board <span class="required">*</span></label>
<input type="number" id="localPOB" name="pob" value="1" min="1" required>
</div>
<div class="form-group">
<label for="localDuration">Est. Duration (minutes)</label>
<input type="number" id="localDuration" name="duration" value="45" min="5">
</div>
</div>
<div class="form-group">
<label for="localETD">Est. Takeoff Time</label>
<input type="time" id="localETD" name="etd">
</div>
<div class="form-group">
<label for="localNotes">Notes</label>
<textarea id="localNotes" name="notes" placeholder="Any additional information..."></textarea>
</div>
<button type="submit" class="btn-submit">📋 Book Local Flight</button>
</form>
</div>
<!-- Circuit Form -->
<div id="circuits" class="tab-content">
<form id="circuitForm" onsubmit="handleSubmit(event, 'circuits')">
<div class="form-group">
<label for="circuitReg">Aircraft Registration <span class="required">*</span></label>
<input type="text" id="circuitReg" name="registration" placeholder="e.g., G-BAMC" required oninput="handleAircraftLookup(this.value, 'circuits')">
<div id="circuitReg-lookup-results" class="aircraft-lookup-results"></div>
</div>
<div class="form-row">
<div class="form-group">
<label for="circuitType">Aircraft Type</label>
<input type="text" id="circuitType" name="type" placeholder="e.g., Cessna 172">
</div>
<div class="form-group">
<label for="circuitCallsign">Callsign</label>
<input type="text" id="circuitCallsign" name="callsign" placeholder="Optional">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="circuitPOB">Persons on Board <span class="required">*</span></label>
<input type="number" id="circuitPOB" name="pob" value="1" min="1" required>
</div>
<div class="form-group">
<label for="circuitDuration">Est. Duration (minutes)</label>
<input type="number" id="circuitDuration" name="duration" value="30" min="5">
</div>
</div>
<div class="form-group">
<label for="circuitETD">Est. Takeoff Time</label>
<input type="time" id="circuitETD" name="etd">
</div>
<div class="form-group">
<label for="circuitNotes">Notes</label>
<textarea id="circuitNotes" name="notes" placeholder="Any additional information..."></textarea>
</div>
<button type="submit" class="btn-submit">✈️ Book Circuits</button>
</form>
</div>
<!-- Departure Form -->
<div id="departure" class="tab-content">
<div class="info-box">
➡️ Book a flight departing to another airport (email optional)
</div>
<form id="departureForm" onsubmit="handleSubmit(event, 'departure')">
<div class="form-group">
<label for="depReg">Aircraft Registration <span class="required">*</span></label>
<input type="text" id="depReg" name="registration" placeholder="e.g., N12345" required oninput="handleAircraftLookup(this.value, 'departure')">
<div id="depReg-lookup-results" class="aircraft-lookup-results"></div>
</div>
<div class="form-row">
<div class="form-group">
<label for="depType">Aircraft Type</label>
<input type="text" id="depType" name="type" placeholder="e.g., Cessna 172">
</div>
<div class="form-group">
<label for="depCallsign">Callsign</label>
<input type="text" id="depCallsign" name="callsign" placeholder="Optional">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="depPOB">Persons on Board <span class="required">*</span></label>
<input type="number" id="depPOB" name="pob" value="1" min="1" required>
</div>
<div class="form-group">
<label for="depTo">Destination (ICAO) <span class="required">*</span></label>
<input type="text" id="depTo" name="out_to" placeholder="e.g., KJFK" required oninput="handleAirportLookup(this.value, 'depTo')">
<div id="depTo-lookup-results" class="airport-lookup-results"></div>
</div>
</div>
<div class="form-group">
<label for="depETD">Takeoff Time</label>
<input type="time" id="depETD" name="etd">
</div>
<div class="form-group">
<label for="depNotes">Notes</label>
<textarea id="depNotes" name="notes" placeholder="Any additional information..."></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label for="depEmail">Pilot Email</label>
<input type="email" id="depEmail" name="pilot_email">
</div>
<div class="form-group">
<label for="depName">Pilot Name</label>
<input type="text" id="depName" name="pilot_name" placeholder="Optional">
</div>
</div>
<button type="submit" class="btn-submit">✈️ Book Departure</button>
</form>
</div>
<!-- Arrival Form -->
<div id="arrival" class="tab-content">
<div class="info-box">
⬅️ Book an arrival from another airport (email optional)
</div>
<form id="arrivalForm" onsubmit="handleSubmit(event, 'arrival')">
<div class="form-group">
<label for="arrReg">Aircraft Registration <span class="required">*</span></label>
<input type="text" id="arrReg" name="registration" placeholder="e.g., N12345" required oninput="handleAircraftLookup(this.value, 'arrival')">
<div id="arrReg-lookup-results" class="aircraft-lookup-results"></div>
</div>
<div class="form-row">
<div class="form-group">
<label for="arrType">Aircraft Type</label>
<input type="text" id="arrType" name="type" placeholder="e.g., Cessna 172">
</div>
<div class="form-group">
<label for="arrCallsign">Callsign</label>
<input type="text" id="arrCallsign" name="callsign" placeholder="Optional">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="arrPOB">Persons on Board <span class="required">*</span></label>
<input type="number" id="arrPOB" name="pob" value="1" min="1" required>
</div>
<div class="form-group">
<label for="arrFrom">Origin (ICAO) <span class="required">*</span></label>
<input type="text" id="arrFrom" name="in_from" placeholder="e.g., KJFK" required oninput="handleAirportLookup(this.value, 'arrFrom')">
<div id="arrFrom-lookup-results" class="airport-lookup-results"></div>
</div>
</div>
<div class="form-group">
<label for="arrETA">Arrival Time</label>
<input type="time" id="arrETA" name="eta">
</div>
<div class="form-group">
<label for="arrNotes">Notes</label>
<textarea id="arrNotes" name="notes" placeholder="Any additional information..."></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label for="arrEmail">Pilot Email</label>
<input type="email" id="arrEmail" name="pilot_email">
</div>
<div class="form-group">
<label for="arrName">Pilot Name</label>
<input type="text" id="arrName" name="pilot_name" placeholder="Optional">
</div>
</div>
<button type="submit" class="btn-submit">✈️ Book Arrival</button>
</form>
</div>
<div class="loading" id="loading">
<div class="spinner"></div>
<p style="margin-top: 15px; color: #666;">Processing...</p>
</div>
<div class="footer">
<p>📞 Questions? Contact the airfield operations team</p>
<p style="margin-top: 10px; font-size: 12px; color: #999;">Version 1.0</p>
</div>
</div>
<script>
const API_BASE = window.location.origin + '/api/v1';
function switchTab(button, tabName) {
// Hide all tabs
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.classList.remove('active');
});
// Show selected tab and activate button
document.getElementById(tabName).classList.add('active');
button.classList.add('active');
}
function showMessage(message, isError = false) {
const successEl = document.getElementById('successMessage');
const errorEl = document.getElementById('errorMessage');
if (isError) {
errorEl.textContent = message;
errorEl.style.display = 'block';
successEl.style.display = 'none';
} else {
successEl.textContent = message;
successEl.style.display = 'block';
errorEl.style.display = 'none';
}
// Auto-hide after 5 seconds
setTimeout(() => {
successEl.style.display = 'none';
errorEl.style.display = 'none';
}, 5000);
}
async function handleSubmit(event, formType) {
event.preventDefault();
const form = event.target;
const formData = new FormData(form);
const data = Object.fromEntries(formData);
// Set flight_type based on form type
if (formType === 'local' && !data.flight_type) {
data.flight_type = 'LOCAL';
} else if (formType === 'circuits' && !data.flight_type) {
data.flight_type = 'CIRCUITS';
}
// Convert time inputs to ISO datetime (combine with today's date)
const today = new Date().toISOString().split('T')[0];
const timeFields = ['etd', 'circuit_timestamp', 'eta'];
timeFields.forEach(field => {
if (data[field]) {
// data[field] is in HH:MM format (time input)
const datetime = new Date(`${today}T${data[field]}:00`);
data[field] = datetime.toISOString();
}
});
let endpoint = '';
switch(formType) {
case 'local':
endpoint = '/public-book/local-flights';
break;
case 'circuits':
endpoint = '/public-book/local-flights';
break;
case 'departure':
endpoint = '/public-book/departures';
break;
case 'arrival':
endpoint = '/public-book/arrivals';
break;
}
document.getElementById('loading').style.display = 'block';
try {
const response = await fetch(`${API_BASE}${endpoint}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
});
if (!response.ok) {
const error = await response.json();
throw new Error(error.detail || `Error: ${response.status}`);
}
const result = await response.json();
showMessage(`✅ Success! Your booking has been submitted. Booking ID: ${result.id}`);
form.reset();
} catch (error) {
console.error('Error:', error);
showMessage(`❌ Error: ${error.message}`, true);
} finally {
document.getElementById('loading').style.display = 'none';
}
}
// Set current time as default for time inputs
function setDefaultTimes() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const timeValue = `${hours}:${minutes}`;
document.querySelectorAll('input[type="time"]').forEach(input => {
if (!input.value) {
input.value = timeValue;
}
});
}
// Aircraft lookup functionality
let aircraftLookupTimeouts = {};
async function handleAircraftLookup(registration, formType) {
if (aircraftLookupTimeouts[formType]) {
clearTimeout(aircraftLookupTimeouts[formType]);
}
const registerIdMap = {
'local': 'localReg',
'circuits': 'circuitReg',
'departure': 'depReg',
'arrival': 'arrReg'
};
const typeIdMap = {
'local': 'localType',
'circuits': 'circuitType',
'departure': 'depType',
'arrival': 'arrType'
};
const regId = registerIdMap[formType];
const typeId = typeIdMap[formType];
const resultsDiv = document.getElementById(`${regId}-lookup-results`);
if (!registration || registration.length < 4) {
resultsDiv.innerHTML = '';
return;
}
resultsDiv.innerHTML = '<span class="lookup-searching">Searching...</span>';
aircraftLookupTimeouts[formType] = setTimeout(async () => {
try {
const response = await fetch(`${API_BASE}/aircraft/public/lookup/${registration.toUpperCase()}`);
if (response.ok) {
const data = await response.json();
if (data && data.length > 0) {
if (data.length === 1) {
const aircraft = data[0];
document.getElementById(regId).value = aircraft.registration || registration.toUpperCase();
resultsDiv.innerHTML = `
<div class="lookup-match">
${aircraft.registration || registration.toUpperCase()} - ${aircraft.type_code || 'Unknown'} ${aircraft.model ? `(${aircraft.model})` : ''}
</div>
`;
if (!document.getElementById(typeId).value) {
document.getElementById(typeId).value = aircraft.type_code || '';
}
} else if (data.length <= 10) {
resultsDiv.innerHTML = `
<div class="aircraft-list">
${data.map(aircraft => `
<div class="aircraft-option" onclick="selectAircraft('${formType}', '${aircraft.registration || registration.toUpperCase()}', '${aircraft.type_code || ''}')">
<div class="aircraft-code">${aircraft.registration || registration.toUpperCase()}</div>
<div class="aircraft-details">${aircraft.type_code || 'Unknown'} ${aircraft.model ? `(${aircraft.model})` : ''}</div>
</div>
`).join('')}
</div>
`;
} else {
resultsDiv.innerHTML = '<span class="lookup-no-match">Too many matches, please be more specific</span>';
}
} else {
resultsDiv.innerHTML = '<span class="lookup-no-match">No aircraft found</span>';
}
} else {
resultsDiv.innerHTML = '';
}
} catch (error) {
console.error('Aircraft lookup error:', error);
resultsDiv.innerHTML = '';
}
}, 500);
}
function selectAircraft(formType, registration, typeCode) {
const registerIdMap = {
'local': 'localReg',
'circuits': 'circuitReg',
'departure': 'depReg',
'arrival': 'arrReg'
};
const typeIdMap = {
'local': 'localType',
'circuits': 'circuitType',
'departure': 'depType',
'arrival': 'arrType'
};
const regId = registerIdMap[formType];
const typeId = typeIdMap[formType];
document.getElementById(regId).value = registration;
document.getElementById(typeId).value = typeCode;
document.getElementById(`${regId}-lookup-results`).innerHTML = '';
document.getElementById(regId).blur();
}
// Airport lookup functionality
let airportLookupTimeouts = {};
async function handleAirportLookup(query, fieldType) {
if (airportLookupTimeouts[fieldType]) {
clearTimeout(airportLookupTimeouts[fieldType]);
}
const fieldIdMap = {
'depTo': 'depTo',
'arrFrom': 'arrFrom'
};
const fieldId = fieldIdMap[fieldType];
const resultsDiv = document.getElementById(`${fieldId}-lookup-results`);
if (!query || query.length < 2) {
resultsDiv.innerHTML = '';
return;
}
resultsDiv.innerHTML = '<span class="lookup-searching">Searching...</span>';
airportLookupTimeouts[fieldType] = setTimeout(async () => {
try {
const response = await fetch(`${API_BASE}/airport/public/lookup/${query.toUpperCase()}`);
if (response.ok) {
const data = await response.json();
if (data && data.length > 0) {
if (data.length === 1) {
const airport = data[0];
resultsDiv.innerHTML = `
<div class="aircraft-list">
<div class="aircraft-option" onclick="selectAirport('${fieldId}', '${airport.icao}')">
<div class="aircraft-code">${airport.icao}/${airport.iata || ''}</div>
<div class="aircraft-details">${airport.name}, ${airport.country}</div>
</div>
</div>
`;
} else if (data.length <= 10) {
resultsDiv.innerHTML = `
<div class="aircraft-list">
${data.map(airport => `
<div class="aircraft-option" onclick="selectAirport('${fieldId}', '${airport.icao}')">
<div class="aircraft-code">${airport.icao}/${airport.iata || ''}</div>
<div class="aircraft-details">${airport.name}, ${airport.country}</div>
</div>
`).join('')}
</div>
`;
} else {
resultsDiv.innerHTML = '<span class="lookup-no-match">Too many matches, please be more specific</span>';
}
} else {
resultsDiv.innerHTML = '<span class="lookup-no-match">No airport found</span>';
}
} else {
resultsDiv.innerHTML = '';
}
} catch (error) {
console.error('Airport lookup error:', error);
resultsDiv.innerHTML = '';
}
}, 500);
}
function selectAirport(fieldId, icaoCode) {
document.getElementById(fieldId).value = icaoCode;
document.getElementById(`${fieldId}-lookup-results`).innerHTML = '';
document.getElementById(fieldId).blur();
}
// Clear lookup results on blur
document.addEventListener('DOMContentLoaded', function() {
['localReg', 'depReg', 'arrReg', 'depTo', 'arrFrom'].forEach(fieldId => {
const field = document.getElementById(fieldId);
if (field) {
field.addEventListener('blur', function() {
setTimeout(() => {
document.getElementById(`${fieldId}-lookup-results`).innerHTML = '';
}, 150);
});
}
});
});
// Initialize on page load
document.addEventListener('DOMContentLoaded', setDefaultTimes);
</script>
</body>
</html>