Skip to content

Commit

Permalink
Merge pull request #131 from ResidenciaTICBrisa/estilizacao
Browse files Browse the repository at this point in the history 
Adição de filtro por status na interface do administrador
  • Loading branch information
@Max-Rohrer20
Max-Rohrer20 authored May 14, 2024
2 parents f53aed8 + 40f606d commit 607d20b
Show file tree
Hide file tree
Showing 5 changed files with 300 additions and 98 deletions.
108 changes: 104 additions & 4 deletions lgbtq_connect/includes/admin/admin_script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ function mostrarDescricaoCompleta(id) {
}
}
function destacarLinhaTabela(id) {
var tabela = document.getElementById('tabela-Aprovado');
var tabela = document.getElementById("tabela");
var linha = document.getElementById(id);

// Loop para remover a linha-destacada de todas as linhas
Expand Down Expand Up @@ -74,9 +74,9 @@ function initSortButtons() {

// 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)
icon.innerHTML = '▾'; // Triângulo para baixo (ordem crescente)
} else {
icon.innerHTML = '▲'; // Triângulo para cima (ordem decrescente)
icon.innerHTML = '▴'; // Triângulo para cima (ordem decrescente)
}

// Obtém todas as linhas da tabela, exceto a primeira (cabeçalho)
Expand Down Expand Up @@ -120,6 +120,106 @@ function initSortButtons() {
});
}

// 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}`;
}

// Pega uma array adequada e gera linhas na tabela
function gerarLinhas(tabela, arr)
{
const STATUS_BOTOES = {
"Aprovado" : `
<button type="submit" name="action" value="reprove">Negar</button>
`,
"Negado" : `
<button type="submit" name="action" value="approve">Aprovar</button>
`,
"Pendente" : `
<button type="submit" name="action" value="approve">Aprovar</button>
<button type="submit" name="action" value="reprove">Negar</button>
`
}
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 = `
<span id="descricaoResumida_${dados.id}">${dados.descricao.substring(0, 10)}...</span>
<span id="descricaoCompleta_${dados.id}" style="display:none;">${dados.descricao}</span>
<button data-id="${dados.id}" onclick="mostrarDescricaoCompleta(${dados.id})">Ver mais</button>
`
}
else {
descricao = dados.descricao;
}

acoes = STATUS_BOTOES[dados.situacao];

linha.innerHTML = `
<td>${dados.nome}</td>
<td>${dados.email}</td>
<td>${dados.latitude}</td>
<td>${dados.longitude}</td>
<td>${dados.servico}</td>
<td>${descricao}</td>
<td>${dataFormatada}</td>
<td>${dados.situacao}</td>
<td>
<form method="post" action="">
<input type="hidden" name="id" value="${dados.id}">
${acoes}
<button type="submit" name="action" value="exclude">Excluir</button>
<button type="button">Editar</button>
<button type="submit" name="action" value="tabela">Ações</button>
</td>
`;
tbody.appendChild(linha);
});
}

function filtrar(elemento) {
console.log("Houve mudança");
let arr = [];
var value = elemento.value;
if(value==="aprovados") {
arr = formularios_aprovados;
}
else if (value==="negados") {
arr = formularios_negados;
}
else if (value==="pendentes") {
arr = formularios_pendentes;
}

var tabela = document.getElementById("tabela");
excluirLinhas(tabela);
gerarLinhas(tabela, arr);
}

