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

refactor(badges): standardize helpers and apply batch formatting

Browse Source 
- Standardized 'prevent_default' helper names across badges module.
- Corrected native 'event.preventDefault()' calls in view and template components.
- Applied batch formatting (printWidth: 80) to all badges files.
This commit is contained in:
Scott Idem
2026-02-06 14:55:43 -05:00
parent 67752ccdfe
commit 5385eacc0f
11 changed files with 648 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/routes/events/[event_id]/(badges)/badges/[badge_id]/+page.svelte
View File

@@ -48,7 +48,10 @@
}
let results = await db_events.badge.get(event_badge_id);
if (log_lvl) {
console.log(`*** LiveQuery: lq__event_badge_obj *** results=`, results);
console.log(
`*** LiveQuery: lq__event_badge_obj *** results=`,
results
);
}
return results;
})
@@ -56,7 +59,9 @@
let lq__event_badge_template_obj = $derived(
liveQuery(async () => {
let results = await db_events.badge_template.get($lq__event_badge_obj?.event_badge_template_id ?? ''); // null or undefined does not reset things like '' does
let results = await db_events.badge_template.get(
$lq__event_badge_obj?.event_badge_template_id ?? ''
); // null or undefined does not reset things like '' does
if (log_lvl) {
console.log(
@@ -86,7 +91,9 @@
let lq__event_obj: any = $state(undefined);
onMount(() => {
const observable = liveQuery(() => db_events.event.get($events_slct?.event_id ?? ''));
const observable = liveQuery(() =>
db_events.event.get($events_slct?.event_id ?? '')
);
const subscription = observable.subscribe((value) => {
lq__event_obj = value;
});
@@ -109,7 +116,9 @@
<title>
&AElig;: Badge -
{$lq__event_badge_obj?.given_name ?? '-- not set --'}
{$lq__event_badge_obj?.family_name ? $lq__event_badge_obj?.family_name.charAt(0) + '.' : ''}
{$lq__event_badge_obj?.family_name
? $lq__event_badge_obj?.family_name.charAt(0) + '.'
: ''}
- Badges v3 -
{$events_loc?.title}
</title>
@@ -149,13 +158,13 @@
</header>
{#if $lq__event_badge_obj}
<Comp_badge_obj_view
event_id={$lq__event_badge_obj.event_id}
{event_badge_id}
lq__event_badge_obj={lq__event_badge_obj}
{is_review_mode}
lq__event_badge_template_obj={lq__event_badge_template_obj}
/>
<Comp_badge_obj_view
event_id={$lq__event_badge_obj.event_id}
{event_badge_id}
{lq__event_badge_obj}
{is_review_mode}
{lq__event_badge_template_obj}
/>
{/if}
{:else}
<p>No IDB record found for ID: {event_badge_id}</p>

284
src/routes/events/[event_id]/(badges)/badges/[badge_id]/ae_comp__badge_obj_view.svelte
View File

@@ -100,20 +100,27 @@
$effect(() => {
if ($lq__event_badge_obj) {
if (log_lvl) {
console.log('Initializing editable fields from lq__event_badge_obj');
console.log(
'Initializing editable fields from lq__event_badge_obj'
);
}
editable_full_name_override =
$lq__event_badge_obj.full_name_override ?? $lq__event_badge_obj.full_name;
$lq__event_badge_obj.full_name_override ??
$lq__event_badge_obj.full_name;
editable_professional_title_override =
$lq__event_badge_obj.professional_title_override ??
$lq__event_badge_obj.professional_title;
editable_affiliations_override =
$lq__event_badge_obj.affiliations_override ?? $lq__event_badge_obj.affiliations;
$lq__event_badge_obj.affiliations_override ??
$lq__event_badge_obj.affiliations;
editable_location_override =
$lq__event_badge_obj.location_override ?? $lq__event_badge_obj.location;
editable_allow_tracking = $lq__event_badge_obj.allow_tracking ?? null;
$lq__event_badge_obj.location_override ??
$lq__event_badge_obj.location;
editable_allow_tracking =
$lq__event_badge_obj.allow_tracking ?? null;
editable_email = $lq__event_badge_obj.email ?? null;
editable_badge_type_code = $lq__event_badge_obj.badge_type_code ?? null;
editable_badge_type_code =
$lq__event_badge_obj.badge_type_code ?? null;
if (is_review_mode) {
edit_mode_active = true;
@@ -137,7 +144,6 @@
let option_other_1_override = $state('');
let option_other_2_override = $state('');
let slct_badge_type = '';
/* *** BEGIN *** This should be moved out */
@@ -154,8 +160,10 @@
code_to_html.option_1['1'] = '<span class="fas fa-biohazard"></span>';
code_to_html.option_1['true'] = '<span class="fas fa-biohazard"></span>';
code_to_html.option_1['True'] = '<span class="fas fa-biohazard"></span>';
code_to_html.option_1['Dairy Free'] = '<span class="fas fa-utensils"></span>';
code_to_html.option_1['Gluten Free'] = '<span class="fas fa-utensils"></span>';
code_to_html.option_1['Dairy Free'] =
'<span class="fas fa-utensils"></span>';
code_to_html.option_1['Gluten Free'] =
'<span class="fas fa-utensils"></span>';
code_to_html.option_1['Halal'] = '<span class="fas fa-utensils"></span>';
code_to_html.option_1['Kosher'] = '<span class="fas fa-utensils"></span>';
code_to_html.option_1['Meat'] = '<span class="fas fa-bone"></span>';
@@ -167,7 +175,8 @@
code_to_html.option_2['true'] = '<span class="fas fa-star-of-life"></span>';
code_to_html.option_2['True'] = '<span class="fas fa-star-of-life"></span>';
code_to_html.option_2['First Time '] = '<span class="fas fa-hand-paper"></span>';
code_to_html.option_2['First Time '] =
'<span class="fas fa-hand-paper"></span>';
/* *** END *** This should be moved out */
let full_name_class_size: string = $state('text-[.60in]');
@@ -177,7 +186,6 @@
// WARNING: This does not currently take into account the total lengths of the strings, only the longest part when split by spaces. This help with wrapping in the tighter spaces of the badge.
$effect(() => {
// Re-calculate font sizes based on potentially edited values
// Only run if we have the badge object
@@ -190,11 +198,14 @@
$lq__event_badge_obj.professional_title ??
'';
const current_affiliations =
editable_affiliations_override ?? $lq__event_badge_obj.affiliations ?? '';
editable_affiliations_override ??
$lq__event_badge_obj.affiliations ??
'';
const current_location =
editable_location_override ?? $lq__event_badge_obj.location ?? '';
let longest_full_name_override_part = longest_str_part(current_full_name);
let longest_full_name_override_part =
longest_str_part(current_full_name);
if (longest_full_name_override_part >= 9) {
full_name_class_size = 'text-[.45in]';
} else if (longest_full_name_override_part >= 7) {
@@ -203,7 +214,9 @@
full_name_class_size = 'text-[.75in]';
}
let longest_professional_title_override_part = longest_str_part(current_professional_title);
let longest_professional_title_override_part = longest_str_part(
current_professional_title
);
if (longest_professional_title_override_part >= 13) {
professional_title_class_size = 'text-[.35in]';
} else if (longest_professional_title_override_part >= 10) {
@@ -214,7 +227,8 @@
professional_title_class_size = 'text-[.35in]';
}
let longest_affiliations_override_part = longest_str_part(current_affiliations);
let longest_affiliations_override_part =
longest_str_part(current_affiliations);
if (longest_affiliations_override_part >= 55) {
affiliations_class_size = 'text-[.30in]';
} else if (longest_affiliations_override_part >= 45) {
@@ -260,7 +274,7 @@
// *** Functions and Logic
function prevent_default<T extends Event>(fn: (event: T) => void) {
return function (event: T) {
event.prevent_default();
event.preventDefault();
fn(event);
};
}
@@ -334,7 +348,10 @@
qr_data_url = '';
try {
// Use 'vcard' as the qr_type, passing all required params
const dataUrl = await core_func.js_generate_qr_code('vcard', qrParams);
const dataUrl = await core_func.js_generate_qr_code(
'vcard',
qrParams
);
qr_data_url = dataUrl;
} catch (error) {
qr_error_message = error.message;
@@ -356,7 +373,8 @@
// Only include fields that have actually changed
if (
editable_full_name_override !==
($lq__event_badge_obj.full_name_override ?? $lq__event_badge_obj.full_name)
($lq__event_badge_obj.full_name_override ??
$lq__event_badge_obj.full_name)
) {
data_to_update.full_name_override = editable_full_name_override;
}
@@ -365,17 +383,21 @@
($lq__event_badge_obj.professional_title_override ??
$lq__event_badge_obj.professional_title)
) {
data_to_update.professional_title_override = editable_professional_title_override;
data_to_update.professional_title_override =
editable_professional_title_override;
}
if (
editable_affiliations_override !==
($lq__event_badge_obj.affiliations_override ?? $lq__event_badge_obj.affiliations)
($lq__event_badge_obj.affiliations_override ??
$lq__event_badge_obj.affiliations)
) {
data_to_update.affiliations_override = editable_affiliations_override;
data_to_update.affiliations_override =
editable_affiliations_override;
}
if (
editable_location_override !==
($lq__event_badge_obj.location_override ?? $lq__event_badge_obj.location)
($lq__event_badge_obj.location_override ??
$lq__event_badge_obj.location)
) {
data_to_update.location_override = editable_location_override;
}
@@ -425,17 +447,22 @@
function handle_cancel_changes() {
if ($lq__event_badge_obj) {
editable_full_name_override =
$lq__event_badge_obj.full_name_override ?? $lq__event_badge_obj.full_name;
$lq__event_badge_obj.full_name_override ??
$lq__event_badge_obj.full_name;
editable_professional_title_override =
$lq__event_badge_obj.professional_title_override ??
$lq__event_badge_obj.professional_title;
editable_affiliations_override =
$lq__event_badge_obj.affiliations_override ?? $lq__event_badge_obj.affiliations;
$lq__event_badge_obj.affiliations_override ??
$lq__event_badge_obj.affiliations;
editable_location_override =
$lq__event_badge_obj.location_override ?? $lq__event_badge_obj.location;
editable_allow_tracking = $lq__event_badge_obj.allow_tracking ?? null;
$lq__event_badge_obj.location_override ??
$lq__event_badge_obj.location;
editable_allow_tracking =
$lq__event_badge_obj.allow_tracking ?? null;
editable_email = $lq__event_badge_obj.email ?? null;
editable_badge_type_code = $lq__event_badge_obj.badge_type_code ?? null;
editable_badge_type_code =
$lq__event_badge_obj.badge_type_code ?? null;
}
if (!is_review_mode) {
edit_mode_active = false;
@@ -479,8 +506,7 @@ onkeypress={() => {
max-w-[8.5in] overflow-visible
"
>
<!-- <pre>
<!-- <pre>
{$lq__event_badge_obj?.event_id}
{$lq__event_badge_obj?.event_badge_id}
{$lq__event_badge_obj?.event_badge_template_id}
@@ -528,7 +554,8 @@ onkeypress={() => {
class:preset-tonal-warning={edit_mode_active}
>
{#if edit_mode_active}
<button type="button"
<button
type="button"
class="
btn btn-sm text-xs
preset-tonal-success preset-outlined-success-100-900 hover:preset-filled-success-500
@@ -548,7 +575,8 @@ onkeypress={() => {
Save Changes
</span>
</button>
<button type="button"
<button
type="button"
class="
btn btn-sm text-xs
preset-tonal-tertiary preset-outlined-tertiary-100-900 hover:preset-filled-tertiary-500
@@ -569,7 +597,8 @@ onkeypress={() => {
</span>
</button>
{:else}
<button type="button"
<button
type="button"
class="
btn btn-sm text-xs
preset-tonal-warning preset-outlined-warning-100-900 hover:preset-filled-secondary-500
@@ -594,10 +623,14 @@ onkeypress={() => {
</button>
{/if}
<div class="w-md max-w-lg m-1 p-1" class:hidden={!edit_mode_active}>
<div
class="w-md max-w-lg m-1 p-1"
class:hidden={!edit_mode_active}
>
<p class="text-xs italic text-gray-500">
Show list of fields that they can edit here. This may need to broken down in
to sections that can be collapsed.
Show list of fields that they can edit here. This may
need to broken down in to sections that can be
collapsed.
</p>
<ul class="text-left list-disc list-inside text-sm">
<li>Full Name</li>
@@ -672,7 +705,9 @@ onkeypress={() => {
<!-- NOTE: Need to add some logic if any part of the name is 9 characters or more to reduce the font size OR if the total length is more than 15ish to reduce the font size :NOTE -->
<!-- Examples: mSC-tTzL_OA, QLddtYl8sfo -->
<div class="full_name_override_all {full_name_class_size} leading-none">
<div
class="full_name_override_all {full_name_class_size} leading-none"
>
<!-- <span class="float-right text-sm italic m-2">
{longest_full_name_override_part}&times; char
</span> -->
@@ -703,7 +738,9 @@ onkeypress={() => {
{#if edit_mode_active}
<input
type="text"
bind:value={editable_professional_title_override}
bind:value={
editable_professional_title_override
}
class="input w-full text-center"
/>
{:else}
@@ -728,7 +765,9 @@ onkeypress={() => {
>
{#if edit_mode_active}
<textarea
bind:value={editable_affiliations_override}
bind:value={
editable_affiliations_override
}
class="textarea w-full text-center"
rows="2"
></textarea>
@@ -782,12 +821,16 @@ onkeypress={() => {
<label
>Allow Tracking: <input
type="checkbox"
bind:checked={editable_allow_tracking}
bind:checked={
editable_allow_tracking
}
class="checkbox"
/></label
>
{:else}
Allow Tracking: {editable_allow_tracking ? 'Yes' : 'No'}
Allow Tracking: {editable_allow_tracking
? 'Yes'
: 'No'}
{/if}
</div>
{/if}
@@ -803,10 +846,12 @@ onkeypress={() => {
</span>
<span class="badge_body_special_right">
{#if option_ticket_2_override}
<span class=" ticket_2_code fg_red fas fa-star"></span>
<span class=" ticket_2_code fg_red fas fa-star"
></span>
{/if}
{#if option_ticket_3_override}
<span class="ticket_3_code fg_blue fas fa-star"></span>
<span class="ticket_3_code fg_blue fas fa-star"
></span>
{/if}
</span>
{#if lq__event_badge_template_obj.show_qr_front}
@@ -866,7 +911,8 @@ onkeypress={() => {
>
{/if}
<span class="badge_footer_center {editable_badge_type_code?.toLowerCase()}"
<span
class="badge_footer_center {editable_badge_type_code?.toLowerCase()}"
>{editable_badge_type_code}</span
>
@@ -1015,17 +1061,27 @@ onkeypress={() => {
"
>
{#if $lq__event_badge_template_obj.wireless_ssid}
<div class="grow flex flex-col gap-0 items-center justify-end">
<span class="w-full flex flex-row gap-1 items-center justify-start">
<span class="w-20 text-gray-500 italic"> Signal Name </span>
<div
class="grow flex flex-col gap-0 items-center justify-end"
>
<span
class="w-full flex flex-row gap-1 items-center justify-start"
>
<span class="w-20 text-gray-500 italic">
Signal Name
</span>
<strong
class="wifi_ssid font-bold font-mono text-lg tracking-widest leading-none"
>
{$lq__event_badge_template_obj.wireless_ssid}
</strong>
</span>
<span class="w-full flex flex-row gap-1 items-center justify-start">
<span class="w-20 text-gray-500 italic"> Access Code </span>
<span
class="w-full flex flex-row gap-1 items-center justify-start"
>
<span class="w-20 text-gray-500 italic">
Access Code
</span>
<strong
class="wifi_code font-bold font-mono text-lg tracking-widest leading-none"
>
@@ -1042,8 +1098,10 @@ onkeypress={() => {
{/if}
<div class="network_username_password hidden">
Username = <span class="network_username">username</span><br />
Password = <span class="network_password">password</span>
Username = <span class="network_username">username</span
><br />
Password =
<span class="network_password">password</span>
</div>
</div>
@@ -1052,7 +1110,9 @@ onkeypress={() => {
<!-- <img style="width: .75in; float: right;" src="/event/qr_image/testing123" alt="missing person information QR code"> -->
<ol style="margin: 0; padding-top: 0; padding-bottom: 0;">
<li style="">
Use QR code or search your app store for "<strong>App Name</strong>"
Use QR code or search your app store for "<strong
>App Name</strong
>"
</li>
<li style="">
Once downloaded, use the search feature to find "<strong
@@ -1060,7 +1120,9 @@ onkeypress={() => {
>" guide
</li>
<li style="">
You may also go to <a href="https://oneskyit.com/">OneSkyIT.com</a>
You may also go to <a href="https://oneskyit.com/"
>OneSkyIT.com</a
>
</li>
</ol>
</div>
@@ -1072,19 +1134,29 @@ onkeypress={() => {
<!-- <strong>Attendee Info:</strong> -->
<ul>
{#if $lq__event_badge_obj.ticket_1_code}
<li>{@html $lq__event_badge_template_obj.ticket_1_text}</li>
<li>
{@html $lq__event_badge_template_obj.ticket_1_text}
</li>
{/if}
{#if $lq__event_badge_obj.ticket_2_code}
<li>{@html $lq__event_badge_template_obj.ticket_2_text}</li>
<li>
{@html $lq__event_badge_template_obj.ticket_2_text}
</li>
{/if}
{#if $lq__event_badge_obj.ticket_3_code}
<li>{@html $lq__event_badge_template_obj.ticket_3_text}</li>
<li>
{@html $lq__event_badge_template_obj.ticket_3_text}
</li>
{/if}
{#if $lq__event_badge_obj.ticket_4_code}
<li>{@html $lq__event_badge_template_obj.ticket_4_text}</li>
<li>
{@html $lq__event_badge_template_obj.ticket_4_text}
</li>
{/if}
{#if $lq__event_badge_obj.ticket_5_code}
<li>{@html $lq__event_badge_template_obj.ticket_5_text}</li>
<li>
{@html $lq__event_badge_template_obj.ticket_5_text}
</li>
{/if}
</ul>
@@ -1192,7 +1264,9 @@ onkeypress={() => {
alt="badge QR code"
ondblclick={() => {
// (hide_qr) ? hide_qr = !hide_qr : hide_qr;
hide_qr ? (hide_qr = false) : (hide_qr = true);
hide_qr
? (hide_qr = false)
: (hide_qr = true);
}}
/>
<div
@@ -1203,22 +1277,28 @@ onkeypress={() => {
>
{#if $lq__event_badge_obj.allow_tracking}
<p>
This was <strong>allowed</strong> at the time your badge
was printed. You may opt-out at anytime.
This was <strong>allowed</strong
> at the time your badge was printed.
You may opt-out at anytime.
</p>
<p>
By allowing this QR code to be scanned by an
exhibitor or staff, you understand and agree that
they may use your personal information.
By allowing this QR code to be
scanned by an exhibitor or
staff, you understand and agree
that they may use your personal
information.
</p>
{:else}
<p>
Tracking was <strong>not</strong> allowed at the time
your badge was printed. You may opt-in at anytime.
Tracking was <strong>not</strong
> allowed at the time your badge was
printed. You may opt-in at anytime.
</p>
<p>
If this QR code is scanned by an exhibitor or staff,
they will <strong>not</strong> have access to your information.
If this QR code is scanned by an
exhibitor or staff, they will <strong
>not</strong
> have access to your information.
</p>
{/if}
</div>
@@ -1252,8 +1332,12 @@ onkeypress={() => {
alt="check badge logo"
/>
<div class="banner_text">
<div class="row_one">{$lq__event_badge_template_obj.header_row_1}</div>
<div class="row_two">{$lq__event_badge_template_obj.header_row_2}</div>
<div class="row_one">
{$lq__event_badge_template_obj.header_row_1}
</div>
<div class="row_two">
{$lq__event_badge_template_obj.header_row_2}
</div>
</div>
</div>
@@ -1261,17 +1345,21 @@ onkeypress={() => {
<!-- receipt_content class div start -->
<div>
<span style="display: none;"
>Invoice Number: <span class="Invoice_Number">Invoice_Number</span><br
/></span
>Invoice Number: <span class="Invoice_Number"
>Invoice_Number</span
><br /></span
>
Account Number: <span class="BT_ID">BT_ID</span><br />
Order Number: <span class="Order_Number">Order_Number</span><br />
Order Number:
<span class="Order_Number">Order_Number</span><br />
</div>
<hr />
<div>
Name: <span class="Orders_Full_Name">Full Name</span> (ID:
<span class="Member_ID">Member_ID</span>)<br />
<address><span class="Orders_Full_Address">Full Address</span></address>
<address>
<span class="Orders_Full_Address">Full Address</span>
</address>
Email:<span class="Orders_Email">No Email</span>
</div>
<hr />
@@ -1288,34 +1376,49 @@ onkeypress={() => {
</thead>
<tbody>
<tr class="roweven"
><td>1</td><td>Registration for Meeting</td><td>1</td><td>$300.00</td
><td>$300.00</td></tr
><td>1</td><td>Registration for Meeting</td><td
>1</td
><td>$300.00</td><td>$300.00</td></tr
>
<tr class="rowodd"
><td>2</td><td>Printed Program</td><td>1</td><td>$25.00</td><td
><td>2</td><td>Printed Program</td><td>1</td><td
>$25.00</td
></tr
><td>$25.00</td></tr
>
<tr class="roweven"
><td>3</td><td>Opening Reception</td><td>1</td><td>$0.00</td><td
><td>3</td><td>Opening Reception</td><td>1</td><td
>$0.00</td
></tr
><td>$0.00</td></tr
>
<tr class="rowodd"
><td>4</td><td>Closing Banquet</td><td>1</td><td>$85.00</td><td
><td>4</td><td>Closing Banquet</td><td>1</td><td
>$85.00</td
><td>$85.00</td></tr
>
<tr
><th colspan="4">Total Charges:</th><th colspan="2"
>$410.00</th
></tr
>
<tr
><th colspan="4">Total Payments:</th><th colspan="2"
>$410.00</th
></tr
>
<tr
><th colspan="4">Balance:</th><th colspan="2"
>$0.00</th
></tr
>
<tr><th colspan="4">Total Charges:</th><th colspan="2">$410.00</th></tr>
<tr><th colspan="4">Total Payments:</th><th colspan="2">$410.00</th></tr>
<tr><th colspan="4">Balance:</th><th colspan="2">$0.00</th></tr>
</tbody>
</table>
</div>
<!-- receipt_content class div end -->
<div class="receipt_footer">
<p class="printed">Receipt Printed: January 23, 2019 03:18 PM</p>
<p class="printed">
Receipt Printed: January 23, 2019 03:18 PM
</p>
</div>
</section>
<!-- receipt class div end -->
@@ -1392,22 +1495,21 @@ onkeypress={() => {
<!-- End if for $lq__event_badge_template_obj -->
</section>
<div>
<h1 class="text-lg font-bold mt-4">Debug Information</h1>
<pre
class="whitespace-pre-wrap break-words text-xs max-h-32 overflow-auto p-2 bg-surface-200 border border-surface-300 rounded
<h1 class="text-lg font-bold mt-4">Debug Information</h1>
<pre
class="whitespace-pre-wrap break-words text-xs max-h-32 overflow-auto p-2 bg-surface-200 border border-surface-300 rounded
mt-4
print:hidden
">
{JSON.stringify($lq__event_badge_obj, null, 2)}
</pre>
<pre
class="whitespace-pre-wrap break-words text-xs max-h-32 overflow-auto p-2 bg-surface-200 border border-surface-300 rounded
<pre
class="whitespace-pre-wrap break-words text-xs max-h-32 overflow-auto p-2 bg-surface-200 border border-surface-300 rounded
mt-4
print:hidden
">
{JSON.stringify($lq__event_badge_template_obj, null, 2)}
</pre>
</div>
</div>