Merge pull request #137 from ResidenciaTICBrisa/notificacao-admin

Notificacao admin

lgbtq_connect/includes/admin/admin_script.js

@@ -178,19 +178,50 @@ function formatarDataHora(data) {
     return `${dia}/${mes}/${ano} ${hora}:${minutos}:${segundos}`;
 }
 
-// Pega uma array adequada e gera linhas na tabela
+function confirmarAcao(mensagem, formulario, acao) {
+    // Seleciona o modal e seus elementos
+    var modal = document.getElementById('confirmModal');
+    var confirmMessage = document.getElementById('confirmMessage');
+    var confirmBtn = document.getElementById('confirmBtn');
+    var cancelBtn = document.getElementById('cancelBtn');
+
+    // Define a mensagem do modal
+    confirmMessage.textContent = mensagem;
+
+    // Exibe o modal
+    modal.style.display = "block";
+
+    // Quando o usuário clica em "Confirmar"
+    confirmBtn.onclick = function() {
+        formulario.querySelector('input[name="action"]').value = acao;
+        formulario.submit();
+    };
+
+    // Quando o usuário clica em "Cancelar"
+    cancelBtn.onclick = function() {
+        modal.style.display = "none";
+    };
+
+    // Quando o usuário clica fora do modal
+    window.onclick = function(event) {
+        if (event.target == modal) {
+            modal.style.display = "none";
+        }
+    };
+}
+
 function gerarLinhas(tabela, arr)
 {
     const STATUS_BOTOES = {
         "Aprovado" : `
-        <button type="submit" name="action" value="reprove">Negar</button>
+        <button type="button" onclick="confirmarAcao('Tem certeza que quer negar a sugestão?', this.form, 'reprove')">Negar</button>
         `,
         "Negado" : `
-        <button type="submit" name="action" value="approve">Aprovar</button>
+        <button type="button" onclick="confirmarAcao('Tem certeza que quer aprovar a sugestão?', this.form, 'approve')">Aprovar</button>
         `,
         "Pendente" : `
-        <button type="submit" name="action" value="approve">Aprovar</button>
-        <button type="submit" name="action" value="reprove">Negar</button>
+        <button type="button" onclick="confirmarAcao('Tem certeza que quer aprovar a sugestão?', this.form, 'approve')">Aprovar</button>
+        <button type="button" onclick="confirmarAcao('Tem certeza que quer negar a sugestão?', this.form, 'reprove')">Negar</button>
         `
     }
     var tbody = tabela.querySelector('tbody');
@@ -226,15 +257,24 @@ function gerarLinhas(tabela, arr)
         <td>
             <form method="post" action="">
             <input type="hidden" name="id" value="${dados.id}">
+            <input type="hidden" name="action" value="">
             ${acoes}
+            <div id="confirmModal" class="modal">
+                <div class="modal-content">
+                    <p id="confirmMessage"></p>
+                    <button id="confirmBtn">Confirmar</button>
+                    <button id="cancelBtn">Cancelar</button>
+                </div>
+            </div>
             <button type="button">Editar</button>
-            <button type="submit" name="action" value="exclude">Excluir</button>
+            <button type="button" onclick="confirmarAcao('Tem certeza que quer excluir a sugestão?', this.form, 'exclude')">Excluir</button>
         </td>
         `;
         tbody.appendChild(linha);
     });
 }
 
+
 function filtrar(elemento) {
     let arr = [];
 
@@ -279,4 +319,5 @@ document.querySelectorAll('.ver-mais-btn').forEach(function(button) {
 window.addEventListener('load', function() {
     initMapAdmin();
     initSortButtons();
-});
+});
+

lgbtq_connect/includes/admin/formulario-admin-page.php

@@ -165,6 +165,13 @@ function excluir_formulario($id) {
             </select>
         </div>
         <div class="wrap">
+        <div id="confirmModal" class="modal">
+                <div class="modal-content">
+                    <p id="confirmMessage"></p>
+                    <button id="confirmBtn" onclick=>Confirmar</button>
+                    <button id="cancelBtn">Cancelar</button>
+                </div>
+            </div>
             <table class="wp-list-table widefat striped" id="tabela">
                 <thead>
                         <tr>

lgbtq_connect/includes/admin/style-admin.css

@@ -1,11 +1,11 @@
 #div_admin {
-    background-color:white;
+    background-color: white;
     border-width: 0px 0px 0px 5px;
     border-style: solid;
     border-image: linear-gradient(to bottom right, red, hotpink, blue, lime, yellow) 5;
     border-radius: 0px 20px 20px 0px;
     box-shadow: 2px 2px 5px #d0d0d0;
-    position:relative;
+    position: relative;
     margin: 20px 10px 0px 0px;
     padding: 50px;
 }
@@ -31,20 +31,20 @@
 
 #busca_nome_container {
     display: flex;
-    border:1px solid grey;
+    border: 1px solid grey;
 }
 
 #busca_nome {
-    flex-grow:2;
+    flex-grow: 2;
     border: none;
 }
 
 #busca_nome:focus {
-    outline:none;
+    outline: none;
 }
 
-#busca_nome_container:focus-within { 
-    outline: 1px solid blue; 
+#busca_nome_container:focus-within {
+    outline: 1px solid blue;
 }
 
 button[data-id] {
@@ -57,43 +57,78 @@ button[data-id] {
 
 button[data-id]:hover {
     text-decoration: underline;
-
 }
-.linha-destacada { 
+
+.linha-destacada {
     animation: fadeOut 2s ease;
 }
 
-#mapa_admin{
-    border-radius:20px;
-    margin-top:1.5vw;
-    margin-right:1.5vw;
+#mapa_admin {
+    border-radius: 20px;
+    margin-top: 1.5vw;
+    margin-right: 1.5vw;
+    position: relative; /* Adicionado para garantir que o z-index funcione */
+    z-index: 1; /* Baixo z-index para o mapa */
 }
 
-th{
+th {
     background-color: #f5f5f5;
 }
 
-td{
+td {
     background-color: white;
     text-align: center;
 }
 
-#tabela th{
+#tabela th {
     background-color: #f5f5f5;
     text-align: center;
-    font-weight:bold;
-    font-size:14px;
-    /* border-radius:0px !important; */
+    font-weight: bold;
+    font-size: 14px;
+    /* border-radius: 0px !important; */
+}
+
+#tabela {
+    border: none !important;
+}
+
+table th:first-child {
+    border-top-left-radius: 20px !important;
+}
+
+table th:last-child {
+    border-top-right-radius: 20px !important;
 }
 
-#tabela{
-    border:none !important;
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 1000; /* Aumentar o z-index para o modal */
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgb(0,0,0);
+    background-color: rgba(0,0,0,0.4);
 }
 
-table th:first-child{
-    border-top-left-radius:20px !important;
+.modal-content {
+    background-color: #fefefe;
+    margin: 10% auto; /* Ajuste a margem para centralizar */
+    padding: 10px;
+    border: 1px solid #888;
+    width: 50%; /* Diminua a largura para reduzir o tamanho da caixa */
+    max-width: 400px; /* Defina um limite máximo de largura para evitar que a caixa fique muito grande */
+    z-index: 1001; /* Certifique-se de que o conteúdo do modal também está na frente */
+    border-radius: 8px; /* Adicione um pouco de borda arredondada para um visual mais agradável */
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adicione sombra para um melhor contraste */
+    text-align: center; /* Centralize o texto dentro do modal */
+
 }
 
-table th:last-child{
-    border-top-right-radius:20px !important;
-}
+#confirmBtn, #cancelBtn {
+    padding: 10px 20px;
+    margin: 10px;
+    cursor: pointer;
+}