Tiny File Manager

Back Back Up Advanced Editor

<?php
// Conexion db
include("../connection.php");
?>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Control De Ingresos Personal</title>
    <link rel="icon" type="image/png" href="../img/icono.png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.12.1/datatables.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .pagination {
            display: none;
        }
        
        .select2-container--bootstrap-5 .select2-dropdown {
            z-index: 2000;
        }
        
        .table-responsive {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        @media (max-width: 768px) {
            header h1 {
                font-size: 0.9rem !important;
            }
            
            .btn-group-mobile {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .btn-group-mobile .btn {
                width: 100%;
                margin: 0 !important;
            }
            
            #tbl_Personal {
                font-size: 0.85rem;
            }
            
            #tbl_Personal th,
            #tbl_Personal td {
                padding: 0.5rem;
                white-space: nowrap;
            }
            
            #tbl_Personal .btn {
                padding: 0.25rem 0.5rem;
                font-size: 0.75rem;
            }
        }
        
        @media (max-width: 576px) {
            header h1 {
                font-size: 0.75rem !important;
            }
            
            #tbl_Personal thead th:nth-child(1),
            #tbl_Personal tbody td:nth-child(1),
            #tbl_Personal thead th:nth-child(7),
            #tbl_Personal tbody td:nth-child(7) {
                display: none;
            }
        }
    </style>
</head>

<body class="vh-100" style="background: #FFFFFF;">
    
    <header style="background: #FF9800;" class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
        <div class="container-fluid d-flex justify-content-between align-items-center">
            <h1 class="p-3 m-0 text-light fs-4">CONTROL DE ENTRADA Y SALIDA DE PERSONAL <strong>AVICAMPO</strong></h1>
            <a href="../logout.php" class="btn btn-sm text-light" style="background-color:#E65100;">
                <i class="fas fa-sign-out-alt"></i> <span class="d-none d-md-inline">Cerrar Sesión</span>
            </a>
        </div>
    </header>

<div class="row">
            <div class="col-12 col-md-10 offset-md-1">
                <div class="btn-group-mobile d-flex flex-column flex-md-row gap-2 my-3">
                    <button type="button" class="btn btn-lg text-light" data-bs-toggle="modal" style="background-color:#FF9800;" data-bs-target="#addUserModal">
                        <i class="fas fa-user-plus"></i> <span class="d-none d-sm-inline">Agregar Usuario</span>
                    </button>
                    
                    <a href="../Carnet/index.html" class="btn btn-lg text-light" style="background-color:#f57c00;">
                        <i class="fas fa-id-card"></i> Crear Carnet
                    </a>
					<a href="Ccostos/index.php" class="btn btn-lg text-light" style="background-color:#FACB07;">
                        <i class="fa-solid fa-building-user">‌</i></i> Centro Costos
                    </a>
                </div>
            </div>
        </div>

<div class="row">
            <div class="col-12 col-md-10 offset-md-1">
                <div class="table-responsive">
                    <table id="tbl_Personal" class="table table-bordered" style="background: #FF98000A;">
                        <thead style="background: #FF9800;" class="text-light">
                            <tr>
                                <th>Id</th>
                                <th>Cedula</th>
                                <th>Nombre</th>
								<th>Apellido</th>
								<th>Rh</th>
                                <th>Centro Costo</th>
                                <th>Descripcion</th>
                                <th>Cargo</th>
                                <th>Rango</th>
                                <th>Opciones</th>
                            </tr>
                        </thead>
                        <tbody class="table-group-divider">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

</div>

