diff --git a/lgbtq_connect/assets/js/script.js b/lgbtq_connect/assets/js/script.js index ec640df5..eab686e9 100644 --- a/lgbtq_connect/assets/js/script.js +++ b/lgbtq_connect/assets/js/script.js @@ -1,13 +1,20 @@ let pagina = null; - // CLASSES +// Definindo o ícone personalizado no escopo global +var personalIcon = L.icon({ + iconUrl: 'https://res.cloudinary.com/dxsx0emuu/image/upload/f_auto,q_auto/lc_marker', + iconSize: [20, 30], // tamanho do ícone + popupAnchor: [1, -10] +}); + +// CLASSES class Mapa { container; static MAPAS = { - "div_index" : "mapa_index", - "div_form" : "mapa_formulario", - "div_saida" : "mapa_saida" + "div_index": "mapa_index", + "div_form": "mapa_formulario", + "div_saida": "mapa_saida" } constructor(container) { @@ -15,9 +22,9 @@ class Mapa { this.mapa = L.map(this.container, { doubleClickZoom: false }).setView([-15.8267, -47.9218], 13); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { - attribution: '© OpenStreetMap contributors' + attribution: '© OpenStreetMap contributors' }).addTo(this.mapa); - + this.marcadores = []; } @@ -35,8 +42,8 @@ class Mapa { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { let user_position = []; - user_position.push(position.coords.latitude); - user_position.push(position.coords.longitude); + user_position.push(position.coords.latitude); + user_position.push(position.coords.longitude); self.mudarLocalizacao(user_position); }); } else { @@ -47,7 +54,7 @@ class Mapa { } destruirMapa() { - this.mapa.remove() + this.mapa.remove(); this.mapa = null; } } @@ -58,7 +65,6 @@ class Pagina { this.id = id; this.div = document.getElementById(id); this.mapa = null; - } inicializar() { @@ -68,8 +74,7 @@ class Pagina { } destruir() { - if(this.mapa !== null) - { + if (this.mapa !== null) { this.mapa.destruirMapa(); } this.div.style.display = "none"; @@ -80,18 +85,17 @@ class PaginaComPopup extends Pagina { inicializar() { super.inicializar(); - for(var i = 0; i -

${formulario.nome}

- ${formulario.servico} -
-

${formulario.descricao}

