js/index.js

async function handleDockerFormSubmit(event) {
    event.preventDefault(); // Prevent the form from submitting the traditional way
    const submitButton = document.getElementById('docker-submit-button');
    const messageDiv = document.getElementById('docker-message');
    const progressBar = document.getElementById('progress-bar');
    submitButton.disabled = true; // Disable the submit button
    messageDiv.textContent = "Downloading Docker image..."; // Show downloading message
    messageDiv.style.display = 'block';

    const form = event.target;
    const imageName = form.image_name.value;
    const tag = form.tag.value;

    try {
        const response = await fetch(`/download-docker-image?image_name=${imageName}&tag=${tag}`);
        if (response.ok) {
            const reader = response.body.getReader();
            const contentLength = response.headers.get('content-length');
            const total = parseInt(contentLength, 10);
            let loaded = 0;

            const stream = new ReadableStream({
                start(controller) {
                    function push() {
                        reader.read().then(({ done, value }) => {
                            if (done) {
                                controller.close();
                                updateProgress(progressBar, messageDiv, total, total);
                                return;
                            }
                            loaded += value.length;
                            updateProgress(progressBar, messageDiv, loaded, total);
                            controller.enqueue(value);
                            push();
                        }).catch(error => {
                            console.error('Error:', error);
                            messageDiv.textContent = "Error downloading image.";
                        });
                    }
                    push();
                }
            });

            const blob = await new Response(stream).blob();
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = `${imageName.replace("/", "_")}.tar`;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
        } else if (response.status === 404) {
            throw new Error('Image not found');
        } else {
            throw new Error('Download failed');
        }
    } catch (error) {
        console.error('Error:', error);
        if (error.message === 'Image not found') {
            messageDiv.textContent = "Error: Docker image not found."; // Show not found message
        } else {
            messageDiv.innerHTML = "Error downloading image.<br>Check the image name and tag."; // Show error message in two lines
        }
    } finally {
        submitButton.disabled = false; // Re-enable the submit button after download
    }
}

async function handlePipFormSubmit(event) {
    event.preventDefault(); // Prevent the form from submitting the traditional way
    const submitButton = document.getElementById('pip-submit-button');
    const messageDiv = document.getElementById('pip-message');
    submitButton.disabled = true; // Disable the submit button
    messageDiv.textContent = "Downloading dependencies..."; // Show downloading message
    messageDiv.style.display = 'block';

    const formData = new FormData(event.target);
    try {
        const response = await fetch('/download-dependencies', {
            method: 'POST',
            body: formData
        });
        if (response.ok) {
            const blob = await response.blob();
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = 'dependencies.tar.gz';
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            messageDiv.textContent = "Download complete!"; // Show download complete message
        } else {
            throw new Error('Download failed');
        }
    } catch (error) {
        console.error('Error:', error);
        messageDiv.innerHTML = "Error downloading dependencies.<br>Please try again."; // Show error message in two lines
    } finally {
        submitButton.disabled = false; // Re-enable the submit button after download
    }
}

async function handleDebFormSubmit(event) {
    event.preventDefault(); // Prevent the form from submitting the traditional way
    const submitButton = document.getElementById('deb-submit-button');
    const messageDiv = document.getElementById('deb-message');
    submitButton.disabled = true; // Disable the submit button
    messageDiv.textContent = "Downloading Debian packages..."; // Show downloading message
    messageDiv.style.display = 'block';

    const formData = new FormData(event.target);
    try {
        const response = await fetch('/download-deb-packages', {
            method: 'POST',
            body: formData
        });
        if (response.ok) {
            const blob = await response.blob();
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = 'deb-packages.tar.gz';
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            messageDiv.textContent = "Download complete!"; // Show download complete message
        } else {
            throw new Error('Download failed');
        }
    } catch (error) {
        console.error('Error:', error);
        messageDiv.innerHTML = "Error downloading Debian packages.<br>Please try again."; // Show error message in two lines
    } finally {
        submitButton.disabled = false; // Re-enable the submit button after download
    }
}

function updateProgress(progressBar, messageDiv, loaded, total) {
    const percent = Math.round((loaded / total) * 100);
    progressBar.style.width = `${percent}%`;
    progressBar.textContent = `${percent}%`;
    if (percent >= 100) {
        messageDiv.textContent = "Download complete!";
        messageDiv.style.display = 'block';
    }
}

async function handlePipFormSubmit(event) {
    event.preventDefault();
    const submitButton = document.getElementById('pip-submit-button');
    const messageDiv = document.getElementById('pip-message');
    const progressBar = document.getElementById('progress-bar');
    const progressContainer = document.getElementById('progress-container');
    submitButton.disabled = true;
    messageDiv.textContent = "Downloading dependencies...";
    messageDiv.style.display = 'block';
    progressContainer.style.display = 'block';
    progressBar.style.width = '0%'; // Reset progress bar

    const formData = new FormData(event.target);

    try {
        const response = await fetch('/download-dependencies', {
            method: 'POST',
            body: formData
        });
        if (response.ok) {
            const reader = response.body.getReader();
            const contentLength = response.headers.get('content-length');
            const total = parseInt(contentLength, 10);
            let loaded = 0;

            const stream = new ReadableStream({
                start(controller) {
                    function push() {
                        reader.read().then(({ done, value }) => {
                            if (done) {
                                controller.close();
                                updateProgress(progressBar, messageDiv, total, total);
                                return;
                            }
                            loaded += value.length;
                            updateProgress(progressBar, messageDiv, loaded, total);
                            controller.enqueue(value);
                            push();
                        }).catch(error => {
                            console.error('Error:', error);
                            messageDiv.textContent = "Error downloading dependencies.";
                        });
                    }
                    push();
                }
            });

            const blob = await new Response(stream).blob();
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = 'dependencies.tar.gz';
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
        } else {
            throw new Error('Download failed');
        }
    } catch (error) {
        console.error('Error:', error);
        messageDiv.innerHTML = "Error downloading dependencies.<br>Please try again.";
    } finally {
        submitButton.disabled = false;
    }
}

function openTab(event, tabName) {
    const tabContents = document.getElementsByClassName("tabcontent");
    for (let i = 0; i < tabContents.length; i++) {
        tabContents[i].style.display = "none";
    }
    const tabLinks = document.getElementsByClassName("tablink");
    for (let i = 0; i < tabLinks.length; i++) {
        tabLinks[i].className = tabLinks[i].className.replace(" active", "");
    }
    document.getElementById(tabName).style.display = "block";
    event.currentTarget.className += " active";
}

window.onload = () => {
    document.getElementById("defaultOpen").click(); // Open the default tab
};