Actualizar agenda.html

This commit is contained in:
2026-02-22 22:02:14 +00:00
parent d107a4c8fa
commit 51a454671d

View File

@@ -161,17 +161,23 @@
<div>
<label class="block text-xs font-black text-slate-600 uppercase tracking-widest mb-3">Duración estimada del trabajo</label>
<div class="grid grid-cols-3 gap-2">
<button type="button" onclick="setDuration(15, this)" class="dur-btn bg-white border-2 border-slate-200 text-slate-600 font-bold py-2 rounded-xl transition-all hover:bg-slate-50">15 min</button>
<button type="button" onclick="setDuration(30, this)" class="dur-btn bg-white border-2 border-slate-200 text-slate-600 font-bold py-2 rounded-xl transition-all hover:bg-slate-50">30 min</button>
<button type="button" onclick="setDuration(45, this)" class="dur-btn bg-white border-2 border-slate-200 text-slate-600 font-bold py-2 rounded-xl transition-all hover:bg-slate-50">45 min</button>
<button type="button" onclick="setDuration(60, this)" class="dur-btn bg-blue-600 border-2 border-blue-600 text-white font-bold py-2 rounded-xl transition-all shadow-md selected">1 hora</button>
<button type="button" onclick="setDuration(90, this)" class="dur-btn bg-white border-2 border-slate-200 text-slate-600 font-bold py-2 rounded-xl transition-all hover:bg-slate-50">1.5 horas</button>
<button type="button" onclick="setDuration(120, this)" class="dur-btn bg-white border-2 border-slate-200 text-slate-600 font-bold py-2 rounded-xl transition-all hover:bg-slate-50">2 horas</button>
<button type="button" onclick="setDuration(180, this)" class="dur-btn bg-white border-2 border-slate-200 text-slate-600 font-bold py-2 rounded-xl transition-all hover:bg-slate-50">3 horas</button>
<button type="button" onclick="setDuration(240, this)" class="dur-btn bg-white border-2 border-slate-200 text-slate-600 font-bold py-2 rounded-xl transition-all hover:bg-slate-50">4 horas</button>
<div class="relative">
<select id="aprvDuration" class="w-full bg-slate-50 border border-slate-200 text-sm font-bold text-slate-700 p-3 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 appearance-none pr-8 cursor-pointer">
<option value="15">15 minutos</option>
<option value="30">30 minutos</option>
<option value="45">45 minutos</option>
<option value="60" selected>1 hora</option>
<option value="75">1 hora 15 min</option>
<option value="90">1 hora 30 min</option>
<option value="105">1 hora 45 min</option>
<option value="120">2 horas</option>
<option value="150">2 horas 30 min</option>
<option value="180">3 horas</option>
<option value="210">3 horas 30 min</option>
<option value="240">4 horas (Máx)</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>
<input type="hidden" id="aprvDuration" value="60">
</div>
<button onclick="submitApproval()" id="btnSubmitAprv" class="w-full bg-slate-900 text-white font-black py-4 rounded-xl shadow-lg hover:bg-blue-600 transition-all uppercase tracking-widest text-xs flex items-center justify-center gap-2">
@@ -277,6 +283,7 @@
function openApproveModal(id, dateText) {
document.getElementById('aprvId').value = id;
document.getElementById('aprvDateText').innerText = dateText;
document.getElementById('aprvDuration').value = "60"; // Reset al valor por defecto
document.getElementById('approveModal').classList.remove('hidden');
}
@@ -284,16 +291,6 @@
document.getElementById('approveModal').classList.add('hidden');
}
function setDuration(mins, btnEl) {
document.getElementById('aprvDuration').value = mins;
document.querySelectorAll('.dur-btn').forEach(b => {
b.classList.remove('bg-blue-600', 'text-white', 'border-blue-600', 'shadow-md', 'selected');
b.classList.add('bg-white', 'text-slate-600', 'border-slate-200');
});
btnEl.classList.remove('bg-white', 'text-slate-600', 'border-slate-200');
btnEl.classList.add('bg-blue-600', 'text-white', 'border-blue-600', 'shadow-md', 'selected');
}
async function submitApproval() {
const id = document.getElementById('aprvId').value;
const duration = document.getElementById('aprvDuration').value;