Overflights implementation

web/admin.css

@@ -96,6 +96,15 @@ body {
     background-color: #2980b9;
 }
 
+.btn-secondary {
+    background-color: #95a5a6;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background-color: #7f8c8d;
+}
+
 .btn-danger {
     background-color: #e74c3c;
     color: white;

web/admin.html

@@ -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 => {

web/lookups.js

@@ -193,6 +193,8 @@ function createLookup(fieldId, resultsId, selectCallback, options = {}) {
                         typeFieldId = 'local_type';
                     } else if (fieldId === 'book_in_registration') {
                         typeFieldId = 'book_in_type';
+                    } else if (fieldId === 'overflight_registration') {
+                        typeFieldId = 'overflight_type';
                     }
                     
                     if (typeFieldId) {
@@ -360,6 +362,30 @@ function initializeLookups() {
         { isAirport: true, minLength: 2 }
     );
     lookupManager.register('book-in-arrival-airport', bookInArrivalAirportLookup);
+
+    const overflightAircraftLookup = createLookup(
+        'overflight_registration',
+        'overflight-aircraft-lookup-results',
+        null,
+        { isAircraft: true, minLength: 4, debounceMs: 300 }
+    );
+    lookupManager.register('overflight-aircraft', overflightAircraftLookup);
+
+    const overflightDepartureLookup = createLookup(
+        'overflight_departure_airfield',
+        'overflight-departure-airport-lookup-results',
+        null,
+        { isAirport: true, minLength: 2 }
+    );
+    lookupManager.register('overflight-departure', overflightDepartureLookup);
+
+    const overflightDestinationLookup = createLookup(
+        'overflight_destination_airfield',
+        'overflight-destination-airport-lookup-results',
+        null,
+        { isAirport: true, minLength: 2 }
+    );
+    lookupManager.register('overflight-destination', overflightDestinationLookup);
     
     // Attach keyboard handlers to airport input fields
     setTimeout(() => {
@@ -367,6 +393,8 @@ function initializeLookups() {
         if (departureAirportLookup.attachKeyboardHandler) departureAirportLookup.attachKeyboardHandler();
         if (localOutToLookup.attachKeyboardHandler) localOutToLookup.attachKeyboardHandler();
         if (bookInArrivalAirportLookup.attachKeyboardHandler) bookInArrivalAirportLookup.attachKeyboardHandler();
+        if (overflightDepartureLookup.attachKeyboardHandler) overflightDepartureLookup.attachKeyboardHandler();
+        if (overflightDestinationLookup.attachKeyboardHandler) overflightDestinationLookup.attachKeyboardHandler();
     }, 100);
 }