Implementacion idioma en paginas del coach
This commit is contained in:
JorgeLuisOZ
parent
f16ca05a49
commit
dc8bc854f9
|
|
@ -5,16 +5,17 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title data-i18n="title">Crear Rutina – SwimmingArt</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
|
||||
<link rel="stylesheet" href="css/navbar.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- NAV -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top shadow-sm px-4 py-3">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand fw-bold text-white" href="#">SwimmingArt</a>
|
||||
<a class="navbar-brand fw-bold text-white">SwimmingArt</a>
|
||||
<div class="ms-auto d-flex gap-4 align-items-center">
|
||||
<a href="coach.html" class="nav-link text-white" data-i18n="nav.init">Inicializar Rutina</a>
|
||||
<a href="equipoDisponibles.html" class="nav-link text-white" data-i18n="nav.equip">Equipos Disponibles</a>
|
||||
<a href="piscina.html" class="nav-link text-white" data-i18n="nav.pool">Piscina</a>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-light dropdown-toggle d-flex align-items-center gap-2 px-3 py-1" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
|
||||
|
|
@ -27,18 +28,29 @@
|
|||
aria-labelledby="userDropdown"
|
||||
style="background-color: #0d6efd; color: white; border-radius: 0 0 8px 8px; min-width: 100%; max-width: 250px;">
|
||||
|
||||
<li>
|
||||
<select id="langSelector" class="form-select form-select-sm mb-3"
|
||||
style="border: none; border-radius: 6px; background-color: white; color: black; padding: 0.4rem 0.5rem;">
|
||||
<option value="es">Español</option>
|
||||
<option value="en">English</option>
|
||||
<option value="fr">Français</option>
|
||||
</select>
|
||||
<!-- Mostrar rol -->
|
||||
<li class="mb-2">
|
||||
<span id="rolUsuarioDropdown" class="fw-semibold text-white d-block">Coach</span>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<button class="btn btn-danger btn-sm w-100" onclick="logout()">Salir</button>
|
||||
<!-- Selector de idioma alineado -->
|
||||
<li class="mb-1">
|
||||
<div class="d-flex align-items-center justify-content-center gap-2 w-100">
|
||||
<i class="bi bi-globe" style="color: white; font-size: 1rem;"></i>
|
||||
<select id="langSelector" class="form-select form-select-sm" style="border: none; border-radius: 6px; max-width: 140px;">
|
||||
<option value="es">Español</option>
|
||||
<option value="en">English</option>
|
||||
<option value="fr">Français</option>
|
||||
</select>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Botón salir pegado -->
|
||||
<li>
|
||||
<button class="btn btn-danger btn-sm w-100" onclick="logout()" data-i18n="logout">Salir</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,14 +17,6 @@ body {
|
|||
color: #212529;
|
||||
}
|
||||
|
||||
/* === Navbar === */
|
||||
.navbar {
|
||||
min-height: 72px;
|
||||
}
|
||||
.navbar .nav-link {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* === Cards === */
|
||||
.card {
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -13,8 +13,12 @@ body {
|
|||
}
|
||||
|
||||
.navbar a:hover {
|
||||
text-decoration: underline;
|
||||
color: #e6e6e6 !important;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
padding: 0.3rem 0.5rem;
|
||||
transform: scale(1.05);
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.form-section {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,11 @@
|
|||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Equipos Disponibles</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/equipoDisponible.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
|
||||
|
||||
<link rel="stylesheet" href="css/equipoDisponible.css">
|
||||
<link rel="stylesheet" href="css/navbar.css">
|
||||
<style>
|
||||
.fade-out {
|
||||
opacity: 0;
|
||||
|
|
@ -17,11 +20,47 @@
|
|||
<!-- NAV -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top shadow-sm px-4 py-3">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand fw-bold text-white" href="#">SwimmingArt</a>
|
||||
<div class="ms-auto d-flex gap-4">
|
||||
<a href="coach.html" class="nav-link text-white">Inicializar Rutina</a>
|
||||
<a href="equipoDisponibles.html" class="nav-link text-white">Equipos Disponibles</a>
|
||||
<a href="piscina.html" class="nav-link text-white">Piscina</a>
|
||||
<a class="navbar-brand fw-bold text-white">SwimmingArt</a>
|
||||
<div class="ms-auto d-flex gap-4 align-items-center">
|
||||
<a href="coach.html" class="nav-link text-white" data-i18n="nav.init">Inicializar Rutina</a>
|
||||
<a href="equipoDisponibles.html" class="nav-link text-white" data-i18n="nav.equip">Equipos Disponibles</a>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-light dropdown-toggle d-flex align-items-center gap-2 px-3 py-1" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
|
||||
<path d="M11 10a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
|
||||
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-4.546 12.174c.03-.256.071-.512.124-.767C4.28 10.798 5.94 10 8 10s3.72.798 4.422 2.407c.053.255.094.511.124.767A7 7 0 0 0 8 1z"/>
|
||||
</svg>
|
||||
<span id="nombreUsuarioHeader" class="fw-semibold">Usuario</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end text-center p-3"
|
||||
aria-labelledby="userDropdown"
|
||||
style="background-color: #0d6efd; color: white; border-radius: 0 0 8px 8px; min-width: 100%; max-width: 250px;">
|
||||
|
||||
<!-- Mostrar rol -->
|
||||
<li class="mb-2">
|
||||
<span id="nombreUsuarioDropdown" class="fw-semibold text-white d-block">Coach</span>
|
||||
</li>
|
||||
|
||||
<!-- Selector de idioma alineado -->
|
||||
<li class="mb-1">
|
||||
<div class="d-flex align-items-center justify-content-center gap-2 w-100">
|
||||
<i class="bi bi-globe" style="color: white; font-size: 1rem;"></i>
|
||||
<select id="langSelector" class="form-select form-select-sm" style="border: none; border-radius: 6px; max-width: 140px;">
|
||||
<option value="es">Español</option>
|
||||
<option value="en">English</option>
|
||||
<option value="fr">Français</option>
|
||||
</select>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Botón salir pegado -->
|
||||
<li>
|
||||
<button class="btn btn-danger btn-sm w-100" onclick="logout()" data-i18n="logout">Salir</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -53,79 +92,7 @@
|
|||
|
||||
<!-- Scripts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
let rutinaAEliminarId = null;
|
||||
let cardAEliminar = null;
|
||||
|
||||
async function loadRoutines() {
|
||||
const response = await fetch('/api/rutinas');
|
||||
const routines = await response.json();
|
||||
const routinesList = document.getElementById('routinesList');
|
||||
routinesList.innerHTML = '';
|
||||
|
||||
for (const routine of routines) {
|
||||
const formaciones = await fetch(`/api/rutinas/${routine._id}/formations`).then(res => res.json());
|
||||
const ultimaFormacion = formaciones?.at(-1);
|
||||
const atletas = ultimaFormacion?.atletas || [];
|
||||
|
||||
const atletasHTML = atletas.length
|
||||
? atletas.map(a => `<li>${a.atletaId?.name || a.idPersonalizado || 'Atleta'}${a.rol ? ' - ' + a.rol : ''}</li>`).join('')
|
||||
: '<li class="text-muted fst-italic">Sin atletas en formación</li>';
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.classList.add('card', 'border-primary', 'shadow');
|
||||
card.style.width = '300px';
|
||||
card.dataset.id = routine._id;
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw-bold">${routine.nombreCompetencia}</h5>
|
||||
<p><strong>Competencia:</strong> ${routine.tipoCompetencia}</p>
|
||||
<p><strong>Modalidad:</strong> ${routine.modalidad}</p>
|
||||
<h6 class="mt-2">Atletas:</h6>
|
||||
<ul class="text-start px-3">${atletasHTML}</ul>
|
||||
<div class="text-center d-grid gap-2 mt-3">
|
||||
<button class="btn btn-primary" onclick="redirectToPiscina('${routine._id}')">Ver detalles</button>
|
||||
<button class="btn btn-outline-danger btn-eliminar" data-id="${routine._id}">Eliminar</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
routinesList.appendChild(card);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.btn-eliminar').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
rutinaAEliminarId = btn.dataset.id;
|
||||
cardAEliminar = btn.closest('.card');
|
||||
const modal = new bootstrap.Modal(document.getElementById('confirmDeleteModal'));
|
||||
modal.show();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('btnConfirmarEliminar').addEventListener('click', async () => {
|
||||
if (!rutinaAEliminarId || !cardAEliminar) return;
|
||||
try {
|
||||
const res = await fetch(`/api/rutinas/${rutinaAEliminarId}`, { method: 'DELETE' });
|
||||
if (res.ok) {
|
||||
cardAEliminar.classList.add('fade-out');
|
||||
setTimeout(() => cardAEliminar.remove(), 400);
|
||||
} else {
|
||||
alert('Error al eliminar la rutina.');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Error al conectar con el servidor.');
|
||||
}
|
||||
bootstrap.Modal.getInstance(document.getElementById('confirmDeleteModal')).hide();
|
||||
document.activeElement.blur();
|
||||
});
|
||||
|
||||
function redirectToPiscina(routineId) {
|
||||
window.location.href = `piscina.html?routineId=${routineId}`;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', loadRoutines);
|
||||
</script>
|
||||
<script src="js/equipoDisponibles.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,217 @@
|
|||
let rutinaAEliminarId = null;
|
||||
let cardAEliminar = null;
|
||||
|
||||
const traducciones = {
|
||||
es: {
|
||||
navInit: "Inicializar Rutina",
|
||||
navEquipos: "Equipos Disponibles",
|
||||
navPiscina: "Piscina",
|
||||
createCardTitle: "Crear nuevo equipo",
|
||||
competencia: "Competencia",
|
||||
modalidad: "Modalidad",
|
||||
atletas: "Atletas",
|
||||
sinAtletas: "Sin atletas en formación",
|
||||
verDetalles: "Ver detalles",
|
||||
eliminar: "Eliminar",
|
||||
logout: "Salir"
|
||||
},
|
||||
en: {
|
||||
navInit: "Initialize Routine",
|
||||
navEquipos: "Available Teams",
|
||||
navPiscina: "Pool",
|
||||
createCardTitle: "Create new team",
|
||||
competencia: "Competition",
|
||||
modalidad: "Category",
|
||||
atletas: "Athletes",
|
||||
sinAtletas: "No athletes in formation",
|
||||
verDetalles: "View details",
|
||||
eliminar: "Delete",
|
||||
logout: "Logout"
|
||||
},
|
||||
fr: {
|
||||
navInit: "Démarrer la routine",
|
||||
navEquipos: "Équipes disponibles",
|
||||
navPiscina: "Piscine",
|
||||
createCardTitle: "Créer une nouvelle équipe",
|
||||
competencia: "Compétition",
|
||||
modalidad: "Catégorie",
|
||||
atletas: "Athlètes",
|
||||
sinAtletas: "Aucun athlète en formation",
|
||||
verDetalles: "Voir détails",
|
||||
eliminar: "Supprimer",
|
||||
logout: "Se déconnecter"
|
||||
}
|
||||
};
|
||||
|
||||
let langActual = 'es';
|
||||
|
||||
function translateStatic() {
|
||||
const navInit = document.querySelector('[data-i18n="nav.init"]');
|
||||
const navEquip = document.querySelector('[data-i18n="nav.equip"]');
|
||||
const navPool = document.querySelector('[data-i18n="nav.pool"]');
|
||||
const heading = document.querySelector('h2');
|
||||
const logoutBtn = document.querySelector('[data-i18n="logout"]');
|
||||
|
||||
if (navInit) navInit.textContent = traducciones[langActual].navInit;
|
||||
if (navEquip) navEquip.textContent = traducciones[langActual].navEquipos;
|
||||
if (navPool) navPool.textContent = traducciones[langActual].navPiscina;
|
||||
if (heading) heading.textContent = traducciones[langActual].navEquipos;
|
||||
if (logoutBtn) logoutBtn.textContent = traducciones[langActual].logout;
|
||||
}
|
||||
|
||||
document.getElementById('langSelector')?.addEventListener('change', async (e) => {
|
||||
langActual = e.target.value;
|
||||
translateStatic();
|
||||
loadRoutines();
|
||||
|
||||
const userId = sessionStorage.getItem("userId");
|
||||
if (userId) {
|
||||
await fetch(`/api/users/${userId}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ language: langActual })
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
async function loadRoutines() {
|
||||
const response = await fetch('/api/rutinas');
|
||||
const routines = await response.json();
|
||||
const routinesList = document.getElementById('routinesList');
|
||||
routinesList.innerHTML = '';
|
||||
|
||||
const createCard = document.createElement('div');
|
||||
createCard.classList.add('card', 'shadow', 'text-center', 'border-0');
|
||||
createCard.style.width = '300px';
|
||||
createCard.style.minHeight = '250px';
|
||||
createCard.style.cursor = 'pointer';
|
||||
createCard.style.display = 'flex';
|
||||
createCard.style.flexDirection = 'column';
|
||||
createCard.style.alignItems = 'center';
|
||||
createCard.style.justifyContent = 'center';
|
||||
createCard.style.background = 'linear-gradient(135deg, #0d6efd 0%, #4c94ff 100%)';
|
||||
createCard.style.color = 'white';
|
||||
createCard.style.borderRadius = '12px';
|
||||
createCard.style.transition = 'transform 0.2s ease';
|
||||
|
||||
createCard.innerHTML = `
|
||||
<div class="d-flex flex-column align-items-center justify-content-center">
|
||||
<div class="rounded-circle bg-white d-flex justify-content-center align-items-center" style="width: 64px; height: 64px;">
|
||||
<i class="bi bi-plus-lg" style="font-size: 2rem; color: #0d6efd;"></i>
|
||||
</div>
|
||||
<h6 class="mt-3 fw-semibold">${traducciones[langActual].createCardTitle}</h6>
|
||||
</div>
|
||||
`;
|
||||
|
||||
createCard.addEventListener('mouseover', () => {
|
||||
createCard.style.transform = 'scale(1.05)';
|
||||
});
|
||||
createCard.addEventListener('mouseout', () => {
|
||||
createCard.style.transform = 'scale(1)';
|
||||
});
|
||||
createCard.addEventListener('click', () => {
|
||||
window.location.href = 'coach.html';
|
||||
});
|
||||
|
||||
routinesList.appendChild(createCard); // siempre primero
|
||||
|
||||
for (const routine of routines) {
|
||||
const formaciones = await fetch(`/api/rutinas/${routine._id}/formations`).then(res => res.json());
|
||||
const ultimaFormacion = formaciones?.at(-1);
|
||||
const atletas = ultimaFormacion?.atletas || [];
|
||||
|
||||
const atletasHTML = atletas.length
|
||||
? atletas.map(a => `<li>${a.atletaId?.name || a.idPersonalizado || 'Atleta'}${a.rol ? ' - ' + a.rol : ''}</li>`).join('')
|
||||
: `<li class="text-muted fst-italic">${traducciones[langActual].sinAtletas}</li>`;
|
||||
|
||||
const card = document.createElement('div');
|
||||
card.classList.add('card', 'border-primary', 'shadow');
|
||||
card.style.width = '300px';
|
||||
card.dataset.id = routine._id;
|
||||
|
||||
card.innerHTML = `
|
||||
<div class="card-body">
|
||||
<h5 class="card-title fw-bold">${routine.nombreCompetencia}</h5>
|
||||
<p><strong>${traducciones[langActual].competencia}:</strong> ${routine.tipoCompetencia}</p>
|
||||
<p><strong>${traducciones[langActual].modalidad}:</strong> ${routine.modalidad}</p>
|
||||
<h6 class="mt-2">${traducciones[langActual].atletas}:</h6>
|
||||
<ul class="text-start px-3">${atletasHTML}</ul>
|
||||
<div class="text-center d-grid gap-2 mt-3">
|
||||
<button class="btn btn-primary" onclick="redirectToPiscina('${routine._id}')">${traducciones[langActual].verDetalles}</button>
|
||||
<button class="btn btn-danger btn-eliminar" data-id="${routine._id}">${traducciones[langActual].eliminar}</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
routinesList.appendChild(card);
|
||||
}
|
||||
|
||||
document.querySelectorAll('.btn-eliminar').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
rutinaAEliminarId = btn.dataset.id;
|
||||
cardAEliminar = btn.closest('.card');
|
||||
const modal = new bootstrap.Modal(document.getElementById('confirmDeleteModal'));
|
||||
modal.show();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('btnConfirmarEliminar').addEventListener('click', async () => {
|
||||
if (!rutinaAEliminarId || !cardAEliminar) return;
|
||||
try {
|
||||
const res = await fetch(`/api/rutinas/${rutinaAEliminarId}`, { method: 'DELETE' });
|
||||
if (res.ok) {
|
||||
cardAEliminar.classList.add('fade-out');
|
||||
setTimeout(() => cardAEliminar.remove(), 400);
|
||||
} else {
|
||||
alert('Error al eliminar la rutina.');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
alert('Error al conectar con el servidor.');
|
||||
}
|
||||
bootstrap.Modal.getInstance(document.getElementById('confirmDeleteModal')).hide();
|
||||
document.activeElement.blur();
|
||||
});
|
||||
|
||||
function redirectToPiscina(routineId) {
|
||||
window.location.href = `piscina.html?routineId=${routineId}`;
|
||||
}
|
||||
|
||||
async function loadUserInfoYIdioma() {
|
||||
const userId = sessionStorage.getItem("userId");
|
||||
|
||||
if (!userId) {
|
||||
alert("Sesión expirada, inicia sesión de nuevo.");
|
||||
window.location.href = "index.html";
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/users/${userId}`);
|
||||
const user = await res.json();
|
||||
|
||||
if (user?.name) {
|
||||
document.getElementById("nombreUsuarioHeader").textContent = user.name;
|
||||
}
|
||||
|
||||
if (user?.language && traducciones[user.language]) {
|
||||
langActual = user.language;
|
||||
const selector = document.getElementById('langSelector');
|
||||
if (selector) selector.value = langActual;
|
||||
}
|
||||
|
||||
translateStatic();
|
||||
loadRoutines();
|
||||
} catch (err) {
|
||||
console.error("❌ Error al obtener datos del usuario:", err);
|
||||
}
|
||||
}
|
||||
|
||||
function logout() {
|
||||
sessionStorage.clear();
|
||||
window.location.href = 'index.html';
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadUserInfoYIdioma();
|
||||
});
|
||||
|
|
@ -100,7 +100,7 @@ function getRegisterHTML(lang) {
|
|||
const t = translations[lang];
|
||||
return `
|
||||
<div class="text-center mb-4">
|
||||
<h2 class="fw-bold mb-3 text-primary-strong display-3">${t.create_account}</h2>
|
||||
<h2 class="fw-bold mb-3 text-primary-strong display-2">${t.create_account}</h2>
|
||||
</div>
|
||||
<form id="registerForm" class="w-100" style="max-width: 500px;">
|
||||
<div class="mb-3">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
const traducciones = {
|
||||
es: {
|
||||
title: "Crear Rutina – SwimmingArt",
|
||||
logout: "Salir",
|
||||
nav: {
|
||||
init: "Inicializar Rutina",
|
||||
equip: "Equipos Disponibles",
|
||||
|
|
@ -25,9 +26,10 @@ const traducciones = {
|
|||
},
|
||||
en: {
|
||||
title: "Create Routine – SwimmingArt",
|
||||
logout: "Logout",
|
||||
nav: {
|
||||
init: "Initialize Routine",
|
||||
equip: "Available Equipment",
|
||||
equip: "Available Teams",
|
||||
pool: "Pool"
|
||||
},
|
||||
form: {
|
||||
|
|
@ -49,6 +51,7 @@ const traducciones = {
|
|||
},
|
||||
fr: {
|
||||
title: "Créer une Routine – SwimmingArt",
|
||||
logout: "Se déconnecter",
|
||||
nav: {
|
||||
init: "Initialiser la Routine",
|
||||
equip: "Équipements Disponibles",
|
||||
|
|
@ -93,7 +96,6 @@ function updateLanguage(lang) {
|
|||
}
|
||||
});
|
||||
|
||||
// actualizar el texto si la duración está vacía
|
||||
const input = document.getElementById("duration");
|
||||
if (input && !input.dataset.segundos) {
|
||||
input.value = traducciones[langActual].form.durationPlaceholder;
|
||||
|
|
@ -101,7 +103,33 @@ function updateLanguage(lang) {
|
|||
}
|
||||
|
||||
document.getElementById("langSelector").addEventListener("change", function () {
|
||||
updateLanguage(this.value);
|
||||
const selectedLang = this.value;
|
||||
localStorage.setItem("lang", selectedLang);
|
||||
updateLanguage(selectedLang);
|
||||
});
|
||||
|
||||
window.onload = () => updateLanguage("es");
|
||||
async function loadUserLanguage() {
|
||||
const userId = sessionStorage.getItem("userId");
|
||||
|
||||
if (!userId) {
|
||||
alert("Sesión expirada. Inicia sesión de nuevo.");
|
||||
window.location.href = "index.html";
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/users/${userId}`);
|
||||
const user = await res.json();
|
||||
|
||||
if (user.language && traducciones[user.language]) {
|
||||
langActual = user.language;
|
||||
localStorage.setItem("lang", langActual);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("❌ Error al obtener idioma del usuario:", err);
|
||||
}
|
||||
|
||||
updateLanguage(langActual);
|
||||
}
|
||||
|
||||
window.onload = loadUserLanguage;
|
||||
|
|
|
|||
|
|
@ -5,20 +5,61 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Editor de Formación – SwimmingArt</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
|
||||
|
||||
<link rel="stylesheet" href="css/editorPiscina.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/navbar.css">
|
||||
|
||||
<script src="https://unpkg.com/wavesurfer.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/konva@9.2.0/konva.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- NAV -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top shadow-sm px-4 py-3">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand fw-bold text-white" href="#">SwimmingArt</a>
|
||||
<div class="ms-auto d-flex gap-4">
|
||||
<a href="coach.html" class="nav-link text-white">Inicializar Rutina</a>
|
||||
<a href="equipoDisponibles.html" class="nav-link text-white">Equipos Disponibles</a>
|
||||
<a href="piscina.html" class="nav-link text-white active">Piscina</a>
|
||||
<a class="navbar-brand fw-bold text-white">SwimmingArt</a>
|
||||
<div class="ms-auto d-flex gap-4 align-items-center">
|
||||
<a href="coach.html" class="nav-link text-white" data-i18n="nav.init">Inicializar Rutina</a>
|
||||
<a href="equipoDisponibles.html" class="nav-link text-white" data-i18n="nav.equip">Equipos Disponibles</a>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-light dropdown-toggle d-flex align-items-center gap-2 px-3 py-1" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
|
||||
<path d="M11 10a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
|
||||
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-4.546 12.174c.03-.256.071-.512.124-.767C4.28 10.798 5.94 10 8 10s3.72.798 4.422 2.407c.053.255.094.511.124.767A7 7 0 0 0 8 1z"/>
|
||||
</svg>
|
||||
<span id="nombreUsuarioHeader" class="fw-semibold">Usuario</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-end text-center p-3"
|
||||
aria-labelledby="userDropdown"
|
||||
style="background-color: #0d6efd; color: white; border-radius: 0 0 8px 8px; min-width: 100%; max-width: 250px;">
|
||||
|
||||
<!-- Mostrar rol -->
|
||||
<li class="mb-2">
|
||||
<span id="nombreUsuarioDropdown" class="fw-semibold text-white d-block">Coach</span>
|
||||
</li>
|
||||
|
||||
<!-- Selector de idioma alineado -->
|
||||
<li class="mb-1">
|
||||
<div class="d-flex align-items-center justify-content-center gap-2 w-100">
|
||||
<i class="bi bi-globe" style="color: white; font-size: 1rem;"></i>
|
||||
<select id="langSelector" class="form-select form-select-sm" style="border: none; border-radius: 6px; max-width: 140px;">
|
||||
<option value="es">Español</option>
|
||||
<option value="en">English</option>
|
||||
<option value="fr">Français</option>
|
||||
</select>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Botón salir pegado -->
|
||||
<li>
|
||||
<button class="btn btn-danger btn-sm w-100" onclick="logout()" data-i18n="logout">Salir</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
Binary file not shown.
Loading…
Reference in New Issue