viewof tarjetas = { const calculateDaysDifference = (fechaString) => { const today = new Date(); const [day, month, year] = fechaString.split("/").map(Number); const fecha = new Date(year, month - 1, day); return Math.ceil((fecha - today) / (1000 * 60 * 60 * 24)); }; const getDaysClass = (dias) => { if (dias > 60) return "positivo"; if (dias >= 0) return "cercano"; return "negativo"; }; const formatNumber = (number) => { return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); }; const filterByType = (type) => { const container = document.getElementById('cardContainer'); const cards = Array.from(container.getElementsByClassName('card')); cards.forEach(card => { const className = card.classList.contains('positivo') ? 'positivo' : card.classList.contains('cercano') ? 'cercano' : 'negativo'; if (type === 'retrasadas' && className === 'negativo') { card.style.display = ''; } else if (type === 'poco-tiempo' && className === 'cercano') { card.style.display = ''; } else if (type === 'con-margen' && className === 'positivo') { card.style.display = ''; } else if (type === 'todas') { card.style.display = ''; } else { card.style.display = 'none'; } }); }; const sortCards = (order) => { const container = document.getElementById('cardContainer'); const cards = Array.from(container.getElementsByClassName('card')); cards.sort((a, b) => { const diasATexto = a.querySelector('.texto-dias').textContent; const diasBTexto = b.querySelector('.texto-dias').textContent; const diasA = diasATexto.includes("caducada") ? -parseInt(a.querySelector('.numero-dias').textContent.replace('.', ''), 10) : parseInt(a.querySelector('.numero-dias').textContent.replace('.', ''), 10); const diasB = diasBTexto.includes("caducada") ? -parseInt(b.querySelector('.numero-dias').textContent.replace('.', ''), 10) : parseInt(b.querySelector('.numero-dias').textContent.replace('.', ''), 10); return order === 'asc' ? diasA - diasB : diasB - diasA; }); cards.forEach(card => container.appendChild(card)); }; const filterByURL = (url) => { const cards = document.querySelectorAll('.card'); cards.forEach(card => { const foto = card.dataset.foto; card.style.display = foto === url ? '' : 'none'; }); }; const showAllCards = () => { const cards = document.querySelectorAll('.card'); cards.forEach(card => { card.style.display = ''; }); }; const updateDaysRemaining = () => { return DATOS.map(item => { const diasRestantes = calculateDaysDifference(item.fecha); const className = getDaysClass(diasRestantes); return { ...item, diasRestantes, className }; }); }; const showTooltip = (event, content, cardClasses) => { let tooltip = document.getElementById('tooltip'); if (!tooltip) { tooltip = document.createElement('div'); tooltip.id = 'tooltip'; tooltip.className = 'tooltip'; document.body.appendChild(tooltip); } tooltip.innerHTML = `Título de la Directiva:
${content}.`; // Color dinámico según clase if (cardClasses.contains("positivo")) { tooltip.style.borderColor = "#28a745"; } else if (cardClasses.contains("cercano")) { tooltip.style.borderColor = "#ffc107"; } else if (cardClasses.contains("negativo")) { tooltip.style.borderColor = "#dc3545"; } else { tooltip.style.borderColor = "#aaaaaa"; } tooltip.style.display = 'block'; tooltip.style.left = `${event.pageX + 10}px`; tooltip.style.top = `${event.pageY + 10}px`; }; const hideTooltip = () => { const tooltip = document.getElementById('tooltip'); if (tooltip) { tooltip.style.display = 'none'; } }; const renderCards = (data) => { const container = document.getElementById('cardContainer'); container.innerHTML = data.map(item => { const diasTexto = item.diasRestantes < 0 ? "días caducada" : "días de margen"; return `

${formatNumber(Math.abs(item.diasRestantes))}

${diasTexto}

${item.titulo}

Directiva: ${item.directiva}

Fecha límite de transposición: ${item.fecha}

`; }).join(''); Array.from(container.getElementsByClassName('card')).forEach(card => { card.addEventListener('mouseover', (event) => { showTooltip(event, card.dataset.nombre, card.classList); }); card.addEventListener('mouseout', hideTooltip); }); }; // Dropdown personalizado con imágenes const renderCategoryDropdown = () => { const cont = document.createElement('div'); cont.className = 'category-dropdown'; cont.setAttribute('data-open', 'false'); const toggle = document.createElement('button'); toggle.type = 'button'; toggle.className = 'category-toggle'; toggle.setAttribute('aria-haspopup', 'listbox'); toggle.setAttribute('aria-expanded', 'false'); toggle.innerHTML = `

Mostrar todas las categorías ▾ `; const menu = document.createElement('div'); menu.className = 'category-menu'; menu.setAttribute('role', 'listbox'); menu.tabIndex = -1; const opciones = [ { url: "todas", texto: "Mostrar todas las categorías", icon: "https://cdn.parlamentia.newtral.es/images/categories/otros.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/educacion.svg", texto: "Educación", icon: "https://cdn.parlamentia.newtral.es/images/categories/educacion.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/transicion-ecologica.svg", texto: "Transición Ecológica", icon: "https://cdn.parlamentia.newtral.es/images/categories/transicion-ecologica.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/interior-y-defensa.svg", texto: "Interior y Defensa", icon: "https://cdn.parlamentia.newtral.es/images/categories/interior-y-defensa.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/derechos-fundamentales-y-regeneracion-democratica.svg", texto: "Derechos fundamentales y Regeneración democrática", icon: "https://cdn.parlamentia.newtral.es/images/categories/derechos-fundamentales-y-regeneracion-democratica.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/igualdad.svg", texto: "Igualdad", icon: "https://cdn.parlamentia.newtral.es/images/categories/igualdad.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/economia.svg", texto: "Economía", icon: "https://cdn.parlamentia.newtral.es/images/categories/economia.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/agricultura-pesca-y-alimentacion.svg", texto: "Agricultura, Pesca y Alimentación", icon: "https://cdn.parlamentia.newtral.es/images/categories/agricultura-pesca-y-alimentacion.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/politica-territorial-y-administracion-publica.svg", texto: "Política Territorial y Administración Pública", icon: "https://cdn.parlamentia.newtral.es/images/categories/politica-territorial-y-administracion-publica.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/trabajo-inclusion-y-migraciones.svg", texto: "Trabajo, Inclusión y Migraciones", icon: "https://cdn.parlamentia.newtral.es/images/categories/trabajo-inclusion-y-migraciones.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/internacional-y-politica-exterior.svg", texto: "Internacional y Política Exterior", icon: "https://cdn.parlamentia.newtral.es/images/categories/internacional-y-politica-exterior.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/hacienda.svg", texto: "Hacienda", icon: "https://cdn.parlamentia.newtral.es/images/categories/hacienda.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/movilidad-y-vivienda.svg", texto: "Movilidad y Vivienda", icon: "https://cdn.parlamentia.newtral.es/images/categories/movilidad-y-vivienda.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/sanidad-y-consumo.svg", texto: "Sanidad y Consumo", icon: "https://cdn.parlamentia.newtral.es/images/categories/sanidad-y-consumo.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/ciencia-y-tecnologia.svg", texto: "Ciencia y Tecnología", icon: "https://cdn.parlamentia.newtral.es/images/categories/ciencia-y-tecnologia.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/politica-social.svg", texto: "Política Social", icon: "https://cdn.parlamentia.newtral.es/images/categories/politica-social.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/cultura-y-deporte.svg", texto: "Cultura y Deporte", icon: "https://cdn.parlamentia.newtral.es/images/categories/cultura-y-deporte.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/industria-turismo-y-comercio.svg", texto: "Industria, Turismo y Comercio", icon: "https://cdn.parlamentia.newtral.es/images/categories/industria-turismo-y-comercio.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/justicia.svg", texto: "Justicia", icon: "https://cdn.parlamentia.newtral.es/images/categories/justicia.svg" }, { url: "https://cdn.parlamentia.newtral.es/images/categories/otros.svg", texto: "Otros", icon: "https://cdn.parlamentia.newtral.es/images/categories/otros.svg" }, ]; opciones.forEach(({ url, texto, icon }) => { const opt = document.createElement('button'); opt.type = 'button'; opt.className = 'category-option'; opt.setAttribute('role', 'option'); opt.setAttribute('data-value', url); opt.innerHTML = `

${texto} `; opt.addEventListener('click', () => { toggle.querySelector('.category-current img').src = icon; toggle.querySelector('.category-current span').textContent = texto; if (url === 'todas') { showAllCards(); } else { filterByURL(url); } cont.setAttribute('data-open', 'false'); toggle.setAttribute('aria-expanded', 'false'); }); menu.appendChild(opt); }); toggle.addEventListener('click', () => { const isOpen = cont.getAttribute('data-open') === 'true'; cont.setAttribute('data-open', String(!isOpen)); toggle.setAttribute('aria-expanded', String(!isOpen)); }); document.addEventListener('click', (e) => { if (!cont.contains(e.target)) { cont.setAttribute('data-open', 'false'); toggle.setAttribute('aria-expanded', 'false'); } }); cont.appendChild(toggle); cont.appendChild(menu); return cont; }; const initCards = async () => { const container = document.getElementById('cardContainer'); const input = document.getElementById('searchInput'); const sortAscButton = document.getElementById('sortAsc'); const sortDescButton = document.getElementById('sortDesc'); const filterSelect = document.getElementById('filterSelect'); if (!container || !input || !sortAscButton || !sortDescButton || !filterSelect) { console.warn("Esperando al DOM..."); await new Promise(resolve => setTimeout(resolve, 100)); return initCards(); } input.addEventListener('keyup', filterCards); sortAscButton.addEventListener('click', () => sortCards('asc')); sortDescButton.addEventListener('click', () => sortCards('desc')); filterSelect.addEventListener('change', (event) => filterByType(event.target.value)); const categoryDropdown = renderCategoryDropdown(); const searchBar = document.querySelector('.search-bar'); searchBar.insertAdjacentElement('afterend', categoryDropdown); renderCards(updateDaysRemaining()); }; initCards(); const estilos = ` `; const styleSheet = document.createElement("style"); styleSheet.innerHTML = estilos; document.head.appendChild(styleSheet); return html`

Última actualización: ${await LAST_UPDATE}

`; };