todo funcional

This commit is contained in:
lizandrogd
2026-01-12 22:58:19 -05:00
parent 01c30ca594
commit 7afde9573f
7 changed files with 1060 additions and 81 deletions
+534 -58
View File
@@ -117,6 +117,9 @@ class SimpleWhatsAppManager {
case 'menus':
this.loadMenus();
break;
case 'autoresponses':
this.loadAutoResponses();
break;
case 'logs':
this.loadLogs();
break;
@@ -1018,6 +1021,146 @@ class SimpleWhatsAppManager {
}
}
async loadAutoResponses() {
this.log('Cargando respuestas automáticas');
try {
const response = await this.apiCall('get_autoresponses.php');
if (response && response.success) {
this.updateAutoResponsesList(response.data || []);
} else if (response && Array.isArray(response)) {
this.updateAutoResponsesList(response);
} else {
this.showError('Error cargando respuestas automáticas');
}
} catch (error) {
this.showError('Error cargando respuestas automáticas: ' + error.message);
}
}
updateAutoResponsesList(autoresponses) {
const container = document.getElementById('autoresponses-table');
if (!container) return;
// Almacenar los datos para uso posterior
this.autoResponsesData = autoresponses;
if (autoresponses.length === 0) {
container.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No hay respuestas automáticas configuradas</td></tr>';
return;
}
let html = '';
autoresponses.forEach(response => {
const typeLabels = {
'keyword': '🔑 Palabra Clave',
'contains': '📝 Contiene',
'exact': '🎯 Exacta',
'welcome': '👋 Bienvenida',
'default': '🤖 Por Defecto'
};
const typeLabel = typeLabels[response.trigger_type] || response.trigger_type;
html += `
<tr>
<td><span class="badge bg-info">${typeLabel}</span></td>
<td><code>${response.trigger_value || '-'}</code></td>
<td>${this.truncateText(response.response_text || '', 60)}</td>
<td><span class="badge bg-${response.is_active == 1 ? 'success' : 'secondary'}">${response.is_active == 1 ? 'Activo' : 'Inactivo'}</span></td>
<td>
<button class="btn btn-sm btn-outline-primary me-1" onclick="editAutoResponse(${response.id})" title="Editar">
<i class="fas fa-edit"></i>
</button>
<button class="btn btn-sm btn-outline-danger" onclick="deleteAutoResponse(${response.id})" title="Eliminar">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
`;
});
container.innerHTML = html;
}
async saveAutoResponse() {
this.log('Guardando respuesta automática');
try {
const responseData = {
trigger_type: document.getElementById('autoresponse-type')?.value || 'keyword',
trigger_value: document.getElementById('autoresponse-trigger')?.value || '',
response_text: document.getElementById('autoresponse-text')?.value || '',
response_type: document.getElementById('autoresponse-response-type')?.value || 'text',
is_active: document.getElementById('autoresponse-active')?.checked ? 1 : 0
};
// Validar campos requeridos
if (!responseData.response_text) {
this.showError('El texto de respuesta es requerido');
return;
}
if (responseData.trigger_type !== 'welcome' && responseData.trigger_type !== 'default' && !responseData.trigger_value) {
this.showError('El disparador es requerido para este tipo de respuesta');
return;
}
this.log(`Datos de respuesta automática a guardar: ${JSON.stringify(responseData)}`);
const response = await this.apiCall('save_autoresponse.php', {
method: 'POST',
body: responseData
});
if (response && response.success) {
this.showSuccess('Respuesta automática guardada correctamente');
// Cerrar modal
const modal = document.getElementById('createAutoResponseModal');
if (modal) {
const bsModal = bootstrap.Modal.getInstance(modal);
if (bsModal) bsModal.hide();
}
// Limpiar formulario
const form = document.getElementById('autoresponse-form');
if (form) form.reset();
// Recargar respuestas automáticas
this.loadAutoResponses();
} else {
this.showError(`Error guardando respuesta automática: ${response?.error || 'Error desconocido'}`);
}
} catch (error) {
this.showError('Error guardando respuesta automática: ' + error.message);
}
}
async deleteAutoResponseAction(responseId) {
this.log(`Eliminando respuesta automática ID: ${responseId}`);
try {
const response = await this.apiCall('delete_autoresponse.php', {
method: 'POST',
body: { response_id: responseId }
});
if (response && response.success) {
this.showSuccess('Respuesta automática eliminada correctamente');
this.loadAutoResponses(); // Recargar la lista
} else {
this.showError(`Error eliminando respuesta automática: ${response?.error || 'Error desconocido'}`);
}
} catch (error) {
this.showError('Error eliminando respuesta automática: ' + error.message);
}
}
async deleteMenuAction(menuId) {
this.log(`Eliminando menú ID: ${menuId}`);
@@ -1154,6 +1297,139 @@ class SimpleWhatsAppManager {
this.showError('Error cargando logs: ' + error.message);
}
}
updateLogsTable(logs) {
const tbody = document.getElementById('logs-table');
if (!tbody) {
this.log('Tabla de logs no encontrada', 'warning');
return;
}
tbody.innerHTML = '';
if (!logs || logs.length === 0) {
tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No hay logs registrados</td></tr>';
return;
}
logs.forEach(log => {
const row = this.createLogRow(log);
if (row) {
tbody.appendChild(row);
}
});
}
createLogRow(log) {
if (!log) return null;
const tr = document.createElement('tr');
// Fecha y hora
const tdDateTime = document.createElement('td');
tdDateTime.textContent = log.datetime || log.created_at || 'N/A';
tr.appendChild(tdDateTime);
// Nivel
const tdLevel = document.createElement('td');
const levelBadge = document.createElement('span');
levelBadge.className = `badge bg-${this.getLevelBadgeClass(log.level || log.tipo)}`;
levelBadge.textContent = (log.level || log.tipo || 'INFO').toUpperCase();
tdLevel.appendChild(levelBadge);
tr.appendChild(tdLevel);
// Mensaje
const tdMessage = document.createElement('td');
tdMessage.textContent = this.truncateText(log.message || log.mensaje || '', 100);
tr.appendChild(tdMessage);
// Origen
const tdSource = document.createElement('td');
tdSource.textContent = log.source || log.origen || 'Sistema';
tr.appendChild(tdSource);
// Acciones
const tdActions = document.createElement('td');
const viewButton = document.createElement('button');
viewButton.className = 'btn btn-sm btn-outline-info';
viewButton.innerHTML = '<i class="fas fa-eye"></i>';
viewButton.onclick = () => this.showLogDetails(log);
tdActions.appendChild(viewButton);
tr.appendChild(tdActions);
return tr;
}
getLevelBadgeClass(level) {
const levelClasses = {
'ERROR': 'danger',
'WARNING': 'warning',
'WARN': 'warning',
'INFO': 'info',
'DEBUG': 'secondary',
'SUCCESS': 'success'
};
return levelClasses[level?.toUpperCase()] || 'secondary';
}
showLogDetails(log) {
const details = {
'Fecha/Hora': log.datetime || log.created_at || 'N/A',
'Nivel': (log.level || log.tipo || 'INFO').toUpperCase(),
'Mensaje': log.message || log.mensaje || '',
'Origen': log.source || log.origen || 'Sistema',
'Datos Adicionales': log.data ? JSON.stringify(log.data, null, 2) : 'N/A'
};
let detailsHtml = '<div class="log-details">';
for (const [key, value] of Object.entries(details)) {
detailsHtml += `
<div class="mb-2">
<strong>${key}:</strong>
<div class="ms-2 ${key === 'Datos Adicionales' ? 'font-monospace' : ''}">${value}</div>
</div>`;
}
detailsHtml += '</div>';
// Mostrar en modal o alert
if (typeof bootstrap !== 'undefined') {
// Si Bootstrap está disponible, crear modal
this.showModalAlert('Detalles del Log', detailsHtml);
} else {
// Fallback a alert simple
alert(`Detalles del Log:\n\n${Object.entries(details).map(([k,v]) => `${k}: ${v}`).join('\n')}`);
}
}
showModalAlert(title, content) {
// Crear modal temporal si no existe
let modal = document.getElementById('tempLogModal');
if (!modal) {
modal = document.createElement('div');
modal.id = 'tempLogModal';
modal.className = 'modal fade';
modal.innerHTML = `
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
</div>
</div>
</div>`;
document.body.appendChild(modal);
}
modal.querySelector('.modal-title').textContent = title;
modal.querySelector('.modal-body').innerHTML = content;
const bootstrapModal = new bootstrap.Modal(modal);
bootstrapModal.show();
}
}
// Inicializar cuando el DOM esté listo
@@ -1581,6 +1857,11 @@ window.app = {
if (window.whatsappManager) {
window.whatsappManager.saveMenu();
}
},
saveAutoResponse: function () {
if (window.whatsappManager) {
window.whatsappManager.saveAutoResponse();
}
}
};
@@ -1659,19 +1940,228 @@ window.removeMenuOption = function (button) {
}
};
// Función para actualizar numeración de opciones
function updateOptionNumbers() {
const container = document.getElementById('menu-options-container');
if (!container) return;
const options = container.querySelectorAll('.menu-option-item');
options.forEach((option, index) => {
const header = option.querySelector('h6');
if (header) {
header.textContent = `Opción ${index + 1}`;
// Funciones globales para gestión de respuestas automáticas
window.editAutoResponse = function (responseId) {
console.log('Editando respuesta automática:', responseId);
// TODO: Implementar edición de respuestas automáticas
alert(`Editar respuesta automática ${responseId} - Función en desarrollo`);
};
window.deleteAutoResponse = function (responseId) {
console.log('Eliminando respuesta automática:', responseId);
if (confirm(`¿Está seguro que desea eliminar la respuesta automática ${responseId}?`)) {
if (window.whatsappManager) {
window.whatsappManager.deleteAutoResponseAction(responseId);
}
});
}
}
};
// Funciones para modal de autorespuestas
window.showCreateAutoResponseModal = function() {
document.getElementById('autoresponse-form').reset();
document.getElementById('autoresponse-id').value = '';
document.getElementById('createAutoResponseModalLabel').innerHTML = '<i class="fas fa-robot"></i> Crear Nueva Respuesta Automática';
// Reset campos específicos
updateTriggerFields('keyword');
updateResponseTypeFields('text');
const modal = new bootstrap.Modal(document.getElementById('createAutoResponseModal'));
modal.show();
};
window.showEditAutoResponseModal = function(autoresponse) {
document.getElementById('autoresponse-id').value = autoresponse.id;
document.getElementById('createAutoResponseModalLabel').innerHTML = '<i class="fas fa-edit"></i> Editar Respuesta Automática';
// Llenar campos del formulario
document.getElementById('autoresponse-trigger-type').value = autoresponse.trigger_type;
document.getElementById('autoresponse-trigger-value').value = autoresponse.trigger_value || '';
document.getElementById('autoresponse-text').value = autoresponse.response_text;
document.getElementById('autoresponse-type').value = autoresponse.response_type;
document.getElementById('autoresponse-priority').value = autoresponse.priority;
document.getElementById('autoresponse-active').value = autoresponse.is_active ? '1' : '0';
document.getElementById('autoresponse-template-name').value = autoresponse.template_name || '';
document.getElementById('autoresponse-menu-id').value = autoresponse.menu_id || '';
// Actualizar campos según el tipo
updateTriggerFields(autoresponse.trigger_type);
updateResponseTypeFields(autoresponse.response_type);
const modal = new bootstrap.Modal(document.getElementById('createAutoResponseModal'));
modal.show();
};
window.updateTriggerFields = function(triggerType) {
const valueGroup = document.getElementById('trigger-value-group');
const valueLabel = document.getElementById('trigger-value-label');
const valueInput = document.getElementById('autoresponse-trigger-value');
const valueHelp = document.getElementById('trigger-value-help');
if (!valueGroup || !valueLabel || !valueInput || !valueHelp) {
console.warn('Elementos del modal de autorespuesta no encontrados');
return;
}
switch (triggerType) {
case 'keyword':
valueGroup.style.display = 'block';
valueLabel.textContent = 'Palabras Clave *';
valueInput.placeholder = 'hola,buenos días,hi,hello';
valueInput.required = true;
valueHelp.textContent = 'Separa múltiples palabras con comas';
break;
case 'contains':
valueGroup.style.display = 'block';
valueLabel.textContent = 'Texto a Buscar *';
valueInput.placeholder = 'precio';
valueInput.required = true;
valueHelp.textContent = 'Texto que debe contener el mensaje del usuario';
break;
case 'exact':
valueGroup.style.display = 'block';
valueLabel.textContent = 'Mensaje Exacto *';
valueInput.placeholder = 'quiero información';
valueInput.required = true;
valueHelp.textContent = 'El mensaje debe coincidir exactamente';
break;
case 'welcome':
case 'default':
valueGroup.style.display = 'none';
valueInput.required = false;
valueInput.value = '';
break;
}
};
window.updateResponseTypeFields = function(responseType) {
const templateFields = document.getElementById('template-fields');
const menuFields = document.getElementById('menu-fields');
if (!templateFields || !menuFields) {
console.warn('Campos adicionales del modal no encontrados');
return;
}
// Ocultar todos los campos adicionales
templateFields.style.display = 'none';
menuFields.style.display = 'none';
// Mostrar campos según el tipo
switch (responseType) {
case 'template':
templateFields.style.display = 'block';
break;
case 'menu':
menuFields.style.display = 'block';
// Cargar menús disponibles si no están cargados
loadMenusForSelect();
break;
}
};
window.loadMenusForSelect = function() {
fetch('/api/get_menus.php')
.then(response => response.json())
.then(data => {
if (data.success) {
const select = document.getElementById('autoresponse-menu-id');
if (select) {
select.innerHTML = '<option value="">Seleccionar menú...</option>';
data.data.forEach(menu => {
const option = document.createElement('option');
option.value = menu.id;
option.textContent = `${menu.name} (${menu.menu_key})`;
select.appendChild(option);
});
}
}
})
.catch(error => console.error('Error loading menus for select:', error));
};
// Actualizar función editAutoResponse para usar el modal
window.editAutoResponse = function (responseId) {
console.log('Editando respuesta automática:', responseId);
// Buscar la respuesta en los datos cargados
if (window.whatsappManager && window.whatsappManager.autoResponsesData) {
const autoresponse = window.whatsappManager.autoResponsesData.find(ar => ar.id == responseId);
if (autoresponse) {
showEditAutoResponseModal(autoresponse);
} else {
console.error('Respuesta automática no encontrada:', responseId);
alert('Error: No se pudo cargar la respuesta automática');
}
} else {
console.error('Datos de respuestas automáticas no disponibles');
alert('Error: Datos no disponibles, recarga la página');
}
};
window.showCreateAutoResponseModal = function () {
console.log('🔵 Abriendo modal de respuesta automática...');
const modalElement = document.getElementById('createAutoResponseModal');
if (!modalElement) {
console.error('❌ Modal de respuesta automática no encontrado');
return;
}
try {
const form = document.getElementById('autoresponse-form');
if (form) form.reset();
if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
const modal = new bootstrap.Modal(modalElement);
modal.show();
} else {
modalElement.style.display = 'block';
modalElement.classList.add('show');
}
console.log('✅ Modal de respuesta automática abierto');
} catch (error) {
console.error('❌ Error abriendo modal de respuesta automática:', error);
}
};
// Función para cambiar tipo de disparador
window.toggleTriggerType = function () {
const triggerType = document.getElementById('autoresponse-type')?.value;
const triggerContainer = document.getElementById('trigger-container');
if (triggerContainer) {
if (triggerType === 'welcome' || triggerType === 'default') {
triggerContainer.style.display = 'none';
} else {
triggerContainer.style.display = 'block';
const triggerInput = document.getElementById('autoresponse-trigger');
const triggerLabel = document.querySelector('label[for="autoresponse-trigger"]');
if (triggerInput && triggerLabel) {
switch (triggerType) {
case 'keyword':
triggerLabel.textContent = 'Palabra Clave *';
triggerInput.placeholder = 'ej: hola, info, precios';
break;
case 'contains':
triggerLabel.textContent = 'Texto que debe contener *';
triggerInput.placeholder = 'ej: precio, información';
break;
case 'exact':
triggerLabel.textContent = 'Mensaje exacto *';
triggerInput.placeholder = 'ej: ¿Cuáles son sus precios?';
break;
}
}
}
}
};
// Funciones para el formulario de mensajes
window.toggleRecipientType = function () {
@@ -1834,51 +2324,37 @@ function displayDiagnosticResults(data) {
function updateLogsTable(logs) {
const tbody = document.getElementById('logs-table');
if (!tbody) {
this.log('Tabla de logs no encontrada', 'warning');
return;
// ==============================================
// EVENT LISTENERS PARA MODALES DE AUTORESPUESTAS
// ==============================================
// Agregar event listeners cuando el DOM esté listo
document.addEventListener('DOMContentLoaded', function() {
// Event listener para cambio de tipo de trigger
const triggerTypeSelect = document.getElementById('autoresponse-trigger-type');
if (triggerTypeSelect) {
triggerTypeSelect.addEventListener('change', function() {
updateTriggerFields(this.value);
});
}
tbody.innerHTML = '';
if (!logs || logs.length === 0) {
tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No hay logs registrados</td></tr>';
return;
// Event listener para cambio de tipo de respuesta
const responseTypeSelect = document.getElementById('autoresponse-type');
if (responseTypeSelect) {
responseTypeSelect.addEventListener('change', function() {
updateResponseTypeFields(this.value);
});
}
logs.forEach(log => {
const row = this.createLogRow(log);
tbody.appendChild(row);
});
this.log(`${logs.length} logs cargados en la tabla`);
}
function createLogRow(log) {
const tr = document.createElement('tr');
const date = new Date(log.created_at);
const formatDate = date.toLocaleDateString() + ' ' + date.toLocaleTimeString('es', { hour: '2-digit', minute: '2-digit' });
tr.innerHTML = `
<td>${formatDate}</td>
<td>${log.ip_address || 'N/A'}</td>
<td>
<span class="badge bg-${log.status_code === 200 ? 'success' : 'danger'}">
${log.status_code || 'N/A'}
</span>
</td>
<td>
<button class="btn btn-sm btn-outline-primary" onclick="viewLogDetails('${log.id}', 'request')">
Ver Request
</button>
</td>
<td>
<button class="btn btn-sm btn-outline-primary" onclick="viewLogDetails('${log.id}', 'response')">
Ver Response
</button>
</td>
`;
return tr;
}
// Event listener para el modal cuando se muestre
const autoResponseModal = document.getElementById('createAutoResponseModal');
if (autoResponseModal) {
autoResponseModal.addEventListener('shown.bs.modal', function () {
// Enfocar el primer campo cuando se abra el modal
const firstInput = autoResponseModal.querySelector('input, select, textarea');
if (firstInput) {
firstInput.focus();
}
});
}
});