5 805
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 152: | Linha 152: | ||
/* Estilo para os botões de tags */ | /* Estilo para os botões de tags */ | ||
.tag- | |||
.tag-button { | |||
background-color: #f0f0f0; | background-color: #f0f0f0; | ||
border: 1px solid #ccc; | border: 1px solid #ccc; | ||
Linha 170: | Linha 164: | ||
} | } | ||
.tag- | .tag-button:hover { | ||
background-color: #ddd; | background-color: #ddd; | ||
color: #333; | color: #333; | ||
} | } | ||
.tag- | .tag-button.selected { | ||
background-color: #007bff; | background-color: #007bff; | ||
color: #fff; | color: #fff; | ||
Linha 323: | Linha 317: | ||
} | } | ||
function filterImages() { | |||
const selectedTags = Array.from(document.querySelectorAll('.tag-button.selected')).map(btn => btn.textContent); | const selectedTags = Array.from(document.querySelectorAll('.tag-button.selected')).map(btn => btn.textContent); | ||
const selectedMapType = mapTypeSelect.value; | const selectedMapType = mapTypeSelect.value; | ||
Linha 335: | Linha 329: | ||
if (selectedMapType) { | if (selectedMapType) { | ||
const options = specificOptions[selectedMapType]; | const options = specificOptions[selectedMapType]; | ||
if (options) { | if (options && selectedOption && options[selectedOption]) { | ||
itemsToFilter = options[selectedOption]; | |||
itemsToFilter = options[ | } else { | ||
// Reunir itens de todas as opções dentro do tipo de mapa selecionado | |||
for (const local in options) { | |||
itemsToFilter = itemsToFilter.concat(options[local]); | |||
} | } | ||
} | } | ||
Linha 349: | Linha 346: | ||
} | } | ||
const filteredItems = itemsToFilter.filter(item => { | |||
const | const matchesTag = selectedTags.length === 0 || selectedTags.some(tag => item.tags.includes(tag)); | ||
const matchesId = filterById === '' || filterById.split(',').map(id => id.trim()).includes(item.id); | |||
const matchesLocal = !selectedOption || item.local === selectedOption; | |||
// Ignorar a tag correspondente ao Local do X ao refinar a busca | |||
const filteredTags = item.tags.filter(tag => tag !== selectedOption); | |||
return matchesTag && matchesId && matchesLocal && (filteredTags.length > 0 || selectedTags.length === 0); | |||
}); | |||
filteredItems.forEach(item => { | |||
const itemDiv = document.createElement('div'); | |||
itemDiv.classList.add('image-item'); | |||
const img = document.createElement('img'); | |||
img.src = item.imageUrl; | |||
img.alt = `Mapa ${item.id}`; | |||
itemDiv.appendChild(img); | |||
const infoDiv = document.createElement('div'); | |||
infoDiv.classList.add('image-info'); | |||
infoDiv.innerHTML = ` | |||
<strong>Número do Mapa:</strong> ${item.id}<br> | |||
<strong>Local:</strong> ${item.local}<br> | |||
<strong>Coordenada:</strong> ${item.coordinates}<br> | |||
<strong>Tag(s):</strong> ${item.tags.join(', ')} | |||
`; | |||
itemDiv.appendChild(infoDiv); | |||
imageContainer.appendChild(itemDiv); | |||
}); | |||
if (filteredItems.length === 0) { | |||
imageContainer.innerHTML = '<p>Nenhuma imagem encontrada para os critérios selecionados.</p>'; | |||
} | } | ||
} | } |