Feature enhancement
This commit is contained in:
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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user