<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header text-light" style="background: #FF9800;">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Creacion Nuevo Usuario</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="saveUserForm" action="javascript:void();" method="post">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="inputCedula" class="form-label">Cedula</label>
                            <input type="text" name="inputCedula" class="form-control" id="inputCedula" value="">
                        </div>
                        <div class="mb-3">
                            <label for="inputNombre" class="form-label">Nombre</label>
                            <input type="text" name="inputNombre" class="form-control" id="inputNombre" value="" style="text-transform:uppercase;">
                        </div>
						<div class="mb-3">
                            <label for="inputApellido" class="form-label">Apellido</label>
                            <input type="text" name="inputApellido" class="form-control" id="inputApellido" value="" style="text-transform:uppercase;">
                        </div>
						<div class="mb-3">
							<label for="inputRh" class="form-label">RH</label>
							<select name="inputRh" class="form-select" id="inputRh">
							  <option disabled selected></option>
							  <option>O -</option>
							  <option>O +</option>
							  <option>A -</option>
							  <option>A +</option>
							  <option>B -</option>
							  <option>B +</option>
							  <option>AB -</option>
							  <option>AB +</option>
							</select>
						</div>
                        <div class="mb-3">
                            <label for="inputCCosto" class="form-label">Centro de Costo</label>
                            <select name="inputCCosto" class="form-control select2-ccosto" id="inputCCosto" style="width: 100%;">
                                <option value="">Buscar Centro de Costo</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="inputDescripcion" class="form-label">Descripcion</label>
                            <select name="inputDescripcion" class="form-control select2-descripcion" id="inputDescripcion" style="width: 100%;" disabled>
                                <option value="">Seleccione Descripción</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="inputCargo" class="form-label">Cargo</label>
                            <select name="inputCargo" class="form-control select2-cargo" id="inputCargo" style="width: 100%;" disabled>
                                <option value="">Seleccione Cargo</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="inputRango" class="form-label">Rango</label>
                            <input type="number" step="0.01" name="inputRango" class="form-control" id="inputRango" value="">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    
    <div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header text-light" style="background: #FF9800;">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Actualizar Usuario</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="updateUserForm" action="javascript:void();" method="post">
                    <div class="modal-body">
                        <input type="hidden" name="id" id="id" value="">
                        <input type="hidden" name="trid" id="trid" value="">
                        <div class="mb-3">
                            <label for="_inputCedula" class="form-label">Cedula</label>
                            <input type="text" name="_inputCedula" class="form-control" id="_inputCedula" value="">
                        </div>
                        <div class="mb-3">
                            <label for="_inputNombre" class="form-label">Nombre</label>
                            <input type="text" name="_inputNombre" class="form-control" id="_inputNombre" value="" style="text-transform:uppercase;">
                        </div>
						<div class="mb-3">
                            <label for="_inputApellido" class="form-label">Apellido</label>
                            <input type="text" name="_inputApellido" class="form-control" id="_inputApellido" value="" style="text-transform:uppercase;">
                        </div>
						<div class="mb-3">
                            <label for="_inputRh" class="form-label">RH</label>
                            <input type="text" name="_inputRh" class="form-control" id="_inputRh" value="" style="text-transform:uppercase;">
                        </div>
                        <div class="mb-3">
                            <label for="_inputCCosto" class="form-label">Centro de Costo</label>
                            <input type="text" name="_inputCCosto" class="form-control" id="_inputCCosto" value="" style="text-transform:uppercase;">
                        </div>
                        <div class="mb-3">
                            <label for="_inputDescripcion" class="form-label">Descripcion</label>
                            <input type="text" name="_inputDescripcion" class="form-control" id="_inputDescripcion" value="" style="text-transform:uppercase;">
                        </div>
                        <div class="mb-3">
                            <label for="_inputCargo" class="form-label">Cargo</label>
                            <input type="text" name="_inputCargo" class="form-control" id="_inputCargo" value="" style="text-transform:uppercase;">
                        </div>
                        <div class="mb-3">
                            <label for="_inputRango" class="form-label">Rango</label>
                            <input type="number" step="0.01" name="_inputRango" class="form-control" id="_inputRango" value="">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                        <button type="submit" class="btn btn-primary">Guardar Cambios</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.12.1/datatables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

