diff --git a/public/invitados.js b/public/invitados.js index ca4f6f4..b335b28 100644 --- a/public/invitados.js +++ b/public/invitados.js @@ -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!'; - 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); + 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.'; + 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); }