928 lines
48 KiB
HTML
928 lines
48 KiB
HTML
<!-- Login Modal -->
|
||
<div id="loginModal" class="modal" style="display: none;">
|
||
<div class="modal-content" style="max-width: 400px;">
|
||
<div class="modal-header">
|
||
<h2>PPR Admin Login</h2>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="login-form">
|
||
<div class="form-group">
|
||
<label for="login-username">Username:</label>
|
||
<input type="text" id="login-username" name="username" required autofocus>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="login-password">Password:</label>
|
||
<input type="password" id="login-password" name="password" required>
|
||
</div>
|
||
<div id="login-error" style="color: #dc3545; margin: 1rem 0; display: none;"></div>
|
||
<div class="form-actions" style="border-top: none; padding-top: 0;">
|
||
<button type="submit" class="btn btn-success" id="login-btn">
|
||
🔐 Login
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PPR Detail/Edit Modal -->
|
||
<div id="pprModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="modal-title">PPR Details</h2>
|
||
<button class="close" onclick="closePPRModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="quick-actions">
|
||
<button id="btn-landed" class="btn btn-warning btn-sm" onclick="showTimestampModal('LANDED')">
|
||
🛬 Land
|
||
</button>
|
||
<button id="btn-departed" class="btn btn-primary btn-sm" onclick="showTimestampModal('DEPARTED')">
|
||
🛫 Depart
|
||
</button>
|
||
</div>
|
||
|
||
<form id="ppr-form">
|
||
<input type="hidden" id="ppr-id" name="id">
|
||
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label for="ac_reg">Aircraft Registration *</label>
|
||
<input type="text" id="ac_reg" name="ac_reg" required oninput="handleAircraftLookup(this.value)">
|
||
<div id="aircraft-lookup-results"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="ac_type">Aircraft Type *</label>
|
||
<input type="text" id="ac_type" name="ac_type" required tabindex="-1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="ac_call">Callsign</label>
|
||
<input type="text" id="ac_call" name="ac_call" placeholder="If different from registration" tabindex="-1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="captain">Captain *</label>
|
||
<input type="text" id="captain" name="captain" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="in_from">Arriving From *</label>
|
||
<input type="text" id="in_from" name="in_from" required placeholder="ICAO Code or Airport Name" oninput="handleArrivalAirportLookup(this.value)">
|
||
<div id="arrival-airport-lookup-results"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="eta">ETA (UTC) *</label>
|
||
<div style="display: flex; gap: 0.5rem;">
|
||
<input type="date" id="eta-date" name="eta-date" required style="flex: 1;">
|
||
<select id="eta-time" name="eta-time" required style="flex: 1;">
|
||
<option value="">Select Time</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="pob_in">POB Inbound *</label>
|
||
<input type="number" id="pob_in" name="pob_in" required min="1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="fuel">Fuel Required</label>
|
||
<select id="fuel" name="fuel" tabindex="-1">
|
||
<option value="">None</option>
|
||
<option value="100LL">100LL</option>
|
||
<option value="JET A1">JET A1</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="out_to">Departing To</label>
|
||
<input type="text" id="out_to" name="out_to" placeholder="ICAO Code or Airport Name" oninput="handleDepartureAirportLookup(this.value)" tabindex="-1">
|
||
<div id="departure-airport-lookup-results"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="etd">ETD (UTC)</label>
|
||
<div style="display: flex; gap: 0.5rem;">
|
||
<input type="date" id="etd-date" name="etd-date" tabindex="-1" style="flex: 1;">
|
||
<select id="etd-time" name="etd-time" tabindex="-1" style="flex: 1;">
|
||
<option value="">Select Time</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="pob_out">POB Outbound</label>
|
||
<input type="number" id="pob_out" name="pob_out" min="1" tabindex="-1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="email">Email</label>
|
||
<input type="email" id="email" name="email" tabindex="-1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="phone">Phone</label>
|
||
<input type="tel" id="phone" name="phone" tabindex="-1">
|
||
</div>
|
||
<div class="form-group full-width">
|
||
<label for="notes">Notes</label>
|
||
<textarea id="notes" name="notes" rows="3" tabindex="-1"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-info" onclick="closePPRModal()">
|
||
Close
|
||
</button>
|
||
<button type="button" class="btn btn-danger" id="btn-cancel" onclick="updateStatus('CANCELED')">
|
||
❌ Cancel PPR
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
💾 Save Changes
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="journal-section" id="journal-section">
|
||
<h3>Activity Journal</h3>
|
||
<div id="journal-entries" class="journal-entries">
|
||
Loading journal...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Local Flight (Book Out) Modal -->
|
||
<div id="localFlightModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="local-flight-modal-title">Book Out</h2>
|
||
<button class="close" onclick="closeModal('localFlightModal')">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="local-flight-form">
|
||
<input type="hidden" id="local-flight-id" name="id">
|
||
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label for="local_registration">Aircraft Registration *</label>
|
||
<input type="text" id="local_registration" name="registration" required oninput="handleLocalAircraftLookup(this.value)" tabindex="1">
|
||
<div id="local-aircraft-lookup-results"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="local_type">Aircraft Type</label>
|
||
<input type="text" id="local_type" name="type" tabindex="4" placeholder="e.g., C172, PA34, AA5">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="local_callsign">Callsign (optional)</label>
|
||
<input type="text" id="local_callsign" name="callsign" placeholder="If different from registration" tabindex="6">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="local_pob">Persons on Board *</label>
|
||
<input type="number" id="local_pob" name="pob" required min="1" tabindex="2">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="local_flight_type">Flight Type *</label>
|
||
<select id="local_flight_type" name="flight_type" required tabindex="5" onchange="handleFlightTypeChange(this.value)">
|
||
<option value="LOCAL">Local Flight</option>
|
||
<option value="CIRCUITS">Circuits</option>
|
||
<option value="DEPARTURE">Departure to Other Airport</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="local_duration">Duration (minutes)</label>
|
||
<input type="number" id="local_duration" name="duration" min="5" max="480" value="45" placeholder="Duration in minutes" tabindex="7">
|
||
</div>
|
||
<div class="form-group" id="departure-destination-group" style="display: none;">
|
||
<label for="local_out_to" id="departure-destination-label">Destination Airport</label>
|
||
<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">
|
||
<label for="local_etd_time">ETD (Estimated Time of Departure) *</label>
|
||
<select id="local_etd_time" name="etd_time" required>
|
||
<option value="">Select Time</option>
|
||
</select>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-info" onclick="closeModal('localFlightModal')">
|
||
Close
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
🛫 Book Out
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Local Flight Edit Modal -->
|
||
<div id="localFlightEditModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="local-flight-edit-title">Local Flight Details</h2>
|
||
<button class="close" onclick="closeLocalFlightEditModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="quick-actions">
|
||
<button id="local-btn-departed" class="btn btn-primary btn-sm" onclick="updateLocalFlightStatus('DEPARTED')" style="display: none;">
|
||
🛫 Mark Departed
|
||
</button>
|
||
<button id="local-btn-landed" class="btn btn-warning btn-sm" onclick="updateLocalFlightStatus('LANDED')" style="display: none;">
|
||
🛬 Land
|
||
</button>
|
||
<button id="local-btn-cancel" class="btn btn-danger btn-sm" onclick="updateLocalFlightStatus('CANCELLED')" style="display: none;">
|
||
❌ Cancel Flight
|
||
</button>
|
||
</div>
|
||
|
||
<form id="local-flight-edit-form">
|
||
<input type="hidden" id="local-edit-flight-id" name="id">
|
||
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label for="local_edit_registration">Aircraft Registration</label>
|
||
<input type="text" id="local_edit_registration" name="registration">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="local_edit_type">Aircraft Type</label>
|
||
<input type="text" id="local_edit_type" name="type">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="local_edit_callsign">Callsign</label>
|
||
<input type="text" id="local_edit_callsign" name="callsign">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="local_edit_pob">POB</label>
|
||
<input type="number" id="local_edit_pob" name="pob" min="1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="local_edit_flight_type">Flight Type</label>
|
||
<select id="local_edit_flight_type" name="flight_type">
|
||
<option value="LOCAL">Local Flight</option>
|
||
<option value="CIRCUITS">Circuits</option>
|
||
<option value="DEPARTURE">Departure</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="local_edit_duration">Duration (minutes)</label>
|
||
<input type="number" id="local_edit_duration" name="duration" min="5" max="480">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="local_edit_takeoff_dt">Takeoff Time</label>
|
||
<div style="display: flex; gap: 0.5rem;">
|
||
<input type="date" id="local_edit_departure_date" name="departure_date" style="flex: 1;">
|
||
<input type="time" id="local_edit_departure_time" name="departure_time" style="flex: 1;">
|
||
</div>
|
||
</div>
|
||
<div class="form-group" id="local-edit-landing-group">
|
||
<label for="local_edit_landed_dt">Landing Time</label>
|
||
<div style="display: flex; gap: 0.5rem;">
|
||
<input type="date" id="local_edit_landed_date" name="landed_date" style="flex: 1;">
|
||
<input type="time" id="local_edit_landed_time" name="landed_time" style="flex: 1;">
|
||
</div>
|
||
</div>
|
||
<div class="form-group full-width">
|
||
<label for="local_edit_notes">Notes</label>
|
||
<textarea id="local_edit_notes" name="notes" rows="3"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-info" onclick="closeLocalFlightEditModal()">
|
||
Close
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
💾 Save Changes
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<!-- 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;">
|
||
<p style="color: #666; font-style: italic;">Loading circuits...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Journal Section -->
|
||
<div id="local-flight-journal-section" style="margin-top: 2rem; border-top: 1px solid #ddd; padding-top: 1rem;">
|
||
<h3>📋 Activity Journal</h3>
|
||
<div id="local-flight-journal-entries" class="journal-entries">
|
||
Loading journal...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Book In Modal -->
|
||
<div id="bookInModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Book In</h2>
|
||
<button class="close" onclick="closeModal('bookInModal')">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="book-in-form">
|
||
<input type="hidden" id="book-in-id" name="id">
|
||
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label for="book_in_registration">Aircraft Registration *</label>
|
||
<input type="text" id="book_in_registration" name="registration" required oninput="handleBookInAircraftLookup(this.value)" tabindex="1">
|
||
<div id="book-in-aircraft-lookup-results"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="book_in_type">Aircraft Type</label>
|
||
<input type="text" id="book_in_type" name="type" tabindex="4" placeholder="e.g., C172, PA34, AA5">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="book_in_callsign">Callsign (optional)</label>
|
||
<input type="text" id="book_in_callsign" name="callsign" placeholder="If different from registration" tabindex="5">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="book_in_pob">Persons on Board *</label>
|
||
<input type="number" id="book_in_pob" name="pob" required min="1" tabindex="2">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="book_in_from">Coming From (Airport) *</label>
|
||
<input type="text" id="book_in_from" name="in_from" placeholder="ICAO Code or Airport Name" required oninput="handleBookInArrivalAirportLookup(this.value)" tabindex="3">
|
||
<div id="book-in-arrival-airport-lookup-results"></div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="book_in_eta_time">ETA (Estimated Time of Arrival) *</label>
|
||
<select id="book_in_eta_time" name="eta_time" required>
|
||
<option value="">Select Time</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group full-width">
|
||
<label for="book_in_notes">Notes</label>
|
||
<textarea id="book_in_notes" name="notes" rows="3" placeholder="e.g., any special requirements"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-info" onclick="closeModal('bookInModal')">
|
||
Close
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
🛬 Book In
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</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="closeModal('overflightModal')">×</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="closeModal('overflightModal')">
|
||
Close
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
🔄 Register Overflight
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Overflight Edit Modal -->
|
||
<div id="overflightEditModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="overflight-edit-title">Overflight Details</h2>
|
||
<button class="close" onclick="closeModal('overflightEditModal')">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="quick-actions">
|
||
<button id="overflight-btn-qsy" class="btn btn-primary btn-sm" onclick="showOverflightQSYModal()" style="display: none;">
|
||
📡 Mark QSY
|
||
</button>
|
||
<button id="overflight-btn-cancel" class="btn btn-danger btn-sm" onclick="confirmCancelOverflight()" style="display: none;">
|
||
❌ Cancel
|
||
</button>
|
||
</div>
|
||
|
||
<form id="overflight-edit-form">
|
||
<input type="hidden" id="overflight-edit-id" name="id">
|
||
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label for="overflight_edit_registration">Callsign/Registration</label>
|
||
<input type="text" id="overflight_edit_registration" name="registration" readonly>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="overflight_edit_type">Aircraft Type</label>
|
||
<input type="text" id="overflight_edit_type" name="type">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="overflight_edit_pob">Persons on Board</label>
|
||
<input type="number" id="overflight_edit_pob" name="pob" min="1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="overflight_edit_departure_airfield">Departure Airfield</label>
|
||
<input type="text" id="overflight_edit_departure_airfield" name="departure_airfield">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="overflight_edit_destination_airfield">Destination Airfield</label>
|
||
<input type="text" id="overflight_edit_destination_airfield" name="destination_airfield">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="overflight_edit_call_dt">Time of Call</label>
|
||
<input type="datetime-local" id="overflight_edit_call_dt" name="call_dt">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="overflight_edit_status">Status</label>
|
||
<input type="text" id="overflight_edit_status" name="status" readonly>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="overflight_edit_qsy_dt">QSY Time</label>
|
||
<input type="datetime-local" id="overflight_edit_qsy_dt" name="qsy_dt">
|
||
</div>
|
||
<div class="form-group full-width">
|
||
<label for="overflight_edit_notes">Notes</label>
|
||
<textarea id="overflight_edit_notes" name="notes" rows="3"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-info" onclick="closeModal('overflightEditModal')">
|
||
Close
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Departure Edit Modal -->
|
||
<div id="departureEditModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="departure-edit-title">Departure Details</h2>
|
||
<button class="close" onclick="closeDepartureEditModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="quick-actions">
|
||
<button id="departure-btn-departed" class="btn btn-primary btn-sm" onclick="updateDepartureStatus('DEPARTED')" style="display: none;">
|
||
🛫 Mark Departed
|
||
</button>
|
||
<button id="departure-btn-cancel" class="btn btn-danger btn-sm" onclick="updateDepartureStatus('CANCELLED')" style="display: none;">
|
||
❌ Cancel Departure
|
||
</button>
|
||
</div>
|
||
|
||
<form id="departure-edit-form">
|
||
<input type="hidden" id="departure-edit-id" name="id">
|
||
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label for="departure_edit_registration">Aircraft Registration</label>
|
||
<input type="text" id="departure_edit_registration" name="registration">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="departure_edit_type">Aircraft Type</label>
|
||
<input type="text" id="departure_edit_type" name="type">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="departure_edit_callsign">Callsign</label>
|
||
<input type="text" id="departure_edit_callsign" name="callsign">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="departure_edit_pob">Persons on Board</label>
|
||
<input type="number" id="departure_edit_pob" name="pob" min="1">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="departure_edit_out_to">Destination</label>
|
||
<input type="text" id="departure_edit_out_to" name="out_to">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="departure_edit_etd">ETD (UTC)</label>
|
||
<div style="display: flex; gap: 0.5rem;">
|
||
<input type="date" id="departure_edit_etd_date" name="etd_date" style="flex: 1;">
|
||
<input type="time" id="departure_edit_etd_time" name="etd_time" style="flex: 1;">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Takeoff Time (UTC)</label>
|
||
<div style="display: flex; gap: 0.5rem;">
|
||
<input type="date" id="departure_edit_takeoff_date" name="takeoff_date" style="flex: 1;">
|
||
<input type="time" id="departure_edit_takeoff_time" name="takeoff_time" style="flex: 1;">
|
||
</div>
|
||
</div>
|
||
<div class="form-group full-width">
|
||
<label for="departure_edit_notes">Notes</label>
|
||
<textarea id="departure_edit_notes" name="notes" rows="3"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-info" onclick="closeDepartureEditModal()">
|
||
Close
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<!-- Journal Section -->
|
||
<div id="departure-journal-section" style="margin-top: 2rem; border-top: 1px solid #ddd; padding-top: 1rem;">
|
||
<h3>📋 Activity Journal</h3>
|
||
<div id="departure-journal-entries" class="journal-entries">
|
||
Loading journal...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Arrival Edit Modal -->
|
||
<div id="arrivalEditModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2 id="arrival-edit-title">Arrival Details</h2>
|
||
<button class="close" onclick="closeArrivalEditModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="quick-actions">
|
||
<button id="arrival-btn-landed" class="btn btn-primary btn-sm" onclick="updateArrivalStatus('LANDED')" style="display: none;">
|
||
🛬 Mark Landed
|
||
</button>
|
||
<button id="arrival-btn-cancel" class="btn btn-danger btn-sm" onclick="updateArrivalStatus('CANCELLED')" style="display: none;">
|
||
❌ Cancel Arrival
|
||
</button>
|
||
</div>
|
||
|
||
<form id="arrival-edit-form">
|
||
<input type="hidden" id="arrival-edit-id" name="id">
|
||
|
||
<div class="form-grid">
|
||
<div class="form-group">
|
||
<label for="arrival_edit_registration">Aircraft Registration</label>
|
||
<input type="text" id="arrival_edit_registration" name="registration">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="arrival_edit_type">Aircraft Type</label>
|
||
<input type="text" id="arrival_edit_type" name="type">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="arrival_edit_callsign">Callsign</label>
|
||
<input type="text" id="arrival_edit_callsign" name="callsign">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="arrival_edit_in_from">Origin Airport</label>
|
||
<input type="text" id="arrival_edit_in_from" name="in_from">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="arrival_edit_pob">POB (Persons on Board)</label>
|
||
<input type="number" id="arrival_edit_pob" name="pob" min="1">
|
||
</div>
|
||
<div class="form-group full-width">
|
||
<label for="arrival_edit_notes">Notes</label>
|
||
<textarea id="arrival_edit_notes" name="notes" rows="3"></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-info" onclick="closeArrivalEditModal()">
|
||
Close
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
<!-- Journal Section -->
|
||
<div id="arrival-journal-section" style="margin-top: 2rem; border-top: 1px solid #ddd; padding-top: 1rem;">
|
||
<h3>📋 Activity Journal</h3>
|
||
<div id="arrival-journal-entries" class="journal-entries">
|
||
Loading journal...
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Table Help Modal -->
|
||
<div id="tableHelpModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>Table Information</h2>
|
||
<button class="close" onclick="closeModal('tableHelpModal')">×</button>
|
||
</div>
|
||
<div class="modal-body" id="tableHelpContent">
|
||
<!-- Content will be populated by JavaScript -->
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button class="btn btn-info" onclick="closeModal('tableHelpModal')">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- User Management Modal -->
|
||
<div id="userManagementModal" class="modal">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h2>User Management</h2>
|
||
<button class="close" onclick="closeModal('userManagementModal')">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="quick-actions" style="margin-bottom: 1rem;">
|
||
<button class="btn btn-success" onclick="openUserCreateModal()">
|
||
➕ Create New User
|
||
</button>
|
||
</div>
|
||
|
||
<div id="users-loading" class="loading">
|
||
<div class="spinner"></div>
|
||
Loading users...
|
||
</div>
|
||
|
||
<div id="users-table-content" style="display: none;">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Username</th>
|
||
<th>Role</th>
|
||
<th>Created</th>
|
||
<th>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="users-table-body">
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div id="users-no-data" class="no-data" style="display: none;">
|
||
<h3>No users found</h3>
|
||
<p>No users are configured in the system.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- User Create/Edit Modal -->
|
||
<div id="userModal" class="modal">
|
||
<div class="modal-content" style="max-width: 500px;">
|
||
<div class="modal-header">
|
||
<h2 id="user-modal-title">Create User</h2>
|
||
<button class="close" onclick="closeUserModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="user-form">
|
||
<input type="hidden" id="user-id" name="id">
|
||
|
||
<div class="form-grid">
|
||
<div class="form-group full-width">
|
||
<label for="user-username">Username *</label>
|
||
<input type="text" id="user-username" name="username" required>
|
||
</div>
|
||
<div class="form-group full-width">
|
||
<label for="user-password">Password *</label>
|
||
<input type="password" id="user-password" name="password" required>
|
||
<small style="color: #666; font-size: 0.8rem;">Leave blank when editing to keep current password</small>
|
||
</div>
|
||
<div class="form-group full-width">
|
||
<label for="user-role">Role *</label>
|
||
<select id="user-role" name="role" required>
|
||
<option value="READ_ONLY">Read Only - View only access</option>
|
||
<option value="OPERATOR">Operator - PPR management access</option>
|
||
<option value="ADMINISTRATOR">Administrator - Full access</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-info" onclick="closeUserModal()">
|
||
Close
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
💾 Save User
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Change User Password Modal -->
|
||
<div id="changePasswordModal" class="modal">
|
||
<div class="modal-content" style="max-width: 500px;">
|
||
<div class="modal-header">
|
||
<h2 id="change-password-title">Change User Password</h2>
|
||
<button class="close" onclick="closeChangePasswordModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="change-password-form">
|
||
<div class="form-group full-width">
|
||
<label for="change-password-username" style="font-weight: bold;">Username</label>
|
||
<input type="text" id="change-password-username" name="username" readonly style="background-color: #f5f5f5; cursor: not-allowed;">
|
||
</div>
|
||
<div class="form-group full-width">
|
||
<label for="change-password-new">New Password *</label>
|
||
<input type="password" id="change-password-new" name="new_password" required>
|
||
</div>
|
||
<div class="form-group full-width">
|
||
<label for="change-password-confirm">Confirm New Password *</label>
|
||
<input type="password" id="change-password-confirm" name="confirm_password" required>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-info" onclick="closeChangePasswordModal()">
|
||
Close
|
||
</button>
|
||
<button type="submit" class="btn btn-warning">
|
||
🔐 Change Password
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Success Notification -->
|
||
<div id="notification" class="notification"></div>
|
||
|
||
<!-- User Aircraft Management Modal -->
|
||
<div id="userAircraftModal" class="modal">
|
||
<div class="modal-content" style="max-width: 1000px;">
|
||
<div class="modal-header">
|
||
<h2>User Aircraft Management</h2>
|
||
<button class="close" onclick="closeModal('userAircraftModal')">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="quick-actions" style="margin-bottom: 1rem;">
|
||
<div class="form-group" style="display: inline-block; margin-right: 1rem;">
|
||
<label for="user-aircraft-search" style="display: inline; margin-right: 0.5rem;">Search:</label>
|
||
<input type="text" id="user-aircraft-search" placeholder="Filter by registration or type..." style="width: 250px;">
|
||
</div>
|
||
<button class="btn btn-info" onclick="loadUserAircraft()">
|
||
🔄 Refresh
|
||
</button>
|
||
</div>
|
||
|
||
<div id="user-aircraft-loading" class="loading">
|
||
<div class="spinner"></div>
|
||
Loading user aircraft...
|
||
</div>
|
||
|
||
<div id="user-aircraft-table-content" style="display: none;">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Registration</th>
|
||
<th>Type</th>
|
||
<th>Added By</th>
|
||
<th>Created</th>
|
||
<th>Actions</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="user-aircraft-table-body">
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div id="user-aircraft-no-data" class="no-data" style="display: none;">
|
||
<h3>No user aircraft found</h3>
|
||
<p>No custom aircraft types have been saved yet.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- User Aircraft Edit Modal -->
|
||
<div id="userAircraftEditModal" class="modal">
|
||
<div class="modal-content" style="max-width: 500px;">
|
||
<div class="modal-header">
|
||
<h2 id="user-aircraft-edit-title">Edit User Aircraft</h2>
|
||
<button class="close" onclick="closeModal('userAircraftEditModal')">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="user-aircraft-edit-form">
|
||
<div class="form-group full-width">
|
||
<label for="edit-aircraft-registration">Registration *</label>
|
||
<input type="text" id="edit-aircraft-registration" name="registration" required readonly style="background-color: #f5f5f5;">
|
||
</div>
|
||
<div class="form-group full-width">
|
||
<label for="edit-aircraft-type">Aircraft Type *</label>
|
||
<input type="text" id="edit-aircraft-type" name="type_code" required>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-info" onclick="closeModal('userAircraftEditModal')">
|
||
Cancel
|
||
</button>
|
||
<button type="submit" class="btn btn-warning">
|
||
💾 Save Changes
|
||
</button>
|
||
<button type="button" class="btn btn-danger" onclick="deleteUserAircraft()">
|
||
🗑️ Delete
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Timestamp Modal for Landing/Departure -->
|
||
<div id="timestampModal" class="modal">
|
||
<div class="modal-content" style="max-width: 400px;">
|
||
<div class="modal-header">
|
||
<h2 id="timestamp-modal-title">Confirm Landing Time</h2>
|
||
<button class="close" onclick="closeTimestampModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="timestamp-form">
|
||
<div class="form-group">
|
||
<label for="event-timestamp">Event Time (UTC) *</label>
|
||
<input type="datetime-local" id="event-timestamp" name="timestamp" required>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-info" onclick="closeTimestampModal()">
|
||
Close
|
||
</button>
|
||
<button type="submit" class="btn btn-success" id="timestamp-submit-btn">
|
||
Confirm
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Circuit Modal for recording touch-and-go events -->
|
||
<div id="circuitModal" class="modal">
|
||
<div class="modal-content" style="max-width: 400px;">
|
||
<div class="modal-header">
|
||
<h2>Record Circuit (Touch & Go)</h2>
|
||
<button class="close" onclick="closeCircuitModal()">×</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="circuit-form">
|
||
<div class="form-group">
|
||
<label for="circuit-timestamp">Circuit Time (UTC) *</label>
|
||
<input type="datetime-local" id="circuit-timestamp" name="timestamp" required>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="button" class="btn btn-info" onclick="closeCircuitModal()">
|
||
Close
|
||
</button>
|
||
<button type="submit" class="btn btn-success">
|
||
Record Circuit
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|