// Guardar Nuevo Usuario
            $(document).on('submit', '#saveUserForm', function(event) {
                event.preventDefault();
                var cedula = $('#inputCedula').val();
                var nombre = $('#inputNombre').val();
				var apellido = $('#inputApellido').val();
				var rh = $('#inputRh').val();
                var ccosto = $('#inputCCosto').val();
                var descripcion = $('#inputDescripcion').val();
                var cargo = $('#inputCargo').val();
                var rango = $('#inputRango').val();
                
                if (cedula && nombre && apellido && rh && ccosto && descripcion && cargo && rango) {
                    $.ajax({
                        url: "add_user.php",
                        data: {
                            cedula: cedula,
                            nombre: nombre,
							apellido: apellido,
							rh: rh,
                            ccosto: ccosto,
                            descripcion: descripcion,
                            cargo: cargo,
                            rango: rango
                        },
                        type: 'post',
                        success: function(data) {
                            var json = JSON.parse(data);
                            if (json.status == 'success') {
                                var table = $('#tbl_Personal').DataTable();
                                table.draw();
                                Swal.fire('Éxito!', 'Usuario agregado correctamente', 'success');
                                
                                $("#saveUserForm")[0].reset();
                                $('#inputCCosto').val(null).trigger('change');
                                $('#inputDescripcion').val(null).trigger('change').prop('disabled', true);
                                $('#inputCargo').val(null).trigger('change').prop('disabled', true);
                                $("#addUserModal").modal("hide");
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error('Error:', error);
                            Swal.fire('Error', 'No se pudo guardar el usuario', 'error');
                        }
                    });
                } else {
                    Swal.fire('Advertencia', 'Por favor complete todos los campos requeridos', 'warning');
                }
            });

// Cargar datos para Edición
            $(document).on('click', '.editBtn', function(event) {
                var id = $(this).data('id');
                var trid = $(this).closest('tr').attr('id');
                $.ajax({
                    url: "get_single_user.php",
                    data: {
                        id: id
                    },
                    type: "post",
                    success: function(data) {
                        var json = JSON.parse(data);
                        $('#id').val(json.id);
                        $('#trid').val(trid);
                        $('#_inputCedula').val(json.cedula);
                        $('#_inputNombre').val(json.nombre);
						$('#_inputApellido').val(json.apellido);
						$('#_inputRh').val(json.rh);
                        $('#_inputCCosto').val(json.ccosto);
                        $('#_inputDescripcion').val(json.descripcion);
                        $('#_inputCargo').val(json.cargo);
                        $('#_inputRango').val(json.rango);
                        $('#editUserModal').modal('show');
                    }
                });
            });

// Actualizar Usuario
            $(document).on('submit', '#updateUserForm', function(event) {
                event.preventDefault();
                var id = $('#id').val();
                var trid = $('#trid').val();
                var cedula = $('#_inputCedula').val();
                var nombre = $('#_inputNombre').val();
				var apellido = $('#_inputApellido').val();
				var rh = $('#_inputRh').val();
                var ccosto = $('#_inputCCosto').val();
                var descripcion = $('#_inputDescripcion').val();
                var cargo = $('#_inputCargo').val();
                var rango = $('#_inputRango').val();
                
                $.ajax({
                    url: "update_user.php",
                    data: {
                        id: id,
                        cedula: cedula,
                        nombre: nombre,
						apellido: apellido,
						rh: rh,
                        ccosto: ccosto,
                        descripcion: descripcion,
                        cargo: cargo,
                        rango: rango
                    },
                    type: 'post',
                    success: function(data) {
                        var json = JSON.parse(data);
                        if (json.status == 'success') {
                            var table = $('#tbl_Personal').DataTable();
                            var button = '<a href="javascript:void(0);" class="btn btn-sm btn-info p-2 m-1 editBtn" data-id="' + id + '">Editar</a> <a href="javascript:void(0);" class="btn btn-sm btn-danger p-2 m-1 btnDelete" data-id="' + id + '">Eliminar</a>';
                            
                            table.row("[id='" + trid + "']").data([id, cedula, nombre, apellido, rh, ccosto, descripcion, cargo, rango, button]);
                            
                            Swal.fire('Éxito!', 'Usuario actualizado correctamente', 'success');
                            $('#editUserModal').modal('hide');
                        } else {
                            Swal.fire('Error', 'Error al actualizar', 'error');
                        }
                    }
                });
            });

// Eliminar Usuario
            $(document).on('click', '.btnDelete', function(event) {
                var id = $(this).data('id');
                Swal.fire({
                    title: '¿Estás Seguro?',
                    text: "Esta acción no se puede deshacer",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sí, Eliminar!',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "delete_user.php",
                            data: {
                                id: id
                            },
                            type: "post",
                            success: function(data) {
                                var json = JSON.parse(data);
                                if (json.status == 'success') {
                                    $('#' + id).closest('tr').remove();
                                    Swal.fire('Eliminado!', 'Usuario eliminado con éxito', 'success');
                                } else {
                                    Swal.fire('Error', 'Error al eliminar', 'error');
                                }
                            }
                        });
                    }
                });
            });

