Publications Portal Component - Copy this Html, Tailwind Component to your project
<link rel="stylesheet" href="static/css/header.css"> <link rel="stylesheet" href="static/js/header.js"> <link rel="stylesheet" href="static/css/index.css"> <header class="header"> <div class="container"> <div class="header content"> <a href="/" class=""> <img src="{{ url_for('static', filename='img/logo.png') }}" alt="Imagen del libro"> </a> <nav> <button class="mobile menu toggle" aria label="Abrir menú"> ☰ </button> <ul class="nav menu"> <li class="nav item"><a href="/" class="nav link">Inicio</a></li> <li class="nav item"><a href="" class="nav link">Investigadores</a></li> <li class="nav item"><a href="" class="nav link">Acerca de</a></li> <li class="nav item"><a href="" class="nav link">Contacto</a></li> </ul> </nav> <button class="cta button" onclick="showModal()">Iniciar Sesión</button> </div> </div> </header> <script src="{{ url_for('static', filename='js/header.js') }}"></script> <!DOCTYPE html> <html lang="es"> <head> {% include "index/header.html" %} <title>Página Principal</title> </head> <body> <div style="text align: center;"> <img src="{{ url_for('static', filename='img/book.jpg') }}" alt="Imagen del libro" class="cover image"> </div> {% include "index/carts.html" %} <! Asegúrate de que este archivo renderiza las publicaciones > <! Modal > <div id="loginModal" class="modal"> <div class="modal content"> <span class="close" onclick="closeModal()">×</span> <section> <h1>Iniciar Sesión</h1> <form id="loginForm" action="/login" method="post" onsubmit="return login()"> <label for="email">Correo Electrónico:</label> <input type="email" id="email" name="email" required> <label for="password">Contraseña:</label> <input type="password" id="password" name="password" required> <input type="submit" value="Iniciar Sesión"> </form> </section> </div> </div> <script src="{{ url_for('static', filename='js/index.js') }}"></script> </body> </html> <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Publicaciones</title> <script src="https://cdn.tailwindcss.com"></script> <script src="{{ url_for('static', filename='js/publicaciones.js') }}"></script> </head> <body class="bg gray 50"> <div class="container mx auto py 10"> <h1 class="text 3xl font bold text center text gray 800 mb 8">Publicaciones</h1> <! Filtros > <div class="mb 6 flex flex col md:flex row items center justify center"> <label for="filtroFecha" class="mr 2">Filtrar por fecha:</label> <input type="date" id="filtroFecha" class="border rounded p 3 md:w 64 mb 2 md:mb 0" /> <label for="filtroOdce" class="mr 2 ml 4">ODCE:</label> <select id="filtroOdce" class="border rounded p 3 md:w 64 mb 2 md:mb 0"> <option value="" disabled selected>Seleccione un área</option> <! Opciones de ODCE se cargarán aquí > </select> <label for="filtroPrograma" class="mr 2 ml 4">Programa:</label> <select id="filtroPrograma" class="border rounded p 3 md:w 64 mb 2 md:mb 0"> <option value="" disabled selected>Seleccione un programa</option> <! Opciones de Programa se cargarán aquí > </select> <label for="filtroLinea" class="mr 2 ml 4">Línea de Investigación:</label> <select id="filtroLinea" class="border rounded p 3 md:w 64 mb 2 md:mb 0"> <option value="" disabled selected>Seleccione una línea</option> <! Opciones de Línea de Investigación se cargarán aquí > </select> <button id="filtrar" class="bg blue 500 text white rounded p 3 ml 4">Filtrar</button> <button id="limpiar" class="bg gray 300 text gray 800 rounded p 3 ml 2">Limpiar Filtros</button> </div> <! Contenedor de publicaciones > <div id="publicaciones" class="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 6"> <! Las tarjetas de publicaciones se agregarán aquí > </div> <! Paginación > <div id="pagination" class="flex justify center mt 6"> <button id="prevPage" class="bg gray 300 rounded p 2 mr 2" disabled>Anterior</button> <button id="nextPage" class="bg gray 300 rounded p 2 ml 2">Siguiente</button> </div> </div> <script> const meses = { 'January': 'Enero', 'February': 'Febrero', 'March': 'Marzo', 'April': 'Abril', 'May': 'Mayo', 'June': 'Junio', 'July': 'Julio', 'August': 'Agosto', 'September': 'Septiembre', 'October': 'Octubre', 'November': 'Noviembre', 'December': 'Diciembre' }; let currentPage = 1; const itemsPerPage = 5; // Número de publicaciones por página function cargarPublicaciones() { const fecha = document.getElementById('filtroFecha').value; const id_odce = document.getElementById('filtroOdce').value; const id_programa = document.getElementById('filtroPrograma').value; const linea_investigacion = document.getElementById('filtroLinea').value; fetch(`/publicaciones?page=${currentPage}&itemsPerPage=${itemsPerPage}&fecha=${fecha}&odce=${id_odce}&programa=${id_programa}&linea=${linea_investigacion}`) .then(response => response.json()) .then(data => { const publicacionesContainer = document.getElementById('publicaciones'); publicacionesContainer.innerHTML = ''; // Limpiar publicaciones data.publicaciones.forEach(pub => { const card = document.createElement('div'); card.classList.add( 'bg white', 'rounded lg', 'shadow md', 'hover:shadow xl', 'transition', 'duration 300', 'transform', 'hover: translate y 1', 'p 6' ); card.innerHTML = ` <h2 class="text xl font semibold mb 2 text gray 800">${pub.title}</h2> <p class="text gray 600 mb 4"><strong>Autor Principal:</strong> ${pub.usuario_principal}</p> <p class="text gray 600 mb 4"><strong>Source Title:</strong> ${pub.source_title}</p> <p class="text gray 600 mb 4"><strong>Fecha de Publicación:</strong> ${pub.fecha_publicacion}</p> <p class="text gray 600 mb 4"><strong>Nombre ODCE:</strong> ${pub.nombre_odce}</p> <p class="text gray 600 mb 4"><strong>Línea de Investigación:</strong> ${pub.linea_investigacion}</p> <p class="text gray 600 mb 4"><strong>Campo Temático:</strong> ${pub.campo_tematico}</p> <p class="text gray 600 mb 4"><strong>Programa:</strong> ${pub.programa}</p> <a href="${pub.doi}" target="_blank" class="inline flex items center text blue 600 hover:text blue 800 font semibold"> 👁️ <span class="ml 1">Ver Documento</span> </a> `; publicacionesContainer.appendChild(card); }); // Control de botones de paginación document.getElementById('prevPage').disabled = currentPage === 1; document.getElementById('nextPage').disabled = data.totalPages <= currentPage; // Actualizar el total de páginas totalPages = data.totalPages; }) .catch(error => console.error('Error al cargar las publicaciones:', error)); } // Evento de clic en el botón de filtrar document.getElementById('filtrar').addEventListener('click', () => { currentPage = 1; // Reiniciar a la primera página cargarPublicaciones(); // Cargar publicaciones filtradas }); // Evento de clic en el botón de limpiar document.getElementById('limpiar').addEventListener('click', () => { // Restablecer los filtros a su estado inicial document.getElementById('filtroFecha').value = ''; document.getElementById('filtroOdce').selectedIndex = 0; // Restablece al primer elemento (deshabilitado) document.getElementById('filtroPrograma').selectedIndex = 0; // Restablece al primer elemento (deshabilitado) document.getElementById('filtroLinea').selectedIndex = 0; // Restablece al primer elemento (deshabilitado) currentPage = 1; // Reiniciar a la primera página cargarPublicaciones(); // Cargar todas las publicaciones }); // Eventos de paginación document.getElementById('prevPage').addEventListener('click', () => { if (currentPage > 1) { currentPage ; cargarPublicaciones(); } }); document.getElementById('nextPage').addEventListener('click', () => { currentPage++; cargarPublicaciones(); }); // Cargar las publicaciones inicialmente cargarPublicaciones(); // Cargar opciones de los select para los filtros function cargarFiltros() { fetch('/filtros') // Endpoint que devuelve las opciones para los filtros .then(response => response.json()) .then(data => { const odceSelect = document.getElementById('filtroOdce'); const programaSelect = document.getElementById('filtroPrograma'); const lineaSelect = document.getElementById('filtroLinea'); // Cargar opciones de ODCE data.odce.forEach(item => { const option = document.createElement('option'); option.value = item.id_odce; option.textContent = item.nombre; odceSelect.appendChild(option); }); // Cargar opciones de Programa data.programa.forEach(item => { const option = document.createElement('option'); option.value = item.id_programa; option.textContent = item.nombre; programaSelect.appendChild(option); }); // Cargar opciones de Línea de Investigación data.linea.forEach(item => { const option = document.createElement('option'); option.value = item.id_linea; option.textContent = item.nombre; lineaSelect.appendChild(option); }); }); } cargarFiltros(); // Cargar los filtros al inicio </script> </body> </html>
