5 801
edições
Sem resumo de edição Etiqueta: Revertido |
Sem resumo de edição Etiqueta: Revertido |
||
Linha 148: | Linha 148: | ||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
Linha 183: | Linha 182: | ||
<div id="filterSection" class="hidden"> | <div id="filterSection" class="hidden"> | ||
<div id="filterById" class="input-group"> | <div id="filterById" class="input-group"> | ||
<label for="searchIds" class=" | <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" class=" | <input type="text" id="searchIds" placeholder="Digite os números separados por vírgula" class="mapsCalc__select"> | ||
</div> | </div> | ||
<div id="filterByTag" class="hidden input-group"> | <div id="filterByTag" class="hidden input-group"> | ||
<label for="searchTag" class=" | <label for="searchTag" class="mapsCalc__label">Buscar por Tag:</label> | ||
<input type="text" id="searchTag" placeholder="Digite a tag"> | <input type="text" id="searchTag" placeholder="Digite a tag"> | ||
</div> | </div> | ||
<div class="d-flex"> | <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" alt="Imagem botão filtrar"> | <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão filtrar"> | ||
Linha 201: | Linha 200: | ||
<!-- As imagens e suas informações serão exibidas aqui --> | <!-- As imagens e suas informações serão exibidas aqui --> | ||
</div> | </div> | ||
</form> | </form> | ||
Linha 288: | Linha 285: | ||
} | } | ||
}; | }; | ||
document.getElementById(' | const enableFilterCheckbox = document.getElementById('enableFilter'); | ||
document.getElementById(' | const filterSection = document.getElementById('filterSection'); | ||
document.getElementById(' | const filterByTag = document.getElementById('filterByTag'); | ||
document.getElementById(' | 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); | |||
const | filterByTag.classList.toggle('hidden', !isChecked); | ||
}); | |||
document.getElementById('filterButton').addEventListener('click', () => { | |||
const selectedMapType = mapTypeSelect.value; | |||
const selectedSpecificOption = specificOptionSelect.value; | |||
const searchTag = searchTagInput.value.toLowerCase(); | |||
const imagesToShow = []; | |||
const | |||
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 = ''; | imageContainer.innerHTML = ''; | ||
if ( | 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"> | |||
} | |||
images.forEach( | |||
const | |||
<img src="${ | |||
<div class="image-info"> | <div class="image-info"> | ||
<p>ID: ${ | <p>ID: ${img.id}</p> | ||
<p>Local: ${ | <p>Local: ${img.local}</p> | ||
<p>Coordenadas: ${ | <p>Coordenadas: ${img.coordinates}</p> | ||
</div> | </div> | ||
`; | `; | ||
imageContainer.appendChild( | imageContainer.appendChild(imgElement); | ||
}); | }); | ||
imageContainer.classList.remove('hidden'); | imageContainer.classList.remove('hidden'); | ||
} | } | ||
} | } | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |