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

chore(badges): save in-progress changes — background_image_path, cfg_json support, template form TS fix, view boolean fixes

Browse Source
This commit is contained in:
Scott Idem
2026-04-07 13:57:02 -04:00
parent 1e178c14e7
commit 34bf823987
5 changed files with 245 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/ae_events/ae_events__event_badge_template.editable_fields.ts
View File

@@ -4,6 +4,7 @@ export const editable_fields__event_badge_template = [
'logo_filename', 'logo_filename',
'logo_path', 'logo_path',
'header_path', 'header_path',
'background_image_path',
'secondary_header_path', 'secondary_header_path',
'footer_path', 'footer_path',
'header_row_1', 'header_row_1',

3
src/lib/ae_events/ae_events__event_badge_template.ts
View File

@@ -15,6 +15,7 @@ export const properties_to_save = [
'logo_filename', 'logo_filename',
'logo_path', 'logo_path',
'header_path', 'header_path',
'background_image_path',
'secondary_header_path', 'secondary_header_path',
'footer_path', 'footer_path',
'header_row_1', 'header_row_1',
@@ -36,6 +37,8 @@ export const properties_to_save = [
'layout', 'layout',
'style_filename', 'style_filename',
'style_href', 'style_href',
'cfg_json',
'other_json',
'duplex', 'duplex',
'enable', 'enable',
'hide', 'hide',

2
src/lib/ae_events/db_events.ts
View File

@@ -223,6 +223,7 @@ export interface Badge_template {
logo_path?: null | string; logo_path?: null | string;
header_path?: null | string; header_path?: null | string;
background_image_path?: null | string;
secondary_header_path?: null | string; secondary_header_path?: null | string;
footer_path?: null | string; footer_path?: null | string;
@@ -256,6 +257,7 @@ export interface Badge_template {
duplex?: null | number | boolean; duplex?: null | number | boolean;
cfg_json?: null | string; cfg_json?: null | string;
other_json?: null | string;
data_json?: null | string; data_json?: null | string;
enable?: null | boolean; enable?: null | boolean;

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

@@ -185,6 +185,51 @@ let show_badge_back = $derived(
!!$lq__event_badge_template_obj?.duplex !!$lq__event_badge_template_obj?.duplex
); );
// Full-badge background image: when set on the template, covers the entire badge_front
// with the image (background-size: cover). The header section is suppressed — the
// background image already contains the logo/event design. Text content is rendered
// on top via z-index. When unset, the normal header_path / logo+text header logic applies.
let bg_image_path = $derived(
$lq__event_badge_template_obj?.background_image_path ?? null
);
// Parse template cfg_json into an object for per-template flags (hide header/footer, QR)
let template_cfg = $derived.by(() => {
const raw = $lq__event_badge_template_obj?.cfg_json;
if (!raw) return {};
try {
return typeof raw === 'string' ? JSON.parse(raw) : raw;
} catch {
return {};
}
});
// Visibility / QR flags: cfg_json overrides top-level fields when present.
let hide_badge_header = $derived.by(() => {
const cfg = $template_cfg || {};
if (Object.prototype.hasOwnProperty.call(cfg, 'hide_badge_header')) return !!cfg.hide_badge_header;
// Default: if a background image is present, hide header; otherwise show.
return !!$bg_image_path;
});
let hide_badge_footer = $derived.by(() => {
const cfg = $template_cfg || {};
if (Object.prototype.hasOwnProperty.call(cfg, 'hide_badge_footer')) return !!cfg.hide_badge_footer;
return false;
});
let use_show_qr_front = $derived.by(() => {
const cfg = $template_cfg || {};
if (Object.prototype.hasOwnProperty.call(cfg, 'show_qr_front')) return !!cfg.show_qr_front;
return $lq__event_badge_template_obj?.show_qr_front ?? false;
});
let use_show_qr_back = $derived.by(() => {
const cfg = $template_cfg || {};
if (Object.prototype.hasOwnProperty.call(cfg, 'show_qr_back')) return !!cfg.show_qr_back;
return $lq__event_badge_template_obj?.show_qr_back ?? true;
});
/** /**
* Layout-aware section heights for Element_fit_text. * Layout-aware section heights for Element_fit_text.
* *
@@ -201,14 +246,18 @@ let show_badge_back = $derived(
* Flex values: 'around' | 'between' | 'even' | 'center' | 'start' | 'end' * Flex values: 'around' | 'between' | 'even' | 'center' | 'start' | 'end'
* (mapped to space-around, space-between, space-evenly, center, flex-start, flex-end) * (mapped to space-around, space-between, space-evenly, center, flex-start, flex-end)
* *
* TODO: Move to badge template config (cfg_json) once multi-layout events are needed. * Per-template overrides: set cfg_json.fit_heights on the badge template record to
* Tune these values with real badge data and a ruler. * override any subset of these keys without a code deploy. This is especially useful
* when background_image_path is set and the default layout heights need tuning to
* align the text with the background image's designed zones.
* Example cfg_json: { "fit_heights": { "grp_name_title": "1.8in", "name": "1.4in" } }
*/ */
let fit_heights = $derived.by(() => { let fit_heights = $derived.by(() => {
const layout = $lq__event_badge_template_obj?.layout ?? 'badge_4x6_fanfold'; const layout = $lq__event_badge_template_obj?.layout ?? 'badge_4x6_fanfold';
let base: Record<string, string>;
if (layout === 'badge_3.5x5.5_pvc') { if (layout === 'badge_3.5x5.5_pvc') {
// 3.5" × 5.5" PVC card — single-sided, compact // 3.5" × 5.5" PVC card — single-sided, compact
return { base = {
grp_name_title: '1.6in', grp_name_title: '1.6in',
grp_name_title_flex: 'around', grp_name_title_flex: 'around',
name: '1.4in', name: '1.4in',
@@ -220,7 +269,7 @@ let fit_heights = $derived.by(() => {
}; };
} else if (layout === 'badge_4x5_fanfold') { } else if (layout === 'badge_4x5_fanfold') {
// 4" × 5" fanfold — slightly taller, duplex // 4" × 5" fanfold — slightly taller, duplex
return { base = {
grp_name_title: '2.1in', grp_name_title: '2.1in',
grp_name_title_flex: 'around', grp_name_title_flex: 'around',
name: '1.6in', name: '1.6in',
@@ -232,7 +281,7 @@ let fit_heights = $derived.by(() => {
}; };
} else { } else {
// Default: badge_4x6_fanfold — 4" × 6", most room // Default: badge_4x6_fanfold — 4" × 6", most room
return { base = {
grp_name_title: '2.5in', grp_name_title: '2.5in',
grp_name_title_flex: 'around', grp_name_title_flex: 'around',
name: '1.9in', name: '1.9in',
@@ -243,6 +292,22 @@ let fit_heights = $derived.by(() => {
location: '0.55in' location: '0.55in'
}; };
} }
// Apply per-template cfg_json overrides so admins can fine-tune text area
// heights/flex values via the DB without a code deploy.
// cfg_json is stored as a JSON string — parse it before reading fit_heights key.
let cfg_overrides: Record<string, any> | null = null;
const cfg_raw = $lq__event_badge_template_obj?.cfg_json;
if (cfg_raw && typeof cfg_raw === 'string') {
try { cfg_overrides = JSON.parse(cfg_raw)?.fit_heights ?? null; } catch { /* ignore invalid JSON */ }
} else if (cfg_raw && typeof cfg_raw === 'object') {
// Already parsed (future-proof if ever stored as object)
cfg_overrides = (cfg_raw as any)?.fit_heights ?? null;
}
if (cfg_overrides && typeof cfg_overrides === 'object') {
return { ...base, ...cfg_overrides };
}
return base;
}); });
/** /**
@@ -456,7 +521,9 @@ const code_to_icon: {
text-center hover:outline-2 hover:outline-red-500/75 text-center hover:outline-2 hover:outline-red-500/75
hover:outline-dashed hover:outline-dashed
" "
style={demo_bg_style}> style="{bg_image_path
? `background-image: url('${bg_image_path}'); background-size: cover; background-position: top center; background-repeat: no-repeat;`
: ''}{demo_bg_style ? ` ${demo_bg_style}` : ''}">
<span <span
class=" class="
absolute top-1 left-4 text-xs absolute top-1 left-4 text-xs
@@ -467,9 +534,13 @@ const code_to_icon: {
{#if show_badge_back}Front of badge{:else}Badge preview{/if} {#if show_badge_back}Front of badge{:else}Badge preview{/if}
</span> </span>
{#if $lq__event_badge_template_obj.header_path} <!-- Header: controlled by per-template cfg_json (hide_badge_header).
<div If cfg.hide_badge_header is set, it overrides the default. By default
class="badge_header a background image will hide the header unless explicitly overridden. -->
{#if !hide_badge_header}
{#if $lq__event_badge_template_obj.header_path}
<div
class="badge_header
image image
m-0 m-0
max-h-[1.00in] max-h-[1.00in]
@@ -478,27 +549,28 @@ const code_to_icon: {
p-0 p-0
hover:outline-2 hover:outline-gray-500/75 hover:outline-dashed hover:outline-2 hover:outline-gray-500/75 hover:outline-dashed
"> ">
<img <img
class="header_image" class="header_image"
class:header_full_width={banner_full_width} class:header_full_width={banner_full_width}
src={$lq__event_badge_template_obj.header_path} src={$lq__event_badge_template_obj.header_path}
alt="check header path" /> alt="check header path" />
</div> </div>
{:else} {:else}
<div class="badge_header logo_text"> <div class="badge_header logo_text">
<img <img
class="badge_logo" class="badge_logo"
src={$lq__event_badge_template_obj.logo_path} src={$lq__event_badge_template_obj.logo_path}
alt="check badge logo" /> alt="check badge logo" />
<div class="banner_text"> <div class="banner_text">
<div class="row_one"> <div class="row_one">
{@html $lq__event_badge_template_obj.header_row_1} {@html $lq__event_badge_template_obj.header_row_1}
</div> </div>
<div class="row_two"> <div class="row_two">
{@html $lq__event_badge_template_obj.header_row_2} {@html $lq__event_badge_template_obj.header_row_2}
</div>
</div> </div>
</div> </div>
</div> {/if}
{/if} {/if}
<div <div
@@ -618,7 +690,7 @@ const code_to_icon: {
<!-- Ticket indicators (front) + front QR if template enables it. <!-- Ticket indicators (front) + front QR if template enables it.
ticket_N_code fields drive the Star icons — empty = no indicator. --> ticket_N_code fields drive the Star icons — empty = no indicator. -->
{#if eff_badge?.ticket_1_code || eff_badge?.ticket_2_code || eff_badge?.ticket_3_code || $lq__event_badge_template_obj?.show_qr_front} {#if eff_badge?.ticket_1_code || eff_badge?.ticket_2_code || eff_badge?.ticket_3_code || use_show_qr_front}
<div class="special flex w-full flex-col items-center"> <div class="special flex w-full flex-col items-center">
<div class="flex w-full flex-row justify-between"> <div class="flex w-full flex-row justify-between">
<span class="badge_body_special_left"> <span class="badge_body_special_left">
@@ -638,7 +710,7 @@ const code_to_icon: {
>{/if} >{/if}
</span> </span>
</div> </div>
{#if $lq__event_badge_template_obj?.show_qr_front} {#if use_show_qr_front}
{#await qr_data_url} {#await qr_data_url}
<!-- QR generating — show nothing to avoid layout shift --> <!-- QR generating — show nothing to avoid layout shift -->
{:then result} {:then result}
@@ -654,6 +726,7 @@ const code_to_icon: {
{/if} {/if}
</div> </div>
{#if !hide_badge_footer}
<div <div
class="badge_footer class="badge_footer
{effective_badge_type_code.toLowerCase()} {effective_badge_type_code.toLowerCase()}
@@ -693,7 +766,9 @@ const code_to_icon: {
size="1em" />{/if} size="1em" />{/if}
</span> </span>
{/if} {/if}
</div> </div>
{/if}
<!-- badge class div end --> <!-- badge class div end -->
</section> </section>
@@ -724,9 +799,10 @@ const code_to_icon: {
Back of badge Back of badge
</span> </span>
{#if $lq__event_badge_template_obj.secondary_header_path} {#if !hide_badge_header}
<div {#if $lq__event_badge_template_obj.secondary_header_path}
class="badge_back_header <div
class="badge_back_header
image image
m-0 m-0
max-h-[1.00in] max-h-[1.00in]
@@ -734,35 +810,36 @@ const code_to_icon: {
p-0 p-0
hover:outline-2 hover:outline-gray-500/75 hover:outline-dashed hover:outline-2 hover:outline-gray-500/75 hover:outline-dashed
"> ">
<img <img
class="header_image" class="header_image"
class:header_full_width={banner_full_width} class:header_full_width={banner_full_width}
src={$lq__event_badge_template_obj.secondary_header_path} src={$lq__event_badge_template_obj.secondary_header_path}
alt="check secondary header path" /> alt="check secondary header path" />
</div> </div>
{:else if $lq__event_badge_template_obj.header_path} {:else if $lq__event_badge_template_obj.header_path}
<div class="badge_back_header image max-w-xl"> <div class="badge_back_header image max-w-xl">
<img <img
class="header_image" class="header_image"
class:header_full_width={banner_full_width} class:header_full_width={banner_full_width}
src={$lq__event_badge_template_obj.header_path} src={$lq__event_badge_template_obj.header_path}
alt="check primary header path" /> alt="check primary header path" />
</div> </div>
{:else} {:else}
<div class="badge_back_header logo_text"> <div class="badge_back_header logo_text">
<img <img
class="badge_logo" class="badge_logo"
src={$lq__event_badge_template_obj.logo_path} src={$lq__event_badge_template_obj.logo_path}
alt="check badge logo" /> alt="check badge logo" />
<div class="banner_text"> <div class="banner_text">
<div class="row_one"> <div class="row_one">
{@html $lq__event_badge_template_obj.header_row_1} {@html $lq__event_badge_template_obj.header_row_1}
</div> </div>
<div class="row_two"> <div class="row_two">
{@html $lq__event_badge_template_obj.header_row_2} {@html $lq__event_badge_template_obj.header_row_2}
</div>
</div> </div>
</div> </div>
</div> {/if}
{/if} {/if}
<div <div
@@ -903,7 +980,7 @@ const code_to_icon: {
</div> </div>
{/if} {/if}
{#if $lq__event_badge_template_obj.show_qr_back} {#if use_show_qr_back}
<div <div
class="person_information qr_badge_id class="person_information qr_badge_id
"> ">

107
src/routes/events/[event_id]/(badges)/templates/ae_comp__badge_template_form.svelte
View File

@@ -30,6 +30,7 @@ function prevent_default(fn: () => void) {
// Form fields (Runes) // Form fields (Runes)
let name = $state(''); let name = $state('');
let background_image_path = $state('');
let header_path = $state(''); let header_path = $state('');
let logo_path = $state(''); let logo_path = $state('');
let header_row_1 = $state(''); let header_row_1 = $state('');
@@ -44,6 +45,14 @@ let ticket_1_text = $state('');
let ticket_2_text = $state(''); let ticket_2_text = $state('');
let ticket_3_text = $state(''); let ticket_3_text = $state('');
// Advanced / cfg_json states
let advanced_open = $state(false);
let existing_cfg_raw = $state('');
let cfg_hide_badge_header = $state(false);
let cfg_hide_badge_footer = $state(false);
let cfg_show_qr_front = $state(false);
let cfg_show_qr_back = $state(true);
let submit_status = $state('idle'); // idle, loading, success, error let submit_status = $state('idle'); // idle, loading, success, error
// Load template data if in edit mode // Load template data if in edit mode
@@ -65,19 +74,45 @@ async function load_template(id: string) {
}); });
if (template_obj) { if (template_obj) {
name = template_obj.name || ''; name = template_obj.name || '';
background_image_path = template_obj.background_image_path || '';
header_path = template_obj.header_path || ''; header_path = template_obj.header_path || '';
logo_path = template_obj.logo_path || ''; logo_path = template_obj.logo_path || '';
header_row_1 = template_obj.header_row_1 || ''; header_row_1 = template_obj.header_row_1 || '';
header_row_2 = template_obj.header_row_2 || ''; header_row_2 = template_obj.header_row_2 || '';
secondary_header_path = template_obj.secondary_header_path || ''; secondary_header_path = template_obj.secondary_header_path || '';
footer_text = template_obj.footer_text || ''; footer_text = template_obj.footer_text || '';
show_qr_front = template_obj.show_qr_front ?? true;
show_qr_back = template_obj.show_qr_back ?? true;
wireless_ssid = template_obj.wireless_ssid || ''; wireless_ssid = template_obj.wireless_ssid || '';
wireless_password = template_obj.wireless_password || ''; wireless_password = template_obj.wireless_password || '';
ticket_1_text = template_obj.ticket_1_text || ''; ticket_1_text = template_obj.ticket_1_text || '';
ticket_2_text = template_obj.ticket_2_text || ''; ticket_2_text = template_obj.ticket_2_text || '';
ticket_3_text = template_obj.ticket_3_text || ''; ticket_3_text = template_obj.ticket_3_text || '';
// Preserve existing cfg_json and expose cfg flags in the form
existing_cfg_raw = template_obj.cfg_json || '';
let parsed_cfg: any = {};
try {
parsed_cfg = existing_cfg_raw
? typeof existing_cfg_raw === 'string'
? JSON.parse(existing_cfg_raw)
: existing_cfg_raw
: {};
} catch {
parsed_cfg = {};
}
cfg_hide_badge_header = parsed_cfg.hide_badge_header ?? false;
cfg_hide_badge_footer = parsed_cfg.hide_badge_footer ?? false;
cfg_show_qr_front = parsed_cfg.hasOwnProperty('show_qr_front')
? parsed_cfg.show_qr_front
: (template_obj.show_qr_front ?? false);
cfg_show_qr_back = parsed_cfg.hasOwnProperty('show_qr_back')
? parsed_cfg.show_qr_back
: (template_obj.show_qr_back ?? true);
// Keep top-level fields in sync for backward compatibility
show_qr_front = cfg_show_qr_front;
show_qr_back = cfg_show_qr_back;
submit_status = 'idle'; submit_status = 'idle';
} else { } else {
submit_status = 'error'; submit_status = 'error';
@@ -91,21 +126,42 @@ async function load_template(id: string) {
async function handle_submit() { async function handle_submit() {
submit_status = 'loading'; submit_status = 'loading';
// Merge cfg_json preserving unknown keys, then set our cfg flags
let cfg_obj: any = {};
try {
cfg_obj = existing_cfg_raw
? typeof existing_cfg_raw === 'string'
? JSON.parse(existing_cfg_raw)
: existing_cfg_raw
: {};
} catch {
cfg_obj = {};
}
cfg_obj.hide_badge_header = cfg_hide_badge_header;
cfg_obj.hide_badge_footer = cfg_hide_badge_footer;
cfg_obj.show_qr_front = cfg_show_qr_front;
cfg_obj.show_qr_back = cfg_show_qr_back;
const data_to_save: key_val = { const data_to_save: key_val = {
name, name,
background_image_path,
header_path, header_path,
logo_path, logo_path,
header_row_1, header_row_1,
header_row_2, header_row_2,
secondary_header_path, secondary_header_path,
footer_text, footer_text,
show_qr_front, // keep top-level show_qr fields in sync for backward compatibility
show_qr_back, show_qr_front: cfg_show_qr_front,
show_qr_back: cfg_show_qr_back,
wireless_ssid, wireless_ssid,
wireless_password, wireless_password,
ticket_1_text, ticket_1_text,
ticket_2_text, ticket_2_text,
ticket_3_text ticket_3_text,
cfg_json: JSON.stringify(cfg_obj)
}; };
try { try {
@@ -153,7 +209,17 @@ function handle_cancel() {
</label> </label>
<label class="label"> <label class="label">
<span>Header Path (URL)</span> <span>Background Image Path (URL) — full-badge background, replaces header</span>
<input type="text" bind:value={background_image_path} class="input" />
</label>
{#if background_image_path}
<p class="text-xs text-amber-600 dark:text-amber-400">
⚠ When a background image is set, the header path and logo/text header are hidden on the badge front — the background image covers the full badge.
</p>
{/if}
<label class="label">
<span>Header Path (URL) — top banner image (used when no background image)</span>
<input type="text" bind:value={header_path} class="input" /> <input type="text" bind:value={header_path} class="input" />
</label> </label>
<label class="label"> <label class="label">
@@ -214,6 +280,35 @@ function handle_cancel() {
></textarea> ></textarea>
</label> </label>
<section class="border-t pt-3">
<button type="button" class="text-sm text-surface-500" onclick={() => (advanced_open = !advanced_open)}>
Advanced (cfg_json) {advanced_open ? '▲' : '▼'}
</button>
{#if advanced_open}
<div class="grid grid-cols-1 gap-2 pt-2">
<label class="label flex items-center gap-2">
<input type="checkbox" bind:checked={cfg_hide_badge_header} class="checkbox" />
<span>Hide badge header</span>
</label>
<label class="label flex items-center gap-2">
<input type="checkbox" bind:checked={cfg_hide_badge_footer} class="checkbox" />
<span>Hide badge footer</span>
</label>
<label class="label flex items-center gap-2">
<input type="checkbox" bind:checked={cfg_show_qr_front} class="checkbox" />
<span>Show QR on Front (cfg_json)</span>
</label>
<label class="label flex items-center gap-2">
<input type="checkbox" bind:checked={cfg_show_qr_back} class="checkbox" />
<span>Show QR on Back (cfg_json)</span>
</label>
<p class="text-xs text-surface-400 italic">
These values are saved into <code>cfg_json</code>. Existing cfg_json keys are preserved.
</p>
</div>
{/if}
</section>
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<button <button
type="button" type="button"