secondarylist = [];
providedDate = "18DEC";
// Function to extract the date from the flight information
function extractDate(flightInfo) {
const match = flightInfo.match(/(\d{1,2}[A-Za-z]{3})/); // Updated regular expression
return match ? match[1] : null;
}
function padStringToLengthNine(inputString, padddlength) {
const targetLength = padddlength;
if (inputString.length < targetLength) {
const spacesToAdd = targetLength - inputString.length;
const paddedString = " ".repeat(spacesToAdd) + inputString;
return paddedString;
} else {
return inputString;
}
}
// Function to update radio buttons based on the selected date
window.updateRadioButtons = function () {
let dateDropdown = document.getElementById('dateDropdown');
if (!dateDropdown) {
console.error('Dropdown element not found.');
return;
}
let selectedDateIndex = dateDropdown.value;
let selectedDate = null;
if (selectedDateIndex !== 'all') {
selectedDate = dateDropdown.options[selectedDateIndex].text.trim().toUpperCase();
console.log(selectedDate)
}
const radioContainer = document.getElementById('radioContainer');
if (!radioContainer) {
console.error('Radio container element not found.');
return;
}
radioContainer.innerHTML = ""; // Clear existing radio buttons
let counter = secondarylist.map(item => item.replace(/\?/g, ''));
for (let i = 0; i < counter.length; i++) {
let strmain = "";
if (counter[i] !== "" && counter[i] !== undefined) {
let fligtsplit = counter[i].split("\n");
const currentDate = extractDate(counter[i]);
if (counter[i] !== "" && counter[i] !== undefined && (selectedDate === null || currentDate.toUpperCase() === selectedDate || selectedDate === 'ALL')) {
for (let j = 0; j < fligtsplit.length; j++) {
internalvalue = fligtsplit[j].split(";");
if (j !== 0) {
const paddedString = padStringToLengthNine(internalvalue[0].trim(), 9);
strmain += `<tr>
<td>              </td>
<td>${paddedString}  </td>
<td>${internalvalue[1].trim()}  </td>
<td>${internalvalue[2].trim()}  </td>
<td>${internalvalue[3].trim().split(" ")[0]}  </td>
<td>${internalvalue[3].trim().split(" ")[1]}  </td>
<td>${internalvalue[4].trim()}  </td>
</tr><br>`;
} else {
const paddedString = padStringToLengthNine(internalvalue[1].trim(), 9);
strmain += `<tr>
<td>  </td>
<td>${internalvalue[0].trim()}  </td>
<td>${paddedString}  </td>
<td>${internalvalue[2].trim()}  </td>
<td>${internalvalue[3].trim()}  </td>
<td>${padStringToLengthNine(internalvalue[4].trim().split(" ")[0], 6)}  </td>
<td>${padStringToLengthNine(internalvalue[4].trim().split(" ")[1], 6)}  </td>
<td>${internalvalue[5].trim()}  </td>
</tr><br>`;
}
}
const radioHtml = `<input type="radio" data-date="${currentDate}" id="RPA_${i}" name="FlightOptions" value="${strmain}">
<label for="RPA_${i}" class="Center">${strmain}</label><br>`;
// Append the radio button and label HTML to the container
radioContainer.innerHTML += radioHtml;
}
}
}
}
function initializeModal() {
let timeoutID;
function addRadio() {
let counter = secondarylist.map(item => item.replace(/\?/g, ''));
let result = "";
const dates = counter.map(item => extractDate(item));
const uniqueDates = Array.from(new Set(dates.filter(date => date !== null))).sort();
// Move this line outside the loop
/* result+= "<label for='dateDropdown'>Select Date:</label>" +
"<select id='dateDropdown' onchange='updateRadioButtons()'>" +
"<option value='all'>All</option>" +
uniqueDates.map((date, index) => `<option value='${index + 1}'>${date}</option>`).join("") +
"</select>";
result += "<label for='dateDropdown'style='position: fixed;top: 55px;margin-left: 1px;margin-right: 10px;'>Select Date:</label>" +
"<select id='dateDropdown' onchange='updateRadioButtons()' style='position: fixed;margin-left: 27px; top: 70px; left: 20px;'>" + "<option value='all'>All</option>" +
uniqueDates.map((date, index) => `<option value='${index + 1}'>${date}</option>`).join("") +
"</select>";*/
result = "<label for='dateDropdown'style='position: fixed;top: 55px;margin-left: 1px;margin-right: 10px;'>Select Date:</label>" +
"<select id='dateDropdown' onchange='updateRadioButtons()' style='position: fixed;margin-left: 27px; top: 70px; left: 20px;'>" +
"<option value='all'>All</option>";
const selectedIndex = uniqueDates.findIndex(date => date.toUpperCase() === providedDate.toUpperCase());
result += uniqueDates.map((date, index) => `<option value='${index + 1}' ${index === selectedIndex ? 'selected' : ''}>${date}</option>`).join("") +
"</select>"
result += "<div id='radioContainer'>";
for (let i = 0; i < counter.length; i++) {
let strmain = "";
if (counter[i] !== "" && counter[i] != undefined) {
let fligtsplit = counter[i].split("\n");
if (fligtsplit.some(subItem => subItem.trim() !== '')) {
// Add the missing variable definitions
for (let j = 0; j < fligtsplit.length; j++) {
internalvalue = fligtsplit[j].split(";");
if (j !== 0) {
let spaceneed = 0;
const paddedString = padStringToLengthNine(internalvalue[0].trim(), 9);
strmain += `<tr>
<td>              </td>
<td>${paddedString}  </td>
<td>${internalvalue[1].trim()}  </td>
<td>${internalvalue[2].trim()}  </td>
<td>${padStringToLengthNine(internalvalue[3].trim().split(" ")[0], 6)}  </td>
<td>${padStringToLengthNine(internalvalue[3].trim().split(" ")[1], 6)}  </td>
<td>${internalvalue[4].trim()}  </td>
</tr><br>`;
} else {
const paddedString = padStringToLengthNine(internalvalue[1].trim(), 9);
strmain += `<tr>
<td>  </td>
<td>${internalvalue[0].trim()}  </td>
<td>${paddedString}  </td>
<td>${internalvalue[2].trim()}  </td>
<td>${internalvalue[3].trim()}  </td>
<td>${padStringToLengthNine(internalvalue[4].trim().split(" ")[0], 6)}  </td>
<td>${padStringToLengthNine(internalvalue[4].trim().split(" ")[1], 6)}  </td>
<td>${internalvalue[5].trim()}  </td>
</tr><br>`;
/*buttonvalue = counter[i].replace(/\n/g, '||');
strmain += `<div style= align-items: strech;">
<input type="radio" data-date="${dates[i]}" id="RPA_${i}" name="FlightOptions" value="${buttonvalue}" style="margin-right: 5px;">
<label for="RPA_${i}" class="Center" style="flex-grow: 1; text-align: left;">  ${internalvalue[0].trim()}${space.repeat(1)}${internalvalue[1].trim()}${spaceneed}${space.repeat(2)}${internalvalue[2].trim()}${space.repeat(2)}${internalvalue[3].trim()}${space.repeat(2)}${internalvalue[4].trim()}${space.repeat(1)}${internalvalue[5].trim()}${space.repeat(1)}<br></label>
</div>`;*/
}
}
}
// Add a line break after each radio button and label pair
result += `<input type="radio" id="RPA_${i}" name="FlightOptions" value="${strmain}" ><label for="RPA_${i}" class="Center">${strmain}</label><br>`;
}
}
result += "</div>";
const dateDropdown = document.getElementById('dateDropdown');
if (dateDropdown) {
dateDropdown.addEventListener('change', function () {
updateRadioButtons();
});
} else {
console.error('Dropdown element not found.');
}
return result;
}
function getSelectedFlight() {
var radios = document.getElementsByName("FlightOptions");
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
return radios[i].value;
}
}
return null;
}
function showModal() {
var modal = document.getElementById("myModal");
if (modal) {
modal.style.display = "block";
setupTimeout(); // Call setupTimeout when showing the modal
} else {
console.error("Modal element not found.");
}
}
function hideModal() {
var modal = document.getElementById("myModal");
if (modal) {
modal.style.display = "none";
console.log("Clearing Timeout")
clearTimeout(timeoutID); // Clear the timeout when hiding the modal
} else {
console.error("Modal element not found.");
}
}
function getEnteredText() {
let textBox = document.getElementById("textBox");
let enteredText = textBox.value.trim();
// Define the regex pattern
let regexPattern = /^(?:[A-Za-z]{1},?)+$/;
if (!regexPattern.test(enteredText)) {
alert("Please enter valid text following the pattern: (A, B, C, ...)");
textBox.focus(); // Set focus back to the text box
return null;
}
return enteredText;
}
function handleSubmit(submitType) {
// Disable all radio buttons once either Submit or Cancel is selected
var radioButtons = document.getElementsByName("FlightOptions");
for (var i = 0; i < radioButtons.length; i++) {
radioButtons[i].disabled = true;
}
// Disable text box
document.getElementById("textBox").disabled = true;
// Disable Cancel button
document.getElementById("Closevalue").disabled = true;
// Disable Submit button
document.getElementById("submitvalue").disabled = true;
let responseText;
if (submitType === 'submit') {
var selectedFlight = getSelectedFlight();
var enteredText = getEnteredText();
if (selectedFlight == null || enteredText === null) {
// Enable radio buttons and Cancel button if validation fails
for (var i = 0; i < radioButtons.length; i++) {
radioButtons[i].disabled = false;
}
document.getElementById("Closevalue").disabled = false;
// Enable Submit button if validation fails
document.getElementById("submitvalue").disabled = false;
// Enable text box if validation fails
document.getElementById("textBox").disabled = false;
return;
} else {
responseText = selectedFlight + "<br>Entered Text: " + enteredText;
}
} else if (submitType === 'cancel') {
responseText = 'Cancel';
} else {
console.error('Invalid submitType');
return;
}
// Check if the response element already exists
let existingResponseElement = document.getElementById('responseElement');
if (existingResponseElement) {
existingResponseElement.innerHTML = responseText;
} else {
let responseElement = document.createElement('div');
responseElement.innerHTML = responseText;
responseElement.setAttribute('id', 'responseElement');
responseElement.style.display = 'block';
// Append the new element to the FlightData div within the modal
document.getElementById('radioContainer').appendChild(responseElement);
}
// Hide the modal after a delay of 10 seconds if the Submit button was clicked
if (submitType === 'submit' || submitType === 'cancel') {
setTimeout(function () {
hideModal();
}, 4000); // 10000 milliseconds = 10 seconds
}
else {
console.error('Invalid submitType');
return;
}
}
function setupTimeout() {
if (timeoutID) {
console.log("Clearing Timeout");
clearTimeout(timeoutID);
}
timeoutID = setTimeout(function () {
hideModal();
console.error("No Option selected");
// Add an alert before the timeout finishes
alert("Please select an option before the timeout finishes.");
}, 120000); // 60000 milliseconds = 60 seconds
}
function clearTimeoutAndSubmit(callback) {
try {
// Call the callback function with the selectedFlight
callback();
// Clear timeout only if it exists
if (timeoutID) {
console.log("Clearing Timeout")
clearTimeout(timeoutID);
}
} catch (error) {
console.error("Error in clearTimeoutAndSubmit:", error);
}
}
function clearTimeoutAndClose() {
try {
// Clear timeout only if it exists
if (timeoutID) {
console.log("Clearing Timeout");
clearTimeout(timeoutID);
}
// Check if the modal element exists before hiding
let modalElement = document.getElementById("myModal");
if (modalElement) {
// Wait for 4 seconds before hiding the modal
setTimeout(function () {
modalElement.style.display = "none";
}, 4000);
}
} catch (error) {
console.warn("Error in clearTimeoutAndClose:", error);
}
}
setupTimeout();
let Flightmodal = document.createElement('div');
Flightmodal.setAttribute('id', 'FlightData');
Flightmodal.innerHTML = `<style>
.modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
z-index: 1000; display: block; border: 1px solid #888; width: 80%; margin: auto;
scroll-behavior: smooth; height:90%;background-color: Lightgreen }
.modal-content { border: 1px solid #888;margin-left: 25px;padding: 20px 20px; text-align: left; width: 90%; overflow: auto;
scroll-behavior: smooth; overflow-y: scroll; height: 55%;height: 55%;font-family: 'Monaco', Monospace;
font-size: 12px;
font-weight: bold;background-color: LightRed }
.button-container { text-align: center; position: absolute; bottom: 10px; width: 100%; }
.button-container input { margin-right: 16px; }
.close { color: #aaa; float: right; font-size: 28px; font-weight: 700 }
.close:focus, .close:hover { color: #000; text-decoration: none; cursor: pointer }
label { text-align: center }
.input-container {
text-align: center;
margin-top: 5px; /* Add margin to create space */
}
#textBox {
width: 90px; /* Set a specific width for the text box */
}
</style>
<div id="myModal" class="modal">
<h2 style="text-align: center; padding-top: 10px; color: #3366cc; font-family: 'Arial', sans-serif; font-size: 24px; font-weight: bold;">Flight Availability</h2>
<br>
<p1 class="header-row" style="text-align:left; padding-left:20px; color: #3366cc; font-family: 'Arial', sans-serif; font-size: 15px; font-weight: bold;">
Date  Flight No. Org Dest. Dep. Arr. Class                                      
</p1>
<br>
<br>
<div id="RPA_Afklmcontent" class="modal-content">
<p id="thelist">${addRadio()}</p>
</div>
<br>
<div class="input-container">
<label for="comments">  Enter the class to check price for:</label>
<Input id="textBox" name="Enter the Class to be Filled" rows="1" cols="10" required></Input>
</div>
<div class="button-container">
<br>
<input type="button" value="Submit" id="submitvalue">
<input type="button" value="Cancel" id="Closevalue">
</div>
</div>`;
let existingFlightData = document.getElementById('FlightData');
if (existingFlightData) {
document.body.removeChild(existingFlightData);
}
document.body.appendChild(Flightmodal);
document.getElementById("submitvalue").addEventListener("click", function () {
clearTimeoutAndSubmit(function () {
handleSubmit('submit');
});
});
document.getElementById("Closevalue").addEventListener("click", function () {
clearTimeoutAndClose();
handleSubmit('cancel');
});
}
// Call this function whenever you want to initialize the modal
initializeModal();
