Feat: Retirado a função de destacar linha e adicionado popup nos marc…

…adores no mapa do administrador
ResidenciaTICBrisa · Aug 18, 2024 · 6c3983e · 6c3983e
1 parent 5ea363e
commit 6c3983e
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 23 deletions.
diff --git a/lgbtq_connect/includes/admin/admin_script.js b/lgbtq_connect/includes/admin/admin_script.js
@@ -248,26 +248,6 @@ class Tabela {
     }
 }
 
-function destacarLinhaTabela(id) {
-    const tabela = document.getElementById("tabela");
-    const 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
-    setTimeout(function () {
-        linha.classList.remove('linha-destacada');
-    }, 3000);
-}
-
 function mostrarDescricaoCompleta(id) {
     var descricaoResumida = document.getElementById('descricaoResumida_' + id);
     var descricaoCompleta = document.getElementById('descricaoCompleta_' + id);
@@ -308,11 +288,18 @@ function initMapAdmin() {
         }).addTo(mapAdmin);
 
         formularios_aprovados.forEach(function (formulario) {
+            let 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>
+            `;
+
             // Obtenha o marcador específico para o tipo de serviço do formulário
             const personalIcon = getMarcador(formulario.servico);
-            L.marker([formulario.latitude, formulario.longitude], { icon: personalIcon }).addTo(mapAdmin).on('click', function () {
-                destacarLinhaTabela(formulario.id);
-            });
+            L.marker([formulario.latitude, formulario.longitude], { icon: personalIcon }).addTo(mapAdmin).bindPopup(popupConteudo);
         });
 
         var CustomControl = L.Control.extend({

diff --git a/lgbtq_connect/includes/admin/style-admin.css b/lgbtq_connect/includes/admin/style-admin.css
@@ -508,4 +508,41 @@ table th:last-child {
     flex: 1; /* Faz com que os botões cresçam igualmente dentro do contêiner */
     width: 100px;
     margin: 5px;
+}
+
+.gradiente {
+    width: 100%; 
+    height: 2px; 
+    background-image: linear-gradient(to right, 
+    red, hotpink, blue, lime, yellow);
+
+}
+.pop{
+    font-family: Arial, sans-serif;
+    text-align: center;
+    color: #6d6d6d;
+    word-wrap: break-word;
+}
+
+.leaflet-popup-content h4 {
+    font-family: Arial, sans-serif; 
+    font-size: 15px;
+    line-height: 1.2; /* Ajuste a altura da linha para 120% */
+    color: #000000;
+    text-align: center;
+    word-wrap: break-word; /* Permite a quebra de palavras longas */
+    overflow-wrap: break-word; /* Permite a quebra de palavras longas */
+    white-space: normal; /* Permite que o texto quebre em várias linhas */
+}
+.leaflet-popup-content p{
+    font-family: Arial, sans-serif;
+    text-align: center;
+    color: #000000;
+}
+.leaflet-popup-content i{
+    font-family: Arial, sans-serif;
+    text-align: left;
+    line-height: 10%;
+    font-size: 15px;
+    color: #6d6d6d;
 }