5 667
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 316: | Linha 316: | ||
}; | }; | ||
function displayMaps(maps) { | |||
const container = document.getElementById('mapsContainer'); | |||
container.innerHTML = ''; // Limpa o container | |||
maps.forEach(map => { | |||
const mapElement = document.createElement('div'); | |||
mapElement.className = 'image-item'; | |||
mapElement.innerHTML = ` | |||
<img src="${map.imageUrl}" alt="${map.local}" /> | |||
<div class="image-info"> | |||
<p>ID: ${map.id}</p> | |||
<p>Local: ${map.local}</p> | |||
<p>Coordenadas: ${map.coordinates}</p> | |||
<p>Tag: ${map.tag}</p> | |||
</div> | |||
`; | |||
container.appendChild(mapElement); | |||
}); | |||
} | |||
function filterMaps() { | |||
const filterCheckbox = document.getElementById('filterCheckbox').checked; | |||
const filterText = document.getElementById('filterInput').value.trim(); | |||
const mapType = document.getElementById('mapType').value; | |||
const location = document.getElementById('location').value; | |||
const filterTags = filterText.split(',').map(tag => tag.trim().toLowerCase()); // Processa múltiplas tags | |||
const filteredMaps = Object.keys(specificOptions).reduce((acc, key) => { | |||
if ((mapType && !specificOptions[key].type.includes(mapType)) || | |||
(location && !specificOptions[key].location.includes(location))) { | |||
return acc; | |||
} | |||
const mapsToFilter = specificOptions[key].maps; | |||
const filtered = mapsToFilter.filter(map => { | |||
const mapTags = map.tag.split(',').map(tag => tag.trim().toLowerCase()); // Tags do mapa | |||
return | return filterTags.every(tag => mapTags.includes(tag)); // Verifica se todas as tags estão presentes | ||
}); | }); | ||
filteredMaps. | return [...acc, ...filtered]; | ||
}, []); | |||
displayMaps(filteredMaps); | |||
} | |||
document.getElementById('filterButton').addEventListener('click', () => { | |||
const mapType = document.getElementById('mapType').value; | |||
const location = document.getElementById('location').value; | |||
if (!mapType || !location) { | |||
alert('Selecione pelo menos um tipo de mapa e um local do X'); | |||
return; | |||
} | } | ||
filterMaps(); | |||
}); | }); | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |