141 lines
4.0 KiB
JavaScript
141 lines
4.0 KiB
JavaScript
let elements = [];
|
|
|
|
const canvas = document.getElementById('poolCanvas');
|
|
const ctx = canvas.getContext('2d');
|
|
let currentElement = null;
|
|
|
|
// Dibujar piscina
|
|
function drawPool() {
|
|
ctx.fillStyle = '#b3e0f2';
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(canvas.width / 2, 0);
|
|
ctx.lineTo(canvas.width / 2, canvas.height);
|
|
ctx.strokeStyle = '#ffffff';
|
|
ctx.setLineDash([5, 5]);
|
|
ctx.stroke();
|
|
ctx.setLineDash([]);
|
|
}
|
|
drawPool();
|
|
|
|
// Clic en piscina para ubicar elemento
|
|
canvas.addEventListener('click', (e) => {
|
|
if (!currentElement) return;
|
|
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = ((e.clientX - rect.left) / canvas.width) * 25;
|
|
const y = ((e.clientY - rect.top) / canvas.height) * 20;
|
|
|
|
currentElement.position = { x: parseFloat(x.toFixed(2)), y: parseFloat(y.toFixed(2)) };
|
|
drawCircle(x, y);
|
|
});
|
|
|
|
function drawCircle(x, y) {
|
|
const px = (x / 25) * canvas.width;
|
|
const py = (y / 20) * canvas.height;
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(px, py, 6, 0, 2 * Math.PI);
|
|
ctx.fillStyle = 'red';
|
|
ctx.fill();
|
|
}
|
|
|
|
// Agregar elemento técnico
|
|
function addElement() {
|
|
const code = document.getElementById('elementSelect').value;
|
|
const start = parseFloat(document.getElementById('start').value);
|
|
const duration = parseFloat(document.getElementById('durationElem').value);
|
|
|
|
if (isNaN(start) || isNaN(duration)) {
|
|
alert('Completa tiempo de inicio y duración correctamente.');
|
|
return;
|
|
}
|
|
|
|
const element = {
|
|
code,
|
|
startTime: start,
|
|
duration,
|
|
position: null
|
|
};
|
|
|
|
currentElement = element;
|
|
elements.push(element);
|
|
|
|
const li = document.createElement('li');
|
|
li.className = 'list-group-item';
|
|
li.textContent = `${code} desde ${start}s, duración ${duration}s (haz clic en piscina para posicionar)`;
|
|
document.getElementById('elementListPreview').appendChild(li);
|
|
}
|
|
|
|
// Cargar atletas al iniciar
|
|
window.addEventListener('DOMContentLoaded', async () => {
|
|
try {
|
|
const res = await fetch('/api/atletas'); // Debe estar implementado en backend
|
|
const atletas = await res.json();
|
|
const lista = document.getElementById('listaAtletas');
|
|
|
|
atletas.forEach(atleta => {
|
|
const container = document.createElement('div');
|
|
|
|
const checkbox = document.createElement('input');
|
|
checkbox.type = 'checkbox';
|
|
checkbox.name = 'participantes';
|
|
checkbox.value = atleta._id;
|
|
|
|
const label = document.createElement('label');
|
|
label.textContent = atleta.nombre || atleta.nombreCompleto || atleta.email;
|
|
|
|
container.appendChild(checkbox);
|
|
container.appendChild(label);
|
|
lista.appendChild(container);
|
|
});
|
|
} catch (err) {
|
|
console.error('Error cargando atletas:', err);
|
|
}
|
|
});
|
|
|
|
// Guardar rutina en Mongo
|
|
async function saveRoutine() {
|
|
const title = document.getElementById('title').value;
|
|
const duration = parseInt(document.getElementById('duration').value);
|
|
const language = document.getElementById('language').value;
|
|
|
|
const nombreCompetencia = document.getElementById('nombreCompetencia').value;
|
|
const tipoCompetencia = document.getElementById('tipoCompetencia').value;
|
|
const modalidad = document.getElementById('modalidad').value;
|
|
const participantes = Array.from(document.querySelectorAll('input[name="participantes"]:checked')).map(el => el.value);
|
|
|
|
if (!title || !duration || elements.length === 0 || !nombreCompetencia || !tipoCompetencia || !modalidad) {
|
|
alert('Por favor completa todos los campos.');
|
|
return;
|
|
}
|
|
|
|
const routine = {
|
|
title,
|
|
duration,
|
|
language,
|
|
createdBy: "coach-id-ejemplo",
|
|
musicUrl: "",
|
|
elements,
|
|
nombreCompetencia,
|
|
tipoCompetencia,
|
|
modalidad,
|
|
participantes
|
|
};
|
|
|
|
const res = await fetch('/api/routines', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(routine)
|
|
});
|
|
|
|
const result = await res.json();
|
|
if (res.ok) {
|
|
alert('✅ Rutina guardada exitosamente');
|
|
window.location.reload();
|
|
} else {
|
|
alert('❌ Error: ' + result.error);
|
|
}
|
|
}
|