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

Overflights implementation

Browse Source
This commit is contained in:
James Pattinson
2025-12-19 05:07:46 -05:00
parent 658d4c4ff8
commit b46a88d471
10 changed files with 959 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

378
web/admin.html
View File

@@ -22,6 +22,9 @@
<button class="btn btn-info" onclick="openBookInModal()">
🛬 Book In
</button>
<button class="btn btn-secondary" onclick="openOverflightModal()">
🔄 Overflight
</button>
<button class="btn btn-primary" onclick="window.location.href = '/reports'">
📊 Reports
</button>
@@ -117,6 +120,46 @@
<p>No aircraft currently landed and ready to depart.</p>
</div>
</div>
<!-- Overflights Table -->
<div class="ppr-table" style="margin-top: 2rem;">
<div class="table-header">
<div style="display: flex; justify-content: space-between; align-items: center;">
<span>🔄 Active Overflights - <span id="overflights-count">0</span></span>
<span class="info-icon" onclick="showTableHelp('overflights')" title="What is this?">ℹ️</span>
</div>
</div>
<div id="overflights-loading" class="loading">
<div class="spinner"></div>
Loading overflights...
</div>
<div id="overflights-table-content" style="display: none;">
<table>
<thead>
<tr>
<th>Registration</th>
<th style="width: 30px; text-align: center;"></th>
<th>Callsign</th>
<th>Type</th>
<th>From</th>
<th>To</th>
<th>Called</th>
<th>POB</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="overflights-table-body">
</tbody>
</table>
</div>
<div id="overflights-no-data" class="no-data" style="display: none;">
<h3>No Active Overflights</h3>
</div>
</div>
<br>
<!-- Departed and Parked Tables -->
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
@@ -598,6 +641,64 @@
</div>
</div>
<!-- Overflight Modal -->
<div id="overflightModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Register Overflight</h2>
<button class="close" onclick="closeOverflightModal()">&times;</button>
</div>
<div class="modal-body">
<form id="overflight-form">
<input type="hidden" id="overflight-id" name="id">
<div class="form-grid">
<div class="form-group">
<label for="overflight_registration">Callsign/Registration *</label>
<input type="text" id="overflight_registration" name="registration" required oninput="handleOverflightAircraftLookup(this.value)" tabindex="1">
<div id="overflight-aircraft-lookup-results"></div>
</div>
<div class="form-group">
<label for="overflight_type">Aircraft Type</label>
<input type="text" id="overflight_type" name="type" placeholder="e.g., C172, PA34, AA5" tabindex="2">
</div>
<div class="form-group">
<label for="overflight_pob">Persons on Board</label>
<input type="number" id="overflight_pob" name="pob" min="1" tabindex="3">
</div>
<div class="form-group">
<label for="overflight_departure_airfield">Departure Airfield</label>
<input type="text" id="overflight_departure_airfield" name="departure_airfield" placeholder="ICAO Code or Airport Name" oninput="handleOverflightDepartureAirportLookup(this.value)" tabindex="4">
<div id="overflight-departure-airport-lookup-results"></div>
</div>
<div class="form-group">
<label for="overflight_destination_airfield">Destination Airfield</label>
<input type="text" id="overflight_destination_airfield" name="destination_airfield" placeholder="ICAO Code or Airport Name" oninput="handleOverflightDestinationAirportLookup(this.value)" tabindex="5">
<div id="overflight-destination-airport-lookup-results"></div>
</div>
<div class="form-group">
<label for="overflight_call_dt">Time of Call *</label>
<input type="datetime-local" id="overflight_call_dt" name="call_dt" required tabindex="6">
</div>
<div class="form-group full-width">
<label for="overflight_notes">Notes</label>
<textarea id="overflight_notes" name="notes" rows="3" placeholder="e.g., flight plan, special remarks" tabindex="7"></textarea>
</div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-info" onclick="closeOverflightModal()">
Close
</button>
<button type="submit" class="btn btn-success">
🔄 Register Overflight
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Departure Edit Modal -->
<div id="departureEditModal" class="modal">
<div class="modal-content">
@@ -1226,6 +1327,13 @@
closeBookInModal();
return;
}
// Press 'Escape' to close Overflight modal if it's open (allow even when typing in inputs)
if (e.key === 'Escape' && document.getElementById('overflightModal').style.display === 'block') {
e.preventDefault();
closeOverflightModal();
return;
}
// Press 'Escape' to close local flight edit modal if it's open (allow even when typing in inputs)
if (e.key === 'Escape' && document.getElementById('localFlightEditModal').style.display === 'block') {
@@ -1259,12 +1367,18 @@
openNewPPRModal();
}
// Press 'o' to book out local flight (LOCAL type)
if (e.key === 'o' || e.key === 'O') {
// Press 'l' to book out local flight (LOCAL type)
if (e.key === 'l' || e.key === 'L') {
e.preventDefault();
openLocalFlightModal('LOCAL');
}
// Press 'o' to open overflight modal
if (e.key === 'o' || e.key === 'O') {
e.preventDefault();
openOverflightModal();
}
// Press 'c' to book out circuits
if (e.key === 'c' || e.key === 'C') {
e.preventDefault();
@@ -1414,7 +1528,7 @@
loadPPRsTimeout = setTimeout(async () => {
// Load all tables simultaneously
await Promise.all([loadArrivals(), loadDepartures(), loadDeparted(), loadParked(), loadUpcoming()]);
await Promise.all([loadArrivals(), loadDepartures(), loadOverflights(), loadDeparted(), loadParked(), loadUpcoming()]);
loadPPRsTimeout = null;
}, 100); // Wait 100ms before executing to batch multiple calls
}
@@ -1567,6 +1681,79 @@
document.getElementById('departures-loading').style.display = 'none';
}
// Load overflights (ACTIVE status only)
async function loadOverflights() {
document.getElementById('overflights-loading').style.display = 'block';
document.getElementById('overflights-table-content').style.display = 'none';
document.getElementById('overflights-no-data').style.display = 'none';
try {
const response = await authenticatedFetch('/api/v1/overflights/?status=ACTIVE&limit=100');
if (!response.ok) {
throw new Error('Failed to fetch overflights');
}
const overflights = await response.json();
displayOverflights(overflights);
} catch (error) {
console.error('Error loading overflights:', error);
if (error.message !== 'Session expired. Please log in again.') {
showNotification('Error loading overflights', true);
}
}
document.getElementById('overflights-loading').style.display = 'none';
}
function displayOverflights(overflights) {
const tbody = document.getElementById('overflights-table-body');
document.getElementById('overflights-count').textContent = overflights.length;
if (overflights.length === 0) {
document.getElementById('overflights-no-data').style.display = 'block';
return;
}
// Sort by call_dt most recent
overflights.sort((a, b) => new Date(b.call_dt) - new Date(a.call_dt));
tbody.innerHTML = '';
for (const flight of overflights) {
const row = document.createElement('tr');
row.style.cursor = 'pointer';
row.onclick = () => {
openOverflightEditModal(flight.id);
};
const statusBadge = flight.status === 'ACTIVE' ?
'<span style="background-color: #28a745; color: white; padding: 2px 6px; border-radius: 3px; font-size: 0.8rem;">ACTIVE</span>' :
'<span style="background-color: #6c757d; color: white; padding: 2px 6px; border-radius: 3px; font-size: 0.8rem;">QSY\'D</span>';
row.innerHTML = `
<td>${flight.registration || '-'}</td>
<td style="width: 30px; text-align: center;"><span style="color: #ff6b6b; font-weight: bold;" title="Overflight">🔄</span></td>
<td>${flight.callsign || '-'}</td>
<td>${flight.type || '-'}</td>
<td>${flight.departure_airfield || '-'}</td>
<td>${flight.destination_airfield || '-'}</td>
<td>${formatTimeOnly(flight.call_dt)}</td>
<td>${flight.pob || '-'}</td>
<td>${statusBadge}</td>
<td>
<button class="btn btn-sm btn-primary" onclick="markQSY(event, ${flight.id})">QSY</button>
<button class="btn btn-sm btn-danger" onclick="cancelOverflight(event, ${flight.id})">Cancel</button>
</td>
`;
tbody.appendChild(row);
}
document.getElementById('overflights-table-content').style.display = 'block';
}
// Load departed aircraft (DEPARTED status with departed_dt today)
async function loadDeparted() {
document.getElementById('departed-loading').style.display = 'block';
@@ -3255,6 +3442,93 @@
document.getElementById('bookInModal').style.display = 'none';
}
function openOverflightModal() {
document.getElementById('overflight-form').reset();
document.getElementById('overflight-id').value = '';
document.getElementById('overflightModal').style.display = 'block';
// Clear aircraft lookup results
clearOverflightAircraftLookup();
clearOverflightDepartureAirportLookup();
clearOverflightDestinationAirportLookup();
// Set current time as call time
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const day = String(now.getDate()).padStart(2, '0');
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
document.getElementById('overflight_call_dt').value = `${year}-${month}-${day}T${hours}:${minutes}`;
// Auto-focus on registration field
setTimeout(() => {
document.getElementById('overflight_registration').focus();
}, 100);
}
function closeOverflightModal() {
document.getElementById('overflightModal').style.display = 'none';
}
function openOverflightEditModal(id) {
// Open a simple modal or dialog for editing/managing overflight
// For now, show a confirmation for QSY
showNotification(`Overflight ${id} - Use QSY button to mark frequency change`, false);
}
async function markQSY(event, overflightId) {
event.stopPropagation();
if (!accessToken) return;
try {
const response = await authenticatedFetch(`/api/v1/overflights/${overflightId}/status`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
status: 'INACTIVE'
})
});
if (!response.ok) {
throw new Error('Failed to mark QSY');
}
loadPPRs();
showNotification('Overflight marked as QSY (frequency changed)', false);
} catch (error) {
console.error('Error marking QSY:', error);
showNotification(`Error: ${error.message}`, true);
}
}
async function cancelOverflight(event, overflightId) {
event.stopPropagation();
if (!accessToken) return;
if (!confirm('Are you sure you want to cancel this overflight?')) {
return;
}
try {
const response = await authenticatedFetch(`/api/v1/overflights/${overflightId}`, {
method: 'DELETE'
});
if (!response.ok) {
throw new Error('Failed to cancel overflight');
}
loadPPRs();
showNotification('Overflight cancelled', false);
} catch (error) {
console.error('Error cancelling overflight:', error);
showNotification(`Error: ${error.message}`, true);
}
}
function populateETATimeSlots() {
const select = document.getElementById('book_in_eta_time');
const next15MinSlot = getNext10MinuteSlot();
@@ -4100,6 +4374,104 @@
}
});
// Overflight form submission
document.getElementById('overflight-form').addEventListener('submit', async function(e) {
e.preventDefault();
if (!accessToken) return;
const formData = new FormData(this);
const overflightData = {};
formData.forEach((value, key) => {
if (key === 'id') return;
if (typeof value === 'number' || (typeof value === 'string' && value.trim() !== '')) {
if (key === 'pob') {
overflightData[key] = parseInt(value);
} else if (key === 'call_dt') {
// Convert datetime-local to ISO string
if (value.trim()) {
overflightData[key] = new Date(value).toISOString();
}
} else if (value.trim) {
overflightData[key] = value.trim();
} else {
overflightData[key] = value;
}
}
});
console.log('Submitting overflight data:', overflightData);
try {
const response = await fetch('/api/v1/overflights/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${accessToken}`
},
body: JSON.stringify(overflightData)
});
if (!response.ok) {
let errorMessage = 'Failed to register overflight';
try {
const errorData = await response.json();
if (errorData.detail) {
errorMessage = typeof errorData.detail === 'string' ? errorData.detail : JSON.stringify(errorData.detail);
} else if (errorData.errors) {
errorMessage = errorData.errors.map(e => e.msg).join(', ');
}
} catch (e) {
const text = await response.text();
console.error('Server response:', text);
errorMessage = `Server error (${response.status})`;
}
throw new Error(errorMessage);
}
const result = await response.json();
closeOverflightModal();
loadPPRs();
showNotification(`Overflight ${result.registration} registered successfully!`);
} catch (error) {
console.error('Error registering overflight:', error);
showNotification(`Error: ${error.message}`, true);
}
});
// Overflight lookup handlers - use lookupManager
function handleOverflightAircraftLookup(input) {
const lookup = lookupManager.lookups['overflight-aircraft'];
if (lookup) lookup.handle(input);
}
function clearOverflightAircraftLookup() {
const lookup = lookupManager.lookups['overflight-aircraft'];
if (lookup) lookup.clear();
}
function handleOverflightDepartureAirportLookup(input) {
const lookup = lookupManager.lookups['overflight-departure'];
if (lookup) lookup.handle(input);
}
function clearOverflightDepartureAirportLookup() {
const lookup = lookupManager.lookups['overflight-departure'];
if (lookup) lookup.clear();
}
function handleOverflightDestinationAirportLookup(input) {
const lookup = lookupManager.lookups['overflight-destination'];
if (lookup) lookup.handle(input);
}
function clearOverflightDestinationAirportLookup() {
const lookup = lookupManager.lookups['overflight-destination'];
if (lookup) lookup.clear();
}
// Add hover listeners to all notes tooltips
function setupTooltips() {
document.querySelectorAll('.notes-tooltip').forEach(tooltip => {