Update static/js/index.js

static/js/index.js

@@ -172,6 +172,86 @@ async function handlePipFormSubmit(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 {
+            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');
@@ -254,72 +334,87 @@ function updateProgress(progressBar, messageDiv, loaded, total) {
     }
 }
 
-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
+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%';
+    }
+}
 
-    const formData = new FormData(event.target);
+// 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
 
-    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 formData = new FormData(event.target);
 
-            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();
-                }
-            });
+//     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 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;
-    }
-}
+//             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");