Formulario de Pedidos - Seguimiento
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
background: white;
border-radius: 10px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
max-width: 700px;
width: 100%;
padding: 40px;
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
font-size: 28px;
}
.form-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 8px;
color: #555;
font-weight: 600;
font-size: 14px;
}
input[type="number"],
input[type="text"] {
width: 100%;
padding: 12px 15px;
border: 2px solid #e0e0e0;
border-radius: 5px;
font-size: 14px;
transition: all 0.3s ease;
}
input[type="number"]:focus,
input[type="text"]:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.cantidad-section {
background: #f9f9f9;
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
}
.cantidad-section input {
width: 100%;
padding: 12px;
font-size: 16px;
border: 2px solid #e0e0e0;
border-radius: 5px;
}
.cantidad-section button {
width: 100%;
padding: 12px;
margin-top: 15px;
background: #667eea;
color: white;
border: none;
border-radius: 5px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.cantidad-section button:hover {
background: #5568d3;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}
#pedidosContainer {
max-height: 500px;
overflow-y: auto;
background: #fafafa;
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
border: 1px solid #e0e0e0;
}
.pedido-fila {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 20px;
padding: 15px;
background: white;
border-radius: 5px;
border-left: 4px solid #667eea;
}
.pedido-fila input {
padding: 10px;
border: 1px solid #e0e0e0;
border-radius: 4px;
font-size: 13px;
}
.pedido-fila input::placeholder {
color: #999;
}
.pedido-numero {
font-size: 12px;
color: #999;
margin-bottom: 5px;
font-weight: 600;
text-transform: uppercase;
}
.mensage-vacio {
text-align: center;
color: #999;
padding: 40px 20px;
font-size: 14px;
}
.botones-principal {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 30px;
}
.btn {
padding: 14px;
border: none;
border-radius: 5px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.btn-enviar {
background: #10b981;
color: white;
grid-column: 1 / -1;
}
.btn-enviar:hover {
background: #059669;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3);
}
.btn-enviar:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
}
.btn-limpiar {
background: #ef4444;
color: white;
}
.btn-limpiar:hover {
background: #dc2626;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(239, 68, 68, 0.3);
}
.mensaje {
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
display: none;
animation: slideIn 0.3s ease;
}
.mensaje.visible {
display: block;
}
.mensaje.exito {
background: #d1fae5;
color: #065f46;
border-left: 4px solid #10b981;
}
.mensaje.error {
background: #fee2e2;
color: #7f1d1d;
border-left: 4px solid #ef4444;
}
.mensaje.cargando {
background: #dbeafe;
color: #0c4a6e;
border-left: 4px solid #3b82f6;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid rgba(0,0,0,0.2);
border-radius: 50%;
border-top-color: currentColor;
animation: spin 0.6s linear infinite;
margin-right: 8px;
vertical-align: middle;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.info-contador {
text-align: center;
color: #666;
font-size: 13px;
margin-top: 10px;
}
@media (max-width: 600px) {
.container {
padding: 25px;
}
h1 {
font-size: 22px;
}
.pedido-fila {
grid-template-columns: 1fr;
}
.botones-principal {
grid-template-columns: 1fr;
}
}
Gestor de Pedidos
Ingresa una cantidad y haz clic en "Generar Filas"
const WEBHOOK_URL = 'https://hook.eu2.make.com/pg3pvl75ksuwwflqfd9teyemt9olcfyc';
let cantidadActual = 0;
function mostrarMensaje(texto, tipo = 'exito') {
const msg = document.getElementById('mensaje');
msg.textContent = texto;
msg.className = `mensaje visible ${tipo}`;
if (tipo !== 'cargando') {
setTimeout(() => {
msg.classList.remove('visible');
}, 5000);
}
}
function generarFilas() {
const cantidad = parseInt(document.getElementById('cantidadPedidos').value);
if (isNaN(cantidad) || cantidad 100) {
mostrarMensaje('⚠️ La cantidad máxima es 100 pedidos', 'error');
return;
}
cantidadActual = cantidad;
const container = document.getElementById('pedidosContainer');
container.innerHTML = '';
for (let i = 1; i <= cantidad; i++) {
const fila = document.createElement('div');
fila.className = 'pedido-fila';
fila.innerHTML = `
Número de Seguimiento ${i}
`;
container.appendChild(fila);
}
document.getElementById('btnEnviar').disabled = false;
document.getElementById('infoContador').textContent = `✓ ${cantidad} fila(s) generada(s)`;
}
function limpiarFormulario() {
document.getElementById('cantidadPedidos').value = '1';
document.getElementById('pedidosContainer').innerHTML = '
Ingresa una cantidad y haz clic en "Generar Filas"
';
document.getElementById('btnEnviar').disabled = true;
document.getElementById('infoContador').textContent = '';
document.getElementById('mensaje').classList.remove('visible');
}
async function enviarDatos() {
const numeroPedidos = document.querySelectorAll('.numero-pedido');
const numeroSeguimientos = document.querySelectorAll('.numero-seguimiento');
// Validar que todos los campos estén completos
for (let i = 0; i < numeroPedidos.length; i++) {
if (!numeroPedidos[i].value.trim()) {
mostrarMensaje(`⚠️ El Pedido ${i + 1} no tiene número de pedido`, 'error');
return;
}
if (!numeroSeguimientos[i].value.trim()) {
mostrarMensaje(`⚠️ El Pedido ${i + 1} no tiene número de seguimiento`, 'error');
return;
}
}
// Construir array de pedidos
const pedidos = [];
for (let i = 0; i < numeroPedidos.length; i++) {
pedidos.push({
numero_pedido: numeroPedidos[i].value.trim(),
numero_seguimiento: numeroSeguimientos[i].value.trim()
});
}
// Mostrar mensaje de carga
mostrarMensaje('
Enviando pedidos...', 'cargando');
document.getElementById('btnEnviar').disabled = true;
let pedidosEnviados = 0;
let pedidosConError = 0;
try {
// Enviar cada pedido al webhook con 1 segundo de espera
for (let i = 0; i < pedidos.length; i++) {
const pedido = pedidos[i];
try {
const response = await fetch(WEBHOOK_URL, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(pedido)
});
if (!response.ok) {
console.error(`Error en pedido ${i + 1}: ${response.statusText}`);
pedidosConError++;
} else {
pedidosEnviados++;
console.log(`✓ Pedido ${i + 1} enviado correctamente`);
}
} catch (fetchError) {
console.error(`Error al enviar pedido ${i + 1}:`, fetchError);
pedidosConError++;
}
// Espera 1 segundo antes de enviar el siguiente (excepto en el último)
if (i setTimeout(resolve, 1000));
}
}
// Mostrar resultado final
if (pedidosConError === 0) {
mostrarMensaje(`✓ ¡${pedidosEnviados} pedido(s) enviado(s) correctamente!`, 'exito');
} else if (pedidosEnviados > 0) {
mostrarMensaje(`⚠️ ${pedidosEnviados} enviados, ${pedidosConError} con error`, 'error');
} else {
mostrarMensaje(`✗ Error al enviar los pedidos`, 'error');
}
limpiarFormulario();
} catch (error) {
console.error('Error:', error);
mostrarMensaje(`✗ Error crítico: ${error.message}`, 'error');
document.getElementById('btnEnviar').disabled = false;
}
}
// Permite enviar con Enter en el último campo
document.addEventListener('keypress', function(e) {
if (e.key === 'Enter' && e.target.classList.contains('numero-seguimiento')) {
const ultimoSeguimiento = document.querySelectorAll('.numero-seguimiento');
if (e.target === ultimoSeguimiento[ultimoSeguimiento.length - 1]) {
enviarDatos();
}
}
});
// Generar 1 fila por defecto
generarFilas();