Widget:Test3: 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 152: Linha 152:


         /* Estilo para os botões de tags */
         /* Estilo para os botões de tags */
        .tag-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-top: 10px;
        }


         .tag-buttons button {
 
         .tag-button {
             background-color: #f0f0f0;
             background-color: #f0f0f0;
             border: 1px solid #ccc;
             border: 1px solid #ccc;
Linha 170: Linha 164:
         }
         }


         .tag-buttons button:hover {
         .tag-button:hover {
             background-color: #ddd;
             background-color: #ddd;
             color: #333;
             color: #333;
         }
         }


         .tag-buttons button.selected {
         .tag-button.selected {
             background-color: #007bff;
             background-color: #007bff;
             color: #fff;
             color: #fff;
Linha 323: Linha 317:
     }
     }


  function filterImages() {
  function filterImages() {
     const selectedTags = Array.from(document.querySelectorAll('.tag-button.selected')).map(btn => btn.textContent);
     const selectedTags = Array.from(document.querySelectorAll('.tag-button.selected')).map(btn => btn.textContent);
     const selectedMapType = mapTypeSelect.value;
     const selectedMapType = mapTypeSelect.value;
Linha 335: Linha 329:
     if (selectedMapType) {
     if (selectedMapType) {
         const options = specificOptions[selectedMapType];
         const options = specificOptions[selectedMapType];
         if (options) {
         if (options && selectedOption && options[selectedOption]) {
             if (selectedOption && options[selectedOption]) {
             itemsToFilter = options[selectedOption];
                 itemsToFilter = options[selectedOption];
        } else {
            // Reunir itens de todas as opções dentro do tipo de mapa selecionado
            for (const local in options) {
                 itemsToFilter = itemsToFilter.concat(options[local]);
             }
             }
         }
         }
Linha 349: Linha 346:
     }
     }


     if (itemsToFilter.length > 0) {
     const filteredItems = itemsToFilter.filter(item => {
         const filteredItems = itemsToFilter.filter(item => {
        const matchesTag = selectedTags.length === 0 || selectedTags.some(tag => item.tags.includes(tag));
            const locationTag = getLocationTag(selectedOption); // Função para mapear Local do X à tag correspondente
         const matchesId = filterById === '' || filterById.split(',').map(id => id.trim()).includes(item.id);
        const matchesLocal = !selectedOption || item.local === selectedOption;


            const matchesTag = selectedTags.length === 0 || selectedTags.some(tag => tag !== locationTag && item.tags.includes(tag));
        // Ignorar a tag correspondente ao Local do X ao refinar a busca
            const matchesId = filterById === '' || filterById.split(',').map(id => id.trim()).includes(item.id);
        const filteredTags = item.tags.filter(tag => tag !== selectedOption);
            const matchesLocal = selectedOption === '' || item.tags.includes(locationTag);


            return matchesTag && matchesId && matchesLocal;
        return matchesTag && matchesId && matchesLocal && (filteredTags.length > 0 || selectedTags.length === 0);
        });
    });


        filteredItems.forEach(item => {
    filteredItems.forEach(item => {
            const itemDiv = document.createElement('div');
        const itemDiv = document.createElement('div');
            itemDiv.classList.add('image-item');
        itemDiv.classList.add('image-item');


            const img = document.createElement('img');
        const img = document.createElement('img');
            img.src = item.imageUrl;
        img.src = item.imageUrl;
            img.alt = `Mapa ${item.id}`;
        img.alt = `Mapa ${item.id}`;
            itemDiv.appendChild(img);
        itemDiv.appendChild(img);


            const infoDiv = document.createElement('div');
        const infoDiv = document.createElement('div');
            infoDiv.classList.add('image-info');
        infoDiv.classList.add('image-info');
            infoDiv.innerHTML = `
        infoDiv.innerHTML = `
                <strong>Número do Mapa:</strong> ${item.id}<br>
            <strong>Número do Mapa:</strong> ${item.id}<br>
                <strong>Local:</strong> ${item.local}<br>
            <strong>Local:</strong> ${item.local}<br>
                <strong>Coordenada:</strong> ${item.coordinates}<br>
            <strong>Coordenada:</strong> ${item.coordinates}<br>
                <strong>Tag(s):</strong> ${item.tags.join(', ')}
            <strong>Tag(s):</strong> ${item.tags.join(', ')}
            `;
        `;
            itemDiv.appendChild(infoDiv);
        itemDiv.appendChild(infoDiv);


            imageContainer.appendChild(itemDiv);
        imageContainer.appendChild(itemDiv);
        });
    });


        if (filteredItems.length === 0) {
    if (filteredItems.length === 0) {
            imageContainer.innerHTML = '<p>Nenhuma imagem encontrada para os critérios selecionados.</p>';
        imageContainer.innerHTML = '<p>Nenhuma imagem encontrada para os critérios selecionados.</p>';
        }
     }
     }
}
}
5 805

edições

Menu de navegação