diff --git a/calendario.html b/calendario.html index 0744d09..ee1b2c7 100644 --- a/calendario.html +++ b/calendario.html @@ -16,21 +16,27 @@ /* Estilos para el selector de días */ .day-card { transition: all 0.2s; } - .day-active { background-color: #2563eb; color: white; border-color: #2563eb; transform: scale(1.05); shadow: 0 10px 15px -3px rgba(37,99,235,0.4); } + .day-active { background-color: #2563eb; color: white; border-color: #2563eb; transform: scale(1.05); box-shadow: 0 10px 15px -3px rgba(37,99,235,0.4); } .day-inactive { background-color: white; color: #64748b; border-color: #e2e8f0; }
-
-
-

Planificación

-

Mi Calendario

-
- +
+ + +
+

Cargando...

+

Mi Agenda

+
+ +
+ + +
@@ -143,7 +149,25 @@ let localServices = []; let systemStatuses = []; - let selectedDateStr = ""; + + let currentWeekStart = new Date(); // Lunes de la semana que estamos viendo + let selectedDateStr = ""; // Día exacto que el usuario ha pinchado + + // Formateador seguro a YYYY-MM-DD + function toISODate(dateObj) { + const y = dateObj.getFullYear(); + const m = String(dateObj.getMonth() + 1).padStart(2, '0'); + const d = String(dateObj.getDate()).padStart(2, '0'); + return `${y}-${m}-${d}`; + } + + // Obtener el Lunes de cualquier fecha + function getMonday(d) { + const date = new Date(d); + const day = date.getDay(); + const diff = date.getDate() - day + (day === 0 ? -6 : 1); // Ajuste si es Domingo (0) + return new Date(date.setDate(diff)); + } document.addEventListener("DOMContentLoaded", () => { if (!localStorage.getItem("token") || localStorage.getItem("role") !== 'operario') { @@ -152,29 +176,31 @@ lucide.createIcons(); - // Establecer el día de hoy por defecto (YYYY-MM-DD) + // Iniciamos con la semana actual y el día de hoy seleccionado const today = new Date(); - // Ajuste de zona horaria manual simple - selectedDateStr = new Date(today.getTime() - (today.getTimezoneOffset() * 60000)).toISOString().split('T')[0]; + currentWeekStart = getMonday(today); + selectedDateStr = toISODate(today); buildWeekCalendar(); loadStatuses(); refreshData(); }); - // 1. CONSTRUIR EL CALENDARIO SUPERIOR (7 DÍAS) + // 1. CONSTRUIR EL CALENDARIO SUPERIOR (Lunes a Domingo) function buildWeekCalendar() { const strip = document.getElementById('weekStrip'); strip.innerHTML = ''; - const today = new Date(); + // Actualizar etiqueta del mes arriba + const monthName = currentWeekStart.toLocaleDateString('es-ES', { month: 'long', year: 'numeric' }); + document.getElementById('monthYearDisplay').innerText = monthName; - // Generar hoy + 6 días próximos + // Generar 7 días desde el Lunes for(let i = 0; i < 7; i++) { - let d = new Date(today); - d.setDate(today.getDate() + i); + let d = new Date(currentWeekStart); + d.setDate(currentWeekStart.getDate() + i); - const isoDate = new Date(d.getTime() - (d.getTimezoneOffset() * 60000)).toISOString().split('T')[0]; + const isoDate = toISODate(d); const dayName = d.toLocaleDateString('es-ES', { weekday: 'short' }).replace('.', ''); const dayNum = d.getDate(); @@ -185,19 +211,32 @@ `; } + // Asegurarnos de pintar los puntitos rojos en la nueva semana si ya hay datos + if(localServices.length > 0) updateBadges(); + } + + // Función para los botones de < y > de las semanas + function changeWeek(offsetWeeks) { + // Sumamos o restamos 7 días al Lunes actual + currentWeekStart.setDate(currentWeekStart.getDate() + (offsetWeeks * 7)); + + // Auto-seleccionar el Lunes de esa nueva semana + selectedDateStr = toISODate(currentWeekStart); + + buildWeekCalendar(); + renderServices(); } function selectDate(isoDate) { selectedDateStr = isoDate; - buildWeekCalendar(); // Re-render para aplicar estilos visuales - renderServices(); // Filtrar las tarjetas por el día - updateBadges(); // Actualizar puntitos + buildWeekCalendar(); // Re-render visual de la tira superior + renderServices(); // Filtrar las tarjetas de abajo } async function loadStatuses() { @@ -219,13 +258,14 @@ const data = await res.json(); if (data.ok) { - // Filtramos y nos quedamos SOLO con los que tienen FECHA (son los del calendario) + // Filtramos: Solo servicios que NO sean bloqueos y que SÍ tengan fecha localServices = data.services.filter(s => { const raw = s.raw_data || {}; - return s.provider !== 'SYSTEM_BLOCK' && raw.scheduled_date; + const hasDate = raw.scheduled_date && raw.scheduled_date.trim() !== ""; + return s.provider !== 'SYSTEM_BLOCK' && hasDate; }); - updateBadges(); + buildWeekCalendar(); // Actualiza puntitos de la semana vista renderServices(); } } catch (e) { @@ -237,14 +277,14 @@ } } - // Poner el puntito rojo bajo los días que tengan trabajo + // Poner el puntito rojo bajo los días que tengan trabajo en la semana actual function updateBadges() { - // Limpiar todos primero + // Ocultar todos primero document.querySelectorAll('[id^="badge-"]').forEach(el => el.classList.add('hidden')); const counts = {}; localServices.forEach(s => { - const date = s.raw_data.scheduled_date; + const date = (s.raw_data.scheduled_date || "").trim(); if(date) counts[date] = (counts[date] || 0) + 1; }); @@ -256,10 +296,15 @@ function renderServices() { const container = document.getElementById('servicesList'); - document.getElementById('dayTitle').innerText = `Servicios del ${selectedDateStr.split('-').reverse().join('/')}`; + // Formatear fecha para el título (DD/MM/YYYY) + const displayDate = selectedDateStr.split('-').reverse().join('/'); + document.getElementById('dayTitle').innerText = `Servicios del ${displayDate}`; - // Filtrar servicios solo para el día seleccionado - const dayServices = localServices.filter(s => s.raw_data.scheduled_date === selectedDateStr); + // Filtrar servicios exactos para el día seleccionado + const dayServices = localServices.filter(s => { + const d = (s.raw_data.scheduled_date || "").trim(); + return d === selectedDateStr; + }); // Ordenar por hora dayServices.sort((a, b) => {