Carpeta js
This commit is contained in:
Axel Axt
@@ -0,0 +1,58 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
const table = $('#tablaClientes').DataTable({
|
||||
paging: true,
|
||||
searching: true,
|
||||
ordering: true,
|
||||
pageLength: 7,
|
||||
lengthChange: false,
|
||||
info: true,
|
||||
autoWidth: false,
|
||||
|
||||
columnDefs: [
|
||||
{ orderable: false, targets: - 1 }
|
||||
],
|
||||
|
||||
dom:
|
||||
"<'row mb-3'<'col-md-8'f><'col-md-4 text-end'l>>" +
|
||||
"<'row'<'col-12'tr>>" +
|
||||
"<'row mt-3'<'col-md-5'i><'col-md-7'p>>",
|
||||
|
||||
language: {
|
||||
search: "",
|
||||
searchPlaceholder: "Buscar clientes...",
|
||||
zeroRecords: "No se encontraron clientes",
|
||||
info: "Mostrando _START_ a _END_ de _TOTAL_ clientes",
|
||||
infoEmpty: "No hay clientes para mostrar",
|
||||
infoFiltered: "(filtrado de _MAX_ clientes totales)",
|
||||
paginate: {
|
||||
next: "›",
|
||||
previous: "‹"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Insertamos el select al lado del buscador
|
||||
|
||||
$('.dataTables_filter')
|
||||
.addClass('d-flex align-items-center gap-2')
|
||||
.appendTo('#filtrosIzquierda');
|
||||
|
||||
$('#filtrosIzquierda').append($('#columnFilter'));
|
||||
|
||||
const searchInput = $('.dataTables_filter input');
|
||||
|
||||
$('#columnFilter').on('change', function () {
|
||||
const colIndex = $(this).val();
|
||||
|
||||
table.search('').columns().search('').draw();
|
||||
|
||||
searchInput.off('keyup').on('keyup', function () {
|
||||
if (colIndex === "") {
|
||||
table.search(this.value).draw();
|
||||
} else {
|
||||
table.column(colIndex).search(this.value).draw();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,56 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
const table = $('#tablaDetalleVenta').DataTable({
|
||||
paging: true,
|
||||
searching: true,
|
||||
ordering: true,
|
||||
pageLength: 7,
|
||||
lengthChange: false,
|
||||
info: true,
|
||||
autoWidth: false,
|
||||
|
||||
columnDefs: [
|
||||
{ orderable: false}
|
||||
],
|
||||
|
||||
dom:
|
||||
"<'row mb-3'<'col-md-8'f><'col-md-4 text-end'l>>" +
|
||||
"<'row'<'col-12'tr>>" +
|
||||
"<'row mt-3'<'col-md-5'i><'col-md-7'p>>",
|
||||
|
||||
language: {
|
||||
search: "",
|
||||
searchPlaceholder: "Buscar insumo...",
|
||||
zeroRecords: "No se encontraron insumos",
|
||||
info: "Mostrando _START_ a _END_ de _TOTAL_ insumos",
|
||||
infoEmpty: "No hay insumos para mostrar",
|
||||
infoFiltered: "(filtrado de _MAX_ insumos totales)",
|
||||
paginate: {
|
||||
next: "›",
|
||||
previous: "‹"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Insertamos el select al lado del buscador
|
||||
|
||||
$('.dataTables_filter')
|
||||
.addClass('d-flex align-items-center')
|
||||
.append($('#columnFilter'));
|
||||
|
||||
const searchInput = $('.dataTables_filter input');
|
||||
|
||||
$('#columnFilter').on('change', function () {
|
||||
const colIndex = $(this).val();
|
||||
|
||||
table.search('').columns().search('').draw();
|
||||
|
||||
searchInput.off('keyup').on('keyup', function () {
|
||||
if (colIndex === "") {
|
||||
table.search(this.value).draw();
|
||||
} else {
|
||||
table.column(colIndex).search(this.value).draw();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,83 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
const table = $('#tablaInsumos').DataTable({
|
||||
paging: true,
|
||||
searching: true,
|
||||
ordering: true,
|
||||
pageLength: 6,
|
||||
lengthChange: false,
|
||||
info: true,
|
||||
autoWidth: false,
|
||||
|
||||
columnDefs: [
|
||||
{ orderable: false, targets: [- 1, - 2] }
|
||||
],
|
||||
|
||||
dom:
|
||||
"<'row mb-3'<'col-md-8'f><'col-md-4 text-end'l>>" +
|
||||
"<'row'<'col-12'tr>>" +
|
||||
"<'row mt-3'<'col-md-5'i><'col-md-7'p>>",
|
||||
|
||||
language: {
|
||||
search: "",
|
||||
searchPlaceholder: "Buscar insumo...",
|
||||
zeroRecords: "No se encontraron insumos",
|
||||
info: "Mostrando _START_ a _END_ de _TOTAL_ insumos",
|
||||
infoEmpty: "No hay insumos para mostrar",
|
||||
infoFiltered: "(filtrado de _MAX_ insumos totales)",
|
||||
paginate: {
|
||||
next: "›",
|
||||
previous: "‹"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Mover buscador al bloque izquierdo
|
||||
|
||||
$('.dataTables_filter')
|
||||
.addClass('d-flex align-items-center gap-2')
|
||||
.appendTo('#filtrosIzquierda');
|
||||
|
||||
$('#filtrosIzquierda').append($('#columnFilter'));
|
||||
|
||||
const searchInput = $('.dataTables_filter input');
|
||||
|
||||
$('#columnFilter').on('change', function () {
|
||||
const colIndex = $(this).val();
|
||||
|
||||
table.search('').columns().search('').draw();
|
||||
|
||||
searchInput.off('keyup').on('keyup', function () {
|
||||
if (colIndex === "") {
|
||||
table.search(this.value).draw();
|
||||
} else {
|
||||
table.column(colIndex).search(this.value).draw();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// SUBMIT (problema de checkbox)
|
||||
|
||||
$('form').on('submit', function () {
|
||||
|
||||
const form = this;
|
||||
|
||||
// Obtener TODOS los checkboxes marcados del DataTable (no solo los visibles)
|
||||
|
||||
const checked = table.$('input[name="ids[]"]:checked');
|
||||
|
||||
// Eliminar cualquier ids[] previo agregado dinámicamente
|
||||
|
||||
$(form).find('input[name="ids[]"][type="hidden"]').remove();
|
||||
|
||||
// Agregar hidden inputs reales al form
|
||||
|
||||
checked.each(function () {
|
||||
$('<input>')
|
||||
.attr('type', 'hidden')
|
||||
.attr('name', 'ids[]')
|
||||
.val($(this).val())
|
||||
.appendTo(form);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,56 @@
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
const table = $('#tablaServicios').DataTable({
|
||||
paging: true,
|
||||
searching: true,
|
||||
ordering: true,
|
||||
pageLength: 7,
|
||||
lengthChange: false,
|
||||
info: true,
|
||||
autoWidth: false,
|
||||
|
||||
columnDefs: [
|
||||
{ orderable: false, targets: - 1 }
|
||||
],
|
||||
|
||||
dom:
|
||||
"<'row mb-3'<'col-md-8'f><'col-md-4 text-end'l>>" +
|
||||
"<'row'<'col-12'tr>>" +
|
||||
"<'row mt-3'<'col-md-5'i><'col-md-7'p>>",
|
||||
|
||||
language: {
|
||||
search: "",
|
||||
searchPlaceholder: "Buscar servicio...",
|
||||
zeroRecords: "No se encontraron servicios",
|
||||
info: "Mostrando _START_ a _END_ de _TOTAL_ servicios",
|
||||
infoEmpty: "No hay servicios para mostrar",
|
||||
infoFiltered: "(filtrado de _MAX_ servicios totales)",
|
||||
paginate: {
|
||||
next: "›",
|
||||
previous: "‹"
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Insertamos el select al lado del buscador
|
||||
|
||||
$('.dataTables_filter')
|
||||
.addClass('d-flex align-items-center')
|
||||
.append($('#columnFilter'));
|
||||
|
||||
const searchInput = $('.dataTables_filter input');
|
||||
|
||||
$('#columnFilter').on('change', function () {
|
||||
const colIndex = $(this).val();
|
||||
|
||||
table.search('').columns().search('').draw();
|
||||
|
||||
searchInput.off('keyup').on('keyup', function () {
|
||||
if (colIndex === "") {
|
||||
table.search(this.value).draw();
|
||||
} else {
|
||||
table.column(colIndex).search(this.value).draw();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,225 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
if (serverErrors.length > 0) mostrarErrores(serverErrors);
|
||||
if (serverSuccess.length > 0) mostrarSuccess(serverSuccess);
|
||||
|
||||
const form = document.getElementById("form-crear-servicio");
|
||||
if (!form) return;
|
||||
|
||||
// Funciones utilitarias
|
||||
|
||||
function isEmpty(value) {
|
||||
return !value || value.trim() === '';
|
||||
}
|
||||
|
||||
function isValidEmail(value) {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
|
||||
}
|
||||
|
||||
// Submit
|
||||
|
||||
form.addEventListener("submit", (e) => {
|
||||
|
||||
let errores = [];
|
||||
|
||||
const descripcionEquipo = form.querySelector("input[name='descripcion_equipo']");
|
||||
const contraseniaEquipo = form.querySelector("input[name='contrasenia_equipo']");
|
||||
const cuenta = form.querySelector("input[name='cuenta']");
|
||||
const contraseniaCuenta = form.querySelector("input[name='contrasenia_cuenta']");
|
||||
const descripcionProblema = form.querySelector("textarea[name='descripcion_problema']");
|
||||
const observacion = form.querySelector("textarea[name='observacion']");
|
||||
|
||||
// Limpiar estados previos
|
||||
|
||||
form.querySelectorAll(".is-invalid").forEach(el =>
|
||||
el.classList.remove("is-invalid")
|
||||
);
|
||||
|
||||
// DESCRIPCIÓN DEL EQUIPO
|
||||
|
||||
if (descripcionEquipo) {
|
||||
if (isEmpty(descripcionEquipo.value)) {
|
||||
errores.push("La descripción del equipo es obligatoria.");
|
||||
descripcionEquipo.classList.add("is-invalid");
|
||||
} else if (descripcionEquipo.value.length > 100) {
|
||||
errores.push("La descripción del equipo es demasiado larga.");
|
||||
descripcionEquipo.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// DESCRIPCIÓN DEL PROBLEMA
|
||||
|
||||
if (descripcionProblema) {
|
||||
if (isEmpty(descripcionProblema.value)) {
|
||||
errores.push("Debe describir el problema.");
|
||||
descripcionProblema.classList.add("is-invalid");
|
||||
} else if (descripcionProblema.value.length > 2000) {
|
||||
errores.push("La descripción del problema es demasiado larga.");
|
||||
descripcionProblema.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// CONTRASENIA EQUIPO
|
||||
|
||||
if (contraseniaEquipo) {
|
||||
if (contraseniaEquipo.value.length > 100) {
|
||||
errores.push("Contraseña demasiado larga.");
|
||||
contraseniaEquipo.classList.add("is-invalid");
|
||||
}
|
||||
|
||||
if (!isEmpty(contraseniaEquipo.value) && isEmpty(descripcionEquipo.value)) {
|
||||
errores.push("Debe indicar el equipo si ingresa contraseña.");
|
||||
descripcionEquipo.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// CUENTA
|
||||
|
||||
if (cuenta) {
|
||||
if (cuenta.value.length > 100) {
|
||||
errores.push("Cuenta demasiado larga.");
|
||||
cuenta.classList.add("is-invalid");
|
||||
}
|
||||
|
||||
if (!isEmpty(cuenta.value) && !isValidEmail(cuenta.value)) {
|
||||
errores.push("El email de la cuenta no es válido.");
|
||||
cuenta.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// CONTRASENIA CUENTA
|
||||
|
||||
if (contraseniaCuenta) {
|
||||
if (contraseniaCuenta.value.length > 100) {
|
||||
errores.push("Contraseña de cuenta demasiado larga.");
|
||||
contraseniaCuenta.classList.add("is-invalid");
|
||||
}
|
||||
|
||||
if (!isEmpty(contraseniaCuenta.value) && isEmpty(cuenta.value)) {
|
||||
errores.push("Debe indicar la cuenta si ingresa contraseña.");
|
||||
cuenta.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// OBSERVACIÓN
|
||||
|
||||
if (observacion) {
|
||||
if (observacion.value.length > 500) {
|
||||
errores.push("La descripción de la observación es demasiada larga.");
|
||||
observacion.classList.add("is-invalid");
|
||||
}
|
||||
}
|
||||
|
||||
// Resultado
|
||||
|
||||
if (errores.length > 0) {
|
||||
e.preventDefault();
|
||||
mostrarErrores(errores);
|
||||
}
|
||||
});
|
||||
|
||||
// FUNCIÓN PARA MOSTRAR ERRORES
|
||||
|
||||
function mostrarErrores(errores) {
|
||||
|
||||
// Buscar si hay un toast previo
|
||||
|
||||
const viejo = document.getElementById("toastErrores");
|
||||
|
||||
// Si existe, se elimina (evita duplicados)
|
||||
|
||||
if (viejo) viejo.remove();
|
||||
|
||||
// Crea el contenedor del toast
|
||||
|
||||
const toast = document.createElement("div");
|
||||
|
||||
// Se le asigna ID para identificarlo
|
||||
|
||||
toast.id = "toastErrores";
|
||||
|
||||
// Clases de estilo (Bootstrap + CSS)
|
||||
|
||||
toast.className = "toast-flotante alert alert-danger";
|
||||
|
||||
// Inserta el contenido dinámico (lista de errores)
|
||||
|
||||
toast.innerHTML = `
|
||||
<strong>Se encontraron errores:</strong>
|
||||
<ul class="mb-0 mt-2">
|
||||
${errores.map(e => `<li>${e}</li>`).join("")} <!-- convierte array a <li> -->
|
||||
</ul>
|
||||
`;
|
||||
|
||||
// Agrega el toast al body (lo hace visible)
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// Auto-cierre
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
// Agrega clase para animación de salida (CSS)
|
||||
|
||||
toast.classList.add("toast-out");
|
||||
|
||||
// Elimina el elemento después de la animación
|
||||
|
||||
setTimeout(() => {
|
||||
toast.remove(); // Elimina el DOM
|
||||
}, 350);
|
||||
|
||||
}, 5000); // Visible durante 5 segundos
|
||||
}
|
||||
});
|
||||
|
||||
// FUNCIÓN PARA MOSTRAR SUCCESS
|
||||
|
||||
function mostrarSuccess(mensajes) {
|
||||
|
||||
// Elimina toast previo de éxito si existe
|
||||
|
||||
const viejo = document.getElementById("toastSuccess");
|
||||
if (viejo) viejo.remove();
|
||||
|
||||
// Crea el contenedor del toast
|
||||
|
||||
const toast = document.createElement("div");
|
||||
|
||||
// Se le asigna ID único
|
||||
|
||||
toast.id = "toastSuccess";
|
||||
|
||||
// Estilo
|
||||
|
||||
toast.className = "toast-flotante alert alert-success";
|
||||
|
||||
// Inserta mensajes dinámicos
|
||||
|
||||
toast.innerHTML = `
|
||||
<strong>Mensajes de éxito:</strong>
|
||||
<ul class="mb-0 mt-2">
|
||||
${mensajes.map(m => `<li>${m}</li>`).join("")}
|
||||
</ul>
|
||||
`;
|
||||
|
||||
// Agrega al DOM
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// Auto-cierre a los 5 segundos
|
||||
|
||||
setTimeout(() => {
|
||||
|
||||
// Animación de salida
|
||||
|
||||
toast.classList.add("toast-out");
|
||||
|
||||
// Eliminación final
|
||||
|
||||
setTimeout(() => {
|
||||
toast.remove();
|
||||
}, 350);
|
||||
|
||||
}, 5000);
|
||||
}
|
||||
Reference in New Issue
Block a user