- - `; - this.mapa.adicionarMarcador(L.marker([formulario.latitude, formulario.longitude]).bindPopup(popupConteudo)); +
+

${formulario.nome}

+ ${formulario.servico} +
+

${formulario.descricao}

+
+ `; + this.mapa.adicionarMarcador(L.marker([formulario.latitude, formulario.longitude], { icon: personalIcon }).bindPopup(popupConteudo)); } } @@ -101,18 +105,14 @@ class PaginaComPopup extends Pagina { } class PaginaFormulario extends Pagina { - inicializar() { super.inicializar(); this.marcador = null; var self = this; - this.mapa.mapa.on('click', function(e) { - - if(self.marcador==null) - { - self.marcador = L.marker(e.latlng).addTo(self.mapa.mapa); + this.mapa.mapa.on('click', function (e) { + if (self.marcador == null) { + self.marcador = L.marker(e.latlng, { icon: personalIcon }).addTo(self.mapa.mapa); } - self.marcador.setLatLng(e.latlng); var lat = e.latlng.lat; // Latitude @@ -121,7 +121,7 @@ class PaginaFormulario extends Pagina { // Atualiza os valores dos campos de entrada ocultos document.getElementById('latitude').value = lat; document.getElementById('longitude').value = lng; - }) + }); this.mapa.mapa.on('contextmenu', function (e) { // Verifica se existe um marcador atual @@ -134,10 +134,9 @@ class PaginaFormulario extends Pagina { } }); - for(var i = 0; iNegar `, - "Negado" : ` + "Negado": ` `, - "Pendente" : ` + "Pendente": ` ` @@ -114,14 +109,13 @@ class Tabela { let descricao; let data = new Date(dados.data_hora); let dataFormatada = Tabela.formatarDataHora(data); - if (dados.descricao.length > 10){ + if (dados.descricao.length > 10) { descricao = ` ${dados.descricao.substring(0, 10)}... - ` - } - else { + `; + } else { descricao = dados.descricao; } @@ -152,9 +146,9 @@ class Tabela { function destacarLinhaTabela(id) { let tabela = document.getElementById("tabela"); - let linha = document.getElementById(("formulario-" +id)); + let linha = document.getElementById(("formulario-" + id)); - if(linha===null) { + if (linha === null) { return; } @@ -186,13 +180,15 @@ function mostrarDescricaoCompleta(id) { } function initMapAdmin() { - if (document.getElementById('mapa_admin') == null) { - return; - } + // Definindo o ícone personalizado no escopo global + const personalIcon = L.icon({ + iconUrl: 'https://res.cloudinary.com/dxsx0emuu/image/upload/f_auto,q_auto/lc_marker', + iconSize: [20, 30], // tamanho do ícone + popupAnchor: [1, -10] + }); - // Verifica se o mapa já foi inicializado e destrói se necessário - if (mapAdmin !== undefined) { - mapAdmin.remove(); + if (document.getElementById('mapa_admin') == null) { + return; } mapAdmin = L.map('mapa_admin', { doubleClickZoom: false }).setView([-15.8267, -47.9218], 13); @@ -202,14 +198,21 @@ function initMapAdmin() { attribution: '© OpenStreetMap contributors' }).addTo(mapAdmin); - formularios_aprovados.forEach(function(formulario) { - L.marker([formulario.latitude, formulario.longitude]).addTo(mapAdmin).on('click', function() { + formularios_aprovados.forEach(function (formulario) { + L.marker([formulario.latitude, formulario.longitude], { icon: personalIcon }).addTo(mapAdmin).on('click', function () { destacarLinhaTabela(formulario.id); }); }); } function initMapEdit(latitude, longitude, nome, servico, descricao) { + // Definindo o ícone personalizado no escopo global + const personalIcon = L.icon({ + iconUrl: 'https://res.cloudinary.com/dxsx0emuu/image/upload/f_auto,q_auto/lc_marker', + iconSize: [20, 30], // tamanho do ícone + popupAnchor: [1, -10] + }); + // Verifica se o mapa já foi inicializado e destrói se necessário if (mapEdit !== undefined) { mapEdit.remove(); @@ -238,9 +241,10 @@ function initMapEdit(latitude, longitude, nome, servico, descricao) { } // Adiciona um marcador arrastável - var marker = L.marker([latitude, longitude], { - draggable: true - }).addTo(mapEdit).bindPopup(popupConteudo); + var marker = L.marker( + [latitude, longitude], + {draggable: true, icon: personalIcon } + ).addTo(mapEdit).bindPopup(popupConteudo); // Evento que é chamado quando o marcador é arrastado marker.on('dragend', function (e) { @@ -265,18 +269,18 @@ function confirmarAcao(mensagem, formulario, acao) { modal.style.display = "block"; // Quando o usuário clica em "Confirmar" - confirmBtn.onclick = function() { + confirmBtn.onclick = function () { formulario.querySelector('input[name="action"]').value = acao; formulario.submit(); }; // Quando o usuário clica em "Cancelar" - cancelBtn.onclick = function() { + cancelBtn.onclick = function () { modal.style.display = "none"; }; // Quando o usuário clica fora do modal - window.onclick = function(event) { + window.onclick = function (event) { if (event.target == modal) { modal.style.display = "none"; } @@ -448,14 +452,11 @@ function filtrar(elemento) { Filtro.status = elemento.value; } - if(filtro_nome) - { - Filtro.nome = filtro_nome.value.toLowerCase().trim(); - Filtro.nome = filtro_nome.value + if (filtro_nome) { + Filtro.nome = filtro_nome.value; } - if (filtro_servico) - { + if (filtro_servico) { Filtro.servico = filtro_servico.value; } arr = Filtro.realizarFiltragem(formularios_todos); @@ -467,7 +468,7 @@ function filtrar(elemento) { const tabelaObj = new Tabela([], tabela); tabelaObj.arr = arr; - tabelaObj.excluirLinhas() + tabelaObj.excluirLinhas(); tabelaObj.gerarLinhas(); } @@ -491,26 +492,24 @@ function ordenar(elemento) { // Determina o critério de ordenação com base na classe do botão if (elemento.classList.contains('sort-by-date')) { - Ordenador.coluna = "data_hora" - } - else if (elemento.classList.contains('sort-by-email')) { - Ordenador.coluna = "email" - } - else { + Ordenador.coluna = "data_hora"; + } else if (elemento.classList.contains('sort-by-email')) { + Ordenador.coluna = "email"; + } else { // Caso padrão: ordenação por nome - Ordenador.coluna = "nome" + Ordenador.coluna = "nome"; } const tabelaObj = new Tabela([], tabela); tabelaObj.arr = Ordenador.realizarOrdenacao(tabelaObj.arr); tabelaObj.excluirLinhas(); - tabelaObj.gerarLinhas() + tabelaObj.gerarLinhas(); } // Adiciona um evento de clique a todos os botões de "Ver mais/menos" -document.querySelectorAll('.ver-mais-btn').forEach(function(button) { - button.addEventListener('click', function() { +document.querySelectorAll('.ver-mais-btn').forEach(function (button) { + button.addEventListener('click', function () { var id = button.getAttribute('data-id'); mostrarDescricaoCompleta(id); }); @@ -525,5 +524,5 @@ window.onload = function () { module.exports = { Filtro, Ordenador, - Tabela, -}; \ No newline at end of file + Tabela +};