// Select2 Configuración
            $('#inputDescripcion').select2({
                dropdownParent: $('#addUserModal'),
                placeholder: "Seleccione Descripción",
                allowClear: true,
            }).prop('disabled', true);
            
            $('#inputCargo').select2({
                dropdownParent: $('#addUserModal'),
                placeholder: "Seleccione Cargo",
                allowClear: true,
            }).prop('disabled', true);

$('#inputCCosto').select2({
                dropdownParent: $('#addUserModal'),
                placeholder: "Buscar Centro de Costo",
                allowClear: true,
                ajax: {
                    url: 'fetch_ccosto.php',
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term
                        };
                    },
                    processResults: function(data) {
                        return data;
                    },
                    cache: true
                }
            });

$('#inputCCosto').on('change', function() {
                var ccosto = $(this).val();
                $('#inputDescripcion').val(null).trigger('change').prop('disabled', true);
                $('#inputCargo').val(null).trigger('change').prop('disabled', true);

if (ccosto) {
                    $('#inputDescripcion').prop('disabled', false).select2({
                        dropdownParent: $('#addUserModal'),
                        placeholder: "Buscar Descripción",
                        allowClear: true,
                        ajax: {
                            url: 'fetch_dependents.php',
                            dataType: 'json',
                            delay: 250,
                            data: function(params) {
                                return {
                                    ccosto: ccosto,
                                    q: params.term,
                                    field: 'descripcion'
                                };
                            },
                            processResults: function(data) {
                                return data;
                            },
                            cache: true
                        }
                    });
                }
            });

$('#inputDescripcion').on('change', function() {
                var ccosto = $('#inputCCosto').val();
                var descripcion = $(this).val();
                $('#inputCargo').val(null).trigger('change').prop('disabled', true);

if (ccosto && descripcion) {
                    $('#inputCargo').prop('disabled', false).select2({
                        dropdownParent: $('#addUserModal'),
                        placeholder: "Buscar Cargo",
                        allowClear: true,
                        ajax: {
                            url: 'fetch_dependents.php',
                            dataType: 'json',
                            delay: 250,
                            data: function(params) {
                                return {
                                    ccosto: ccosto,
                                    descripcion: descripcion,
                                    q: params.term,
                                    field: 'cargo'
                                };
                            },
                            processResults: function(data) {
                                return data;
                            },
                            cache: true
                        }
                    });
                }
            });
            
            $('#addUserModal').on('hidden.bs.modal', function () {
                $('#inputCCosto').val(null).trigger('change');
                $('#inputDescripcion').val(null).trigger('change').prop('disabled', true);
                $('#inputCargo').val(null).trigger('change').prop('disabled', true);
                $("#saveUserForm")[0].reset();
            });
        });
    </script>
</body>
</html>