Actualizar pruebas-robot.html

pruebas-robot.html

@@ -20,18 +20,23 @@
     <div class="bg-white border-b border-slate-200 p-4 flex justify-between items-center shrink-0">
         <div class="flex items-center gap-3">
             <div class="w-10 h-10 bg-blue-600 text-white rounded-xl flex items-center justify-center shadow-lg"><i data-lucide="bot" class="w-5 h-5"></i></div>
-            <h1 class="text-xl font-black text-slate-800 tracking-tight">Laboratorio API</h1>
+            <h1 class="text-xl font-black text-slate-800 tracking-tight">Laboratorio API Robot</h1>
         </div>
-        <a href="servicios.html" class="text-xs font-bold text-slate-500 hover:text-blue-600 flex items-center gap-2"><i data-lucide="arrow-left" class="w-4 h-4"></i> Volver al Panel</a>
+        <a href="servicios.html" class="text-xs font-bold text-slate-500 hover:text-blue-600 flex items-center gap-2 bg-slate-100 px-4 py-2 rounded-lg transition-colors"><i data-lucide="arrow-left" class="w-4 h-4"></i> Volver al Panel</a>
     </div>
 
     <div class="flex-1 overflow-y-auto p-8 no-scrollbar">
         <div class="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8 fade-in">
             
-            <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-slate-200 h-fit">
+            <div class="bg-white p-8 rounded-[2rem] shadow-sm border border-slate-200 h-fit relative overflow-hidden">
-                <h2 class="font-black text-lg text-slate-800 mb-6 flex items-center gap-2 border-b border-slate-100 pb-4">
+                <div class="flex justify-between items-start mb-6 border-b border-slate-100 pb-4">
+                    <h2 class="font-black text-lg text-slate-800 flex items-center gap-2">
                         <i data-lucide="send" class="text-blue-500 w-5 h-5"></i> Lanzar Petición
                     </h2>
+                    <div id="credStatus" class="flex items-center gap-2 px-3 py-1.5 bg-slate-100 text-slate-500 border border-slate-200 rounded-full text-[9px] font-black uppercase tracking-widest">
+                        <i data-lucide="loader-2" class="w-3 h-3 animate-spin"></i> Comprobando acceso...
+                    </div>
+                </div>
                 
                 <form id="robotForm" class="space-y-5" onsubmit="sendToRobot(event)">
                     <div>
@@ -66,8 +71,8 @@
                         <label for="r_info" class="text-xs font-bold text-slate-600 cursor-pointer uppercase tracking-wider">Marcar "Informado al cliente"</label>
                     </div>
 
-                    <button type="submit" id="btnLaunch" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-black py-4 rounded-xl text-xs uppercase tracking-widest shadow-lg shadow-blue-500/30 transition-all active:scale-95 flex items-center justify-center gap-2 mt-4">
+                    <button type="submit" id="btnLaunch" disabled class="w-full bg-slate-900 text-white font-black py-4 rounded-xl text-xs uppercase tracking-widest shadow-lg transition-all flex items-center justify-center gap-2 mt-4 disabled:opacity-50 disabled:cursor-not-allowed">
-                        <i data-lucide="rocket" class="w-4 h-4"></i> Inyectar en DB Local
+                        <i data-lucide="rocket" class="w-4 h-4"></i> Esperando credenciales...
                     </button>
                 </form>
             </div>
@@ -77,7 +82,7 @@
                     <h2 class="font-black text-lg text-slate-100 flex items-center gap-2">
                         <i data-lucide="activity" class="text-emerald-400 w-5 h-5"></i> Monitor DB Server
                     </h2>
-                    <div class="flex items-center gap-2 px-3 py-1 bg-emerald-950 text-emerald-400 border border-emerald-800 rounded-full text-[10px] font-black uppercase">
+                    <div class="flex items-center gap-2 px-3 py-1 bg-emerald-950 text-emerald-400 border border-emerald-800 rounded-full text-[10px] font-black uppercase tracking-widest">
                         <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div> Polling Activo
                     </div>
                 </div>
@@ -90,27 +95,84 @@
         </div>
     </div>
 
+    <div id="loginBlocker" class="fixed inset-0 bg-slate-900 z-[200] flex flex-col items-center justify-center text-white hidden">
+        <i data-lucide="lock" class="w-16 h-16 text-rose-500 mb-4"></i>
+        <h2 class="text-2xl font-black tracking-tight mb-2">Acceso Denegado</h2>
+        <p class="text-slate-400 mb-6 text-center max-w-md">No se detecta ninguna sesión activa. Debes iniciar sesión en la plataforma principal para obtener permisos de seguridad.</p>
+        <a href="index.html" class="bg-blue-600 hover:bg-blue-500 px-6 py-3 rounded-xl font-bold uppercase tracking-widest text-xs transition-colors">Ir al Login</a>
+    </div>
+
     <script>
         const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1' 
             ? 'http://localhost:3000' 
             : 'https://integrarepara-api.integrarepara.es';
 
-        let knownJobs = {}; // Para guardar el estado de los trabajos y saber si cambian
+        let knownJobs = {}; 
 
