5 667
edições
Sem resumo de edição |
Sem resumo de edição Etiqueta: Revertido |
||
Linha 199: | Linha 199: | ||
<label class="maps__label" for="specificOption">Local do X</label> | <label class="maps__label" for="specificOption">Local do X</label> | ||
</div> | </div> | ||
<div class="filter-container"> | <div class="filter-container"> | ||
<input type="checkbox" id="enableFilter"> | <input type="checkbox" id="enableFilter"> | ||
Linha 207: | Linha 208: | ||
<div id="filterById" class="input-group"> | <div id="filterById" class="input-group"> | ||
<label for="searchIds" class="mapsCalc__label">Buscar por Nº do Mapa:</label> | <label for="searchIds" class="mapsCalc__label">Buscar por Nº do Mapa:</label> | ||
<input type="text" id="searchIds" placeholder="Digite os números separados por vírgula" | <input type="text" id="searchIds" placeholder="Digite os números separados por vírgula" class="mapsCalc__select"> | ||
</div> | |||
<div id="filterByTag" class="hidden input-group"> | |||
<label for="searchTag" class="mapsCalc__label">Buscar por Tag:</label> | |||
<input type="text" id="searchTag" placeholder="Digite a tag"> | |||
</div> | </div> | ||
<div class="d-flex justify-center align-center flex-column"> | <div class="d-flex justify-center align-center flex-column"> | ||
<button type="button" id="filterButton" class="hover-minimize"> | <button type="button" id="filterButton" class="hover-minimize"> | ||
<img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" | <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão filtrar"> | ||
</button> | </button> | ||
</div> | </div> | ||
Linha 377: | Linha 381: | ||
imageContainer.classList.add('hidden'); | imageContainer.classList.add('hidden'); | ||
} | } | ||
}); | |||
const enableFilterCheckbox = document.getElementById('enableFilter'); | |||
const filterSection = document.getElementById('filterSection'); | |||
const filterByTag = document.getElementById('filterByTag'); | |||
const searchTagInput = document.getElementById('searchTag'); | |||
const mapTypeSelect = document.getElementById('mapType'); | |||
const specificOptionSelect = document.getElementById('specificOption'); | |||
const imageContainer = document.getElementById('imageContainer'); | |||
enableFilterCheckbox.addEventListener('change', () => { | |||
const isChecked = enableFilterCheckbox.checked; | |||
filterSection.classList.toggle('hidden', !isChecked); | |||
filterByTag.classList.toggle('hidden', !isChecked); | |||
}); | }); | ||
document.getElementById('filterButton').addEventListener('click', | document.getElementById('filterButton').addEventListener('click', () => { | ||
const | const selectedMapType = mapTypeSelect.value; | ||
const | const selectedSpecificOption = specificOptionSelect.value; | ||
const searchTag = searchTagInput.value.toLowerCase(); | |||
const imagesToShow = []; | |||
for (const [mapType, options] of Object.entries(specificOptions)) { | |||
for (const [option, images] of Object.entries(options)) { | |||
if ((selectedMapType === mapType || !selectedMapType) && | |||
(selectedSpecificOption === option || !selectedSpecificOption)) { | |||
imagesToShow.push(...images.filter(img => searchTag ? img.tag.toLowerCase() === searchTag : true)); | |||
} | |||
} | |||
} | |||
displayImages(imagesToShow); | |||
}); | |||
function displayImages(images) { | |||
imageContainer.innerHTML = ''; | |||
/ | if (images.length === 0) { | ||
imageContainer.innerHTML = '<p>Nenhuma imagem encontrada.</p>'; | |||
} else { | |||
images.forEach(img => { | |||
const imgElement = document.createElement('div'); | |||
imgElement.className = 'image-item'; | |||
imgElement.innerHTML = ` | |||
<img src="${img.imageUrl}" alt="Mapa"> | |||
<div class="image-info"> | |||
<p>ID: ${img.id}</p> | |||
<p>Local: ${img.local}</p> | |||
<p>Coordenadas: ${img.coordinates}</p> | |||
</div> | </div> | ||
`; | `; | ||
imageContainer.appendChild(imgElement); | |||
}); | }); | ||
imageContainer.classList.remove('hidden'); | imageContainer.classList.remove('hidden'); | ||
} | } | ||
} | } | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |