0% found this document useful (0 votes)
7 views14 pages

Super) Update 2

The document contains JavaScript code for a web application that manages a multi-step process for submitting application and personal information. It includes UI elements such as buttons and checkboxes, and functions for handling asynchronous requests to submit data to a server. The code also incorporates error handling, status updates, and animations for user interaction.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
7 views14 pages

Super) Update 2

The document contains JavaScript code for a web application that manages a multi-step process for submitting application and personal information. It includes UI elements such as buttons and checkboxes, and functions for handling asynchronous requests to submit data to a server. The code also incorporates error handling, status updates, and animations for user interaction.
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 14

//Dhaka 2

const bgd1 = 'BGDDV29F0225';


const bgd2 = 'BGDDV29F1B25';
const name1 = 'SARMIN AKTER';
const name2 = 'SIADUR RAHMAN';
const mobileno = '01336962449';
const email = '[email protected]';

try { updateStatus("Have a Nice Day!! Contact: 01911137779") } catch (e) {}

const tokenkey = csrf_token; // Ensure csrf_token is defined in your context


try { updateStatus(`csrfToken Found: ${tokenkey} `)} catch (e) {}

// Create a div for buttons


const container = document.createElement('div');
container.style.cssText = 'position:fixed;bottom:10px;right:10px;display:flex';
// Create the button panel
const buttonPanel = document.createElement('div');
// Apply styles using cssText
buttonPanel.style.cssText = `
width: 590px;
height: 80px;
padding: 4px 10px;
text-align: left;
border: 2px solid rgb(0, 0, 0);
border-radius: 12px 5px;
background-color: #fae3a0;
display: flex;
box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px;
flex-direction: column;
align-items: center;
animation: backgroundAnimation 5s infinite;
`;
// Create a div for buttons
const btnContainer = document.createElement('div');
btnContainer.style.cssText = 'display:flex;justify-content:space-
between;width:100%;height:50%;';

// Add buttons and clock display


btnContainer.innerHTML = `
<button style="background:rgb(187, 249, 16);cursor:pointer;"
onmouseover="this.style.backgroundColor='#f5f910';"
onmouseout="this.style.backgroundColor='rgb(32, 115, 7)';"
onclick="autoProcessPayment()">Autometic</button>
<button style="background:rgb(97, 250, 166);cursor:pointer;"
onmouseover="this.style.backgroundColor='#00ff57';"
onmouseout="this.style.backgroundColor='';"
onclick="Application()">*Application*</button>
<button style="background:rgb(255, 171, 0);cursor:pointer;"
onmouseover="this.style.backgroundColor='#33ddff';"
onmouseout="this.style.backgroundColor='rgb(255, 171, 0)';"
onclick="Personal()">*Personal*</button>
<button style="cursor:pointer;"
onmouseover="this.style.backgroundColor='#00ff57';"
onmouseout="this.style.backgroundColor='#d0d0d0';"
onclick="Overview()">*Overview*</button>

<button style="background:rgb(249, 16, 160);cursor:pointer;"


onmouseover="this.style.backgroundColor='#f5f910';"
onmouseout="this.style.backgroundColor='rgb(249, 16, 160';"
onclick="stopProcess()">🛑Stop</button>
<button style="cursor:pointer;"
onmouseover="this.style.backgroundColor='green';"
onmouseout="this.style.backgroundColor='#d0d0d0';"
onclick="restartButton()">restart</button>
`;

$("<style>")
.prop("type", "text/css")
.html(`
@keyframes backgroundAnimation {
0% { background: #a7fad5; }
25% { background: #c868f7; }
50% { background: #f7e58b; }
75% { background: #cdfaac; }
100% { background: #f2fa57; }
}
`)
.appendTo("head");
const style = document.createElement('style');
style.textContent = `
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-10px); }
}
`;
document.head.appendChild(style);

buttonPanel.appendChild(btnContainer);
container.appendChild(buttonPanel);
document.body.appendChild(container);

