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

All of the changes from today (Wednesday February 25, 2026) need to be reviewed. We spent over 6 hours trying to fix the page loading when viewing a fresh Session ID and Presentation ID. OpenAI and Gemini failed hard!!! I am at a lost and frustrated. I will probably need to deal with this myself. :-/

Browse Source
This commit is contained in:
Scott Idem
2026-02-25 18:34:21 -05:00
parent 17620b6fbc
commit 7b5c7528b6
22 changed files with 1674 additions and 2828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
documentation/SVELTE_DEXIE_GUIDE.md
View File

@@ -92,6 +92,53 @@ export function createLiveQueryStore<T>(query: () => T | Promise<T>) {
The `createLiveQueryStore` function creates a readable store that automatically updates whenever the data in the `friends` table changes. The `$friends` variable in the component will always contain the latest data from the database.
## Page Load Strategies (Avoiding the "Waterfall")
When loading data for a primary page view (e.g., viewing a specific Journal, Session, or Person), you must choose a synchronization strategy to ensure the UI renders correctly on the first load.
### ❌ The "Fire & Forget" Anti-Pattern (AVOID)
Triggering a background load in `+page.ts` without `await` leads to race conditions.
1. `+page.svelte` mounts immediately.
2. `liveQuery` runs against an empty IndexedDB.
3. API data arrives later and writes to IndexedDB.
4. **Failure:** Svelte 5 + Dexie `liveQuery` may not automatically detect this first "cold start" update without a manual refresh.
### ✅ The "Blocking Loader" Pattern (RECOMMENDED)
Ensure the data is in IndexedDB **before** the component mounts.
1. In `+page.ts`, `await` the API load function.
2. In `+page.svelte`, the `liveQuery` will see the data immediately upon mount.
**Example (+page.ts):**
```typescript
export async function load({ params }) {
// Blocking await ensures IDB is populated
await journals_func.load_ae_obj_id__journal({
journal_id: params.journal_id,
try_cache: true
});
return {};
}
```
### ✅ The "Hydrate & Subscribe" Pattern (ADVANCED)
If you must use non-blocking loads, you must pass the initial data to the component to "hydrate" the state before the subscription takes over.
1. In `+page.ts`, `await` the load and **return the object**.
2. In `+page.svelte`, use the returned object as a fallback or initial state.
**Example (+page.svelte):**
```svelte
<script>
let { data } = $props();
let lq__obj = $derived(liveQuery(async () => db.table.get(id)));
</script>
<!-- Use fallback to handle the gap before liveQuery emits -->
{#if $lq__obj || data.initial_obj}
<View object={$lq__obj ?? data.initial_obj} />
{/if}
```
## Svelte 5 Binding Pitfalls
### 1. `props_invalid_value` (The "Expression Binding" Error)
@@ -156,18 +203,3 @@ let results = await db.table.where('id').equals(id).reverse().sortBy('sort_key')
let results = await db.table.where('id').equals(id).sortBy('sort_key');
return results.reverse();
```
## Current Data Flow in `ae_journals` Module
The `ae_journals` module currently uses a manual, API-first caching strategy. It does not use Dexie.js's `liveQuery` function for reactivity.
### Data Flow
1. **Fetch from API:** The `load_ae_obj_id__journal` and `load_ae_obj_li__journal` functions are used to fetch data from the API.
2. **Process Data:** The `process_ae_obj__journal_props` and `process_ae_obj__journal_entry_props` functions are used to process the data before it's saved to the database. This includes parsing Markdown, creating temporary sorting fields, and combining passcodes.
3. **Save to IndexedDB:** The `db_save_ae_obj_li__ae_obj` function is used to save the processed data to the `journal` and `journal_entry` tables in the `ae_journals_db` IndexedDB database.
4. **Manual Store Updates:** The Svelte stores in `src/lib/ae_journals/ae_journals_stores.ts` are manually updated with the fetched data.
### Future Improvements
The current implementation could be improved by refactoring it to use Dexie.js's `liveQuery` function. This would simplify the code, reduce boilerplate, and improve the reactivity of the application. By using `liveQuery`, the UI would automatically update whenever the data in the IndexedDB database changes, without the need for manual store updates.

11
src/lib/ae_events/ae_events__event_session.ts
View File

@@ -45,6 +45,9 @@ export async function load_ae_obj_id__event_session({
console.log(`🔎 [Trace] load_ae_obj_id__event_session: START (id=${event_session_id}, try_cache=${try_cache})`);
}
// Hierarchy Enforcement: Pulling presenters requires pulling presentations first
if (inc_presenter_li) inc_presentation_li = true;
// 1. FAST PATH: Return cached data immediately
if (try_cache) {
try {
@@ -181,6 +184,9 @@ export async function load_ae_obj_li__event_session({
console.log(`🔎 [Trace] load_ae_obj_li__event_session: START (for=${for_obj_type}:${for_obj_id}, try_cache=${try_cache})`);
}
// Hierarchy Enforcement: Pulling presenters requires pulling presentations first
if (inc_presenter_li) inc_presentation_li = true;
if (try_cache) {
try {
// Robust lookup logic
@@ -422,7 +428,10 @@ async function _process_generic_props<T extends Record<string, any>>({ obj_li, o
}
const randomIdKey = `${obj_type}_id_random`;
const baseIdKey = `${obj_type}_id`;
if (processed_obj[randomIdKey]) (processed_obj as any).id = processed_obj[randomIdKey];
if (processed_obj[randomIdKey]) {
(processed_obj as any).id = processed_obj[randomIdKey];
(processed_obj as any)[baseIdKey] = processed_obj[randomIdKey];
}
else if (processed_obj[baseIdKey]) (processed_obj as any).id = processed_obj[baseIdKey];
const group = processed_obj.group ?? '0';

5
src/lib/elements/element_manage_event_file_li_all.svelte
View File

@@ -38,13 +38,14 @@
ae_tmp.show__direct_download = false;
// let ae_triggers: key_val = {};
let dq__where_val: string = `${link_to_type}_id`;
let dq__where_eq_val: string = link_to_id;
let dq__where_val = $derived(`${link_to_type}_id`);
let dq__where_eq_val = $derived(link_to_id);
// This should include all files that are associated with an object (event, location, session, presenter, etc.)
// I am not sure why, but doing reverse() and then sortBy() seems to sort in descending order.
let lq__event_file_obj_li = $derived(
liveQuery(async () => {
if (!dq__where_eq_val) return [];
let results = await db_events.file
.where(dq__where_val)
.equals(dq__where_eq_val)

3
src/routes/events/+layout.ts
View File

@@ -1,5 +1,5 @@
/** @type {import('./$types').LayoutLoad} */
console.log(`ae_events_pres_mgmt +layout.ts start`);
console.log(`ae_events +layout.ts`);
// Imports
// import { browser } from '$app/environment';
@@ -9,7 +9,6 @@ export async function load({ parent }) {
const log_lvl: number = 0;
const parent_data = await parent();
// console.log(`ae_events_pres_mgmt +layout.ts parent_data:`, parent_data);
const account_id = parent_data.account_id;
if (!account_id) {

32
src/routes/events/+page.ts
View File

@@ -1,6 +1,5 @@
/** @type {import('./$types').PageLoad} */
import { error } from '@sveltejs/kit';
import { browser } from '$app/environment';
import { events_func } from '$lib/ae_events_functions';
@@ -13,32 +12,31 @@ export async function load({ parent }) {
const ae_acct = parent_data[account_id];
const event_id = ae_acct.slct.event_id; // From root +layout.ts
if (!event_id) {
if (log_lvl) {
console.log(`INFO: events +layout.ts: The event_id was not found in the parent_data.`);
}
// return false;
}
// const event_id = ae_acct.slct.event_id; // From root +layout.ts
// if (!event_id) {
// if (log_lvl) {
// console.log(`INFO: events +layout.ts: The event_id was not found in the parent_data.`);
// }
// }
if (browser) {
if (log_lvl) console.log(`ae_events +page.ts (Non-Blocking Refresh)`);
if (event_id) {
// Refresh the specific selected event
events_func.load_ae_obj_id__event({
api_cfg: ae_acct.api,
event_id: event_id,
log_lvl: log_lvl
});
}
// if (event_id) {
// // Refresh the specific selected event
// events_func.load_ae_obj_id__event({
// api_cfg: ae_acct.api,
// event_id: event_id,
// log_lvl: log_lvl
// });
// }
// Refresh the list of events for the account
events_func.load_ae_obj_li__event({
api_cfg: ae_acct.api,
for_obj_type: 'account',
for_obj_id: account_id,
inc_session_li: true,
// inc_session_li: false,
hidden: 'all', // 'not_hidden'
enabled: 'enabled',
limit: 25,

36
src/routes/events/[event_id]/(pres_mgmt)/+layout.ts Normal file
View File

@@ -0,0 +1,36 @@
/** @type {import('./$types').LayoutLoad} */
import { browser } from '$app/environment';
import { events_func } from '$lib/ae_events_functions';
export async function load({ parent }) {
const log_lvl: number = 0;
const parent_data = await parent();
const account_id = parent_data.account_id;
const ae_acct = parent_data[account_id];
const event_id = ae_acct.slct.event_id; // From root +layout.ts
if (browser) {
if (log_lvl) console.log(`ae_events (pres_mgmt) +layout.ts (Non-Blocking Refresh)`);
if (event_id) {
// Refresh the specific selected event
events_func.load_ae_obj_id__event({
api_cfg: ae_acct.api,
event_id: event_id,
// inc_file_li: false, // Changing from true 2026-02-04
// inc_location_li: false, // Changing from true 2026-02-04
inc_session_li: true,
log_lvl: log_lvl
});
}
}
parent_data[account_id] = ae_acct;
return parent_data;
}

7
src/routes/events/[event_id]/event_page_menu.svelte → src/routes/events/[event_id]/(pres_mgmt)/event_page_menu.svelte
View File

@@ -31,8 +31,8 @@
import Element_ae_crud from '$lib/elements/element_ae_crud.svelte';
import Element_data_store from '$lib/elements/element_data_store_v3.svelte';
import Comp__events_menu_nav from '../ae_comp__events_menu_nav.svelte';
import Comp__pres_mgmt_menu_opts from '../ae_comp__events_menu_opts.svelte';
import Comp__events_menu_nav from '../../ae_comp__events_menu_nav.svelte';
import Comp__pres_mgmt_menu_opts from '../../ae_comp__events_menu_opts.svelte';
// Variables
let ae_promises: key_val = {};
@@ -53,6 +53,7 @@
events__locations={$ae_loc.administrator_access}
events__reports={$ae_loc.trusted_access}
events__settings={$ae_loc.edit_mode && $ae_loc.administrator_access}
events__session_search={!!$lq__event_obj?.event_id}
/>
<span
@@ -77,7 +78,7 @@
.show_content__event_view == 'manage_files'}
class:preset-tonal-primary={$events_loc.pres_mgmt
.show_content__event_view != 'manage_files'}
class:hidden={!$ae_loc.administrator_access || 1 == 1}
class:hidden={!$ae_loc.administrator_access}
disabled={!$ae_loc.manager_access}
title="Session search or manage files for the event"
>

33
src/routes/events/[event_id]/(pres_mgmt)/location/[event_location_id]/+page.ts
View File

@@ -1,6 +1,5 @@
/** @type {import('./$types').PageLoad} */
import { error } from '@sveltejs/kit';
console.log(`ae_events_pres_mgmt_event [event_location_id] +page.ts start`);
import { browser } from '$app/environment';
@@ -11,20 +10,15 @@ export async function load({ params, parent }) {
const log_lvl: number = 0;
const data = await parent();
// console.log(`ae events_pres_mgmt location [event_location_id] +page.ts data:`, data);
const account_id = data.account_id;
const ae_acct = data[account_id];
// console.log(`ae_acct = `, ae_acct);
const event_location_id = params.event_location_id;
if (!event_location_id) {
console.warn(
`ae events_pres_mgmt location [event_location_id] +page.ts: The event_location_id was not found in the params!!!`
);
// error(404, {
// message: 'Location not found'
// });
}
ae_acct.slct.event_location_id = event_location_id;
@@ -42,38 +36,37 @@ export async function load({ params, parent }) {
events_func.load_ae_obj_id__event_location({
api_cfg: ae_acct.api,
event_location_id: event_location_id,
try_cache: true
inc_file_li: true,
inc_session_li: true,
inc_device_li: true,
inc_presentation_li: true,
inc_presenter_li: true,
log_lvl: log_lvl
});
// 2. Refresh sessions and their nested presentations
// 2. Refresh sessions and their nested presentations (REDUNDANT: Now handled by inc_session_li above)
/*
events_func.load_ae_obj_li__event_session({
api_cfg: ae_acct.api,
for_obj_type: 'event_location',
for_obj_id: event_location_id,
inc_presentation_li: true,
inc_presenter_li: true,
enabled: 'all',
limit: 50,
log_lvl: log_lvl
});
*/
// 3. Refresh files for the location
events_func.load_ae_obj_li__event_file({
api_cfg: ae_acct.api,
for_obj_type: 'event_location',
for_obj_id: event_location_id,
enabled: 'all',
hidden: 'all',
limit: 50,
log_lvl: log_lvl
});
// 4. Refresh devices for the location
// 4. Refresh devices for the location (REDUNDANT: Now handled by inc_device_li above)
/*
events_func.load_ae_obj_li__event_device({
api_cfg: ae_acct.api,
for_obj_type: 'event_location',
for_obj_id: event_location_id,
log_lvl: log_lvl
});
*/
}
// WARNING: Precaution against shared data between sites and sessions.

648
src/routes/events/[event_id]/(pres_mgmt)/pres_mgmt/+page.svelte Normal file
View File

@@ -0,0 +1,648 @@
<script lang="ts">
interface Props {
/** @type {import('./$types').PageData} */
data: any;
log_lvl?: number;
}
let { data, log_lvl = $bindable(0) }: Props = $props();
// *** Import Svelte specific
import { untrack } from 'svelte';
import { browser } from '$app/environment';
import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import Comp_event_session_obj_li_wrapper from '../../../ae_comp__event_session_obj_li_wrapper.svelte';
import { liveQuery } from 'dexie';
import { db_events } from '$lib/ae_events/db_events';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
import {
events_loc,
events_sess,
events_slct,
events_trigger
} from '$lib/stores/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';
import Comp_event_files_upload from '../../../ae_comp__event_files_upload.svelte';
import Element_manage_event_file_li_wrap from '$lib/elements/element_manage_event_file_li_direct.svelte';
import Event_page_menu from '../event_page_menu.svelte';
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
// NOTE: Derived from data.account_id (prop) instead of $slct.account_id (store)
// to prevent circular dependency loops during hydration.
let ae_acct = $derived(data[data.account_id]);
let event_id = $derived(data.params.event_id);
$effect(() => {
if (ae_acct) {
untrack(() => {
$events_slct.event_id = ae_acct.slct.event_id;
});
}
});
// *** Initialization & Store Guard ***
if ($events_loc.pres_mgmt) {
if (typeof $events_loc.pres_mgmt.search_version === 'undefined')
$events_loc.pres_mgmt.search_version = 0;
if (typeof $events_loc.pres_mgmt.qry__remote_first === 'undefined')
$events_loc.pres_mgmt.qry__remote_first = false;
if (
typeof $events_loc.pres_mgmt.fulltext_search_qry_str === 'undefined'
)
$events_loc.pres_mgmt.fulltext_search_qry_str = '';
if (typeof $events_loc.pres_mgmt.location_name_qry_str === 'undefined')
$events_loc.pres_mgmt.location_name_qry_str = '';
}
let lq__event_obj = $derived(
liveQuery(async () => {
if (log_lvl)
console.log(
`*** LiveQuery: lq__event_obj *** event_id=${$events_slct.event_id}`
);
return await db_events.event.get($events_slct?.event_id ?? '');
})
);
// JSON formatted configuration options for an event, and specifically for the presentation management module.
$effect(() => {
const remote_cfg = $lq__event_obj?.mod_pres_mgmt_json;
const local_cfg = $events_loc.pres_mgmt;
if (remote_cfg && local_cfg) {
untrack(() => {
events_func.sync_config__event_pres_mgmt({
pres_mgmt_cfg_remote: remote_cfg,
pres_mgmt_cfg_local: local_cfg,
log_lvl: log_lvl
});
});
}
});
let event_session_id_li: Array<string> = $state([]);
let search_debounce_timer: any = null;
let last_search_id = 0;
let last_executed_key = ''; // Search Guard Key
// Stable LiveQuery Pattern (Aether UI V3)
let lq__event_session_obj_li = $derived.by(() => {
const ids = event_session_id_li;
const event_id = $events_slct?.event_id;
return liveQuery(async () => {
// SCENARIO 1: Specific IDs provided (Search Results)
if (Array.isArray(ids) && ids.length > 0) {
if (log_lvl)
console.log(`Session Page LQ: bulkGet ${ids.length} IDs`);
const results = await db_events.session.bulkGet(ids);
return results.filter((item) => item !== undefined);
}
// SCENARIO 2: Fallback broad search (Only if no active filters)
if (
event_id &&
!$events_loc.pres_mgmt.fulltext_search_qry_str &&
!$events_loc.pres_mgmt.location_name_qry_str
) {
if (log_lvl)
console.log(
`Session Page LQ: Fallback search for event: ${event_id}`
);
return await db_events.session
.where('event_id')
.equals(event_id)
.limit(50)
.sortBy('name');
}
return [];
});
});
let lq__event_location_obj_li = $derived(
liveQuery(async () => {
let results = await db_events.location
.where('event_id')
.equals($events_slct.event_id)
.sortBy('name');
return results;
})
);
// Standardized Reactive Search Pattern (Aether UI V3)
let search_params = $derived({
v: $events_loc.pres_mgmt.search_version,
str: ($events_loc.pres_mgmt.fulltext_search_qry_str ?? '')
.toLowerCase()
.trim(),
location: $events_loc.pres_mgmt.location_name_qry_str,
event_id: $events_slct?.event_id,
remote_first: $events_loc.pres_mgmt.qry__remote_first
});
$effect(() => {
const params = search_params;
if (search_debounce_timer) clearTimeout(search_debounce_timer);
search_debounce_timer = setTimeout(() => {
handle_search_refresh(params);
}, 300);
return () => {
if (search_debounce_timer) clearTimeout(search_debounce_timer);
};
});
async function handle_search_refresh(params: any) {
// 1. Guard
const qry_key = JSON.stringify(params);
if (qry_key === last_executed_key) return;
last_executed_key = qry_key;
const current_search_id = ++last_search_id;
const event_id = params.event_id;
const remote_first = params.remote_first;
if (log_lvl)
console.log(
`[Session Search #${current_search_id}] Refreshing (remote=${remote_first}, event=${event_id}, str=${params.str})...`
);
untrack(() => {
$events_sess.pres_mgmt.status_qry__search = 'loading';
});
const qry_str = params.str;
const location_name = params.location;
// 2. FAST PATH: Local IDB Search
if (!remote_first) {
try {
if (event_id) {
let local_results = await db_events.session
.where('event_id')
.equals(event_id)
.filter((session) => {
if (
location_name &&
session.event_location_name !== location_name
)
return false;
if (qry_str) {
const name = (session.name ?? '').toLowerCase();
const code = (session.code ?? '').toLowerCase();
const description = (
session.description ?? ''
).toLowerCase();
const qry_string = (
session.default_qry_str ?? ''
).toLowerCase();
const match =
name.includes(qry_str) ||
code.includes(qry_str) ||
description.includes(qry_str) ||
qry_string.includes(qry_str);
if (!match) return false;
}
return true;
})
.toArray();
local_results.sort((a, b) =>
(a.name ?? '').localeCompare(b.name ?? '')
);
const local_ids = local_results
.map((s) => s.id || s.event_session_id)
.filter(Boolean);
if (current_search_id === last_search_id) {
if (log_lvl)
console.log(
`[Session Search #${current_search_id}] Fast Path found ${local_ids.length} items locally.`
);
untrack(() => {
event_session_id_li = local_ids;
if (local_ids.length > 0)
$events_sess.pres_mgmt.status_qry__search =
'done';
});
}
}
} catch (e) {
if (log_lvl) console.warn('Session Fast Path failed.', e);
}
} else {
untrack(() => {
event_session_id_li = [];
});
}
// 3. REVALIDATE: API Request
try {
const results = await events_func.search__event_session({
api_cfg: $ae_api,
event_id: event_id,
fulltext_search_qry_str: qry_str || null,
like_search_qry_str: qry_str || null,
location_name: location_name || null,
enabled: $events_loc.pres_mgmt.qry_enabled ?? 'enabled',
hidden: $events_loc.pres_mgmt.qry_hidden ?? 'not_hidden',
limit: $events_loc.pres_mgmt.qry_limit__sessions ?? 100,
try_cache: true,
log_lvl: 0
});
if (current_search_id === last_search_id) {
let api_results = results || [];
// Client-side Filter Guard: Ensure API results match local criteria (Backup filter)
api_results = api_results.filter((session) => {
if (
location_name &&
session.event_location_name !== location_name
)
return false;
if (qry_str) {
const name = (session.name ?? '').toLowerCase();
const code = (session.code ?? '').toLowerCase();
const description = (
session.description ?? ''
).toLowerCase();
const qry_string = (
session.default_qry_str ?? ''
).toLowerCase();
const match =
name.includes(qry_str) ||
code.includes(qry_str) ||
description.includes(qry_str) ||
qry_string.includes(qry_str);
if (!match) return false;
}
return true;
});
const api_ids = api_results
.map((s: any) => s.id || s.event_session_id)
.filter(Boolean);
untrack(() => {
$events_slct.event_session_obj_li = api_results;
event_session_id_li = api_ids;
$events_sess.pres_mgmt.status_qry__search = 'done';
});
if (log_lvl)
console.log(
`[Session Search #${current_search_id}] Revalidation Complete. Found ${api_ids.length} items.`
);
}
} catch (error) {
if (current_search_id === last_search_id) {
console.error('Session revalidation failed:', error);
untrack(() => {
$events_sess.pres_mgmt.status_qry__search = 'error';
});
}
}
}
if (
$events_loc.pres_mgmt?.save_search_text &&
$events_loc.pres_mgmt?.saved_search__session
) {
$events_loc.pres_mgmt.fulltext_search_qry_str =
$events_loc.pres_mgmt.saved_search__session;
}
if (
$events_loc.pres_mgmt?.save_search_text &&
$events_loc.pres_mgmt?.saved_search__session_location_name
) {
$events_loc.pres_mgmt.location_name_qry_str =
$events_loc.pres_mgmt.saved_search__session_location_name;
}
function handle_search_trigger() {
$events_loc.pres_mgmt.search_version++;
}
function prevent_default<T extends Event>(fn: (event: T) => void) {
return function (event: T) {
event.preventDefault();
fn(event);
};
}
</script>
<svelte:head>
<title>
&AElig;:
{ae_util.shorten_string({
string: $lq__event_obj?.name,
max_length: 12
})}
- Pres Mgmt - {$events_loc?.title}
</title>
</svelte:head>
<Event_page_menu {lq__event_obj} />
{#if !$lq__event_obj}
<div class="flex items-center justify-center p-10 opacity-50">
<span class="fas fa-spinner fa-spin mx-1 text-2xl"></span>
<span>Loading event information...</span>
</div>
{:else if $lq__event_obj?.enable || $ae_loc.trusted_access}
<header class="ae_module_header">
<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
<span class="fas fa-calendar-day m-1 text-neutral-800/80"></span>
<button
type="button"
onclick={() => {
if (
$events_loc.pres_mgmt.show_content__event_view ==
'manage_files'
) {
$events_loc.pres_mgmt.show_content__event_view = null;
} else {
$events_loc.pres_mgmt.show_content__event_view =
'manage_files';
}
}}
class="btn ae_btn_secondary"
class:preset-filled-secondary-500={$events_loc.pres_mgmt
.show_content__event_view == 'manage_files'}
class:preset-filled-tertiary-500={$events_loc.pres_mgmt
.show_content__event_view != 'manage_files'}
class:hidden={!$ae_loc.administrator_access}
title="View event search or manage files for the event"
>
{#if $events_loc.pres_mgmt.show_content__event_view == 'manage_files'}
<span class="fas fa-search m-1"></span>
Event Search?
{:else}
<span class="fas fa-file-archive m-1"></span>
Event Files?
<span
class="badge preset-tonal-success"
class:hidden={!$lq__event_obj?.file_count}
>
<span class="fas fa-file-alt m-1"></span>
{$lq__event_obj?.file_count}×
</span>
{/if}
</button>
</span>
<h2
class="text-2xl font-bold text-center max-w-xs sm:max-w-lg md:max-w-2xl"
>
<span class="sm:inline-block md:hidden">
{$lq__event_obj.cfg_json?.short_name ?? $lq__event_obj?.name}
</span>
<span class="hidden md:inline-block lg:hidden">
{$lq__event_obj.cfg_json?.med_name ?? $lq__event_obj?.name}
</span>
<span class="hidden lg:inline-block">
{$lq__event_obj.cfg_json?.long_name ?? $lq__event_obj?.name}
</span>
</h2>
</header>
{#if !$events_loc.pres_mgmt.show_content__event_view || $events_loc.pres_mgmt.show_content__event_view == 'default'}
<div class="ae_container_actions">
<form
onsubmit={prevent_default(() => handle_search_trigger())}
autocomplete="off"
class="form grow flex flex-row flex-wrap gap-1 justify-center items-center w-full"
>
<button
type="button"
class="btn btn-sm mx-1 ae_btn_warning"
class:hidden={!$ae_loc.authenticated_access}
onclick={() => {
$events_loc.pres_mgmt.location_name_qry_str = '';
$events_loc.pres_mgmt.show_content__session_search_room_name =
!$events_loc.pres_mgmt
.show_content__session_search_room_name;
handle_search_trigger();
}}
title="Search by location name"
>
<span class="fas fa-search-location"></span>
</button>
<select
name="location_name_list"
id="session_location_name_list"
bind:value={$events_loc.pres_mgmt.location_name_qry_str}
class="input text-xs font-bold font-mono min-w-fit w-min max-w-40 transition-all mx-1"
class:hidden={!$ae_loc.authenticated_access ||
!$events_loc.pres_mgmt
.show_content__session_search_room_name}
onchange={() => handle_search_trigger()}
title="Select to filter based on the location/room name"
>
{#if $lq__event_location_obj_li}
<option value="">Location / Room</option>
{#each $lq__event_location_obj_li as event_location_obj}
<option value={event_location_obj?.name}
>{event_location_obj.name}</option
>
{/each}
{/if}
</select>
<button
type="button"
onclick={() => {
$events_loc.pres_mgmt.fulltext_search_qry_str = '';
handle_search_trigger();
}}
class:hidden={!$events_loc.pres_mgmt
.fulltext_search_qry_str}
class="btn btn-sm mx-1 ae_btn_warning"
title="Clear search text"
>
<span class="fas fa-remove-format"></span>
</button>
<input
type="search"
placeholder="Search for a session"
id="session_fulltext_search_qry_str"
bind:value={$events_loc.pres_mgmt.fulltext_search_qry_str}
class="input text-1xl hover:text-2xl font-bold font-mono w-80 transition-all mx-1 ae_btn_info"
onkeyup={(e) => {
if (e.key === 'Enter') handle_search_trigger();
}}
autofocus
data-ignore="true"
/>
<button
type="submit"
class="btn btn-lg text-2xl font-bold w-48 mx-1 ae_btn_primary"
title="Search for a session"
>
{#if $events_sess.pres_mgmt.status_qry__search == 'loading'}
<span
class="fas fa-spinner fa-spin mx-1 text-success-800-200"
></span>
{:else}
<span class="fas fa-search mx-1 text-neutral-800/80"
></span>
{/if}
Search
</button>
{#if $ae_loc.edit_mode}
<label
class="flex items-center gap-1 cursor-pointer bg-surface-200-800 px-2 py-1 rounded-token text-xs font-semibold opacity-70 hover:opacity-100 transition-all"
>
<span> Remote First </span>
<input
type="checkbox"
bind:checked={
$events_loc.pres_mgmt.qry__remote_first
}
onchange={() => handle_search_trigger()}
class="checkbox checkbox-sm"
/>
</label>
{/if}
</form>
</div>
{#if event_session_id_li.length}
<Comp_event_session_obj_li_wrapper
{lq__event_session_obj_li}
hide__session_location={$events_loc.pres_mgmt
?.hide__session_li_location_field}
hide__session_poc={$events_loc.pres_mgmt
?.hide__session_li_poc_field}
hide__launcher_link_legacy={$events_loc.pres_mgmt
?.hide__launcher_link_legacy}
hide__launcher_link={$events_loc.pres_mgmt?.hide__launcher_link}
hide__location_link={$events_loc.pres_mgmt?.hide__location_link}
log_lvl={1}
/>
{:else if $events_sess.pres_mgmt.status_qry__search === 'loading'}
<div
class="flex flex-col items-center justify-center p-20 opacity-50 text-center"
>
<span class="fas fa-spinner fa-spin text-4xl mb-4"></span>
<p class="text-xl">Searching sessions...</p>
</div>
{:else}
<section
class="text-center text-2xl bg-yellow-100 p-4 rounded-md lg:max-w-lg space-y-2 mx-auto"
>
<div>
<span
class="fas fa-exclamation-triangle text-2xl text-yellow-500"
></span>
<strong>No results to show</strong>
<span
class="fas fa-exclamation-triangle text-2xl text-yellow-500"
></span>
<br />
<div class="text-lg">
Please use the search above to find your session.
</div>
</div>
<div>
<strong>Search by:</strong>
<ul class="list-disc list-inside text-lg text-left">
<li>Session name</li>
<li>Session description</li>
<li>Presentation name</li>
<li>Presenter names</li>
<li>Presenter ID (member ID)</li>
</ul>
</div>
</section>
{/if}
{:else if $events_loc.pres_mgmt.show_content__event_view == 'manage_files' && $ae_loc.trusted_access}
{#if $lq__event_obj}
<header>
<h2 class="h3 text-center">{$lq__event_obj?.name}</h2>
<h3 class="h4 text-center">Event - Manage Files</h3>
</header>
{/if}
<div>
<h3 class="h5 text-center">
<span class="fas fa-tasks m-1 text-neutral-800/80"></span>
<span class="fas fa-mail-bulk m-1 text-neutral-800/80"></span>
Manage and Upload Event Files:
</h3>
<Comp_event_files_upload
class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
link_to_type="event"
link_to_id={$lq__event_obj?.event_id}
>
{#snippet label()}
<span>
<div class="text-lg">
<span class="fas fa-upload"></span>
<strong class=""
>Upload global event files only!</strong
>
</div>
<div
class="text-sm text-gray-600 dark:text-gray-400 italic"
>
<strong>Global event files only</strong><br />
Recommended: PowerPoint (pptx) or Keynote (key)<br
/>
Media: Audio and videos files should be directly embedded
in PowerPoint (PPTX) files<br />
Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
</div>
</span>
{/snippet}
</Comp_event_files_upload>
<div class="overflow-x-auto w-max max-w-full">
<Element_manage_event_file_li_wrap
link_to_type={'event'}
link_to_id={$lq__event_obj?.event_id}
allow_basic={$events_loc.auth__kv.session[
$lq__event_obj?.event_id
]}
allow_moderator={$events_loc.auth__kv.session[
$lq__event_obj?.event_id
]}
container_class_li={''}
/>
</div>
</div>
{/if}
{:else}
<div class="bg-red-100 p-4 border border-red-200 rounded-md">
<h2 class="h3">
<span class="fas fa-exclamation-triangle text-red-500 m-1"></span>
Event Disabled
</h2>
<p>
This event is currently disabled. Please contact the event organizer
for more information.
</p>
</div>
{/if}
<style lang="postcss">
</style>

5
src/routes/events/[event_id]/(pres_mgmt)/pres_mgmt/+page.ts Normal file
View File

@@ -0,0 +1,5 @@
/** @type {import('./$types').PageLoad} */
console.log(`Events - [event_id] (p) +page.ts start`);
// export async function load({ params, parent }) {
// }

491
src/routes/events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_li.svelte
View File

@@ -124,280 +124,269 @@
</h3>
<!-- Show presenters for this LiveQuery -->
{#if $lq__event_presenter_obj_li?.length}
<!-- <strong class="text-sm">Presenters:
{#if $ae_loc.administrator_access}
({$lq__event_presenter_obj_li?.length})
{/if}
</strong> -->
<ul class="space-y-1 px-4 m-2 bg-gray-100 rounded-md">
{#each $lq__event_presenter_obj_li as event_presenter_obj}
<!-- This is a hack. I can not get the LiveQuery to work with specific presentation IDs. It only works with the session ID. I need to figure out how to get the presenters for the specific presentation. -->
<!-- {#if event_presenter_obj.event_presentation_id == event_presentation_obj.event_presentation_id} -->
<li
class:dim={event_presenter_obj?.hide}
class:dim_warning={!event_presenter_obj?.enable}
class:hidden={!event_presenter_obj?.enable &&
!$ae_loc.administrator_access}
<ul class="space-y-1 px-4 m-2 bg-gray-100 rounded-md">
{#each $lq__event_presenter_obj_li ?? [] as event_presenter_obj}
<!-- This is a hack. I can not get the LiveQuery to work with specific presentation IDs. It only works with the session ID. I need to figure out how to get the presenters for the specific presentation. -->
<!-- {#if event_presenter_obj.event_presentation_id == event_presentation_obj.event_presentation_id} -->
<li
class:dim={event_presenter_obj?.hide}
class:dim_warning={!event_presenter_obj?.enable}
class:hidden={!event_presenter_obj?.enable &&
!$ae_loc.administrator_access}
>
<a
href="/events/{event_presenter_obj.event_id}/presenter/{event_presenter_obj.event_presenter_id}"
class:btn-sm={display_mode != 'default'}
class="
ae_obj__event_presenter
btn preset-tonal-primary border border-primary-500
hover:preset-filled-primary-500
font-bold min-w-64 max-w-96 my-0.5
overflow-hidden
"
title="Person ID: {event_presenter_obj.person_id}; Email: {event_presenter_obj.person_primary_email}"
>
<a
href="/events/{event_presenter_obj.event_id}/presenter/{event_presenter_obj.event_presenter_id}"
class:btn-sm={display_mode != 'default'}
class="
ae_obj__event_presenter
btn preset-tonal-primary border border-primary-500
hover:preset-filled-primary-500
font-bold min-w-64 max-w-96 my-0.5
overflow-hidden
"
title="Person ID: {event_presenter_obj.person_id}; Email: {event_presenter_obj.person_primary_email}"
>
{#if event_presenter_obj?.given_name && event_presenter_obj?.given_name != 'Group'}
<span
class="fas fa-user m-0.5 text-xs text-surface-800-200"
></span>
{:else if event_presenter_obj?.given_name == 'Group'}
<span
class="fas fa-users m-0.5 text-xs text-surface-800-200"
></span>
{:else}
<span
class="fas fa-user-slash m-0.5 text-xs text-surface-800-200"
></span>
{/if}
{#if event_presenter_obj.priority}
<span
class="fas fa-star m-0.5 text-xs text-yellow-800-200"
></span>
{/if}
<span class="text-center grow">
{#if event_presenter_obj?.given_name && event_presenter_obj?.given_name != 'Group'}
<span
class="fas fa-user m-0.5 text-xs text-surface-800-200"
></span>
{event_presenter_obj?.full_name}
{:else if event_presenter_obj?.given_name == 'Group'}
<span
class="fas fa-users m-0.5 text-xs text-surface-800-200"
></span>
{ae_util.shorten_string({
string: event_presenter_obj?.affiliations,
max_length: 25
})}
{:else}
<span
class="fas fa-user-slash m-0.5 text-xs text-surface-800-200"
></span>
--not set--
{/if}
{#if event_presenter_obj.priority}
<span
class="fas fa-star m-0.5 text-xs text-yellow-800-200"
></span>
{/if}
<span class="text-center grow">
{#if event_presenter_obj?.given_name && event_presenter_obj?.given_name != 'Group'}
{event_presenter_obj?.full_name}
{:else if event_presenter_obj?.given_name == 'Group'}
{ae_util.shorten_string({
string: event_presenter_obj?.affiliations,
max_length: 25
})}
{:else}
--not set--
{/if}
</span>
{#if event_presenter_obj?.file_count}
<span
class="badge preset-tonal-success hover:preset-filled-success-500"
title="{event_presenter_obj.file_count} files"
>
<span class="fas fa-file-alt mx-1"></span>
{event_presenter_obj?.file_count}×
<!-- {event_presenter_obj?.file_count ? `(${event_presenter_obj?.file_count}&times; files)` : '(0 files)'} -->
</span>
{/if}
</a>
{#if event_presenter_obj?.file_count}
<span
class="badge preset-tonal-success hover:preset-filled-success-500"
title="{event_presenter_obj.file_count} files"
>
<span class="fas fa-file-alt mx-1"></span>
{event_presenter_obj?.file_count}×
<!-- {event_presenter_obj?.file_count ? `(${event_presenter_obj?.file_count}&times; files)` : '(0 files)'} -->
</span>
{/if}
</a>
{#if $events_loc?.pres_mgmt?.show__email_access_link && event_presenter_obj?.person_primary_email && ($ae_loc.administrator_access || !$events_loc.auth__person?.id)}
<button
type="button"
onclick={() => {
console.log('Email the access link');
if (!event_presenter_obj.person_primary_email) {
alert(
'No email address found for this presenter.'
);
return;
}
if (
confirm(
`This will send the sign in email to ${event_presenter_obj.person_primary_email}`
)
) {
console.log(
'Send the email to the presenter.'
);
} else {
console.log('Cancelled sending the email.');
return false;
}
{#if $events_loc?.pres_mgmt?.show__email_access_link && event_presenter_obj?.person_primary_email && ($ae_loc.administrator_access || !$events_loc.auth__person?.id)}
events_func.email_sign_in__event_presenter({
api_cfg: $ae_api,
to_email:
event_presenter_obj.person_primary_email,
to_name:
event_presenter_obj?.full_name ??
'-- not set --',
base_url: $ae_loc.url_origin,
person_id:
event_presenter_obj?.person_id,
person_passcode:
event_presenter_obj.person_passcode ??
'-- not set --',
event_id:
event_presenter_obj.event_id,
event_session_id:
event_presenter_obj.event_session_id,
event_presentation_id:
event_presenter_obj.event_presentation_id,
event_presenter_id:
event_presenter_obj.event_presenter_id,
session_name:
event_presenter_obj?.event_session_name ??
'-- not set --',
presentation_name:
event_presenter_obj?.event_presentation_name ??
'-- not set --'
});
}}
class="btn preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 my-0.5 transition-all hover:transition-all"
class:btn-sm={display_mode != 'default'}
title="Email the access link to the presenter"
>
<span class="fas fa-envelope mx-1"></span>
Email Access Link
</button>
{/if}
{#if $events_loc.pres_mgmt?.require__presenter_agree}
{#if event_presenter_obj?.agree}
<!-- {#if $ae_loc.trusted_access || $events_loc.auth__kv.presenter[event_presenter_obj.event_presenter_id]} -->
<button
type="button"
disabled={!$ae_loc.trusted_access &&
!$events_loc.auth__kv.presenter[
event_presenter_obj
.event_presenter_id
]}
onclick={() => {
console.log('Email the access link');
if (!event_presenter_obj.person_primary_email) {
alert(
'No email address found for this presenter.'
);
return;
}
if (
confirm(
`This will send the sign in email to ${event_presenter_obj.person_primary_email}`
)
) {
console.log(
'Send the email to the presenter.'
);
} else {
console.log('Cancelled sending the email.');
return false;
}
console.log('View terms and conditions');
$events_slct.event_presentation_id =
event_presenter_obj.event_presentation_id;
// $events_slct.event_presentation_obj = $lq__event_presentation_obj;
events_func.email_sign_in__event_presenter({
api_cfg: $ae_api,
to_email:
event_presenter_obj.person_primary_email,
to_name:
event_presenter_obj?.full_name ??
'-- not set --',
base_url: $ae_loc.url_origin,
person_id:
event_presenter_obj?.person_id,
person_passcode:
event_presenter_obj.person_passcode ??
'-- not set --',
event_id:
event_presenter_obj.event_id,
event_session_id:
event_presenter_obj.event_session_id,
event_presentation_id:
event_presenter_obj.event_presentation_id,
event_presenter_id:
event_presenter_obj.event_presenter_id,
session_name:
event_presenter_obj?.event_session_name ??
'-- not set --',
presentation_name:
event_presenter_obj?.event_presentation_name ??
'-- not set --'
});
$events_slct.event_presenter_id =
event_presenter_obj.event_presenter_id;
// $events_slct.event_presenter_obj = event_presenter_obj;
$events_sess.pres_mgmt.show_modal__presenter_agree =
event_presenter_obj.event_presenter_id;
}}
class="btn preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500 my-0.5 transition-all hover:transition-all"
class="btn preset-tonal-success hover:preset-filled-success-500 my-0.5"
class:btn-sm={display_mode != 'default'}
title="Email the access link to the presenter"
title="Agreed to terms and conditions"
>
<span class="fas fa-envelope mx-1"></span>
Email Access Link
<span
class="fas fa-check text-green-500 px-1"
title="Agreed to terms and conditions"
></span>
Agreed
</button>
{:else}
<button
type="button"
disabled={!$ae_loc.trusted_access &&
!$events_loc.auth__kv.presenter[
event_presenter_obj
.event_presenter_id
]}
onclick={() => {
console.log('View terms and conditions');
$events_slct.event_presentation_id =
event_presenter_obj.event_presentation_id;
// $events_slct.event_presentation_obj = $lq__event_presentation_obj;
$events_slct.event_presenter_id =
event_presenter_obj.event_presenter_id;
// $events_slct.event_presenter_obj = event_presenter_obj;
$events_sess.pres_mgmt.show_modal__presenter_agree =
event_presenter_obj.event_presenter_id;
}}
class="btn preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 my-0.5"
class:btn-sm={display_mode != 'default'}
title="View terms and conditions"
>
<span
class="fas fa-times bg-red-500 text-white px-1 mx-1"
title="Not agreed to terms and conditions"
></span>
Not yet agreed
</button>
{/if}
{/if}
{#if $events_loc.pres_mgmt?.require__presenter_agree}
{#if event_presenter_obj?.agree}
<!-- {#if $ae_loc.trusted_access || $events_loc.auth__kv.presenter[event_presenter_obj.event_presenter_id]} -->
<button
type="button"
disabled={!$ae_loc.trusted_access &&
!$events_loc.auth__kv.presenter[
event_presenter_obj
.event_presenter_id
]}
onclick={() => {
console.log('View terms and conditions');
$events_slct.event_presentation_id =
event_presenter_obj.event_presentation_id;
// $events_slct.event_presentation_obj = $lq__event_presentation_obj;
<div class="float-right space-2 flex flex-row items-center">
{#if $ae_loc.administrator_access && !event_presenter_obj.person_id}
<button
type="button"
onclick={async () => {
console.log('Add Person');
if (
!confirm(
`Add a new person to the account? You will be able to edit their details after the person record is created.\n\n${$ae_loc.account_name}\nID: ${$slct.account_id}`
)
) {
return;
}
$events_slct.event_presenter_id =
event_presenter_obj.event_presenter_id;
// $events_slct.event_presenter_obj = event_presenter_obj;
let person_data = {
account_id: $slct.account_id,
// user_id: user_obj.user_id,
given_name: 'New',
family_name: 'Presenter',
primary_email:
'test+newpres@oneskyit.com',
code: 'new_presenter',
// Random number between 100000 and 999999
passcode:
Math.floor(Math.random() * 900000) +
100000,
enable: true
};
$events_sess.pres_mgmt.show_modal__presenter_agree =
event_presenter_obj.event_presenter_id;
}}
class="btn preset-tonal-success hover:preset-filled-success-500 my-0.5"
class:btn-sm={display_mode != 'default'}
title="Agreed to terms and conditions"
>
<span
class="fas fa-check text-green-500 px-1"
title="Agreed to terms and conditions"
></span>
Agreed
</button>
{:else}
<button
type="button"
disabled={!$ae_loc.trusted_access &&
!$events_loc.auth__kv.presenter[
event_presenter_obj
.event_presenter_id
]}
onclick={() => {
console.log('View terms and conditions');
let new_person_obj =
await core_func.create_ae_obj__person({
api_cfg: $ae_api,
// user_id: $ae_loc.user_id,
data_kv: person_data,
log_lvl: log_lvl
});
$events_slct.event_presentation_id =
event_presenter_obj.event_presentation_id;
// $events_slct.event_presentation_obj = $lq__event_presentation_obj;
console.log(
'new_person_obj:',
new_person_obj
);
$events_slct.event_presenter_id =
event_presenter_obj.event_presenter_id;
// $events_slct.event_presenter_obj = event_presenter_obj;
$events_sess.pres_mgmt.show_modal__presenter_agree =
event_presenter_obj.event_presenter_id;
}}
class="btn preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500 my-0.5"
class:btn-sm={display_mode != 'default'}
title="View terms and conditions"
>
<span
class="fas fa-times bg-red-500 text-white px-1 mx-1"
title="Not agreed to terms and conditions"
></span>
Not yet agreed
</button>
{/if}
{/if}
<div class="float-right space-2 flex flex-row items-center">
{#if $ae_loc.administrator_access && !event_presenter_obj.person_id}
<button
type="button"
onclick={async () => {
console.log('Add Person');
if (
!confirm(
`Add a new person to the account? You will be able to edit their details after the person record is created.\n\n${$ae_loc.account_name}\nID: ${$slct.account_id}`
)
) {
return;
}
let person_data = {
account_id: $slct.account_id,
// user_id: user_obj.user_id,
given_name: 'New',
family_name: 'Presenter',
primary_email:
'test+newpres@oneskyit.com',
code: 'new_presenter',
// Random number between 100000 and 999999
passcode:
Math.floor(Math.random() * 900000) +
100000,
enable: true
};
let new_person_obj =
await core_func.create_ae_obj__person({
if (new_person_obj) {
// We then need to update the event_presenter with the new person_id.
events_func.update_ae_obj__event_presenter(
{
api_cfg: $ae_api,
// user_id: $ae_loc.user_id,
data_kv: person_data,
event_presenter_id:
event_presenter_obj.event_presenter_id,
data_kv: {
person_id:
new_person_obj.person_id
},
log_lvl: log_lvl
});
console.log(
'new_person_obj:',
new_person_obj
}
);
if (new_person_obj) {
// We then need to update the event_presenter with the new person_id.
events_func.update_ae_obj__event_presenter(
{
api_cfg: $ae_api,
event_presenter_id:
event_presenter_obj.event_presenter_id,
data_kv: {
person_id:
new_person_obj.person_id
},
log_lvl: log_lvl
}
);
}
}}
class:hidden={!$ae_loc.edit_mode}
class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500"
>
<span class="fas fa-plus mx-1"></span>
Add Person
</button>
{/if}
</div>
</li>
<!-- {/if} -->
{/each}
</ul>
{:else}
<!-- <p class:hidden={display_mode != 'default'}>
No presenters available to show at this time
</p> -->
{/if}
}
}}
class:hidden={!$ae_loc.edit_mode}
class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500"
>
<span class="fas fa-plus mx-1"></span>
Add Person
</button>
{/if}
</div>
</li>
<!-- {/if} -->
{/each}
</ul>
</section>

480
src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.svelte
View File

@@ -6,176 +6,77 @@
}
let { data }: Props = $props();
let log_lvl: number = $state(0);
let log_lvl: number = $state(1);
// Imports
import { Modal } from 'flowbite-svelte';
import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import Element_data_store from '$lib/elements/element_data_store_v3.svelte';
// let ae_promises: key_val = {};
// let ae_tmp: key_val = {};
// let ae_triggers: key_val = {};
import { liveQuery } from 'dexie';
// import { core_func } from '$lib/ae_core/ae_core_functions';
import { db_events } from '$lib/ae_events/db_events';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
import {
events_loc,
events_sess,
events_slct,
events_trigger,
events_trig_kv
} from '$lib/stores/ae_events_stores';
import { ae_snip, ae_loc, ae_api, slct } from '$lib/stores/ae_stores';
import { events_loc, events_sess, events_slct } from '$lib/stores/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';
import Comp_event_files_upload from '../../../../ae_comp__event_files_upload.svelte';
import Comp_event_presenter_form_agree from '../../presenter/[presenter_id]/ae_comp__event_presenter_form_agree.svelte';
import Element_manage_event_file_li_wrap from '$lib/elements/element_manage_event_file_li_direct.svelte';
import Session_view from './session_view.svelte';
import Session_page_menu from './session_page_menu.svelte';
import Comp_event_session_alert from '../ae_comp__event_session_alert.svelte';
// import Sign_in_out from './../../sign_in_out.svelte';
import Comp_event_presentation_obj_li from '../../../../ae_comp__event_presentation_obj_li.svelte';
import { browser } from '$app/environment';
// STABILITY FIX: Use URL params directly for queries.
const url_session_id = data.params.session_id;
const url_event_id = data.params.event_id;
// Variables
if (browser) {
console.log('Browser environment detected.');
}
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
// $slct.account_id = data.account_id;
// console.log(`$slct.account_id = `, $slct.account_id);
let ae_acct = data[data.account_id];
// console.log(`ae_acct = `, ae_acct);
$ae_loc.url_origin = data.url.origin;
$events_slct.event_id = ae_acct.slct.event_id;
// $events_slct.event_obj = ae_acct.slct.event_obj;
$events_slct.event_session_id = ae_acct.slct.event_session_id;
// $events_slct.event_session_obj = ae_acct.slct.event_session_obj;
$events_slct.event_presentation_id = null;
// $events_slct.event_presentation_obj = null;
$events_slct.event_presentation_obj_li =
ae_acct.slct.event_presentation_obj_li;
// $events_slct.event_file_obj_li = ae_acct.slct.event_file_obj_li;
if (!$events_loc.auth__person) {
$events_loc.auth__person = {
id: null,
email: null,
full_name: null,
entered_key: null,
entered_passcode: null
};
}
if (!$events_loc.auth__kv) {
$events_loc.auth__kv = {
session: {},
presentation: {},
presenter: {},
person: {}
};
}
if (!$events_loc.pres_mgmt) {
$events_loc.pres_mgmt = {};
}
if (!$events_sess.pres_mgmt) {
$events_sess.pres_mgmt = {};
$events_sess.pres_mgmt.show_content__agree_text = null;
$events_sess.pres_mgmt.show_content__presenter_start = null;
}
$events_sess.pres_mgmt.show_content__agree_text = false;
$events_sess.pres_mgmt.show_content__presenter_start = false;
let lq__event_obj = $derived(
liveQuery(async () => {
let results = await db_events.event.get($events_slct.event_id);
return results;
})
);
// Sync stores in the background
let ae_acct = $derived(data[data.account_id]);
$effect(() => {
if (!ae_acct) return;
untrack(() => {
$ae_loc.url_origin = data.url.origin;
$events_slct.event_id = url_event_id;
$events_slct.event_session_id = url_session_id;
});
});
// 1. Session Observable
let lq__event_session_obj = $derived(
liveQuery(async () => {
let results = await db_events.session.get(
ae_acct.slct.event_session_id
);
return results;
if (log_lvl) console.log(`[LQ] Querying Session: ${url_session_id}`);
return await db_events.session.get(url_session_id);
})
);
// 2. Presentation List Observable
let lq__event_presentation_obj_li = $derived(
liveQuery(async () => {
if (!$lq__event_session_obj?.event_session_id) return [];
let results = await db_events.presentation
.where('event_session_id') // This field contains the random ID
.equals($lq__event_session_obj.event_session_id) // Compare against the random ID
if (log_lvl) console.log(`[LQ] Querying Presentations for Session: ${url_session_id}`);
return await db_events.presentation
.where('event_session_id')
.equals(url_session_id)
.sortBy('name');
return results;
})
);
// 3. Other Observables
let lq__event_obj = $derived(
liveQuery(async () => await db_events.event.get(url_event_id))
);
let lq__event_presenter_obj = $derived(
liveQuery(async () => {
let results = await db_events.presenter.get(
$events_slct.event_presenter_id
);
return results;
if (!$events_slct.event_presenter_id) return null;
return await db_events.presenter.get($events_slct.event_presenter_id);
})
);
let lq__auth__event_presenter_obj = $derived(
liveQuery(async () => {
let results = await db_events.presenter.get(
$events_loc.auth__person?.presenter_id ?? null
);
return results;
const pid = $events_loc.auth__person?.presenter_id;
if (!pid) return null;
return await db_events.presenter.get(pid);
})
);
$slct.person_obj_kv = {}; // This is intended for the POC lookup list when generated.
// JSON formatted configuration options for an event, and specifically for the presentation management module.
$effect(() => {
const remote_cfg = $lq__event_obj?.mod_pres_mgmt_json;
const local_cfg = $events_loc?.pres_mgmt;
if (remote_cfg && local_cfg) {
untrack(() => {
events_func.sync_config__event_pres_mgmt({
pres_mgmt_cfg_remote: remote_cfg,
pres_mgmt_cfg_local: local_cfg,
log_lvl: log_lvl
});
});
}
});
if (
!$ae_loc.authenticated_access &&
$events_loc.pres_mgmt.show_content__session_view
) {
$events_loc.pres_mgmt.show_content__session_view = null;
}
// *** Functions and Logic
if (!$events_loc.pres_mgmt) $events_loc.pres_mgmt = {};
if (!$events_sess.pres_mgmt) $events_sess.pres_mgmt = {};
</script>
<svelte:head>
@@ -183,296 +84,55 @@
Session: {ae_util.shorten_string({
string: $lq__event_session_obj?.name ?? 'Loading...',
max_length: 12
})} ({$lq__event_session_obj?.event_session_id ?? ''}) - Pres Mgmt - {$events_loc?.title}
})} - Pres Mgmt
</title>
</svelte:head>
<section
class="
ae_events_pres_mgmt_event_session
container
flex flex-col gap-1
items-center
justify-start
mx-auto
py-1 px-2 pb-16
h-full
min-w-full
max-w-max
"
>
<Session_page_menu
{data}
{lq__event_session_obj}
{lq__auth__event_presenter_obj}
/>
<section class="ae_events_pres_mgmt_event_session container mx-auto py-1 px-2 pb-16 space-y-6">
<!-- Pass observable STORES to child components (they use $) -->
<Session_page_menu {data} {lq__event_session_obj} {lq__auth__event_presenter_obj} />
{#if !$lq__event_session_obj}
<div>
<span class="fas fa-spinner fa-spin m-1"></span>
<span>Loading session information...</span>
</div>
{:else if $lq__event_session_obj?.enable || $ae_loc.trusted_access}
<header class="ae_module_header relative">
{#if $lq__event_session_obj?.alert && $ae_loc.trusted_access}
<Comp_event_session_alert
event_session_obj={$lq__event_session_obj}
position="top"
{log_lvl}
/>
{/if}
<span
class="flex flex-row flex-wrap gap-1 items-center justify-center"
>
<!-- <span class="fas fa-calendar-day m-1"></span> -->
<span class="fas fa-chalkboard-teacher m-1 text-neutral-800/80"
></span>
<!-- Button to toggle between the regular session view and managing session files -->
<button
type="button"
onclick={() => {
if (
$events_loc.pres_mgmt.show_content__session_view ==
'manage_files'
) {
$events_loc.pres_mgmt.show_content__session_view =
null;
} else {
$events_loc.pres_mgmt.show_content__session_view =
'manage_files';
}
}}
class="btn btn-md hover:preset-filled-primary-500"
class:preset-tonal-tertiary={$events_loc.pres_mgmt
.show_content__session_view == 'manage_files'}
class:preset-filled-tertiary-500={$events_loc.pres_mgmt
.show_content__session_view != 'manage_files'}
class:hidden={!$ae_loc.public_access}
title="View session information or manage files for the session"
>
{#if $events_loc.pres_mgmt.show_content__session_view == 'manage_files'}
<span class="fas fa-users m-1"></span>
<!-- View Details -->
Session Presenters?
{:else}
<span class="fas fa-file-archive m-1"></span>
Session Files?
<span
class="badge preset-tonal-success"
class:hidden={!$lq__event_session_obj?.file_count}
>
<span class="fas fa-file-alt m-1"></span>
{$lq__event_session_obj?.file_count}×
</span>
{/if}
</button>
</span>
<span
class="grow flex flex-row flex-wrap gap-2 items-center justify-end"
>
<h2
class="text-xl font-bold text-center max-w-xs sm:max-w-lg md:max-w-2xl"
>
<!-- <span class="max-w-xs sm:max-w-lg md:max-w-2xl"> -->
{@html $lq__event_session_obj?.name ??
ae_snip.html__not_set}
<!-- </span> -->
</h2>
{#if (!$events_loc.pres_mgmt?.hide__session_code && $lq__event_session_obj.code) || $ae_loc.edit_mode}
<span
class="badge text-sm preset-tonal-surface flex flex-col gap-0.25 max-w-fit shrink justify-self-end"
title="Session code {$lq__event_session_obj.code}"
>
<span class="text-xs text-surface-800-200">
<span class="fas fa-barcode m-1"></span>
code
</span>
{$lq__event_session_obj.code}
</span>
{/if}
</span>
</header>
<Element_data_store
ds_code="events__pres_mgmt__session_msg"
ds_name="Default: Events - Pres Mgmt Session Message"
ds_type="html"
for_type="event"
for_id={$lq__event_session_obj?.event_id}
class_li="w-full max-w-(--breakpoint-lg) text-lg text-blue-500 font-bold text-center p-1 m-auto border border-blue-200 rounded-md bg-blue-100 space-y-2"
hide={!$ae_loc.manager_access ||
$events_loc.pres_mgmt.hide__session_msg}
show_edit={false}
show_edit_btn={true}
<!-- Metadata Section -->
<div class="bg-surface-50-950 p-4 rounded-container-token shadow-sm border border-surface-200-800">
<Session_view
{lq__event_presenter_obj}
{lq__event_session_obj}
lq__auth__event_presenter_obj={lq__auth__event_presenter_obj}
{lq__event_presentation_obj_li}
/>
</div>
<div class="m-1 flex flex-col flex-wrap gap-1 items-center">
{#if $ae_loc.trusted_access || ($events_loc.auth__person?.id && $events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id])}
{#if $events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id] === true}
<h3 class="h3">
Welcome {$lq__event_session_obj?.poc_person_full_name ??
'Session POC'}
</h3>
{:else if $events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id] == 'read'}
<h3 class="h3">
Welcome {$lq__auth__event_presenter_obj?.full_name ??
'Presenter'}
</h3>
{/if}
<!-- Presentation List Section -->
<div class="w-full">
<!--
CRITICAL FIX: Use the pre-loaded data (data.initial_session_obj) as a fallback
until the liveQuery store ($lq...) emits its first value.
This guarantees immediate rendering on first load.
-->
<Comp_event_presentation_obj_li
lq__event_presentation_obj_li={$lq__event_presentation_obj_li ?? data.initial_session_obj?.event_presentation_li ?? []}
{log_lvl}
/>
</div>
{#if $ae_loc.trusted_access || $events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id] === true || ($events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id] == 'read' && $lq__auth__event_presenter_obj?.agree)}
<!-- Message if they have agreed -->
<Element_data_store
ds_code="events__pres_mgmt__session_page_authorized_info"
ds_name="Default: Events - Pres Mgmt Session Authorized Info"
ds_type="html"
for_type="event"
for_id={$lq__event_session_obj?.event_id}
class_li="w-fit max-w-(--breakpoint-lg) flex flex-col sm:flex-row gap-1"
show_edit={false}
show_edit_btn={true}
mount_reload_sec={1}
/>
{:else if $events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id] == 'read' && !$lq__event_presenter_obj?.agree}
<!-- Message if they have not yet agreed -->
<Element_data_store
ds_code="events__pres_mgmt__presenter_agree_read_consent"
ds_name="Default: Events - Pres Mgmt Session Restricted Access"
ds_type="html"
for_type="event"
for_id={$lq__event_session_obj?.event_id}
class_li="w-fit max-w-(--breakpoint-lg) text-lg text-red-500 font-bold text-center p-1 m-1 border border-red-200 rounded-md bg-red-100 space-y-2"
show_edit={false}
show_edit_btn={true}
/>
{/if}
{/if}
{#if (!$events_loc.auth__person?.id && !$ae_loc.trusted_access) || ($ae_loc.trusted_access && $ae_loc.edit_mode)}
<Element_data_store
ds_code="events__pres_mgmt__session_page_restricted_access"
ds_name="Default: Events - Pres Mgmt Session Restricted Access"
ds_type="html"
for_type="event"
for_id={$lq__event_presenter_obj?.event_id}
class_li="w-fit max-w-(--breakpoint-lg) text-xl text-red-500 font-bold text-center p-1 m-1 border border-red-200 rounded-md bg-red-100"
show_edit={false}
show_edit_btn={true}
/>
{/if}
</div>
{#if !$events_loc.pres_mgmt.show_content__session_view || $events_loc.pres_mgmt.show_content__session_view == 'default'}
<Session_view
{lq__event_presenter_obj}
{lq__event_session_obj}
lq__auth__event_presenter_obj={lq__auth__event_presenter_obj}
{lq__event_presentation_obj_li}
/>
{:else if $events_loc.pres_mgmt.show_content__session_view == 'manage_files' && $ae_loc.public_access}
<div>
<h3 class="h5 text-center">
<span class="fas fa-tasks m-1 text-neutral-800/80"></span>
<span class="fas fa-mail-bulk m-1 text-neutral-800/80"
></span>
Manage and Upload Session Files:
<span
class="badge preset-tonal-success"
class:hidden={!$lq__event_session_obj?.file_count}
>
<span class="fas fa-file-alt m-1"></span>
{$lq__event_session_obj?.file_count}×
</span>
</h3>
<Comp_event_files_upload
class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
link_to_type="event_session"
link_to_id={$lq__event_session_obj.event_session_id}
>
{#snippet label()}
<span>
<div class="text-lg">
<span class="fas fa-upload"></span>
<strong class=""
>Upload session (breakout) specific files
only!</strong
>
</div>
<div
class="text-sm text-gray-600 dark:text-gray-400 italic"
>
<strong>Session (breakout) files only</strong
><br />
Recommended: PowerPoint (pptx) or Keynote (key)<br
/>
Media: Audio and videos files should be directly embedded
in PowerPoint (PPTX) files<br />
Supplemental files: mp4, PDF, Word Doc, Excel, txt,
etc
</div>
</span>
{/snippet}
</Comp_event_files_upload>
<div class="overflow-x-auto w-max max-w-full">
<Element_manage_event_file_li_wrap
link_to_type={'event_session'}
link_to_id={$lq__event_session_obj?.event_session_id}
allow_basic={$events_loc.auth__kv.session[
$lq__event_session_obj.event_session_id
] ||
$events_loc.auth__kv.session[
$lq__event_session_obj?.event_session_id
]}
allow_moderator={$events_loc.auth__kv.session[
$lq__event_session_obj.event_session_id
]}
container_class_li={''}
/>
</div>
</div>
{/if}
{:else}
<div class="bg-red-100 p-4 border border-red-200 rounded-md">
<h2 class="h3">
<span class="fas fa-exclamation-triangle text-red-500 m-1"
></span>
Session Disabled
</h2>
<p>
This session is currently disabled. Please contact the event
organizer for more information.
</p>
<!-- Background Connection Status (Non-blocking) -->
{#if !$lq__event_session_obj}
<div class="flex items-center justify-center gap-2 text-surface-400 italic py-4">
<span class="fas fa-spinner fa-spin"></span>
<span>Synchronizing with session data...</span>
</div>
{/if}
</section>
<!-- Main modal -->
<!-- Modals -->
<Modal
title="{$lq__event_presenter_obj?.full_name} Presenter Consent and Release and Terms and Conditions"
title="{$lq__event_presenter_obj?.full_name} Presenter Consent"
bind:open={$events_sess.pres_mgmt.show_modal__presenter_agree}
autoclose={false}
placement="top-center"
class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
>
<Comp_event_presenter_form_agree {lq__event_presenter_obj} />
{#snippet footer()}
<div class="text-center w-full">
<button
type="button"
onclick={() => {
$events_sess.pres_mgmt.show_modal__presenter_agree = false;
}}
class="btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
>
<span class="fas fa-times m-1"></span>
Close
</button>
</div>
<button onclick={() => $events_sess.pres_mgmt.show_modal__presenter_agree = false} class="btn preset-tonal-warning">Close</button>
{/snippet}
</Modal>

46
src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/+page.ts
View File

@@ -6,15 +6,12 @@ import { browser } from '$app/environment';
import { events_func } from '$lib/ae_events_functions';
export async function load({ params, parent }) {
// route
const log_lvl: number = 0;
const data = await parent();
// console.log(`ae events_pres_mgmt session [session_id] +page.ts data:`, data);
const account_id = data.account_id;
const ae_acct = data[account_id];
// console.log(`ae_acct = `, ae_acct);
data.ae_events_pres_mgmt_event_session_id_page_ts = true;
@@ -29,51 +26,34 @@ export async function load({ params, parent }) {
}
ae_acct.slct.event_session_id = event_session_id;
// Initialize container for the pre-loaded object
let initial_session_obj = null;
if (browser) {
if (log_lvl)
console.log(
`ae_events [session_id] +page.ts (Non-Blocking Refresh)`
`ae_events [session_id] +page.ts (Blocking Refresh)`
);
// OPTIMIZATION: Fire these in the background without 'await'.
// The Session View components use LiveQuery/Dexie and will update
// automatically once these background tasks complete.
// 1. Refresh the core session object
events_func.load_ae_obj_id__event_session({
// STABILITY FIX: Await the load AND capture the result.
// We pass this direct object to the page to ensure immediate rendering
// without waiting for IDB/LiveQuery round-trip.
initial_session_obj = await events_func.load_ae_obj_id__event_session({
api_cfg: ae_acct.api,
event_session_id: event_session_id,
try_cache: true
});
// 2. Refresh presentations and their nested presenters
events_func.load_ae_obj_li__event_presentation({
api_cfg: ae_acct.api,
for_obj_type: 'event_session',
for_obj_id: event_session_id,
inc_file_li: true,
inc_presentation_li: true,
inc_presenter_li: true,
enabled: 'all',
hidden: 'all',
limit: 150,
try_cache: true,
log_lvl: 0
});
// 3. Refresh files for the session
events_func.load_ae_obj_li__event_file({
api_cfg: ae_acct.api,
for_obj_type: 'event_session',
for_obj_id: event_session_id,
enabled: 'all',
hidden: 'all',
limit: 150,
try_cache: true
log_lvl: log_lvl
});
}
// WARNING: Precaution against shared data between sites and presentations.
data[account_id] = ae_acct;
// Pass the pre-loaded data to the page component
data.initial_session_obj = initial_session_obj;
return data;
}

1152
src/routes/events/[event_id]/(pres_mgmt)/session/[session_id]/session_view.svelte
View File

File diff suppressed because it is too large Load Diff

12
src/routes/events/[event_id]/+layout.ts
View File

@@ -1,5 +1,5 @@
/** @type {import('./$types').LayoutLoad} */
console.log(`Events - [event_id] +layout.ts start`);
console.log(`Events - [event_id] +layout.ts`);
import { error } from '@sveltejs/kit';
import { browser } from '$app/environment';
@@ -49,11 +49,11 @@ export async function load({ params, parent }) {
events_func.load_ae_obj_id__event({
api_cfg: ae_acct.api,
event_id: event_id,
inc_file_li: false, // Changing from true 2026-02-04
inc_location_li: false, // Changing from true 2026-02-04
inc_session_li: true,
inc_template_li: true,
log_lvl: 1 // Keep background quiet unless debugging
// inc_file_li: false, // Changing from true 2026-02-04
// inc_location_li: false, // Changing from true 2026-02-04
// inc_session_li: false,
// inc_template_li: false,
log_lvl: log_lvl // Keep background quiet unless debugging
});
}

700
src/routes/events/[event_id]/+page.svelte
View File

@@ -1,648 +1,112 @@
<script lang="ts">
interface Props {
/** @type {import('./$types').PageData} */
data: any;
log_lvl?: number;
}
let { data, log_lvl = $bindable(0) }: Props = $props();
// *** Import Svelte specific
import { untrack } from 'svelte';
import { browser } from '$app/environment';
import type { key_val } from '$lib/stores/ae_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
import Comp_event_session_obj_li_wrapper from '../ae_comp__event_session_obj_li_wrapper.svelte';
import { liveQuery } from 'dexie';
import { db_events } from '$lib/ae_events/db_events';
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger
} from '$lib/stores/ae_stores';
import {
events_loc,
events_sess,
events_slct,
events_trigger
} from '$lib/stores/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { events_slct } from '$lib/stores/ae_events_stores';
import { ae_loc } from '$lib/stores/ae_stores';
import Comp_event_files_upload from '../ae_comp__event_files_upload.svelte';
import Element_manage_event_file_li_wrap from '$lib/elements/element_manage_event_file_li_direct.svelte';
import Event_page_menu from './event_page_menu.svelte';
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
// NOTE: Derived from data.account_id (prop) instead of $slct.account_id (store)
// to prevent circular dependency loops during hydration.
let ae_acct = $derived(data[data.account_id]);
let event_id = $derived(data.params.event_id);
$effect(() => {
if (ae_acct) {
untrack(() => {
$events_slct.event_id = ae_acct.slct.event_id;
});
}
});
// *** Initialization & Store Guard ***
if ($events_loc.pres_mgmt) {
if (typeof $events_loc.pres_mgmt.search_version === 'undefined')
$events_loc.pres_mgmt.search_version = 0;
if (typeof $events_loc.pres_mgmt.qry__remote_first === 'undefined')
$events_loc.pres_mgmt.qry__remote_first = false;
if (
typeof $events_loc.pres_mgmt.fulltext_search_qry_str === 'undefined'
)
$events_loc.pres_mgmt.fulltext_search_qry_str = '';
if (typeof $events_loc.pres_mgmt.location_name_qry_str === 'undefined')
$events_loc.pres_mgmt.location_name_qry_str = '';
interface Props {
data: any;
}
let { data }: Props = $props();
let lq__event_obj = $derived(
liveQuery(async () => {
if (log_lvl)
console.log(
`*** LiveQuery: lq__event_obj *** event_id=${$events_slct.event_id}`
);
return await db_events.event.get($events_slct?.event_id ?? '');
})
);
// JSON formatted configuration options for an event, and specifically for the presentation management module.
$effect(() => {
const remote_cfg = $lq__event_obj?.mod_pres_mgmt_json;
const local_cfg = $events_loc.pres_mgmt;
if (remote_cfg && local_cfg) {
untrack(() => {
events_func.sync_config__event_pres_mgmt({
pres_mgmt_cfg_remote: remote_cfg,
pres_mgmt_cfg_local: local_cfg,
log_lvl: log_lvl
});
});
const modules = [
{
name: 'Presentation Management',
path: 'pres_mgmt',
icon: 'fas fa-chalkboard-teacher',
description: 'Manage sessions, presentations, and presenters.',
color: 'preset-filled-primary-200-800',
access: 'authenticated_access'
},
{
name: 'Launcher',
path: 'launcher',
icon: 'fas fa-plane',
description: 'Launch presentations and manage live session display.',
color: 'preset-filled-secondary-200-800',
access: 'authenticated_access'
},
{
name: 'Badges',
path: 'badges',
icon: 'fas fa-id-badge',
description: 'Manage and print event badges.',
color: 'preset-filled-tertiary-200-800',
access: 'authenticated_access'
},
{
name: 'Leads',
path: 'leads',
icon: 'fas fa-address-card',
description: 'Exhibitor lead retrieval and management.',
color: 'preset-filled-success-200-800',
access: 'authenticated_access'
}
});
];
let event_session_id_li: Array<string> = $state([]);
let search_debounce_timer: any = null;
let last_search_id = 0;
let last_executed_key = ''; // Search Guard Key
// Stable LiveQuery Pattern (Aether UI V3)
let lq__event_session_obj_li = $derived.by(() => {
const ids = event_session_id_li;
const event_id = $events_slct?.event_id;
return liveQuery(async () => {
// SCENARIO 1: Specific IDs provided (Search Results)
if (Array.isArray(ids) && ids.length > 0) {
if (log_lvl)
console.log(`Session Page LQ: bulkGet ${ids.length} IDs`);
const results = await db_events.session.bulkGet(ids);
return results.filter((item) => item !== undefined);
}
// SCENARIO 2: Fallback broad search (Only if no active filters)
if (
event_id &&
!$events_loc.pres_mgmt.fulltext_search_qry_str &&
!$events_loc.pres_mgmt.location_name_qry_str
) {
if (log_lvl)
console.log(
`Session Page LQ: Fallback search for event: ${event_id}`
);
return await db_events.session
.where('event_id')
.equals(event_id)
.limit(50)
.sortBy('name');
}
return [];
});
});
let lq__event_location_obj_li = $derived(
liveQuery(async () => {
let results = await db_events.location
.where('event_id')
.equals($events_slct.event_id)
.sortBy('name');
return results;
let filtered_modules = $derived(
modules.filter(mod => {
if (mod.access === 'authenticated_access') return $ae_loc.authenticated_access;
if (mod.access === 'trusted_access') return $ae_loc.trusted_access;
if (mod.access === 'administrator_access') return $ae_loc.administrator_access;
return true;
})
);
// Standardized Reactive Search Pattern (Aether UI V3)
let search_params = $derived({
v: $events_loc.pres_mgmt.search_version,
str: ($events_loc.pres_mgmt.fulltext_search_qry_str ?? '')
.toLowerCase()
.trim(),
location: $events_loc.pres_mgmt.location_name_qry_str,
event_id: $events_slct?.event_id,
remote_first: $events_loc.pres_mgmt.qry__remote_first
});
$effect(() => {
const params = search_params;
if (search_debounce_timer) clearTimeout(search_debounce_timer);
search_debounce_timer = setTimeout(() => {
handle_search_refresh(params);
}, 300);
return () => {
if (search_debounce_timer) clearTimeout(search_debounce_timer);
};
});
async function handle_search_refresh(params: any) {
// 1. Guard
const qry_key = JSON.stringify(params);
if (qry_key === last_executed_key) return;
last_executed_key = qry_key;
const current_search_id = ++last_search_id;
const event_id = params.event_id;
const remote_first = params.remote_first;
if (log_lvl)
console.log(
`[Session Search #${current_search_id}] Refreshing (remote=${remote_first}, event=${event_id}, str=${params.str})...`
);
untrack(() => {
$events_sess.pres_mgmt.status_qry__search = 'loading';
});
const qry_str = params.str;
const location_name = params.location;
// 2. FAST PATH: Local IDB Search
if (!remote_first) {
try {
if (event_id) {
let local_results = await db_events.session
.where('event_id')
.equals(event_id)
.filter((session) => {
if (
location_name &&
session.event_location_name !== location_name
)
return false;
if (qry_str) {
const name = (session.name ?? '').toLowerCase();
const code = (session.code ?? '').toLowerCase();
const description = (
session.description ?? ''
).toLowerCase();
const qry_string = (
session.default_qry_str ?? ''
).toLowerCase();
const match =
name.includes(qry_str) ||
code.includes(qry_str) ||
description.includes(qry_str) ||
qry_string.includes(qry_str);
if (!match) return false;
}
return true;
})
.toArray();
local_results.sort((a, b) =>
(a.name ?? '').localeCompare(b.name ?? '')
);
const local_ids = local_results
.map((s) => s.id || s.event_session_id)
.filter(Boolean);
if (current_search_id === last_search_id) {
if (log_lvl)
console.log(
`[Session Search #${current_search_id}] Fast Path found ${local_ids.length} items locally.`
);
untrack(() => {
event_session_id_li = local_ids;
if (local_ids.length > 0)
$events_sess.pres_mgmt.status_qry__search =
'done';
});
}
}
} catch (e) {
if (log_lvl) console.warn('Session Fast Path failed.', e);
}
} else {
untrack(() => {
event_session_id_li = [];
});
}
// 3. REVALIDATE: API Request
try {
const results = await events_func.search__event_session({
api_cfg: $ae_api,
event_id: event_id,
fulltext_search_qry_str: qry_str || null,
like_search_qry_str: qry_str || null,
location_name: location_name || null,
enabled: $events_loc.pres_mgmt.qry_enabled ?? 'enabled',
hidden: $events_loc.pres_mgmt.qry_hidden ?? 'not_hidden',
limit: $events_loc.pres_mgmt.qry_limit__sessions ?? 100,
try_cache: true,
log_lvl: 0
});
if (current_search_id === last_search_id) {
let api_results = results || [];
// Client-side Filter Guard: Ensure API results match local criteria (Backup filter)
api_results = api_results.filter((session) => {
if (
location_name &&
session.event_location_name !== location_name
)
return false;
if (qry_str) {
const name = (session.name ?? '').toLowerCase();
const code = (session.code ?? '').toLowerCase();
const description = (
session.description ?? ''
).toLowerCase();
const qry_string = (
session.default_qry_str ?? ''
).toLowerCase();
const match =
name.includes(qry_str) ||
code.includes(qry_str) ||
description.includes(qry_str) ||
qry_string.includes(qry_str);
if (!match) return false;
}
return true;
});
const api_ids = api_results
.map((s: any) => s.id || s.event_session_id)
.filter(Boolean);
untrack(() => {
$events_slct.event_session_obj_li = api_results;
event_session_id_li = api_ids;
$events_sess.pres_mgmt.status_qry__search = 'done';
});
if (log_lvl)
console.log(
`[Session Search #${current_search_id}] Revalidation Complete. Found ${api_ids.length} items.`
);
}
} catch (error) {
if (current_search_id === last_search_id) {
console.error('Session revalidation failed:', error);
untrack(() => {
$events_sess.pres_mgmt.status_qry__search = 'error';
});
}
}
}
if (
$events_loc.pres_mgmt?.save_search_text &&
$events_loc.pres_mgmt?.saved_search__session
) {
$events_loc.pres_mgmt.fulltext_search_qry_str =
$events_loc.pres_mgmt.saved_search__session;
}
if (
$events_loc.pres_mgmt?.save_search_text &&
$events_loc.pres_mgmt?.saved_search__session_location_name
) {
$events_loc.pres_mgmt.location_name_qry_str =
$events_loc.pres_mgmt.saved_search__session_location_name;
}
function handle_search_trigger() {
$events_loc.pres_mgmt.search_version++;
}
function prevent_default<T extends Event>(fn: (event: T) => void) {
return function (event: T) {
event.preventDefault();
fn(event);
};
}
</script>
<svelte:head>
<title>
&AElig;:
{ae_util.shorten_string({
string: $lq__event_obj?.name,
max_length: 12
})}
- Pres Mgmt - {$events_loc?.title}
&AElig;: {$lq__event_obj?.name ?? 'Event'} Hub
</title>
</svelte:head>
<Event_page_menu {lq__event_obj} />
{#if !$lq__event_obj}
<div class="flex items-center justify-center p-10 opacity-50">
<span class="fas fa-spinner fa-spin mx-1 text-2xl"></span>
<span>Loading event information...</span>
</div>
{:else if $lq__event_obj?.enable || $ae_loc.trusted_access}
<header class="ae_module_header">
<span class="flex flex-row flex-wrap gap-1 items-center justify-center">
<span class="fas fa-calendar-day m-1 text-neutral-800/80"></span>
<button
type="button"
onclick={() => {
if (
$events_loc.pres_mgmt.show_content__event_view ==
'manage_files'
) {
$events_loc.pres_mgmt.show_content__event_view = null;
} else {
$events_loc.pres_mgmt.show_content__event_view =
'manage_files';
}
}}
class="btn ae_btn_secondary"
class:preset-filled-secondary-500={$events_loc.pres_mgmt
.show_content__event_view == 'manage_files'}
class:preset-filled-tertiary-500={$events_loc.pres_mgmt
.show_content__event_view != 'manage_files'}
class:hidden={!$ae_loc.administrator_access}
title="View event search or manage files for the event"
>
{#if $events_loc.pres_mgmt.show_content__event_view == 'manage_files'}
<span class="fas fa-search m-1"></span>
Event Search?
{:else}
<span class="fas fa-file-archive m-1"></span>
Event Files?
<span
class="badge preset-tonal-success"
class:hidden={!$lq__event_obj?.file_count}
>
<span class="fas fa-file-alt m-1"></span>
{$lq__event_obj?.file_count}×
</span>
{/if}
</button>
</span>
<h2
class="text-2xl font-bold text-center max-w-xs sm:max-w-lg md:max-w-2xl"
>
<span class="sm:inline-block md:hidden">
{$lq__event_obj.cfg_json?.short_name ?? $lq__event_obj?.name}
</span>
<span class="hidden md:inline-block lg:hidden">
{$lq__event_obj.cfg_json?.med_name ?? $lq__event_obj?.name}
</span>
<span class="hidden lg:inline-block">
{$lq__event_obj.cfg_json?.long_name ?? $lq__event_obj?.name}
</span>
</h2>
<div class="container mx-auto p-4 space-y-8">
<header class="text-center space-y-2">
<h1 class="text-4xl font-bold">
{$lq__event_obj?.name ?? 'Event Hub'}
</h1>
<p class="text-xl opacity-70">
Welcome to the event management dashboard. Please select a module to begin.
</p>
</header>
{#if !$events_loc.pres_mgmt.show_content__event_view || $events_loc.pres_mgmt.show_content__event_view == 'default'}
<div class="ae_container_actions">
<form
onsubmit={prevent_default(() => handle_search_trigger())}
autocomplete="off"
class="form grow flex flex-row flex-wrap gap-1 justify-center items-center w-full"
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{#each filtered_modules as mod}
<a
href="/events/{$events_slct.event_id}/{mod.path}"
class="card card-hover p-6 flex flex-col items-center text-center space-y-4 transition-transform hover:scale-105 bg-surface-100 dark:bg-surface-800 border border-surface-200 dark:border-surface-700 shadow-lg"
>
<button
type="button"
class="btn btn-sm mx-1 ae_btn_warning"
class:hidden={!$ae_loc.authenticated_access}
onclick={() => {
$events_loc.pres_mgmt.location_name_qry_str = '';
$events_loc.pres_mgmt.show_content__session_search_room_name =
!$events_loc.pres_mgmt
.show_content__session_search_room_name;
handle_search_trigger();
}}
title="Search by location name"
>
<span class="fas fa-search-location"></span>
</button>
<select
name="location_name_list"
id="session_location_name_list"
bind:value={$events_loc.pres_mgmt.location_name_qry_str}
class="input text-xs font-bold font-mono min-w-fit w-min max-w-40 transition-all mx-1"
class:hidden={!$ae_loc.authenticated_access ||
!$events_loc.pres_mgmt
.show_content__session_search_room_name}
onchange={() => handle_search_trigger()}
title="Select to filter based on the location/room name"
>
{#if $lq__event_location_obj_li}
<option value="">Location / Room</option>
{#each $lq__event_location_obj_li as event_location_obj}
<option value={event_location_obj?.name}
>{event_location_obj.name}</option
>
{/each}
{/if}
</select>
<button
type="button"
onclick={() => {
$events_loc.pres_mgmt.fulltext_search_qry_str = '';
handle_search_trigger();
}}
class:hidden={!$events_loc.pres_mgmt
.fulltext_search_qry_str}
class="btn btn-sm mx-1 ae_btn_warning"
title="Clear search text"
>
<span class="fas fa-remove-format"></span>
</button>
<input
type="search"
placeholder="Search for a session"
id="session_fulltext_search_qry_str"
bind:value={$events_loc.pres_mgmt.fulltext_search_qry_str}
class="input text-1xl hover:text-2xl font-bold font-mono w-80 transition-all mx-1 ae_btn_info"
onkeyup={(e) => {
if (e.key === 'Enter') handle_search_trigger();
}}
autofocus
data-ignore="true"
/>
<button
type="submit"
class="btn btn-lg text-2xl font-bold w-48 mx-1 ae_btn_primary"
title="Search for a session"
>
{#if $events_sess.pres_mgmt.status_qry__search == 'loading'}
<span
class="fas fa-spinner fa-spin mx-1 text-success-800-200"
></span>
{:else}
<span class="fas fa-search mx-1 text-neutral-800/80"
></span>
{/if}
Search
</button>
{#if $ae_loc.edit_mode}
<label
class="flex items-center gap-1 cursor-pointer bg-surface-200-800 px-2 py-1 rounded-token text-xs font-semibold opacity-70 hover:opacity-100 transition-all"
>
<span> Remote First </span>
<input
type="checkbox"
bind:checked={
$events_loc.pres_mgmt.qry__remote_first
}
onchange={() => handle_search_trigger()}
class="checkbox checkbox-sm"
/>
</label>
{/if}
</form>
</div>
{#if event_session_id_li.length}
<Comp_event_session_obj_li_wrapper
{lq__event_session_obj_li}
hide__session_location={$events_loc.pres_mgmt
?.hide__session_li_location_field}
hide__session_poc={$events_loc.pres_mgmt
?.hide__session_li_poc_field}
hide__launcher_link_legacy={$events_loc.pres_mgmt
?.hide__launcher_link_legacy}
hide__launcher_link={$events_loc.pres_mgmt?.hide__launcher_link}
hide__location_link={$events_loc.pres_mgmt?.hide__location_link}
log_lvl={1}
/>
{:else if $events_sess.pres_mgmt.status_qry__search === 'loading'}
<div
class="flex flex-col items-center justify-center p-20 opacity-50 text-center"
>
<span class="fas fa-spinner fa-spin text-4xl mb-4"></span>
<p class="text-xl">Searching sessions...</p>
</div>
{:else}
<section
class="text-center text-2xl bg-yellow-100 p-4 rounded-md lg:max-w-lg space-y-2 mx-auto"
>
<div>
<span
class="fas fa-exclamation-triangle text-2xl text-yellow-500"
></span>
<strong>No results to show</strong>
<span
class="fas fa-exclamation-triangle text-2xl text-yellow-500"
></span>
<br />
<div class="text-lg">
Please use the search above to find your session.
</div>
<div class="p-6 rounded-full {mod.color} text-white text-4xl">
<span class={mod.icon}></span>
</div>
<div>
<strong>Search by:</strong>
<ul class="list-disc list-inside text-lg text-left">
<li>Session name</li>
<li>Session description</li>
<li>Presentation name</li>
<li>Presenter names</li>
<li>Presenter ID (member ID)</li>
</ul>
</div>
</section>
{/if}
{:else if $events_loc.pres_mgmt.show_content__event_view == 'manage_files' && $ae_loc.trusted_access}
{#if $lq__event_obj}
<header>
<h2 class="h3 text-center">{$lq__event_obj?.name}</h2>
<h3 class="h4 text-center">Event - Manage Files</h3>
</header>
{/if}
<div>
<h3 class="h5 text-center">
<span class="fas fa-tasks m-1 text-neutral-800/80"></span>
<span class="fas fa-mail-bulk m-1 text-neutral-800/80"></span>
Manage and Upload Event Files:
</h3>
<Comp_event_files_upload
class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
link_to_type="event"
link_to_id={$lq__event_obj?.event_id}
>
{#snippet label()}
<span>
<div class="text-lg">
<span class="fas fa-upload"></span>
<strong class=""
>Upload global event files only!</strong
>
</div>
<div
class="text-sm text-gray-600 dark:text-gray-400 italic"
>
<strong>Global event files only</strong><br />
Recommended: PowerPoint (pptx) or Keynote (key)<br
/>
Media: Audio and videos files should be directly embedded
in PowerPoint (PPTX) files<br />
Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
</div>
</span>
{/snippet}
</Comp_event_files_upload>
<div class="overflow-x-auto w-max max-w-full">
<Element_manage_event_file_li_wrap
link_to_type={'event'}
link_to_id={$lq__event_obj?.event_id}
allow_basic={$events_loc.auth__kv.session[
$lq__event_obj?.event_id
]}
allow_moderator={$events_loc.auth__kv.session[
$lq__event_obj?.event_id
]}
container_class_li={''}
/>
</div>
</div>
{/if}
{:else}
<div class="bg-red-100 p-4 border border-red-200 rounded-md">
<h2 class="h3">
<span class="fas fa-exclamation-triangle text-red-500 m-1"></span>
Event Disabled
</h2>
<p>
This event is currently disabled. Please contact the event organizer
for more information.
</p>
<h3 class="text-2xl font-bold">{mod.name}</h3>
<p class="opacity-80">{mod.description}</p>
</a>
{/each}
</div>
{/if}
<style lang="postcss">
{#if $ae_loc.administrator_access}
<section class="card p-6 variant-soft-warning border-l-4 border-warning-500 mt-12 bg-surface-100 dark:bg-surface-800 shadow-lg">
<div class="flex items-center gap-4">
<span class="fas fa-tools text-3xl"></span>
<div>
<h3 class="text-xl font-bold">Administrative Access</h3>
<p>You have elevated privileges. Use the menu above to access advanced settings and reports.</p>
</div>
<a href="/events/{$events_slct.event_id}/settings" class="btn ae_btn_warning ml-auto">
Event Settings
</a>
</div>
</section>
{/if}
</div>
<style>
</style>

5
src/routes/events/[event_id]/+page.ts
View File

@@ -1,5 +0,0 @@
/** @type {import('./$types').PageLoad} */
console.log(`Events - [event_id] +page.ts start`);
// export async function load({ params, parent }) {
// }

754
src/routes/events/ae_comp__event_presentation_obj_li.svelte
View File

@@ -106,14 +106,14 @@
<span class="text-sm">
Presentations:
{#if $lq__event_presentation_obj_li?.length}
{#if lq__event_presentation_obj_li?.length}
<span
class="text-3xl font-bold preset-filled-success-100-900 px-4 rounded-lg"
title="Count {$lq__event_presentation_obj_li.length ??
title="Count {lq__event_presentation_obj_li.length ??
'None'}"
>
<span class="fas fa-list-ol mx-4"></span>
{$lq__event_presentation_obj_li.length ?? 'None'}&times;
{lq__event_presentation_obj_li.length ?? 'None'}&times;
</span>
{/if}
@@ -127,404 +127,396 @@
</h3>
<!-- Show presentations for this LiveQuery -->
{#if $lq__event_presentation_obj_li?.length}
<ul class="space-y-4 p-4 m-2 rounded-md preset-filled-surface-400-600">
{#each $lq__event_presentation_obj_li as event_presentation_obj}
<li class="space-y-2 border border-gray-200 p-2 rounded-md">
<div class="float-right space-2 flex flex-row items-center">
{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
<button
type="button"
onclick={() => {
console.log('Add Presenter');
if (
!confirm(
'Add a new presenter to the presentation? You will be able to edit their details after the presenter record is created.'
)
) {
return;
}
<ul class="space-y-4 p-4 m-2 rounded-md preset-filled-surface-400-600">
{#each lq__event_presentation_obj_li ?? [] as event_presentation_obj}
<li class="space-y-2 border border-gray-200 p-2 rounded-md">
<div class="float-right space-2 flex flex-row items-center">
{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
<button
type="button"
onclick={() => {
console.log('Add Presenter');
if (
!confirm(
'Add a new presenter to the presentation? You will be able to edit their details after the presenter record is created.'
)
) {
return;
}
let presenter_data = {
event_presentation_id:
event_presentation_obj?.event_presentation_id,
given_name: 'New',
family_name: 'Presenter',
email: 'test+newpres@oneskyit.com',
code: 'new_presenter',
enable: true
};
let presenter_data = {
event_presentation_id:
event_presentation_obj?.event_presentation_id,
given_name: 'New',
family_name: 'Presenter',
email: 'test+newpres@oneskyit.com',
code: 'new_presenter',
enable: true
};
events_func.create_ae_obj__event_presenter({
api_cfg: $ae_api,
event_id: $events_slct.event_id,
event_session_id:
$events_slct.event_session_id,
event_presentation_id:
event_presentation_obj.event_presentation_id,
data_kv: presenter_data,
log_lvl: 1
});
}}
class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500"
>
<span class="fas fa-plus mx-1"></span>
Add Presenter
</button>
{/if}
</div>
<h4 class="h5 rounded-md p-2 preset-filled-surface-300-700">
<span
class:hidden={!event_presentation_obj.start_datetime ||
$events_loc.pres_mgmt
.hide__presentation_datetime}
class="text-base border-r-2 border-gray-800/50 px-1"
>
{ae_util.iso_datetime_formatter(
event_presentation_obj.start_datetime,
'dddd'
)}
@
<!-- , -->
<!-- {ae_util.iso_datetime_formatter(event_presentation_obj.start_datetime, $events_loc.pres_mgmt.datetime_format)} -->
{ae_util.iso_datetime_formatter(
event_presentation_obj.start_datetime,
$events_loc.pres_mgmt.time_format
)}
</span>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presentation'}
object_id={event_presentation_obj?.event_presentation_id}
field_name={'name'}
field_type={'text'}
field_value={event_presentation_obj?.name}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access ||
!$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
display_block_edit={true}
class_li={''}
on:ae_crud_updated={(e) => {
console.log(`ae_crud_updated:`, e.detail);
events_func
.load_ae_obj_id__event_presentation({
api_cfg: $ae_api,
event_presentation_id:
event_presentation_obj.event_presentation_id,
log_lvl: 1
})
.then(function (load_results) {})
.then(function (load_results) {
// $events_trigger = 'load__event_presentation_obj_id';
// $events_trig_kv['event_presentation_id'] = event_presentation_obj.event_presentation_id;
});
events_func.create_ae_obj__event_presenter({
api_cfg: $ae_api,
event_id: $events_slct.event_id,
event_session_id:
$events_slct.event_session_id,
event_presentation_id:
event_presentation_obj.event_presentation_id,
data_kv: presenter_data,
log_lvl: 1
});
}}
class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500"
>
<!-- <strong class="text-sm">Name/Title:</strong> -->
<span class="italic">
{event_presentation_obj?.name}
</span>
</Element_ae_crud>
<!-- "{event_presentation_obj.name}" -->
<span class="fas fa-plus mx-1"></span>
Add Presenter
</button>
{/if}
</div>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presentation'}
object_id={event_presentation_obj?.event_presentation_id}
field_name={'code'}
field_type={'text'}
field_value={event_presentation_obj?.code}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access ||
!$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
display_block_edit={true}
class_li={''}
on:ae_crud_updated={(e) => {
console.log(`ae_crud_updated:`, e.detail);
events_func
.load_ae_obj_id__event_presentation({
api_cfg: $ae_api,
event_presentation_id:
event_presentation_obj.event_presentation_id,
log_lvl: 1
})
.then(function (load_results) {})
.then(function (load_results) {
// $events_trigger = 'load__event_presentation_obj_id';
// $events_trig_kv['event_presentation_id'] = event_presentation_obj.event_presentation_id;
});
}}
>
{#if (event_presentation_obj?.code || event_presentation_obj?.abstract_code) && !$events_loc.pres_mgmt.hide__presentation_code}
<span
class="text-sm text-gray-500 bg-yellow-100 p-1 rounded-md border border-yellow-200"
title="Presentation code {event_presentation_obj?.code} and abstract code {event_presentation_obj?.abstract_code}"
>
<span class="fas fa-barcode"></span>
{event_presentation_obj?.code ?? ''}
{event_presentation_obj?.abstract_code ??
''}
</span>
{:else if $ae_loc.trusted_access && $ae_loc.edit_mode}
<span
class="text-sm text-semibold text-success-800-400"
>
<span class="fas fa-barcode"></span>
Code:
<span
class=""
title="No code provided for this presentation"
>
{@html event_presentation_obj?.code ??
ae_snip.html__not_set}
</span>
</span>
{/if}
</Element_ae_crud>
<!-- Can not edit the abstract code here at this time. -->
</h4>
<div
class:hidden={!(
$ae_loc.trusted_access && $ae_loc.edit_mode
<h4 class="h5 rounded-md p-2 preset-filled-surface-300-700">
<span
class:hidden={!event_presentation_obj.start_datetime ||
$events_loc.pres_mgmt
.hide__presentation_datetime}
class="text-base border-r-2 border-gray-800/50 px-1"
>
{ae_util.iso_datetime_formatter(
event_presentation_obj.start_datetime,
'dddd'
)}
>
<span
class="text-sm text-semibold text-success-800-400"
>
Date &
<button
type="button"
onclick={() => {
if (
$events_loc.pres_mgmt.time_hours == 12
) {
$events_loc.pres_mgmt.time_hours = 24;
$events_loc.pres_mgmt.datetime_format =
'datetime_long';
$events_loc.pres_mgmt.time_format =
'time_short';
} else {
$events_loc.pres_mgmt.time_hours = 12;
$events_loc.pres_mgmt.datetime_format =
'datetime_12_long';
$events_loc.pres_mgmt.time_format =
'time_12_short';
}
}}
>
time
</button>
:</span
>
<span class="fas fa-calendar-alt text-success-800-400"
></span>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presentation'}
object_id={event_presentation_obj?.event_presentation_id}
field_name={'start_datetime'}
field_type={'datetime'}
field_value={event_presentation_obj.start_datetime}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access ||
!$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
on:ae_crud_updated={(e) => {
console.log(`ae_crud_updated:`, e.detail);
@
<!-- , -->
<!-- {ae_util.iso_datetime_formatter(event_presentation_obj.start_datetime, $events_loc.pres_mgmt.datetime_format)} -->
{ae_util.iso_datetime_formatter(
event_presentation_obj.start_datetime,
$events_loc.pres_mgmt.time_format
)}
</span>
events_func.load_ae_obj_id__event_presentation({
api_cfg: $ae_api,
event_presentation_id:
event_presentation_obj?.event_presentation_id
});
// $events_trigger = 'load__event_presentation_obj_id';
// $events_trig_kv['event_presentation_id'] = event_presentation_obj?.event_presentation_id;
}}
>
{ae_util.iso_datetime_formatter(
event_presentation_obj.start_datetime,
'dddd'
)}
<!-- , -->
<!-- {ae_util.iso_datetime_formatter(event_presentation_obj.start_datetime, $events_loc.pres_mgmt.datetime_format)} -->
{ae_util.iso_datetime_formatter(
event_presentation_obj.start_datetime,
$events_loc.pres_mgmt.time_format
)}
</Element_ae_crud>
-
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presentation'}
object_id={event_presentation_obj?.event_presentation_id}
field_name={'end_datetime'}
field_type={'datetime'}
field_value={event_presentation_obj.end_datetime}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access ||
!$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
on:ae_crud_updated={(e) => {
console.log(`ae_crud_updated:`, e.detail);
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presentation'}
object_id={event_presentation_obj?.event_presentation_id}
field_name={'name'}
field_type={'text'}
field_value={event_presentation_obj?.name}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access ||
!$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
display_block_edit={true}
class_li={''}
on:ae_crud_updated={(e) => {
console.log(`ae_crud_updated:`, e.detail);
events_func.load_ae_obj_id__event_presentation({
api_cfg: $ae_api,
event_presentation_id:
event_presentation_obj?.event_presentation_id
});
// $events_trigger = 'load__event_presentation_obj_id';
// $events_trig_kv['event_presentation_id'] = event_presentation_obj?.event_presentation_id;
}}
>
{ae_util.iso_datetime_formatter(
event_presentation_obj.end_datetime,
$events_loc.pres_mgmt.time_format
)}
</Element_ae_crud>
</div>
<div
class:hidden={!$events_loc.pres_mgmt
.show_content__presentation_description &&
!($ae_loc.trusted_access && $ae_loc.edit_mode)}
>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presentation'}
object_id={event_presentation_obj?.event_presentation_id}
field_name={'description'}
field_type={'textarea'}
field_value={event_presentation_obj?.description}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access ||
!$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
display_block_edit={true}
textarea_rows={15}
class_li={''}
on:ae_crud_updated={(e) => {
console.log(`ae_crud_updated:`, e.detail);
events_func.load_ae_obj_id__event_presentation({
events_func
.load_ae_obj_id__event_presentation({
api_cfg: $ae_api,
event_presentation_id:
event_presentation_obj.event_presentation_id,
log_lvl: 1
})
.then(function (load_results) {})
.then(function (load_results) {
// $events_trigger = 'load__event_presentation_obj_id';
// $events_trig_kv['event_presentation_id'] = event_presentation_obj.event_presentation_id;
});
}}
>
}}
>
<!-- <strong class="text-sm">Name/Title:</strong> -->
<span class="italic">
{event_presentation_obj?.name}
</span>
</Element_ae_crud>
<!-- "{event_presentation_obj.name}" -->
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presentation'}
object_id={event_presentation_obj?.event_presentation_id}
field_name={'code'}
field_type={'text'}
field_value={event_presentation_obj?.code}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access ||
!$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
display_block_edit={true}
class_li={''}
on:ae_crud_updated={(e) => {
console.log(`ae_crud_updated:`, e.detail);
events_func
.load_ae_obj_id__event_presentation({
api_cfg: $ae_api,
event_presentation_id:
event_presentation_obj.event_presentation_id,
log_lvl: 1
})
.then(function (load_results) {})
.then(function (load_results) {
// $events_trigger = 'load__event_presentation_obj_id';
// $events_trig_kv['event_presentation_id'] = event_presentation_obj.event_presentation_id;
});
}}
>
{#if (event_presentation_obj?.code || event_presentation_obj?.abstract_code) && !$events_loc.pres_mgmt.hide__presentation_code}
<span
class="text-sm text-gray-500 bg-yellow-100 p-1 rounded-md border border-yellow-200"
title="Presentation code {event_presentation_obj?.code} and abstract code {event_presentation_obj?.abstract_code}"
>
<span class="fas fa-barcode"></span>
{event_presentation_obj?.code ?? ''}
{event_presentation_obj?.abstract_code ??
''}
</span>
{:else if $ae_loc.trusted_access && $ae_loc.edit_mode}
<span
class="text-sm text-semibold text-success-800-400"
>
Description:
</span>
{#if event_presentation_obj?.description}
<button
type="button"
onclick={() => {
console.log('Show/Hide Description');
if (
$events_sess.pres_mgmt
.show_content__presentation_description ==
event_presentation_obj.event_presentation_id
) {
$events_sess.pres_mgmt.show_content__presentation_description =
null;
// Was testing with LiveQuery
$events_slct.event_presentation_id =
null;
} else {
$events_sess.pres_mgmt.show_content__presentation_description =
event_presentation_obj.event_presentation_id;
// Was testing with LiveQuery
$events_slct.event_presentation_id =
event_presentation_obj.event_presentation_id;
}
}}
class="btn btn-sm preset-tonal-surface hover:preset-filled-surface-500 text-xs"
<span class="fas fa-barcode"></span>
Code:
<span
class=""
title="No code provided for this presentation"
>
{#if $events_sess.pres_mgmt.show_content__presentation_description == event_presentation_obj.event_presentation_id}
<span class="fas fa-eye-slash mx-1"
></span>
<span>Hide Description</span>
{:else}
<span class="fas fa-eye mx-1"></span>
<span>Show</span>
{/if}
</button>
{@html event_presentation_obj?.code ??
ae_snip.html__not_set}
</span>
</span>
{/if}
</Element_ae_crud>
<!-- Can not edit the abstract code here at this time. -->
</h4>
<pre
class="whitespace-pre-wrap p-2 bg-gray-100 rounded-md"
class:hidden={$events_sess.pres_mgmt
.show_content__presentation_description !==
event_presentation_obj.event_presentation_id}>{event_presentation_obj.description}</pre>
{:else}
{@html ae_snip.html__not_set}
{/if}
<!-- {:else}
<div class="text-sm text-gray-500 bg-gray-100 p-1 rounded-md border border-gray-200"
class:hidden={!$ae_loc.administrator_access}
<div
class:hidden={!(
$ae_loc.trusted_access && $ae_loc.edit_mode
)}
>
<span class="fas fa-exclamation-triangle mx-1"></span>
No description provided.
</div>
{/if} -->
</Element_ae_crud>
</div>
<span
class="text-sm text-semibold text-success-800-400"
>
Date &
<button
type="button"
onclick={() => {
if (
$events_loc.pres_mgmt.time_hours == 12
) {
$events_loc.pres_mgmt.time_hours = 24;
$events_loc.pres_mgmt.datetime_format =
'datetime_long';
$events_loc.pres_mgmt.time_format =
'time_short';
} else {
$events_loc.pres_mgmt.time_hours = 12;
$events_loc.pres_mgmt.datetime_format =
'datetime_12_long';
$events_loc.pres_mgmt.time_format =
'time_12_short';
}
}}
>
time
</button>
:</span
>
<span class="fas fa-calendar-alt text-success-800-400"
></span>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presentation'}
object_id={event_presentation_obj?.event_presentation_id}
field_name={'start_datetime'}
field_type={'datetime'}
field_value={event_presentation_obj.start_datetime}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access ||
!$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
on:ae_crud_updated={(e) => {
console.log(`ae_crud_updated:`, e.detail);
<!-- Show presenters for this presentation -->
{#if event_presentation_obj?.event_presentation_id}
<Comp_event_presenter_obj_li
link_to_type={'event_presentation'}
link_to_id={event_presentation_obj.event_presentation_id}
event_presenter_id_li={[]}
log_lvl={2}
></Comp_event_presenter_obj_li>
{/if}
events_func.load_ae_obj_id__event_presentation({
api_cfg: $ae_api,
event_presentation_id:
event_presentation_obj?.event_presentation_id
});
// $events_trigger = 'load__event_presentation_obj_id';
// $events_trig_kv['event_presentation_id'] = event_presentation_obj?.event_presentation_id;
}}
>
{ae_util.iso_datetime_formatter(
event_presentation_obj.start_datetime,
'dddd'
)}
<!-- , -->
<!-- {ae_util.iso_datetime_formatter(event_presentation_obj.start_datetime, $events_loc.pres_mgmt.datetime_format)} -->
{ae_util.iso_datetime_formatter(
event_presentation_obj.start_datetime,
$events_loc.pres_mgmt.time_format
)}
</Element_ae_crud>
-
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presentation'}
object_id={event_presentation_obj?.event_presentation_id}
field_name={'end_datetime'}
field_type={'datetime'}
field_value={event_presentation_obj.end_datetime}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access ||
!$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
class_li={''}
on:ae_crud_updated={(e) => {
console.log(`ae_crud_updated:`, e.detail);
<!-- Show files for this presentation -->
<Element_manage_event_file_li_wrap
link_to_type={'event_presentation'}
link_to_id={event_presentation_obj?.event_presentation_id}
allow_basic={$events_loc.auth__kv.session[
$events_slct.event_session_id
] ||
$events_loc.auth__kv.presenter[
$events_slct.event_presenter_id
]}
allow_moderator={$events_loc.auth__kv.session[
$events_slct.event_session_id
events_func.load_ae_obj_id__event_presentation({
api_cfg: $ae_api,
event_presentation_id:
event_presentation_obj?.event_presentation_id
});
// $events_trigger = 'load__event_presentation_obj_id';
// $events_trig_kv['event_presentation_id'] = event_presentation_obj?.event_presentation_id;
}}
>
{ae_util.iso_datetime_formatter(
event_presentation_obj.end_datetime,
$events_loc.pres_mgmt.time_format
)}
</Element_ae_crud>
</div>
<div
class:hidden={!$events_loc.pres_mgmt
.show_content__presentation_description &&
!($ae_loc.trusted_access && $ae_loc.edit_mode)}
>
<Element_ae_crud
api_cfg={$ae_api}
object_type={'event_presentation'}
object_id={event_presentation_obj?.event_presentation_id}
field_name={'description'}
field_type={'textarea'}
field_value={event_presentation_obj?.description}
allow_null={false}
hide_edit_btn={!$ae_loc.trusted_access ||
!$ae_loc.edit_mode}
outline_element={false}
show_crud={false}
display_inline={true}
display_block_edit={true}
textarea_rows={15}
class_li={''}
on:ae_crud_updated={(e) => {
console.log(`ae_crud_updated:`, e.detail);
events_func.load_ae_obj_id__event_presentation({
api_cfg: $ae_api,
event_presentation_id:
event_presentation_obj.event_presentation_id,
log_lvl: 1
});
}}
>
<span
class="text-sm text-semibold text-success-800-400"
>
Description:
</span>
{#if event_presentation_obj?.description}
<button
type="button"
onclick={() => {
console.log('Show/Hide Description');
if (
$events_sess.pres_mgmt
.show_content__presentation_description ==
event_presentation_obj.event_presentation_id
) {
$events_sess.pres_mgmt.show_content__presentation_description =
null;
// Was testing with LiveQuery
$events_slct.event_presentation_id =
null;
} else {
$events_sess.pres_mgmt.show_content__presentation_description =
event_presentation_obj.event_presentation_id;
// Was testing with LiveQuery
$events_slct.event_presentation_id =
event_presentation_obj.event_presentation_id;
}
}}
class="btn btn-sm preset-tonal-surface hover:preset-filled-surface-500 text-xs"
>
{#if $events_sess.pres_mgmt.show_content__presentation_description == event_presentation_obj.event_presentation_id}
<span class="fas fa-eye-slash mx-1"
></span>
<span>Hide Description</span>
{:else}
<span class="fas fa-eye mx-1"></span>
<span>Show</span>
{/if}
</button>
<pre
class="whitespace-pre-wrap p-2 bg-gray-100 rounded-md"
class:hidden={$events_sess.pres_mgmt
.show_content__presentation_description !==
event_presentation_obj.event_presentation_id}>{event_presentation_obj.description}</pre>
{:else}
{@html ae_snip.html__not_set}
{/if}
<!-- {:else}
<div class="text-sm text-gray-500 bg-gray-100 p-1 rounded-md border border-gray-200"
class:hidden={!$ae_loc.administrator_access}
>
<span class="fas fa-exclamation-triangle mx-1"></span>
No description provided.
</div>
{/if} -->
</Element_ae_crud>
</div>
<!-- Show presenters for this presentation -->
<Comp_event_presenter_obj_li
link_to_type={'event_presentation'}
link_to_id={event_presentation_obj.event_presentation_id}
event_presenter_id_li={[]}
log_lvl={2}
></Comp_event_presenter_obj_li>
<!-- Show files for this presentation -->
<Element_manage_event_file_li_wrap
link_to_type={'event_presentation'}
link_to_id={event_presentation_obj?.event_presentation_id}
allow_basic={$events_loc.auth__kv.session[
$events_slct.event_session_id
] ||
$events_loc.auth__kv.presenter[
$events_slct.event_presenter_id
]}
container_class_li={''}
/>
</li>
{/each}
</ul>
{:else}
<!-- <p class:hidden={display_mode != 'default'}>
No presentations available to show at this time
</p> -->
{/if}
allow_moderator={$events_loc.auth__kv.session[
$events_slct.event_session_id
]}
container_class_li={''}
/>
</li>
{/each}
</ul>
</section>

6
src/routes/events/ae_comp__events_menu_nav.svelte
View File

@@ -86,7 +86,7 @@
class="ae_menu__navigation_options flex flex-row flex-wrap gap-0.5 items-center justify-around"
>
<a
href="/events/{events__session_search}"
href="/events/{event_id}/pres_mgmt"
class="btn btn-sm mx-1 ae_btn_info"
class:hidden={!events__session_search}
>
@@ -103,9 +103,9 @@
Back to Session
</a>
<a
href="/events/{event_id}/launcher/{events__launcher_id}"
href="/events/{event_id}/launcher{events__launcher_id ? '/' + events__launcher_id : ''}"
class="btn btn-sm mx-1 ae_btn_info"
class:hidden={!events__launcher_id}
class:hidden={!event_id}
>
<span class="fas fa-plane m-1"></span>
Launcher

2
src/routes/testing/+page.svelte
View File

@@ -570,7 +570,7 @@
</main>
<aside class="space-y-4">
<div class="card p-6 h-full bg-surface-100-800-token overflow-hidden flex flex-col sticky top-4 max-h-[calc(100vh-2rem)] shadow-2xl border border-gray-500">
<div class="card p-6 h-full bg-surface-100 dark:bg-surface-800 overflow-hidden flex flex-col sticky top-4 max-h-[calc(100vh-2rem)] shadow-2xl border border-gray-500">
<header class="flex justify-between items-center border-b border-gray-500 pb-3 mb-4">
<h3 class="h3 font-bold uppercase tracking-widest opacity-70">Audit Result</h3>
{#if test_result === 'loading...'} <span class="badge variant-filled-warning animate-pulse">RUNNING</span>

8
src/routes/testing/data_store_v3/+page.svelte
View File

@@ -51,7 +51,7 @@
<section class="card p-4 space-y-4 variant-soft-primary">
<h2 class="h3">Scenario 1: Global Default</h2>
<p class="text-sm">Fetching code <code>{test_null_act_and_for}</code>. Should fall back to <code>account_id = NULL</code> if not found for account.</p>
<div class="bg-surface-100-800-token p-4 rounded-lg border border-surface-500/20">
<div class="bg-surface-100 dark:bg-surface-800 p-4 rounded-lg border border-surface-500/20">
<AE_Element_Data_Store_V3
ds_code={test_null_act_and_for}
ds_name={'Global Default Test'}
@@ -64,7 +64,7 @@
<section class="card p-4 space-y-4 variant-soft-secondary">
<h2 class="h3">Scenario 2: Account Default</h2>
<p class="text-sm">Fetching code <code>{test_code_account}</code> for Account ID: <code>{$ae_loc.account_id}</code>.</p>
<div class="bg-surface-100-800-token p-4 rounded-lg border border-surface-500/20">
<div class="bg-surface-100 dark:bg-surface-800 p-4 rounded-lg border border-surface-500/20">
<AE_Element_Data_Store_V3
ds_code={test_code_account}
ds_name={'Account Default Test'}
@@ -77,7 +77,7 @@
<section class="card p-4 space-y-4 variant-soft-tertiary">
<h2 class="h3">Scenario 3: Specific Record (Event Override)</h2>
<p class="text-sm">Fetching code <code>{test_code_and_for}</code> linked to <code>for_type: event</code> and <code>for_id: {test_event_id}</code>.</p>
<div class="bg-surface-100-800-token p-4 rounded-lg border border-surface-500/20">
<div class="bg-surface-100 dark:bg-surface-800 p-4 rounded-lg border border-surface-500/20">
<AE_Element_Data_Store_V3
ds_code={test_code_and_for}
ds_name={'Specific Record Test'}
@@ -92,7 +92,7 @@
<section class="card p-4 space-y-4 variant-soft-tertiary">
<h2 class="h3">Scenario 4: Change Props Passed</h2>
<p class="text-sm">Fetching code <code>{test_code_and_for}</code> linked to <code>for_type: event</code> and <code>for_id: {test_event_id}</code>.</p>
<div class="bg-surface-100-800-token p-4 rounded-lg border border-surface-500/20">
<div class="bg-surface-100 dark:bg-surface-800 p-4 rounded-lg border border-surface-500/20">
<AE_Element_Data_Store_V3
ds_code={test_code_and_for}
ds_name={'Specific Record Test'}

4
src/routes/testing/editor_test/+page.svelte
View File

@@ -19,7 +19,7 @@
<span class="fas fa-eye text-primary-500"></span>
Visual Editor (AE_Comp_Editor_TipTap)
</h2>
<div class="bg-surface-100-800-token rounded-lg">
<div class="bg-surface-100 dark:bg-surface-800 rounded-lg">
<AE_Comp_Editor_TipTap
bind:content={test_content}
placeholder="Try writing something pretty..."
@@ -33,7 +33,7 @@
<span class="fas fa-code text-tertiary-500"></span>
Source View (AE_Comp_Editor_CodeMirror)
</h2>
<div class="bg-surface-100-800-token rounded-lg h-[250px]">
<div class="bg-surface-100 dark:bg-surface-800 rounded-lg h-[250px]">
<AE_Comp_Editor_CodeMirror
bind:content={test_content}
language="html"