// 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() {
Expand All @@ -132,4 +232,4 @@ document.querySelectorAll('.ver-mais-btn').forEach(function(button) {
window.addEventListener('load', function() {
initMapAdmin();
initSortButtons();
});
});
154 changes: 60 additions & 94 deletions lgbtq_connect/includes/admin/formulario-admin-page.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,100 +61,66 @@ function excluir_formulario($id) {
<link rel="stylesheet" href="<?php echo plugin_dir_url(__FILE__); ?>style-admin.css">
</head>
<body>
<div id="mapa_admin" style="height: 400px; margin-bottom: 10px;"></div>
<div class="wrap">
<?php
// Definições das categorias de formulários
$categorias = [
'Pendente' => 'Formulários Pendentes',
'Aprovado' => 'Formulários Aprovados',
'Negado' => 'Formulários Negados'
];

// Consulta os dados da tabela formulario
global $wpdb;

// Parâmetros para ordenação (nome e direção)
$order_by = isset($_GET['order_by']) ? $_GET['order_by'] : 'nome'; // Coluna padrão para ordenação é o nome
$order = isset($_GET['order']) ? $_GET['order'] : 'asc'; // Ordem padrão é crescente

// Monta a consulta SQL com base nos parâmetros de ordenação
$query = "SELECT * FROM lc_formulario ORDER BY $order_by $order";
$dados_formulario = $wpdb->get_results($query);

// Itera sobre cada categoria de formulários
foreach ($categorias as $situacao => $titulo) {
// Filtra os dados pelo status (situacao)
$formularios_filtrados = array_filter($dados_formulario, function($dados) use ($situacao) {
return $dados->situacao === $situacao;
});

// Exibe a tabela apenas se houver formulários para essa categoria
if (!empty($formularios_filtrados)) {
echo '<h2>' . $titulo . '</h2>';
echo '<table class="wp-list-table widefat striped" id=tabela-'. $situacao .'>'; echo '<thead>';
echo '<tr>';
echo '<th class="sort-header">Nome <button class="sort-btn" data-order="asc"><span class="sort-icon">&#9650;</span></button></th>
';
echo '<th class="sort-header">Email <button class="sort-btn sort-by-email" data-order="asc"><span class="sort-icon">&#9650;</span></button></th>';
echo '<th>Latitude</th>';
echo '<th>Longitude</th>';
echo '<th>Serviço</th>';
echo '<th>Descrição</th>';
echo '<th class="sort-header">Data e hora <button class="sort-btn sort-by-date" data-order="asc"><span class="sort-icon">&#9650;</span></button></th>';
echo '<th>Status</th>';
echo '<th>Ações</th>';
echo '</tr>';
echo '</thead>';
echo '<tbody>';

// Itera sobre os formulários filtrados
foreach ($formularios_filtrados as $dados) {
echo '<tr id = ' . $dados->id .'>'; echo '<td>' . $dados->nome . '</td>';
echo '<td>' . $dados->email . '</td>';
echo '<td>' . $dados->latitude . '</td>';
echo '<td>' . $dados->longitude . '</td>';
echo '<td>' . $dados->servico . '</td>';
echo '<td>';
if (strlen($dados->descricao) > 10) {
echo '<span id="descricaoResumida_' . $dados->id . '">' . substr($dados->descricao, 0, 10) . '...</span>';
echo '<span id="descricaoCompleta_' . $dados->id . '" style="display:none;">' . $dados->descricao . '</span>';
echo ' <button data-id="' . $dados->id . '" onclick="mostrarDescricaoCompleta(' . $dados->id . ')">Ver mais</button>';
} else {
echo $dados->descricao;
}
echo '</td>';
echo '<td>' . date('d/m/Y H:i:s', strtotime($dados->data_hora)) . '</td>';
echo '<td>' . $dados->situacao . '</td>';
echo '<td>';

echo '<form method="post" action="">';
echo '<input type="hidden" name="id" value="' . $dados->id . '">';
// Botões de ação com base na situação do formulário
if ($situacao === 'Pendente') {
echo '<button type="submit" name="action" value="approve">Aprovar</button>';
echo '<button type="submit" name="action" value="reprove">Negar</button>';
} elseif ($situacao === 'Aprovado') {
echo '<button type="submit" name="action" value="reprove">Negar</button>';
} elseif ($situacao === 'Negado') {
echo '<button type="submit" name="action" value="approve">Aprovar</button>';
}

echo '<button type="submit" name="action" value="exclude">Excluir</button>';
echo '<button type="button">Editar</button>';
echo '</form>';
echo '</td>';
echo '</tr>';
}

echo '</tbody>';
echo '</table>';
}
}
//linkando arquivo javascript
echo '<script src="' . plugin_dir_url(__FILE__) . 'admin_script.js"></script>';

?>
<div id="div_admin">
<div id="div-mapa_botoes">
<div id="mapa_admin" class="div-mapa_botoes_filho" style="height: 300px; width: 60%; margin-bottom: 10px;"></div>
<div id="botoes_admin" class="div-mapa_botoes_filho" style="width: 30%; margin-bottom: 10px;">
<?php
global $wpdb;

$query_aprovados = "SELECT * FROM lc_formulario WHERE situacao='Aprovado'";
$query_negados = "SELECT * FROM lc_formulario WHERE situacao='Negado'";
$query_pendentes = "SELECT * FROM lc_formulario WHERE situacao='Pendente'";

$aprovados = $wpdb->get_results($query_aprovados);
$negados = $wpdb->get_results($query_negados);
$pendentes = $wpdb->get_results($query_pendentes);
echo '<button value="aprovados" onclick="filtrar(this)">' . count($aprovados) . ' Aprovados</button>';
echo '<button value="negados" onclick="filtrar(this)">' . count($negados) . ' Negados</button>';
echo '<button value="pendentes" onclick="filtrar(this)">' . count($pendentes) . ' Pendentes</button>';
?>
</div>
</div>
<div id=filtros>
<form method="post">
<div id="busca_nome_container" class="filtro">
<input type="text" id="busca_nome" placeholder="Pesquise pelo nome" oninput="filtrar(this)">
<button>&#128270;</button>
</div>
</form>
<select id="selecao_servico" class="filtro" onchange="filtrar(this)" required>
<option value="" selected disabled>Selecione...</option>
<option value="bar/restaurante">Bares/restaurantes</option>
<option value="entretenimento">Entretenimento</option>
<option value="beleza">Beleza</option>
<option value="hospedagem">Hospedagem</option>
<option value="ensino">Ensino</option>
<option value="academia">Academia</option>
<option value="outro">Outro</option>
<option value="todos">Todos</option>
</select>
</div>

<div class="wrap">
<table class="wp-list-table widefat striped" id="tabela">
<thead>
<tr>
<th class="sort-header">Nome <button class="sort-btn" data-order="asc"><span class="sort-icon">&#9652;</span></button></th>
<th class="sort-header">Email <button class="sort-btn sort-by-email" data-order="asc"><span class="sort-icon">&#9652;</span></button></th>
<th>Latitude</th>
<th>Longitude</th>
<th>Serviço</th>
<th>Descrição</th>
<th class="sort-header">Data e hora <button class="sort-btn sort-by-date" data-order="asc"><span class="sort-icon">&#9652;</span></button></th>
<th>Status</th>
<th>Ações</th>
</tr>
</thead>
<tbody>
<?php
echo '<script src="' . plugin_dir_url(__FILE__) . 'admin_script.js"></script>';
?>
</div>
</div>

<!-- Carregue o jQuery antes de qualquer outro script que o utilize -->
Expand Down
78 changes: 78 additions & 0 deletions lgbtq_connect/includes/admin/style-admin.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,52 @@
#div_admin {
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;
margin: 20px 10px 0px 0px;
padding: 50px;
}

#div-mapa_botoes {
display: flex;
}

.div-mapa_botoes_filho {
flex: 1;
background-color: white;
}

#filtros {
display: flex;
align-items: center;
}

.filtro {
flex: 1;
background-color: white;
}

#busca_nome_container {
display: flex;
border:1px solid grey;
}

#busca_nome {
flex-grow:2;
border: none;
}

#busca_nome:focus {
outline:none;
}

#busca_nome_container:focus-within {
outline: 1px solid blue;
}

button[data-id] {
background-color: transparent;
color: rgba(0, 153, 255, 0.877);
Expand All @@ -18,4 +67,33 @@ button[data-id]:hover {
border-radius:20px;
margin-top:1.5vw;
margin-right:1.5vw;
}

th{
background-color: #f5f5f5;
}

td{
background-color: white;
text-align: center;
}

#tabela th{
background-color: #f5f5f5;
text-align: center;
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;
}
Loading

0 comments on commit 607d20b

Please sign in to comment.