function updateStatus(...messages) {
let statusBar = document.querySelector(".virtual-h3");
if (!statusBar) {
// Create the element if it doesn't exist yet
statusBar = document.createElement("div");
statusBar.classList.add("virtual-h3");
document.body.appendChild(statusBar);
}

let clearButton = document.querySelector(".clear-button");


if (!clearButton) {
clearButton = document.createElement("button");
clearButton.classList.add("clear-button");
clearButton.textContent = "Clear Status";
clearButton.style.position = "absolute";
clearButton.style.background = 'red';
clearButton.style.color = "yellow";
clearButton.style.bottom = "110px";
clearButton.style.right = "2%";
clearButton.style.transform = "translateX(-2%)";
document.body.appendChild(clearButton);

// Add click event listener to clear the statusBar content


clearButton.addEventListener("click", () => {
statusBar.innerHTML = ""; // Clear the content of the virtual h3
});
}

try {
// Apply styles to the virtual h3 (div)
statusBar.style.textAlign = 'center'; // Center align text
statusBar.style.background = 'black';
statusBar.style.color = 'white';
statusBar.style.border = '2px solid green';
statusBar.style.maxHeight = '150px';
statusBar.style.width = '100vw';
statusBar.style.marginLeft = '20px';
statusBar.style.padding = '0';
statusBar.style.position = 'absolute';
statusBar.style.top = '45px';
statusBar.style.left = '0';
statusBar.style.overflowY = 'scroll'; // Enable scrolling
statusBar.style.fontSize = '15px';
statusBar.style.zIndex = '9999';
statusBar.style.visibility = 'visible';

// Check if the innerHTML is empty or doesn't contain <br>, reset if needed


if (!statusBar.innerHTML) {
statusBar.innerHTML = ""; // Clear the content
}

// Create a new div for each message


messages.forEach(message => {
let messageDiv = document.createElement('div');
messageDiv.textContent = message.length > 100 ? message.substring(0,
95) + '...' : message; // Truncate if necessary
messageDiv.style.textAlign = 'center'; // Center align each message

// Set text color based on message content


if (message.toLowerCase().includes("success") ||
message.toLowerCase().includes("ok")) {
messageDiv.style.color = 'green'; // Set text color to green for
success
} else if (message.toLowerCase().includes("error")) {
messageDiv.style.color = 'red'; // Set text color to red for error
}

statusBar.appendChild(messageDiv);
});

// Scroll to the bottom of the statusBar to show the latest message


statusBar.scrollTop = statusBar.scrollHeight;

} catch (e) {
console.error(e); // Log any errors for debugging
}
}

// Function to create a step with a checkbox


function createStep(stepNumber) {
const stepDiv = document.createElement('div');
stepDiv.className = 'step';
stepDiv.id = `step${stepNumber}`;

const checkboxInput = document.createElement('input');


checkboxInput.type = 'checkbox';
checkboxInput.id = `mycheckbox${stepNumber}`;

const label = document.createElement('label');


label.htmlFor = `checkbox${stepNumber}`;
label.innerText = `Step ${stepNumber}`;

stepDiv.appendChild(checkboxInput);
stepDiv.appendChild(label);

return stepDiv;
}

// Function to apply styles to the steps


function applyStyles() {
const style = document.createElement('style');
style.innerHTML = `
.step {

padding: 4px;
margin: 4px;
border: 5px solid #fff;
border-radius: 5px;
display:flex;
flex-direction:row;
align-items:center;
}
.step:nth-child(1) {
background-color: lightblue; /* Color for the first step */
}
.step:nth-child(2) {
background-color: lightgreen; /* Color for the second step */
}
.step:nth-child(3) {
background-color: lightcoral; /* Color for the third step */
}
input[type="checkbox"] {
width: 20px; /* Medium size */
height: 20px; /* Medium size */
margin-right: 10px; /* Space between checkbox and label */
}
input[type="checkbox"]:checked + label {
color: green; /* Change text color when checked */
font-weight: bold; /* Make text bold when checked */
}
input[type="checkbox"]:checked {
background-color: lightgreen; /* Color when checked */
}
input[type="checkbox"]:indeterminate {
background-color: yellow; /* Color for indeterminate state */
}
input[type="checkbox"]:not(:checked) {
background-color: lightcoral; /* Color when unchecked */
}
`;
document.head.appendChild(style);
}

