Skip to content

Commit

Permalink
Merge pull request ResidenciaTICBrisa#184 from ResidenciaTICBrisa/das…
Browse files Browse the repository at this point in the history 
…hboard

Dashboard
  • Loading branch information
@MarcosViniciusG
MarcosViniciusG authored Jul 4, 2024
2 parents 8ed27f7 + 56d5f22 commit da5d191
Show file tree
Hide file tree
Showing 4 changed files with 177 additions and 55 deletions.
Empty file added docs/.nojekyll
View file
Empty file.
56 changes: 29 additions & 27 deletions lgbtq_connect/includes/admin/admin_script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,16 +91,17 @@ class Tabela {
gerarLinhas() {
const STATUS_BOTOES = {
"Aprovado": `
<button type="button" onclick="confirmarAcao('Tem certeza que quer negar a sugestão?', this.form, 'reprove')">Negar</button>
<button type="button" class="btn btn-danger" onclick="confirmarAcao('Tem certeza que quer negar a sugestão?', this.form, 'reprove')">Negar</button>
`,
"Negado": `
<button type="button" onclick="confirmarAcao('Tem certeza que quer aprovar a sugestão?', this.form, 'approve')">Aprovar</button>
<button type="button" class="btn btn-success" onclick="confirmarAcao('Tem certeza que quer aprovar a sugestão?', this.form, 'approve')">Aprovar</button>
`,
"Pendente": `
<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>
<button type="button" class="btn btn-success" onclick="confirmarAcao('Tem certeza que quer aprovar a sugestão?', this.form, 'approve')">Aprovar</button>
<button type="button" class="btn btn-danger" onclick="confirmarAcao('Tem certeza que quer negar a sugestão?', this.form, 'reprove')">Negar</button>
`
}
};

const tbody = this.tabela.querySelector('tbody');

this.arr.forEach(dados => {
Expand Down Expand Up @@ -131,14 +132,24 @@ class Tabela {
<td id="formulario-${dados.id}-data_hora">${dataFormatada}</td>
<td id="formulario-${dados.id}-situacao">${dados.situacao}</td>
<td id="formulario-${dados.id}-acoes">
<form method="post" action="">
<input type="hidden" name="id" value="${dados.id}">
<input type="hidden" name="action" value="">
${acoes}
<button type="button" onclick='abrirModalEdicao(${JSON.stringify(dados)})'>Editar</button>
<button type="button" onclick="confirmarAcao('Tem certeza que quer excluir a sugestão?', this.form, 'exclude')">Excluir</button>
</td>
`;
<div class="btn-group dropend">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
Ações
</button>
<ul class="dropdown-menu">
<li>
<form method="post" action="" class="d-flex flex-wrap justify-content-between my-1">
<input type="hidden" name="id" value="${dados.id}">
<input type="hidden" name="action" value="">
<button type="button" class="btn btn-primary mb-1" onclick='abrirModalEdicao(${JSON.stringify(dados)})'>Editar</button>
${acoes}
<button type="button" class="btn btn-danger mt-1" onclick="confirmarAcao('Tem certeza que quer excluir a sugestão?', this.form, 'exclude')">Excluir</button>
</form>
</li>
</ul>
</div>
</td>
`;
tbody.appendChild(linha);
});
}
Expand Down Expand Up @@ -168,6 +179,7 @@ function mostrarDescricaoCompleta(id) {
var descricaoResumida = document.getElementById('descricaoResumida_' + id);
var descricaoCompleta = document.getElementById('descricaoCompleta_' + id);
var botao = document.querySelector('button[data-id="' + id + '"]');

if (descricaoResumida.style.display === 'none') {
descricaoResumida.style.display = 'inline';
descricaoCompleta.style.display = 'none';
Expand All @@ -179,8 +191,6 @@ function mostrarDescricaoCompleta(id) {
}
}



function initMapAdmin() {
// Definindo o ícone personalizado no escopo global
const personalIcon = L.icon({
Expand Down Expand Up @@ -270,18 +280,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";
}
Expand Down Expand Up @@ -433,14 +443,6 @@ function imprimirResultados(resultados) {
verMenosButton.style.display = 'none';
}
}

function changeMapView(lat, lng) {
if (mapEdit) {
mapEdit.setView([lat, lng], 13);
} else {
console.error("Mapa de edição não ativo");
}
}
}

function filtrar(elemento) {
Expand Down Expand Up @@ -526,4 +528,4 @@ module.exports = {
Filtro,
Ordenador,
Tabela
};
};
86 changes: 61 additions & 25 deletions lgbtq_connect/includes/admin/pagina_administracao.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ function mostrar_dados() {
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
</head>
<body>
<div id="div_admin">
Expand Down Expand Up @@ -103,20 +105,36 @@ function mostrar_dados() {
$aprovados = $wpdb->get_results($query_aprovados);
$negados = $wpdb->get_results($query_negados);
$pendentes = $wpdb->get_results($query_pendentes);
echo '<button value="Aprovado" onclick="filtrar(this)">' . count($aprovados) . ' Aprovados</button>';
echo '<button value="Negado" onclick="filtrar(this)">' . count($negados) . ' Negados</button>';
echo '<button value="Pendente" onclick="filtrar(this)">' . count($pendentes) . ' Pendentes</button>';
echo '<div class="button-container">';
echo '<button value="Pendente" class="btn-pendente" onclick="filtrar(this)">'
. count($pendentes) .
' novas solicitações
<i class="bi bi-arrow-right-circle"></i>
</button>';
echo '<button value="Negado" class="btn-negado" onclick="filtrar(this)">'
. count($negados) .
' solicitações negadas
<i class="bi bi-arrow-right-circle"></i>
</button>';
echo '<button value="Aprovado" class=" btn-aprovado" onclick="filtrar(this)">'
. count($aprovados) .
' solicitações aprovadas
<i class="bi bi-arrow-right-circle"></i>
</button>';
echo '</div>';
?>
</div>
</div>
<div id="contador_resultados"></div>
<div id=filtros>
<div id="contador_resultados">
</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()">
</div>
</form>
<select id="selecao_servico" class="filtro" onchange="filtrar()" required>
<select id="selecao_servico" class="filtro " onchange="filtrar()" required>
<option value="" selected disabled>Selecione...</option>
<option value="bar/restaurante">Bares/restaurantes</option>
<option value="entretenimento">Entretenimento</option>
Expand All @@ -128,29 +146,46 @@ function mostrar_dados() {
</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 id="confirmModal" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">ATENÇÃO!</h5>
</div>
<div class="modal-body">
<p id="confirmMessage"></p>
</div>
<div class="modal-footer">
<button id="cancelBtn" type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button id="confirmBtn" type="button" class="btn btn-primary">Confirmar</button>
</div>
</div>
</div>
</div>
<table class="wp-list-table widefat striped" id="tabela">
<thead>
<tr>
<th class="sort-header">Nome <button class="sort-btn" data-order="asc" onclick="ordenar(this)"><span class="sort-icon">&#9652;</span></button></th>
<th class="sort-header">Email <button class="sort-btn sort-by-email" data-order="asc" onclick="ordenar(this)"><span class="sort-icon">&#9652;</span></button></th>
<th>Cidade</th>
<th>Rua</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" onclick="ordenar(this)"><span class="sort-icon">&#9652;</span></button></th>
<th>Status</th>
<th>Ações</th>
</tr>

</div>

<div class="container mt-5">
<table class="table table-hover" id="tabela">
<thead class="thead-light">
<tr>
<th class="sort-header" scope="col">Nome <button class="sort-btn" data-order="asc" onclick="ordenar(this)"><span class="sort-icon">&#9652;</span></button></th>
<th class="sort-header" scope="col">Email <button class="sort-btn sort-by-email" data-order="asc" onclick="ordenar(this)"><span class="sort-icon">&#9652;</span></button></th>
<th scope="col">Cidade</th>
<th scope="col">Rua</th>
<th scope="col">Serviço</th>
<th scope="col">Descrição</th>
<th class="sort-header" scope="col">Data e hora <button class="sort-btn sort-by-date" data-order="asc" onclick="ordenar(this)"><span class="sort-icon">&#9652;</span></button></th>
<th scope="col">Status</th>
<th scope="col">Ações</th>
</tr>
</thead>
<tbody>
<!-- Adicione aqui as linhas da tabela -->
</tbody>
</table>
</div>


</div>
</div>

Expand All @@ -159,6 +194,7 @@ function mostrar_dados() {
<!-- Carregue o Leaflet antes de qualquer script que o utilize -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

</body>
</html>
Expand Down
90 changes: 87 additions & 3 deletions lgbtq_connect/includes/admin/style-admin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
position: relative;
margin: 20px 10px 0px 0px;
padding: 50px;
align-items: center;
}

#div-mapa_botoes {
Expand All @@ -21,24 +22,36 @@

#filtros {
display: flex;
align-items: center;
gap: 20px;
justify-content: center;

}

.filtro {
flex: 1;
background-color: white;
display: flex;
align-items: center;
}

#busca_nome_container {
display: flex;
border: 1px solid grey;
border-radius: 10px;
width: 351.51px;
height: 40px;
}

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

}
#selecao_servico{
border-radius: 10px;
width: 351.51px;
height: 40px;
}
#busca_nome:focus {
outline: none;
}
Expand Down Expand Up @@ -74,6 +87,12 @@ button[data-id]:hover {
margin-right: 1.5vw;
position: relative; /* Adicionado para garantir que o z-index funcione */
z-index: 1; /* Baixo z-index para o mapa */
width: 791px;
height: 279px;
gap: 0px;
border-radius: 20px;
opacity: 0px;

}

