File "planilla.js"

Full Path: C:/wamp64/www/PERSONAL/EntregaCarnet/frontend/planilla.js
File size: 5.06 KB
MIME-type: text/plain
Charset: utf-8

const canvas = document.getElementById('firmaCanvas');
const ctx = canvas.getContext('2d');
let dibujando = false;

function getPosicion(event) {
  const rect = canvas.getBoundingClientRect();
  if (event.touches) {
    return {
      x: event.touches[0].clientX - rect.left,
      y: event.touches[0].clientY - rect.top
    };
  } else {
    return {
      x: event.offsetX,
      y: event.offsetY
    };
  }
}

function empezarDibujo(event) {
  dibujando = true;
  const pos = getPosicion(event);
  ctx.beginPath();
  ctx.moveTo(pos.x, pos.y);
  event.preventDefault();
}

function dibujar(event) {
  if (!dibujando) return;
  const pos = getPosicion(event);
  ctx.lineTo(pos.x, pos.y);
  ctx.stroke();
  event.preventDefault();
}

function terminarDibujo(event) {
  dibujando = false;
  guardarFirma();
  event.preventDefault();
}

function guardarFirma() {
  const dataURL = canvas.toDataURL();
  document.getElementById('firma').value = dataURL;
}

function limpiarFirma() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  document.getElementById('firma').value = "";
}

// Eventos mouse
canvas.addEventListener('mousedown', empezarDibujo);
canvas.addEventListener('mousemove', dibujar);
canvas.addEventListener('mouseup', terminarDibujo);
canvas.addEventListener('mouseleave', terminarDibujo);

// Eventos táctiles
canvas.addEventListener('touchstart', empezarDibujo);
canvas.addEventListener('touchmove', dibujar);
canvas.addEventListener('touchend', terminarDibujo);

//------------------------------------------------------------------------------------------//--------------
document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('formRegistro').addEventListener('submit', function (event) {
    event.preventDefault();

    const canvas = document.getElementById('firmaCanvas');
    if (isCanvasVacio(canvas)) {
      mostrarAlerta('Por favor firme antes de enviar el formulario.', 'warning');
      return;
    }

    const firmaInput = document.getElementById('firma');
    firmaInput.value = canvas.toDataURL('image/png');

    const formData = new FormData(this);

    fetch('../backend/insert.php', {
      method: 'POST',
      body: formData
    })

    .then(async response => {
      const contentType = response.headers.get('content-type');
      if (contentType && contentType.includes('application/json')) {
        return response.json();
      } else {
        const text = await response.text();
        throw new Error('Respuesta no es JSON:\n' + text);
      }
    })

    .then(data => {
      mostrarAlerta(data.mensaje, data.status === 'success' ? 'success' : 'error');
      if (data.status === 'success') {
        this.reset();
        limpiarFirma();
        setTimeout(() => {
          window.location.href = 'planilla.html';
        }, 2000);
      }
    })

    .catch(error => {
      console.error('Error:', error);
      mostrarAlerta('Hubo un error al enviar el formulario.', 'error');
    });
  });
});

//---------------------------------------------------------------//-------------------------------------------------------------
function mostrarAlerta(mensaje, tipo = "success") {

  Swal.fire({
    icon: tipo,
    title: mensaje,
    showConfirmButton: false,
    timer: 2000,
    timerProgressBar: true
  });

}

//-----------------------------------------------------------------------------------------------
function isCanvasVacio(canvas) {
  const context = canvas.getContext('2d');
  const pixelData = context.getImageData(0, 0, canvas.width, canvas.height).data;

  for (let i = 0; i < pixelData.length; i += 4) {
    if (pixelData[i + 3] !== 0) {
      return false; // Hay al menos un píxel visible
    }
  }
  return true;
}

//-------------------------------------------------------------------------------------------------------------------------------//---------------------
// traer datos de la tabla de empleados y mostrarlos en los inputs

  $('#buscarForm2').submit(function (event) {
      event.preventDefault();

      var cedula = $('#cedula').val();

      // Use $.getJSON instead, it forces the result to be treated as JSON
      $.getJSON("../backend/select2.php", { cedula: cedula })
          .done(function(response) {
              // No need for JSON.parse(data) here! 
              // jQuery already did the work.
              if (response && response.exito) {
                  $('[name="nombre"]').val(response.cliente.nombre);
                  $('[name="cedula"]').val(response.cliente.cedula);
                  $('[name="cargo"]').val(response.cliente.cargo);
                  $('[name="cedula_original"]').val(response.cliente.cedula);
              } else {
                  alert(response.mensaje || "No se encontraron datos.");
              }
          })
          .fail(function(jqXHR, textStatus, errorThrown) {
              console.error("Request failed: " + textStatus, errorThrown);
              alert("Error en el servidor. Revisa la consola.");
          });
  });