// Function to initialize the steps and insert them into the specified container
function initializeSteps() {
// Create a container for the steps
const stepContainer = document.createElement('div');
stepContainer.style.cssText = `
display: flex;
position: relative;
font-size: 13px;
height: 55%;
margin-bottom: 40px;
`;

for (let i = 1; i <= 3; i++) {


const step = createStep(i);
stepContainer.appendChild(step); // Append each step to the step container
}

buttonPanel.appendChild(stepContainer); // Append the step container to the


button panel
applyStyles(); // Apply styles to the steps
}

// Start the process


initializeSteps();
let isApplication = false; // Tracks if successfully sent
let isPersonal = false;
let isOverview = false;
let isProcessStopped = false;

let abortControllers = []; // Initialize an array to hold abort controllers

async function Application() {


updateStatus("Application_Info...");
const abortController = new AbortController(); // Create a new AbortController
abortControllers.push(abortController); // Store the controller

const step1Check = document.getElementById('mycheckbox1');

// Check if the checkbox is already checked


if (step1Check.checked) {
isApplication = true;
return true;
}

for (let attempt = 1; attempt <= 30; attempt++) {


if (step1Check.checked) {
isApplication = true;
return true;
}

updateStatus(`Application_Info.. attempt ${attempt}.`);

if (isProcessStopped) {
updateStatus("Application_Info stopped.");
return false;
}

try {
const response = await sendApplicationInfo(abortController.signal); //
Pass the signal
updateStatus(JSON.stringify(response));

if (response && typeof response === 'object') {


const AppUrl = response.url ?? response.data?.url;

if (AppUrl && AppUrl.includes("https://payment.ivacbd.com/personal-


info")) {
step1Check.checked = true;
updateStatus("Application_Info Sent Successfully!");
await Personal();
isApplication = true;
return true;
} else {
updateStatus("Application_Info Send Failed! Retrying...");
}
} else {
updateStatus("Invalid response structure.");
}
} catch (e) {
updateStatus(`Error: ${e.message || JSON.stringify(e)}`);
}

await new Promise(resolve => setTimeout(resolve, 5000));


}
return false;
}

async function sendApplicationInfo(signal) {


const payload = {
_token: tokenkey,
highcom: 1,
webfile_id: bgd1,
webfile_id_repeat: bgd1,
ivac_id: 17,
visa_type: 13,
family_count: 1,
visit_purpose: 'Need urgent treatment'
};

try {
const response = await fetch('https://payment.ivacbd.com/application-info-
submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload),
signal // Attach the abort signal
});

console.log('%cResponse Status: ' + response.status, 'color: blue; font-


weight: bold;');

if (response.status === 200 || response.status === 504) {


return response;
} else {
throw new Error('Unexpected response status: ' + response.status);
}
} catch (error) {
if (error.name === 'AbortError') {
console.error('%cRequest aborted', 'color: orange; font-weight:
bold;');
} else {
console.error('%cError: ' + error.message, 'color: red; font-weight:
bold;');
}
return null;
}
}

async function Personal() {


updateStatus("Personal_Info...");
const abortController = new AbortController(); // Create a new AbortController
abortControllers.push(abortController); // Store the controller

const step2Check = document.getElementById('mycheckbox2');

// Check if the checkbox is already checked


if (step2Check.checked) {
isPersonal = true;
return true;
}

for (let attempt = 1; attempt <= 30; attempt++) {


// Check again if the checkbox is checked
if (step2Check.checked) {
isPersonal = true;
return true;
}

updateStatus(`Personal_Info.. attempt ${attempt}.`);

// Stop the process if requested


if (isProcessStopped) {
updateStatus("Personal_Info stopped.");
return false; // Explicitly return false to indicate failure
}

try {
const response = await sendPersonalInfo(abortController.signal); //
Pass the signal
updateStatus(JSON.stringify(response));

// Validate the response


if (response && typeof response === 'object') {
const PerUrl = response.url ?? response.data?.url;

// Check for the expected URL structure


if (PerUrl &&
PerUrl.includes("https://payment.ivacbd.com/overview")) {
step2Check.checked = true; // Check the checkbox
updateStatus("Personal_Info Sent Successfully!");
await Overview(); // Call the next function
isPersonal = true; // Set application status to true
return true; // Stop retrying
} else {
updateStatus("Personal_Info Send Failed! Retrying...");
}
} else {
updateStatus("Invalid response structure.");
}
} catch (e) {
updateStatus(`Error: ${e.message || JSON.stringify(e)}`);
}

// Wait before the next attempt


await new Promise(resolve => setTimeout(resolve, 5000));
}
return false; // Return false if all attempts fail
}
async function sendPersonalInfo(signal) {
const payload1 = {
_token: tokenkey,
full_name: name1,
email_name: email,
pho_ne: mobileno,
web_file_id: bgd1,
family: [
{
name: name2,
webfile_no: bgd2,
again_webfile_no: bgd2
}
]
};

try {
const response = await fetch('https://payment.ivacbd.com/personal-info-
submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload1),
signal // Attach the abort signal
});

console.log('%cResponse Status: ' + response.status, 'color: blue; font-


weight: bold;');

if (response.status === 200 || response.status === 504) {


return response; // Return the response object
} else {
throw new Error('Unexpected response status: ' + response.status);
}
} catch (error) {
if (error.name === 'AbortError') {
console.error('%cRequest aborted', 'color: orange; font-weight:
bold;');
} else {
console.error('%cError: ' + error.message, 'color: red; font-weight:
bold;');
}
return null; // Prevents rejection, always resolves
}
}

async function Overview() {


updateStatus("Overview_Info...");

const abortController = new AbortController(); // Create a new AbortController


abortControllers.push(abortController); // Store the controller

const step3Check = document.getElementById('mycheckbox3');


// Check if the checkbox is already checked
if (step3Check.checked) {
isOverview = true;
return true;
}

for (let attempt = 1; attempt <= 30; attempt++) {


// Check again if the checkbox is checked
if (step3Check.checked) {
isOverview = true;
return true;
}

updateStatus(`Overview_Info.. attempt ${attempt}.`);

// Stop the process if needed


if (isProcessStopped) {
updateStatus("Overview_Info stopped.");
return false; // Explicitly return false to indicate failure
}

try {
const response = await sendOverviewInfo(abortController.signal); //
Pass the signal
updateStatus(JSON.stringify(response));

// Validate the response


if (response && typeof response === 'object') {
const OverUrl = response.url ?? response.data?.url;

// Check for the expected URL structure


if (OverUrl &&
OverUrl.includes("https://payment.ivacbd.com/payment")) {
step3Check.checked = true; // Check the checkbox
updateStatus("Overview_Info Sent Successfully!");
isOverview = true; // Set overview status to true
return true; // Stop retrying
} else {
updateStatus("Overview_Info Send Failed! Retrying...");
}
} else {
updateStatus("Invalid response structure.");
}
} catch (e) {
updateStatus(`Error: ${e.message || JSON.stringify(e)}`);
}

// Wait before the next attempt


await new Promise(resolve => setTimeout(resolve, 5000));
}
return false; // Return false if all attempts fail
}

async function sendOverviewInfo(signal) {


const payload2 = {
_token: tokenkey,
};
try {
const response = await fetch('https://payment.ivacbd.com/overview-submit',
{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload2),
signal // Attach the abort signal
});

console.log('%cResponse Status: ' + response.status, 'color: blue; font-


weight: bold;');

if (response.status === 200 || response.status === 504) {


return response; // Return the response object
} else {
throw new Error('Unexpected response status: ' + response.status);
}
} catch (error) {
if (error.name === 'AbortError') {
console.error('%cRequest aborted', 'color: orange; font-weight:
bold;');
} else {
console.error('%cError: ' + error.message, 'color: red; font-weight:
bold;');
}
return null; // Prevents rejection, always resolves
}
}

async function autoProcessPayment() {


try {
isProcessStopped = false; // Reset stop flag when starting
let isApplication = false;
let isPersonal = false;
let isOverview = false;
//try { disableButton($("#totalauto")); } catch (e) {}

// Step 1: Ensure ApplicationSent is sent before proceeding


if (!isApplication) {
let ApplicationSent = await Application();
if (!ApplicationSent) {
updateStatus("Failed to send ApplicationSent. Stopping
process.");

return; // Stop here, do not proceed


}
isApplication = true; // Mark ApplicationSent as sent
} else {
updateStatus("ApplicationSent already sent, skipping this
step.");
}

if (isProcessStopped) {
updateStatus("Process stopped after ApplicationSent
sending.");

return;
}

// Step 2: Ensure Personalsent is verified before proceeding


if (!isPersonal) {
let Personalsent = await Personal();
if (!Personalsent) {
updateStatus("Personalsent verification failed. Stopping
process.");

return; // Stop here, do not proceed


}
isPersonal = true; // Mark Personalsent as verified
} else {
updateStatus("Personalsent already verified, skipping this
step.");
}

if (isProcessStopped) {
updateStatus("Process stopped after Personalsent
verification.");
try { enableButtonc($("#totalauto")); } catch (e) {}
return;
}

// Step 3: Ensure OverviewSuccess is processed before proceeding


if (!isOverview) {
let OverviewSuccess = await Overview();
if (OverviewSuccess) {
updateStatus(OverviewSuccess);

return; // Stop here, do not proceed


}
isOverview = true; // Mark Payment as processed
} else {
updateStatus("OverviewSuccess already processed, skipping
this step.");
}

updateStatus("OverviewSuccess process completed.");

} catch (error) {
updateStatus("Error during auto-processing: " + error.message);

}
}

// Function to open the payment page


function openPaymentPage() {
const url = 'https://payment.ivacbd.com/payment';
const target = '_blank'; // Opens in a new tab
window.open(url, target);
}
function restartButton() {
let isProcessStopped = false;
const step1Check = document.getElementById('mycheckbox1');
step1Check.checked = false;
const step2Check = document.getElementById('mycheckbox2');
step2Check.checked = false; // Corrected the typo here
const step3Check = document.getElementById('mycheckbox3');
step3Check.checked = false; // Corrected the typo here
updateStatus("Restart button clicked. Submissions will resume.");
};

function stopProcess() {
const step1Check = document.getElementById('mycheckbox1');
step1Check.checked = true;
const step2Check = document.getElementById('mycheckbox2');
step2Check.checked = true; // Corrected the typo here
const step3Check = document.getElementById('mycheckbox3');
step3Check.checked = true; // Corrected the typo here

let isApplication = false;


let isPersonal = false;
let isOverview = false;
let isProcessStopped = true;

// Abort all ongoing requests


abortControllers.forEach(controller => controller.abort());
abortControllers = []; // Clear the controllers array

showAlert('All requests stopped', 'error');


updateStatus("Process Stopped! Resetting state...");
updateStatus("Process Stopped! Resetting state...");

};

async function someOtherProcess() {


while (!isProcessStopped) {
// Perform some work
console.log("Working...");

// Simulate work with a delay


await new Promise(resolve => setTimeout(resolve, 1000));
}
console.log("Process has been stopped.");
}

You might also like