Update static/js/index.js

static/js/index.js

@@ -136,6 +136,85 @@ async function handleDockerFormSubmit(event) {
 //     }
 // }
 
+// 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');
@@ -155,18 +234,13 @@ async function handlePipFormSubmit(event) {
             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() {