From 8455ade1c63a1d0dd9b118533dd209eee3712ce9 Mon Sep 17 00:00:00 2001 From: Fernando Escobar Robles Date: Mon, 16 Jun 2025 20:40:50 -0600 Subject: [PATCH] correccion atleta vista --- public/js/atleta.js | 45 ++++++++++++++++++++++++++++++------------ public/js/piscina.js | 42 +++++++++++++++++++++------------------ public/js/simulador.js | 44 +++++++++++++++++++++++++++++------------ 3 files changed, 86 insertions(+), 45 deletions(-) diff --git a/public/js/atleta.js b/public/js/atleta.js index 168c8e0..2aab539 100644 --- a/public/js/atleta.js +++ b/public/js/atleta.js @@ -84,8 +84,8 @@ function logout() { window.location.href = "../index.html"; } -function verSimulador(rutinaId, index) { - window.location.href = `simulador.html?routineId=${rutinaId}&formationIndex=${index}`; +function verSimuladorCompleto(rutinaId) { + window.location.href = `simulador.html?routineId=${rutinaId}`; } async function cargarAsignaciones() { @@ -107,29 +107,48 @@ async function cargarAsignaciones() { return; } - contenedor.innerHTML = ''; + // Agrupar por rutinaId + const grupos = {}; formaciones.forEach(f => { + if (!grupos[f.rutinaId]) { + grupos[f.rutinaId] = { + nombre: f.rutinaNombre, + formaciones: [] + }; + } + grupos[f.rutinaId].formaciones.push(f); + }); + + contenedor.innerHTML = ''; + + Object.entries(grupos).forEach(([rutinaId, grupo]) => { const card = document.createElement("div"); card.className = "card text-start my-3 shadow-sm"; + const formacionesHTML = grupo.formaciones.map(f => ` +
+ ${traducciones[langActual].formacion}: ${f.nombreColoquial || "—"}
+ ${traducciones[langActual].duracion}: ${f.duracion || "?"}s
+ ${traducciones[langActual].notas}: ${f.notasTacticas || "—"}
+ ${traducciones[langActual].rol}: ${f.atleta.rol || "—"} | + ${traducciones[langActual].id}: ${f.atleta.idPersonalizado || "—"} | + ${traducciones[langActual].figura}: ${f.atleta.figura || "—"} +
+ `).join(''); + card.innerHTML = `
-
${f.rutinaNombre || traducciones[langActual].rutinaSinNombre}
-
${traducciones[langActual].formacion}: ${f.nombreColoquial || "(sin nombre)"}
-

- ${traducciones[langActual].duracion}: ${f.duracion || "?"}s
- ${traducciones[langActual].notas}: ${f.notasTacticas || "—"}
- ${traducciones[langActual].rol}: ${f.atleta.rol || "N/A"} | - ${traducciones[langActual].id}: ${f.atleta.idPersonalizado || "N/A"} | - ${traducciones[langActual].figura}: ${f.atleta.figura || "—"} -

-
`; + contenedor.appendChild(card); }); + } catch (err) { console.error("❌ Error al obtener formaciones:", err); contenedor.innerHTML = `

${traducciones[langActual].errorCarga}

`; diff --git a/public/js/piscina.js b/public/js/piscina.js index a82076f..bcd3bc2 100644 --- a/public/js/piscina.js +++ b/public/js/piscina.js @@ -610,26 +610,30 @@ function animarTransicion(nuevaFormacion) { return a; }); - const body = { - nombreColoquial: nombre, - notasTacticas: notas, - duracion: duracion || 0, - atletas: formacionActual.map(a => ({ - atletaId: a.atletaId, - idPersonalizado: a.idPersonalizado, - x: a.x, - y: a.y, - rol: a.rol, - grupo: a.grupo, - direccion: a.direccion, - figura: a.figura, - tipoElemento: a.tipoElemento, - codigoElemento: a.codigoElemento, - tipoPiscina: tipoPiscinaSelect.value, + const body = { + nombreColoquial: nombre, + notasTacticas: notas, + duracion: duracion || 0, + atletas: formacionActual.map(a => ({ + atletaId: a.atletaId, + idPersonalizado: a.idPersonalizado, + x: a.x, + y: a.y, + rol: a.rol, + grupo: a.grupo, + direccion: a.direccion, + figura: a.figura, + tipoElemento: a.tipoElemento, + codigoElemento: a.codigoElemento, + tipoPiscina: tipoPiscinaSelect.value, + })) + }; - - })) - }; + // Validación extra: asegura que se esté usando bien el ID de rutina +if (!rutinaId) { + alert('No se puede guardar porque falta el ID de rutina.'); + return; +} const method = editIndex === null ? 'POST' : 'PUT'; const endpoint = editIndex === null diff --git a/public/js/simulador.js b/public/js/simulador.js index 9146bc8..8c65261 100644 --- a/public/js/simulador.js +++ b/public/js/simulador.js @@ -66,7 +66,8 @@ document.getElementById('langSelector')?.addEventListener('change', async (e) => document.addEventListener("DOMContentLoaded", async () => { const rutinaId = new URLSearchParams(window.location.search).get("routineId"); - const formationIndex = parseInt(new URLSearchParams(window.location.search).get("formationIndex")); + const formationIndexParam = new URLSearchParams(window.location.search).get("formationIndex"); + const formationIndex = formationIndexParam !== null ? parseInt(formationIndexParam) : 0; const userId = sessionStorage.getItem("userId"); if (userId) { @@ -87,8 +88,8 @@ document.addEventListener("DOMContentLoaded", async () => { translateStatic(); - if (!rutinaId || isNaN(formationIndex)) { - return alert("No se proporcionó ID de rutina o índice de formación."); + if (!rutinaId) { + return alert("No se proporcionó ID de rutina."); } const tituloRutina = document.getElementById("tituloRutina"); @@ -221,19 +222,36 @@ document.addEventListener("DOMContentLoaded", async () => { } const formaciones = await fetch(`/api/rutinas/${rutinaId}/formations`).then(res => res.json()); - const formacion = formaciones[formationIndex]; - if (!formacion) { - alert("La formación solicitada no existe."); + if (!Array.isArray(formaciones) || formaciones.length === 0) { + alert("La rutina no tiene formaciones."); return; } - formacion.atletas.forEach(dibujarAtleta); + // Crear botones de la línea de tiempo + formaciones.forEach((f, i) => { + const block = document.createElement("button"); + block.className = "btn btn-outline-primary btn-sm me-2 step"; + block.textContent = `${f.nombreColoquial || `Formación ${i + 1}`} (${f.duracion || '?'}s)`; + block.dataset.index = i; + block.title = f.notasTacticas || ''; + timeline.appendChild(block); + }); - const block = document.createElement("button"); - block.className = "btn btn-outline-primary btn-sm me-2 step"; - block.textContent = `${formacion.nombreColoquial || `Formación ${formationIndex + 1}`} (${formacion.duracion || '?'}s)`; - block.dataset.index = formationIndex; - block.title = formacion.notasTacticas || ''; - timeline.appendChild(block); + function renderFormacion(index) { + const formacion = formaciones[index]; + if (!formacion) return; + + layer.destroyChildren(); + dibujarCuadricula(layer, piscinaWidth, piscinaHeight); + formacion.atletas.forEach(dibujarAtleta); + } + + renderFormacion(formationIndex); + + timeline.addEventListener('click', (e) => { + if (!e.target.classList.contains('step')) return; + const index = parseInt(e.target.dataset.index); + renderFormacion(index); + }); });