Feature enhancement
This commit is contained in:
@@ -593,3 +593,56 @@ tbody tr:hover {
|
||||
.notification.error {
|
||||
background-color: #e74c3c;
|
||||
}
|
||||
|
||||
/* Unified Lookup Styles */
|
||||
.lookup-no-match {
|
||||
color: #6c757d;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.lookup-searching {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.lookup-list {
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 4px;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.lookup-option {
|
||||
padding: 0.5rem;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.lookup-option:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.lookup-option:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.lookup-code {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-weight: bold;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.lookup-name {
|
||||
color: #6c757d;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.lookup-location {
|
||||
color: #868e96;
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
466
web/admin.html
466
web/admin.html
@@ -5,11 +5,12 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>PPR Admin Interface</title>
|
||||
<link rel="stylesheet" href="admin.css">
|
||||
<script src="lookups.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="top-bar">
|
||||
<div class="title">
|
||||
<h1>✈️ Swansea PPR</h1>
|
||||
<h1>✈️ Swansea Tower</h1>
|
||||
</div>
|
||||
<div class="menu-buttons">
|
||||
<button class="btn btn-success" onclick="openNewPPRModal()">
|
||||
@@ -393,6 +394,15 @@
|
||||
<input type="text" id="local_out_to" name="out_to" placeholder="ICAO Code or Airport Name" oninput="handleLocalOutToAirportLookup(this.value)" tabindex="3">
|
||||
<div id="local-out-to-lookup-results"></div>
|
||||
</div>
|
||||
<div class="form-group" id="local-etd-group" style="display: none;">
|
||||
<label for="local_etd">ETD (Estimated Time of Departure)</label>
|
||||
<div style="display: flex; gap: 0.5rem;">
|
||||
<input type="date" id="local_etd_date" name="etd_date" style="flex: 1;">
|
||||
<select id="local_etd_time" name="etd_time" style="flex: 1;">
|
||||
<option value="">Select Time</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group full-width">
|
||||
<label for="local_notes">Notes</label>
|
||||
<textarea id="local_notes" name="notes" rows="3" placeholder="e.g., destination, any special requirements"></textarea>
|
||||
@@ -1632,8 +1642,8 @@
|
||||
|
||||
// Sort departures by ETD (ascending), nulls last
|
||||
departures.sort((a, b) => {
|
||||
const aTime = a.etd || a.booked_out_dt;
|
||||
const bTime = b.etd || b.booked_out_dt;
|
||||
const aTime = a.etd || a.created_dt;
|
||||
const bTime = b.etd || b.created_dt;
|
||||
if (!aTime) return 1;
|
||||
if (!bTime) return -1;
|
||||
return new Date(aTime) - new Date(bTime);
|
||||
@@ -1673,7 +1683,7 @@
|
||||
aircraftDisplay = `<strong>${flight.registration}</strong>`;
|
||||
}
|
||||
toDisplay = `<i>${flight.flight_type === 'CIRCUITS' ? 'Circuits' : flight.flight_type === 'LOCAL' ? 'Local Flight' : 'Departure'}</i>`;
|
||||
etd = flight.booked_out_dt ? formatTimeOnly(flight.booked_out_dt) : '-';
|
||||
etd = flight.etd ? formatTimeOnly(flight.etd) : (flight.created_dt ? formatTimeOnly(flight.created_dt) : '-');
|
||||
pob = flight.pob || '-';
|
||||
fuel = '-';
|
||||
landedDt = flight.landed_dt ? formatTimeOnly(flight.landed_dt) : '-';
|
||||
@@ -1711,10 +1721,10 @@
|
||||
if (flight.out_to && flight.out_to.length === 4 && /^[A-Z]{4}$/.test(flight.out_to)) {
|
||||
toDisplay = await getAirportDisplay(flight.out_to);
|
||||
}
|
||||
etd = flight.booked_out_dt ? formatTimeOnly(flight.booked_out_dt) : '-';
|
||||
etd = flight.etd ? formatTimeOnly(flight.etd) : (flight.created_dt ? formatTimeOnly(flight.created_dt) : '-');
|
||||
pob = flight.pob || '-';
|
||||
fuel = '-';
|
||||
landedDt = flight.departure_dt ? formatTimeOnly(flight.departure_dt) : '-';
|
||||
landedDt = flight.departed_dt ? formatTimeOnly(flight.departed_dt) : '-';
|
||||
|
||||
// Action buttons for departure
|
||||
if (flight.status === 'BOOKED_OUT') {
|
||||
@@ -2608,90 +2618,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Aircraft Lookup Functions
|
||||
let aircraftLookupTimeout;
|
||||
|
||||
function handleAircraftLookup(registration) {
|
||||
// Clear previous timeout
|
||||
if (aircraftLookupTimeout) {
|
||||
clearTimeout(aircraftLookupTimeout);
|
||||
}
|
||||
|
||||
// Clear results if input is too short
|
||||
if (registration.length < 4) {
|
||||
clearAircraftLookup();
|
||||
return;
|
||||
}
|
||||
|
||||
// Show searching indicator
|
||||
document.getElementById('aircraft-lookup-results').innerHTML =
|
||||
'<div class="aircraft-searching">Searching...</div>';
|
||||
|
||||
// Debounce the search - wait 300ms after user stops typing
|
||||
aircraftLookupTimeout = setTimeout(() => {
|
||||
performAircraftLookup(registration);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
async function performAircraftLookup(registration) {
|
||||
try {
|
||||
// Clean the input (remove non-alphanumeric characters and make uppercase)
|
||||
const cleanInput = registration.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
|
||||
|
||||
if (cleanInput.length < 4) {
|
||||
clearAircraftLookup();
|
||||
return;
|
||||
}
|
||||
|
||||
// Call the real API
|
||||
const response = await authenticatedFetch(`/api/v1/aircraft/lookup/${cleanInput}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch aircraft data');
|
||||
}
|
||||
|
||||
const matches = await response.json();
|
||||
displayAircraftLookupResults(matches, cleanInput);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Aircraft lookup error:', error);
|
||||
document.getElementById('aircraft-lookup-results').innerHTML =
|
||||
'<div class="aircraft-no-match">Lookup failed - please enter manually</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function displayAircraftLookupResults(matches, searchTerm) {
|
||||
const resultsDiv = document.getElementById('aircraft-lookup-results');
|
||||
|
||||
if (matches.length === 0) {
|
||||
resultsDiv.innerHTML = '<div class="aircraft-no-match">No matches found</div>';
|
||||
} else if (matches.length === 1) {
|
||||
// Unique match found - auto-populate
|
||||
const aircraft = matches[0];
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="aircraft-match">
|
||||
✓ ${aircraft.manufacturer_name} ${aircraft.model} (${aircraft.type_code})
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Auto-populate the form fields
|
||||
document.getElementById('ac_reg').value = aircraft.registration;
|
||||
document.getElementById('ac_type').value = aircraft.type_code;
|
||||
|
||||
} else {
|
||||
// Multiple matches - show list but don't auto-populate
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="aircraft-no-match">
|
||||
Multiple matches found (${matches.length}) - please be more specific
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function clearAircraftLookup() {
|
||||
document.getElementById('aircraft-lookup-results').innerHTML = '';
|
||||
}
|
||||
|
||||
function clearArrivalAirportLookup() {
|
||||
document.getElementById('arrival-airport-lookup-results').innerHTML = '';
|
||||
}
|
||||
@@ -2700,208 +2626,12 @@
|
||||
document.getElementById('departure-airport-lookup-results').innerHTML = '';
|
||||
}
|
||||
|
||||
// Airport Lookup Functions
|
||||
let arrivalAirportLookupTimeout;
|
||||
let departureAirportLookupTimeout;
|
||||
|
||||
function handleArrivalAirportLookup(codeOrName) {
|
||||
// Clear previous timeout
|
||||
if (arrivalAirportLookupTimeout) {
|
||||
clearTimeout(arrivalAirportLookupTimeout);
|
||||
// Add listener for ETD date changes
|
||||
document.addEventListener('change', function(e) {
|
||||
if (e.target.id === 'local_etd_date') {
|
||||
populateETDTimeSlots();
|
||||
}
|
||||
|
||||
// Clear results if input is too short
|
||||
if (codeOrName.length < 2) {
|
||||
clearArrivalAirportLookup();
|
||||
return;
|
||||
}
|
||||
|
||||
// Show searching indicator
|
||||
document.getElementById('arrival-airport-lookup-results').innerHTML =
|
||||
'<div class="airport-searching">Searching...</div>';
|
||||
|
||||
// Debounce the search - wait 300ms after user stops typing
|
||||
arrivalAirportLookupTimeout = setTimeout(() => {
|
||||
performArrivalAirportLookup(codeOrName);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function handleDepartureAirportLookup(codeOrName) {
|
||||
// Clear previous timeout
|
||||
if (departureAirportLookupTimeout) {
|
||||
clearTimeout(departureAirportLookupTimeout);
|
||||
}
|
||||
|
||||
// Clear results if input is too short
|
||||
if (codeOrName.length < 2) {
|
||||
clearDepartureAirportLookup();
|
||||
return;
|
||||
}
|
||||
|
||||
// Show searching indicator
|
||||
document.getElementById('departure-airport-lookup-results').innerHTML =
|
||||
'<div class="airport-searching">Searching...</div>';
|
||||
|
||||
// Debounce the search - wait 300ms after user stops typing
|
||||
departureAirportLookupTimeout = setTimeout(() => {
|
||||
performDepartureAirportLookup(codeOrName);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
async function performArrivalAirportLookup(codeOrName) {
|
||||
try {
|
||||
const cleanInput = codeOrName.trim();
|
||||
|
||||
if (cleanInput.length < 2) {
|
||||
clearArrivalAirportLookup();
|
||||
return;
|
||||
}
|
||||
|
||||
// Call the airport lookup API
|
||||
const response = await authenticatedFetch(`/api/v1/airport/lookup/${encodeURIComponent(cleanInput)}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch airport data');
|
||||
}
|
||||
|
||||
const matches = await response.json();
|
||||
displayArrivalAirportLookupResults(matches, cleanInput);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Arrival airport lookup error:', error);
|
||||
document.getElementById('arrival-airport-lookup-results').innerHTML =
|
||||
'<div class="airport-no-match">Lookup failed - will use as entered</div>';
|
||||
}
|
||||
}
|
||||
|
||||
async function performDepartureAirportLookup(codeOrName) {
|
||||
try {
|
||||
const cleanInput = codeOrName.trim();
|
||||
|
||||
if (cleanInput.length < 2) {
|
||||
clearDepartureAirportLookup();
|
||||
return;
|
||||
}
|
||||
|
||||
// Call the airport lookup API
|
||||
const response = await authenticatedFetch(`/api/v1/airport/lookup/${encodeURIComponent(cleanInput)}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch airport data');
|
||||
}
|
||||
|
||||
const matches = await response.json();
|
||||
displayDepartureAirportLookupResults(matches, cleanInput);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Departure airport lookup error:', error);
|
||||
document.getElementById('departure-airport-lookup-results').innerHTML =
|
||||
'<div class="airport-no-match">Lookup failed - will use as entered</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function displayArrivalAirportLookupResults(matches, searchTerm) {
|
||||
const resultsDiv = document.getElementById('arrival-airport-lookup-results');
|
||||
|
||||
if (matches.length === 0) {
|
||||
resultsDiv.innerHTML = '<div class="airport-no-match">No matches found - will use as entered</div>';
|
||||
} else {
|
||||
// Show matches as clickable options (single or multiple)
|
||||
const matchText = matches.length === 1 ? 'Match found - click to select:' : 'Multiple matches found - select one:';
|
||||
const listHtml = matches.map(airport => `
|
||||
<div class="airport-option" onclick="selectArrivalAirport('${airport.icao}')">
|
||||
<div>
|
||||
<div class="airport-code">${airport.icao}</div>
|
||||
<div class="airport-name">${airport.name}</div>
|
||||
${airport.city ? `<div class="airport-location">${airport.city}, ${airport.country}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="airport-no-match" style="margin-bottom: 0.5rem;">
|
||||
${matchText}
|
||||
</div>
|
||||
<div class="airport-list">
|
||||
${listHtml}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
function displayDepartureAirportLookupResults(matches, searchTerm) {
|
||||
const resultsDiv = document.getElementById('departure-airport-lookup-results');
|
||||
|
||||
if (matches.length === 0) {
|
||||
resultsDiv.innerHTML = '<div class="airport-no-match">No matches found - will use as entered</div>';
|
||||
} else {
|
||||
// Show matches as clickable options (single or multiple)
|
||||
const matchText = matches.length === 1 ? 'Match found - click to select:' : 'Multiple matches found - select one:';
|
||||
const listHtml = matches.map(airport => `
|
||||
<div class="airport-option" onclick="selectDepartureAirport('${airport.icao}')">
|
||||
<div>
|
||||
<div class="airport-code">${airport.icao}</div>
|
||||
<div class="airport-name">${airport.name}</div>
|
||||
${airport.city ? `<div class="airport-location">${airport.city}, ${airport.country}</div>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="airport-no-match" style="margin-bottom: 0.5rem;">
|
||||
${matchText}
|
||||
</div>
|
||||
<div class="airport-list">
|
||||
${listHtml}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// Airport selection functions
|
||||
function selectArrivalAirport(icaoCode) {
|
||||
document.getElementById('in_from').value = icaoCode;
|
||||
clearArrivalAirportLookup();
|
||||
}
|
||||
|
||||
function selectDepartureAirport(icaoCode) {
|
||||
document.getElementById('out_to').value = icaoCode;
|
||||
clearDepartureAirportLookup();
|
||||
}
|
||||
|
||||
// Position tooltip dynamically to avoid being cut off
|
||||
function positionTooltip(event) {
|
||||
const indicator = event.currentTarget;
|
||||
const tooltip = indicator.querySelector('.tooltip-text');
|
||||
if (!tooltip) return;
|
||||
|
||||
const rect = indicator.getBoundingClientRect();
|
||||
const tooltipWidth = 300;
|
||||
const tooltipHeight = tooltip.offsetHeight || 100;
|
||||
|
||||
// Position to the right of the indicator by default
|
||||
let left = rect.right + 10;
|
||||
let top = rect.top + (rect.height / 2) - (tooltipHeight / 2);
|
||||
|
||||
// Check if tooltip would go off the right edge
|
||||
if (left + tooltipWidth > window.innerWidth) {
|
||||
// Position to the left instead
|
||||
left = rect.left - tooltipWidth - 10;
|
||||
}
|
||||
|
||||
// Check if tooltip would go off the bottom
|
||||
if (top + tooltipHeight > window.innerHeight) {
|
||||
top = window.innerHeight - tooltipHeight - 10;
|
||||
}
|
||||
|
||||
// Check if tooltip would go off the top
|
||||
if (top < 10) {
|
||||
top = 10;
|
||||
}
|
||||
|
||||
tooltip.style.left = left + 'px';
|
||||
tooltip.style.top = top + 'px';
|
||||
}
|
||||
});
|
||||
|
||||
// Local Flight (Book Out) Modal Functions
|
||||
function openLocalFlightModal(flightType = 'LOCAL') {
|
||||
@@ -2932,95 +2662,83 @@
|
||||
const destGroup = document.getElementById('departure-destination-group');
|
||||
const destInput = document.getElementById('local_out_to');
|
||||
const destLabel = document.getElementById('departure-destination-label');
|
||||
const etdGroup = document.getElementById('local-etd-group');
|
||||
|
||||
if (flightType === 'DEPARTURE') {
|
||||
destGroup.style.display = 'block';
|
||||
destInput.required = true;
|
||||
destLabel.textContent = 'Destination Airport *';
|
||||
etdGroup.style.display = 'block';
|
||||
} else {
|
||||
destGroup.style.display = 'none';
|
||||
destInput.required = false;
|
||||
destInput.value = '';
|
||||
destLabel.textContent = 'Destination Airport';
|
||||
etdGroup.style.display = 'none';
|
||||
document.getElementById('local_etd_date').value = '';
|
||||
document.getElementById('local_etd_time').value = '';
|
||||
}
|
||||
}
|
||||
|
||||
// Handle aircraft lookup for local flights
|
||||
let localAircraftLookupTimeout;
|
||||
function handleLocalAircraftLookup(registration) {
|
||||
// Clear previous timeout
|
||||
if (localAircraftLookupTimeout) {
|
||||
clearTimeout(localAircraftLookupTimeout);
|
||||
}
|
||||
|
||||
// Clear results if input is too short
|
||||
if (registration.length < 4) {
|
||||
clearLocalAircraftLookup();
|
||||
return;
|
||||
}
|
||||
|
||||
// Show searching indicator
|
||||
document.getElementById('local-aircraft-lookup-results').innerHTML =
|
||||
'<div class="aircraft-searching">Searching...</div>';
|
||||
|
||||
// Debounce the search - wait 300ms after user stops typing
|
||||
localAircraftLookupTimeout = setTimeout(() => {
|
||||
performLocalAircraftLookup(registration);
|
||||
}, 300);
|
||||
}
|
||||
|
||||
async function performLocalAircraftLookup(registration) {
|
||||
try {
|
||||
// Clean the input (remove non-alphanumeric characters and make uppercase)
|
||||
const cleanInput = registration.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
|
||||
|
||||
if (cleanInput.length < 4) {
|
||||
clearLocalAircraftLookup();
|
||||
return;
|
||||
}
|
||||
|
||||
// Call the API
|
||||
const response = await authenticatedFetch(`/api/v1/aircraft/lookup/${cleanInput}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to fetch aircraft data');
|
||||
}
|
||||
|
||||
const matches = await response.json();
|
||||
displayLocalAircraftLookupResults(matches, cleanInput);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Aircraft lookup error:', error);
|
||||
document.getElementById('local-aircraft-lookup-results').innerHTML =
|
||||
'<div class="aircraft-no-match">Lookup failed - please enter manually</div>';
|
||||
}
|
||||
}
|
||||
|
||||
function displayLocalAircraftLookupResults(matches, searchTerm) {
|
||||
const resultsDiv = document.getElementById('local-aircraft-lookup-results');
|
||||
|
||||
if (matches.length === 0) {
|
||||
resultsDiv.innerHTML = '<div class="aircraft-no-match">No matches found</div>';
|
||||
} else if (matches.length === 1) {
|
||||
// Unique match found - auto-populate
|
||||
const aircraft = matches[0];
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="aircraft-match">
|
||||
✓ ${aircraft.manufacturer_name} ${aircraft.model} (${aircraft.type_code})
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Auto-populate the form fields
|
||||
document.getElementById('local_registration').value = aircraft.registration;
|
||||
document.getElementById('local_type').value = aircraft.type_code;
|
||||
|
||||
} else {
|
||||
// Multiple matches - show list but don't auto-populate
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="aircraft-no-match">
|
||||
Multiple matches found (${matches.length}) - please be more specific
|
||||
</div>
|
||||
`;
|
||||
// Populate ETD time slots
|
||||
populateETDTimeSlots();
|
||||
}
|
||||
|
||||
function getNearest15MinSlot() {
|
||||
const now = new Date();
|
||||
const minutes = now.getMinutes();
|
||||
const remainder = minutes % 15;
|
||||
const roundedMinutes = remainder >= 7.5 ? minutes + (15 - remainder) : minutes - remainder;
|
||||
|
||||
const future = new Date(now);
|
||||
future.setMinutes(roundedMinutes === 60 ? 0 : roundedMinutes);
|
||||
if (roundedMinutes === 60) {
|
||||
future.setHours(future.getHours() + 1);
|
||||
}
|
||||
|
||||
return future;
|
||||
}
|
||||
|
||||
function populateETDTimeSlots() {
|
||||
const timeSelect = document.getElementById('local_etd_time');
|
||||
const dateInput = document.getElementById('local_etd_date');
|
||||
|
||||
// Get the selected date or use today
|
||||
let selectedDate = dateInput.value;
|
||||
if (!selectedDate) {
|
||||
const today = new Date();
|
||||
const year = today.getFullYear();
|
||||
const month = String(today.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(today.getDate()).padStart(2, '0');
|
||||
selectedDate = `${year}-${month}-${day}`;
|
||||
dateInput.value = selectedDate;
|
||||
}
|
||||
|
||||
// Clear and repopulate
|
||||
timeSelect.innerHTML = '<option value="">Select Time</option>';
|
||||
|
||||
const future = getNearest15MinSlot();
|
||||
const selectedDateTime = new Date(selectedDate + 'T00:00:00');
|
||||
|
||||
// If selected date is today, start from nearest 15-min slot; otherwise start from 06:00
|
||||
let startHour = selectedDateTime.toDateString() === new Date().toDateString() ? future.getHours() : 6;
|
||||
let startMinute = selectedDateTime.toDateString() === new Date().toDateString() ? future.getMinutes() : 0;
|
||||
|
||||
// Generate 15-minute slots from start time to 22:00
|
||||
for (let hour = startHour; hour < 24; hour++) {
|
||||
for (let minute = (hour === startHour ? startMinute : 0); minute < 60; minute += 15) {
|
||||
const timeStr = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`;
|
||||
const option = document.createElement('option');
|
||||
option.value = timeStr;
|
||||
option.textContent = timeStr;
|
||||
|
||||
// Auto-select the nearest slot for today
|
||||
if (selectedDateTime.toDateString() === new Date().toDateString() &&
|
||||
hour === future.getHours() && minute === future.getMinutes()) {
|
||||
option.selected = true;
|
||||
}
|
||||
|
||||
timeSelect.appendChild(option);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3225,12 +2943,12 @@
|
||||
// Skip the hidden id field and empty values
|
||||
if (key === 'id') return;
|
||||
|
||||
// Handle date/time combination for departure
|
||||
if (key === 'departure_date' || key === 'departure_time') {
|
||||
if (!flightData.departure_dt && formData.get('departure_date') && formData.get('departure_time')) {
|
||||
const dateStr = formData.get('departure_date');
|
||||
const timeStr = formData.get('departure_time');
|
||||
flightData.departure_dt = new Date(`${dateStr}T${timeStr}`).toISOString();
|
||||
// Handle date/time combination for ETD (departures)
|
||||
if (key === 'etd_date' || key === 'etd_time') {
|
||||
if (!flightData.etd && formData.get('etd_date') && formData.get('etd_time')) {
|
||||
const dateStr = formData.get('etd_date');
|
||||
const timeStr = formData.get('etd_time');
|
||||
flightData.etd = new Date(`${dateStr}T${timeStr}`).toISOString();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
317
web/lookups.js
Normal file
317
web/lookups.js
Normal file
@@ -0,0 +1,317 @@
|
||||
/**
|
||||
* Lookup Utilities - Reusable functions for aircraft and airport lookups
|
||||
*/
|
||||
|
||||
/**
|
||||
* Creates a reusable lookup handler
|
||||
* @param {string} fieldId - ID of the input field
|
||||
* @param {string} resultsId - ID of the results container
|
||||
* @param {function} selectCallback - Function to call when item is selected
|
||||
* @param {object} options - Additional options (minLength, debounceMs, etc.)
|
||||
*/
|
||||
function createLookup(fieldId, resultsId, selectCallback, options = {}) {
|
||||
const defaults = {
|
||||
minLength: 2,
|
||||
debounceMs: 300,
|
||||
isAirport: false,
|
||||
isAircraft: false,
|
||||
maxResults: 10
|
||||
};
|
||||
const config = { ...defaults, ...options };
|
||||
let debounceTimeout;
|
||||
|
||||
const lookup = {
|
||||
// Main handler called by oninput
|
||||
handle: (value) => {
|
||||
clearTimeout(debounceTimeout);
|
||||
|
||||
if (!value || value.trim().length < config.minLength) {
|
||||
lookup.clear();
|
||||
return;
|
||||
}
|
||||
|
||||
lookup.showSearching();
|
||||
debounceTimeout = setTimeout(() => {
|
||||
lookup.perform(value);
|
||||
}, config.debounceMs);
|
||||
},
|
||||
|
||||
// Perform the lookup
|
||||
perform: async (searchTerm) => {
|
||||
try {
|
||||
const cleanInput = searchTerm.trim();
|
||||
let endpoint;
|
||||
|
||||
if (config.isAircraft) {
|
||||
const cleaned = cleanInput.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
|
||||
if (cleaned.length < config.minLength) {
|
||||
lookup.clear();
|
||||
return;
|
||||
}
|
||||
endpoint = `/api/v1/aircraft/lookup/${cleaned}`;
|
||||
} else if (config.isAirport) {
|
||||
endpoint = `/api/v1/airport/lookup/${encodeURIComponent(cleanInput)}`;
|
||||
}
|
||||
|
||||
if (!endpoint) throw new Error('Invalid lookup type');
|
||||
|
||||
const response = await authenticatedFetch(endpoint);
|
||||
if (!response.ok) throw new Error('Lookup failed');
|
||||
|
||||
const results = await response.json();
|
||||
lookup.display(results, cleanInput);
|
||||
} catch (error) {
|
||||
console.error('Lookup error:', error);
|
||||
lookup.showError();
|
||||
}
|
||||
},
|
||||
|
||||
// Display results
|
||||
display: (results, searchTerm) => {
|
||||
const resultsDiv = document.getElementById(resultsId);
|
||||
|
||||
if (config.isAircraft) {
|
||||
// Aircraft lookup: auto-populate on single match, show message on multiple
|
||||
if (!results || results.length === 0) {
|
||||
resultsDiv.innerHTML = '<div class="aircraft-no-match">No matches found</div>';
|
||||
} else if (results.length === 1) {
|
||||
// Single match - auto-populate
|
||||
const aircraft = results[0];
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="aircraft-match">
|
||||
✓ ${aircraft.manufacturer_name || ''} ${aircraft.model || aircraft.type_code || ''}
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Auto-populate the form fields
|
||||
const field = document.getElementById(fieldId);
|
||||
if (field) field.value = aircraft.registration;
|
||||
|
||||
// Also populate type field
|
||||
let typeFieldId;
|
||||
if (fieldId === 'ac_reg') {
|
||||
typeFieldId = 'ac_type';
|
||||
} else if (fieldId === 'local_registration') {
|
||||
typeFieldId = 'local_type';
|
||||
}
|
||||
|
||||
if (typeFieldId) {
|
||||
const typeField = document.getElementById(typeFieldId);
|
||||
if (typeField) typeField.value = aircraft.type_code || '';
|
||||
}
|
||||
} else {
|
||||
// Multiple matches
|
||||
resultsDiv.innerHTML = `
|
||||
<div class="aircraft-no-match">
|
||||
Multiple matches found (${results.length}) - please be more specific
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
} else {
|
||||
// Airport lookup: show list of options
|
||||
if (!results || results.length === 0) {
|
||||
resultsDiv.innerHTML = '<div class="lookup-no-match">No matches found - will use as entered</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
const itemsToShow = results.slice(0, config.maxResults);
|
||||
const matchText = itemsToShow.length === 1 ? 'Match found - click to select:' : 'Multiple matches found - select one:';
|
||||
|
||||
let html = `<div class="lookup-no-match" style="margin-bottom: 0.5rem;">${matchText}</div><div class="lookup-list">`;
|
||||
|
||||
itemsToShow.forEach(item => {
|
||||
html += `
|
||||
<div class="lookup-option" onclick="lookupManager.selectItem('${resultsId}', '${fieldId}', '${item.icao}')">
|
||||
<div class="lookup-code">${item.icao}</div>
|
||||
<div class="lookup-name">${item.name || '-'}</div>
|
||||
${item.city ? `<div class="lookup-location">${item.city}, ${item.country}</div>` : ''}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
resultsDiv.innerHTML = html;
|
||||
}
|
||||
},
|
||||
|
||||
// Show searching state
|
||||
showSearching: () => {
|
||||
const resultsDiv = document.getElementById(resultsId);
|
||||
if (resultsDiv) {
|
||||
resultsDiv.innerHTML = '<div class="lookup-searching">Searching...</div>';
|
||||
}
|
||||
},
|
||||
|
||||
// Show error state
|
||||
showError: () => {
|
||||
const resultsDiv = document.getElementById(resultsId);
|
||||
if (resultsDiv) {
|
||||
resultsDiv.innerHTML = '<div class="lookup-no-match">Lookup failed - will use as entered</div>';
|
||||
}
|
||||
},
|
||||
|
||||
// Clear results
|
||||
clear: () => {
|
||||
const resultsDiv = document.getElementById(resultsId);
|
||||
if (resultsDiv) {
|
||||
resultsDiv.innerHTML = '';
|
||||
}
|
||||
},
|
||||
|
||||
// Set the selected value
|
||||
setValue: (value) => {
|
||||
const field = document.getElementById(fieldId);
|
||||
if (field) {
|
||||
field.value = value;
|
||||
}
|
||||
lookup.clear();
|
||||
if (selectCallback) selectCallback(value);
|
||||
}
|
||||
};
|
||||
|
||||
return lookup;
|
||||
}
|
||||
|
||||
/**
|
||||
* Global lookup manager for all lookups on the page
|
||||
*/
|
||||
const lookupManager = {
|
||||
lookups: {},
|
||||
|
||||
// Register a lookup instance
|
||||
register: (name, lookup) => {
|
||||
lookupManager.lookups[name] = lookup;
|
||||
},
|
||||
|
||||
// Generic item selection handler
|
||||
selectItem: (resultsId, fieldId, itemCode) => {
|
||||
const field = document.getElementById(fieldId);
|
||||
if (field) {
|
||||
field.value = itemCode;
|
||||
}
|
||||
const resultsDiv = document.getElementById(resultsId);
|
||||
if (resultsDiv) {
|
||||
resultsDiv.innerHTML = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize all lookups when page loads
|
||||
function initializeLookups() {
|
||||
// Create reusable lookup instances
|
||||
const arrivalAirportLookup = createLookup(
|
||||
'in_from',
|
||||
'arrival-airport-lookup-results',
|
||||
null,
|
||||
{ isAirport: true, minLength: 2 }
|
||||
);
|
||||
lookupManager.register('arrival-airport', arrivalAirportLookup);
|
||||
|
||||
const departureAirportLookup = createLookup(
|
||||
'out_to',
|
||||
'departure-airport-lookup-results',
|
||||
null,
|
||||
{ isAirport: true, minLength: 2 }
|
||||
);
|
||||
lookupManager.register('departure-airport', departureAirportLookup);
|
||||
|
||||
const localOutToLookup = createLookup(
|
||||
'local_out_to',
|
||||
'local-out-to-lookup-results',
|
||||
null,
|
||||
{ isAirport: true, minLength: 2 }
|
||||
);
|
||||
lookupManager.register('local-out-to', localOutToLookup);
|
||||
|
||||
const aircraftLookup = createLookup(
|
||||
'ac_reg',
|
||||
'aircraft-lookup-results',
|
||||
null,
|
||||
{ isAircraft: true, minLength: 4, debounceMs: 300 }
|
||||
);
|
||||
lookupManager.register('aircraft', aircraftLookup);
|
||||
|
||||
const localAircraftLookup = createLookup(
|
||||
'local_registration',
|
||||
'local-aircraft-lookup-results',
|
||||
null,
|
||||
{ isAircraft: true, minLength: 4, debounceMs: 300 }
|
||||
);
|
||||
lookupManager.register('local-aircraft', localAircraftLookup);
|
||||
}
|
||||
|
||||
// Initialize on DOM ready or immediately if already loaded
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initializeLookups);
|
||||
} else {
|
||||
initializeLookups();
|
||||
}
|
||||
|
||||
/**
|
||||
* Convenience wrapper functions for backward compatibility
|
||||
*/
|
||||
function handleArrivalAirportLookup(value) {
|
||||
const lookup = lookupManager.lookups['arrival-airport'];
|
||||
if (lookup) lookup.handle(value);
|
||||
}
|
||||
|
||||
function handleDepartureAirportLookup(value) {
|
||||
const lookup = lookupManager.lookups['departure-airport'];
|
||||
if (lookup) lookup.handle(value);
|
||||
}
|
||||
|
||||
function handleLocalOutToAirportLookup(value) {
|
||||
const lookup = lookupManager.lookups['local-out-to'];
|
||||
if (lookup) lookup.handle(value);
|
||||
}
|
||||
|
||||
function handleAircraftLookup(value) {
|
||||
const lookup = lookupManager.lookups['aircraft'];
|
||||
if (lookup) lookup.handle(value);
|
||||
}
|
||||
|
||||
function handleLocalAircraftLookup(value) {
|
||||
const lookup = lookupManager.lookups['local-aircraft'];
|
||||
if (lookup) lookup.handle(value);
|
||||
}
|
||||
|
||||
function clearArrivalAirportLookup() {
|
||||
const lookup = lookupManager.lookups['arrival-airport'];
|
||||
if (lookup) lookup.clear();
|
||||
}
|
||||
|
||||
function clearDepartureAirportLookup() {
|
||||
const lookup = lookupManager.lookups['departure-airport'];
|
||||
if (lookup) lookup.clear();
|
||||
}
|
||||
|
||||
function clearLocalOutToAirportLookup() {
|
||||
const lookup = lookupManager.lookups['local-out-to'];
|
||||
if (lookup) lookup.clear();
|
||||
}
|
||||
|
||||
function clearAircraftLookup() {
|
||||
const lookup = lookupManager.lookups['aircraft'];
|
||||
if (lookup) lookup.clear();
|
||||
}
|
||||
|
||||
function clearLocalAircraftLookup() {
|
||||
const lookup = lookupManager.lookups['local-aircraft'];
|
||||
if (lookup) lookup.clear();
|
||||
}
|
||||
|
||||
function selectArrivalAirport(icaoCode) {
|
||||
lookupManager.selectItem('arrival-airport-lookup-results', 'in_from', icaoCode);
|
||||
}
|
||||
|
||||
function selectDepartureAirport(icaoCode) {
|
||||
lookupManager.selectItem('departure-airport-lookup-results', 'out_to', icaoCode);
|
||||
}
|
||||
|
||||
function selectLocalOutToAirport(icaoCode) {
|
||||
lookupManager.selectItem('local-out-to-lookup-results', 'local_out_to', icaoCode);
|
||||
}
|
||||
|
||||
function selectLocalAircraft(registration) {
|
||||
lookupManager.selectItem('local-aircraft-lookup-results', 'local_registration', registration);
|
||||
}
|
||||
Reference in New Issue
Block a user