static/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');
//     const progressBar = document.getElementById('progress-bar');
//     const progressContainer = document.getElementById('progress-container');
//     submitButton.disabled = true; // Disable the submit button
//     messageDiv.textContent = "Downloading dependencies..."; // Show downloading message
//     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 {
//             const errorMessage = await response.text();
//             throw new Error(errorMessage || 'Download failed');
//         }
//     } catch (error) {
//         console.error('Error:', error);
//         messageDiv.innerHTML = "Error downloading dependencies.<br>Please try again.";
//     } 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');
//     const progressBar = document.getElementById('progress-bar');
//     const progressContainer = document.getElementById('progress-container');
//     submitButton.disabled = true; // Disable the submit button
//     messageDiv.textContent = "Downloading dependencies..."; // Show downloading message
//     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 = contentLength ? parseInt(contentLength, 10) : null;
//             let loaded = 0;

//             if (!total) {
//                 // Handle case where content-length is not provided
//                 messageDiv.textContent = "Warning: Content length is not provided.";
//             }

//             const stream = new ReadableStream({
//                 start(controller) {
//                     function push() {
//                         reader.read().then(({ done, value }) => {
//                             if (done) {
//                                 controller.close();
//                                 if (total) {
//                                     updateProgress(progressBar, messageDiv, total, total);
//                                 } else {
//                                     messageDiv.textContent = "Download complete!";
//                                 }
//                                 return;
//                             }
//                             loaded += value.length;
//                             if (total) {
//                                 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; // 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');
    const progressBar = document.getElementById('progress-bar');
    const progressContainer = document.getElementById('progress-container');
    submitButton.disabled = true; // Disable the submit button
    messageDiv.textContent = "Downloading dependencies..."; // Show downloading message
    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 = contentLength ? parseInt(contentLength, 10) : null;
            let loaded = 0;

            const stream = new ReadableStream({
                start(controller) {
                    function push() {
                        reader.read().then(({ done, value }) => {
                            if (done) {
                                controller.close();
                                if (total) {
                                    updateProgress(progressBar, messageDiv, total, total);
                                } else {
                                    messageDiv.textContent = "Download complete!";
                                }
                                return;
                            }
                            loaded += value.length;
                            if (total) {
                                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; // Re-enable the submit button after download
    }
}

function updateProgress(progressBar, messageDiv, loaded, total) {
    if (total > 0) {
        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';
        }
    } else {
        progressBar.style.width = '0%';
        progressBar.textContent = '0%';
    }
}
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
};