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 164: Linha 164:
             <select id="specificOption" class="maps__select">
             <select id="specificOption" class="maps__select">
                 <option value="">Selecione uma opção</option>
                 <option value="">Selecione uma opção</option>
                <option value="Areia">Areia</option>
                <option value="Gelo">Gelo</option>
                <option value="Grama">Grama</option>
                <option value="Pedra">Pedra</option>
                <option value="Subaquático">Subaquático</option>
                <option value="Terra">Terra</option>
                <option value="Pisos">Pisos</option>
             </select>
             </select>
             <label class="maps__label" for="specificOption">Local do X</label>
             <label class="maps__label" for="specificOption">Local do X</label>
Linha 252: Linha 245:
             if (selectedMapType) {
             if (selectedMapType) {
                 specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>';
                 specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>';
                 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>`;
Linha 274: Linha 267:
             }
             }


            let imagesHtml = '';
            let allImages = [];
            // Recolhe todas as imagens que correspondem ao tipo de mapa e opção específica
            const mapOptions = specificOptions[selectedMapType] || {};
            const images = mapOptions[selectedOption] || [];
             if (filterMode === 'number') {
             if (filterMode === 'number') {
                 // Filtrar por número
                 allImages = images.filter(image => searchIds.includes(image.id));
                if (searchIds.length > 0) {
                    let imagesHtml = '';
                    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">
                                    <b>Número do Mapa</b>: ${image.id} <br>
                                    <b>Local</b>: ${image.local} <br>
                                    <b>Coordenada</b>: ${image.coordinates}
                                    <b>Tag</b>: ${image.tag} <br>
                                </div>
                            </div>
                        `;
                    });
 
                    imageContainer.innerHTML = imagesHtml || 'Nenhuma imagem encontrada com os números fornecidos.';
                    imageContainer.classList.remove('hidden');
                } else {
                    imageContainer.classList.add('hidden');
                }
             } else if (filterMode === 'tag') {
             } else if (filterMode === 'tag') {
                 // Filtrar por tag
                 allImages = images.filter(image => searchIds.includes(image.tag));
                if (searchIds.length > 0) {
            }
                    let imagesHtml = '';
                    let allImages = [];
 
                    // Recolhe todas as imagens que correspondem às tags
                    Object.keys(specificOptions).forEach(mapType => {
                        const mapOptions = specificOptions[mapType];
                        Object.keys(mapOptions).forEach(option => {
                            const images = mapOptions[option].filter(image => searchIds.includes(image.tag));
                            allImages = allImages.concat(images);
                        });
                    });


                    // Ordena as imagens pelo nome do local
            // Ordena as imagens pelo nome do local
                    allImages.sort((a, b) => a.local.localeCompare(b.local));
            allImages.sort((a, b) => a.local.localeCompare(b.local));


                    // 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 Tag ${image.tag}">
                        <img src="${image.imageUrl}" alt="Imagem ID ${image.id}">
                                <div class="image-info">
                        <div class="image-info">
                                    <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} <br>
                                    <b>Tag</b>: ${image.tag} <br>
                            <b>Tag</b>: ${image.tag} <br>
                                </div>
                        </div>
                            </div>
                    </div>
                        `;
                `;
                    });
            });


                    imageContainer.innerHTML = imagesHtml || 'Nenhuma imagem encontrada com as tags fornecidas.';
            imageContainer.innerHTML = imagesHtml || 'Nenhuma imagem encontrada com os parâmetros fornecidos.';
                    imageContainer.classList.remove('hidden');
            imageContainer.classList.remove('hidden');
                } else {
                    imageContainer.classList.add('hidden');
                }
            }
         });
         });
     </script>
     </script>
5 801

edições

Menu de navegação