Actualizar agenda.html
This commit is contained in:
37
agenda.html
37
agenda.html
@@ -161,17 +161,23 @@
|
|||||||
|
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-xs font-black text-slate-600 uppercase tracking-widest mb-3">Duración estimada del trabajo</label>
|
<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">
|
<div class="relative">
|
||||||
<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>
|
<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">
|
||||||
<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>
|
<option value="15">15 minutos</option>
|
||||||
<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>
|
<option value="30">30 minutos</option>
|
||||||
<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>
|
<option value="45">45 minutos</option>
|
||||||
<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>
|
<option value="60" selected>1 hora</option>
|
||||||
<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>
|
<option value="75">1 hora 15 min</option>
|
||||||
<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>
|
<option value="90">1 hora 30 min</option>
|
||||||
<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>
|
<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>
|
</div>
|
||||||
<input type="hidden" id="aprvDuration" value="60">
|
|
||||||
</div>
|
</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">
|
<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) {
|
function openApproveModal(id, dateText) {
|
||||||
document.getElementById('aprvId').value = id;
|
document.getElementById('aprvId').value = id;
|
||||||
document.getElementById('aprvDateText').innerText = dateText;
|
document.getElementById('aprvDateText').innerText = dateText;
|
||||||
|
document.getElementById('aprvDuration').value = "60"; // Reset al valor por defecto
|
||||||
document.getElementById('approveModal').classList.remove('hidden');
|
document.getElementById('approveModal').classList.remove('hidden');
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -284,16 +291,6 @@
|
|||||||
document.getElementById('approveModal').classList.add('hidden');
|
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() {
|
async function submitApproval() {
|
||||||
const id = document.getElementById('aprvId').value;
|
const id = document.getElementById('aprvId').value;
|
||||||
const duration = document.getElementById('aprvDuration').value;
|
const duration = document.getElementById('aprvDuration').value;
|
||||||
|
|||||||
Reference in New Issue
Block a user