From dba22f7613887d4343cc77a31753a54ebb8e025d Mon Sep 17 00:00:00 2001 From: Max-Rohrer20 Date: Fri, 28 Jun 2024 10:10:51 -0300 Subject: [PATCH 1/2] =?UTF-8?q?Feature:=20Adi=C3=A7=C3=A3o=20do=20marcador?= =?UTF-8?q?=20personalizado=20dentro=20dos=20mapas=20do=20plugin?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lgbtq_connect/assets/js/script.js | 76 ++-- lgbtq_connect/includes/admin/admin_script.js | 377 ++++++++++--------- 2 files changed, 226 insertions(+), 227 deletions(-) diff --git a/lgbtq_connect/assets/js/script.js b/lgbtq_connect/assets/js/script.js index b5b1d154..6036d1e0 100644 --- a/lgbtq_connect/assets/js/script.js +++ b/lgbtq_connect/assets/js/script.js @@ -1,6 +1,13 @@ 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; @@ -15,7 +22,7 @@ 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 = []; @@ -47,12 +54,12 @@ class Mapa { } destruirMapa() { - this.mapa.remove() + this.mapa.remove(); this.mapa = null; } static sum(a, b) { - return a+b; + return a + b; } } @@ -62,7 +69,6 @@ class Pagina { this.id = id; this.div = document.getElementById(id); this.mapa = null; - } inicializar() { @@ -72,8 +78,7 @@ class Pagina { } destruir() { - if(this.mapa !== null) - { + if(this.mapa !== null) { this.mapa.destruirMapa(); } this.div.style.display = "none"; @@ -84,18 +89,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)); } } @@ -105,18 +109,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); + 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 @@ -125,9 +125,9 @@ 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) { + this.mapa.mapa.on('contextmenu', function(e) { // Verifica se existe um marcador atual if (self.marcador !== null) { // Remove o marcador do mapa @@ -138,10 +138,9 @@ class PaginaFormulario extends Pagina { } }); - for(var i = 0; iNegar + `, + "Negado": ` + + `, + "Pendente": ` + + + ` + } + const tbody = this.tabela.querySelector('tbody'); + + this.arr.forEach(dados => { + const linha = document.createElement('tr'); + linha.id = "formulario-" + dados.id; + let descricao; + let data = new Date(dados.data_hora); + let dataFormatada = Tabela.formatarDataHora(data); + if (dados.descricao.length > 10) { + descricao = ` + ${dados.descricao.substring(0, 10)}... + + + `; + } else { + descricao = dados.descricao; + } + + let acoes = STATUS_BOTOES[dados.situacao]; + + linha.innerHTML = ` + ${dados.nome} + ${dados.email} + ${dados.latitude} + ${dados.longitude} + ${dados.servico} + ${descricao} + ${dataFormatada} + ${dados.situacao} + +
+ + + ${acoes} + + + + `; + tbody.appendChild(linha); + }); + } +} + +function destacarLinhaTabela(id) { + let tabela = document.getElementById("tabela"); + let linha = document.getElementById(("formulario-" + id)); + + if (linha === null) { + return; + } + + // Loop para remover a linha-destacada de todas as linhas + for (let i = 0, row; (row = tabela.rows[i]); i++) { + row.classList.remove('linha-destacada'); + } + + linha.classList.add('linha-destacada'); // Adiciona a classe 'linha-destacada' + linha.scrollIntoView({ behavior: 'smooth' }); // Rola a página para a linha } function mostrarDescricaoCompleta(id) { @@ -48,132 +182,26 @@ function mostrarDescricaoCompleta(id) { botao.innerText = 'Ver menos'; } } -function destacarLinhaTabela(id) { - var tabela = document.getElementById("tabela"); - var linha = document.getElementById(id); - - // Loop para remover a linha-destacada de todas as linhas - for (var i = 0, row; (row = tabela.rows[i]); i++) { - row.classList.remove('linha-destacada'); - } - - linha.classList.add('linha-destacada'); // Adiciona a classe 'linha-destacada' - linha.scrollIntoView({ behavior: 'smooth' }); // Rola a página para a linha - - // Remove a classe linha-destacada depois de um determinado tempo - setTimeout(function () { - linha.classList.remove('linha-destacada'); - }, 2000); -} function initMapAdmin() { - if(document.getElementById('mapa_admin') == null) - { + if (document.getElementById('mapa_admin') == null) { return; } - mapAdmin = L.map('mapa_admin', {doubleClickZoom: false}).setView([-15.8267, -47.9218], 13); + mapAdmin = L.map('mapa_admin', { doubleClickZoom: false }).setView([-15.8267, -47.9218], 13); // Adiciona o provedor de mapa OpenStreetMap L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 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 initSortButtons() { - // Adiciona um evento de clique aos botões de ordenação - var sortButtons = document.querySelectorAll('.sort-btn'); - - sortButtons.forEach(function(button) { - button.addEventListener('click', function() { - var table = button.closest('table'); - var columnIndex = Array.from(button.parentNode.parentNode.children).indexOf(button.parentNode); - var order = button.getAttribute('data-order') || 'asc'; - - order = (order === 'asc') ? 'desc' : 'asc'; - button.setAttribute('data-order', order); - - // Atualiza o ícone do botão de ordenação - var icon = button.querySelector('.sort-icon'); - - // Remove e adiciona a classe do ícone com base na direção da ordenação - if (order === 'asc') { - icon.innerHTML = '▾'; // Triângulo para baixo (ordem crescente) - } else { - icon.innerHTML = '▴'; // Triângulo para cima (ordem decrescente) - } - - // Obtém todas as linhas da tabela, exceto a primeira (cabeçalho) - var rows = Array.from(table.querySelectorAll('tbody > tr')); - - // Determina o critério de ordenação com base na classe do botão - if (button.classList.contains('sort-by-date')) { - rows.sort(function(a, b) { - var aValue = new Date(a.children[columnIndex].textContent.trim().replace(/(\d{2})\/(\d{2})\/(\d{4}) (\d{2}):(\d{2}):(\d{2})/, '$3-$2-$1T$4:$5:$6')); - var bValue = new Date(b.children[columnIndex].textContent.trim().replace(/(\d{2})\/(\d{2})\/(\d{4}) (\d{2}):(\d{2}):(\d{2})/, '$3-$2-$1T$4:$5:$6')); - - return (order === 'asc') ? aValue - bValue : bValue - aValue; - }); - } else if (button.classList.contains('sort-by-email')) { - rows.sort(function(a, b) { - var aValue = a.children[columnIndex].textContent.trim().toLowerCase(); - var bValue = b.children[columnIndex].textContent.trim().toLowerCase(); - - return (order === 'asc') ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue); - }); - } else { - // Caso padrão: ordenação por texto - rows.sort(function(a, b) { - var aValue = a.children[columnIndex].textContent.trim().toLowerCase(); - var bValue = b.children[columnIndex].textContent.trim().toLowerCase(); - - return (order === 'asc') ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue); - }); - } - - // Limpa o conteúdo da tabela antes de reordenar - while (table.querySelector('tbody').firstChild) { - table.querySelector('tbody').removeChild(table.querySelector('tbody').firstChild); - } - - // Reinsere as linhas ordenadas na tabela - rows.forEach(function(row) { - table.querySelector('tbody').appendChild(row); - }); - }); - }); -} - -// Limpa o conteúdo da tabela -function excluirLinhas(tabela) -{ - while (tabela.querySelector('tbody').firstChild) { - tabela.querySelector('tbody').removeChild(tabela.querySelector('tbody').firstChild); - } -} - -function adicionarZero(numero) { - return numero < 10 ? '0' + numero : numero; -} - -function formatarDataHora(data) { - const dia = adicionarZero(data.getDate()); - const mes = adicionarZero(data.getMonth() + 1); // Adiciona 1 porque os meses são indexados de 0 a 11 - const ano = data.getFullYear(); - const hora = adicionarZero(data.getHours()); - const minutos = adicionarZero(data.getMinutes()); - const segundos = adicionarZero(data.getSeconds()); - - return `${dia}/${mes}/${ano} ${hora}:${minutos}:${segundos}`; -} - function confirmarAcao(mensagem, formulario, acao) { // Seleciona o modal e seus elementos var modal = document.getElementById('confirmModal'); @@ -188,82 +216,24 @@ 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"; } }; } -function gerarLinhas(tabela, arr) -{ - const STATUS_BOTOES = { - "Aprovado" : ` - - `, - "Negado" : ` - - `, - "Pendente" : ` - - - ` - } - var tbody = tabela.querySelector('tbody'); - - arr.forEach(dados => { - var linha = document.createElement('tr'); - linha.id = dados.id; - var descricao; - var data = new Date(dados.data_hora); - var dataFormatada = formatarDataHora(data); - if (dados.descricao.length > 10){ - descricao = ` - ${dados.descricao.substring(0, 10)}... - - - ` - } - else { - descricao = dados.descricao; - } - - acoes = STATUS_BOTOES[dados.situacao]; - - linha.innerHTML = ` - ${dados.nome} - ${dados.email} - ${dados.latitude} - ${dados.longitude} - ${dados.servico} - ${descricao} - ${dataFormatada} - ${dados.situacao} - - - - - ${acoes} - - - - `; - tbody.appendChild(linha); - }); -} - - function filtrar(elemento) { let arr = []; @@ -276,13 +246,11 @@ function filtrar(elemento) { Filtro.status = elemento.value; } - if(filtro_nome) - { - Filtro.nome = filtro_nome.value.toLowerCase().trim(); + if (filtro_nome) { + Filtro.nome = filtro_nome.value; } - if (filtro_servico) - { + if (filtro_servico) { Filtro.servico = filtro_servico.value; } @@ -292,13 +260,51 @@ function filtrar(elemento) { `; const tabela = document.getElementById("tabela"); - excluirLinhas(tabela); - gerarLinhas(tabela, arr); + const tabelaObj = new Tabela([], tabela); + tabelaObj.arr = arr; + + tabelaObj.excluirLinhas(); + tabelaObj.gerarLinhas(); +} + +function ordenar(elemento) { + let order = elemento.getAttribute('data-order') || 'asc'; + + order = (order === 'asc') ? 'desc' : 'asc'; + elemento.setAttribute('data-order', order); + + // Atualiza o ícone do botão de ordenação + var icon = elemento.querySelector('.sort-icon'); + + // Remove e adiciona a classe do ícone com base na direção da ordenação + if (order === 'asc') { + icon.innerHTML = '▾'; // Triângulo para baixo (ordem crescente) + } else { + icon.innerHTML = '▴'; // Triângulo para cima (ordem decrescente) + } + + Ordenador.ordem = order; + + // 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 { + // Caso padrão: ordenação por nome + Ordenador.coluna = "nome"; + } + + const tabelaObj = new Tabela([], tabela); + tabelaObj.arr = Ordenador.realizarOrdenacao(tabelaObj.arr); + + tabelaObj.excluirLinhas(); + 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); }); @@ -306,7 +312,12 @@ document.querySelectorAll('.ver-mais-btn').forEach(function(button) { // Inicializa o mapa e os botões de ordenação quando a página carrega window.onload = function () { - initSortButtons(); initMapAdmin(); }; +// Exporta as classes +module.exports = { + Filtro, + Ordenador, + Tabela, +}; From a33abb04911a6cef87ff5e59dc844e59a7ae1a3e Mon Sep 17 00:00:00 2001 From: MarcosViniciusG Date: Tue, 2 Jul 2024 11:15:29 -0300 Subject: [PATCH 2/2] =?UTF-8?q?resolu=C3=A7=C3=A3o=20dos=20testes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lgbtq_connect/includes/admin/admin_script.js | 22 +++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/lgbtq_connect/includes/admin/admin_script.js b/lgbtq_connect/includes/admin/admin_script.js index ac53fd55..708f0b00 100644 --- a/lgbtq_connect/includes/admin/admin_script.js +++ b/lgbtq_connect/includes/admin/admin_script.js @@ -1,9 +1,3 @@ -// 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] -}); let mapAdmin; let mapEdit; let isSearching = false; @@ -186,6 +180,13 @@ function mostrarDescricaoCompleta(id) { } function initMapAdmin() { + // 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] + }); + if (document.getElementById('mapa_admin') == null) { return; } @@ -205,6 +206,13 @@ function initMapAdmin() { } 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(); @@ -516,5 +524,5 @@ window.onload = function () { module.exports = { Filtro, Ordenador, - Tabela, + Tabela };