5 802
edições
Sem resumo de edição |
Sem resumo de edição |
||
Linha 17: | Linha 17: | ||
} | } | ||
.image-container .image-item { | .image-container .image-item { | ||
flex: 1 0 | flex: 1 0 30%; | ||
max-width: 45%; | max-width: 45%; | ||
text-align: center; | text-align: center; | ||
} | } | ||
.image-container img { | .image-container img { | ||
width: | width: 320px; | ||
margin-bottom: 5px; | |||
margin-bottom: | |||
} | } | ||
.image-info { | .image-info { | ||
margin-top: | margin-top: 2px; | ||
} | } | ||
select, input[type="text"] { | select, input[type="text"] { | ||
Linha 36: | Linha 34: | ||
</head> | </head> | ||
<body> | <body> | ||
<h1>Selecione o Tipo de Mapa</h1> | <h1>Selecione o Tipo de Mapa ou Busque por ID</h1> | ||
<form id="mapForm"> | <form id="mapForm"> | ||
Linha 63: | Linha 61: | ||
</div> | </div> | ||
<div id="searchById | <div id="searchById"> | ||
<label for="searchIds">Buscar por ID(s):</label> | <label for="searchIds">Buscar por ID(s):</label> | ||
<input type="text" id="searchIds" placeholder="Digite os IDs separados por vírgula"> | <input type="text" id="searchIds" placeholder="Digite os IDs separados por vírgula"> | ||
Linha 114: | Linha 112: | ||
}); | }); | ||
document.getElementById('specificOptions').classList.remove('hidden'); | document.getElementById('specificOptions').classList.remove('hidden'); | ||
} else { | } else { | ||
document.getElementById('specificOptions').classList.add('hidden'); | document.getElementById('specificOptions').classList.add('hidden'); | ||
} | } | ||
}); | }); | ||
Linha 163: | Linha 159: | ||
document.getElementById('searchButton').addEventListener('click', function() { | document.getElementById('searchButton').addEventListener('click', function() { | ||
const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim()); | const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim()); | ||
const imageContainer = document.getElementById('imageContainer'); | const imageContainer = document.getElementById('imageContainer'); | ||
if ( | if (searchIds.length > 0) { | ||
let imagesHtml = ''; | let imagesHtml = ''; | ||
const mapOptions = specificOptions[ | let allImages = []; | ||
// Recolhe todas as imagens que correspondem aos IDs | |||
Object.keys(specificOptions).forEach(mapType => { | |||
const mapOptions = specificOptions[mapType]; | |||
Object.keys(mapOptions).forEach(option => { | |||
const images = mapOptions[option].filter(image => searchIds.includes(image.id)); | |||
allImages = allImages.concat(images); | |||
}); | |||
}); | |||
// 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"> | |||
ID: ${image.id} <br> | |||
Local: ${image.local} <br> | |||
Coordenada: ${image.coordinates} | |||
</div> | </div> | ||
</div> | |||
`; | |||
}); | }); | ||