Skip to content

Commit

Permalink
Merge pull request #216 from ResidenciaTICBrisa/filtroMapa
Browse files Browse the repository at this point in the history 
Filtro por tipo de serviço mapa
  • Loading branch information
@MarcosViniciusG
MarcosViniciusG authored Aug 14, 2024
2 parents 40670c4 + 1442190 commit 3609e19
Show file tree
Hide file tree
Showing 3 changed files with 212 additions and 9 deletions.
57 changes: 55 additions & 2 deletions lgbtq_connect/assets/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,61 @@
<div class="title">Encontre empreendimentos e serviços já identificados como LGBTQ+ friendly:<br></div>
<form method="post">
<div class="search_wrapper">
<input type="text" id="searchInputIndex" placeholder="Pesquise a cidade ou estado...">
<button type="button" onclick="pesquisar('searchInputIndex', 'listaResultadosIndex')" class="button_search">Pesquisar</button>
<button id="filtro_servico" type="button" onclick="abrirFiltroServico()">
<p>Filtro por serviço</p>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293z"/>
</svg>
</button>
<div id="modal_filtro" style="display: none;">
<div style="display: flex; flex-direction: row; font-size: 10px;">
<div>
<label class="label_servico">
<input type="checkbox" class="name_servico" value="bar/restaurante" checked>
Bares/restaurantes
</label>
<br>
<label class="label_servico">
<input type="checkbox" class="name_servico" value="entretenimento" checked>
Entretenimento
</label>
<br>
<label class="label_servico">
<input type="checkbox" class="name_servico" value="beleza" checked>
Beleza
</label>
<br>
<label class="label_servico">
<input type="checkbox" class="name_servico" value="hospedagem" checked>
Hospedagem
</label>
</div>
<div>
<label class="label_servico">
<input type="checkbox" class="name_servico" value="ensino" checked>
Ensino
</label>
<br>
<label class="label_servico">
<input type="checkbox" class="name_servico" value="academia" checked>
Academia
</label>
<br>
<label class="label_servico">
<input type="checkbox" class="name_servico" value="outros" checked>
Outros
</label>
</div>
</div>
</div>
<div style="display: flex; flex-direction: row; justify-content: center; width: 45%;">
<input type="text" id="searchInputIndex" placeholder="Pesquise a cidade ou estado...">
<button type="button" onclick="pesquisar('searchInputIndex', 'listaResultadosIndex')" class="button_search">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</svg>
</button>
</div>
</div>
</form>
<div id="listaResultadosIndex"></div>
Expand Down
82 changes: 82 additions & 0 deletions lgbtq_connect/assets/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = `
<div class="pop">
<h4><strong>${formulario.nome}</strong></h4>
<i>${formulario.servico}</i>
<div class="gradiente"></div>
<p><strong>${formulario.descricao}</strong></p>
</div>
`;
pagina.mapa.adicionarMarcador(L.marker([formulario.latitude, formulario.longitude], { icon: personalIcon }).bindPopup(popupConteudo));
});
}
82 changes: 75 additions & 7 deletions lgbtq_connect/assets/styles/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@

.button_search{
width: 17%;
cursor: pointer;
}

.ver {
Expand Down Expand Up @@ -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{
Expand Down Expand Up @@ -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;
}

0 comments on commit 3609e19

Please sign in to comment.