local-flights #5
@@ -147,6 +147,18 @@ body {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
font-size: 1.2rem;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.info-icon:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.table-header-collapsible {
|
||||
background: #34495e;
|
||||
color: white;
|
||||
@@ -364,6 +376,16 @@ tbody tr:hover {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 1rem;
|
||||
text-align: right;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.modal-footer .btn {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
@@ -40,7 +40,10 @@
|
||||
<!-- Arrivals Table -->
|
||||
<div class="ppr-table">
|
||||
<div class="table-header">
|
||||
🛬 Today's Pending Arrivals - <span id="arrivals-count">0</span>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span>🛬 Today's Pending Arrivals - <span id="arrivals-count">0</span></span>
|
||||
<span class="info-icon" onclick="showTableHelp('arrivals')" title="What is this?">ℹ️</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="arrivals-loading" class="loading">
|
||||
@@ -74,7 +77,10 @@
|
||||
<!-- Departures Table -->
|
||||
<div class="ppr-table" style="margin-top: 2rem;">
|
||||
<div class="table-header">
|
||||
🛫 Today's Pending Departures - <span id="departures-count">0</span>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span>🛫 Today's Pending Departures - <span id="departures-count">0</span></span>
|
||||
<span class="info-icon" onclick="showTableHelp('departures')" title="What is this?">ℹ️</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="departures-loading" class="loading">
|
||||
@@ -112,7 +118,10 @@
|
||||
<!-- Departed Today -->
|
||||
<div class="ppr-table">
|
||||
<div class="table-header" style="padding: 0.3rem 0.5rem; font-size: 0.85rem;">
|
||||
✈️ Departed Today - <span id="departed-count">0</span>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span>✈️ Departed Today - <span id="departed-count">0</span></span>
|
||||
<span class="info-icon" onclick="showTableHelp('departed')" title="What is this?" style="font-size: 1.1rem; cursor: pointer;">ℹ️</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="departed-loading" class="loading" style="display: none;">
|
||||
@@ -143,7 +152,10 @@
|
||||
<!-- Parked Visitors -->
|
||||
<div class="ppr-table">
|
||||
<div class="table-header" style="padding: 0.3rem 0.5rem; font-size: 0.85rem;">
|
||||
🅿️ Parked Visitors - <span id="parked-count">0</span>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span>🅿️ Parked Visitors - <span id="parked-count">0</span></span>
|
||||
<span class="info-icon" onclick="showTableHelp('parked')" title="What is this?" style="font-size: 1.1rem; cursor: pointer;">ℹ️</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="parked-loading" class="loading" style="display: none;">
|
||||
@@ -553,6 +565,22 @@
|
||||
</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="closeTableHelp()">×</button>
|
||||
</div>
|
||||
<div class="modal-body" id="tableHelpContent">
|
||||
<!-- Content will be populated by JavaScript -->
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" onclick="closeTableHelp()">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- User Management Modal -->
|
||||
<div id="userManagementModal" class="modal">
|
||||
<div class="modal-content">
|
||||
@@ -2701,6 +2729,7 @@
|
||||
const timestampModal = document.getElementById('timestampModal');
|
||||
const userManagementModal = document.getElementById('userManagementModal');
|
||||
const userModal = document.getElementById('userModal');
|
||||
const tableHelpModal = document.getElementById('tableHelpModal');
|
||||
|
||||
if (event.target === pprModal) {
|
||||
closePPRModal();
|
||||
@@ -2714,6 +2743,9 @@
|
||||
if (event.target === userModal) {
|
||||
closeUserModal();
|
||||
}
|
||||
if (event.target === tableHelpModal) {
|
||||
closeTableHelp();
|
||||
}
|
||||
}
|
||||
|
||||
function clearArrivalAirportLookup() {
|
||||
@@ -3057,6 +3089,43 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Table help modal functions
|
||||
const tableHelpTexts = {
|
||||
arrivals: {
|
||||
title: "Today's Pending Arrivals",
|
||||
text: "Displays aircraft that are expected to arrive at Swansea today. These are flights that have filed PPRs or have been booked in as arriving. Aircraft in this list are actively planning to land today."
|
||||
},
|
||||
departures: {
|
||||
title: "Today's Pending Departures",
|
||||
text: "Displays aircraft that are ready to depart from Swansea today. This includes flights with approved PPRs awaiting departure, local flights that have been booked out, and departures to other airfields. These aircraft will depart today."
|
||||
},
|
||||
departed: {
|
||||
title: "Departed Today",
|
||||
text: "Displays the flights which have departed today to other airfields, either by way of a PPR or by booking out."
|
||||
},
|
||||
parked: {
|
||||
title: "Parked Visitors",
|
||||
text: "Displays visiting aircraft that are currently parked at Swansea airport and are NOT expected to depart today. The ETD column shows the day the aircraft intends to depart."
|
||||
}
|
||||
};
|
||||
|
||||
function showTableHelp(tableType) {
|
||||
const helpData = tableHelpTexts[tableType];
|
||||
if (!helpData) return;
|
||||
|
||||
const modal = document.getElementById('tableHelpModal');
|
||||
const content = document.getElementById('tableHelpContent');
|
||||
const header = modal.querySelector('.modal-header h2');
|
||||
|
||||
header.textContent = helpData.title;
|
||||
content.innerHTML = `<p>${helpData.text}</p>`;
|
||||
modal.style.display = 'block';
|
||||
}
|
||||
|
||||
function closeTableHelp() {
|
||||
document.getElementById('tableHelpModal').style.display = 'none';
|
||||
}
|
||||
|
||||
// Local flight edit form submission
|
||||
document.getElementById('local-flight-edit-form').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
Reference in New Issue
Block a user