Actualizar calendario.html

calendario.html

@@ -57,12 +57,12 @@
             <a href="menu.html" class="w-10 h-10 shrink-0 bg-slate-50 rounded-full flex items-center justify-center text-slate-600 border border-slate-200 active:scale-95 transition-transform">
                 <i data-lucide="arrow-left" class="w-5 h-5"></i>
             </a>
-            <div class="flex-1 min-w-0">
+            <div class="flex-1 min-w-0 text-left">
                 <p class="text-[10px] font-black text-primary-dynamic uppercase tracking-widest mb-0.5 truncate" id="monthYearDisplay">Cargando...</p>
-               <div class="flex items-center gap-2">
+                <div class="flex items-center gap-2">
-    <h1 class="text-xl font-black tracking-tight text-slate-900 leading-none truncate">Mi Agenda</h1>
+                    <h1 class="text-xl font-black tracking-tight text-slate-900 leading-none truncate">Mi Agenda</h1>
-    <div id="topNotificationBadge" class="hidden bg-red-500 text-white text-[10px] font-black px-1.5 py-0.5 rounded-full animate-bounce shadow-sm border border-white">!</div>
+                    <div id="topNotificationBadge" class="hidden bg-red-500 text-white text-[10px] font-black px-1.5 py-0.5 rounded-full animate-bounce shadow-sm border border-white">!</div>
-</div>
+                </div>
             </div>
             <div class="flex gap-1 shrink-0">
                 <button onclick="changeWeek(-1)" class="w-10 h-10 bg-white rounded-full flex items-center justify-center text-slate-600 border border-slate-200 active:bg-slate-50 shadow-sm"><i data-lucide="chevron-left" class="w-5 h-5"></i></button>
@@ -268,6 +268,7 @@
         let systemGuilds = [];
         let currentWeekStart = new Date(); 
         let selectedDateStr = "";            
+        let activeNotifications = []; // Variable global para guardar IDs con mensajes
 
         async function applyTheme() {
             try {
@@ -324,8 +325,32 @@
             loadStatuses();
             await loadGuilds(); 
             refreshData();
+
+            // Comprobar notificaciones al cargar y cada 30 segundos
+            checkNotifications();
+            setInterval(checkNotifications, 30000);
         });
 
+        async function checkNotifications() {
+            try {
+                const res = await fetch(`${API_URL}/worker/notifications`, {
+                    headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` }
+                });
+                const data = await res.json();
+                if (data.ok) {
+                    activeNotifications = data.serviceIds;
+                    const badge = document.getElementById('topNotificationBadge');
+                    if (data.unreadCount > 0) {
+                        badge.classList.remove('hidden');
+                        badge.innerText = data.unreadCount;
+                    } else {
+                        badge.classList.add('hidden');
+                    }
+                    renderServices(); // Refrescamos para pintar los iconos en las tarjetas
+                }
+            } catch (e) {}
+        }
+
         async function loadGuilds() {
             try {
                 const res = await fetch(`${API_URL}/guilds`, { headers: { "Authorization": `Bearer ${localStorage.getItem("token")}` } });
@@ -449,6 +474,10 @@
             container.innerHTML = dayServices.map(s => {
                 const raw = s.raw_data || {};
                 const time = raw.scheduled_time || "--:--";
+
+                // ¿Tiene este siniestro un mensaje nuevo?
+                const hasNewMessage = activeNotifications.includes(s.id);
+
                 if (s.provider === 'SYSTEM_BLOCK') {
                     return `<div class="bg-blue-50/50 p-5 rounded-3xl border border-slate-200 flex gap-4"><div class="flex flex-col items-center justify-center border-r border-slate-200 pr-4 shrink-0"><i data-lucide="lock" class="w-5 h-5 text-primary-dynamic"></i><span class="font-black text-primary-dynamic text-sm mt-1">${time}</span></div><div class="min-w-0 flex-1"><h3 class="font-black text-primary-dynamic text-sm uppercase">BLOQUEADO</h3><p class="text-[10px] font-bold text-slate-400 mt-1 uppercase">${raw["Descripción"] || ""}</p></div></div>`;
                 }
@@ -473,7 +502,14 @@
                 const cMap = colorMap[stColor] || colorMap['gray'];
 
                 return `
-                <div onclick="openService(${s.id})" class="bg-white p-6 rounded-[2.5rem] border border-slate-200 shadow-sm active:scale-95 transition-transform flex gap-4 relative overflow-hidden text-left">
+                <div onclick="openService(${s.id})" class="bg-white p-6 rounded-[2.5rem] border ${hasNewMessage ? 'border-blue-400 ring-2 ring-blue-50' : 'border-slate-200'} shadow-sm active:scale-95 transition-transform flex gap-4 relative overflow-hidden text-left">
+                    
+                    ${hasNewMessage ? `
+                        <div class="absolute top-2 right-12 flex items-center gap-1 bg-blue-600 text-white text-[8px] font-black px-2 py-1 rounded-full shadow-lg animate-pulse">
+                            <i data-lucide="message-square" class="w-2.5 h-2.5"></i> MENSAJE
+                        </div>
+                    ` : ''}
+
                     ${s.is_urgent ? '<div class="absolute top-0 right-0 bg-primary-dynamic text-white text-[8px] font-black px-3 py-1.5 rounded-bl-xl uppercase tracking-widest z-10">Urgente</div>' : ''}
                     <div class="flex flex-col items-center justify-center border-r border-slate-100 pr-4 shrink-0 min-w-[70px]">
                         <div class="${cMap.bg} ${cMap.text} p-2 rounded-xl mb-1 ${cMap.border} border shadow-sm">
@@ -825,7 +861,6 @@
                     }
 
                     data.messages.forEach(msg => {
-                        // Ocultar notas internas si por alguna razón el server las mandara
                         if (msg.is_internal) return;
 
                         const isMe = msg.sender_role === 'operario' || msg.sender_role === 'operario_cerrado';