#tabela th {
Expand Down Expand Up @@ -316,6 +335,70 @@ table th:last-child {
cursor: pointer;
}

#tabela {
border: 1px solid #dee2e6; /* Borda da tabela */
border-collapse: collapse; /* Colapsa as bordas */
}

#tabela th,
#tabela td {
border: 1px solid #dee2e6; /* Borda das células */
padding: 8px; /* Espaçamento interno das células */
}

.sort-header {
cursor: pointer;
}

.sort-header .sort-btn {
border: none;
background: none;
padding: 0;
margin-left: 5px;
}

.sort-header .sort-icon {
font-size: 0.75rem;
}

.table-hover tbody tr:hover {
background-color: #f1f1f1;
}
.button-container{
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 50px;
}
.btn-aprovado, .btn-negado, .btn-pendente{
border-radius: 20px;
width: 371px;
height: 70px;
color: white;
text-align:center;
border: none;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 28px;

}
.btn-pendente{
background: rgb(238,202,16);
background: linear-gradient(149deg, rgba(238,202,16,1) 14%, rgba(235,115,10,1) 65%, rgba(221,73,28,1) 99%);

}
.btn-negado{
background: rgb(238,16,24);
background: linear-gradient(149deg, rgba(238,16,24,1) 14%, rgba(153,10,235,1) 65%, rgba(221,28,145,1) 99%);
}
.btn-aprovado{
background: rgb(64,126,0);
background: linear-gradient(149deg, rgba(64,126,0,0.9752275910364145) 17%, rgba(60,235,10,0.865983893557423) 65%, rgba(3,153,15,1) 99%);
}


#editDivBotoes {
width: 100%;
display: flex;
Expand All @@ -324,4 +407,5 @@ table th:last-child {

#editLabelNome, #editLabelEmail, #editLabelServico, #editLabelDescricao {
font-size: 18px;
}
}

0 comments on commit da5d191

Please sign in to comment.