Tiny File Manager

Back Back Up Advanced Editor

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="author" content="Oficina de Tecnologías de la Información y Comunicaciones, Sanmarino" />
  <title>Creación de Carnét Corporativo</title>
  <link rel="icon" type="image/png" href="../img/icono.png">
  <link rel="stylesheet" type="text/css" href="css/carnet.css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
  <style>
    .loading-spinner {
      display: none;
      width: 20px;
      height: 20px;
      border: 2px solid #f3f3f3;
      border-top: 2px solid #3498db;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin-left: 10px;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .alert-custom {
      padding: 10px;
      margin-top: 10px;
      border-radius: 5px;
      display: none;
    }
  </style>
</head>

<body>
  <nav class="navbar">
    <div class="container-fluid">
      <div class="navbar-header">
        <a href="../Personal/index.php" class="btn btn-sm text-light" style="background-color:#999999;">
           <i class="fas fa-sign-out-alt"></i> 🔙 Regresar
        </a>
        <a href="../logout.php" class="btn btn-sm text-light" style="background-color:#E65100;">
           <i class="fas fa-sign-out-alt"></i> Cerrar Sesión
        </a>
      </div>
    </div>
  </nav>

<div class="container my-5">
    <div class="row align-items-start"> 
      
      <div class="col-md-4 border p-4 shadow rounded-4" style="background-color: white;"> 
        <form>
          <div class="mb-3">
            <label for="titulo" class="form-label" style="text-align: center; display: block; font-weight: bold;">Datos Del Personal</label>
            <hr>	
            <label for="cedula" class="form-label">Cédula</label>
            <div class="d-flex align-items-center">
              <input type="number" class="form-control" id="cedula" oninput="buscarEmpleado();" />
              <div class="loading-spinner" id="loadingSpinner"></div>
            </div>
          </div>

<div class="mb-3">
            <label for="nombre" class="form-label">Nombres</label>
            <input type="text" class="form-control" id="nombre" onkeyup="fAgrega();" />
          </div>

<div class="mb-3">
            <label for="apellido" class="form-label">Apellidos</label>
            <input type="text" class="form-control" id="apellido" onkeyup="fAgrega();" />
          </div>

<div class="mb-3">
            <label for="cargo" class="form-label">Cargo</label>
            <input type="text" class="form-control" id="cargo" onkeyup="fAgrega();" />
          </div>

<div class="mb-3">
            <label for="sangre" class="form-label">Grupo Sanguíneo</label>
            <select class="form-select" onchange="fAgrega()" id="sangre">
              <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="fecha" class="form-label">Fecha</label>
            <input type="date" class="form-control" id="fecha" onchange="fAgrega();" />
          </div>
        </form>

<div class="mt-5 d-grid gap-2">
          <button id="guardarFoto" type="button" class="btn btn-success" disabled>
            <i class="fas fa-save"></i> Guardar Foto en BD
          </button>
          
          <button id="crearimagen" type="button" class="btn btn-secondary">
            <img class="icon" src="img/icon.png" alt="icon" /> Descargar Imagen
          </button>
        </div>
      </div>

<footer class="text-center py-3 mt-5" style="background-color: #f8f9fa; border-top: 1px solid #dee2e6;">
    <p class="mb-0 text-muted">
      © <span id="currentYear"></span> Avicampo. Todos los derechos reservados.
    </p>
  </footer>
 
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="js/filesaver.js" type="text/javascript"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>

// Función para buscar empleado por cédula
    function buscarEmpleado() {
      clearTimeout(searchTimeout);
      
      const cedula = document.getElementById("cedula").value;
      
      if (cedula.length >= 5) {
        // Mostrar spinner de carga
        document.getElementById("loadingSpinner").style.display = "inline-block";
        document.getElementById("alertMessage").style.display = "none";
        
        searchTimeout = setTimeout(function() {
          $.ajax({
            url: 'get_empleado.php',
            type: 'GET',
            data: { cedula: cedula },
            dataType: 'json',
            success: function(response) {
              document.getElementById("loadingSpinner").style.display = "none";
              
              if (response.success) {
                // Llenar los campos con la información del empleado
                document.getElementById("nombre").value = response.data.nombre || '';
                document.getElementById("apellido").value = response.data.apellido || '';
                document.getElementById("cargo").value = response.data.cargo || '';
                
                // Cargar la fecha si existe
                if (response.data.fecha && response.data.fecha !== '') {
                  document.getElementById("fecha").value = response.data.fecha;
                }
                
                // Buscar y seleccionar el grupo sanguíneo
                if (response.data.rh) {
                  const selectSangre = document.getElementById("sangre");
                  for (let i = 0; i < selectSangre.options.length; i++) {
                    if (selectSangre.options[i].value === response.data.rh) {
                      selectSangre.selectedIndex = i;
                      break;
                    }
                  }
                }
                
                // Cargar la foto si existe
                if (response.data.foto && response.data.foto !== '') {
                  fotoBase64 = response.data.foto;
                  $("#imagePreview").css("background-image", "url(" + response.data.foto + ")");
                  $(".subir_txt").remove();
                  // Deshabilitar botón guardar foto si ya existe
                  $("#guardarFoto").prop('disabled', false).text('Actualizar Foto en BD');
                } else {
                  // Limpiar foto si no existe
                  fotoBase64 = null;
                  $("#imagePreview").css("background-image", "none");
                  if ($(".subir_txt").length === 0) {
                    $("#imagePreview").prepend('<p class="subir_txt"><img src="img/photo.png" alt="icon" style="width: 48px; filter: opacity(0.2)" /></p>');
                  }
                  $("#guardarFoto").prop('disabled', true).html('<i class="fas fa-save"></i> Guardar Foto en BD');
                }
                
                // Actualizar la vista previa del carnet
                fAgrega();
                
                // Mostrar mensaje de éxito
                showAlert('Empleado encontrado correctamente', 'success');
              } else {
                // Limpiar campos si no se encuentra
                document.getElementById("nombre").value = '';
                document.getElementById("apellido").value = '';
                document.getElementById("cargo").value = '';
                document.getElementById("sangre").selectedIndex = 0;
                document.getElementById("fecha").value = '';
                fotoBase64 = null;
                $("#imagePreview").css("background-image", "none");
                if ($(".subir_txt").length === 0) {
                  $("#imagePreview").prepend('<p class="subir_txt"><img src="img/photo.png" alt="icon" style="width: 48px; filter: opacity(0.2)" /></p>');
                }
                $("#guardarFoto").prop('disabled', true).html('<i class="fas fa-save"></i> Guardar Foto en BD');
                
                showAlert('Empleado no encontrado', 'warning');
              }
            },
            error: function() {
              document.getElementById("loadingSpinner").style.display = "none";
              showAlert('Error al buscar empleado', 'danger');
            }
          });
        }, 500); // Esperar 500ms después de que el usuario deje de escribir
      } else {
        // Si la cédula tiene menos de 5 dígitos, actualizar solo la vista previa
        fAgrega();
      }
    }

