5 667
edições
Widget:Test: mudanças entre as edições
Ir para navegação
Ir para pesquisar
sem sumário de edição
Sem resumo de edição |
Sem resumo de edição |
||
| 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"> | |||
<input type="checkbox" id="enableFilter"> | <input type="checkbox" id="enableFilter"> | ||
<label for="enableFilter" class="filter-label">Ativar filtro</label> | <label for="enableFilter" class="filter-label">Ativar filtro</label> | ||
</div> | </div> | ||
<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="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"> | class="mapsCalc__select"> | ||
</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"> | ||
| Linha 334: | Linha 330: | ||
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>`; | ||
}); | }); | ||
document.getElementById('specificOptions').classList.remove('hidden'); | document.getElementById('specificOptions').classList.remove('hidden'); | ||
| Linha 353: | Linha 349: | ||
if (Array.isArray(images)) { | if (Array.isArray(images)) { | ||
images.forEach(image => { | images.forEach(image => { | ||
imagesHtml += | imagesHtml += ` | ||
<div class="image-item"> | <div class="image-item"> | ||
<img src="${image.imageUrl}" alt="${selectedOption}"> | <img src="${image.imageUrl}" alt="${selectedOption}"> | ||
| Linha 359: | Linha 355: | ||
<b>Número do Mapa</b>: ${image.id} <br> | <b>Número do Mapa</b>: ${image.id} <br> | ||
<b>Local</b>: ${image.local} <br> | <b>Local</b>: ${image.local} <br> | ||
<b>Coordenada</b>: ${image.coordinates | <b>Coordenada</b>: ${image.coordinates} | ||
</div> | </div> | ||
</div> | </div> | ||
; | `; | ||
}); | }); | ||
} else { | } else { | ||
imagesHtml = | imagesHtml = ` | ||
<div class="image-item"> | <div class="image-item"> | ||
<img src="${images.imageUrl}" alt="${selectedOption}"> | <img src="${images.imageUrl}" alt="${selectedOption}"> | ||
| Linha 375: | Linha 370: | ||
</div> | </div> | ||
</div> | </div> | ||
; | `; | ||
} | } | ||
imageContainer.innerHTML = imagesHtml; | imageContainer.innerHTML = imagesHtml; | ||
| Linha 406: | Linha 401: | ||
// Gera o HTML para exibir as imagens ordenadas | // Gera o HTML para exibir as imagens ordenadas | ||
allImages.forEach(image => { | allImages.forEach(image => { | ||
imagesHtml += | imagesHtml += ` | ||
<div class="image-item"> | <div class="image-item"> | ||
<img src="${image.imageUrl}" alt="Imagem ID ${image.id}"> | <img src="${image.imageUrl}" alt="Imagem ID ${image.id}"> | ||
| Linha 412: | Linha 407: | ||
<b>Número do Mapa</b>: ${image.id} <br> | <b>Número do Mapa</b>: ${image.id} <br> | ||
<b>Local</b>: ${image.local} <br> | <b>Local</b>: ${image.local} <br> | ||
<b>Coordenada</b>: ${image.coordinates | <b>Coordenada</b>: ${image.coordinates} | ||
</div> | </div> | ||
</div> | </div> | ||
; | `; | ||
}); | }); | ||