5 667
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 314: | Linha 314: | ||
} | } | ||
}; | }; | ||
const | |||
function filterMaps() { | |||
const mapType = document.getElementById('mapType').value; | |||
const location = document.getElementById('location').value; | |||
const filterCheckbox = document.getElementById('filterCheckbox').checked; | |||
const filterOption = document.getElementById('filterOption').value; | |||
const filterValue = document.getElementById('filterValue').value.toLowerCase(); | |||
const mapContainer = document.getElementById('mapContainer'); | |||
mapContainer.innerHTML = ''; | mapContainer.innerHTML = ''; | ||
if (mapType && location) { | |||
const maps = specificOptions[mapType][location]; | |||
let filteredMaps = maps; | |||
if (filterCheckbox) { | |||
if (filterOption === 'number') { | if (filterOption === 'number') { | ||
filteredMaps = maps.filter(map => map.id.includes(filterValue)); | |||
} else if (filterOption === 'tag') { | } else if (filterOption === 'tag') { | ||
filteredMaps = maps.filter(map => map.tag.toLowerCase().includes(filterValue)); | |||
} else { | |||
filteredMaps = maps; | |||
} | } | ||
} | |||
filteredMaps.forEach(map => { | |||
const imageItem = document.createElement('div'); | |||
imageItem.className = 'image-item'; | |||
imageItem.innerHTML = ` | |||
<img src="${map.imageUrl}" alt="Imagem do Mapa"> | |||
<div class="image-info"> | |||
<p><strong>ID:</strong> ${map.id}</p> | |||
<p><strong>Local:</strong> ${map.local}</p> | |||
<p><strong>Coordenadas:</strong> ${map.coordinates}</p> | |||
<p><strong>Tag:</strong> ${map.tag}</p> | |||
</div> | |||
`; | |||
mapContainer.appendChild(imageItem); | |||
}); | }); | ||
} else if (!mapType || !location) { | |||
const imageItem = document.createElement('div'); | |||
imageItem.className = 'image-item'; | |||
imageItem.innerHTML = ` | |||
<p><strong>Selecione um Tipo de Mapa e Local do X para ver os resultados.</strong></p> | |||
`; | |||
mapContainer.appendChild(imageItem); | |||
} | |||
} | |||
document.getElementById('filterCheckbox').addEventListener('change', function() { | |||
const filterOptions = document.getElementById('filterOptions'); | |||
if (this.checked) { | |||
filterOptions.classList.remove('hidden'); | |||
} else { | } else { | ||
filterOptions.classList.add('hidden'); | |||
document.getElementById('filterOption').value = ''; | |||
document.getElementById('filterValue').value = ''; | |||
filterMaps(); | |||
} | } | ||
} | }); | ||
document.getElementById('filterButton').addEventListener('click', function() { | |||
filterMaps(); | |||
}); | |||
document.getElementById('filterValue').addEventListener('keypress', function(event) { | |||
if (event.key === 'Enter') { | |||
event.preventDefault(); | |||
document.getElementById('filterButton').click(); | |||
} | } | ||
}); | }); | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |