Update static/js/index.js

static/js/index.js

@@ -68,22 +68,90 @@ 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');
+//     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 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 blob = await response.blob();
+            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';
@@ -92,13 +160,13 @@ async function handlePipFormSubmit(event) {
             document.body.appendChild(a);
             a.click();
             window.URL.revokeObjectURL(url);
-            messageDiv.textContent = "Download complete!"; // Show download complete message
         } else {
-            throw new Error('Download failed');
+            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."; // Show error message in two lines
+        messageDiv.innerHTML = "Error downloading dependencies.<br>Please try again.";
     } finally {
         submitButton.disabled = false; // Re-enable the submit button after download
     }