More serious work on badge printing. Working on the templates and actually implementing the printable badge.
This commit is contained in:
@@ -32,7 +32,7 @@ import { db_events } from "$lib/ae_events/db_events";
|
||||
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
|
||||
// import { events_func } from '$lib/ae_events_functions';
|
||||
|
||||
|
||||
import Comp_badge_obj_view from './ae_comp__badge_obj_view.svelte';
|
||||
|
||||
|
||||
// *** Variables
|
||||
@@ -106,9 +106,15 @@ event {data.params.event_id} / badge {data.params.badge_id}
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<pre class="whitespace-pre-wrap break-words">
|
||||
{JSON.stringify($lq__event_badge_obj, null, 2)}
|
||||
</pre>
|
||||
|
||||
<!-- {#if $lq__event_badge_obj} -->
|
||||
<Comp_badge_obj_view
|
||||
event_id={$lq__event_badge_obj.event_id}
|
||||
event_badge_id={event_badge_id}
|
||||
lq__event_badge_obj={lq__event_badge_obj}
|
||||
/>
|
||||
<!-- {/if} -->
|
||||
|
||||
{:else}
|
||||
<p>No IDB record found for ID: {event_badge_id}</p>
|
||||
{/if}
|
||||
|
||||
@@ -0,0 +1,795 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
event_id: string;
|
||||
event_badge_id: string;
|
||||
lq__event_badge_obj?: any;
|
||||
update_status?: string;
|
||||
update_complete?: boolean;
|
||||
log_lvl?: number;
|
||||
}
|
||||
|
||||
let {
|
||||
event_id,
|
||||
event_badge_id,
|
||||
lq__event_badge_obj,
|
||||
update_status = $bindable('idle'),
|
||||
update_complete = $bindable(true),
|
||||
log_lvl = 0,
|
||||
}: Props = $props();
|
||||
|
||||
// *** Import Svelte specific
|
||||
// import { browser } from '$app/environment';
|
||||
|
||||
// *** Import other supporting libraries
|
||||
import { liveQuery } from "dexie";
|
||||
|
||||
import {
|
||||
ArrowDown01, ArrowDown10, ArrowDownUp,
|
||||
BetweenVerticalEnd, BetweenVerticalStart,
|
||||
BookHeart, BookImage, Bookmark, BookOpenText, BriefcaseBusiness,
|
||||
Check, Copy,
|
||||
Expand, Eye, EyeOff,
|
||||
Flag, FlagOff, FilePlus, Fingerprint,
|
||||
Globe,
|
||||
Library,
|
||||
MessageSquareWarning, Minus,
|
||||
Notebook,
|
||||
Pencil, Plus,
|
||||
RemoveFormatting,
|
||||
SquareLibrary,
|
||||
Shapes, Share2, ShieldCheck, ShieldMinus, Siren, Skull,
|
||||
Tags, Target, ToggleLeft, ToggleRight, Trash2, TypeOutline,
|
||||
X
|
||||
} from '@lucide/svelte';
|
||||
|
||||
|
||||
import type { key_val } from '$lib/ae_stores';
|
||||
// import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
|
||||
import { db_events } from "$lib/ae_events/db_events";
|
||||
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
|
||||
import { events_func } from '$lib/ae_events_functions';
|
||||
|
||||
// *** Variables
|
||||
let ae_promises: key_val = $state({});
|
||||
let ae_tmp: key_val = $state({});
|
||||
let ae_triggers: key_val = $state({});
|
||||
|
||||
// ISHLT 2024 badge type codes
|
||||
let badge_type_code_li = [{"code":"current_member","name":"Member"},{"code":"inactive_member","name":"Non-Member"},{"code":"current_member_trainee","name":"Trainee Member"},{"code":"inactive_member_trainee","name":"Trainee Non-Member"},{"code":"ex_all","name":"Exhibitor All Access"},{"code":"ex_booth","name":"Exhibitor Booth Staff"},{"code":"hftx","name":"HFTX Master Academy"},{"code":"mcs","name":"MCS Master Academy"},{"code":"pediatric","name":"Pediatric"},{"code":"guest","name":"Guest"},{"code":"staff","name":"Staff"},{"code":"volunteer","name":"Volunteer"},{"code":"test","name":"Test"}];
|
||||
|
||||
// *** Set initial variables
|
||||
$slct.event_badge_id = event_badge_id; // $page['page_for']['event_badge_id'];
|
||||
let trigger = $state(null);
|
||||
|
||||
let initial_loading_promise = $state(null);
|
||||
|
||||
let event_badge_obj_load_promise = $state(null);
|
||||
let event_badge_obj_update_promise = $state(null);
|
||||
|
||||
|
||||
let event_badge_qr_mecard_get_promise = $state(null);
|
||||
let event_badge_qr_id_get_promise = $state(null);
|
||||
|
||||
let show_event_badge_tools_modal: boolean = $state(false);
|
||||
let show_restricted_fields: boolean = $state(false);
|
||||
|
||||
let allow_tracking: null|boolean = $state(null);
|
||||
let show_allow_tracking: boolean = $state(false);
|
||||
|
||||
let edit_full_name_override = $state(false);
|
||||
let edit_professional_title_override = $state(false);
|
||||
let edit_affiliations_override = $state(false);
|
||||
let edit_location_override = $state(false);
|
||||
|
||||
let show_print_msg: null|boolean = $state(null);
|
||||
let hide_qr: null|boolean = $state(null);
|
||||
|
||||
let use_badge_type = $state(null);
|
||||
let use_badge_type_code = $state('');
|
||||
// let use_badge_type_code_list = [];
|
||||
// use_badge_type_code_list.push({code: 'current_member', name: 'Member'});
|
||||
// use_badge_type_code_list.push({code: 'inactive_member', name: 'Non-Member'});
|
||||
|
||||
|
||||
// use_badge_type_code_list.push({code: 'MBR', name: 'Member'});
|
||||
// use_badge_type_code_list.push({code: 'AHMB', name: 'Member'});
|
||||
|
||||
// use_badge_type_code_list.push({code: 'SNMB', name: 'Student/Trainee Non-Member'});
|
||||
// use_badge_type_code_list.push({code: 'SMBR', name: 'Student/Trainee Member'});
|
||||
|
||||
// use_badge_type_code_list.push({code: 'NMBR', name: 'Non-Member'});
|
||||
// use_badge_type_code_list.push({code: 'ANHM', name: 'Non-Member'});
|
||||
// use_badge_type_code_list.push({code: 'INMB', name: 'Non-Member'});
|
||||
|
||||
// use_badge_type_code_list.push({code: 'EXO', name: 'Exhibitor Booth Staff'});
|
||||
// use_badge_type_code_list.push({code: 'EXALL', name: 'Exhibitor All Access'});
|
||||
|
||||
// use_badge_type_code_list.push({code: 'GUEST', name: 'Guest'});
|
||||
|
||||
// use_badge_type_code_list.push({code: 'HEART', name: 'HFTX Core'});
|
||||
// use_badge_type_code_list.push({code: 'LUNG', name: 'LTX Core'});
|
||||
|
||||
// use_badge_type_code_list.push({code: 'STAFF', name: 'Staff'});
|
||||
// use_badge_type_code_list.push({code: 'VIP', name: 'VIP'});
|
||||
// use_badge_type_code_list.push({code: 'VOL', name: 'Volunteer'});
|
||||
|
||||
|
||||
let full_name_override = $state(null); // Usually set by the person or similar
|
||||
let longest_full_name_override_part = 0;
|
||||
let full_name = $state(null); // Usually auto generated
|
||||
|
||||
let professional_title_override = $state(null);
|
||||
let longest_professional_title_override_part = 0;
|
||||
|
||||
let affiliations_override = $state(null);
|
||||
let longest_affiliations_override_part = 0;
|
||||
|
||||
let location_override = $state(null);
|
||||
let longest_location_override_part = 0;
|
||||
|
||||
let option_other_1_display_opt: any = $state(null);
|
||||
let option_other_1_override: any = $state(null);
|
||||
let option_other_2_display_opt: any = $state(null);
|
||||
let option_other_2_override: any = $state(null);
|
||||
|
||||
let option_ticket_1_display_opt: any = $state(null);
|
||||
let option_ticket_1_override: any = $state(null);
|
||||
let option_ticket_2_display_opt: any = $state(null);
|
||||
let option_ticket_2_override: any = $state(null);
|
||||
let option_ticket_3_display_opt: any = $state(null);
|
||||
let option_ticket_3_override: any = $state(null);
|
||||
// let option_ticket_4_display_opt = $state(null);
|
||||
// let option_ticket_5_display_opt = $state(null);
|
||||
// let option_ticket_6_display_opt = $state(null);
|
||||
// let option_ticket_7_display_opt = $state(null);
|
||||
// let option_ticket_8_display_opt = $state(null);
|
||||
|
||||
let slct_badge_type = '';
|
||||
|
||||
let qr_type = 'mecard';
|
||||
let qr_img_src = $state(null);
|
||||
let img_obj_url = $state(null);
|
||||
|
||||
|
||||
/* *** BEGIN *** This should be moved out */
|
||||
// display options: 'front_bool', 'front_html', 'back_bool', 'back_html'
|
||||
|
||||
option_ticket_1_display_opt = 'front_bool';
|
||||
option_ticket_2_display_opt = 'front_bool';
|
||||
option_ticket_3_display_opt = 'front_bool';
|
||||
|
||||
option_other_1_display_opt = 'back_html';
|
||||
option_other_2_display_opt = 'back_html';
|
||||
|
||||
let code_to_html: any = {'option_1': {}, 'option_2': {}};
|
||||
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['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>';
|
||||
code_to_html.option_1['Pescatarian'] = '<span class="fas fa-fish"></span>';
|
||||
code_to_html.option_1['Vegan'] = '<span class="fas fa-utensils"></span>';
|
||||
code_to_html.option_1['Vegetarian'] = '<span class="fas fa-carrot"></span>';
|
||||
|
||||
code_to_html.option_2['1'] = '<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['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['1-5'] = '<span class="fas fa-grimace"></span>';
|
||||
// code_to_html.option_2['6-10'] = '<span class="fas fa-grimace"></span>';
|
||||
// code_to_html.option_2['11-15'] = '<span class="fas fa-grimace"></span>';
|
||||
// code_to_html.option_2['16-29'] = '<span class="fas fa-grimace"></span>';
|
||||
// code_to_html.option_2['30+'] = '<span class="fas fa-grimace"></span>';
|
||||
// code_to_html.option_2['Unknown'] = '<span class="fas fa-radiation"></span>';
|
||||
/* *** END *** This should be moved out */
|
||||
|
||||
|
||||
|
||||
let lq__event_badge_template_obj = $derived(liveQuery(async () => {
|
||||
if (log_lvl) {
|
||||
console.log(`*** LiveQuery: lq__event_obj *** event_id=${$events_slct.event_id}`);
|
||||
}
|
||||
let results = await db_events.badge_template
|
||||
.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;
|
||||
|
||||
return results;
|
||||
}));
|
||||
|
||||
// *** Functions and Logic
|
||||
function preventDefault(fn) {
|
||||
return function (event) {
|
||||
event.preventDefault();
|
||||
fn.call(this, event);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
// Trigger doing a update for event badge
|
||||
$effect(() => {
|
||||
if (ae_triggers.event_badge_update) {
|
||||
ae_triggers.event_badge_update = false;
|
||||
update_status = 'loading';
|
||||
update_complete = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<pre class="whitespace-pre-wrap break-words text-xs">
|
||||
{JSON.stringify($lq__event_badge_obj, null, 2)}
|
||||
</pre>
|
||||
|
||||
|
||||
|
||||
<!--
|
||||
onclick={() => {
|
||||
$slct.event_badge_obj = event_badge_obj;
|
||||
$slct.event_badge_id = $lq__event_badge_obj.event_badge_id_random;
|
||||
slct_this_badge = true
|
||||
}}
|
||||
onkeypress={() => {
|
||||
// event_badge_obj = event_badge_obj;
|
||||
// event_badge_id = $lq__event_badge_obj.event_badge_id_random;
|
||||
// slct_this_badge = true
|
||||
}} -->
|
||||
|
||||
|
||||
|
||||
<section
|
||||
class="event_badge_wrapper event_badge print_area outline"
|
||||
id="event_badge_{$lq__event_badge_obj?.event_badge_id}"
|
||||
>
|
||||
{#if $lq__event_badge_obj && $lq__event_badge_template_obj}
|
||||
|
||||
<!-- *** badge_front section start *** -->
|
||||
<section class="badge_front badge_type__{use_badge_type_code.toLowerCase()}">
|
||||
|
||||
{#if $lq__event_badge_template_obj.header_path}
|
||||
<div class="badge_header image">
|
||||
<img class="header_image" src="{$lq__event_badge_template_obj.header_path}" alt="check header path">
|
||||
</div>
|
||||
{:else}
|
||||
<div class="badge_header logo_text">
|
||||
<img class="badge_logo" src="{$lq__event_badge_template_obj.logo_path}" alt="check badge logo">
|
||||
<div class="banner_text">
|
||||
<div class="row_one">{@html $lq__event_badge_template_obj.header_row_1}</div>
|
||||
<div class="row_two">{@html $lq__event_badge_template_obj.header_row_2}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="badge_body">
|
||||
<div class="person_name"
|
||||
>
|
||||
<!-- 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"
|
||||
class:str_05={longest_full_name_override_part==5}
|
||||
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}
|
||||
>
|
||||
<!-- {#if $lq__event_badge_obj.title_names}<span class="title_names">{$lq__event_badge_obj.title_names}</span>{/if} -->
|
||||
|
||||
<span class="full_name_override">
|
||||
{#if full_name_override}
|
||||
{@html full_name_override.trim()}
|
||||
{:else}
|
||||
-- no name --
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<!-- {#if $lq__event_badge_obj.designations}<span class="designations">{$lq__event_badge_obj.designations}</span>{/if} -->
|
||||
</div>
|
||||
|
||||
{#if professional_title_override}
|
||||
<div class="professional_title"
|
||||
class:str_05={professional_title_override.length==5}
|
||||
class:str_06={professional_title_override.length==6}
|
||||
class:str_07={professional_title_override.length==7}
|
||||
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}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- {#if $lq__event_badge_obj.pronouns}
|
||||
<div class="pronouns">
|
||||
<span class="pronouns">{@html $lq__event_badge_obj.pronouns}</span>
|
||||
</div>
|
||||
{/if} -->
|
||||
|
||||
<!-- {#if $lq__event_badge_obj.professional_title}
|
||||
<div class="professional_title">
|
||||
<span class="professional_title" class:str_25={$lq__event_badge_obj.professional_title.length>25}>{@html $lq__event_badge_obj.professional_title}</span>
|
||||
</div>
|
||||
{/if} -->
|
||||
|
||||
{#if affiliations_override || location_override}
|
||||
<div class="affiliations_location">
|
||||
{#if affiliations_override}
|
||||
<div class="affiliations"
|
||||
class:str_05={affiliations_override.length==5}
|
||||
class:str_06={affiliations_override.length==6}
|
||||
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}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if location_override}
|
||||
<div class="location"
|
||||
class:str_15={location_override.length>=15}
|
||||
class:str_20={location_override.length>=20}
|
||||
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>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if ['front_bool', 'front_back_bool'].includes(option_ticket_1_display_opt) || ['front_bool', 'front_back_bool'].includes(option_ticket_2_display_opt) || ['front_bool', 'front_back_bool'].includes(option_ticket_3_display_opt) || $lq__event_badge_template_obj.show_qr_front}
|
||||
<div class="special">
|
||||
<span class="badge_body_special_left">
|
||||
<!-- {#if option_ticket_1_override}<span class="ticket_1_code fg_red fas fa-star"></span>{/if} -->
|
||||
{#if option_ticket_1_override}<span class="ticket_1_code fg_green fas fa-star"></span>{/if}
|
||||
</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_gold fas fa-star"></span> -->
|
||||
{/if}
|
||||
{#if option_ticket_3_override}
|
||||
<span class="ticket_3_code fg_blue fas fa-star"></span>
|
||||
{/if}
|
||||
</span>
|
||||
{#if $lq__event_badge_template_obj.show_qr_front}
|
||||
{#await initial_loading_promise}
|
||||
Generating...
|
||||
{:then result}
|
||||
{#if initial_loading_promise}
|
||||
<img class="qr_code mecard_qr" style="" src="/event/qr_image/event_badge_mecard_{$lq__event_badge_obj.event_badge_id_random}?qr_filename=attendee_qr.png" alt="missing QR code">
|
||||
{/if}
|
||||
{/await}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="badge_footer {use_badge_type_code.toLowerCase()}" title={use_badge_type_code}>
|
||||
{#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>
|
||||
{:else if (option_other_1_override && ['front_html', 'front_back_html'].includes(option_other_1_display_opt))}
|
||||
<span class="badge_footer_special_left">{@html option_other_1_override}</span>
|
||||
{/if}
|
||||
|
||||
<span class="badge_footer_center {use_badge_type_code.toLowerCase()}">{@html use_badge_type}</span>
|
||||
|
||||
<!-- {#if $lq__event_badge_obj.other_2}
|
||||
<span class="badge_footer_special_right"><span class="fas fa-star-of-life"></span></span>
|
||||
{/if} -->
|
||||
|
||||
{#if (option_other_2_override && ['front_bool', 'front_back_bool'].includes(option_other_2_display_opt))}
|
||||
<span class="badge_footer_special_right"><span class="fas fa-star-of-life"></span></span>
|
||||
{:else if (option_other_2_override && ['front_html', 'front_back_html'].includes(option_other_2_display_opt))}
|
||||
<span class="badge_footer_special_right">{@html option_other_2_override}</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- {#if $lq__event_badge_template_obj.show_qr_front}
|
||||
<div class="container qr_code">
|
||||
{#await initial_loading_promise}
|
||||
Generating...
|
||||
{:then result}
|
||||
{#if initial_loading_promise}
|
||||
<img class="mecard_qr qr_code" style="" src="/event/qr_image/event_badge_obj_{$lq__event_badge_obj.event_badge_id_random}?qr_filename=attendee_qr.png" alt="missing QR code">
|
||||
{/if}
|
||||
{/await}
|
||||
</div>
|
||||
{/if} -->
|
||||
|
||||
<!-- {#await initial_loading_promise}
|
||||
Generating...
|
||||
{:then result}
|
||||
{#if initial_loading_promise}
|
||||
<img class="qr_code mecard_qr" style="" src="/event/qr_image/event_badge_mecard_{$lq__event_badge_obj.event_badge_id_random}?qr_filename=attendee_qr.png" alt="missing QR code">
|
||||
{/if}
|
||||
{/await} -->
|
||||
|
||||
{#if $lq__event_badge_template_obj.show_qr_front}
|
||||
{#await event_badge_qr_id_get_promise}
|
||||
Generating...
|
||||
{:then result}
|
||||
{#if event_badge_qr_id_get_promise}
|
||||
<!-- {img_obj_url} -->
|
||||
|
||||
<img
|
||||
class="qr_code mecard_qr"
|
||||
style=""
|
||||
class:v_hide_print={hide_qr}
|
||||
|
||||
|
||||
src={qr_img_src}
|
||||
alt="missing QR code"
|
||||
|
||||
ondblclick={() => {
|
||||
// (hide_qr) ? hide_qr = !hide_qr : hide_qr;
|
||||
(hide_qr) ? hide_qr = false : hide_qr = true;
|
||||
}}
|
||||
/>
|
||||
<!-- src="{$cfg.api['base_url']}/qr/{$ae_loc.account_id}/{$lq__event_badge_obj.event_badge_id_random}?filename=qr_{$ae_loc.account_id}_{$lq__event_badge_obj.event_badge_id_random}_mecard.png" -->
|
||||
{/if}
|
||||
{/await}
|
||||
{/if}
|
||||
|
||||
<!-- </div> --> <!-- badge class div end -->
|
||||
</section>
|
||||
<!-- *** badge section end *** -->
|
||||
|
||||
|
||||
<!-- *** badge_back (fold under) section start *** -->
|
||||
<section class="badge_back">
|
||||
|
||||
{#if $lq__event_badge_template_obj.secondary_header_path}
|
||||
<div class="badge_back_header image">
|
||||
<img class="header_image" src="{$lq__event_badge_template_obj.secondary_header_path}" alt="check secondary header path">
|
||||
</div>
|
||||
{:else if $lq__event_badge_template_obj.header_path}
|
||||
<div class="badge_back_header image">
|
||||
<img class="header_image" src="{$lq__event_badge_template_obj.header_path}" alt="check primary header path">
|
||||
</div>
|
||||
{:else}
|
||||
<div class="badge_back_header logo_text">
|
||||
<img class="badge_logo" src="{$lq__event_badge_template_obj.logo_path}" alt="check badge logo">
|
||||
<div class="banner_text">
|
||||
<div class="row_one">{@html $lq__event_badge_template_obj.header_row_1}</div>
|
||||
<div class="row_two">{@html $lq__event_badge_template_obj.header_row_2}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="badge_back_content">
|
||||
|
||||
<div class="container wifi_information">
|
||||
{#if $lq__event_badge_template_obj.wireless_ssid}
|
||||
<div class="wifi_label"><span class="fas fa-wifi"></span> WiFi:</div>
|
||||
<div>
|
||||
<div >Signal Name:
|
||||
<strong class="wifi_ssid f_bold f_spacing_mono">{$lq__event_badge_template_obj.wireless_ssid}</strong>
|
||||
</div>
|
||||
<div >Access Code:
|
||||
<strong class="wifi_code f_bold f_spacing_mono">{$lq__event_badge_template_obj.wireless_password}</strong>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="network_username_password">
|
||||
Username = <span class="network_username">username</span><br />
|
||||
Password = <span class="network_password">password</span>
|
||||
</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="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 event_badge_qr_id_get_promise}
|
||||
Generating...
|
||||
{:then result}
|
||||
{#if event_badge_qr_id_get_promise}
|
||||
<div class="qr_badge_id_part_1">
|
||||
|
||||
|
||||
<img
|
||||
class="qr_code mecard_qr"
|
||||
class:v_hide_print={hide_qr}
|
||||
src={qr_img_src}
|
||||
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">
|
||||
{#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">
|
||||
<strong>Download Meeting App:</strong>
|
||||
<!-- <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>"</li>
|
||||
<li style="">Once downloaded, use the search feature to find "<strong>999<sup style="font-size:.5em;">th</sup> Meeting</strong>" guide</li>
|
||||
<li style="">You may also go to <a href="https://oneskyit.com/">OneSkyIT.com</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<!-- {#if $lq__event_badge_template_obj.attendee_info} -->
|
||||
<!-- 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}
|
||||
<div class="container attendee_information">
|
||||
<!-- <strong>Attendee Info:</strong> -->
|
||||
<ul>
|
||||
{#if $lq__event_badge_obj.ticket_1_code}
|
||||
<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>
|
||||
{/if}
|
||||
{#if $lq__event_badge_obj.ticket_3_code}
|
||||
<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>
|
||||
{/if}
|
||||
{#if $lq__event_badge_obj.ticket_5_code}
|
||||
<li>{@html $lq__event_badge_template_obj.ticket_5_text}</li>
|
||||
{/if}
|
||||
</ul>
|
||||
|
||||
{#if $ae_loc.administrator_access}
|
||||
{#if $lq__event_badge_obj.other_1}
|
||||
<div class="other_1">Other 1: {$lq__event_badge_obj.other_1}
|
||||
{#if (option_other_1_override && ['back_bool', 'front_back_bool'].includes(option_other_1_display_opt))}
|
||||
- {option_other_1_override}
|
||||
{:else if (option_other_1_override && ['back_html', 'front_back_html'].includes(option_other_1_display_opt))}
|
||||
- {@html option_other_1_override}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if $lq__event_badge_obj.other_2}
|
||||
<div class="other_2">Other 2: {$lq__event_badge_obj.other_2}
|
||||
{#if (option_other_2_override && ['back_bool', 'front_back_bool'].includes(option_other_2_display_opt))}
|
||||
- {option_other_2_override}
|
||||
{:else if (option_other_2_override && ['back_html', 'front_back_html'].includes(option_other_2_display_opt))}
|
||||
- {@html option_other_2_override}
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
<!-- {/if} -->
|
||||
{/if}
|
||||
|
||||
{#if $lq__event_badge_template_obj.exhibitor_info}
|
||||
<div class="container exhibitor_information">
|
||||
<strong>Exhibitor Info:</strong>
|
||||
<!-- Information for exhibitor only -->
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $lq__event_badge_template_obj.presenter_info}
|
||||
<div class="container presenter_information">
|
||||
<strong>Presenter Info:</strong>
|
||||
<!-- Information for presenter only -->
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $lq__event_badge_template_obj.staff_info}
|
||||
<div class="container staff_information">
|
||||
<strong>Staff Info:</strong>
|
||||
<!-- Information for staff only -->
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $lq__event_badge_template_obj.vip_info}
|
||||
<div class="container vip_information">
|
||||
<strong>VIP Info:</strong>
|
||||
<!-- Information for VIP only -->
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $lq__event_badge_template_obj.vote_info}
|
||||
<div class="container vote_information">
|
||||
<div><strong>Voting Info:</strong></div>
|
||||
<!-- <div>Vote in the Election at <a href="https://oneskyit.com/vote">oneskyit.com/vote</a></div> -->
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="badge_back_footer">
|
||||
Fold in half here
|
||||
<!-- <ol>
|
||||
<li>Fold this section under the badge.</li>
|
||||
<li>Insert into badge holder.</li>
|
||||
</ol> -->
|
||||
</div>
|
||||
|
||||
<!-- </div> --> <!-- fold class div end -->
|
||||
</section>
|
||||
<!-- *** fold under section end *** -->
|
||||
|
||||
|
||||
<!-- *** receipt section start *** -->
|
||||
<section class="receipt"> <!-- receipt class div start -->
|
||||
|
||||
<div class="receipt_header">
|
||||
<img class="badge_logo" src="{$lq__event_badge_template_obj.logo_path}" 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>
|
||||
</div>
|
||||
|
||||
<div class="receipt_content"> <!-- receipt_content class div start -->
|
||||
<div>
|
||||
<span style="display: none;">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>
|
||||
</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>
|
||||
Email: <span class="Orders_Email">No Email</span>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<table class="table_borders">
|
||||
<thead>
|
||||
<tr style="">
|
||||
<th style="width: 2em;">No.</th>
|
||||
<th style="width: 27em;">Product Description</th>
|
||||
<th style="width: 3em;">Qty.</th>
|
||||
<th style="width: 5em;">Price</th>
|
||||
<th style="width: 5em;">Total</th>
|
||||
</tr>
|
||||
</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>
|
||||
<tr class="rowodd"><td>2</td><td>Printed Program</td><td>1</td><td>$25.00</td><td>$25.00</td></tr>
|
||||
<tr class="roweven"><td>3</td><td>Opening Reception</td><td>1</td><td>$0.00</td><td>$0.00</td></tr>
|
||||
<tr class="rowodd"><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>
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div> <!-- receipt_content class div end -->
|
||||
|
||||
<div class="receipt_footer"><p class="printed">Receipt Printed: January 23, 2019 03:18 PM</p></div>
|
||||
|
||||
</section> <!-- receipt class div end -->
|
||||
<!-- *** receipt section end *** -->
|
||||
|
||||
|
||||
<!-- *** ticket section start *** -->
|
||||
<section class="tickets_left_container">
|
||||
<div class="tickets"> <!-- Fold class div start -->
|
||||
|
||||
<div class="ticket_container ticket_1">
|
||||
<div class="ticket_body">
|
||||
{#if $lq__event_badge_obj.ticket_1_code}{@html $lq__event_badge_template_obj.ticket_1_text}{/if}
|
||||
</div>
|
||||
</div> <!-- ticket_1 class div end -->
|
||||
<div class="ticket_container ticket_2">
|
||||
<div class="ticket_body">
|
||||
{#if $lq__event_badge_obj.ticket_2_code}{@html $lq__event_badge_template_obj.ticket_2_text}{/if}
|
||||
</div>
|
||||
</div> <!-- ticket_2 class div end -->
|
||||
<div class="ticket_container ticket_3">
|
||||
<div class="ticket_body">
|
||||
{#if $lq__event_badge_obj.ticket_3_code}{@html $lq__event_badge_template_obj.ticket_3_text}{/if}
|
||||
</div>
|
||||
</div> <!-- ticket_3 class div end -->
|
||||
<div class="ticket_container ticket_4">
|
||||
<div class="ticket_body">
|
||||
{#if $lq__event_badge_obj.ticket_4_code}{@html $lq__event_badge_template_obj.ticket_4_text}{/if}
|
||||
</div>
|
||||
</div> <!-- ticket_3 class div end -->
|
||||
|
||||
</div> <!-- ticket class div end -->
|
||||
</section>
|
||||
<!-- *** ticket section end *** -->
|
||||
|
||||
|
||||
<!-- *** ticket section start *** -->
|
||||
<section class="tickets_right_container">
|
||||
<div class="tickets"> <!-- Fold class div start -->
|
||||
|
||||
<div class="ticket_container ticket_5">
|
||||
<div class="ticket_body">
|
||||
{#if $lq__event_badge_obj.ticket_5_code}{@html $lq__event_badge_template_obj.ticket_5_text}{/if}
|
||||
</div>
|
||||
</div> <!-- ticket_5 class div end -->
|
||||
<div class="ticket_container ticket_6">
|
||||
<div class="ticket_body">
|
||||
{#if $lq__event_badge_obj.ticket_6_code}{@html $lq__event_badge_template_obj.ticket_6_text}{/if}
|
||||
</div>
|
||||
</div> <!-- ticket_6 class div end -->
|
||||
<div class="ticket_container ticket_7">
|
||||
<div class="ticket_body">
|
||||
{#if $lq__event_badge_obj.ticket_7_code}{@html $lq__event_badge_template_obj.ticket_7_text}{/if}
|
||||
</div>
|
||||
</div> <!-- ticket_7 class div end -->
|
||||
<div class="ticket_container ticket_8">
|
||||
<div class="ticket_body">
|
||||
{#if $lq__event_badge_obj.ticket_8_code}{@html $lq__event_badge_template_obj.ticket_8_text}{/if}
|
||||
</div>
|
||||
</div> <!-- ticket_8 class div end -->
|
||||
|
||||
</div> <!-- ticket class div end -->
|
||||
</section>
|
||||
<!-- *** ticket section end *** -->
|
||||
|
||||
|
||||
{/if} <!-- End if for lq__event_badge_template_obj -->
|
||||
|
||||
</section>
|
||||
@@ -37,6 +37,8 @@ export async function load({ params, parent, url }) { // route
|
||||
// inc_device_li: true,
|
||||
inc_location_li: true,
|
||||
inc_session_li: true,
|
||||
// inc_badge_li: true,
|
||||
inc_template_li: true,
|
||||
log_lvl: log_lvl
|
||||
// })
|
||||
// .then((results) => {
|
||||
|
||||
Reference in New Issue
Block a user