Just working on things. Slow progress...
This commit is contained in:
Scott Idem
6
package-lock.json
generated
6
package-lock.json
generated
@@ -2224,9 +2224,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.703",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.703.tgz",
|
||||
"integrity": "sha512-094ZZC4nHXPKl/OwPinSMtLN9+hoFkdfQGKnvXbY+3WEAYtVDpz9UhJIViiY6Zb8agvqxiaJzNG9M+pRZWvSZw==",
|
||||
"version": "1.4.704",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.704.tgz",
|
||||
"integrity": "sha512-OK01+86Qvby1V6cTiowVbhp25aX4DLZnwar+NocAOXdzKAByd+jq5156bmo4kHwevWMknznW18Y/Svfk2dU91A==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/emoji-regex": {
|
||||
|
||||
@@ -70,6 +70,20 @@ body {
|
||||
|
||||
}
|
||||
|
||||
.ae_debug {
|
||||
/* A darker pink outline */
|
||||
outline: thin dashed;
|
||||
outline-color: hsla(0, 100%, 50%, 0.15);
|
||||
/* A light pink background color */
|
||||
background-color: hsla(0, 100%, 50%, 0.15);
|
||||
}
|
||||
.ae_debug:hover {
|
||||
/* A darker pink outline */
|
||||
outline-color: hsla(0, 100%, 50%, 0.50);
|
||||
/* A light pink background color */
|
||||
background-color: hsla(0, 100%, 50%, 0.40);
|
||||
}
|
||||
|
||||
|
||||
/* Deal with being in an iframe */
|
||||
#appShell #shell-header.iframe {
|
||||
|
||||
@@ -28,6 +28,9 @@ let events_local_data_struct: key_val = {
|
||||
'qry__limit': 20,
|
||||
'qry__offset': 0,
|
||||
|
||||
// The show details is intended for things like meta data and additional details that are not always needed.
|
||||
show_details: false,
|
||||
|
||||
// Badge Printing
|
||||
'badges': {
|
||||
'show_element__cfg': true,
|
||||
@@ -42,6 +45,20 @@ let events_local_data_struct: key_val = {
|
||||
// Lead Retrievals (Exhibit)
|
||||
'leads': {
|
||||
auto_view: true,
|
||||
|
||||
// The entered_passcode is the exhibit booths shared passcode for staff. This is used to initially access the lead retrieval service.
|
||||
entered_passcode: null,
|
||||
|
||||
// The auth_exhibit_kv (key value pairs) is used to store the exhibit IDs that the browser client can access. This is a key value list of exhibit ID and created datetime stamp. These should not be more than X days old. The entered_passcode for events_sess.leads is what they are entering to log in.
|
||||
auth_exhibit_kv: {
|
||||
// {'LNDF-67-89-92': {key: 'example@oneskyit.com', updated_on: '2024-03-13T08:05:29Z}}
|
||||
},
|
||||
|
||||
// The auth_exhibit_license_li is used to store the exhibit license(s) being used on the browser client. There can be multiple exhibit IDs, but only one license per exhibit ID for the browser client. This is used to determine who can actually access and use the lead retrieval service. This is a key value list of key (email address) and created datetime stamp. These should not be more than X days old.
|
||||
// auth_exhibit_license_li: {
|
||||
// // 'LNDF-67-89-92': { 'key': 'example@oneskyit.com', 'updated_on': '2024-03-13T08:05:29Z'}
|
||||
// },
|
||||
edit_license_li: false,
|
||||
},
|
||||
|
||||
// Presentation Management (Distributing)
|
||||
@@ -83,6 +100,27 @@ let events_session_data_struct: key_val = {
|
||||
},
|
||||
|
||||
// Lead Retrievals (Exhibit)
|
||||
'leads': {
|
||||
example: true,
|
||||
|
||||
show_form__license: false,
|
||||
|
||||
submit_status__license: null, // 'saving', 'created', 'updated'
|
||||
// create_status__license: null, // 'creating', 'created', 'updated'
|
||||
// update_status__license: null, // 'updating', 'created', 'updated'
|
||||
|
||||
// The entered_passcode is the exhibit booths shared passcode for staff. This is used to initially access the lead retrieval service.
|
||||
entered_passcode: null,
|
||||
|
||||
tmp_license: {
|
||||
// 'agree' : false, // The user must agree to the license agreement.
|
||||
'email': '',
|
||||
'full_name': '',
|
||||
'passcode': '',
|
||||
'session_count': 0,
|
||||
'updated_on': new Date().toISOString()
|
||||
}
|
||||
},
|
||||
|
||||
// Presentation Management (Distributing)
|
||||
|
||||
|
||||
@@ -42,6 +42,8 @@ export let ae_app_local_data_struct: key_val = {
|
||||
'iframe': false,
|
||||
'title': `OSIT's Æ`, // - Dev SvelteKit`, // Æ
|
||||
|
||||
'debug': false, // A simple flag to know if we should show debug information.
|
||||
|
||||
'account_id': ae_account_id, // OSIT Demo _XY7DXtc9MY
|
||||
'site_domain': null, // https://example.com, https://dev.example.com, etc.
|
||||
'site_cfg_json': {},
|
||||
|
||||
@@ -351,8 +351,23 @@ $: if ($slct_trigger == 'set_access_code_li' && !$ae_loc.ds['hub__page__access_c
|
||||
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
<div class="flex justify-between space-x-2 text-slate-400 hover:text-slate-800 transition">
|
||||
<div
|
||||
class="flex justify-between text-slate-400 hover:text-slate-800 transition px-1"
|
||||
class:ae_debug={$ae_loc.debug}
|
||||
>
|
||||
{@html $ae_loc.ds['hub__site__appshell_footer']}
|
||||
|
||||
<button
|
||||
on:click={() => {
|
||||
console.log('Debug:', $ae_loc);
|
||||
$ae_loc.debug = !$ae_loc.debug;
|
||||
}}
|
||||
id="AE-Quick-Debug"
|
||||
class="ae_quick_debug btn btn-sm variant-glass-surface"
|
||||
title="Turn debug content and styles off and on"
|
||||
>
|
||||
π
|
||||
</button>
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
|
||||
@@ -375,4 +390,66 @@ $: if ($slct_trigger == 'set_access_code_li' && !$ae_loc.ds['hub__page__access_c
|
||||
|
||||
|
||||
<style lang="postcss">
|
||||
/* BEGIN: AE's Svelte Quick Debug component */
|
||||
#AE-Quick-Debug {
|
||||
/* position: absolute; */
|
||||
position: fixed;
|
||||
/* position: relative; */
|
||||
/* position: static; */
|
||||
/* position: sticky; */
|
||||
/* top: 1em; */
|
||||
bottom: 0rem;
|
||||
right: 0rem;
|
||||
|
||||
padding: .0rem;
|
||||
|
||||
/* lightyellow */
|
||||
/* background-color: hsla(60,100%,90%,.30); */
|
||||
/* background-color: rgba(var(--color-surface-500) / .5); */
|
||||
|
||||
border: none;
|
||||
|
||||
border-top: solid thin hsla(0,0%,0%,.25);
|
||||
border-left: solid thin hsla(0,0%,0%,.25);
|
||||
border-bottom: solid thin hsla(0,0%,0%,.25);
|
||||
/* border-top-left-radius: .5em; */
|
||||
/* border-bottom-left-radius: .5em; */
|
||||
|
||||
opacity: .15;
|
||||
/* opacity: 1; */
|
||||
|
||||
font-size: .75rem;
|
||||
|
||||
z-index: 5;
|
||||
|
||||
/* NOTE: transition when no longer hovering */
|
||||
transition-property: opacity, background-color;
|
||||
transition-delay: 1.25s;
|
||||
transition-duration: .5s;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
|
||||
#AE-Quick-Debug:hover {
|
||||
/* lightyellow */
|
||||
/* background-color: hsla(60,100%,90%,.95); */
|
||||
/* background-color: rgba(var(--color-surface-500) / 1); */
|
||||
|
||||
border-top: solid thin hsla(0,0%,0%,.95);
|
||||
border-left: solid thin hsla(0,0%,0%,.95);
|
||||
border-bottom: solid thin hsla(0,0%,0%,.95);
|
||||
|
||||
opacity: 1;
|
||||
|
||||
padding: .5rem;
|
||||
|
||||
font-size: 1.75rem;
|
||||
/* Need to zoom 3.5 when hovering */
|
||||
/* transform: scale(3.5); */
|
||||
|
||||
/* NOTE: transition when hover starts */
|
||||
transition-property: opacity, background-color;
|
||||
transition-delay: .5s;
|
||||
transition-duration: .10s;
|
||||
transition-timing-function: ease-in;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,7 +10,7 @@ import { api } from '$lib/api';
|
||||
import { liveQuery } from "dexie";
|
||||
import { db_events } from "$lib/db_events";
|
||||
import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
|
||||
import { events_loc, events_slct, events_trigger } from '$lib/ae_events_stores';
|
||||
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
|
||||
import { events_func } from '$lib/ae_events_functions';
|
||||
|
||||
|
||||
@@ -22,8 +22,8 @@ import type { Writable } from 'svelte/store';
|
||||
|
||||
import Element_data_store from '$lib/element_data_store.svelte';
|
||||
|
||||
// const store_current_tab: Writable<string> = localStorageStore('ae_sponsorships_current_tab', 'start');
|
||||
// console.log(`store_current_tab:`, $store_current_tab);
|
||||
const store_current_tab: Writable<string> = localStorageStore('ae_events_leads_current_tab', 'start');
|
||||
console.log(`ae_events_leads exhibit +page.svelte [slug] store_current_tab:`, $store_current_tab);
|
||||
|
||||
let param_slug_event_exhibit_id = data.params.slug;
|
||||
|
||||
@@ -45,6 +45,10 @@ $events_slct.exhibit_id = param_slug_event_exhibit_id;
|
||||
console.log('Selected Event Exhibit ID:', $events_slct.exhibit_id);
|
||||
$events_trigger = 'load__event_exhibit_obj';
|
||||
|
||||
$store_current_tab = 'start';
|
||||
|
||||
let license_submit_results: Promise<any>|key_val;
|
||||
|
||||
|
||||
onMount(() => {
|
||||
console.log('Events Leads Exhibit [slug]: +page.svelte');
|
||||
@@ -60,6 +64,49 @@ onMount(() => {
|
||||
});
|
||||
// console.log(`$ae_loc = `, $ae_loc);
|
||||
|
||||
$: if ($slct.event_exhibit_obj && $events_sess.leads.entered_passcode) {
|
||||
console.log('Check the passcode?');
|
||||
if ($events_sess.leads.entered_passcode.length > 4) {
|
||||
console.log('Check the passcode');
|
||||
handle_check_event_exhibit_staff_passcode();
|
||||
}
|
||||
} else {
|
||||
// console.log('Nothing at this time');
|
||||
}
|
||||
|
||||
|
||||
function handle_check_event_exhibit_staff_passcode() {
|
||||
// console.log(`*** handle_check_event_exhibit_staff_passcode() *** $slct_event_exhibit_obj=`, $events_slct.exhibit_obj);
|
||||
|
||||
if (!$events_loc.leads.auth_exhibit_li) {
|
||||
$events_loc.leads.auth_exhibit_li = {};
|
||||
}
|
||||
|
||||
if ($slct.event_exhibit_obj && $events_sess.leads.entered_passcode && $events_sess.leads.entered_passcode.length >= 4) {
|
||||
if ($events_slct.exhibit_obj.staff_passcode == $events_sess.leads.entered_passcode) {
|
||||
console.log('Passcode matched');
|
||||
// disable_open_lead_retrieval_btn = false;
|
||||
$events_sess.leads.entered_passcode = null;
|
||||
$events_loc.leads.auth_exhibit_li[$events_slct.exhibit_id] = new Date().toISOString();
|
||||
} else {
|
||||
// console.log('Passcode does not match');
|
||||
// disable_open_lead_retrieval_btn = true;
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
console.log('Missing selected event exhibit and or staff passcode.');
|
||||
// disable_open_lead_retrieval_btn = true;
|
||||
return null;
|
||||
}
|
||||
|
||||
if ($events_loc.leads.auto_view) {
|
||||
// open_exhibit_tracking($events_slct.exhibit_obj.event_exhibit_id_random, event_exhibit_staff_passcode)
|
||||
} else {
|
||||
// console.log(document.getElementById('open_lead_retrieval_btn'));
|
||||
// document.getElementById('open_lead_retrieval_btn').focus();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$: if ($events_trigger == 'load__event_exhibit_obj' && $events_slct.exhibit_id) {
|
||||
console.log('Selected Event Exhibit ID:', $events_slct.exhibit_id);
|
||||
@@ -134,6 +181,21 @@ async function handle_load_ae_obj_id__event_exhibit({event_exhibit_id, try_cache
|
||||
return ae_event_exhibit_get_promise;
|
||||
}
|
||||
|
||||
async function handle_submit_form_other(event) {
|
||||
let tmp_obj = $event_exhibit_obj;
|
||||
|
||||
tmp_obj.license_li_json.push($events_sess.leads.tmp_license);
|
||||
console.log('Add License:', tmp_obj);
|
||||
|
||||
await db_events.exhibits.put(tmp_obj);
|
||||
|
||||
|
||||
$events_sess.leads.show_form__license = false;
|
||||
$events_loc.leads.edit_license_li = false;
|
||||
|
||||
// This still needs to be saved to the database.
|
||||
}
|
||||
|
||||
|
||||
let exhibit_submit_results: Promise<any>|key_val;
|
||||
async function handle_submit_form(event) {
|
||||
@@ -299,72 +361,205 @@ function send_init_confirm_email({to_email}) {
|
||||
>
|
||||
|
||||
|
||||
<Element_data_store
|
||||
<!-- <Element_data_store
|
||||
ds_code="page__events_leads__exhibit_main_header"
|
||||
ds_type="html"
|
||||
for_type="event"
|
||||
for_id={$events_slct.event_id}
|
||||
display="block"
|
||||
class_li=""
|
||||
/>
|
||||
/> -->
|
||||
|
||||
<!-- <div
|
||||
class="events__leads__exhibit_obj_main_about"
|
||||
class:hidden={$store_current_tab !== 'start'}
|
||||
>
|
||||
<Element_data_store
|
||||
ds_code="events__leads__exhibit_obj_main_about"
|
||||
ds_type="html"
|
||||
for_type="event"
|
||||
for_id={$events_slct.event_id}
|
||||
display="block"
|
||||
class_li=""
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
{#if $events_slct.exhibit_id && $event_exhibit_obj}
|
||||
<section class="ae_h_scrollfix"></section>
|
||||
|
||||
|
||||
<section class="ae_h_scrollfix">
|
||||
{#if $events_slct.exhibit_id}
|
||||
<!-- <hr>
|
||||
<p class="variant-soft-warning">Make logging in with shared exhibit passcode work first!</p>
|
||||
<p>Mark as logged in by using: events_loc.leads.auth_exhibit_li. This is a key (exhibit ID) and value (started datetime) pair. They can be logged into more than one exhibit at a time. Warn about log out when using the "Use License" button. Avoid "accidental" clicks.</p>
|
||||
<p>Check that the started datetime is still within X period and check against the tracked session timestamps. The table or object field is event_exhibit.license_sess_li.</p>
|
||||
<p>Config option to show additional settings or information? Hide the Email and Copy buttons by default. Hide license input fields by default.</p>
|
||||
<p class="variant-soft-warning">Tabs: Main (list of licenses to use, show started timestamps?, summary of counts per license), Manage (export, settings), Add/Scan, Leads</p>
|
||||
<p>The tabs and everything is not visible until they enter the shared exhibit passcode. Or maybe just gray out tabs and hide any details under the active one.</p>
|
||||
<p>Header, footer, etc can be shown/hidden</p>
|
||||
<p>The header image can use md:hidden to hide when too small?</p>
|
||||
<p class="variant-soft-warning">Only show exhibitors in the list that have licenses available.</p>
|
||||
<p>Exhibit license authorization link: /events_leads/exhibit/[exhibit_id]?key=[license_key]&key_pass=[the_random_passcode]</p>
|
||||
<hr> -->
|
||||
|
||||
<TabGroup
|
||||
justify="justify-center"
|
||||
active="variant-ghost-primary"
|
||||
hover="hover:variant-soft-primary"
|
||||
flex="flex-1 lg:flex-none"
|
||||
rounded=""
|
||||
border=""
|
||||
class="bg-surface-100-800-token w-full"
|
||||
>
|
||||
<Tab
|
||||
bind:group={$store_current_tab}
|
||||
name="tab_start"
|
||||
value={'start'}>
|
||||
<svelte:fragment slot="lead">
|
||||
<span class="fas fa-home"></span>
|
||||
</svelte:fragment>
|
||||
<!-- Start -->
|
||||
Main
|
||||
</Tab>
|
||||
|
||||
<!-- Manage - For changing the settings, exporting, and other. -->
|
||||
<Tab
|
||||
bind:group={$store_current_tab}
|
||||
name="tab_manage"
|
||||
value={'manage'}
|
||||
disabled={!$events_slct.exhibit_obj || !$events_loc?.leads.auth_exhibit_li || !$events_loc.leads.auth_exhibit_li[$events_slct.exhibit_id]}
|
||||
regionTab={!$events_slct.exhibit_obj || !$events_loc?.leads.auth_exhibit_li || !$events_loc.leads.auth_exhibit_li[$events_slct.exhibit_id] ? 'text-slate-400' : ''}
|
||||
>
|
||||
<svelte:fragment slot="lead">
|
||||
<span class="fas fa-cogs"></span>
|
||||
</svelte:fragment>
|
||||
Manage
|
||||
</Tab>
|
||||
|
||||
<Tab
|
||||
bind:group={$store_current_tab}
|
||||
name="tab_add_scan"
|
||||
value={'add_scan'}
|
||||
disabled={!$events_slct.exhibit_obj || !$events_loc?.leads.auth_exhibit_li || !$events_loc.leads.auth_exhibit_li[$events_slct.exhibit_id]}
|
||||
regionTab={!$events_slct.exhibit_obj || !$events_loc?.leads.auth_exhibit_li || !$events_loc.leads.auth_exhibit_li[$events_slct.exhibit_id] ? 'text-slate-400' : ''}
|
||||
>
|
||||
<svelte:fragment slot="lead">
|
||||
<span class="fas fa-qrcode"></span>
|
||||
</svelte:fragment>
|
||||
Add/Scan
|
||||
</Tab>
|
||||
</TabGroup>
|
||||
|
||||
|
||||
{#if $store_current_tab === 'start'}
|
||||
|
||||
<div class="text-center m-4">
|
||||
{#if $event_exhibit_obj}
|
||||
<p>Welcome
|
||||
<!-- {$events_slct.exhibit_obj.name} -->
|
||||
{$event_exhibit_obj?.name}
|
||||
</p>
|
||||
{:else}
|
||||
<p>Welcome to the Exhibit Hub!</p>
|
||||
{/if}
|
||||
<p>
|
||||
<!-- {$events_slct.exhibit_obj.name} -->
|
||||
<strong>{$event_exhibit_obj?.name ?? 'Welcome to Leads for Exhibits!'}</strong>
|
||||
<strong>{$event_exhibit_obj?.code ?? ''}</strong>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{#if $events_loc?.leads.auth_exhibit_li && $events_loc.leads.auth_exhibit_li[$events_slct.exhibit_id]}
|
||||
<!-- <button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
console.log('Log Out');
|
||||
$events_loc.leads.auth_exhibit_li[$events_slct.exhibit_id] = null;
|
||||
}}
|
||||
title="Log out"
|
||||
class="btn variant-soft-primary w-40"
|
||||
>
|
||||
<span class="fas fa-sign-out-alt mx-1"></span>
|
||||
Log Out
|
||||
</button> -->
|
||||
<p>To use the lead retrieval service, please select a license from the list below.</p>
|
||||
{:else}
|
||||
<p>To access this exhibit you must enter the shared staff passcode that you were given. You will then be able to select a license and use the lead retrieval service from your device.</p>
|
||||
<label class="label variant-glass-warning p-2 px-4 m-2 rounded-full font-bold">Shared exhibit passcode:
|
||||
<input
|
||||
type="text"
|
||||
name="staff_passcode"
|
||||
bind:value={$events_sess.leads.entered_passcode}
|
||||
placeholder="Exhibit passcode"
|
||||
class="input max-w-48 font-mono"
|
||||
required
|
||||
>
|
||||
</label>
|
||||
{/if}
|
||||
|
||||
<!-- {$event_exhibit_obj?.license_li_json} -->
|
||||
|
||||
{#if $events_loc?.leads.auth_exhibit_li && $events_loc.leads.auth_exhibit_li[$events_slct.exhibit_id]}
|
||||
|
||||
|
||||
<!-- Loop through the key value pairs. Each license key has a passcode, updated_on, etc -->
|
||||
{#if $event_exhibit_obj?.license_max }
|
||||
<h2 class="h3">License List (max {$event_exhibit_obj?.license_max})</h2>
|
||||
<section class="ae_license_list">
|
||||
|
||||
{#if $event_exhibit_obj?.license_li_json.length < $event_exhibit_obj?.license_max}
|
||||
<button
|
||||
class="btn variant-soft-primary w-96"
|
||||
class="btn btn-sm variant-soft-primary w-40"
|
||||
on:click={() => {
|
||||
let tmp_obj = $event_exhibit_obj;
|
||||
tmp_obj.license_li_json.push({});
|
||||
console.log('Add License:', tmp_obj);
|
||||
db_events.exhibits.put(tmp_obj);
|
||||
// let tmp_obj = $event_exhibit_obj;
|
||||
$events_sess.leads.tmp_license = {
|
||||
'email': 'test+z@oneskyit.com',
|
||||
'full_name': 'Scott X',
|
||||
'passcode': 'abcdefg',
|
||||
'max_reuse': 0,
|
||||
'updated_on': new Date().toISOString()
|
||||
};
|
||||
// tmp_obj.license_li_json.push($events_sess.leads.tmp_license);
|
||||
// console.log('Add License:', tmp_obj);
|
||||
// db_events.exhibits.put(tmp_obj);
|
||||
// This still needs to be saved to the database.
|
||||
|
||||
$events_sess.leads.show_form__license = true;
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-edit mx-1"></span>
|
||||
Add License
|
||||
</button>
|
||||
{:else}
|
||||
No more!
|
||||
{/if}
|
||||
<!-- Loop through the key value pairs. Each license key has a passcode, updated_on, etc -->
|
||||
{#if $event_exhibit_obj?.license_max }
|
||||
<h2 class="h3">License List (max {$event_exhibit_obj?.license_max})</h2>
|
||||
<section class="ae_license_list">
|
||||
<button
|
||||
class="btn btn-sm variant-soft-warning w-40"
|
||||
on:click={() => {
|
||||
console.log('No more licenses available. Remove the last one from the list?');
|
||||
let tmp_obj = $event_exhibit_obj;
|
||||
tmp_obj?.license_li_json.pop();
|
||||
console.log('Remove License:', tmp_obj);
|
||||
db_events.exhibits.put(tmp_obj);
|
||||
// This still needs to be saved to the database.
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-trash mx-1"></span>
|
||||
Delete License
|
||||
</button>
|
||||
{/if} <!-- $event_exhibit_obj?.license_li_json.length < $event_exhibit_obj?.license_max -->
|
||||
|
||||
<div>Use one of the options below to log in using one of the licenses.</div>
|
||||
|
||||
<form
|
||||
on:submit|preventDefault={() => {
|
||||
console.log('Save License List');
|
||||
handle_submit_form(event);
|
||||
}}
|
||||
class="flex flex-row items-center space-x-2 border border-ae-3 p-2 m-2"
|
||||
id="form__license_table"
|
||||
class="flex flex-row items-center space-x-2 border border-ae-3 p-0 m-0"
|
||||
>
|
||||
|
||||
<input type="hidden" name="license_max" value={$event_exhibit_obj?.license_max} />
|
||||
|
||||
<table class="">
|
||||
<table class="table table-compact table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Use License</th>
|
||||
<th>Email</th>
|
||||
<th>Full Name</th>
|
||||
<th>Passcode</th>
|
||||
<th>Info</th>
|
||||
<!-- <th>Email</th> -->
|
||||
<!-- <th>Full Name</th> -->
|
||||
<!-- <th>Passcode</th> -->
|
||||
<th>Save</th>
|
||||
{#if $ae_loc.trusted_access}
|
||||
{#if $events_loc.show_details}
|
||||
<th
|
||||
class="text-xs"
|
||||
on:click={() => {
|
||||
@@ -381,25 +576,42 @@ No more!
|
||||
<!-- example: {} -->
|
||||
|
||||
<!-- {#each Object.keys($event_exhibit_obj?.license_li_json || {}).slice(0, $event_exhibit_obj?.license_max) as key} -->
|
||||
{#each $event_exhibit_obj?.license_li_json as license, key}
|
||||
{#each $event_exhibit_obj?.license_li_json as license, index}
|
||||
<tr>
|
||||
<!-- Show the current license list information. -->
|
||||
<td>
|
||||
|
||||
<input
|
||||
type="hidden"
|
||||
name={`license_${key}`}
|
||||
name={`license_${index}`}
|
||||
required
|
||||
value={key}
|
||||
placeholder="Key"
|
||||
value={index}
|
||||
placeholder="Index"
|
||||
min="1"
|
||||
class="input text-sm max-w-20 font-mono"
|
||||
/>
|
||||
|
||||
{#if key < $event_exhibit_obj?.license_max}
|
||||
{#if index < $event_exhibit_obj?.license_max}
|
||||
<!-- Edit the values and save the new license list information. -->
|
||||
<!-- Button to send an email with the login link -->
|
||||
<div class="btn-group text-sm">
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
console.log('Use License');
|
||||
// Use the license key to sign in
|
||||
// $events_slct.exhibit_obj.url = `${data.url.origin}/events_leads/exhibit/${$events_slct.exhibit_id}?license_key=${index}&event_id=${$events_slct.event_id}`;
|
||||
$events_loc.leads.auth_exhibit_kv[$events_slct.exhibit_id] = {
|
||||
key: license.email,
|
||||
updated_on: new Date().toISOString()
|
||||
};
|
||||
}}
|
||||
class="btn btn-sm text-sm variant-soft-primary"
|
||||
title="Sign in using this license"
|
||||
>
|
||||
<span class="fas fa-key mx-1"></span>
|
||||
Sign In
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
@@ -407,7 +619,7 @@ No more!
|
||||
// Send an email with the login link
|
||||
send_init_confirm_email({ to_email: license.email });
|
||||
}}
|
||||
class="btn btn-sm text-sm variant-soft-primary"
|
||||
class="btn btn-sm text-sm variant-soft-secondary"
|
||||
>
|
||||
<span class="fas fa-envelope mx-1"></span>
|
||||
Email
|
||||
@@ -415,7 +627,7 @@ No more!
|
||||
<button
|
||||
type="button"
|
||||
use:clipboard={$events_slct.exhibit_obj.url}
|
||||
class="btn btn-sm text-sm variant-soft-secondary"
|
||||
class="btn btn-sm text-sm variant-soft-tertiary"
|
||||
title={`Copy link to this exhibit (ID: ${$events_slct.exhibit_id})`}
|
||||
>
|
||||
<span class="fas fa-copy mx-1"></span>
|
||||
@@ -429,126 +641,379 @@ No more!
|
||||
</div>
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
<!-- <input type="email" value={key ?? ''} name="license_key" placeholder="Valid email" required class="input text-sm max-w-xs" /> -->
|
||||
<input
|
||||
type="text"
|
||||
name={`license_${key}_email`}
|
||||
required
|
||||
value={license.email ?? ''}
|
||||
placeholder="Valid email"
|
||||
minlength="5"
|
||||
class="input text-sm max-w-xs font-mono"
|
||||
/>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<div class="flex flex-row wrap gap-1 justify-between items-center">
|
||||
|
||||
<!-- <td> -->
|
||||
<div class="full_name_email">
|
||||
{#if $events_loc.leads.edit_license_li}
|
||||
<input
|
||||
type="text"
|
||||
name={`license_${key}_full_name`}
|
||||
name={`license_${index}_full_name`}
|
||||
value={license.full_name ?? ''}
|
||||
placeholder="Full Name"
|
||||
required
|
||||
class="input text-sm max-w-40 font-mono"
|
||||
minlength="2"
|
||||
/>
|
||||
</td>
|
||||
<td>
|
||||
{:else}
|
||||
<span class="text-sm">{license.full_name}</span>
|
||||
{/if}
|
||||
<!-- </td> -->
|
||||
|
||||
<!-- <input type="email" value={key ?? ''} name="license_key" placeholder="Valid email" required class="input text-sm max-w-xs" /> -->
|
||||
{#if $events_loc.leads.edit_license_li}
|
||||
<input
|
||||
type="text"
|
||||
name={`license_${key}_passcode`}
|
||||
name={`license_${index}_email`}
|
||||
required
|
||||
value={license.email ?? ''}
|
||||
placeholder="Valid email"
|
||||
minlength="5"
|
||||
class="input text-sm max-w-xs font-mono"
|
||||
/>
|
||||
{:else}
|
||||
<span class="text-sm">{license.email}</span>
|
||||
{/if}
|
||||
<!-- </td> -->
|
||||
</div>
|
||||
|
||||
<!-- <td> -->
|
||||
{#if $events_loc.leads.edit_license_li}
|
||||
<input
|
||||
type="text"
|
||||
name={`license_${index}_passcode`}
|
||||
value={license.passcode ?? '987654'}
|
||||
placeholder="Passcode"
|
||||
disabled={key >= $event_exhibit_obj?.license_max}
|
||||
disabled={index >= $event_exhibit_obj?.license_max}
|
||||
required
|
||||
class="input text-sm max-w-20 font-mono"
|
||||
minlength="5"
|
||||
/>
|
||||
{:else}
|
||||
<span class="font-bold text-sm">{license.passcode}</span>
|
||||
{/if}
|
||||
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<button
|
||||
{#if $events_loc.leads.edit_license_li}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={index >= $event_exhibit_obj?.license_max}
|
||||
class="btn btn-sm variant-soft-warning">
|
||||
<span class="fas fa-save mx-1"></span>
|
||||
Save
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
console.log('Edit License');
|
||||
$events_loc.leads.edit_license_li = true;
|
||||
}}
|
||||
class="btn btn-sm variant-soft-warning">
|
||||
<span class="fas fa-edit mx-1"></span>
|
||||
Edit
|
||||
</button>
|
||||
{/if}
|
||||
<!-- <button
|
||||
type="submit"
|
||||
disabled={key >= $event_exhibit_obj?.license_max}
|
||||
disabled={index >= $event_exhibit_obj?.license_max}
|
||||
class="btn btn-sm variant-soft-warning">
|
||||
<span class="fas fa-save mx-1"></span>
|
||||
Save
|
||||
</button>
|
||||
</button> -->
|
||||
</td>
|
||||
{#if $ae_loc.trusted_access}
|
||||
<td class:hidden={$events_loc.leads.show_meta__event_exhibit_obj}>
|
||||
<div class="flex flex-col wrap gap-1 text-xs">
|
||||
<div class="flex flex-row items-center space-x-2">
|
||||
<span class="ae_label">Updated On:</span>
|
||||
<span class="ae_value">{license.updated_on}</span>
|
||||
</div>
|
||||
<div class="flex flex-row items-center space-x-2">
|
||||
<span class="ae_label">Created On:</span>
|
||||
<span class="ae_value">{license.created_on}</span>
|
||||
</div>
|
||||
<div class="flex flex-row items-center space-x-2">
|
||||
<span class="ae_label">Expires On:</span>
|
||||
<span class="ae_value">{license.expires_on}</span>
|
||||
</div>
|
||||
|
||||
{#if $events_loc.show_details}
|
||||
<td>
|
||||
<!-- class:hidden={$events_loc.leads.show_meta__event_exhibit_obj} -->
|
||||
<div class="flex flex-col wrap gap-1 text-xs">
|
||||
<div class="flex flex-row items-center space-x-2">
|
||||
<span class="ae_label">Updated On:</span>
|
||||
<span class="ae_value">{license.updated_on}</span>
|
||||
</div>
|
||||
</td>
|
||||
<div class="flex flex-row items-center space-x-2">
|
||||
<span class="ae_label">Created On:</span>
|
||||
<span class="ae_value">{license.created_on}</span>
|
||||
</div>
|
||||
<div class="flex flex-row items-center space-x-2">
|
||||
<span class="ae_label">Expires On:</span>
|
||||
<span class="ae_value">{license.expires_on}</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
{/if}
|
||||
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</form>
|
||||
</section>
|
||||
</section> <!-- .ae_license_list -->
|
||||
{/if} <!-- $event_exhibit_obj?.license_max -->
|
||||
{/if}
|
||||
|
||||
<button
|
||||
class="btn variant-ghost-primary w-96"
|
||||
on:click={() => {
|
||||
ae_util.handle_url_and_message('event_exhibit_id', $events_slct.exhibit_id);
|
||||
modalStore.trigger(modal_edit__event_exhibit);
|
||||
|
||||
{:else if $store_current_tab == 'manage'}
|
||||
|
||||
{#if $events_loc?.leads.auth_exhibit_li && $events_loc.leads.auth_exhibit_li[$events_slct.exhibit_id]}
|
||||
<div>Manage: Logged in. Nothing here yet</div>
|
||||
|
||||
{#if $events_loc?.leads.auth_exhibit_li && $events_loc.leads.auth_exhibit_li[$events_slct.exhibit_id]}
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => {
|
||||
console.log('Log Out');
|
||||
$events_loc.leads.auth_exhibit_li[$events_slct.exhibit_id] = null;
|
||||
}}
|
||||
title="Log out"
|
||||
class="btn variant-soft-primary w-40"
|
||||
>
|
||||
<span class="fas fa-sign-out-alt mx-1"></span>
|
||||
Log Out
|
||||
</button>
|
||||
<p>To use the lead retrieval service, please select a license from the list on the Main tab.</p>
|
||||
{/if}
|
||||
|
||||
{:else}
|
||||
<div>Manage: Not logged in? Nothing here yet.</div>
|
||||
{/if} <!-- $events_loc?.leads.auth_exhibit_li && $events_loc.leads.auth_exhibit_li[$events_slct.exhibit_id] -->
|
||||
|
||||
{:else if $store_current_tab == 'add_scan'}
|
||||
|
||||
{#if $events_loc?.leads.auth_exhibit_li && $events_loc.leads.auth_exhibit_li[$events_slct.exhibit_id]}
|
||||
<div>Add/Scan: Logged in. Nothing here yet</div>
|
||||
{:else}
|
||||
<div>Add/Scan: Not logged in? Nothing here yet.</div>
|
||||
{/if} <!-- $events_loc?.leads.auth_exhibit_li && $events_loc.leads.auth_exhibit_li[$events_slct.exhibit_id] -->
|
||||
|
||||
{/if} <!-- $store_current_tab -->
|
||||
|
||||
|
||||
// $events_loc.leads.show_edit__event_exhibit_obj = true;
|
||||
// $events_trigger = 'load__event_exhibit_obj';
|
||||
// $events_trigger = 'show_edit__event_exhibit';
|
||||
// modalStore.trigger(modal_edit__event_exhibit);
|
||||
// $ae_trig.m_events__show_modal_edit = true;
|
||||
}}
|
||||
|
||||
|
||||
<!-- {:else} -->
|
||||
|
||||
|
||||
<!-- {/if} -->
|
||||
|
||||
<!-- </section> -->
|
||||
{/if} <!-- $events_slct.exhibit_id && $event_exhibit_obj -->
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Use the values from $events_sess.leads.tmp_license to populate the inputs -->
|
||||
{#if $events_sess.leads.show_form__license}
|
||||
<div class="ae_quick_modal_container">
|
||||
<section
|
||||
class="
|
||||
ae_quick_popover
|
||||
events__leads__exhibit_license
|
||||
z-50
|
||||
flex
|
||||
flex-col
|
||||
gap-4
|
||||
|
||||
|
||||
justify-stretch
|
||||
"
|
||||
>
|
||||
<span class="fas fa-edit mx-1"></span>
|
||||
Edit Exhibit ({$events_slct.exhibit_id})
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
class="btn variant-ghost-primary w-96"
|
||||
on:click={() => {
|
||||
ae_util.handle_url_and_message('event_exhibit_id', null);
|
||||
modalStore.trigger(modal_edit__event_exhibit);
|
||||
<header class="popover__header flex gap-1 justify-between items-center p-1 border-b">
|
||||
<h2 class="h3">Edit License</h2>
|
||||
|
||||
// $events_trigger = 'load__event_exhibit';
|
||||
<div class="popover__actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn variant-soft-primary"
|
||||
on:click={() => {
|
||||
$events_sess.leads.show_form__license = false;
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-times mx-1"></span>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
$events_trigger = 'show_edit__event_exhibit';
|
||||
$events_loc.leads.show_edit__event_exhibit_obj = true;
|
||||
<section class="popover__content grow">
|
||||
<form
|
||||
id="form__license_single"
|
||||
class="form"
|
||||
on:submit|preventDefault={handle_submit_form_other}
|
||||
>
|
||||
|
||||
// modalStore.trigger(modal_edit__event_exhibit);
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-edit mx-1"></span>
|
||||
Start Exhibit Submission Form
|
||||
</button>
|
||||
{/if}
|
||||
</section>
|
||||
<!-- <input
|
||||
type="hidden"
|
||||
name="exhibit_id_random"
|
||||
value={}
|
||||
/> -->
|
||||
|
||||
<!-- {#if $ae_loc.trusted_access}
|
||||
<label for="ds_use_account_id" class="label text-xs inline">Use Account ID
|
||||
<input
|
||||
type="checkbox"
|
||||
name="ds_use_account_id"
|
||||
class="checkbox"
|
||||
value="true"
|
||||
checked={$ae_ds_loc.account_id ? true : false}
|
||||
/>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="exhibit_id"
|
||||
class="input max-w-48 text-xs"
|
||||
placeholder="Exhibit ID"
|
||||
value={$ae_ds_loc.exhibit_id}
|
||||
/>
|
||||
{/if} -->
|
||||
|
||||
{#if $ae_loc.ds.hub__page__events_leads__create_info}
|
||||
{@html $ae_loc.ds.hub__page__events_leads__create_info}
|
||||
{:else}
|
||||
<section>
|
||||
<div class="alert alert-info">
|
||||
More information can go here or this can be hidden.
|
||||
</div>
|
||||
</section>
|
||||
<!-- The email address is used as the key, not the index number from the array of licenses. The email address is used to send the login link to the user. The passcode is used to log in. The full name is used to identify the user. The passcode is generated if not provided. -->
|
||||
<input
|
||||
type="email"
|
||||
name="license_email"
|
||||
placeholder="Email address"
|
||||
bind:value={$events_sess.leads.tmp_license.email}
|
||||
required
|
||||
class="input max-w-48"
|
||||
/>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="license_full_name"
|
||||
placeholder="Full name"
|
||||
bind:value={$events_sess.leads.tmp_license.full_name}
|
||||
required
|
||||
class="input max-w-48"
|
||||
/>
|
||||
|
||||
{#if $ae_loc.trusted_access}
|
||||
<input
|
||||
type="text"
|
||||
name="license_passcode"
|
||||
placeholder="Passcode"
|
||||
bind:value={$events_sess.leads.tmp_license.passcode}
|
||||
required
|
||||
class="input max-w-48"
|
||||
/>
|
||||
{/if}
|
||||
|
||||
</form>
|
||||
</section> <!-- .popover__content -->
|
||||
|
||||
<footer class="popover__footer flex gap-1 justify-between items-center p-1 border-t">
|
||||
<div class="popover__content__actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn variant-soft-warning"
|
||||
on:click={() => {
|
||||
if (confirm('Are you sure you want to delete this data store?')) {
|
||||
// trigger = 'delete__ds__code';
|
||||
// $slct_trigger = 'delete__ds__code';
|
||||
}
|
||||
$events_sess.leads.show_form__license = false;
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-trash mx-1"></span>
|
||||
Delete
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
form="form__license_single"
|
||||
class="btn variant-soft-primary"
|
||||
disabled={license_submit_results instanceof Promise && !license_submit_results}
|
||||
on:click={() => {
|
||||
// trigger = 'save__ds__code';
|
||||
// $slct_trigger = 'save__ds__code';
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-save mx-1"></span>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="popover__status">
|
||||
Something text
|
||||
{#await license_submit_results}
|
||||
<div class="modal-loading">
|
||||
<span class="fas fa-spinner fa-spin"></span>
|
||||
<span class="loading-text">
|
||||
Saving...
|
||||
</span>
|
||||
</div>
|
||||
{:then license_submit_results}
|
||||
{#if license_submit_results}
|
||||
<div>
|
||||
<span class="fas fa-check text-green-500"></span>
|
||||
<span class="saved-text">
|
||||
Saved
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
{/await}
|
||||
|
||||
<div
|
||||
class="ae_debug"
|
||||
class:hidden={!$ae_loc?.debug}
|
||||
>
|
||||
submit: {$events_sess?.leads.submit_status__license}
|
||||
<!-- create: {$events_sess?.leads.create_status__license} -->
|
||||
<!-- update: {$events_sess?.leads.update_status__license} -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popover__actions">
|
||||
<button
|
||||
type="button"
|
||||
class="btn variant-soft-primary"
|
||||
on:click={() => {
|
||||
$events_sess.leads.show_form__license = false;
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-times mx-1"></span>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</footer> <!-- .popover__footer -->
|
||||
|
||||
</section> <!-- .ae_quick_popover -->
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
</section>
|
||||
<style lang="postcss">
|
||||
|
||||
div.ae_quick_modal_container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 100;
|
||||
background-color: hsla(0, 0%, 0%, .5);
|
||||
}
|
||||
|
||||
/* The section.ae_quick_modal should be above the rest of the content and centered on the page */
|
||||
section.ae_quick_popover {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 100;
|
||||
background-color: hsla(0, 0%, 100%, .95);
|
||||
padding: 1rem;
|
||||
border-radius: .5rem;
|
||||
box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);
|
||||
|
||||
min-height: 30%;
|
||||
min-width: 80%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -14,10 +14,6 @@ import Element_data_store from '$lib/element_data_store.svelte';
|
||||
const store_current_tab: Writable<string> = localStorageStore('ae_sponsorships_current_tab', 'start');
|
||||
console.log(`store_current_tab:`, $store_current_tab);
|
||||
|
||||
// This works and uses local storage:
|
||||
// store_current_tab must be prefixed with $ to be reactive.
|
||||
import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, RadioGroup, RadioItem, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
|
||||
import type { Writable } from 'svelte/store';
|
||||
|
||||
import { ae_util } from '$lib/ae_utils';
|
||||
import { api } from '$lib/api';
|
||||
|
||||
Reference in New Issue
Block a user