Work on badge rendering.
This commit is contained in:
Scott Idem
@@ -39,7 +39,7 @@ let journals_local_data_struct: key_val = {
|
|||||||
|
|
||||||
llm__api_base_url: 'https://ai.dgrzone.com/api',
|
llm__api_base_url: 'https://ai.dgrzone.com/api',
|
||||||
llm__api_model: 'dgrzone-deepseek-8b-quick',
|
llm__api_model: 'dgrzone-deepseek-8b-quick',
|
||||||
llm__api_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVhYjI2MzdlLThiMjktNGM2Zi05MzVhLWFkYjU1MDkwMGU5MCJ9.4y5AStXZJAVnWRlgG3lVV0-xKIfMzqdNRuInGwT0ThQ',
|
llm__api_token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVhYjI2MzdlLThiMjktNGM2Zi05MzVhLWFkYjU1MDkwMGU5MCJ9.VObfR91GrX3j1vHbHZqGsOWEyrL981cbSWWjaXfYbUQ',
|
||||||
llm__api_dangerous_browser: false, // This allows for use of localhost.
|
llm__api_dangerous_browser: false, // This allows for use of localhost.
|
||||||
llm__stream: false, // Whether to use streaming or not. Not all APIs support this.
|
llm__stream: false, // Whether to use streaming or not. Not all APIs support this.
|
||||||
llm__timeout_ms: 60000, // 60 seconds
|
llm__timeout_ms: 60000, // 60 seconds
|
||||||
|
|||||||
@@ -190,6 +190,10 @@ code_to_html.option_2['First Time '] = '<span class="fas fa-hand-paper"></span>'
|
|||||||
/* *** END *** This should be moved out */
|
/* *** END *** This should be moved out */
|
||||||
|
|
||||||
|
|
||||||
|
let full_name_class_size: string = $state('text-[.80in]');
|
||||||
|
let professional_title_class_size: string = $state('text-[.40in]');
|
||||||
|
let affiliations_class_size: string = $state('text-[.60in]');
|
||||||
|
let location_class_size: string = $state('text-[.40in]');
|
||||||
|
|
||||||
let lq__event_badge_template_obj = $derived(liveQuery(async () => {
|
let lq__event_badge_template_obj = $derived(liveQuery(async () => {
|
||||||
if (log_lvl) {
|
if (log_lvl) {
|
||||||
@@ -199,24 +203,49 @@ let lq__event_badge_template_obj = $derived(liveQuery(async () => {
|
|||||||
.get($lq__event_badge_obj?.event_badge_template_id);
|
.get($lq__event_badge_obj?.event_badge_template_id);
|
||||||
|
|
||||||
full_name_override = $lq__event_badge_obj?.full_name_override ?? $lq__event_badge_obj?.full_name;
|
full_name_override = $lq__event_badge_obj?.full_name_override ?? $lq__event_badge_obj?.full_name;
|
||||||
|
longest_full_name_override_part = longest_str_part(full_name_override ?? '');
|
||||||
|
|
||||||
// if (full_name_override) {
|
if (longest_full_name_override_part >= 9) {
|
||||||
// let name_parts = full_name_override.trim().split(' ');
|
full_name_class_size = 'text-[.70in]';
|
||||||
// longest_full_name_override_part = 0;
|
} else if (longest_full_name_override_part >= 7) {
|
||||||
// for (let part of name_parts) {
|
full_name_class_size = 'text-[.80in]';
|
||||||
// if (part.length > longest_full_name_override_part) {
|
} else {
|
||||||
// longest_full_name_override_part = part.length;
|
full_name_class_size = 'text-[.80in]';
|
||||||
// }
|
}
|
||||||
// }
|
|
||||||
// } else {
|
|
||||||
// longest_full_name_override_part = 0;
|
|
||||||
// }
|
|
||||||
|
|
||||||
professional_title_override = $lq__event_badge_obj?.professional_title_override ?? $lq__event_badge_obj?.professional_title;
|
professional_title_override = $lq__event_badge_obj?.professional_title_override ?? $lq__event_badge_obj?.professional_title;
|
||||||
|
longest_professional_title_override_part = longest_str_part(professional_title_override ?? '');
|
||||||
|
if (longest_professional_title_override_part >= 13) {
|
||||||
|
professional_title_class_size = 'text-[.40in]';
|
||||||
|
} else if (longest_professional_title_override_part >= 10) {
|
||||||
|
professional_title_class_size = 'text-[.40in]';
|
||||||
|
} else if (longest_professional_title_override_part >= 7) {
|
||||||
|
professional_title_class_size = 'text-[.40in]';
|
||||||
|
} else {
|
||||||
|
professional_title_class_size = 'text-[.40in]';
|
||||||
|
}
|
||||||
|
|
||||||
affiliations_override = $lq__event_badge_obj?.affiliations_override ?? $lq__event_badge_obj?.affiliations;
|
affiliations_override = $lq__event_badge_obj?.affiliations_override ?? $lq__event_badge_obj?.affiliations;
|
||||||
|
longest_affiliations_override_part = longest_str_part(affiliations_override ?? '');
|
||||||
|
|
||||||
location_override = $lq__event_badge_obj?.location_override ?? $lq__event_badge_obj?.location;
|
location_override = $lq__event_badge_obj?.location_override ?? $lq__event_badge_obj?.location;
|
||||||
|
longest_location_override_part = longest_str_part(location_override ?? '');
|
||||||
|
if (longest_location_override_part >= 55) {
|
||||||
|
location_class_size = 'text-[.30in]';
|
||||||
|
} else if (longest_location_override_part >= 45) {
|
||||||
|
location_class_size = 'text-[.35in]';
|
||||||
|
} else if (longest_location_override_part >= 35) {
|
||||||
|
location_class_size = 'text-[.40in]';
|
||||||
|
} else if (longest_location_override_part >= 25) {
|
||||||
|
location_class_size = 'text-[.40in]';
|
||||||
|
} else if (longest_location_override_part >= 20) {
|
||||||
|
location_class_size = 'text-[.40in]';
|
||||||
|
} else if (longest_location_override_part >= 15) {
|
||||||
|
location_class_size = 'text-[.40in]';
|
||||||
|
} else {
|
||||||
|
location_class_size = 'text-[.40in]';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
option_other_1_override = $lq__event_badge_obj?.option_other_1_override ?? $lq__event_badge_obj?.option_other_1;
|
option_other_1_override = $lq__event_badge_obj?.option_other_1_override ?? $lq__event_badge_obj?.option_other_1;
|
||||||
option_other_2_override = $lq__event_badge_obj?.option_other_2_override ?? $lq__event_badge_obj?.option_other_2;
|
option_other_2_override = $lq__event_badge_obj?.option_other_2_override ?? $lq__event_badge_obj?.option_other_2;
|
||||||
@@ -241,7 +270,20 @@ function preventDefault(fn) {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function longest_str_part(str: string) {
|
||||||
|
if (str) {
|
||||||
|
let parts = str.trim().split(' ');
|
||||||
|
let longest = 0;
|
||||||
|
for (let part of parts) {
|
||||||
|
if (part.length > longest) {
|
||||||
|
longest = part.length;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return longest;
|
||||||
|
} else {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
let qr_data_url: any = $state('');
|
let qr_data_url: any = $state('');
|
||||||
@@ -348,18 +390,27 @@ onkeypress={() => {
|
|||||||
items-stretch justify-center
|
items-stretch justify-center
|
||||||
p-2 m-0
|
p-2 m-0
|
||||||
outline-2 outline-dashed outline-blue-500
|
outline-2 outline-dashed outline-blue-500
|
||||||
|
min-h-[6.0in]
|
||||||
|
max-w-[8.5in] overflow-visible
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
|
||||||
{#if $lq__event_badge_obj && $lq__event_badge_template_obj}
|
{#if $lq__event_badge_obj && $lq__event_badge_template_obj}
|
||||||
|
|
||||||
|
<!-- max-w-lg -->
|
||||||
<!-- *** badge_front section start *** -->
|
<!-- *** badge_front section start *** -->
|
||||||
<section
|
<section
|
||||||
class="badge_front badge_type__{use_badge_type_code.toLowerCase()}
|
class="badge_front badge_type__{use_badge_type_code.toLowerCase()}
|
||||||
max-w-lg
|
flex flex-col gap-1
|
||||||
p-0 m-0
|
items-stretch justify-between
|
||||||
|
min-h-[6.0in]
|
||||||
|
max-h-[6.0in]
|
||||||
|
w-[4in]
|
||||||
|
max-w-fit
|
||||||
|
p-0 m-0 overflow-visible
|
||||||
text-center
|
text-center
|
||||||
relative
|
relative
|
||||||
outline-2 outline-red-500/50 hover:outline-red-700/75
|
outline-4 outline-red-500/50 hover:outline-red-700/75
|
||||||
group
|
group
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
@@ -443,7 +494,17 @@ onkeypress={() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if $lq__event_badge_template_obj.header_path}
|
{#if $lq__event_badge_template_obj.header_path}
|
||||||
<div class="badge_header image max-w-xl">
|
<div
|
||||||
|
class="badge_header
|
||||||
|
image
|
||||||
|
min-h-[.50in]
|
||||||
|
max-h-[1.00in]
|
||||||
|
max-w-full
|
||||||
|
m-0 p-0
|
||||||
|
overflow-hidden
|
||||||
|
hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
|
||||||
|
"
|
||||||
|
>
|
||||||
<img class="header_image" src="{$lq__event_badge_template_obj.header_path}" alt="check header path">
|
<img class="header_image" src="{$lq__event_badge_template_obj.header_path}" alt="check header path">
|
||||||
</div>
|
</div>
|
||||||
{:else}
|
{:else}
|
||||||
@@ -456,28 +517,31 @@ onkeypress={() => {
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="badge_body space-y-1">
|
<div
|
||||||
<div class="person_name"
|
class="badge_body
|
||||||
|
grow
|
||||||
|
max-h-[4in] m-0 p-0
|
||||||
|
overflow-clip
|
||||||
|
flex flex-col gap-1
|
||||||
|
items-stretch justify-between
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="person_name
|
||||||
|
max-h-[3.0in] m-0 p-0
|
||||||
|
overflow-hidden
|
||||||
|
hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<!-- 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 -->
|
<!-- 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 -->
|
<!-- Examples: mSC-tTzL_OA, QLddtYl8sfo -->
|
||||||
|
|
||||||
<div class="full_name_override_all text-6xl"
|
<div
|
||||||
class:str_05={longest_full_name_override_part==5}
|
class="full_name_override_all {full_name_class_size} leading-none"
|
||||||
class:str_06={longest_full_name_override_part==6}
|
|
||||||
class:str_07={longest_full_name_override_part==7}
|
|
||||||
class:str_08={longest_full_name_override_part==8}
|
|
||||||
class:str_09={longest_full_name_override_part==9}
|
|
||||||
class:str_10={longest_full_name_override_part==10}
|
|
||||||
class:str_11={longest_full_name_override_part==11}
|
|
||||||
class:str_12={longest_full_name_override_part==12}
|
|
||||||
class:str_13={longest_full_name_override_part==13}
|
|
||||||
class:str_14={longest_full_name_override_part==14}
|
|
||||||
class:str_15={longest_full_name_override_part==15}
|
|
||||||
class:str_16={longest_full_name_override_part==16}
|
|
||||||
class:str_17={longest_full_name_override_part==17}
|
|
||||||
class:str_20={longest_full_name_override_part>=20}
|
|
||||||
>
|
>
|
||||||
|
<!-- <span class="float-right text-sm italic m-2">
|
||||||
|
{longest_full_name_override_part}× char
|
||||||
|
</span> -->
|
||||||
<!-- {#if $lq__event_badge_obj.title_names}<span class="title_names">{$lq__event_badge_obj.title_names}</span>{/if} -->
|
<!-- {#if $lq__event_badge_obj.title_names}<span class="title_names">{$lq__event_badge_obj.title_names}</span>{/if} -->
|
||||||
|
|
||||||
<span class="full_name_override">
|
<span class="full_name_override">
|
||||||
@@ -489,25 +553,15 @@ onkeypress={() => {
|
|||||||
</span>
|
</span>
|
||||||
|
|
||||||
<!-- {#if $lq__event_badge_obj.designations}<span class="designations">{$lq__event_badge_obj.designations}</span>{/if} -->
|
<!-- {#if $lq__event_badge_obj.designations}<span class="designations">{$lq__event_badge_obj.designations}</span>{/if} -->
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if professional_title_override}
|
{#if professional_title_override}
|
||||||
<div class="professional_title text-2xl"
|
<div
|
||||||
class:str_05={professional_title_override.length==5}
|
class="professional_title
|
||||||
class:str_06={professional_title_override.length==6}
|
{professional_title_class_size} leading-none
|
||||||
class:str_07={professional_title_override.length==7}
|
italic
|
||||||
class:str_08={professional_title_override.length==8}
|
"
|
||||||
class:str_09={professional_title_override.length==9}
|
|
||||||
class:str_10={professional_title_override.length==10}
|
|
||||||
class:str_11={professional_title_override.length==11}
|
|
||||||
class:str_12={professional_title_override.length==12}
|
|
||||||
class:str_13={professional_title_override.length==13}
|
|
||||||
class:str_14={professional_title_override.length==14}
|
|
||||||
class:str_15={professional_title_override.length>=15}
|
|
||||||
class:str_17={professional_title_override.length>=17}
|
|
||||||
class:str_20={professional_title_override.length>=20}
|
|
||||||
class:str_25={professional_title_override.length>=25}
|
|
||||||
class:str_30={professional_title_override.length>=30}
|
|
||||||
>
|
>
|
||||||
{@html professional_title_override}
|
{@html professional_title_override}
|
||||||
</div>
|
</div>
|
||||||
@@ -527,38 +581,27 @@ onkeypress={() => {
|
|||||||
{/if} -->
|
{/if} -->
|
||||||
|
|
||||||
{#if affiliations_override || location_override}
|
{#if affiliations_override || location_override}
|
||||||
<div class="affiliations_location">
|
<div
|
||||||
|
class="affiliations_location
|
||||||
|
max-h-[3.0in] m-0 p-0
|
||||||
|
hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
|
||||||
|
"
|
||||||
|
>
|
||||||
{#if affiliations_override}
|
{#if affiliations_override}
|
||||||
<div class="affiliations text-4xl"
|
<div
|
||||||
class:str_05={affiliations_override.length==5}
|
class="affiliations
|
||||||
class:str_06={affiliations_override.length==6}
|
{affiliations_class_size} leading-none
|
||||||
class:str_07={affiliations_override.length==7}
|
"
|
||||||
class:str_08={affiliations_override.length==8}
|
|
||||||
class:str_09={affiliations_override.length==9}
|
|
||||||
class:str_10={affiliations_override.length==10}
|
|
||||||
class:str_11={affiliations_override.length==11}
|
|
||||||
class:str_12={affiliations_override.length==12}
|
|
||||||
class:str_13={affiliations_override.length==13}
|
|
||||||
class:str_14={affiliations_override.length==14}
|
|
||||||
class:str_15={affiliations_override.length>=15}
|
|
||||||
class:str_20={affiliations_override.length>=20}
|
|
||||||
class:str_25={affiliations_override.length>=25}
|
|
||||||
class:str_35={affiliations_override.length>=35}
|
|
||||||
class:str_45={affiliations_override.length>=45}
|
|
||||||
class:str_55={affiliations_override.length>=55}
|
|
||||||
>
|
>
|
||||||
{@html affiliations_override}
|
{@html affiliations_override}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
{#if location_override}
|
{#if location_override}
|
||||||
<div class="location text-2xl"
|
<div
|
||||||
class:str_15={location_override.length>=15}
|
class="location
|
||||||
class:str_20={location_override.length>=20}
|
{location_class_size} leading-none
|
||||||
class:str_25={location_override.length>=25}
|
"
|
||||||
class:str_35={location_override.length>=35}
|
|
||||||
class:str_45={location_override.length>=45}
|
|
||||||
class:str_55={location_override.length>=55}
|
|
||||||
>
|
>
|
||||||
<span class="city state_province country">{@html location_override}</span>
|
<span class="city state_province country">{@html location_override}</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -594,7 +637,20 @@ onkeypress={() => {
|
|||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="badge_footer {use_badge_type_code.toLowerCase()}" title={use_badge_type_code}>
|
<div
|
||||||
|
class="badge_footer
|
||||||
|
{use_badge_type_code.toLowerCase()}
|
||||||
|
justify-self-end
|
||||||
|
min-h-[.25in]
|
||||||
|
max-h-[.50in]
|
||||||
|
max-w-full
|
||||||
|
m-0 p-0
|
||||||
|
overflow-hidden
|
||||||
|
flex flex-row gap-1 items-center justify-center
|
||||||
|
hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
|
||||||
|
"
|
||||||
|
title={use_badge_type_code}
|
||||||
|
>THE FOOTER
|
||||||
{#if (option_other_1_override && ['front_bool', 'front_back_bool'].includes(option_other_1_display_opt))}
|
{#if (option_other_1_override && ['front_bool', 'front_back_bool'].includes(option_other_1_display_opt))}
|
||||||
<span class="badge_footer_special_left"><span class="fas fa-biohazard"></span></span>
|
<span class="badge_footer_special_left"><span class="fas fa-biohazard"></span></span>
|
||||||
{:else if (option_other_1_override && ['front_html', 'front_back_html'].includes(option_other_1_display_opt))}
|
{:else if (option_other_1_override && ['front_html', 'front_back_html'].includes(option_other_1_display_opt))}
|
||||||
@@ -668,11 +724,16 @@ onkeypress={() => {
|
|||||||
<!-- *** badge_back (fold under) section start *** -->
|
<!-- *** badge_back (fold under) section start *** -->
|
||||||
<section
|
<section
|
||||||
class="badge_back
|
class="badge_back
|
||||||
max-w-lg
|
flex flex-col gap-1
|
||||||
p-0 m-0
|
items-center justify-between
|
||||||
text-left
|
min-h-[6.0in]
|
||||||
|
max-h-[6.0in]
|
||||||
|
w-[4in]
|
||||||
|
max-w-fit
|
||||||
|
p-0 m-0 overflow-visible
|
||||||
|
text-left text-sm
|
||||||
relative
|
relative
|
||||||
outline-2 outline-green-500/50 hover:outline-green-700/75
|
outline-4 outline-green-500/50 hover:outline-green-700/75
|
||||||
group
|
group
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
@@ -688,7 +749,17 @@ onkeypress={() => {
|
|||||||
</span>
|
</span>
|
||||||
|
|
||||||
{#if $lq__event_badge_template_obj.secondary_header_path}
|
{#if $lq__event_badge_template_obj.secondary_header_path}
|
||||||
<div class="badge_back_header image max-w-xl">
|
<div
|
||||||
|
class="badge_back_header
|
||||||
|
image
|
||||||
|
min-h-[1.00in]
|
||||||
|
max-h-[1.00in]
|
||||||
|
max-w-full
|
||||||
|
m-0 p-0
|
||||||
|
overflow-hidden
|
||||||
|
hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
|
||||||
|
"
|
||||||
|
>
|
||||||
<img class="header_image" src="{$lq__event_badge_template_obj.secondary_header_path}" alt="check secondary header path">
|
<img class="header_image" src="{$lq__event_badge_template_obj.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}
|
||||||
@@ -705,81 +776,58 @@ onkeypress={() => {
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="badge_back_content">
|
|
||||||
|
|
||||||
<div class="container wifi_information">
|
<div
|
||||||
|
class="badge_back_content
|
||||||
|
grow
|
||||||
|
max-h-[6in] m-0 p-0
|
||||||
|
overflow-visible
|
||||||
|
flex flex-col gap-1
|
||||||
|
items-stretch justify-between
|
||||||
|
text-xs px-1
|
||||||
|
hover:outline-2 hover:outline-dashed hover:outline-gray-500/75
|
||||||
|
"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="wifi_information
|
||||||
|
flex flex-row gap-4 items-center justify-center
|
||||||
|
"
|
||||||
|
>
|
||||||
{#if $lq__event_badge_template_obj.wireless_ssid}
|
{#if $lq__event_badge_template_obj.wireless_ssid}
|
||||||
<div class="wifi_label"><span class="fas fa-wifi"></span> WiFi:</div>
|
|
||||||
<div>
|
<div class="grow flex flex-col gap-0 items-center justify-end">
|
||||||
<div >Signal Name:
|
<span class="w-full flex flex-row gap-1 items-center justify-start">
|
||||||
<strong class="wifi_ssid f_bold f_spacing_mono">{$lq__event_badge_template_obj.wireless_ssid}</strong>
|
<span class="w-20 text-gray-500 italic">
|
||||||
</div>
|
Signal Name
|
||||||
<div >Access Code:
|
</span>
|
||||||
<strong class="wifi_code f_bold f_spacing_mono">{$lq__event_badge_template_obj.wireless_password}</strong>
|
<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>
|
||||||
|
<strong class="wifi_code font-bold font-mono text-lg tracking-widest leading-none">
|
||||||
|
{$lq__event_badge_template_obj.wireless_password}
|
||||||
|
</strong>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="wifi_label flex flex-row-reverse gap-1 items-center justify-center text-xl text-gray-500">
|
||||||
|
<span class="fas fa-wifi"></span>
|
||||||
|
WiFi
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="network_username_password">
|
<div class="network_username_password hidden">
|
||||||
Username = <span class="network_username">username</span><br />
|
Username = <span class="network_username">username</span><br />
|
||||||
Password = <span class="network_password">password</span>
|
Password = <span class="network_password">password</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- <div class="container person_information qr_mecard">
|
|
||||||
<div>{$lq__event_badge_obj.given_name}'s QR Code (MeCard):</div>
|
|
||||||
{#await initial_loading_promise}
|
|
||||||
Generating...
|
|
||||||
{:then result}
|
|
||||||
<img class="person_information_qr qr_code" style="" src="/event/qr_image/event_badge_mecard_{$lq__event_badge_obj.event_badge_id_random}?qr_filename=mecard_qr.png" alt="missing QR code">
|
|
||||||
{/await}
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
{#if $lq__event_badge_template_obj.show_qr_back}
|
<div class="app_information text-xs">
|
||||||
<div class="container person_information qr_badge_id">
|
|
||||||
<div class="qr_badge_id_label f_bold">
|
|
||||||
{$lq__event_badge_obj.given_name}'s
|
|
||||||
QR Code and Badge ID:
|
|
||||||
</div>
|
|
||||||
{#await qr_data_url}
|
|
||||||
<!-- Must use this await when the image is generated. It either happens here or on the $effect with async -->
|
|
||||||
Generating...
|
|
||||||
{:then result}
|
|
||||||
{#if result}
|
|
||||||
<div class="qr_badge_id_part_1 flex flex-row items-center justify-between">
|
|
||||||
|
|
||||||
|
|
||||||
<img
|
|
||||||
class="qr_code mecard_qr max-w-48 hover:scale-200 transition-transform duration-200 ease-in-out hover:p-4 hover:border-2 hover:border-red-500 hover:bg-white"
|
|
||||||
class:v_hide_print={hide_qr}
|
|
||||||
src={result}
|
|
||||||
alt="badge QR code"
|
|
||||||
ondblclick={() => {
|
|
||||||
// (hide_qr) ? hide_qr = !hide_qr : hide_qr;
|
|
||||||
(hide_qr) ? hide_qr = false : hide_qr = true;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div class="qr_badge_id_agreement fs_xs f_align_justify text-xs">
|
|
||||||
{#if allow_tracking}
|
|
||||||
<p>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 and/or industry supporter, you understand and agree that they may use your personal information.</p>
|
|
||||||
{:else}
|
|
||||||
<p>This 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 and/or industry supporter, they will <strong>not</strong> have access to your information.</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{/await}
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<!-- Badge ID: -->
|
|
||||||
<span class="event_badge_id f_bold f_spacing_mono f_ucase fs_xl fs_hover_xxl">{$lq__event_badge_obj.event_badge_id_random}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="container app_information text-xs">
|
|
||||||
<strong>Download Meeting App:</strong>
|
<strong>Download Meeting App:</strong>
|
||||||
<!-- <img style="width: .75in; float: right;" src="/event/qr_image/testing123" alt="missing person information QR code"> -->
|
<!-- <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;">
|
<ol style="margin: 0; padding-top: 0; padding-bottom: 0;">
|
||||||
@@ -792,7 +840,7 @@ onkeypress={() => {
|
|||||||
<!-- {#if $lq__event_badge_template_obj.attendee_info} -->
|
<!-- {#if $lq__event_badge_template_obj.attendee_info} -->
|
||||||
<!-- Information for attendee only (banquets, receptions, and other) -->
|
<!-- Information for attendee only (banquets, receptions, and other) -->
|
||||||
{#if $lq__event_badge_obj.other_1 || $lq__event_badge_obj.other_2 || $lq__event_badge_obj.ticket_1_code || $lq__event_badge_obj.ticket_2_code || $lq__event_badge_obj.ticket_3_code || $lq__event_badge_obj.ticket_4_code || $lq__event_badge_obj.ticket_5_code}
|
{#if $lq__event_badge_obj.other_1 || $lq__event_badge_obj.other_2 || $lq__event_badge_obj.ticket_1_code || $lq__event_badge_obj.ticket_2_code || $lq__event_badge_obj.ticket_3_code || $lq__event_badge_obj.ticket_4_code || $lq__event_badge_obj.ticket_5_code}
|
||||||
<div class="container attendee_information">
|
<div class="attendee_information">
|
||||||
<!-- <strong>Attendee Info:</strong> -->
|
<!-- <strong>Attendee Info:</strong> -->
|
||||||
<ul>
|
<ul>
|
||||||
{#if $lq__event_badge_obj.ticket_1_code}
|
{#if $lq__event_badge_obj.ticket_1_code}
|
||||||
@@ -871,15 +919,78 @@ onkeypress={() => {
|
|||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
{#if $lq__event_badge_template_obj.show_qr_back}
|
||||||
|
<div
|
||||||
|
class="person_information qr_badge_id
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div class="qr_badge_id_label text-center">
|
||||||
|
<strong>
|
||||||
|
{$lq__event_badge_obj.given_name}'s
|
||||||
|
</strong>
|
||||||
|
Badge ID and QR Code:
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<span
|
||||||
|
class="event_badge_id
|
||||||
|
uppercase font-bold font-mono text-lg tracking-widest leading-tight
|
||||||
|
hover:scale-200 transition-transform duration-200 ease-in-out hover:p-4 hover:border-2 hover:border-red-500 hover:bg-white
|
||||||
|
z-10
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{$lq__event_badge_obj.event_badge_id_random
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{#await qr_data_url}
|
||||||
|
<!-- Must use this await when the image is generated. It either happens here or on the $effect with async -->
|
||||||
|
Generating...
|
||||||
|
{:then result}
|
||||||
|
{#if result}
|
||||||
|
<div class="qr_badge_id_part_1 flex flex-row items-center justify-between">
|
||||||
|
<img
|
||||||
|
class="qr_code mecard_qr
|
||||||
|
image
|
||||||
|
w-[1.5in]
|
||||||
|
max-w-48
|
||||||
|
hover:scale-200 transition-transform duration-200 ease-in-out hover:p-4 hover:border-2 hover:border-red-500 hover:bg-white
|
||||||
|
z-10
|
||||||
|
"
|
||||||
|
class:v_hide_print={hide_qr}
|
||||||
|
src={result}
|
||||||
|
alt="badge QR code"
|
||||||
|
ondblclick={() => {
|
||||||
|
// (hide_qr) ? hide_qr = !hide_qr : hide_qr;
|
||||||
|
(hide_qr) ? hide_qr = false : hide_qr = true;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="qr_badge_id_agreement fs_xs f_align_justify
|
||||||
|
text-xs
|
||||||
|
italic
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{#if allow_tracking}
|
||||||
|
<p>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.</p>
|
||||||
|
{:else}
|
||||||
|
<p>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.</p>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/await}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="badge_back_footer text-xxs italic text-gray-500">
|
<div class="badge_back_footer text-xxs italic text-gray-500">
|
||||||
<!-- This will need to be rotated with CSS for printing on the fanfold badges. -->
|
<!-- IMPORTANT: This will need to be rotated with CSS for printing on the fanfold badges. -->
|
||||||
Fold in half here
|
Fold in half here
|
||||||
<!-- <ol>
|
<!-- Fold this section under the badge.
|
||||||
<li>Fold this section under the badge.</li>
|
Insert into badge holder. -->
|
||||||
<li>Insert into badge holder.</li>
|
|
||||||
</ol> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- </div> --> <!-- fold class div end -->
|
<!-- </div> --> <!-- fold class div end -->
|
||||||
@@ -1007,7 +1118,12 @@ onkeypress={() => {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
<pre class="whitespace-pre-wrap break-words text-xs max-h-24 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_obj, null, 2)}
|
{JSON.stringify($lq__event_badge_obj, null, 2)}
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user