// Función para mostrar alertas
    function showAlert(message, type) {
      const alertDiv = document.getElementById("alertMessage");
      alertDiv.className = 'alert-custom alert alert-' + type;
      alertDiv.textContent = message;
      alertDiv.style.display = "block";
      
      // Ocultar alerta después de 3 segundos
      setTimeout(function() {
        alertDiv.style.display = "none";
      }, 3000);
    }

// Función para agregar sobre el carnet los datos ingresados
    function fAgrega() {
      document.getElementById("nombreb").value = document.getElementById("nombre").value;
      document.getElementById("apellidob").value = document.getElementById("apellido").value;
      document.getElementById("cedulab").value = "CC: " + document.getElementById("cedula").value;
      document.getElementById("cargob").value = document.getElementById("cargo").value;
      document.getElementById("sangreb").value = "RH: " + document.getElementById("sangre").value;
      document.getElementById("fechab").value = document.getElementById("fecha").value;
      document.getElementById("imagenQR").src = 
        "https://api.qrserver.com/v1/create-qr-code/?data=" + 
        document.getElementById("cedula").value + 
        "&size=140x140&qzone=1";
    }

// Función para guardar la foto en la base de datos
    $("#guardarFoto").click(function() {
      const cedula = $("#cedula").val();
      
      if (!cedula || cedula.length < 5) {
        showAlert('Por favor ingrese una cédula válida', 'warning');
        return;
      }
      
      if (!fotoBase64) {
        showAlert('Por favor cargue una foto primero', 'warning');
        return;
      }
      
      // Deshabilitar botón mientras se guarda
      $(this).prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Guardando...');
      
      $.ajax({
        url: 'save_foto.php',
        type: 'POST',
        data: {
          cedula: cedula,
          foto: fotoBase64
        },
        dataType: 'json',
        success: function(response) {
          if (response.success) {
            showAlert('Foto guardada correctamente en la base de datos', 'success');
            $("#guardarFoto").prop('disabled', false).text('Actualizar Foto en BD');
          } else {
            showAlert(response.message || 'Error al guardar la foto', 'danger');
            $("#guardarFoto").prop('disabled', false).html('<i class="fas fa-save"></i> Guardar Foto en BD');
          }
        },
        error: function() {
          showAlert('Error de conexión al guardar la foto', 'danger');
          $("#guardarFoto").prop('disabled', false).html('<i class="fas fa-save"></i> Guardar Foto en BD');
        }
      });
    });
  </script>

// Clonar solo el contenido interno
        $("#contenido").children().clone().appendTo(tempDiv);

// Reemplazar inputs por spans
        tempDiv.find("input").each(function() {
          var val = $(this).val();
          var style = window.getComputedStyle(this);
          var span = $('<span>').text(val).css({
            position: style.position,
            top: style.top,
            left: style.left,
            right: style.right,
            bottom: style.bottom,
            transform: style.transform,
            zIndex: style.zIndex,
            display: style.display,
            width: style.width,
            height: style.height,
            padding: style.padding,
            margin: style.margin,
            "line-height": style.lineHeight,
            "font-size": style.fontSize,
            "font-family": style.fontFamily,
            color: style.color,
            "font-weight": style.fontWeight,
            "text-align": style.textAlign,
            "vertical-align": "middle",
            background: style.background,
            border: style.border
          });
          $(this).replaceWith(span);
        });

// Generar imagen
        html2canvas(tempDiv[0], { allowTaint: false, useCORS: true }).then(function(canvas) {
          canvas.toBlob(function(blob) {
            saveAs(blob, $("#cedula").val() + ".png");
            tempDiv.remove(); // limpiar div temporal
          });
        });
      });
    });
  </script>

if (/^image/.test(files[0].type)) {
          var reader = new FileReader();
          reader.readAsDataURL(files[0]);

reader.onloadend = function () {
            // Guardar la foto en Base64 en la variable global
            fotoBase64 = this.result;
            
            $("#imagePreview").css("background-image", "url(" + this.result + ")");
            $(".subir_txt").remove();
            
            // Habilitar el botón de guardar foto si hay cédula
            if ($("#cedula").val() && $("#cedula").val().length >= 5) {
              $("#guardarFoto").prop('disabled', false).html('<i class="fas fa-save"></i> Guardar Foto en BD');
            }
          };
        }
      });

$("#imagePreview").click(function () {
        $("#uploadFile").trigger("click");
      });
    });
  </script>
</body>
</html>