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

New date picker

Browse Source
This commit is contained in:
James Pattinson
2025-10-25 13:57:19 +00:00
parent d5f05941c9
commit 6e760a3e96
3 changed files with 285 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
web/ppr.html
View File

@@ -289,7 +289,12 @@
</div>
<div class="form-group">
<label for="eta" class="required">Estimated Time of Arrival (Local Time)</label>
<input type="datetime-local" id="eta" name="eta" required>
<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" class="required">Persons on Board (Arrival)</label>
@@ -311,7 +316,12 @@
</div>
<div class="form-group">
<label for="etd">Estimated Time of Departure (Local Time)</label>
<input type="datetime-local" id="etd" name="etd">
<div style="display: flex; gap: 0.5rem;">
<input type="date" id="etd-date" name="etd-date" style="flex: 1;">
<select id="etd-time" name="etd-time" style="flex: 1;">
<option value="">Select Time</option>
</select>
</div>
</div>
<div class="form-group">
<label for="pob_out">Persons on Board (Departure)</label>
@@ -354,6 +364,28 @@
<div id="notification" class="notification"></div>
<script>
// Initialize time dropdowns
function initializeTimeDropdowns() {
const timeSelects = ['eta-time', 'etd-time'];
timeSelects.forEach(selectId => {
const select = document.getElementById(selectId);
// Clear existing options except the first one
select.innerHTML = '<option value="">Select Time</option>';
// Add time options in 15-minute intervals
for (let hour = 0; hour < 24; hour++) {
for (let minute = 0; minute < 60; minute += 15) {
const timeString = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
const option = document.createElement('option');
option.value = timeString;
option.textContent = timeString;
select.appendChild(option);
}
}
});
}
// Notification system
function showNotification(message, isError = false) {
const notification = document.getElementById('notification');
@@ -455,6 +487,7 @@
async function handleArrivalAirportLookup(query) {
clearTimeout(arrivalAirportLookupTimeout);
const resultsDiv = document.getElementById('arrival-airport-lookup-results');
const inputField = document.getElementById('in_from');
if (!query || query.length < 2) {
resultsDiv.innerHTML = '';
@@ -469,12 +502,31 @@
if (response.ok) {
const data = await response.json();
if (data && data.length > 0) {
const airport = data[0];
resultsDiv.innerHTML = `
<div class="lookup-match">
${airport.icao}/${airport.iata || ''} - ${airport.name}, ${airport.country}
</div>
`;
if (data.length === 1) {
// Single match - auto-populate the input field with ICAO code
const airport = data[0];
inputField.value = airport.icao;
resultsDiv.innerHTML = `
<div class="lookup-match">
${airport.icao}/${airport.iata || ''} - ${airport.name}, ${airport.country}
</div>
`;
} else if (data.length <= 10) {
// Multiple matches - show as clickable list
resultsDiv.innerHTML = `
<div class="aircraft-list">
${data.map(airport => `
<div class="aircraft-option" onclick="selectAirport('in_from', '${airport.icao}')">
<div class="aircraft-code">${airport.icao}/${airport.iata || ''}</div>
<div class="aircraft-details">${airport.name}, ${airport.country}</div>
</div>
`).join('')}
</div>
`;
} else {
// Too many matches
resultsDiv.innerHTML = '<span class="lookup-no-match">Too many matches, please be more specific</span>';
}
} else {
resultsDiv.innerHTML = '<span class="lookup-no-match">No airport found</span>';
}
@@ -492,6 +544,7 @@
async function handleDepartureAirportLookup(query) {
clearTimeout(departureAirportLookupTimeout);
const resultsDiv = document.getElementById('departure-airport-lookup-results');
const inputField = document.getElementById('out_to');
if (!query || query.length < 2) {
resultsDiv.innerHTML = '';
@@ -506,12 +559,31 @@
if (response.ok) {
const data = await response.json();
if (data && data.length > 0) {
const airport = data[0];
resultsDiv.innerHTML = `
<div class="lookup-match">
${airport.icao}/${airport.iata || ''} - ${airport.name}, ${airport.country}
</div>
`;
if (data.length === 1) {
// Single match - auto-populate the input field with ICAO code
const airport = data[0];
inputField.value = airport.icao;
resultsDiv.innerHTML = `
<div class="lookup-match">
${airport.icao}/${airport.iata || ''} - ${airport.name}, ${airport.country}
</div>
`;
} else if (data.length <= 10) {
// Multiple matches - show as clickable list
resultsDiv.innerHTML = `
<div class="aircraft-list">
${data.map(airport => `
<div class="aircraft-option" onclick="selectAirport('out_to', '${airport.icao}')">
<div class="aircraft-code">${airport.icao}/${airport.iata || ''}</div>
<div class="aircraft-details">${airport.name}, ${airport.country}</div>
</div>
`).join('')}
</div>
`;
} else {
// Too many matches
resultsDiv.innerHTML = '<span class="lookup-no-match">Too many matches, please be more specific</span>';
}
} else {
resultsDiv.innerHTML = '<span class="lookup-no-match">No airport found</span>';
}
@@ -525,6 +597,28 @@
}, 500);
}
function selectAirport(fieldId, icaoCode) {
document.getElementById(fieldId).value = icaoCode;
// Clear the results
const resultsDivId = fieldId === 'in_from' ? 'arrival-airport-lookup-results' : 'departure-airport-lookup-results';
document.getElementById(resultsDivId).innerHTML = '';
// Remove focus from the field to hide the dropdown
document.getElementById(fieldId).blur();
}
// Clear airport lookup results when input loses focus
document.getElementById('in_from').addEventListener('blur', function() {
setTimeout(() => {
document.getElementById('arrival-airport-lookup-results').innerHTML = '';
}, 150);
});
document.getElementById('out_to').addEventListener('blur', function() {
setTimeout(() => {
document.getElementById('departure-airport-lookup-results').innerHTML = '';
}, 150);
});
// Form submission
document.getElementById('ppr-form').addEventListener('submit', async function(e) {
e.preventDefault();
@@ -536,10 +630,18 @@
if (value.trim() !== '') {
if (key === 'pob_in' || key === 'pob_out') {
pprData[key] = parseInt(value);
} else if (key === 'eta' || key === 'etd') {
// Convert datetime-local to ISO string
pprData[key] = new Date(value).toISOString();
} else {
} else if (key === 'eta-date' && formData.get('eta-time')) {
// Combine date and time for ETA
const dateStr = formData.get('eta-date');
const timeStr = formData.get('eta-time');
pprData.eta = new Date(`${dateStr}T${timeStr}`).toISOString();
} else if (key === 'etd-date' && formData.get('etd-time')) {
// Combine date and time for ETD
const dateStr = formData.get('etd-date');
const timeStr = formData.get('etd-time');
pprData.etd = new Date(`${dateStr}T${timeStr}`).toISOString();
} else if (key !== 'eta-time' && key !== 'etd-time') {
// Skip the time fields as they're handled above
pprData[key] = value;
}
}
@@ -582,6 +684,11 @@
document.getElementById('submit-btn').textContent = 'Submit PPR Request';
}
});
// Initialize the page when DOM is loaded
document.addEventListener('DOMContentLoaded', function() {
initializeTimeDropdowns();
});
</script>
</body>
</html>