Update static/js/index.js

static/js/index.js

@@ -1,235 +1,271 @@
-
-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
+
+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 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
 };