313 lines
12 KiB
PHP
313 lines
12 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WhatsApp Bot Manager - Debug</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
.debug-info { background: #f8f9fa; border-left: 4px solid #007bff; padding: 15px; margin: 10px 0; }
|
|
.success { color: #28a745; }
|
|
.error { color: #dc3545; }
|
|
.warning { color: #ffc107; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-4">
|
|
<h1>🔧 WhatsApp Bot Manager - Debug</h1>
|
|
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>📡 Test de Conectividad</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<button onclick="testAPI()" class="btn btn-primary">Test API Simple</button>
|
|
<button onclick="testConfig()" class="btn btn-info">Test Configuraciones</button>
|
|
<button onclick="testWhatsApp()" class="btn btn-success">Test WhatsApp</button>
|
|
<div id="api-results" class="mt-3"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5>💾 Guardar Config de Prueba</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="mb-2">
|
|
<input type="text" id="test-key" class="form-control" placeholder="Clave" value="test_frontend">
|
|
</div>
|
|
<div class="mb-2">
|
|
<input type="text" id="test-value" class="form-control" placeholder="Valor" value="Valor desde frontend">
|
|
</div>
|
|
<button onclick="saveTestConfig()" class="btn btn-warning">Guardar Test</button>
|
|
<div id="save-results" class="mt-2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5>📊 Estado del Sistema</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="system-status">
|
|
<div class="text-center">
|
|
<div class="spinner-border" role="status"></div>
|
|
<p>Verificando estado...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-3">
|
|
<div class="card-header">
|
|
<h5>⚙️ Configuraciones Actuales</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<button onclick="loadConfigs()" class="btn btn-outline-primary btn-sm">🔄 Cargar</button>
|
|
<div id="config-list" class="mt-2">
|
|
<p class="text-muted">Haz clic en "Cargar" para ver las configuraciones</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card mt-4">
|
|
<div class="card-header">
|
|
<h5>📝 Log de Debug</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="debug-log" style="height: 200px; overflow-y: auto; background: #f8f9fa; padding: 10px; font-family: monospace; font-size: 12px;">
|
|
<!-- Log entries will appear here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Sistema de logging simple
|
|
function logDebug(message, type = 'info') {
|
|
const log = document.getElementById('debug-log');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const colors = {
|
|
info: '#007bff',
|
|
success: '#28a745',
|
|
error: '#dc3545',
|
|
warning: '#ffc107'
|
|
};
|
|
|
|
const entry = document.createElement('div');
|
|
entry.style.color = colors[type];
|
|
entry.innerHTML = `[${timestamp}] ${message}`;
|
|
log.appendChild(entry);
|
|
log.scrollTop = log.scrollHeight;
|
|
}
|
|
|
|
// Función para hacer peticiones AJAX simples
|
|
async function makeRequest(url, options = {}) {
|
|
logDebug(`Haciendo petición a: ${url}`, 'info');
|
|
|
|
try {
|
|
const response = await fetch(url, {
|
|
method: options.method || 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
...options.headers
|
|
},
|
|
body: options.body ? JSON.stringify(options.body) : undefined
|
|
});
|
|
|
|
logDebug(`Respuesta recibida: ${response.status} ${response.statusText}`, response.ok ? 'success' : 'error');
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP Error: ${response.status}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
logDebug(`Datos recibidos: ${JSON.stringify(data).substring(0, 100)}...`, 'success');
|
|
return data;
|
|
|
|
} catch (error) {
|
|
logDebug(`Error en petición: ${error.message}`, 'error');
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
// Test básico de API
|
|
async function testAPI() {
|
|
const resultsDiv = document.getElementById('api-results');
|
|
resultsDiv.innerHTML = '<div class="spinner-border spinner-border-sm"></div> Probando API...';
|
|
|
|
try {
|
|
const result = await makeRequest('/api/test_api.php?action=ping');
|
|
|
|
resultsDiv.innerHTML = `
|
|
<div class="alert alert-success">
|
|
<strong>✅ API Funcionando:</strong><br>
|
|
Mensaje: ${result.message}<br>
|
|
Hora: ${result.timestamp}
|
|
</div>
|
|
`;
|
|
} catch (error) {
|
|
resultsDiv.innerHTML = `
|
|
<div class="alert alert-danger">
|
|
<strong>❌ Error:</strong> ${error.message}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Test de configuraciones
|
|
async function testConfig() {
|
|
const resultsDiv = document.getElementById('api-results');
|
|
resultsDiv.innerHTML = '<div class="spinner-border spinner-border-sm"></div> Probando configuraciones...';
|
|
|
|
try {
|
|
const result = await makeRequest('/api/test_api.php?action=test_db');
|
|
|
|
resultsDiv.innerHTML = `
|
|
<div class="alert alert-${result.success ? 'success' : 'danger'}">
|
|
<strong>${result.success ? '✅' : '❌'} Base de Datos:</strong><br>
|
|
Conectada: ${result.data?.db_connected ? 'Sí' : 'No'}<br>
|
|
Tabla existe: ${result.data?.table_exists ? 'Sí' : 'No'}<br>
|
|
Configuraciones: ${result.data?.config_count || 0}
|
|
</div>
|
|
`;
|
|
} catch (error) {
|
|
resultsDiv.innerHTML = `
|
|
<div class="alert alert-danger">
|
|
<strong>❌ Error:</strong> ${error.message}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Test de WhatsApp
|
|
async function testWhatsApp() {
|
|
const resultsDiv = document.getElementById('api-results');
|
|
resultsDiv.innerHTML = '<div class="spinner-border spinner-border-sm"></div> Probando WhatsApp...';
|
|
|
|
try {
|
|
const result = await makeRequest('/api/test_api.php?action=whatsapp');
|
|
|
|
resultsDiv.innerHTML = `
|
|
<div class="alert alert-info">
|
|
<strong>📱 WhatsApp Config:</strong><br>
|
|
Token: ${result.data.token || '(vacío)'}<br>
|
|
Phone ID: ${result.data.phone_number_id || '(vacío)'}<br>
|
|
Válido: ${result.data.status.valid ? 'Sí' : 'No'}
|
|
</div>
|
|
`;
|
|
} catch (error) {
|
|
resultsDiv.innerHTML = `
|
|
<div class="alert alert-danger">
|
|
<strong>❌ Error:</strong> ${error.message}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Guardar configuración de prueba
|
|
async function saveTestConfig() {
|
|
const key = document.getElementById('test-key').value;
|
|
const value = document.getElementById('test-value').value;
|
|
const resultsDiv = document.getElementById('save-results');
|
|
|
|
if (!key || !value) {
|
|
resultsDiv.innerHTML = '<div class="alert alert-warning">Por favor llena ambos campos</div>';
|
|
return;
|
|
}
|
|
|
|
resultsDiv.innerHTML = '<div class="spinner-border spinner-border-sm"></div> Guardando...';
|
|
|
|
try {
|
|
const result = await makeRequest('/api/test_api.php?action=save_test', {
|
|
method: 'POST',
|
|
body: { key, value }
|
|
});
|
|
|
|
resultsDiv.innerHTML = `
|
|
<div class="alert alert-${result.success ? 'success' : 'danger'}">
|
|
<strong>${result.success ? '✅' : '❌'} ${result.message}</strong><br>
|
|
${result.success ? `Guardado: ${result.data.key} = ${result.data.value}` : ''}
|
|
</div>
|
|
`;
|
|
} catch (error) {
|
|
resultsDiv.innerHTML = `
|
|
<div class="alert alert-danger">
|
|
<strong>❌ Error:</strong> ${error.message}
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Cargar configuraciones
|
|
async function loadConfigs() {
|
|
const configDiv = document.getElementById('config-list');
|
|
configDiv.innerHTML = '<div class="spinner-border spinner-border-sm"></div> Cargando...';
|
|
|
|
try {
|
|
const result = await makeRequest('/api/test_api.php?action=all');
|
|
|
|
if (result.success && result.data && Object.keys(result.data).length > 0) {
|
|
let html = '<div class="table-responsive"><table class="table table-sm"><thead><tr><th>Clave</th><th>Valor</th></tr></thead><tbody>';
|
|
|
|
for (const [key, config] of Object.entries(result.data)) {
|
|
const value = config.value || config;
|
|
const displayValue = typeof value === 'string' && value.length > 30
|
|
? value.substring(0, 30) + '...'
|
|
: value;
|
|
|
|
html += `<tr><td><code>${key}</code></td><td>${displayValue}</td></tr>`;
|
|
}
|
|
|
|
html += '</tbody></table></div>';
|
|
configDiv.innerHTML = html;
|
|
} else {
|
|
configDiv.innerHTML = '<div class="text-muted">No se encontraron configuraciones</div>';
|
|
}
|
|
} catch (error) {
|
|
configDiv.innerHTML = `<div class="alert alert-danger">Error: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
// Cargar estado del sistema
|
|
async function loadSystemStatus() {
|
|
const statusDiv = document.getElementById('system-status');
|
|
|
|
try {
|
|
const result = await makeRequest('/api/test_api.php?action=status');
|
|
|
|
if (result.success) {
|
|
const data = result.data;
|
|
statusDiv.innerHTML = `
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<p><strong>Configuraciones:</strong> ${data.total_configs}</p>
|
|
<p><strong>WhatsApp:</strong> ${data.whatsapp_configured ? '✅ Configurado' : '❌ Sin configurar'}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<p><strong>BD Migrada:</strong> ${data.database_migrated ? '✅ Sí' : '❌ No'}</p>
|
|
<p><strong>Instalación:</strong> ${data.installation_completed ? '✅ Completada' : '⚠️ Pendiente'}</p>
|
|
</div>
|
|
</div>
|
|
<small class="text-muted">Última actualización: ${data.server_time}</small>
|
|
`;
|
|
}
|
|
} catch (error) {
|
|
statusDiv.innerHTML = `<div class="alert alert-danger">Error cargando estado: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
// Inicialización
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
logDebug('Sistema de debug iniciado', 'info');
|
|
loadSystemStatus();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |