helios/rsvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Consolidate RSVP form into single unified page

Browse Source
This commit is contained in:
Ian Gulliver
2025-12-30 12:04:13 -08:00
parent 87ef0a5550
commit c620ce3b57
1 changed files with 60 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
static/afac26.html
View File

@@ -149,57 +149,32 @@
<p>Helios Gym</p> <p>Helios Gym</p>
</div> </div>
<div class="rsvp-section"> <div class="rsvp-section">
<div id="rsvp-prompt"> <strong id="rsvp-header">RSVP now!</strong>
<div id="prompt-donation-status" class="donation-info" style="display: none; margin-bottom: 1rem;"></div> <div style="margin-top: 1rem;">Number of people:</div>
<strong>RSVP now!</strong> <div class="button-group" id="num-people-group">
<div style="margin-top: 1rem;">Number of people:</div> <wa-button size="small" variant="neutral" data-value="0">0</wa-button>
<div class="button-group" id="num-people-group"> <wa-button size="small" variant="neutral" class="selected" data-value="1">1</wa-button>
<wa-button size="small" variant="neutral" class="selected" data-value="1">1</wa-button> <wa-button size="small" variant="neutral" data-value="2">2</wa-button>
<wa-button size="small" variant="neutral" data-value="2">2</wa-button> <wa-button size="small" variant="neutral" data-value="3">3</wa-button>
<wa-button size="small" variant="neutral" data-value="3">3</wa-button> <wa-button size="small" variant="neutral" data-value="4">4</wa-button>
<wa-button size="small" variant="neutral" data-value="4">4</wa-button> <wa-button size="small" variant="neutral" data-value="5">5</wa-button>
<wa-button size="small" variant="neutral" data-value="5">5</wa-button> <wa-button size="small" variant="neutral" data-value="6">6</wa-button>
<wa-button size="small" variant="neutral" data-value="6">6</wa-button> <wa-button size="small" variant="neutral" data-value="7">7</wa-button>
<wa-button size="small" variant="neutral" data-value="7">7</wa-button> <wa-button size="small" variant="neutral" data-value="8">8</wa-button>
<wa-button size="small" variant="neutral" data-value="8">8</wa-button> </div>
</div> <div class="donation-section">
<div class="donation-section"> <div id="donation-status" class="donation-info" style="display: none; margin-bottom: 0.5rem;"></div>
<strong>Would you like to make a donation?</strong> <strong id="donation-header">Would you like to make a donation?</strong>
<div class="button-group donation-group" id="donation-group"> <div class="button-group donation-group" id="donation-group">
<wa-button variant="neutral" class="selected" data-value="25">$25</wa-button> <wa-button variant="neutral" class="selected" data-value="25">$25</wa-button>
<wa-button variant="neutral" data-value="50">$50</wa-button> <wa-button variant="neutral" data-value="50">$50</wa-button>
<wa-button variant="neutral" data-value="custom"><span>Other</span><wa-input type="number" size="small" id="custom-amount" min="1" value="100"><span slot="start">$</span></wa-input></wa-button> <wa-button variant="neutral" data-value="custom"><span>Other</span><wa-input type="number" size="small" id="custom-amount" min="1" value="100"><span slot="start">$</span></wa-input></wa-button>
<wa-button variant="neutral" data-value="0">Maybe later</wa-button> <wa-button variant="neutral" data-value="0">Maybe later</wa-button>
</div>
</div>
<hr style="margin-top: 1rem; border: none; border-top: 1px solid var(--wa-color-neutral-80);">
<div style="text-align: center; margin-top: 1rem;">
<wa-button variant="brand" id="rsvp-btn">Submit RSVP</wa-button>
</div> </div>
</div> </div>
<div id="rsvp-status" style="display: none;"> <hr style="margin-top: 1rem; border: none; border-top: 1px solid var(--wa-color-neutral-80);">
<strong id="rsvp-message"></strong> <div style="text-align: center; margin-top: 1rem;">
<div id="donation-status" class="donation-info"></div> <wa-button variant="brand" id="rsvp-btn">Submit RSVP</wa-button>
<div style="margin-top: 1rem;">Change to:</div>
<div class="button-group" id="num-people-update-group">
<wa-button size="small" variant="neutral" data-value="1">1</wa-button>
<wa-button size="small" variant="neutral" data-value="2">2</wa-button>
<wa-button size="small" variant="neutral" data-value="3">3</wa-button>
<wa-button size="small" variant="neutral" data-value="4">4</wa-button>
<wa-button size="small" variant="neutral" data-value="5">5</wa-button>
<wa-button size="small" variant="neutral" data-value="6">6</wa-button>
<wa-button size="small" variant="neutral" data-value="7">7</wa-button>
<wa-button size="small" variant="neutral" data-value="8">8</wa-button>
<wa-button size="small" variant="neutral" data-value="0">Cancel RSVP</wa-button>
</div>
<div class="donation-section">
<strong>Make an additional donation?</strong>
<div class="button-group donation-group" id="additional-donation-group">
<wa-button variant="neutral" data-value="25">$25</wa-button>
<wa-button variant="neutral" data-value="50">$50</wa-button>
<wa-button variant="neutral" data-value="custom"><span>Other</span><wa-input type="number" size="small" id="additional-amount" min="1" value="100"><span slot="start">$</span></wa-input></wa-button>
</div>
</div>
</div> </div>
</div> </div>
</wa-card> </wa-card>
@@ -226,20 +201,13 @@
let selectedNumPeople = 1; let selectedNumPeople = 1;
let selectedDonation = 25; let selectedDonation = 25;
function setupButtonGroup(groupId, onChange, useHighlight = false) { function setupButtonGroup(groupId, onChange) {
const group = document.getElementById(groupId); const group = document.getElementById(groupId);
group.querySelectorAll('wa-button').forEach(btn => { group.querySelectorAll('wa-button').forEach(btn => {
btn.addEventListener('click', (e) => { btn.addEventListener('click', (e) => {
if (e.target.tagName === 'WA-INPUT') return; if (e.target.tagName === 'WA-INPUT') return;
group.querySelectorAll('wa-button').forEach(b => { group.querySelectorAll('wa-button').forEach(b => b.classList.remove('selected'));
b.variant = 'neutral'; btn.classList.add('selected');
b.classList.remove('selected');
});
if (useHighlight) {
btn.classList.add('selected');
} else {
btn.variant = 'brand';
}
onChange(btn.dataset.value); onChange(btn.dataset.value);
}); });
}); });
@@ -247,11 +215,11 @@
setupButtonGroup('num-people-group', val => { setupButtonGroup('num-people-group', val => {
selectedNumPeople = parseInt(val); selectedNumPeople = parseInt(val);
}, true); });
setupButtonGroup('donation-group', val => { setupButtonGroup('donation-group', val => {
selectedDonation = val === 'custom' ? 'custom' : (val === '0' ? 0 : parseInt(val)); selectedDonation = val === 'custom' ? 'custom' : (val === '0' ? 0 : parseInt(val));
}, true); });
document.getElementById('custom-amount').addEventListener('focus', () => { document.getElementById('custom-amount').addEventListener('focus', () => {
const group = document.getElementById('donation-group'); const group = document.getElementById('donation-group');
@@ -260,64 +228,45 @@
selectedDonation = 'custom'; 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() { async function loadRSVP() {
const data = await api('GET', `/api/rsvp/${eventId}`); const data = await api('GET', `/api/rsvp/${eventId}`);
updateUI(data); updateUI(data);
} }
function updateUI(data) { function updateUI(data) {
if (data.numPeople > 0) { const hasRSVP = data.numPeople > 0;
document.getElementById('rsvp-prompt').style.display = 'none'; const hasDonation = data.donation > 0;
document.getElementById('rsvp-status').style.display = 'block';
if (hasRSVP) {
const word = data.numPeople === 1 ? 'person' : 'people'; const word = data.numPeople === 1 ? 'person' : 'people';
document.getElementById('rsvp-message').textContent = `You're RSVPed for ${data.numPeople} ${word}.`; document.getElementById('rsvp-header').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');
} else { } else {
document.getElementById('rsvp-prompt').style.display = 'block'; document.getElementById('rsvp-header').textContent = 'RSVP now!';
document.getElementById('rsvp-status').style.display = 'none'; }
const promptDonation = document.getElementById('prompt-donation-status');
if (data.donation > 0) { const donationStatus = document.getElementById('donation-status');
promptDonation.textContent = `You've donated $${data.donation.toFixed(2)}. Thank you!`; if (hasDonation) {
promptDonation.style.display = 'block'; donationStatus.textContent = `You've donated $${data.donation.toFixed(2)}. Thank you!`;
} else { donationStatus.style.display = 'block';
promptDonation.style.display = 'none'; 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;
} }
} }