diff --git a/lgbtq_connect/assets/index.html b/lgbtq_connect/assets/index.html index 321f2f87..e90739f8 100644 --- a/lgbtq_connect/assets/index.html +++ b/lgbtq_connect/assets/index.html @@ -10,8 +10,61 @@
Encontre empreendimentos e serviços já identificados como LGBTQ+ friendly:
- - + + +
+ + +
diff --git a/lgbtq_connect/assets/js/script.js b/lgbtq_connect/assets/js/script.js index eb2fa368..0923629d 100644 --- a/lgbtq_connect/assets/js/script.js +++ b/lgbtq_connect/assets/js/script.js @@ -211,4 +211,86 @@ function transicaoPagina(tipo, id) { // Inicializa o plugin window.onload = function () { transicaoPagina("PaginaComPopup", "div_index") +} + +function abrirFiltroServico(){ + const modal = document.getElementById('modal_filtro'); + const botao = document.getElementById('filtro_servico'); + + // Alterna entre mostrar e esconder o modal + if (modal.style.display === "none" || modal.style.display === "") { + modal.style.display = "block"; + botao.style.backgroundColor = '#e2e2e2'; + botao.style.border = '1px solid #979797'; + } else { + modal.style.display = "none"; + botao.style.backgroundColor = '#f5f5f5'; + botao.style.border = '1px solid rgb(209, 216, 212)'; + } + + +} + +// Previne o fechamento do modal ao clicar nos checkboxes +document.querySelectorAll('.name_servico').forEach(checkbox => { + checkbox.addEventListener('click', function(event) { + event.stopPropagation(); // Impede que o clique se propague e feche o modal + }); +}); + +// Fechar o modal se clicar fora dele +window.onclick = function(event) { + const modal = document.getElementById('modal_filtro'); + const botao = document.getElementById('filtro_servico'); + if (event.target !== modal && event.target !== document.getElementById('filtro_servico')) { + modal.style.display = "none"; + botao.style.backgroundColor = '#f5f5f5'; + botao.style.border = '1px solid rgb(209, 216, 212)'; + } +}; + +// Capturando o checklist para gerar marcadores +document.querySelectorAll('.name_servico').forEach(function(checkbox) { + checkbox.addEventListener('change', function() { + filtrarServicos(); + }); +}); + + +function filtrarServicos() { + // Obter os serviços selecionados + const servicosSelecionados = Array.from(document.querySelectorAll('.name_servico:checked')).map(cb => cb.value); + + // Se "Outros" estiver selecionado, adicionar lógica para filtrar todos os serviços não pré-definidos + const servicosPreDefinidos = ["bar/restaurante", "entretenimento", "bar", "beleza", "hospedagem", "ensino", "academia"]; + const outrosSelecionado = servicosSelecionados.includes("outros"); + + // Filtrar os formulários aprovados com base nos serviços selecionados + const filtrados = formularios_aprovados.filter(formulario => { + return servicosSelecionados.includes(formulario.servico) || + (outrosSelecionado && !servicosPreDefinidos.includes(formulario.servico)); + }); + + // Chamar a função para atualizar o mapa com os serviços filtrados + atualizarMapaComFiltrados(filtrados); +} + + +function atualizarMapaComFiltrados(filtrados) { + // Limpar marcadores do mapa antes de aplicar o filtro + pagina.mapa.marcadores.forEach(marcador => pagina.mapa.mapa.removeLayer(marcador)); + pagina.mapa.marcadores = []; + + // Aplicar o filtro e adicionar os novos marcadores + filtrados.forEach(formulario => { + const popupConteudo = ` +
+

${formulario.nome}

+ ${formulario.servico} +
+

${formulario.descricao}

+
+ `; + pagina.mapa.adicionarMarcador(L.marker([formulario.latitude, formulario.longitude], { icon: personalIcon }).bindPopup(popupConteudo)); + }); } \ No newline at end of file diff --git a/lgbtq_connect/assets/styles/styles.css b/lgbtq_connect/assets/styles/styles.css index e0b9ffab..2c521740 100644 --- a/lgbtq_connect/assets/styles/styles.css +++ b/lgbtq_connect/assets/styles/styles.css @@ -32,6 +32,7 @@ .button_search{ width: 17%; + cursor: pointer; } .ver { @@ -61,10 +62,10 @@ } #searchInputIndex, #searchInputForm{ - width: 77%; - margin: 0 auto; + width: 90%; padding:10px !important; - margin-left:0px; + margin-bottom: 0; + margin-right: 2%; } #servico{ @@ -206,9 +207,76 @@ background-color: #ccc; } -.search_wrapper{ +.search_wrapper { background-color: white; - display:flex; - align-items:center; - justify-content:center; + display: flex; + justify-content: space-between; + align-items: center; + position: relative; +} + +#filtro_servico { + outline: none; + width: 45%; + font-family: inter, sans-serif; + height: 40px; + font-weight: 550; + background-color: #f5f5f5; + border: 1px solid rgb(209, 216, 212); + border-radius: 10px; + display: flex; + flex-direction: row; + justify-content: space-around; + align-items: center; + cursor: pointer; +} + +#filtro_servico p, +#filtro_servico svg { + pointer-events: none; +} + +#modal_filtro { + width: 41.5%; + position: absolute; + top: 105%; + left: 0; + background-color: white; + border: 1px solid #ccc; + padding: 10px; + z-index: 2000; + border: 1px solid black; + border-radius: 10px; +} + +.label_servico{ + font-size: 12.5px; +} + +.name_servico[value="bar/restaurante"] { + accent-color: red; +} + +.name_servico[value="entretenimento"] { + accent-color: orange; +} + +.name_servico[value="beleza"] { + accent-color: yellow; +} + +.name_servico[value="hospedagem"] { + accent-color: green; +} + +.name_servico[value="ensino"] { + accent-color: blue; +} + +.name_servico[value="academia"] { + accent-color: purple; +} + +.name_servico[value="outros"] { + accent-color: gray; } \ No newline at end of file