New date picker
This commit is contained in:
James Pattinson
142
web/admin.html
142
web/admin.html
@@ -727,7 +727,12 @@
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="eta">ETA (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">POB Inbound *</label>
|
||||
@@ -749,7 +754,12 @@
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="etd">ETD (Local Time)</label>
|
||||
<input type="datetime-local" id="etd" name="etd" tabindex="-1">
|
||||
<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>
|
||||
@@ -985,12 +995,27 @@
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// Initialize the application
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initializeAuth();
|
||||
setupLoginForm();
|
||||
setupKeyboardShortcuts();
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Authentication management
|
||||
async function initializeAuth() {
|
||||
@@ -1362,7 +1387,13 @@
|
||||
function formatTimeOnly(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
// Ensure the datetime string is treated as UTC
|
||||
const utcDateStr = dateStr.includes('Z') ? dateStr : dateStr + 'Z';
|
||||
let utcDateStr = dateStr;
|
||||
if (!utcDateStr.includes('T')) {
|
||||
utcDateStr = utcDateStr.replace(' ', 'T');
|
||||
}
|
||||
if (!utcDateStr.includes('Z')) {
|
||||
utcDateStr += 'Z';
|
||||
}
|
||||
const date = new Date(utcDateStr);
|
||||
return date.toISOString().slice(11, 16);
|
||||
}
|
||||
@@ -1370,7 +1401,13 @@
|
||||
function formatDateTime(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
// Ensure the datetime string is treated as UTC
|
||||
const utcDateStr = dateStr.includes('Z') ? dateStr : dateStr + 'Z';
|
||||
let utcDateStr = dateStr;
|
||||
if (!utcDateStr.includes('T')) {
|
||||
utcDateStr = utcDateStr.replace(' ', 'T');
|
||||
}
|
||||
if (!utcDateStr.includes('Z')) {
|
||||
utcDateStr += 'Z';
|
||||
}
|
||||
const date = new Date(utcDateStr);
|
||||
return date.toISOString().slice(0, 10) + ' ' + date.toISOString().slice(11, 16);
|
||||
}
|
||||
@@ -1393,18 +1430,24 @@
|
||||
const eta = new Date(now.getTime() + 60 * 60 * 1000); // +1 hour
|
||||
const etd = new Date(now.getTime() + 2 * 60 * 60 * 1000); // +2 hours
|
||||
|
||||
// Format as local datetime-local value
|
||||
function formatLocalDateTime(date) {
|
||||
// Format date and time for separate inputs
|
||||
function formatDate(date) {
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}T${hours}:${minutes}`;
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
|
||||
document.getElementById('eta').value = formatLocalDateTime(eta);
|
||||
document.getElementById('etd').value = etd ? formatLocalDateTime(etd) : '';
|
||||
function formatTime(date) {
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(Math.ceil(date.getMinutes() / 15) * 15 % 60).padStart(2, '0'); // Round up to next 15-minute interval
|
||||
return `${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
document.getElementById('eta-date').value = formatDate(eta);
|
||||
document.getElementById('eta-time').value = formatTime(eta);
|
||||
document.getElementById('etd-date').value = formatDate(etd);
|
||||
document.getElementById('etd-time').value = formatTime(etd);
|
||||
|
||||
// Clear aircraft lookup results
|
||||
clearAircraftLookup();
|
||||
@@ -1469,24 +1512,55 @@
|
||||
}
|
||||
|
||||
function populateForm(ppr) {
|
||||
console.log('populateForm called with:', ppr);
|
||||
Object.keys(ppr).forEach(key => {
|
||||
const field = document.getElementById(key);
|
||||
if (field) {
|
||||
if (key === 'eta' || key === 'etd') {
|
||||
if (ppr[key]) {
|
||||
console.log(`Processing ${key}:`, ppr[key]);
|
||||
// ppr[key] is UTC datetime string from API (naive, assume UTC)
|
||||
const utcDateStr = ppr[key].includes('Z') ? ppr[key] : ppr[key] + 'Z';
|
||||
let utcDateStr = ppr[key];
|
||||
if (!utcDateStr.includes('T')) {
|
||||
utcDateStr = utcDateStr.replace(' ', 'T');
|
||||
}
|
||||
if (!utcDateStr.includes('Z')) {
|
||||
utcDateStr += 'Z';
|
||||
}
|
||||
const date = new Date(utcDateStr); // Now correctly parsed as UTC
|
||||
// Format as local time for datetime-local input
|
||||
console.log(`Parsed date for ${key}:`, date);
|
||||
|
||||
// Split into date and time components for separate inputs
|
||||
const dateField = document.getElementById(`${key}-date`);
|
||||
const timeField = document.getElementById(`${key}-time`);
|
||||
|
||||
if (dateField && timeField) {
|
||||
// Format date
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const dateValue = `${year}-${month}-${day}`;
|
||||
dateField.value = dateValue;
|
||||
console.log(`Set ${key}-date to:`, dateValue);
|
||||
|
||||
// Format time (round to nearest 15-minute interval)
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
field.value = `${year}-${month}-${day}T${hours}:${minutes}`;
|
||||
const rawMinutes = date.getMinutes();
|
||||
const roundedMinutes = Math.round(rawMinutes / 15) * 15 % 60;
|
||||
const minutes = String(roundedMinutes).padStart(2, '0');
|
||||
const timeValue = `${hours}:${minutes}`;
|
||||
timeField.value = timeValue;
|
||||
console.log(`Set ${key}-time to:`, timeValue, `(from ${rawMinutes} minutes)`);
|
||||
} else {
|
||||
console.log(`Date/time fields not found for ${key}: dateField=${dateField}, timeField=${timeField}`);
|
||||
}
|
||||
} else {
|
||||
console.log(`${key} is empty`);
|
||||
}
|
||||
} else {
|
||||
const field = document.getElementById(key);
|
||||
if (field) {
|
||||
field.value = ppr[key] || '';
|
||||
} else {
|
||||
console.log(`Field not found for key: ${key}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1630,10 +1704,18 @@
|
||||
if (key !== 'id' && value.trim() !== '') {
|
||||
if (key === 'pob_in' || key === 'pob_out') {
|
||||
pprData[key] = parseInt(value);
|
||||
} else if (key === 'eta' || key === 'etd') {
|
||||
// Convert local datetime-local to UTC 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;
|
||||
}
|
||||
}
|
||||
@@ -2316,6 +2398,14 @@
|
||||
document.getElementById('out_to').value = icaoCode;
|
||||
clearDepartureAirportLookup();
|
||||
}
|
||||
|
||||
// Initialize the page when DOM is loaded
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setupLoginForm();
|
||||
setupKeyboardShortcuts();
|
||||
initializeTimeDropdowns(); // Initialize time dropdowns
|
||||
initializeAuth(); // Start authentication process
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user