From 1a093c579755d006bab8450f9a24c80bd6e5348e Mon Sep 17 00:00:00 2001
From: Chavez Anton Manuel Stephano
 <105468040+Darkas-Overgold@users.noreply.github.com>
Date: Tue, 19 Nov 2024 09:11:25 -0500
Subject: [PATCH] Update script.js

---
 static/script.js | 57 ++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 50 insertions(+), 7 deletions(-)

diff --git a/static/script.js b/static/script.js
index 703d467..18b1769 100644
--- a/static/script.js
+++ b/static/script.js
@@ -1,10 +1,54 @@
-const form = document.getElementById('upload-form');
-form.onsubmit = async (e) => {
+const dragDropArea = document.getElementById('drag-drop-area');
+const fileInput = document.getElementById('file-input');
+const uploadButton = document.getElementById('upload-button');
+let selectedFile = null; // Variable para almacenar el archivo seleccionado
+
+// Mostrar el área de drag-and-drop como activa al arrastrar un archivo
+dragDropArea.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dragDropArea.classList.add('drag-over');
+});
+
+dragDropArea.addEventListener('dragleave', () => {
+    dragDropArea.classList.remove('drag-over');
+});
+
+// Manejar el evento drop
+dragDropArea.addEventListener('drop', (e) => {
     e.preventDefault();
+    dragDropArea.classList.remove('drag-over');
+    selectedFile = e.dataTransfer.files[0];
+
+    if (selectedFile) {
+        dragDropArea.querySelector('p').textContent = `Archivo seleccionado: ${selectedFile.name}`;
+    }
+});
+
+// Hacer clic para seleccionar un archivo
+dragDropArea.addEventListener('click', () => {
+    fileInput.click();
+});
+
+// Manejar el cambio del input file
+fileInput.addEventListener('change', () => {
+    selectedFile = fileInput.files[0];
+    if (selectedFile) {
+        dragDropArea.querySelector('p').textContent = `Archivo seleccionado: ${selectedFile.name}`;
+    }
+});
+
+// Manejar el clic en el botón "Subir Archivo"
+uploadButton.addEventListener('click', async () => {
+    if (!selectedFile) {
+        alert('Por favor, selecciona un archivo primero.');
+        return;
+    }
+
+    const formData = new FormData();
+    formData.append('file', selectedFile);
 
-    const formData = new FormData(form);
-    const response = await fetch("/upload", {
-        method: "POST",
+    const response = await fetch('/upload', {
+        method: 'POST',
         body: formData
     });
 
@@ -26,7 +70,6 @@ form.onsubmit = async (e) => {
         results.innerHTML = `
             <h2>Resultados del Grafo</h2>
             <p id="peso_total">Peso total del MST: ${data.peso_total} USD</p>
-            <!-- Contenedor de los gráficos -->
             <div class="grafico-container">
                 <div class="grafico-box">
                     <h3>Grafo Completo</h3>
@@ -40,4 +83,4 @@ form.onsubmit = async (e) => {
             <a href="/">Volver a la página principal</a>
         `;
     }
-};
+});