209 lines
9.0 KiB
HTML
209 lines
9.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 Funciones Globales - WhatsApp Bot</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container py-5">
|
|
<div class="row">
|
|
<div class="col-md-10 mx-auto">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5><i class="fas fa-bug"></i> Test de Funciones Globales</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>Modales Disponibles:</h6>
|
|
<button class="btn btn-primary mb-2 d-block" onclick="testShowCreateTemplateModal()">
|
|
<i class="fas fa-plus"></i> Test Modal Plantilla
|
|
</button>
|
|
|
|
<button class="btn btn-success mb-2 d-block" onclick="testShowCreateMenuModal()">
|
|
<i class="fas fa-plus"></i> Test Modal Menú
|
|
</button>
|
|
|
|
<button class="btn btn-info mb-2 d-block" onclick="testBootstrap()">
|
|
<i class="fas fa-check"></i> Test Bootstrap
|
|
</button>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Debug Console:</h6>
|
|
<div id="console" class="bg-dark text-white p-3 rounded" style="height: 300px; overflow-y: auto; font-family: monospace; font-size: 0.8rem;">
|
|
<!-- Console output -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal de Plantilla -->
|
|
<div class="modal fade" id="createTemplateModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">📝 Test Modal Plantilla</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Este es el modal de plantillas funcionando correctamente.</p>
|
|
<form id="template-form">
|
|
<div class="mb-3">
|
|
<label class="form-label">Nombre de prueba</label>
|
|
<input type="text" class="form-control" placeholder="Plantilla de prueba">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal de Menú -->
|
|
<div class="modal fade" id="createMenuModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">📋 Test Modal Menú</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>Este es el modal de menús funcionando correctamente.</p>
|
|
<form id="menu-form">
|
|
<div class="mb-3">
|
|
<label class="form-label">Nombre del menú</label>
|
|
<input type="text" class="form-control" placeholder="Menú de prueba">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
const consoleDiv = document.getElementById('console');
|
|
|
|
function log(message, type = 'info') {
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
const colors = {
|
|
info: '#17a2b8',
|
|
success: '#28a745',
|
|
error: '#dc3545',
|
|
warning: '#ffc107'
|
|
};
|
|
|
|
consoleDiv.innerHTML += `<div style="color: ${colors[type]};">[${timestamp}] ${message}</div>`;
|
|
consoleDiv.scrollTop = consoleDiv.scrollHeight;
|
|
console.log(message);
|
|
}
|
|
|
|
function testBootstrap() {
|
|
log('🧪 Testing Bootstrap...', 'info');
|
|
if (typeof bootstrap !== 'undefined') {
|
|
log('✅ Bootstrap is available', 'success');
|
|
if (bootstrap.Modal) {
|
|
log('✅ Bootstrap.Modal is available', 'success');
|
|
} else {
|
|
log('❌ Bootstrap.Modal not found', 'error');
|
|
}
|
|
} else {
|
|
log('❌ Bootstrap not available', 'error');
|
|
}
|
|
}
|
|
|
|
// Definir las funciones globales aquí directamente
|
|
window.showCreateTemplateModal = function() {
|
|
log('🔵 showCreateTemplateModal called', 'info');
|
|
|
|
const modalElement = document.getElementById('createTemplateModal');
|
|
if (!modalElement) {
|
|
log('❌ Modal element not found', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
|
|
log('✅ Using Bootstrap modal', 'success');
|
|
const modal = new bootstrap.Modal(modalElement);
|
|
modal.show();
|
|
log('✅ Modal opened successfully', 'success');
|
|
} else {
|
|
log('⚠️ Using manual modal', 'warning');
|
|
modalElement.style.display = 'block';
|
|
modalElement.classList.add('show');
|
|
}
|
|
} catch (error) {
|
|
log('❌ Error: ' + error.message, 'error');
|
|
}
|
|
};
|
|
|
|
window.showCreateMenuModal = function() {
|
|
log('🔵 showCreateMenuModal called', 'info');
|
|
|
|
const modalElement = document.getElementById('createMenuModal');
|
|
if (!modalElement) {
|
|
log('❌ Menu modal element not found', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
|
|
log('✅ Using Bootstrap modal for menu', 'success');
|
|
const modal = new bootstrap.Modal(modalElement);
|
|
modal.show();
|
|
log('✅ Menu modal opened successfully', 'success');
|
|
} else {
|
|
log('⚠️ Using manual modal for menu', 'warning');
|
|
modalElement.style.display = 'block';
|
|
modalElement.classList.add('show');
|
|
}
|
|
} catch (error) {
|
|
log('❌ Error opening menu modal: ' + error.message, 'error');
|
|
}
|
|
};
|
|
|
|
function testShowCreateTemplateModal() {
|
|
log('🔧 Testing showCreateTemplateModal function...', 'info');
|
|
if (typeof showCreateTemplateModal === 'function') {
|
|
log('✅ Function exists, calling it...', 'success');
|
|
showCreateTemplateModal();
|
|
} else {
|
|
log('❌ Function not found!', 'error');
|
|
}
|
|
}
|
|
|
|
function testShowCreateMenuModal() {
|
|
log('🔧 Testing showCreateMenuModal function...', 'info');
|
|
if (typeof showCreateMenuModal === 'function') {
|
|
log('✅ Function exists, calling it...', 'success');
|
|
showCreateMenuModal();
|
|
} else {
|
|
log('❌ Function not found!', 'error');
|
|
}
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
log('📄 Page loaded', 'info');
|
|
testBootstrap();
|
|
|
|
// Test function availability
|
|
log('🔍 Checking function availability...', 'info');
|
|
log('showCreateTemplateModal: ' + (typeof showCreateTemplateModal), 'info');
|
|
log('showCreateMenuModal: ' + (typeof showCreateMenuModal), 'info');
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |