203 lines
8.0 KiB
HTML
203 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Test JavaScript Menús</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; max-width: 1000px; margin: 0 auto; padding: 20px; }
|
|
table { width: 100%; border-collapse: collapse; margin: 20px 0; }
|
|
th, td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; }
|
|
th { background-color: #f5f5f5; }
|
|
.btn { padding: 5px 10px; margin: 2px; border: none; border-radius: 3px; cursor: pointer; }
|
|
.btn-outline-primary { border: 1px solid #0066cc; color: #0066cc; background: white; }
|
|
.btn-outline-info { border: 1px solid #17a2b8; color: #17a2b8; background: white; }
|
|
.btn-outline-danger { border: 1px solid #dc3545; color: #dc3545; background: white; }
|
|
.badge { padding: 4px 8px; border-radius: 4px; font-size: 0.8em; }
|
|
.bg-success { background-color: #28a745; color: white; }
|
|
.bg-secondary { background-color: #6c757d; color: white; }
|
|
.me-1 { margin-right: 5px; }
|
|
.text-center { text-align: center; }
|
|
.text-muted { color: #6c757d; }
|
|
#result { margin: 20px 0; padding: 15px; background: #f8f9fa; border-radius: 5px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🧪 Test JavaScript - Lista de Menús</h1>
|
|
|
|
<button onclick="testMenusDisplay()">📋 Cargar y Mostrar Menús</button>
|
|
<button onclick="clearTable()">🧽 Limpiar Tabla</button>
|
|
|
|
<div id="result"></div>
|
|
|
|
<h2>📋 Tabla de Menús</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Nombre</th>
|
|
<th>Clave</th>
|
|
<th>Descripción</th>
|
|
<th>Estado</th>
|
|
<th>Opciones</th>
|
|
<th>Fecha Creación</th>
|
|
<th>Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="menus-table">
|
|
<tr><td colspan="7" class="text-center text-muted">Haz clic en "Cargar y Mostrar Menús" para ver los datos</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<script>
|
|
// Simular la funcionalidad de WhatsApp Manager
|
|
class MenuTester {
|
|
constructor() {
|
|
this.apiBaseUrl = './api/';
|
|
}
|
|
|
|
log(message, type = 'info') {
|
|
console.log(`[${type.toUpperCase()}] ${message}`);
|
|
}
|
|
|
|
truncateText(text, length) {
|
|
if (!text) return '';
|
|
return text.length > length ? text.substring(0, length) + '...' : text;
|
|
}
|
|
|
|
async apiCall(endpoint, options = {}) {
|
|
const url = `${this.apiBaseUrl}${endpoint}`;
|
|
|
|
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
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
return data;
|
|
|
|
} catch (error) {
|
|
throw error;
|
|
}
|
|
}
|
|
|
|
updateMenusList(menus) {
|
|
const container = document.getElementById('menus-table');
|
|
if (!container) {
|
|
console.error('Contenedor menus-table no encontrado');
|
|
return;
|
|
}
|
|
|
|
if (menus.length === 0) {
|
|
container.innerHTML = '<tr><td colspan="7" class="text-center text-muted">No hay menús configurados</td></tr>';
|
|
return;
|
|
}
|
|
|
|
let html = '';
|
|
|
|
menus.forEach(menu => {
|
|
const createdDate = new Date(menu.created_at || Date.now());
|
|
const formatDate = createdDate.toLocaleDateString() + ' ' + createdDate.toLocaleTimeString('es', { hour: '2-digit', minute: '2-digit' });
|
|
|
|
html += `
|
|
<tr>
|
|
<td><strong>${menu.menu_name || menu.name || 'Sin nombre'}</strong></td>
|
|
<td><code>${menu.menu_key || menu.name || 'sin-clave'}</code></td>
|
|
<td>${this.truncateText(menu.description || '', 50)}</td>
|
|
<td><span class="badge bg-${menu.status === 'active' ? 'success' : 'secondary'}">${menu.status || 'active'}</span></td>
|
|
<td>${menu.options_count || 0} opciones</td>
|
|
<td>${formatDate}</td>
|
|
<td>
|
|
<button class="btn btn-outline-primary me-1" onclick="editMenu(${menu.id})" title="Editar">
|
|
📝
|
|
</button>
|
|
<button class="btn btn-outline-info me-1" onclick="viewMenuOptions(${menu.id})" title="Ver opciones">
|
|
📋
|
|
</button>
|
|
<button class="btn btn-outline-danger" onclick="deleteMenu(${menu.id})" title="Eliminar">
|
|
🗑️
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
container.innerHTML = html;
|
|
console.log(`✅ Tabla actualizada con ${menus.length} menús`);
|
|
}
|
|
|
|
async loadMenus() {
|
|
try {
|
|
const response = await this.apiCall('get_menus.php');
|
|
|
|
document.getElementById('result').innerHTML = `
|
|
<h3>📡 Respuesta de API:</h3>
|
|
<pre>${JSON.stringify(response, null, 2)}</pre>
|
|
`;
|
|
|
|
if (response && response.success) {
|
|
this.updateMenusList(response.data || []);
|
|
return response.data;
|
|
} else if (response && Array.isArray(response)) {
|
|
this.updateMenusList(response);
|
|
return response;
|
|
} else {
|
|
throw new Error('Formato de respuesta inválido');
|
|
}
|
|
|
|
} catch (error) {
|
|
document.getElementById('result').innerHTML = `
|
|
<h3>❌ Error:</h3>
|
|
<p style="color: red;">${error.message}</p>
|
|
`;
|
|
console.error('Error cargando menús:', error);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Instanciar el tester
|
|
const menuTester = new MenuTester();
|
|
|
|
// Funciones globales
|
|
function testMenusDisplay() {
|
|
console.log('🧪 Iniciando test de carga de menús...');
|
|
menuTester.loadMenus();
|
|
}
|
|
|
|
function clearTable() {
|
|
const container = document.getElementById('menus-table');
|
|
if (container) {
|
|
container.innerHTML = '<tr><td colspan="7" class="text-center text-muted">Tabla limpiada</td></tr>';
|
|
}
|
|
document.getElementById('result').innerHTML = '';
|
|
}
|
|
|
|
function editMenu(id) {
|
|
alert(`Editar menú ID: ${id}`);
|
|
}
|
|
|
|
function viewMenuOptions(id) {
|
|
alert(`Ver opciones del menú ID: ${id}`);
|
|
}
|
|
|
|
function deleteMenu(id) {
|
|
if (confirm(`¿Eliminar menú ID: ${id}?`)) {
|
|
alert(`Eliminando menú ID: ${id}`);
|
|
}
|
|
}
|
|
|
|
// Auto-cargar al inicio
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('✅ Página cargada, ready para test');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |