Widget:Test: mudanças entre as edições

Ir para navegação Ir para pesquisar

Widget:Test (ver código-fonte)

Edição das 04h33min de 27 de agosto de 2024

1 520 bytes adicionados ,  27 agosto
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 144: Linha 144:
         }
         }


      .filter-container {
        .filter-container {
    display: flex;
            display: flex;
    align-items: center;
            align-items: center;
    margin-bottom: 10px; /* Adiciona espaço abaixo do container */
            margin-bottom: 10px; /* Adiciona espaço abaixo do container */
}
        }


.filter-container input[type="checkbox"] {
        .filter-container input[type="checkbox"] {
    margin: 0;
            margin: 0;
    padding: 0;
            padding: 0;
    width: auto;
            width: auto;
    height: auto;
            height: auto;
    vertical-align: middle;
            vertical-align: middle;
}
        }


.filter-label {
        .filter-label {
    margin-left: 10px;
            margin-left: 10px;
    font-size: 14px;
            font-size: 14px;
    font-weight: bold;
            font-weight: bold;
    color: #0d0d0d;
            color: #0d0d0d;
    line-height: 1.5;
            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">
            <input type="checkbox" id="filterCheckbox">
    <label for="filterCheckbox" class="filter-label">Ativar Filtro</label>
            <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 displayMaps(maps) {
        function getSelectedOptions() {
             const container = document.getElementById('mapsContainer');
             const selectedType = mapTypeSelect.value;
             container.innerHTML = ''; // Limpa o container
             const selectedLocation = locationSelect.value;
            return { selectedType, selectedLocation };
        }


             maps.forEach(map => {
        function filterMapsByOptions(data, selectedType, selectedLocation) {
                 const mapElement = document.createElement('div');
            const filteredData = [];
                 mapElement.className = 'image-item';
             if (selectedType && specificOptions[selectedType] && specificOptions[selectedType][selectedLocation]) {
                 mapElement.innerHTML = `
                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>
                        <p>Tag: ${map.tag}</p>
                     </div>
                     </div>
                 `;
                 `;
                 container.appendChild(mapElement);
                 mapContainer.appendChild(div);
             });
             });
         }
         }


         function filterMaps() {
         function filterMaps() {
             const filterCheckbox = document.getElementById('filterCheckbox').checked;
             const { selectedType, selectedLocation } = getSelectedOptions();
             const filterText = document.getElementById('filterInput').value.trim();
             if (!selectedType || !selectedLocation) {
            const mapType = document.getElementById('mapType').value;
                alert('Selecione o Tipo de Mapa e o Local do X.');
             const location = document.getElementById('location').value;
                return;
             }


             const filterTags = filterText.split(',').map(tag => tag.trim().toLowerCase()); // Processa múltiplas tags
             const filteredMaps = filterMapsByOptions(specificOptions, selectedType, selectedLocation);


             const filteredMaps = Object.keys(specificOptions).reduce((acc, key) => {
             if (filterCheckbox.checked) {
                 if ((mapType && !specificOptions[key].type.includes(mapType)) ||
                const filterOption = filterOptionSelect.value;
                     (location && !specificOptions[key].location.includes(location))) {
                const filterValue = filterValueInput.value.toLowerCase().trim();
                     return acc;
 
                 if (!filterOption || !filterValue) {
                     alert('Digite um valor para filtrar.');
                     return;
                 }
                 }


                 const mapsToFilter = specificOptions[key].maps;
                 const filteredByValue = filteredMaps.filter(map => {
                const filtered = mapsToFilter.filter(map => {
                     if (filterOption === 'number') {
                     const mapTags = map.tag.split(',').map(tag => tag.trim().toLowerCase()); // Tags do mapa
                        return map.id.includes(filterValue);
                     return filterTags.every(tag => mapTags.includes(tag)); // Verifica se todas as tags estão presentes
                    } else if (filterOption === 'tag') {
                        return map.tag.toLowerCase().includes(filterValue);
                    }
                     return false;
                 });
                 });


                 return [...acc, ...filtered];
                 displayMaps(filteredByValue);
             }, []);
             } else {
 
                displayMaps(filteredMaps);
            displayMaps(filteredMaps);
            }
         }
         }


         document.getElementById('filterButton').addEventListener('click', () => {
         mapTypeSelect.addEventListener('change', filterMaps);
            const mapType = document.getElementById('mapType').value;
        locationSelect.addEventListener('change', filterMaps);
             const location = document.getElementById('location').value;
        filterCheckbox.addEventListener('change', function() {
 
             filterOptions.classList.toggle('hidden', !this.checked);
             if (!mapType || !location) {
             if (!this.checked) {
                 alert('Selecione pelo menos um tipo de mapa e um local do X');
                 filterOptionSelect.value = '';
                 return;
                filterValueInput.value = '';
                 displayMaps(filterMapsByOptions(specificOptions, ...getSelectedOptions()));
             }
             }
        });
        filterButton.addEventListener('click', filterMaps);


            filterMaps();
        window.onload = filterMaps; // Executa ao carregar a página
        });
     </script>
     </script>
</body>
</body>
</html>
</html>
Renee
Administradores
5 667

edições

Disponível em “https://wiki.pokexgames.com/index.php/Especial:MobileDiff/85834”

Menu de navegação