feat: selector de dia en ficha de invitado
This commit is contained in:
+46
-9
@@ -1,7 +1,13 @@
|
||||
(function () {
|
||||
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 eligeDia = $('elige-dia'), diasFs = $('dias-fs'), eligeErr = $('elige-err'), eligeOk = $('elige-ok');
|
||||
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);
|
||||
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;
|
||||
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) {
|
||||
var s = steps[i], els = s.querySelectorAll('input[required],textarea[required]');
|
||||
for (var j = 0; j < els.length; j++) {
|
||||
@@ -36,27 +41,59 @@
|
||||
if (b.classList.contains('prev')) 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) {
|
||||
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 (j) {
|
||||
if (!j.ok) { malo.hidden = false; return; }
|
||||
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 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));
|
||||
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;
|
||||
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);
|
||||
cita.hidden = false;
|
||||
mostrarFormulario();
|
||||
} else if (j.dias && j.dias.length) {
|
||||
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; });
|
||||
|
||||
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;
|
||||
f.addEventListener('input', function () {
|
||||
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(); });
|
||||
busy = true; say('Enviando…', true);
|
||||
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 (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); }
|
||||
|
||||
Reference in New Issue
Block a user