feat: selector de dia en ficha de invitado

This commit is contained in:
2026-10-29 20:53:22 +00:00
parent 97fe393e15
commit 2876197ed9
+46 -9
View File
@@ -1,7 +1,13 @@
(function () { (function () {
var $ = function (id) { return document.getElementById(id); }; var $ = function (id) { return document.getElementById(id); };
var P = new URLSearchParams(location.search), n = (P.get('n') || '').trim(), fe = (P.get('f') || '').trim(), k = n && fe ? n + fe : ''; var P = new URLSearchParams(location.search);
var n = (P.get('n') || '').trim();
var fe = (P.get('f') || '').trim();
var de = (P.get('d') || '').trim();
var k = n && (fe || de) ? n + (fe || de) : '';
var diaElegido = null;
var f = $('g'), st = $('st'), hola = $('hola'), malo = $('malo'), intro = $('intro'), cita = $('cita'), paso = $('paso'); var f = $('g'), st = $('st'), hola = $('hola'), malo = $('malo'), intro = $('intro'), cita = $('cita'), paso = $('paso');
var eligeDia = $('elige-dia'), diasFs = $('dias-fs'), eligeErr = $('elige-err'), eligeOk = $('elige-ok');
var steps = Array.prototype.slice.call(f.querySelectorAll('fieldset.sec')); var steps = Array.prototype.slice.call(f.querySelectorAll('fieldset.sec'));
var cur = 0, t0 = Date.now(), busy = false, KEY = 'aqnsn-ficha-' + k.slice(0, 40); var cur = 0, t0 = Date.now(), busy = false, KEY = 'aqnsn-ficha-' + k.slice(0, 40);
function say(m, ok) { st.textContent = m; st.className = 'status ' + (ok ? 'ok' : 'err'); } function say(m, ok) { st.textContent = m; st.className = 'status ' + (ok ? 'ok' : 'err'); }
@@ -17,7 +23,6 @@
var top = hola.getBoundingClientRect().top + window.scrollY - 12; var top = hola.getBoundingClientRect().top + window.scrollY - 12;
window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' }); window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' });
} }
// valida los campos obligatorios del paso actual; devuelve true si todo está bien
function validar(i) { function validar(i) {
var s = steps[i], els = s.querySelectorAll('input[required],textarea[required]'); var s = steps[i], els = s.querySelectorAll('input[required],textarea[required]');
for (var j = 0; j < els.length; j++) { for (var j = 0; j < els.length; j++) {
@@ -36,27 +41,59 @@
if (b.classList.contains('prev')) show(cur - 1); if (b.classList.contains('prev')) show(cur - 1);
else if (validar(cur)) show(cur + 1); else if (validar(cur)) show(cur + 1);
}); });
// Intro/Enter dentro de un campo de una sola línea avanza en vez de enviar a medias
f.addEventListener('keydown', function (e) { f.addEventListener('keydown', function (e) {
if (e.key === 'Enter' && e.target.tagName === 'INPUT' && e.target.type !== 'checkbox' && cur < steps.length - 1) { e.preventDefault(); if (validar(cur)) show(cur + 1); } if (e.key === 'Enter' && e.target.tagName === 'INPUT' && e.target.type !== 'checkbox' && cur < steps.length - 1) { e.preventDefault(); if (validar(cur)) show(cur + 1); }
}); });
fetch('/api/invitados/check?n=' + encodeURIComponent(n) + '&f=' + encodeURIComponent(fe), { cache: 'no-store' }) function mostrarFormulario() {
intro.hidden = false; f.hidden = false;
try { var s = JSON.parse(store('get') || '{}'); Object.keys(s).forEach(function (nm) { if (f.elements[nm] && f.elements[nm].type !== 'checkbox') f.elements[nm].value = s[nm]; }); } catch (e) {}
show(0);
window.scrollTo(0, 0);
}
var checkUrl = '/api/invitados/check?n=' + encodeURIComponent(n) + (fe ? '&f=' + encodeURIComponent(fe) : '&d=' + encodeURIComponent(de));
fetch(checkUrl, { cache: 'no-store' })
.then(function (r) { return r.json(); }) .then(function (r) { return r.json(); })
.then(function (j) { .then(function (j) {
if (!j.ok) { malo.hidden = false; return; } if (!j.ok) { malo.hidden = false; return; }
hola.textContent = 'Hola, ' + j.nombre + '. ¡Gracias por querer venir al programa!'; hola.textContent = 'Hola, ' + j.nombre + '. ¡Gracias por querer venir al programa!';
hola.hidden = false;
if (j.cita) {
var d = new Date(j.cita * 1000), o = { timeZone: 'Europe/Madrid' }; var d = new Date(j.cita * 1000), o = { timeZone: 'Europe/Madrid' };
var dia = d.toLocaleDateString('es-ES', Object.assign({ weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }, o)).replace(',', ''); var dia = d.toLocaleDateString('es-ES', Object.assign({ weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }, o)).replace(',', '');
var hora = d.toLocaleTimeString('es-ES', Object.assign({ hour: '2-digit', minute: '2-digit' }, o)); var hora = d.toLocaleTimeString('es-ES', Object.assign({ hour: '2-digit', minute: '2-digit' }, o));
cita.textContent = '📅 Recuerda que grabamos el ' + dia + ' a las ' + hora + ', y te enviaremos por correo electrónico la dirección del estudio.'; cita.textContent = '📅 Recuerda que grabamos el ' + dia + ' a las ' + hora + ', y te enviaremos por correo electrónico la dirección del estudio.';
hola.hidden = false; cita.hidden = false; intro.hidden = false; f.hidden = false; cita.hidden = false;
try { var s = JSON.parse(store('get') || '{}'); Object.keys(s).forEach(function (nm) { if (f.elements[nm] && f.elements[nm].type !== 'checkbox') f.elements[nm].value = s[nm]; }); } catch (e) {} mostrarFormulario();
show(0); } else if (j.dias && j.dias.length) {
window.scrollTo(0, 0); j.dias.forEach(function (op) {
var lbl = document.createElement('label');
lbl.className = 'check';
var inp = document.createElement('input');
inp.type = 'radio'; inp.name = 'dia-opcion'; inp.value = op.ts;
var span = document.createElement('span');
span.textContent = op.txt;
lbl.appendChild(inp); lbl.appendChild(span);
diasFs.appendChild(lbl);
});
eligeDia.hidden = false;
}
}) })
.catch(function () { malo.hidden = false; }); .catch(function () { malo.hidden = false; });
eligeOk.addEventListener('click', function () {
var r = diasFs.querySelector('input[name="dia-opcion"]:checked');
if (!r) { eligeErr.hidden = false; return; }
eligeErr.hidden = true;
diaElegido = r.value;
var lbl = r.closest('label');
cita.textContent = '📅 Has elegido grabar el ' + (lbl ? lbl.querySelector('span').textContent : '') + '. Te enviaremos por correo la dirección del estudio.';
cita.hidden = false;
eligeDia.hidden = true;
mostrarFormulario();
});
var timer; var timer;
f.addEventListener('input', function () { f.addEventListener('input', function () {
clearTimeout(timer); clearTimeout(timer);
@@ -75,7 +112,7 @@
Array.prototype.forEach.call(f.elements, function (el) { if (/^q\d+$/.test(el.name)) resp[el.name] = el.value.trim(); }); Array.prototype.forEach.call(f.elements, function (el) { if (/^q\d+$/.test(el.name)) resp[el.name] = el.value.trim(); });
busy = true; say('Enviando…', true); busy = true; say('Enviando…', true);
fetch('/api/invitados', { method: 'POST', headers: { 'Content-Type': 'application/json' }, fetch('/api/invitados', { method: 'POST', headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ n: n, f: fe, email: f.email.value.trim(), tel: f.tel.value.trim(), resp: resp, consent: true, web: f.web.value || '', t: Date.now() - t0 }) }) body: JSON.stringify({ n: n, f: fe, d: de, dia: diaElegido || '', email: f.email.value.trim(), tel: f.tel.value.trim(), resp: resp, consent: true, web: f.web.value || '', t: Date.now() - t0 }) })
.then(function (r) { return r.json().catch(function () { return {}; }).then(function (j) { return { ok: r.ok && j.ok, j: j }; }); }) .then(function (r) { return r.json().catch(function () { return {}; }).then(function (j) { return { ok: r.ok && j.ok, j: j }; }); })
.then(function (x) { .then(function (x) {
if (x.ok) { store('del'); f.reset(); steps.forEach(function (s) { s.hidden = true; }); paso.hidden = true; f.querySelector('.note:last-of-type').hidden = true; say(f.getAttribute('data-ok'), true); } if (x.ok) { store('del'); f.reset(); steps.forEach(function (s) { s.hidden = true; }); paso.hidden = true; f.querySelector('.note:last-of-type').hidden = true; say(f.getAttribute('data-ok'), true); }