5 801
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 164: | Linha 164: | ||
<select id="specificOption" class="maps__select"> | <select id="specificOption" class="maps__select"> | ||
<option value="">Selecione uma opção</option> | <option value="">Selecione uma opção</option> | ||
</select> | </select> | ||
<label class="maps__label" for="specificOption">Local do X</label> | <label class="maps__label" for="specificOption">Local do X</label> | ||
Linha 252: | Linha 245: | ||
if (selectedMapType) { | if (selectedMapType) { | ||
specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>'; | specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>'; | ||
const options = Object.keys(specificOptions[selectedMapType]); | const options = Object.keys(specificOptions[selectedMapType] || {}); | ||
options.forEach(option => { | options.forEach(option => { | ||
specificOptionSelect.innerHTML += `<option value="${option}">${option}</option>`; | specificOptionSelect.innerHTML += `<option value="${option}">${option}</option>`; | ||
Linha 274: | Linha 267: | ||
} | } | ||
let imagesHtml = ''; | |||
let allImages = []; | |||
// Recolhe todas as imagens que correspondem ao tipo de mapa e opção específica | |||
const mapOptions = specificOptions[selectedMapType] || {}; | |||
const images = mapOptions[selectedOption] || []; | |||
if (filterMode === 'number') { | if (filterMode === 'number') { | ||
allImages = images.filter(image => searchIds.includes(image.id)); | |||
} else if (filterMode === 'tag') { | } else if (filterMode === 'tag') { | ||
allImages = images.filter(image => searchIds.includes(image.tag)); | |||
} | |||
// Ordena as imagens pelo nome do local | |||
allImages.sort((a, b) => a.local.localeCompare(b.local)); | |||
// Gera o HTML para exibir as imagens ordenadas | |||
allImages.forEach(image => { | |||
imagesHtml += ` | |||
<div class="image-item"> | |||
<img src="${image.imageUrl}" alt="Imagem ID ${image.id}"> | |||
<div class="image-info"> | |||
<b>Número do Mapa</b>: ${image.id} <br> | |||
<b>Local</b>: ${image.local} <br> | |||
<b>Coordenada</b>: ${image.coordinates} <br> | |||
<b>Tag</b>: ${image.tag} <br> | |||
</div> | |||
</div> | |||
`; | |||
}); | |||
imageContainer.innerHTML = imagesHtml || 'Nenhuma imagem encontrada com os parâmetros fornecidos.'; | |||
imageContainer.classList.remove('hidden'); | |||
}); | }); | ||
</script> | </script> |