Yeahhhhhhh - Posts - OneCompiler

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Parcel Booking System</title> <link rel="stylesheet" href="styles.css">  </head> <body> <div class="container"> <h1>Parcel Booking System</h1>

    <!-- Hidden input to hold dynamic value from JSP (Booking ID) -->
    <input type="hidden" id="hiddenBookingId" value="<%= bookingIdFromJSP %>"> <!-- JSP will populate this -->

    <input type="text" id="bookingID" placeholder="Enter your booking ID">
    <button onclick="trackBooking()">Track Booking</button>

    <div id="bookingResult" class="booking-result"></div>

    <!-- Progress Bar with 5 circles -->
    <div class="progress-container">
        <div class="progress-bar"></div>
        <div class="progress-fill" id="progressFill"></div>
        <div class="circle" id="step1">1</div>
        <div class="circle" id="step2">2</div>
        <div class="circle" id="step3">3</div>
        <div class="circle" id="step4">4</div>
        <div class="circle" id="step5">5</div>
    </div>

    <!-- Status text under each circle -->
    <div class="status-indicator">
        <div class="status-label">Ordered</div>
        <div class="status-label">Dispatched</div>
        <div class="status-label">In Transit</div>
        <div class="status-label">Out for Delivery</div>
        <div class="status-label">Delivered</div>
    </div>
</div>

<script src="script.js"></script> <!-- Link to external JS -->

</body> </html> // Function to track booking status and read the hidden bookingId function trackBooking() { const bookingID = document.getElementById("bookingID").value; const resultDiv = document.getElementById("bookingResult");

// Read the value from the hidden input field (bookingId from JSP)
const hiddenBookingId = document.getElementById("hiddenBookingId").value;

// Display the hidden booking ID (for testing or other purposes)
console.log("Hidden Booking ID: ", hiddenBookingId);

// Mock data for progress and status (since you're not fetching from a servlet)
const mockBooking = {
    status: "In Transit",
    progress: 3 // Example step for "In Transit"
};

// Update the result div with the mock status
resultDiv.innerHTML = `<p>Status: <strong>${mockBooking.status}</strong></p>`;
animateProgress(mockBooking.progress);  // Simulate progress based on mock data

}

// Function to handle progress bar animation
function animateProgress(step) {
resetProgress(); // Reset all circles and progress bar

const progressFill = document.getElementById("progressFill");
const totalDuration = 4;  // Total animation duration in seconds
const stepPercentage = 25;  // 25% for each step (as there are 4 intervals)

// Set the width of the progress bar based on the step with smooth transition
progressFill.style.transition = `width ${totalDuration}s ease`;
progressFill.style.width = ((step - 1) * stepPercentage) + "%";

// Wait for the progress bar to fill before activating circles
for (let i = 1; i <= step; i++) {
    setTimeout(() => {
        const circle = document.getElementById(`step${i}`);
        circle.classList.add('active');

        if (i < step) {
            circle.classList.add('completed');
        }
    }, ((i - 1) * totalDuration * 1000 / 4));  // Adjust the timing for each step
}

}

// Function to reset the progress bar and circles
function resetProgress() {
// Reset all circles and progress bar to inactive state
for (let i = 1; i <= 5; i++) {
const circle = document.getElementById(step${i});
circle.classList.remove('active');
circle.classList.remove('completed');
}

// Reset the progress bar fill
const progressFill = document.getElementById("progressFill");
progressFill.style.transition = 'none';
progressFill.style.width = "0%";

}