marsalva/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Actualizar configuracion.html

Browse Source
This commit is contained in:
marsalva
2026-02-16 22:37:29 +00:00
parent 938786e11c
commit 79d8aaee1f
1 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
configuracion.html
View File

@@ -11,6 +11,11 @@
.fade-in { animation: fadeIn 0.3s ease-in-out; } .fade-in { animation: fadeIn 0.3s ease-in-out; }
.scroller::-webkit-scrollbar { width: 6px; } .scroller::-webkit-scrollbar { width: 6px; }
.scroller::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; } .scroller::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 4px; }
/* Toggle Switch CSS */
.toggle-checkbox:checked { right: 0; border-color: #2563eb; }
.toggle-checkbox:checked + .toggle-label { background-color: #2563eb; }
.toggle-checkbox { right: 0; z-index: 1; border-color: #e2e8f0; transition: all 0.3s; }
.toggle-label { background-color: #e2e8f0; transition: all 0.3s; }
</style> </style>
</head> </head>
<body class="bg-gray-50 text-gray-800 font-sans h-screen overflow-hidden flex"> <body class="bg-gray-50 text-gray-800 font-sans h-screen overflow-hidden flex">
@@ -86,16 +91,31 @@
</div> </div>
<h2 class="text-2xl font-bold text-gray-800 mb-2">Conexión con WhatsApp</h2> <h2 class="text-2xl font-bold text-gray-800 mb-2">Conexión con WhatsApp</h2>
<p class="text-gray-500 mb-8 max-w-md">Escanea el código QR para vincular tu número de empresa.</p> <p class="text-gray-500 mb-8 max-w-md">Escanea el código QR para vincular tu número de empresa.</p>
<div id="waStatusContainer" class="w-full flex flex-col items-center justify-center min-h-[250px] bg-gray-50 rounded-xl border-2 border-dashed border-gray-200 p-6 mb-6"> <div id="waStatusContainer" class="w-full flex flex-col items-center justify-center min-h-[250px] bg-gray-50 rounded-xl border-2 border-dashed border-gray-200 p-6 mb-6">
<div class="animate-pulse flex flex-col items-center"> <div class="animate-pulse flex flex-col items-center">
<div class="w-10 h-10 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mb-4"></div> <div class="w-10 h-10 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mb-4"></div>
<span class="text-sm font-bold text-gray-400">Iniciando instancia segura...</span> <span class="text-sm font-bold text-gray-400">Iniciando instancia segura...</span>
</div> </div>
</div> </div>
<button onclick="checkWhatsappStatus()" class="bg-slate-800 hover:bg-slate-700 text-white font-bold py-3 px-8 rounded-xl transition shadow-lg flex items-center gap-2">
<button onclick="checkWhatsappStatus()" class="bg-slate-800 hover:bg-slate-700 text-white font-bold py-3 px-8 rounded-xl transition shadow-lg flex items-center gap-2 mb-8">
<i data-lucide="refresh-cw" class="w-4 h-4"></i> Actualizar Estado <i data-lucide="refresh-cw" class="w-4 h-4"></i> Actualizar Estado
</button> </button>
<p class="text-[10px] text-gray-400 mt-6">Instancia segura gestionada automáticamente por el servidor.</p>
<div class="w-full border-t border-gray-100 pt-6 mt-2 flex items-center justify-between px-4">
<div class="text-left">
<h4 class="font-bold text-gray-800 flex items-center gap-2">
<i data-lucide="bot" class="w-4 h-4 text-blue-600"></i> Modo "Escribiendo..."
</h4>
<p class="text-xs text-gray-500 mt-1 max-w-[250px]">Simula que un humano está tecleando el mensaje. Si lo desactivas, los mensajes llegarán de forma instantánea.</p>
</div>
<div class="relative inline-block w-12 mr-2 align-middle select-none transition duration-200 ease-in">
<input type="checkbox" name="toggle" id="waDelayToggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
<label for="waDelayToggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -203,6 +223,17 @@
if (!localStorage.getItem("token")) window.location.href = "index.html"; if (!localStorage.getItem("token")) window.location.href = "index.html";
showTab('templates'); showTab('templates');
loadTemplates(); loadTemplates();
// Cargar preferencia de delay de WhatsApp
const toggle = document.getElementById('waDelayToggle');
const savedSetting = localStorage.getItem('wa_delay_enabled');
// Por defecto activo si no hay ajuste guardado
toggle.checked = savedSetting === null ? true : savedSetting === 'true';
toggle.addEventListener('change', (e) => {
localStorage.setItem('wa_delay_enabled', e.target.checked);
showToast(`Modo "Escribiendo" ${e.target.checked ? 'Activado' : 'Desactivado'}`);
});
}); });
function showTab(tabId) { function showTab(tabId) {
@@ -219,10 +250,9 @@
if(tabId === 'others') { loadCompanies(); loadStatusesConfig(); } if(tabId === 'others') { loadCompanies(); loadStatusesConfig(); }
if(tabId === 'whatsapp') { checkWhatsappStatus(); } if(tabId === 'whatsapp') { checkWhatsappStatus(); }
if(tabId === 'providers') { loadProviderCredentials(); } // Cargar credenciales if(tabId === 'providers') { loadProviderCredentials(); }
} }
// --- GESTIÓN DE PROVEEDORES (NUEVO) ---
async function loadProviderCredentials() { async function loadProviderCredentials() {
try { try {
const res = await fetch(`${API_URL}/providers/credentials`, { const res = await fetch(`${API_URL}/providers/credentials`, {
@@ -235,7 +265,6 @@
const inputUser = document.getElementById(`user_${cred.provider}`); const inputUser = document.getElementById(`user_${cred.provider}`);
const inputPass = document.getElementById(`pass_${cred.provider}`); const inputPass = document.getElementById(`pass_${cred.provider}`);
if(inputUser) inputUser.value = cred.username; if(inputUser) inputUser.value = cred.username;
// No rellenamos la contraseña por seguridad, solo el usuario
if(inputPass) inputPass.placeholder = "•••••••• (Guardada)"; if(inputPass) inputPass.placeholder = "•••••••• (Guardada)";
}); });
} }
@@ -267,7 +296,6 @@
} catch(e) { showToast("Error de conexión", true); } } catch(e) { showToast("Error de conexión", true); }
} }
// --- WHATSAPP STATUS (AUTOMÁTICO) ---
async function checkWhatsappStatus() { async function checkWhatsappStatus() {
const container = document.getElementById('waStatusContainer'); const container = document.getElementById('waStatusContainer');
container.innerHTML = `<div class="flex flex-col items-center animate-pulse"><i data-lucide="loader-2" class="w-8 h-8 text-blue-500 animate-spin mb-3"></i><span class="text-sm text-blue-600 font-medium">Verificando instancia...</span></div>`; container.innerHTML = `<div class="flex flex-col items-center animate-pulse"><i data-lucide="loader-2" class="w-8 h-8 text-blue-500 animate-spin mb-3"></i><span class="text-sm text-blue-600 font-medium">Verificando instancia...</span></div>`;
@@ -292,7 +320,6 @@
lucide.createIcons(); lucide.createIcons();
} }
// --- GESTIÓN DE PLANTILLAS ---
async function loadTemplates() { async function loadTemplates() {
try { try {
const res = await fetch(`${API_URL}/templates`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } }); const res = await fetch(`${API_URL}/templates`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
@@ -338,7 +365,6 @@
} catch(e) { showToast("Error", true); } } catch(e) { showToast("Error", true); }
} }
// --- GESTIÓN DE COMPAÑÍAS Y ESTADOS (MANTENIDO) ---
async function loadCompanies() { async function loadCompanies() {
const list = document.getElementById('listCompanies'); const list = document.getElementById('listCompanies');
list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-10">Cargando...</p>'; list.innerHTML = '<p class="text-center text-xs text-gray-400 mt-10">Cargando...</p>';