Estoy creando mi primera aplicación web con Flask. Soy nuevo en html/JavaScript/CSS. Tenga paciencia conmigo.
La aplicación hace lo siguiente: El usuario carga un archivo de Excel de la siguiente manera:
<form method="POST" enctype="multipart/form-data"> <input type="file" name="file" id="file" />Luego seleccionan ciertos parámetros usando listas desplegables. Cuando el usuario hace clic en "Enviar", los datos se manipulan mediante pandas y se exporta un nuevo archivo en Excel.
Logré agregar una rueda giratoria al botón "enviar" usando html y CSS. Agregué un detector de eventos a mi JavaScript para que el control giratorio se active cuando se hace clic en el botón. Por el momento, la ruleta se ejecuta indefinidamente, sin embargo, me gustaría que la ruleta se detuviera y que el texto del botón volviera a "enviar" una vez que finalice la operación, es decir, la exportación esté completa. ¿Alguien sabe cómo puedo lograr esto?
Aquí está mi html:
<button type="submit" id="submit" class="button"> <span class="button__text">Submit</span> </button>Aquí está mi CSS:
<style> .button { position: relative; padding: 8px 16px; background: #009579; border: none; outline: none; border-radius: 2px; cursor: pointer; } .button:active { background: #007a63; } .button__text { font: bold 20px "Quicksand", san-serif; color: #ffffff; transition: all 0.2s; } .button--loading .button__text { visibility: hidden; opacity: 0; } .button--loading::after { content: ""; position: absolute; width: 16px; height: 16px; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border: 4px solid transparent; border-top-color: #ffffff; border-radius: 50%; animation: button-loading-spinner 1s ease infinite; } /*animate spinner - spin from 0 to 1 turn*/ @keyframes button-loading-spinner { from { transform: rotate(0turn); } to { transform: rotate(1turn); } </style>Aquí está mi JavaScript:
<script type="text/javascript"> (() => { const elem = document.getElementById('submit'); elem.disabled = false; elem.addEventListener('click', e=> { elem.classList.add('button--loading'); }); })(); </script>Básicamente, su interfaz (el HTML/Javascript) necesita alguna forma de saber cuándo "se completa la exportación". Dependiendo de su definición de "exportar" y "completar".
En el nivel más rudimentario, podría hacer que la interfaz sondee el servidor cada segundo después de que comience la carga, y hacer que el servidor devuelva algún tipo de estado sobre cuál es el estado del proceso. Esto podría ser tan simple como:
GET /status/1234
> {"status": "IN_PROGRESS"}
que, cuando la "exportación está completa" cambia a:
> {"status": "COMPLETE"}
Y cuando la interfaz recibe el estado COMPLETO, elimina la rueda giratoria. Observe el 1234 . Necesitará alguna forma de identificar la carga en curso. Una forma de hacer esto sería asignarle una identificación aleatoria cuando acepta el formulario por primera vez, de modo que la POST /upload inicial devuelva > {'id': 1234} que el cliente puede usar para el sondeo posterior.
Si "la exportación está completa" en realidad solo significa que el archivo terminó de cargarse, aún puede usar un método de sondeo, pero una forma mucho más hábil es usar el método del cliente (navegador web) para determinar cuántos bytes se han enviado (vea esto SO respuesta ).