-        document.addEventListener("DOMContentLoaded", () => {
+        document.addEventListener("DOMContentLoaded", async () => {
-            if (!localStorage.getItem("token")) {
-                alert("Debes iniciar sesión en la plataforma principal primero.");
-                window.location.href = "index.html";
-                return;
-            }
             lucide.createIcons();
             
-            // Arrancamos el monitor (consulta la API cada 3 segundos)
+            // 1. COMPROBAR SESIÓN
+            const token = localStorage.getItem("token");
+            if (!token) {
+                document.getElementById('loginBlocker').classList.remove('hidden');
+                return;
+            }
+            
+            // 2. COMPROBAR CREDENCIALES DE HOMESERVE EN LA BD
+            await checkHomeServeCredentials(token);
+
+            // 3. ARRANCAR EL MONITOR
             addLog("Conectado a la Base de Datos. Escuchando la cola...", "system");
             setInterval(fetchQueueStatus, 3000);
-            fetchQueueStatus(); // Primera llamada inmediata
+            fetchQueueStatus(); 
         });
 
+        // =====================================
+        // MAGIA: VERIFICAR CREDENCIALES
+        // =====================================
+        async function checkHomeServeCredentials(token) {
+            try {
+                const res = await fetch(`${API_URL}/providers/credentials`, {
+                    headers: { "Authorization": `Bearer ${token}` }
+                });
+                const data = await res.json();
+                
+                const credBadge = document.getElementById('credStatus');
+                const btnLaunch = document.getElementById('btnLaunch');
+                
+                if (data.ok && data.credentials) {
+                    // Buscamos si existe homeserve
+                    const hsCreds = data.credentials.find(c => c.provider === 'homeserve');
+                    
+                    if (hsCreds && hsCreds.status === 'active') {
+                        credBadge.className = "flex items-center gap-2 px-3 py-1.5 bg-emerald-50 text-emerald-600 border border-emerald-200 rounded-full text-[9px] font-black uppercase tracking-widest";
+                        credBadge.innerHTML = `<i data-lucide="check-circle" class="w-3 h-3"></i> H-Serve: ${hsCreds.username}`;
+                        
+                        btnLaunch.disabled = false;
+                        btnLaunch.className = "w-full bg-blue-600 hover:bg-blue-500 text-white font-black py-4 rounded-xl text-xs uppercase tracking-widest shadow-lg shadow-blue-500/30 transition-all active:scale-95 flex items-center justify-center gap-2 mt-4";
+                        btnLaunch.innerHTML = '<i data-lucide="rocket" class="w-4 h-4"></i> Inyectar en DB Local';
+                        
+                    } else {
+                        credBadge.className = "flex items-center gap-2 px-3 py-1.5 bg-rose-50 text-rose-600 border border-rose-200 rounded-full text-[9px] font-black uppercase tracking-widest";
+                        credBadge.innerHTML = `<i data-lucide="alert-triangle" class="w-3 h-3"></i> Faltan Credenciales`;
+                        
+                        addLog("⚠️ ATENCIÓN: El robot no podrá funcionar porque no has configurado tu usuario y contraseña de HomeServe en la pestaña de Proveedores.", "warning");
+                        
+                        btnLaunch.disabled = false; // Le dejamos inyectar, pero le avisamos.
+                        btnLaunch.className = "w-full bg-rose-600 hover:bg-rose-500 text-white font-black py-4 rounded-xl text-xs uppercase tracking-widest shadow-lg shadow-rose-500/30 transition-all active:scale-95 flex items-center justify-center gap-2 mt-4";
+                        btnLaunch.innerHTML = '<i data-lucide="rocket" class="w-4 h-4"></i> Inyectar de todos modos';
+                    }
+                }
+                lucide.createIcons();
+            } catch (e) {
+                console.error(e);
+            }
+        }
+
+        // =====================================
+        // LÓGICA DEL MONITOR Y COLA
+        // =====================================
         function addLog(message, type = "info") {
             const container = document.getElementById('logContainer');
             const time = new Date().toLocaleTimeString();
@@ -135,8 +197,9 @@
             e.preventDefault();
 
             const btn = document.getElementById('btnLaunch');
+            const originalContent = btn.innerHTML;
             btn.disabled = true;
-            btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...';
+            btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando en cola...';
             lucide.createIcons();
 
             const payload = {
@@ -169,7 +232,7 @@
                 addLog(`Error de red al enviar petición: ${err.message}`, "error");
             } finally {
                 btn.disabled = false;
-                btn.innerHTML = '<i data-lucide="rocket" class="w-4 h-4"></i> Inyectar en DB Local';
+                btn.innerHTML = originalContent;
                 lucide.createIcons();
             }
         }
@@ -182,26 +245,19 @@
                 const data = await res.json();
 
                 if (data.ok && data.jobs) {
-                    // Ordenamos de más antiguo a más nuevo para que los logs salgan en orden
                     const jobs = data.jobs.reverse();
                     
                     jobs.forEach(job => {
                         const prevStatus = knownJobs[job.id];
                         
-                        // Si el estado ha cambiado, lo logueamos
                         if (prevStatus !== job.status) {
                             
-                            // Si es la primera vez que lo vemos, y no está PENDING, no inundamos el log
-                            // a menos que acabe de cambiar.
                             if (!prevStatus && job.status !== 'PENDING') {
                                 knownJobs[job.id] = job.status;
                                 return; 
                             }
 
-                            if (job.status === 'PENDING') {
+                            if (job.status === 'RUNNING') {
-                                // Lo obviamos porque el POST ya lanza el log de 'encolado'
-                            } 
-                            else if (job.status === 'RUNNING') {
                                 addLog(`Job [#${job.id}] - 🏃‍♂️ El robot ha arrancado el Siniestro ${job.service_number}...`, "system");
                             } 
                             else if (job.status === 'DONE') {
@@ -215,9 +271,7 @@
                         }
                     });
                 }
-            } catch (e) {
+            } catch (e) {}
-                // Silencioso para no ensuciar el log si parpadea la red
-            }
         }
     </script>
 </body>