Help text

This commit is contained in:
2025-12-16 07:15:48 -05:00
parent d2e7d3c3dd
commit 98d0e3cfd7
2 changed files with 95 additions and 4 deletions

View File

@@ -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;

View File

@@ -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()">&times;</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();