Spaces:
Sleeping
Sleeping
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sistema de Gesti贸n de Tareas</title> | |
| <script type="module" src="https://cdn.jsdelivr.net/npm/@gradio/client@0.1.4/dist/index.min.js"></script> | |
| <link href='https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.min.css' rel='stylesheet' /> | |
| <script src='https://cdn.jsdelivr.net/npm/fullcalendar@5.10.2/main.min.js'></script> | |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; | |
| line-height: 1.6; | |
| margin: 0; | |
| padding: 20px; | |
| background-color: #f4f4f4; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| background-color: #fff; | |
| padding: 20px; | |
| border-radius: 5px; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | |
| } | |
| h1 { | |
| color: #333; | |
| text-align: center; | |
| } | |
| #calendar { | |
| margin-top: 20px; | |
| height: 600px; | |
| } | |
| gradio-app { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Sistema de Gesti贸n de Tareas</h1> | |
| <gradio-app src="https://tamagamis-cronodevcv.hf.space"></gradio-app> | |
| <div id="calendar"></div> | |
| </div> | |
| <script> | |
| let calendar; | |
| let gradioApp; | |
| async function handleLoadComplete() { | |
| console.log("La aplicaci贸n Gradio ha terminado de renderizarse"); | |
| gradioApp = document.querySelector("gradio-app"); | |
| await initializeCalendar(); | |
| } | |
| document.querySelector("gradio-app").addEventListener("render", handleLoadComplete); | |
| async function initializeCalendar() { | |
| var calendarEl = document.getElementById('calendar'); | |
| calendar = new FullCalendar.Calendar(calendarEl, { | |
| initialView: 'dayGridMonth', | |
| height: 'auto', | |
| events: await getCalendarData(), | |
| eventClick: function(info) { | |
| updateTaskStatus(info.event); | |
| } | |
| }); | |
| calendar.render(); | |
| } | |
| async function getCalendarData() { | |
| const calendarDataElement = gradioApp.shadowRoot.querySelector('#calendar-data'); | |
| if (calendarDataElement) { | |
| return JSON.parse(calendarDataElement.textContent); | |
| } | |
| return []; | |
| } | |
| async function updateTaskStatus(event) { | |
| const taskId = event.extendedProps.id; | |
| const currentStatus = event.extendedProps.status; | |
| const newStatus = prompt(`Actualizar estado de la tarea "${event.title}"`, currentStatus); | |
| if (newStatus && newStatus !== currentStatus) { | |
| const taskIdInput = gradioApp.shadowRoot.querySelector('#task-id'); | |
| const newStatusInput = gradioApp.shadowRoot.querySelector('#new-status'); | |
| const updateStatusButton = gradioApp.shadowRoot.querySelector('#update-status'); | |
| taskIdInput.value = taskId; | |
| newStatusInput.value = newStatus; | |
| updateStatusButton.click(); | |
| // Esperar a que se actualice el estado | |
| await new Promise(resolve => setTimeout(resolve, 1000)); | |
| // Actualizar el calendario | |
| calendar.removeAllEvents(); | |
| calendar.addEventSource(await getCalendarData()); | |
| } | |
| } | |
| // Observador para detectar cambios en el DOM y actualizar el calendario | |
| const observer = new MutationObserver((mutations) => { | |
| mutations.forEach((mutation) => { | |
| if (mutation.type === 'childList') { | |
| initializeCalendar(); | |
| } | |
| }); | |
| }); | |
| observer.observe(document.querySelector("gradio-app").shadowRoot, { childList: true, subtree: true }); | |
| </script> | |
| </body> | |
| </html> |