<!-- index.html -->

<!DOCTYPE html>
<html>
<head>
    <title>Long Task Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#start-task').click(function() {
                $.getJSON('/start-task', function(response) {
                    console.log(response);
                });
            });

            setInterval(function() {
                $.getJSON('/task-status', function(response) {
                    console.log(response);
                    if (response.status === 'In progress') {
                        // Update the page with a loading indicator or progress bar
                        $('#task-status').text('Task in progress...');
                    } else {
                        // Update the page with the task completion message
                        $('#task-status').text('Task completed!');
                    }
                });
            }, 1000);  // Periodically check the task status every 1 second
        });
    </script>
</head>
<body>
    <h1>Long Task Example</h1>
    <button id="start-task">Start Task</button>
    <p id="task-status"></p>
</body>
</html>
