marsalva/Portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Añadir cita.html

Browse Source
This commit is contained in:
marsalva
2026-02-21 15:35:31 +00:00
parent 1206b0855c
commit 8502998d47
1 changed files with 216 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
cita.html Normal file
View File

@@ -0,0 +1,216 @@
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Agendar Cita - IntegraRepara</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<style>
body { background-color: #f8fafc; }
.fade-in { animation: fadeIn 0.4s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
.slot-btn.selected { background-color: #2563eb; color: white; border-color: #2563eb; }
</style>
</head>
<body class="text-slate-800 font-sans antialiased min-h-screen flex flex-col items-center">
<div id="loader" class="fixed inset-0 bg-slate-50 z-50 flex flex-col items-center justify-center">
<div class="w-12 h-12 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mb-4"></div>
<p class="text-sm font-bold text-slate-500 animate-pulse">Buscando rutas de tu técnico...</p>
</div>
<main id="mainContent" class="hidden w-full max-w-md mx-auto min-h-screen flex flex-col relative pb-10">
<header class="bg-white p-6 pt-10 border-b border-slate-200 sticky top-0 z-10 shrink-0">
<button onclick="window.history.back()" class="text-slate-400 hover:text-slate-800 mb-4 transition-colors">
<i data-lucide="arrow-left" class="w-6 h-6"></i>
</button>
<h1 class="text-2xl font-black tracking-tight leading-none text-slate-800">¿Cuándo te viene mejor?</h1>
<p class="text-sm text-slate-500 font-medium mt-2">Selecciona tu preferencia y te mostraremos los horarios en los que el técnico estará por tu zona.</p>
</header>
<div class="p-6 flex-1 flex flex-col gap-6 fade-in">
<div id="step1">
<div class="grid grid-cols-2 gap-4">
<button onclick="selectPreference('morning')" id="btnMorning" class="bg-white border-2 border-slate-200 p-6 rounded-3xl flex flex-col items-center gap-3 hover:border-blue-400 hover:bg-blue-50 transition-all text-slate-600">
<i data-lucide="sun" class="w-10 h-10 text-amber-500"></i>
<span class="font-black uppercase text-sm">Mañanas</span>
</button>
<button onclick="selectPreference('afternoon')" id="btnAfternoon" class="bg-white border-2 border-slate-200 p-6 rounded-3xl flex flex-col items-center gap-3 hover:border-blue-400 hover:bg-blue-50 transition-all text-slate-600">
<i data-lucide="sunset" class="w-10 h-10 text-orange-500"></i>
<span class="font-black uppercase text-sm">Tardes</span>
</button>
</div>
</div>
<div id="step2" class="hidden space-y-6 fade-in">
<h3 class="font-black text-slate-800 uppercase tracking-widest text-xs">1. Elige un día disponible</h3>
<select id="daySelect" onchange="renderSlots()" class="w-full bg-white border-2 border-slate-200 p-4 rounded-2xl font-bold text-slate-700 outline-none focus:border-blue-500">
<option value="">Selecciona un día...</option>
</select>
<div id="hoursContainer" class="hidden space-y-4 fade-in">
<h3 class="font-black text-slate-800 uppercase tracking-widest text-xs">2. Elige la hora aproximada</h3>
<div id="slotsGrid" class="grid grid-cols-3 gap-3">
</div>
</div>
</div>
<div class="mt-auto pt-6">
<button id="btnConfirm" onclick="confirmBooking()" class="w-full bg-blue-600 text-white font-black py-4 rounded-2xl shadow-lg opacity-50 pointer-events-none transition-all flex justify-center items-center gap-2 uppercase tracking-widest text-xs">
Confirmar Cita <i data-lucide="check-circle" class="w-4 h-4"></i>
</button>
</div>
</div>
</main>
<div id="successScreen" class="hidden w-full max-w-md mx-auto p-6 flex flex-col items-center justify-center min-h-screen text-center fade-in bg-emerald-500 text-white">
<div class="w-24 h-24 bg-white text-emerald-500 rounded-full flex items-center justify-center mb-6 shadow-2xl">
<i data-lucide="check" class="w-12 h-12"></i>
</div>
<h2 class="text-3xl font-black mb-2">¡Cita Confirmada!</h2>
<p class="font-medium opacity-90 mb-8">El técnico ha sido notificado y se pasará por tu domicilio el día y hora acordados.</p>
<button onclick="window.history.back()" class="bg-slate-900 text-white font-black py-3 px-8 rounded-xl shadow-lg uppercase text-xs tracking-widest">
Volver al Resumen
</button>
</div>
<script>
const API_URL = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1'
? 'http://localhost:3000' : 'https://integrarepara-api.integrarepara.es';
let agendaData = [];
let currentPreference = null;
let selectedDate = null;
let selectedTime = null;
document.addEventListener("DOMContentLoaded", async () => {
lucide.createIcons();
const urlParams = new URLSearchParams(window.location.search);
const token = urlParams.get('token');
const serviceId = urlParams.get('service');
if (!token || !serviceId) {
alert("Enlace inválido"); return;
}
try {
// Pedir la disponibilidad inteligente al servidor
const res = await fetch(`${API_URL}/public/portal/${token}/slots?serviceId=${serviceId}`);
const data = await res.json();
if (data.ok) {
agendaData = data.days;
document.getElementById('loader').classList.add('hidden');
document.getElementById('mainContent').classList.remove('hidden');
} else {
alert(data.error || "No se han podido cargar los horarios");
}
} catch (e) { alert("Error de conexión"); }
});
function selectPreference(pref) {
currentPreference = pref;
selectedTime = null;
updateConfirmButton();
// UI feedback
document.getElementById('btnMorning').classList.remove('border-blue-500', 'bg-blue-50');
document.getElementById('btnAfternoon').classList.remove('border-blue-500', 'bg-blue-50');
if (pref === 'morning') document.getElementById('btnMorning').classList.add('border-blue-500', 'bg-blue-50');
if (pref === 'afternoon') document.getElementById('btnAfternoon').classList.add('border-blue-500', 'bg-blue-50');
document.getElementById('step2').classList.remove('hidden');
// Llenar el selector de días solo con los días que tengan huecos en esa preferencia
const select = document.getElementById('daySelect');
select.innerHTML = '<option value="">Selecciona un día...</option>';
agendaData.forEach(day => {
const hasSlots = pref === 'morning' ? day.morning.length > 0 : day.afternoon.length > 0;
if (hasSlots) {
select.innerHTML += `<option value="${day.date}" class="uppercase">${day.displayDate}</option>`;
}
});
document.getElementById('hoursContainer').classList.add('hidden');
}
function renderSlots() {
selectedDate = document.getElementById('daySelect').value;
selectedTime = null;
updateConfirmButton();
if (!selectedDate) {
document.getElementById('hoursContainer').classList.add('hidden');
return;
}
const dayObj = agendaData.find(d => d.date === selectedDate);
const slots = currentPreference === 'morning' ? dayObj.morning : dayObj.afternoon;
const grid = document.getElementById('slotsGrid');
grid.innerHTML = slots.map(time => `
<button onclick="selectTime('${time}', this)" class="slot-btn bg-white border border-slate-200 py-3 rounded-xl font-black text-slate-600 shadow-sm transition-all hover:bg-slate-50">
${time}
</button>
`).join('');
document.getElementById('hoursContainer').classList.remove('hidden');
}
function selectTime(time, btnEl) {
selectedTime = time;
document.querySelectorAll('.slot-btn').forEach(b => b.classList.remove('selected'));
btnEl.classList.add('selected');
updateConfirmButton();
}
function updateConfirmButton() {
const btn = document.getElementById('btnConfirm');
if (selectedDate && selectedTime) {
btn.classList.remove('opacity-50', 'pointer-events-none');
} else {
btn.classList.add('opacity-50', 'pointer-events-none');
}
}
async function confirmBooking() {
const urlParams = new URLSearchParams(window.location.search);
const token = urlParams.get('token');
const serviceId = urlParams.get('service');
const btn = document.getElementById('btnConfirm');
btn.innerHTML = '<i data-lucide="loader-2" class="w-4 h-4 animate-spin"></i> Guardando...';
lucide.createIcons();
try {
const res = await fetch(`${API_URL}/public/portal/${token}/book`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ serviceId, date: selectedDate, time: selectedTime })
});
const data = await res.json();
if (data.ok) {
document.getElementById('mainContent').classList.add('hidden');
document.getElementById('successScreen').classList.remove('hidden');
document.getElementById('successScreen').classList.add('flex');
} else {
alert("Error al confirmar la cita. Es posible que el hueco ya se haya ocupado.");
btn.innerHTML = 'Confirmar Cita <i data-lucide="check-circle" class="w-4 h-4"></i>';
lucide.createIcons();
}
} catch(e) {
alert("Error de conexión");
btn.innerHTML = 'Confirmar Cita <i data-lucide="check-circle" class="w-4 h-4"></i>';
lucide.createIcons();
}
}
</script>
</body>
</html>