From c620ce3b579695dbadbab887dad77547b961a2fe Mon Sep 17 00:00:00 2001 From: Ian Gulliver Date: Tue, 30 Dec 2025 12:04:13 -0800 Subject: [PATCH] Consolidate RSVP form into single unified page --- static/afac26.html | 171 ++++++++++++++++----------------------------- 1 file changed, 60 insertions(+), 111 deletions(-) diff --git a/static/afac26.html b/static/afac26.html index faca58a..f4dfa76 100644 --- a/static/afac26.html +++ b/static/afac26.html @@ -149,57 +149,32 @@

Helios Gym

-
- - RSVP now! -
Number of people:
-
- 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 -
-
- Would you like to make a donation? -
- $25 - $50 - Other$ - Maybe later -
-
-
-
- Submit RSVP + RSVP now! +
Number of people:
+
+ 0 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 +
+
+ + Would you like to make a donation? +
+ $25 + $50 + Other$ + Maybe later
- @@ -226,20 +201,13 @@ let selectedNumPeople = 1; let selectedDonation = 25; - function setupButtonGroup(groupId, onChange, useHighlight = false) { + function setupButtonGroup(groupId, onChange) { const group = document.getElementById(groupId); group.querySelectorAll('wa-button').forEach(btn => { btn.addEventListener('click', (e) => { if (e.target.tagName === 'WA-INPUT') return; - group.querySelectorAll('wa-button').forEach(b => { - b.variant = 'neutral'; - b.classList.remove('selected'); - }); - if (useHighlight) { - btn.classList.add('selected'); - } else { - btn.variant = 'brand'; - } + group.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected')); + btn.classList.add('selected'); onChange(btn.dataset.value); }); }); @@ -247,11 +215,11 @@ setupButtonGroup('num-people-group', val => { selectedNumPeople = parseInt(val); - }, true); + }); setupButtonGroup('donation-group', val => { selectedDonation = val === 'custom' ? 'custom' : (val === '0' ? 0 : parseInt(val)); - }, true); + }); document.getElementById('custom-amount').addEventListener('focus', () => { const group = document.getElementById('donation-group'); @@ -260,64 +228,45 @@ selectedDonation = 'custom'; }); - document.getElementById('additional-amount').addEventListener('focus', () => { - const group = document.getElementById('additional-donation-group'); - group.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected')); - group.querySelector('wa-button[data-value="custom"]').classList.add('selected'); - }); - - setupButtonGroup('num-people-update-group', async val => { - const numPeople = parseInt(val); - const data = await api('POST', `/api/rsvp/${eventId}`, { numPeople }); - updateUI(data); - }, true); - - setupButtonGroup('additional-donation-group', async val => { - let donationCents = 0; - if (val === 'custom') { - donationCents = (parseInt(document.getElementById('additional-amount').value) || 0) * 100; - } else { - donationCents = parseInt(val) * 100; - } - if (donationCents > 0) { - const data = await api('POST', `/api/rsvp/${eventId}`, { donationCents }); - if (data.url) location.href = data.url; - } - }, true); - async function loadRSVP() { const data = await api('GET', `/api/rsvp/${eventId}`); updateUI(data); } function updateUI(data) { - if (data.numPeople > 0) { - document.getElementById('rsvp-prompt').style.display = 'none'; - document.getElementById('rsvp-status').style.display = 'block'; + const hasRSVP = data.numPeople > 0; + const hasDonation = data.donation > 0; + + if (hasRSVP) { const word = data.numPeople === 1 ? 'person' : 'people'; - document.getElementById('rsvp-message').textContent = `You're RSVPed for ${data.numPeople} ${word}.`; - if (data.donation > 0) { - document.getElementById('donation-status').textContent = `You've donated $${data.donation.toFixed(2)}. Thank you!`; - } else { - document.getElementById('donation-status').textContent = ''; - } - const updateGroup = document.getElementById('num-people-update-group'); - updateGroup.querySelectorAll('wa-button').forEach(b => { - b.classList.remove('selected'); - b.variant = 'neutral'; - }); - const currentBtn = updateGroup.querySelector(`wa-button[data-value="${data.numPeople}"]`); - if (currentBtn) currentBtn.classList.add('selected'); + document.getElementById('rsvp-header').textContent = `You're RSVPed for ${data.numPeople} ${word}.`; } else { - document.getElementById('rsvp-prompt').style.display = 'block'; - document.getElementById('rsvp-status').style.display = 'none'; - const promptDonation = document.getElementById('prompt-donation-status'); - if (data.donation > 0) { - promptDonation.textContent = `You've donated $${data.donation.toFixed(2)}. Thank you!`; - promptDonation.style.display = 'block'; - } else { - promptDonation.style.display = 'none'; - } + document.getElementById('rsvp-header').textContent = 'RSVP now!'; + } + + const donationStatus = document.getElementById('donation-status'); + if (hasDonation) { + donationStatus.textContent = `You've donated $${data.donation.toFixed(2)}. Thank you!`; + donationStatus.style.display = 'block'; + document.getElementById('donation-header').textContent = 'Make an additional donation?'; + } else { + donationStatus.style.display = 'none'; + document.getElementById('donation-header').textContent = 'Would you like to make a donation?'; + } + + document.getElementById('rsvp-btn').textContent = (hasRSVP || hasDonation) ? 'Update RSVP' : 'Submit RSVP'; + + const numGroup = document.getElementById('num-people-group'); + numGroup.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected')); + selectedNumPeople = data.numPeople || 1; + const currentBtn = numGroup.querySelector(`wa-button[data-value="${selectedNumPeople}"]`); + if (currentBtn) currentBtn.classList.add('selected'); + + if (hasRSVP || hasDonation) { + const donationGroup = document.getElementById('donation-group'); + donationGroup.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected')); + donationGroup.querySelector('wa-button[data-value="0"]').classList.add('selected'); + selectedDonation = 0; } }