Añade modo "obra de varios días" en agendar/reagendar/nuevo servicio, sin tope de 4h
This commit is contained in:
137
calendario.html
137
calendario.html
@@ -234,7 +234,11 @@
|
||||
<div id="modalAgendaList" class="flex flex-wrap gap-2"></div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="flex items-center gap-2 bg-amber-50 border border-amber-100 rounded-xl px-3 py-2.5 cursor-pointer">
|
||||
<input type="checkbox" id="multiDayToggle" onchange="toggleMultiDay(this.checked)" class="w-4 h-4 rounded text-amber-600">
|
||||
<span class="text-[10px] font-black text-amber-700 uppercase tracking-widest">Obra / instalación de varios días</span>
|
||||
</label>
|
||||
<div id="singleDayDuration">
|
||||
<label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1 ml-1 text-left">Duración Estimada</label>
|
||||
<div class="relative text-left">
|
||||
<select id="durationInput" class="w-full bg-slate-50 border border-slate-200 p-3 rounded-xl text-xs font-bold text-slate-700 shadow-sm outline-none focus:border-blue-400 focus:ring-2 focus:ring-blue-100 transition-all appearance-none pr-8 cursor-pointer">
|
||||
@@ -249,11 +253,18 @@
|
||||
<option value="150">2 h 30 min</option>
|
||||
<option value="180">3 h</option>
|
||||
<option value="210">3 h 30 min</option>
|
||||
<option value="240">4 h (Máx)</option>
|
||||
<option value="240">4 h</option>
|
||||
</select>
|
||||
<i data-lucide="clock" class="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div id="multiDayFields" class="hidden">
|
||||
<label class="block text-[10px] font-black text-slate-500 uppercase tracking-widest mb-1 ml-1 text-left">Fin de la obra</label>
|
||||
<div class="grid grid-cols-2 gap-3 text-left">
|
||||
<input type="date" id="endDateInput" class="w-full bg-slate-50 border border-slate-200 p-3 rounded-xl text-xs font-bold text-slate-700 shadow-sm outline-none">
|
||||
<input type="time" id="endTimeInput" value="18:00" class="w-full bg-slate-50 border border-slate-200 p-3 rounded-xl text-xs font-bold text-slate-700 shadow-sm outline-none">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-2 text-left">
|
||||
<p class="text-[10px] font-black text-slate-800 uppercase ml-1 flex items-center gap-1.5 mb-1.5"><i data-lucide="arrow-right-left" class="w-4 h-4 text-blue-500"></i> Cambio de Estado</p>
|
||||
@@ -437,7 +448,11 @@
|
||||
<div id="nsAgendaList" class="flex flex-col gap-2 w-full"></div>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<label class="w-full flex items-center gap-2 bg-amber-50 border border-amber-100 rounded-xl px-3 py-2.5 cursor-pointer">
|
||||
<input type="checkbox" id="multiDayToggleNew" onchange="toggleMultiDayNew(this.checked)" class="w-4 h-4 rounded text-amber-600">
|
||||
<span class="text-[10px] font-black text-amber-700 uppercase tracking-widest">Obra / instalación de varios días</span>
|
||||
</label>
|
||||
<div class="w-full" id="singleDayDurationNew">
|
||||
<label class="label-modern">Tiempo Estimado</label>
|
||||
<div class="relative w-full">
|
||||
<select id="nsDuration" class="input-modern w-full appearance-none pr-8 cursor-pointer">
|
||||
@@ -453,6 +468,13 @@
|
||||
<i data-lucide="chevron-down" class="w-5 h-5 absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full hidden" id="multiDayFieldsNew">
|
||||
<label class="label-modern">Fin de la obra</label>
|
||||
<div class="grid grid-cols-2 gap-3 w-full">
|
||||
<input type="date" id="endDateInputNew" class="input-modern w-full">
|
||||
<input type="time" id="endTimeInputNew" value="18:00" class="input-modern w-full">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<label class="label-modern">Descripción del Trabajo</label>
|
||||
@@ -1044,8 +1066,23 @@
|
||||
|
||||
document.getElementById('dateInput').value = raw.scheduled_date || "";
|
||||
document.getElementById('timeInput').value = raw.scheduled_time || "";
|
||||
document.getElementById('durationInput').value = raw.duration_minutes || "60";
|
||||
|
||||
const existingDuration = parseInt(raw.duration_minutes || 60);
|
||||
// 🏗️ Si la duración guardada no cabe en el mismo día (p.ej. una obra de varios
|
||||
// días), abrimos el modal ya en modo "varios días" con la fecha/hora de fin
|
||||
// calculada, en vez de forzar el desplegable de horas (que solo llega a 4h).
|
||||
if (raw.scheduled_date && raw.scheduled_time && existingDuration > 240) {
|
||||
const startDT = new Date(`${raw.scheduled_date}T${raw.scheduled_time}`);
|
||||
const endDT = new Date(startDT.getTime() + existingDuration * 60000);
|
||||
document.getElementById('multiDayToggle').checked = true;
|
||||
document.getElementById('endDateInput').value = toISODate(endDT);
|
||||
document.getElementById('endTimeInput').value = `${String(endDT.getHours()).padStart(2,'0')}:${String(endDT.getMinutes()).padStart(2,'0')}`;
|
||||
document.getElementById('durationInput').value = "60";
|
||||
} else {
|
||||
document.getElementById('multiDayToggle').checked = false;
|
||||
document.getElementById('durationInput').value = existingDuration || "60";
|
||||
}
|
||||
toggleMultiDay(document.getElementById('multiDayToggle').checked);
|
||||
|
||||
const dbStat = raw.status_operativo;
|
||||
if(dbStat) document.getElementById('detStatusMap').value = dbStat;
|
||||
|
||||
@@ -1851,8 +1888,11 @@
|
||||
document.getElementById('nsAddress').value = "";
|
||||
document.getElementById('nsDesc').value = "";
|
||||
document.getElementById('nsTime').value = "";
|
||||
document.getElementById('nsDate').value = selectedDateStr;
|
||||
|
||||
document.getElementById('nsDate').value = selectedDateStr;
|
||||
document.getElementById('multiDayToggleNew').checked = false;
|
||||
document.getElementById('endDateInputNew').value = "";
|
||||
toggleMultiDayNew(false);
|
||||
|
||||
renderNewServiceAgenda(); // <-- Cargamos la ruta del día
|
||||
|
||||
const modal = document.getElementById('newServiceModal');
|
||||
@@ -1943,11 +1983,37 @@
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
// 🏗️ Obras/instalaciones de varios días: en vez de una duración en minutos que
|
||||
// encaja dentro del mismo día, dejamos indicar fecha+hora de fin (puede ser un día
|
||||
// distinto). Seguimos usando el mismo modelo de siempre (scheduled_date +
|
||||
// scheduled_time + duration_minutes): la duración se calcula como los minutos
|
||||
// reales entre el inicio y el fin.
|
||||
function toggleMultiDay(checked) {
|
||||
document.getElementById('singleDayDuration').classList.toggle('hidden', checked);
|
||||
document.getElementById('multiDayFields').classList.toggle('hidden', !checked);
|
||||
}
|
||||
function getAppointmentDuration() {
|
||||
if (!document.getElementById('multiDayToggle').checked) {
|
||||
return parseInt(document.getElementById('durationInput').value) || 60;
|
||||
}
|
||||
const date = document.getElementById('dateInput').value;
|
||||
const time = document.getElementById('timeInput').value;
|
||||
const endDate = document.getElementById('endDateInput').value;
|
||||
const endTime = document.getElementById('endTimeInput').value || "18:00";
|
||||
if (!date || !time || !endDate) return null;
|
||||
const start = new Date(`${date}T${time}`);
|
||||
const end = new Date(`${endDate}T${endTime}`);
|
||||
if (isNaN(start) || isNaN(end) || end <= start) return null;
|
||||
return Math.round((end - start) / 60000);
|
||||
}
|
||||
|
||||
async function saveAppointment() {
|
||||
const id = document.getElementById('detId').value;
|
||||
const date = document.getElementById('dateInput').value;
|
||||
const time = document.getElementById('timeInput').value;
|
||||
const duration = parseInt(document.getElementById('durationInput').value) || 60;
|
||||
const isMultiDay = document.getElementById('multiDayToggle').checked;
|
||||
const duration = getAppointmentDuration();
|
||||
if (isMultiDay && duration === null) return alert("Revisa las fechas/horas de inicio y fin de la obra.");
|
||||
let statusMap = document.getElementById('detStatusMap').value;
|
||||
|
||||
const selectedSt = systemStatuses.find(st => String(st.id) === String(statusMap));
|
||||
@@ -1957,20 +2023,18 @@
|
||||
|
||||
// 🛑 RADAR ANTI-SOLAPAMIENTO (PERMISIVO)
|
||||
if (date && time) {
|
||||
let [newH, newM] = time.split(':').map(Number);
|
||||
let newStartMin = newH * 60 + newM;
|
||||
let newEndMin = newStartMin + duration;
|
||||
const newStart = new Date(`${date}T${time}`);
|
||||
const newEnd = new Date(newStart.getTime() + duration * 60000);
|
||||
|
||||
const solapamiento = localServices.find(s => {
|
||||
if (String(s.id) === String(id)) return false;
|
||||
const sDate = String(s.raw_data.scheduled_date || "").trim();
|
||||
const sTime = String(s.raw_data.scheduled_time || "").trim();
|
||||
if (sDate === date && sTime && sTime.includes(':')) {
|
||||
let [sH, sM] = sTime.split(':').map(Number);
|
||||
let sDur = parseInt(s.raw_data.duration_minutes || 60);
|
||||
let sStartMin = sH * 60 + sM;
|
||||
let sEndMin = sStartMin + sDur;
|
||||
return (newStartMin < sEndMin && newEndMin > sStartMin);
|
||||
if (sDate && sTime && sTime.includes(':')) {
|
||||
const sStart = new Date(`${sDate}T${sTime}`);
|
||||
const sDur = parseInt(s.raw_data.duration_minutes || 60);
|
||||
const sEnd = new Date(sStart.getTime() + sDur * 60000);
|
||||
return (newStart < sEnd && newEnd > sStart);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
@@ -2004,28 +2068,43 @@
|
||||
finally { btn.innerHTML = originalContent; btn.disabled = false; safeLoadIcons(); }
|
||||
}
|
||||
|
||||
function toggleMultiDayNew(checked) {
|
||||
document.getElementById('singleDayDurationNew').classList.toggle('hidden', checked);
|
||||
document.getElementById('multiDayFieldsNew').classList.toggle('hidden', !checked);
|
||||
}
|
||||
|
||||
async function saveNewServiceApp(e) {
|
||||
e.preventDefault();
|
||||
|
||||
|
||||
const date = document.getElementById('nsDate').value;
|
||||
const time = document.getElementById('nsTime').value;
|
||||
const duration = parseInt(document.getElementById('nsDuration').value) || 60;
|
||||
let duration;
|
||||
if (document.getElementById('multiDayToggleNew').checked) {
|
||||
const endDate = document.getElementById('endDateInputNew').value;
|
||||
const endTime = document.getElementById('endTimeInputNew').value || "18:00";
|
||||
if (!date || !time || !endDate) { alert("Revisa las fechas/horas de inicio y fin de la obra."); return; }
|
||||
const start = new Date(`${date}T${time}`);
|
||||
const end = new Date(`${endDate}T${endTime}`);
|
||||
if (isNaN(start) || isNaN(end) || end <= start) { alert("Revisa las fechas/horas de inicio y fin de la obra."); return; }
|
||||
duration = Math.round((end - start) / 60000);
|
||||
} else {
|
||||
duration = parseInt(document.getElementById('nsDuration').value) || 60;
|
||||
}
|
||||
|
||||
// 🛑 RADAR ANTI-SOLAPAMIENTO EN CREACIÓN (PERMISIVO)
|
||||
// 🛑 RADAR ANTI-SOLAPAMIENTO EN CREACIÓN (PERMISIVO) — comparamos por fecha/hora
|
||||
// completas para detectar cruces aunque la obra ocupe varios días.
|
||||
if (date && time) {
|
||||
let [newH, newM] = time.split(':').map(Number);
|
||||
let newStartMin = newH * 60 + newM;
|
||||
let newEndMin = newStartMin + duration;
|
||||
const newStart = new Date(`${date}T${time}`);
|
||||
const newEnd = new Date(newStart.getTime() + duration * 60000);
|
||||
|
||||
const solapamiento = localServices.find(s => {
|
||||
const sDate = String(s.raw_data.scheduled_date || "").trim();
|
||||
const sTime = String(s.raw_data.scheduled_time || "").trim();
|
||||
if (sDate === date && sTime && sTime.includes(':')) {
|
||||
let [sH, sM] = sTime.split(':').map(Number);
|
||||
let sDur = parseInt(s.raw_data.duration_minutes || 60);
|
||||
let sStartMin = sH * 60 + sM;
|
||||
let sEndMin = sStartMin + sDur;
|
||||
return (newStartMin < sEndMin && newEndMin > sStartMin);
|
||||
if (sDate && sTime && sTime.includes(':')) {
|
||||
const sStart = new Date(`${sDate}T${sTime}`);
|
||||
const sDur = parseInt(s.raw_data.duration_minutes || 60);
|
||||
const sEnd = new Date(sStart.getTime() + sDur * 60000);
|
||||
return (newStart < sEnd && newEnd > sStart);
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user