5 667
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 144: | Linha 144: | ||
} | } | ||
.filter-container { | |||
display: flex; | |||
align-items: center; | |||
margin-bottom: 10px; /* Adiciona espaço abaixo do container */ | |||
} | } | ||
.filter-container input[type="checkbox"] { | .filter-container input[type="checkbox"] { | ||
margin: 0; | |||
padding: 0; | |||
width: auto; | |||
height: auto; | |||
vertical-align: middle; | |||
} | } | ||
.filter-label { | .filter-label { | ||
margin-left: 10px; | |||
font-size: 14px; | |||
font-weight: bold; | |||
color: #0d0d0d; | |||
line-height: 1.5; | |||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
Linha 194: | Linha 194: | ||
</div> | </div> | ||
<div class="filter-container"> | <div class="filter-container"> | ||
<input type="checkbox" id="filterCheckbox"> | |||
<label for="filterCheckbox" class="filter-label">Ativar Filtro</label> | |||
</div> | </div> | ||
<div id="filterOptions" class="hidden"> | <div id="filterOptions" class="hidden"> | ||
Linha 315: | Linha 314: | ||
} | } | ||
}; | }; | ||
const mapTypeSelect = document.getElementById('mapType'); | |||
const locationSelect = document.getElementById('location'); | |||
const filterCheckbox = document.getElementById('filterCheckbox'); | |||
const filterOptions = document.getElementById('filterOptions'); | |||
const filterOptionSelect = document.getElementById('filterOption'); | |||
const filterValueInput = document.getElementById('filterValue'); | |||
const filterButton = document.getElementById('filterButton'); | |||
const mapContainer = document.getElementById('mapContainer'); | |||
function getSelectedOptions() { | |||
const | const selectedType = mapTypeSelect.value; | ||
const selectedLocation = locationSelect.value; | |||
return { selectedType, selectedLocation }; | |||
} | |||
function filterMapsByOptions(data, selectedType, selectedLocation) { | |||
const | const filteredData = []; | ||
if (selectedType && specificOptions[selectedType] && specificOptions[selectedType][selectedLocation]) { | |||
filteredData.push(...specificOptions[selectedType][selectedLocation]); | |||
<img src="${map.imageUrl}" alt="${map.local}" | } | ||
return filteredData; | |||
} | |||
function displayMaps(data) { | |||
mapContainer.innerHTML = ''; | |||
if (data.length === 0) { | |||
mapContainer.innerHTML = '<p>Nenhum mapa encontrado.</p>'; | |||
return; | |||
} | |||
data.forEach(map => { | |||
const div = document.createElement('div'); | |||
div.className = 'image-item'; | |||
div.innerHTML = ` | |||
<img src="${map.imageUrl}" alt="${map.local}"> | |||
<div class="image-info"> | <div class="image-info"> | ||
<p>ID: ${map.id}</p> | <p>ID: ${map.id}</p> | ||
<p>Local: ${map.local}</p> | <p>Local: ${map.local}</p> | ||
<p>Coordenadas: ${map.coordinates}</p> | <p>Coordenadas: ${map.coordinates}</p> | ||
</div> | </div> | ||
`; | `; | ||
mapContainer.appendChild(div); | |||
}); | }); | ||
} | } | ||
function filterMaps() { | function filterMaps() { | ||
const | const { selectedType, selectedLocation } = getSelectedOptions(); | ||
if (!selectedType || !selectedLocation) { | |||
alert('Selecione o Tipo de Mapa e o Local do X.'); | |||
return; | |||
} | |||
const | const filteredMaps = filterMapsByOptions(specificOptions, selectedType, selectedLocation); | ||
const | if (filterCheckbox.checked) { | ||
if ( | const filterOption = filterOptionSelect.value; | ||
( | const filterValue = filterValueInput.value.toLowerCase().trim(); | ||
return | |||
if (!filterOption || !filterValue) { | |||
alert('Digite um valor para filtrar.'); | |||
return; | |||
} | } | ||
const | const filteredByValue = filteredMaps.filter(map => { | ||
if (filterOption === 'number') { | |||
return map.id.includes(filterValue); | |||
return | } else if (filterOption === 'tag') { | ||
return map.tag.toLowerCase().includes(filterValue); | |||
} | |||
return false; | |||
}); | }); | ||
displayMaps(filteredByValue); | |||
} | } else { | ||
displayMaps(filteredMaps); | |||
} | |||
} | } | ||
mapTypeSelect.addEventListener('change', filterMaps); | |||
locationSelect.addEventListener('change', filterMaps); | |||
filterCheckbox.addEventListener('change', function() { | |||
filterOptions.classList.toggle('hidden', !this.checked); | |||
if (! | if (!this.checked) { | ||
filterOptionSelect.value = ''; | |||
filterValueInput.value = ''; | |||
displayMaps(filterMapsByOptions(specificOptions, ...getSelectedOptions())); | |||
} | } | ||
}); | |||
filterButton.addEventListener('click', filterMaps); | |||
window.onload = filterMaps; // Executa ao carregar a página | |||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |