php-bigdump/public/assets/script.js

document.addEventListener('DOMContentLoaded', function() {
    const importForm = document.querySelector('a[href*="action=import"]');
    if (importForm) {
        // This is the start page, no JS needed here for now.
    }

    // Logic for the import page
    const importPage = document.getElementById('import-page-marker');
    if (importPage) {
        const urlParams = new URLSearchParams(window.location.search);
        const filename = urlParams.get('file');
        const delay = parseInt(importPage.dataset.delay || '0');

        let start_line = parseInt(urlParams.get('start_line') || '1');
        let foffset = parseInt(urlParams.get('foffset') || '0');
        let totalqueries = parseInt(urlParams.get('totalqueries') || '0');
        let delimiter = urlParams.get('delimiter') || ';';

        const progressDiv = document.getElementById('progress');
        const messagesDiv = document.getElementById('import_messages');
        const linenumberSpan = document.getElementById('linenumber');
        const stopButton = document.getElementById('stop_button');

        let stopped = false;

        stopButton.addEventListener('click', (e) => {
            e.preventDefault();
            stopped = true;
            messagesDiv.innerHTML = '<p class="error">Import stopped by user.</p>';
            stopButton.style.display = 'none';
        });

        function makeRequest() {
            if (stopped) return;

            const requestUrl = `?action=import&file=${encodeURIComponent(filename)}&start_line=${start_line}&foffset=${foffset}&totalqueries=${totalqueries}&delimiter=${encodeURIComponent(delimiter)}&ajax_request=true`;

            fetch(requestUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.error) {
                        throw new Error(data.error);
                    }

                    const session_start_line = start_line;
                    start_line = data.linenumber;
                    foffset = data.foffset;
                    totalqueries = data.totalqueries;
                    delimiter = data.delimiter;

                    linenumberSpan.textContent = start_line;

                    updateProgress(data, session_start_line);

                    if (data.finished) {
                        messagesDiv.innerHTML = '<p class="successcentr">Congratulations: End of file reached, assuming OK</p>';
                        stopButton.style.display = 'none';
                    } else {
                        setTimeout(makeRequest, 500 + delay); // Delay before next request
                    }
                })
                .catch(error => {
                    messagesDiv.innerHTML = `<p class="error">An error occurred: ${error.message}</p>`;
                    console.error('Error during import:', error);
                });
        }

        function updateProgress(data, session_start_line) {
            const pct_bar = `<div style="height:15px;width:${data.percent}%;background-color:#000080;margin:0px;"></div>`;
            const filesize_mb = data.filesize > 0 ? (data.filesize / 1024 / 1024).toFixed(2) : '?';
            const foffset_mb = data.foffset > 0 ? (data.foffset / 1024 / 1024).toFixed(2) : '?';


            progressDiv.innerHTML = `
            <table width="520" border="0" cellpadding="3" cellspacing="1">
                <tr><th class="bg4"> </th><th class="bg4">Session</th><th class="bg4">Done</th><th class="bg4">Total</th></tr>
                <tr><th class="bg4">Lines</th><td class="bg3">${data.linenumber - session_start_line}</td><td class="bg3">${data.linenumber}</td><td class="bg3">?</td></tr>
                <tr><th class="bg4">Queries</th><td class="bg3">${data.queries_processed_session}</td><td class="bg3">${data.totalqueries}</td><td class="bg3">?</td></tr>
                <tr><th class="bg4">MB</th><td class="bg3">${(data.bytes_processed_session/1024/1024).toFixed(2)}</td><td class="bg3">${foffset_mb}</td><td class="bg3">${filesize_mb}</td></tr>
                <tr><th class="bg4">% bar</th><td class="bgpctbar" colspan="3">${pct_bar}</td></tr>
            </table>
            `;
        }

        // Start the first request
        makeRequest();
    }
});