tatiana
/
tatvilweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

frontend pilotos

This commit is contained in:
Tatiana Villa Ema 2026-02-22 23:59:45 +01:00
parent e91fdf421a
commit 04c68e863b
3 changed files with 65 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
f1.html
View File

@ -21,20 +21,22 @@
<main class="dashboard">
<section class="stat-card">
<h3 id="session-info">Cargando sesión...</h3>
<div id="api-status">Buscando señal...</div>
<table>
<thead>
<tr>
<th>Nº</th>
<th>Piloto</th>
<th>Escudería</th>
<th>Siglas</th>
</tr>
</thead>
<tbody id="tabla-pilotos-body">
<h3 id="session-info">Pilotos</h3>
<table id="pilotos-table">
<thead>
<tr>
<th>#</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Equipo</th>
<th>Nacionalidad</th>
<th>Código</th>
</tr>
</thead>
<tbody>
<!-- Aquí se llenarán los pilotos -->
</tbody>
</table>
</table>
</section>
<section class="stat-card">

63
js/f1.js
View File

@ -1,17 +1,21 @@
// ===============================
// FUNCIONES DE CONSULTA API
// https://ergast.com/mrd/overview/f1/
// ===============================
// Obtener calendario completo de la temporada actual
async function obtenerCalendario() {
// Cargar la programación completa de la actual temporada
const response = await fetch("https://api.jolpi.ca/ergast/f1/current.json");
const data = await response.json();
const carreras = data.MRData.RaceTable.Races;
return carreras;
try {
const response = await fetch("https://api.jolpi.ca/ergast/f1/current.json");
const data = await response.json();
const carreras = data.MRData.RaceTable.Races;
return carreras;
} catch (error) {
console.error("Error al obtener calendario:", error);
return [];
}
}
// Encontrar la siguiente carrera
function encontrarSiguienteCarrera(carreras) {
const ahora = new Date();
for (let carrera of carreras) {
@ -50,6 +54,36 @@ function iniciarCuentaAtras(fechaCarrera) {
setInterval(actualizar, 1000);
}
// ===============================
// PILOTOS
// ===============================
async function cargarPilotos() {
try {
const response = await fetch('/f1/api/pilotos');
const pilotos = await response.json();
const tbody = document.querySelector('#pilotos-table tbody');
tbody.innerHTML = ''; // Limpiamos antes de rellenar
pilotos.forEach(p => {
const fila = document.createElement('tr');
fila.innerHTML = `
<td>${p.numero}</td>
<td>${p.nombre}</td>
<td>${p.apellido}</td>
<td>${p.equipo || '-'}</td>
<td>${p.nacionalidad}</td>
<td>${p.codigo}</td>
`;
tbody.appendChild(fila);
});
} catch (error) {
console.error('Error cargando pilotos:', error);
const tbody = document.querySelector('#pilotos-table tbody');
tbody.innerHTML = `<tr><td colspan="6">No se pudieron cargar los pilotos</td></tr>`;
}
}
// ===============================
// INIT PRINCIPAL
// ===============================
@ -66,26 +100,27 @@ async function init() {
return;
}
// Mostramos el nombre de la próxima carrera
// 3) Mostrar nombre de la próxima carrera
document.querySelector(".cuenta-atras h3").textContent =
`Cuenta atrás para el GP de ${proxima.raceName}`;
// 3) Poner la cuenta atrás
// 4) Iniciar cuenta atrás
iniciarCuentaAtras(proxima.fecha);
// 4) Si estamos en fin de semana de carrera o justo comienza
// 5) Indicar modo carrera o pronóstico
const ahora = new Date();
if (ahora >= proxima.fecha) {
// Aquí puedes pedir sesiones o tiempos reales si la API lo soporta
console.log("Estamos en modo carrera");
document.getElementById("session-info").textContent =
"Modo carrera — datos en vivo o resultados";
} else {
// Modo pronóstico/previo
console.log("Estamos antes del fin de semana de carrera");
document.getElementById("session-info").textContent =
`Próxima sesión de ${proxima.raceName}`;
}
// 6) Cargar pilotos al inicio y cada minuto
cargarPilotos();
setInterval(cargarPilotos, 60000); // refresco cada 60 segundos
}
// Arrancar todo al cargar la página
document.addEventListener("DOMContentLoaded", init);

44
pilotos.html
View File

@ -41,49 +41,7 @@
</head>
<body>
<h1>Pilotos de F1</h1>
<table id="pilotos-table">
<thead>
<tr>
<th>#</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Equipo</th>
<th>Nacionalidad</th>
<th>Código</th>
</tr>
</thead>
<tbody>
<!-- Aquí se llenarán los pilotos -->
</tbody>
</table>
<script>
async function cargarPilotos() {
try {
const response = await fetch('/f1/api/pilotos');
const pilotos = await response.json();
const tbody = document.querySelector('#pilotos-table tbody');
pilotos.forEach(p => {
const fila = document.createElement('tr');
fila.innerHTML = `
<td>${p.numero}</td>
<td>${p.nombre}</td>
<td>${p.apellido}</td>
<td>${p.equipo || '-'}</td>
<td>${p.nacionalidad}</td>
<td>${p.codigo}</td>
`;
tbody.appendChild(fila);
});
} catch (error) {
console.error('Error cargando pilotos:', error);
const tbody = document.querySelector('#pilotos-table tbody');
tbody.innerHTML = `<tr><td colspan="6">No se pudieron cargar los pilotos</td></tr>`;
}
}
cargarPilotos();
</script>
</body>
</html>