443 lines
14 KiB
HTML
443 lines
14 KiB
HTML
{% extends 'h_tmp_usr/z_tmp.html' %}
|
|
|
|
{% block css %}
|
|
<!-- {# datatables #} -->
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/2.2.2/css/dataTables.bootstrap5.css">
|
|
|
|
<!-- {# i jconfirm #} -->
|
|
<link rel="stylesheet" href="https://htmlguyllc.github.io/jConfirm/jConfirm.min.css">
|
|
<!-- {# f jconfirm #} -->
|
|
|
|
|
|
<!-- <link rel="stylesheet" href="{{ url_for('static', filename='f_contact/form.css') }}"> -->
|
|
|
|
|
|
|
|
|
|
{% endblock css %}
|
|
|
|
{% block body %}
|
|
|
|
|
|
<style>
|
|
/* Smartphones (hasta 767px) */
|
|
@media (max-width: 767px) {
|
|
/* main{ background-color: black; } */
|
|
main { min-height: 80dvh; }
|
|
}
|
|
|
|
/* Tablets (768px - 1023px) */
|
|
@media (min-width: 768px) and (max-width: 1023px) {
|
|
/* main{ background-color: pink; } */
|
|
main { min-height: 80dvh; }
|
|
}
|
|
|
|
/* Laptops (1024px - 1439px) monitores resulición baja */
|
|
@media (min-width: 1024px) and (max-width: 1439px) {
|
|
/* main{ background-color: purple; } */
|
|
main { min-height: 80dvh; }
|
|
}
|
|
|
|
/* PCs de escritorio (1440px - 1919px) macbook */
|
|
@media (min-width: 1440px) and (max-width: 1919px) {
|
|
/* main{ background-color: greenyellow; } */
|
|
main { min-height: 80dvh; }
|
|
}
|
|
|
|
/* Pantallas Ultrawide (1920px en adelante) */
|
|
@media (min-width: 1920px) {
|
|
/* main{ background-color: red; } */
|
|
main { min-height: 80dvh; }
|
|
}
|
|
|
|
#dt-length-0 {
|
|
width: 6em;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
<style>
|
|
/* Estilos generales de la tabla (Bootstrap ya maneja gran parte de esto) */
|
|
#tblUsers {
|
|
/* Asegúrate de que no haya un min-width fijo que rompa la responsividad */
|
|
width: 100% !important; /* !important para asegurar que sobreescribe estilos de DataTables/Bootstrap si es necesario */
|
|
}
|
|
|
|
/* Ocultar las cabeceras de la tabla en pantallas pequeñas */
|
|
@media screen and (max-width: 768px) {
|
|
#tblUsers thead {
|
|
display: none; /* Oculta las cabeceras en móviles */
|
|
}
|
|
|
|
#tblUsers,
|
|
#tblUsers tbody,
|
|
#tblUsers tr,
|
|
#tblUsers td {
|
|
display: block; /* Hace que todos los elementos de la tabla se comporten como bloques */
|
|
width: 100%; /* Ocupan todo el ancho disponible */
|
|
}
|
|
|
|
#tblUsers tr {
|
|
margin-bottom: 1rem; /* Espacio entre las "tarjetas" (filas) */
|
|
border: 1px solid #dee2e6; /* Borde para simular la tarjeta */
|
|
border-radius: 0.5rem; /* Bordes redondeados */
|
|
background-color: #fff;
|
|
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Sombra suave */
|
|
padding: 1rem; /* Espacio interno de la tarjeta */
|
|
box-sizing: border-box; /* Incluir padding y borde en el ancho total */
|
|
}
|
|
|
|
#tblUsers td {
|
|
border: none; /* Elimina los bordes de las celdas individuales */
|
|
position: relative; /* Necesario para posicionar el data-label */
|
|
padding-left: 50% !important; /* Espacio para el data-label */
|
|
text-align: left !important; /* Asegura que el texto se alinee a la izquierda */
|
|
white-space: normal; /* Permite que el texto se ajuste y no esté en una sola línea */
|
|
}
|
|
|
|
#tblUsers td::before {
|
|
/* Muestra el contenido del data-label como pseudo-elemento */
|
|
content: attr(data-label);
|
|
position: absolute;
|
|
left: 0.5rem; /* Posición del label */
|
|
width: 45%; /* Ancho del label */
|
|
padding-right: 1rem;
|
|
white-space: nowrap; /* Evita que el label se rompa */
|
|
font-weight: bold;
|
|
text-align: right; /* Alinea el label a la derecha dentro de su espacio */
|
|
color: #495057; /* Color para el label */
|
|
}
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<div>
|
|
<!-- Botón para abrir el modal -->
|
|
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalFormAddUsr">
|
|
<i class="bi bi-person-fill-add"></i> Añadir Usuario
|
|
</button>
|
|
|
|
|
|
<table id="tblUsers" class="table table-striped" style="width:100%" data-aos="fade-up" data-aos-delay="0"
|
|
data-aos-duration="800">
|
|
<thead>
|
|
<tr>
|
|
<th>Nombre</th>
|
|
<th>Apellidos</th>
|
|
<th>Email</th>
|
|
<th>Última Conexión</th>
|
|
<th>Admin</th>
|
|
<th>Posts</th>
|
|
<th>Notificaciones Email</th>
|
|
<th>Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for ele in data_all_users %}
|
|
<tr data-id="{{ele[0]}}">
|
|
<td data-label="Nombre">{{ ele[1] }}</td>
|
|
<td data-label="Apellidos">{{ ele[2] }}</td>
|
|
<td data-label="Email">{{ ele[3] }}</td>
|
|
<td data-label="Últ. Conexión">{{ ele[4] }}</td>
|
|
<td data-label="Admin">{{ ele[5] }}</td>
|
|
<td data-label="Posts">{{ ele[6] }}</td>
|
|
<td data-label="Notif. Email">{{ ele[7] }}</td>
|
|
<td data-label="Acciones"> {# Mantén data-label para Acciones también #}
|
|
<a href="" class="btn btn-primary" data-bs-toggle="modal" data-id="{{ele[0]}}"
|
|
data-bs-target="#modalFormAddUsr">
|
|
<i class="bi bi-pencil-square"></i>
|
|
</a>
|
|
|
|
{% if id_usr != ele[0] %}
|
|
<a href="" class="btn btn-danger delete-btn" data-id="{{ele[0]}}">
|
|
<i class="bi bi-trash"></i>
|
|
</a>
|
|
{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Modal Bootstrap 5 -->
|
|
<div class="modal fade" id="modalFormAddUsr" tabindex="-1" aria-labelledby="modalFormAddUsrLabel" aria-hidden="true" >
|
|
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="modalFormAddUsrLabel"></h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<!-- {# i form add user #} -->
|
|
<form method="POST" action="{{ url_for('manage_profiles') }}" class="form-container">
|
|
{{ form.hidden_tag() }}
|
|
{{ form.id }}
|
|
|
|
<!-- {# nombre #} -->
|
|
<div class="form-row">
|
|
{{ form.nombre.label() }}
|
|
{{ form.nombre(class="form-control", placeholder="Nombre del usuario", type="text", id="fe_nombre") }}
|
|
</div>
|
|
|
|
<!-- {# apellido #} -->
|
|
<div class="form-row">
|
|
{{ form.apellido.label() }}
|
|
{{ form.apellido(class="form-control", placeholder="Apellidos del usuario", type="text", id="fe_apellido") }}
|
|
</div>
|
|
|
|
<!-- {# género #} -->
|
|
<div class="form-row">
|
|
{{ form.genero.label(class_="form-label") }}
|
|
{{ form.genero(class_="form-select", maxlength="35", id="fe_genero") }}
|
|
</div>
|
|
|
|
<!-- {# email #} -->
|
|
<div class="form-row">
|
|
{{ form.email.label(class_="form-label") }}
|
|
{{ form.email(placeholder="ejemplo@email.com", class_="form-control", maxlength="35", type="email", id="fe_email") }}
|
|
</div>
|
|
|
|
<!-- {# isAdmin #} -->
|
|
<div class="form-row">
|
|
{{ form.isAdmin.label(class_="form-label") }}
|
|
{{ form.isAdmin(class_="form-select", maxlength="35", id="fe_isadmin") }}
|
|
</div>
|
|
|
|
<!-- {# recibe notificaciones de nuevos contactos #} -->
|
|
<div>
|
|
{{ form.isContactNoti.label(class_='form-label') }}
|
|
{{ form.isContactNoti(class_="form-select", maxlength="35", id="isContactNoti") }}
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary" id="btnSubmit"></button>
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
|
|
</form>
|
|
<!-- {# f form add user #} -->
|
|
</div>
|
|
<!-- <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> </div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% endblock body %}
|
|
|
|
{% block js %}
|
|
|
|
<!-- {# aos script #} -->
|
|
{% include 'z_comps/aos_script.html' %}
|
|
|
|
|
|
<script>
|
|
let btnAddUsr = document.querySelector('button[data-bs-target="#modalFormAddUsr"]');
|
|
btnAddUsr.addEventListener('click', function() {
|
|
console.log("click en el botón de añadir usuario");
|
|
let fe_nombre = document.getElementById('fe_nombre');
|
|
let fe_apellido = document.getElementById('fe_apellido');
|
|
let fe_genero = document.getElementById('fe_genero');
|
|
let fe_email = document.getElementById('fe_email');
|
|
let fe_isadmin = document.getElementById('fe_isadmin');
|
|
let fe_isContactNoti = document.getElementById("isContactNoti");
|
|
let form_id = document.querySelector('input[name="id"]');
|
|
let titleForm = document.getElementById("modalFormAddUsrLabel");
|
|
let btnSubmit = document.getElementById("btnSubmit");
|
|
btnSubmit.innerText = "Añadir Usuario";
|
|
titleForm.innerText = "Formulario: Añadir Usuario";
|
|
fe_nombre.value = '';
|
|
fe_apellido.value = '';
|
|
fe_genero.value = '';
|
|
fe_email.value = '';
|
|
fe_isadmin.value = '';
|
|
form_id.value = '';
|
|
fe_isContactNoti.value = '';
|
|
});
|
|
|
|
</script>
|
|
|
|
<script>
|
|
|
|
async function get_user_data(btn) {
|
|
|
|
try {
|
|
let id = btn.dataset.id;
|
|
|
|
let response = await fetch('/user/manage-profiles/get-user', {
|
|
method: 'POST', // Cambiado a POST
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ id }),
|
|
credentials: 'include'
|
|
});
|
|
|
|
let { data } = await response.json();
|
|
let form_id = document.querySelector('input[name="id"]');
|
|
let fe_nombre = document.getElementById('fe_nombre');
|
|
let fe_apellido = document.getElementById('fe_apellido');
|
|
let fe_genero = document.getElementById('fe_genero');
|
|
let fe_email = document.getElementById('fe_email');
|
|
let fe_isadmin = document.getElementById('fe_isadmin');
|
|
let fe_isContactNoti = document.getElementById("isContactNoti");
|
|
let btn_submit = document.querySelector('#formEditUser button[type="submit"]');
|
|
let titleForm = document.getElementById("modalFormAddUsrLabel");
|
|
let btnSubmit = document.getElementById("btnSubmit");
|
|
|
|
titleForm.innerText = "Formulario: Editar Usuario";
|
|
btnSubmit.innerText = "Actualizar Usuario";
|
|
// btn_submit.dataset.id = data[0]; // Asignar el ID al botón de envío
|
|
fe_nombre.value = data[1];
|
|
fe_apellido.value = data[2];
|
|
fe_genero.value = data[3];
|
|
fe_email.value = data[4];
|
|
fe_isadmin.value = data[5];
|
|
fe_isContactNoti.value = data[6];
|
|
form_id.value = data[0]; // Asignamos el ID recibido
|
|
|
|
console.log(data)
|
|
|
|
|
|
|
|
} catch (error) {
|
|
console.error('Error al obtener datos:', error);
|
|
}
|
|
}
|
|
|
|
|
|
document.getElementById('tblUsers').addEventListener('click', (event) => {
|
|
const button = event.target.closest('a.btn-primary[data-id]');
|
|
if (button) {
|
|
get_user_data(button);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
|
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> -->
|
|
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.js"></script>
|
|
<script src="https://cdn.datatables.net/2.2.2/js/dataTables.bootstrap5.js"></script>
|
|
|
|
<!-- jQuery y jConfirm -->
|
|
<!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
|
|
<script src="https://htmlguyllc.github.io/jConfirm/jConfirm.min.js"></script>
|
|
|
|
|
|
<script>
|
|
function delete_user(e){
|
|
let btn = $(this); // `this` es el botón que lanzó el jConfirm
|
|
let postId = btn.data('id'); // lee el data-id
|
|
let data = { 'id': postId };
|
|
|
|
fetch('/user/manage-profiles/delete-usr', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data),
|
|
credentials: 'include'
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error('Error en la respuesta del servidor');
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
if (data.ok) {
|
|
// Aquí puedes agregar código para eliminar el post del DOM
|
|
// console.log("eliminado");
|
|
btn.closest('tr').remove();
|
|
} else {
|
|
// Manejar el error
|
|
|
|
console.error('Error al eliminar el post:', data.error);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error en la solicitud:', error);
|
|
});
|
|
|
|
}
|
|
|
|
// https://htmlguyllc.github.io/jConfirm/
|
|
$(function(){
|
|
$('.delete-btn').jConfirm({
|
|
//false|array: if provided, this will override the default confirm/deny buttons (see below for an example)
|
|
btns: false,
|
|
//string: question displayed to the user
|
|
question: '¿Deseas continuar con la eliminación?',
|
|
//string: confirm button text
|
|
confirm_text: 'Sí',
|
|
//string: deny button text
|
|
deny_text: 'No',
|
|
//boolean: if true, when the confirm button is clicked the user will be redirected to the button's href location
|
|
// follow_href: true,
|
|
//boolean: if true and follow_href is true, the href will be opened in a new window
|
|
open_new_tab: false,
|
|
//boolean: if true, the tooltip will be hidden if you click outside of it
|
|
hide_on_click: true,
|
|
//string ('auto','top','bottom','left','right'): preferred location of the tooltip (defaults to auto if no space)
|
|
position: 'auto',
|
|
//boolean: if true, the deny button will be shown
|
|
show_deny_btn: true,
|
|
//string ('black', 'white', 'bootstrap-4', 'bootstrap-4-white')
|
|
theme: 'bootstrap-4',
|
|
//string ('tiny', 'small', 'medium', 'large')
|
|
size: 'medium',
|
|
//boolean: show the tooltip immediately on instantiation
|
|
show_now: false,
|
|
//string: class(es) to add to the tooltip
|
|
'class': ''
|
|
}).on('confirm', delete_user)
|
|
.on('deny', function(e){
|
|
var btn = $(this);
|
|
//do something on deny
|
|
}).on('jc-show', function(e, tooltip){
|
|
// console.log("el tooltip es visible");
|
|
//do something when tooltip is shown
|
|
//tooltip dom element is passed as the second parameter
|
|
}).on('jc-hide', function(e){
|
|
//do something when tooltip is hidden
|
|
});
|
|
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function() {
|
|
$('#tblUsers').DataTable({
|
|
// Puedes añadir tus opciones de DataTables aquí
|
|
"language": {
|
|
url: "https://cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json" // Idioma español
|
|
},
|
|
});
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<!-- {# if flash #} -->
|
|
{% include 'z_comps/if_flash.html' %}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{% endblock js %} |