Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(badges): TC modal centering, positioning, and allow-tracking toggle

Browse Source 
- Center modal horizontally; position 10vh from top instead of centered vertically
- Add Allow/Do-not-allow toggle buttons inside the TC modal so attendees
  can set their lead scanning preference while reading the terms
- Buttons reflect current DB value on open and use solid color fills
  (green/red) so selection state is unambiguous in light and dark mode
- Save & Close calls existing save_field('allow_tracking') then closes;
  Cancel closes without saving

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-04-07 20:29:41 -04:00
parent b01478a87f
commit ef45a0ca0f
1 changed files with 45 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_print_controls.svelte
View File

@@ -775,17 +775,19 @@ let allow_tracking_open = $derived(
{/if}
</button>
{#if $ae_loc.edit_mode && $ae_loc.trusted_access}
<!-- Quick print: 30% — window.print() only, no count, no navigation.
Use when you need to reprint mid-workflow without resetting search state
or when the count should not change (e.g. a test print). -->
<button
type="button"
class="btn preset-tonal-surface border-primary-200/50 dark:border-primary-800/30 flex flex-3 items-center justify-center gap-1 border text-xs"
class="btn preset-tonal-warning border-warning-200/50 dark:border-warning-800/30 flex flex-3 items-center justify-center gap-1 border text-xs"
onclick={() => window.print()}
title="Print without tracking — no count increment, stays on this page">
<Printer size="12" />
Print
Test
</button>
{/if}
</div>
{#if is_printed && print_status === 'idle'}
<p
@@ -1664,7 +1666,7 @@ let allow_tracking_open = $derived(
============================================================ -->
<dialog
bind:this={tc_dialog_ref}
class="w-full max-w-md rounded-xl border border-gray-200 bg-white p-0 shadow-2xl dark:border-gray-700 dark:bg-gray-900"
class="mx-auto mt-[10vh] w-full max-w-md rounded-xl border border-gray-200 bg-white p-0 shadow-2xl dark:border-gray-700 dark:bg-gray-900"
onclick={(e) => {
if (e.target === tc_dialog_ref) tc_dialog_ref?.close();
}}>
@@ -1714,11 +1716,49 @@ let allow_tracking_open = $derived(
registration desk.
</p>
</div>
<div class="mt-4 flex justify-end">
<!-- Allow tracking toggle — the attendee makes their choice here -->
<div class="mt-4 border-t border-gray-100 pt-4 dark:border-gray-800">
<p class="mb-2 text-sm font-semibold">Your preference:</p>
<div class="flex flex-col gap-2 sm:flex-row">
<button
type="button"
class="btn btn-sm flex-1 border-2 font-semibold transition-colors"
class:bg-green-600={edit_allow_tracking}
class:text-white={edit_allow_tracking}
class:border-green-600={edit_allow_tracking}
class:bg-white={!edit_allow_tracking}
class:text-gray-500={!edit_allow_tracking}
class:border-gray-300={!edit_allow_tracking}
onclick={() => { edit_allow_tracking = true; }}>
✓ Allow lead scanning
</button>
<button
type="button"
class="btn btn-sm flex-1 border-2 font-semibold transition-colors"
class:bg-red-600={!edit_allow_tracking}
class:text-white={!edit_allow_tracking}
class:border-red-600={!edit_allow_tracking}
class:bg-white={edit_allow_tracking}
class:text-gray-500={edit_allow_tracking}
class:border-gray-300={edit_allow_tracking}
onclick={() => { edit_allow_tracking = false; }}>
✕ Do not allow
</button>
</div>
</div>
<div class="mt-4 flex justify-end gap-2">
<button
type="button"
class="btn btn-sm preset-tonal-surface"
onclick={() => tc_dialog_ref?.close()}>Cancel</button>
<button
type="button"
class="btn btn-sm preset-filled-primary"
onclick={() => tc_dialog_ref?.close()}>Got it</button>
onclick={() => {
save_field('allow_tracking', { allow_tracking: edit_allow_tracking });
tc_dialog_ref?.close();
}}>Save & Close</button>
</div>
</div>
</dialog>