Trying to make the slightly newer event session search page load consistently.

src/lib/ae_events_stores.ts

@@ -99,6 +99,8 @@ let events_local_data_struct: key_val = {
 
     // Event Presentation Launcher (and native Electron app)
     'launcher': {
+        controller_group_code: 'ae_launcher',
+
         qry_limit__sessions: 50,
         qry_limit__presentations: 25,
         qry_limit__presenters: 75,
@@ -115,6 +117,8 @@ let events_local_data_struct: key_val = {
         show_content__presentation_code: true,
         show_content__presenter_code: true,
 
+        show_section__controller: false,
+
         datetime_format: 'datetime_12_long',
         time_format: 'time_12_short',
         time_hours: 12, // 12 or 24

src/lib/ae_stores.ts

@@ -1,11 +1,12 @@
 import { localStorageStore } from '@skeletonlabs/skeleton';
-import { writable } from 'svelte/store';
+import { readable, writable } from 'svelte/store';
-import type { Writable } from 'svelte/store';
+import type { Readable, Writable } from 'svelte/store';
 
 
 import { PUBLIC_TESTING, PUBLIC_AE_API_PROTOCOL, PUBLIC_AE_API_SERVER, PUBLIC_AE_API_BAK_SERVER, PUBLIC_AE_API_PORT, PUBLIC_AE_API_PATH, PUBLIC_AE_API_SECRET_KEY, PUBLIC_AE_API_CRUD_SUPER_KEY, PUBLIC_AE_NO_ACCOUNT_ID, PUBLIC_AE_NO_ACCOUNT_ID_TOKEN, PUBLIC_AE_ACCOUNT_ID, PUBLIC_AE_EVENT_ID, PUBLIC_AE_SPONSORSHIP_CFG_ID } from '$env/static/public';
 console.log(`AE Stores - PUBLIC_TESTING:`, PUBLIC_TESTING);
 
+const api_server_fqdn = PUBLIC_AE_API_SERVER; // 'api.oneskyit.com'
 const api_base_url = `${PUBLIC_AE_API_PROTOCOL}://${PUBLIC_AE_API_SERVER}:${PUBLIC_AE_API_PORT}${PUBLIC_AE_API_PATH}`;
 const api_base_url_bak = `${PUBLIC_AE_API_PROTOCOL}://${PUBLIC_AE_API_BAK_SERVER}:${PUBLIC_AE_API_PORT}${PUBLIC_AE_API_PATH}`;
 
@@ -255,6 +256,7 @@ export let ae_sess = writable(ae_app_session_data_struct);
 // *** BEGIN *** Temporary API data. This should be stored to session storage.
 export let ae_api_data_struct: key_val = {
     'ver': '2024-08-11_11',
+    'fqdn': api_server_fqdn,
     'base_url': api_base_url,
     'base_url_bak': api_base_url_bak,
     'api_secret_key': api_secret_key, // 'YOUR_API_SECRET_KEY',
@@ -338,3 +340,16 @@ export let slct = writable(slct_obj_template);
 // Updated 2024-02-27
 export let slct_trigger: any = writable(null);
 // console.log(`AE Stores - Selected Trigger:`, slct_trigger);
+
+
+/* *** BEGIN *** Create time variable */
+// Updated 2020
+export const time = readable(new Date(), function start(set) {
+    const interval = setInterval(() => {
+        set(new Date());
+    }, 1000);
+
+    return function stop() {
+        clearInterval(interval);
+    };
+});

src/lib/ae_utils/ae_utils__datetime_format.ts

@@ -118,6 +118,9 @@ export let iso_datetime_formatter = function iso_datetime_formatter(
             datetime_string = dayjs(raw_datetime).format('HH:mm:ss');
             break;
         case 'time_long':
+            datetime_string = dayjs(raw_datetime).format('HH:mm:ss A');
+            break;
+        case 'time_12_long':
             datetime_string = dayjs(raw_datetime).format('hh:mm:ss A');
             break;
         case 'time_short':

src/lib/element_websocket_v2.svelte

@@ -0,0 +1,311 @@
+<script lang="ts">
+import { createEventDispatcher, onMount } from 'svelte';
+
+export let ws_server = 'dev-api.oneskyit.com';
+export let base_url = `wss://${ws_server}/ws`;
+export let group_id = 'default';
+export let client_id = Date.now();
+
+export let cmd: null|string = null;
+export let msg: null|string = null;
+export let type: null|string = null;
+export let trigger_send: any = null;
+
+export let ws_conn_status = null;
+
+// *** Set initial variables
+const dispatch = createEventDispatcher();
+
+// JSON formatted data
+let ws_data = {
+    'client_id': null, // The device or browser ID if available.
+    // 'src': null, // Sending client
+    // 'account_id': null, // Essentially the person ID or user ID if available.
+    // 'dest': null, // Destination client
+    'target': 'echo', // echo, dm (direct), grp (group), all (broadcast)
+    'type': 'cmd', // msg, cmd, json, hello, bye
+    // 'grp': null, // Destination group
+    'msg': null, // Message string
+    'cmd': null, // Command string
+    // 'data': null,
+    // 'b64': null,
+}
+
+let ws_received_list_cmd: string[] = [];
+let ws_received_list_other: string[] = [];
+let ws_received_list_msg: string[] = [];
+
+
+onMount(async () => {
+    console.log('** Component Mounted: ** Element Websocket v2');
+});
+
+
+function ws_connect_group_id({group_id, client_id}) {
+    console.log(`${base_url}/group/${group_id}/client/${client_id}`);
+    let ws_connection = new WebSocket(`${base_url}/group/${group_id}/client/${client_id}`);
+
+    ws_connection.onopen = function() {
+        console.log('WS: connected');
+
+        ws_conn_status = 'connected';
+
+        dispatch('ws_conn', {
+            'status': 'connected'
+        });
+
+        ws_connection.send(JSON.stringify({
+            client_id: client_id,
+            target: 'echo',
+            type: 'hello',
+            group_id: group_id,
+            msg: 'You are connected!'
+        }));
+
+        ws_connection.send(JSON.stringify({
+            client_id: client_id,
+            target: 'all',
+            type: 'hello',
+            group_id: group_id,
+            msg: `Client ${client_id} connected!`
+        }));
+    };
+
+    ws_connection.onmessage = function(event) {
+        console.log('WS: message received');
+        console.log(event);
+
+        let ws_recv_data = JSON.parse(event.data);
+        console.log(ws_recv_data);
+
+        if (ws_recv_data.type == 'cmd') {
+            console.log(`WS: Type CMD: ${ws_recv_data.cmd}`);
+            ws_received_list_cmd.push(ws_recv_data);
+            ws_received_list_cmd = ws_received_list_cmd; // trigger Svelte update
+        } else {
+            console.log('WS: Type other');
+            ws_received_list_other.push(ws_recv_data);
+            ws_received_list_other = ws_received_list_other; // trigger Svelte update
+        }
+
+        dispatch('ws_recv', {
+            // 'client_id': ws_data.client_id, // The device or browser ID if available.
+            'src': ws_recv_data.client_id, // The device or browser ID if available.
+            // 'account_id': ws_recv_data.account_id, // Essentially the person ID or user ID if available.
+            'dest': group_id, // Destination client
+            'target': ws_recv_data.target, // echo, dm (direct), grp (group), all (broadcast)
+            'type': ws_recv_data.type, // Message type (msg, cmd, json, hello, bye)
+            // 'grp': ws_recv_data.grp, // Destination group
+            'msg': ws_recv_data.msg, // Message string
+            'cmd': ws_recv_data.cmd, // Command string
+        });
+
+    };
+
+    ws_connection.onclose = function(event) {
+        console.log('WS: connection closed');
+
+        ws_connection.send(JSON.stringify({
+            client_id: client_id,
+            target: 'all',
+            type: 'hello',
+            group_id: group_id,
+            msg: `Client ${client_id} is disconnecting!`
+        }));
+
+        ws_conn_status = 'disconnected';
+
+        dispatch('ws_conn', {
+            'status': 'disconnected'
+        });
+
+        setTimeout(function() {
+            console.log('WS: Disconnected... Try again!');
+            ws_connect_group_id({group_id: group_id, client_id: client_id});
+            console.log('WS: Again done?');
+        }, 1000);
+    };
+
+    ws_connection.onerror = function(event) {
+        console.log('WS: connection error???');
+
+        ws_connection.send(JSON.stringify({
+            client_id: client_id,
+            target: 'all',
+            type: 'hello',
+            group_id: group_id,
+            msg: `Client ${client_id} is having trouble?!`
+        }));
+    };
+
+    // NOTE WARNING: Uncommenting this seems to break FastAPI somehow???
+    // NOTE: from FastAPI log: RuntimeError: Unexpected ASGI message 'websocket.send', after sending 'websocket.close'.
+    // ws_connection.onerror = function(err) {
+    //     console.error('WS socket error: ', err.message, 'Closing socket');
+    //     // ws_connection.close();
+    // };
+
+    return ws_connection;
+}
+
+// Start the WS function
+// let ws_group = ws_connect_group_id({group_id: group_id, client_id: client_id});
+let ws_group: any = null;
+if (group_id) {
+    ws_group = ws_connect_group_id({group_id: group_id, client_id: client_id});
+}
+
+$: if (trigger_send && cmd) {
+    console.log('WS: Send triggered!');
+    console.log(trigger_send);
+    console.log(cmd);
+    trigger_send = null;
+    ws_data.target = 'group';
+    ws_data.type = 'cmd';
+    ws_data.cmd = cmd;
+    handle_send_ws_data();
+}
+
+function handle_send_ws_data() {
+    console.log(ws_data);
+    if (!ws_data) {
+        return false;
+    }
+    let ws_data_json_str = JSON.stringify(ws_data);
+    let resp = ws_group.send(ws_data_json_str);
+    console.log(resp);
+
+    dispatch('ws_sent', {
+        // 'client_id': ws_data.client_id, // The device or browser ID if available.
+        'src': ws_data.client_id, // The device or browser ID if available.
+        // 'account_id': ws_data.account_id, // Essentially the person ID or user ID if available.
+        'dest': group_id, // Destination client
+        'group_id': group_id,
+        'target': ws_data.target, // echo, dm (direct), grp (group), all (broadcast)
+        'type': ws_data.type, // Message type (msg, cmd, json, hello, bye)
+        // 'grp': ws_data.grp, // Destination group
+        'msg': ws_data.msg, // Message string
+        'cmd': ws_data.cmd, // Command string
+    });
+
+    // cmd = '';
+    msg = '';
+}
+
+</script>
+
+
+<section class="ae_element__websocket container p-1 bg-pink-100 text-xs">
+
+<header>
+    <h1>Websockets</h1>
+</header>
+
+<!-- <form on:submit|preventDefault={handle_send_message}>
+    <select bind:value={type}>
+        <option value="">None</option>
+        <option value="echo">Echo</option>
+        <option value="dm">Direct Message</option>
+        <option value="group">Group Message</option>
+        <option value="all">Broadcast to All</option>
+        <option value="cmd">Command</option>
+    </select>
+
+    <select bind:value={group_id}>
+        <option value="">None</option>
+        <option value="test_grp_123">123</option>
+        <option value="test_grp_999">999</option>
+        <option value="test_grp_poster">A Poster Group</option>
+    </select>
+
+    <input type="text" bind:value={message_text} placeholder="Your message"/>
+
+    <button>Send</button>
+</form> -->
+
+{#if 1==2}
+<form on:submit|preventDefault={handle_send_ws_data}>
+    <!-- <select bind:value={type}>
+        <option value="">None</option>
+        <option value="echo">Echo</option>
+        <option value="dm">Direct Message</option>
+        <option value="group">Group Message</option>
+        <option value="all">Broadcast to All</option>
+        <option value="cmd">Command</option>
+    </select> -->
+
+    <!-- <select bind:value={group_id}>
+        <option value="">None</option>
+        <option value="test_grp_123">123</option>
+        <option value="test_grp_999">999</option>
+        <option value="test_grp_poster">A Poster Group</option>
+    </select> -->
+
+    <!-- <input type="text" bind:value={dm_client_id} placeholder="Direct message client ID"/> -->
+
+    <input type="text" bind:value={ws_data.cmd} placeholder="Your command"/>
+    <input type="text" bind:value={ws_data.msg} placeholder="Your message"/>
+
+    <button>Send Example Group</button>
+</form>
+{/if}
+
+<!-- <pre>
+ae_load:event_session=jEG9APQRUs8 (Poster Session #3: Work Never Ends - Pythagoras)
+ae_open:event_file=CHqU5sW7xbc (jpg)
+ae_open:event_file=Kljq0uiTlXt (video)
+</pre> -->
+
+<!-- <hr> -->
+
+<h2>Messages</h2>
+
+<ul class='messages'>
+    {#each ws_received_list_other as msg_entry}
+        <li>
+            [{(msg_entry.group_id||'No Group ID')}]
+            {(msg_entry.client_id||'No Client ID')}
+            &mdash;
+            {(msg_entry.target||'No Target')}
+            &mdash;
+            {(msg_entry.type||'No Type')}: {msg_entry.msg}
+            <!-- <br>{JSON.stringify(msg_entry)} -->
+        </li>
+    {/each}
+</ul>
+
+<hr>
+
+<h2>Commands</h2>
+
+<ul class='commands'>
+    {#each ws_received_list_cmd as cmd_entry}
+        <li>
+            [{(cmd_entry.group_id||'No Group ID')}]
+            {(cmd_entry.client_id||'No Client ID')}
+            &mdash;
+            {(cmd_entry.target||'No Target')}
+            &mdash;
+            {(cmd_entry.type||'No Type')}: {cmd_entry.cmd}
+        </li>
+    {/each}
+</ul>
+
+</section>
+
+
+<style>
+/* .websocket_element {
+    background-color: white;
+    border-top: dashed medium gray;
+    color: gray;
+    font-size: .7em;
+}
+.websocket_element header {
+    font-size: .7em;
+}
+.websocket_element h2 {
+    font-size: .9em;
+} */
+</style>
+

src/routes/events/[event_id]/(launcher)/+layout.svelte

@@ -8,10 +8,11 @@ import { sineIn } from 'svelte/easing';
 import { liveQuery } from "dexie";
 import { Drawer, Footer } from 'flowbite-svelte';
 import { ae_util } from '$lib/ae_utils/ae_utils';
-import { db_events } from "$lib/db_events";
+import { db_events } from '$lib/db_events';
-import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger, time } from '$lib/ae_stores';
 import { events_loc, events_sess, events_slct, events_trigger, events_trig } from '$lib/ae_events_stores';
 
+import Element_websocket_v2 from '$lib/element_websocket_v2.svelte';
 import Event_launcher_menu from './launcher_menu.svelte';
 import Event_launcher_session_view from './launcher_session_view.svelte';
 
@@ -135,9 +136,10 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
         "
     >
     <h3 class="h4 text-center italic">&AElig; Presentation Launcher</h3>
-    <h2 class="h3 text-center">{$lq__event_obj?.name}</h2>
+    <h2 class="h3 text-center">{$lq__event_obj.cfg_json?.short_name}</h2>
-    <h3 class="h4 text-center italic">{$lq__event_location_obj?.name}
+    <h3 class="h4 text-center italic">
-        {$events_slct.event_location_id}
+        {$lq__event_location_obj?.name}
+        <!-- {$events_slct.event_location_id} -->
     </h3>
 </header>
 {/if}
@@ -276,8 +278,8 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
     [Help]
     </div>
 
-    <div>
+    <div class="slct_location_name">
-    [Session Name]
+    {$lq__event_location_obj?.name}
     </div>
 
     <div>
@@ -285,18 +287,27 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
     </div>
 
     <div>
-    [Recording]
+    {#if $events_loc.launcher?.av_recording}
+        <span class="fas fa-video"></span> AV Recording Active
+    {:else}
+        <span class="fas fa-video-slash"></span> AV Recording Inactive
+    {/if}
     </div>
 
-    <div>
+    <div class="current_datetime">
-    [Date and Time]
+        {ae_util.iso_datetime_formatter($time,'date_full_no_year')}
+        {#if $events_loc.launcher?.time_hours == 12}
+            {ae_util.iso_datetime_formatter($time,'time_12_long')}
+        {:else}
+        {ae_util.iso_datetime_formatter($time,'time_long')}
+        {/if}
     </div>
 </Footer>
 
 
 <Drawer
     bgColor="bg-blue"
-    class="bg-orange-100 opacity-75 hover:opacity-95 transition-all duration-1000"
+    class="bg-orange-100 opacity-90 hover:opacity-95 transition-all duration-1000"
     placement="left"
     transitionType="fly"
     transitionParams={
@@ -326,11 +337,71 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
         </button>
     </div>
 
-    <h3
+
+    <hr>
+
+    <section class="controller">
+        <h3>
+            <button
+                on:click={() => {
+                    $events_loc.launcher.show_section__controller = !$events_loc.launcher.show_section__controller;
+                }}
+                class="ae_btn btn_sm btn_seamless"
+                >
+                Controller:
+                {#if $events_loc.launcher.show_section__controller}
+                    <span class="fas fa-chevron-down"></span>
+                {:else}
+                    <span class="fas fa-chevron-right"></span>
+                {/if}
+            </button>
+        </h3>
+
+        <div
+            class:hidden={!$events_loc.launcher.show_section__controller}
+            >
+
+            <select
+                bind:value={$events_loc.launcher.controller}
+                class="select"
+                >
+                    <option value="local">Locally Controlled</option>
+                    <option value="remote">Remotely Controlled</option>
+                    <option value="local_push">Controller</option>
+            </select>
+
+            <input
+                bind:value={$events_loc.launcher.controller_group_code}
+                placeholder="Controller group code"
+                class="input"
+                >
+        </div>
+
+        {#if $events_loc.launcher.controller_group_code}
+            <!-- {$ae_api.base_url} -->
+            <Element_websocket_v2
+                ws_server={$ae_api.fqdn}
+                group_id={$events_loc.launcher.controller_group_code}
+                cmd={$events_loc.launcher.controller_cmd}
+                type={'cmd'}
+                trigger_send={$events_loc.launcher.controller_trigger_send}
+
+                />
+                <!-- on:ws_conn={handle_ws_conn} -->
+                <!-- on:ws_recv={handle_ws_recv} -->
+                <!-- on:ws_sent={handle_ws_sent} -->
+        {/if}
+    </section>
+
+    <hr>
+
+    <!-- <h3
         class="text-center mb-4 text-sm font-semibold"
         >
         Controller
-    </h3>
+    </h3> -->
+
+
 
     <h3
         class="text-center mb-4 text-sm font-semibold"
@@ -431,6 +502,10 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
     <pre class="text-xs">
         {JSON.stringify($events_loc.launcher, null, 2)}
     </pre>
+    <hr />
+    <pre class="text-xs">
+        {JSON.stringify($ae_api, null, 2)}
+    </pre>
 
     </div>
 </Drawer>

src/routes/events/[event_id]/+layout.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+/** @type {import('./$types').LayoutData} */
+export let data: any;
+let log_lvl = 2;
+// console.log(`ae_events_pres_mgmt event [event_id] +page.svelte data:`, data);
+
+import { browser } from '$app/environment';
+// import { goto, invalidate, pushState, replaceState } from '$app/navigation';
+
+import type { key_val } from '$lib/ae_stores';
+import { ae_util } from '$lib/ae_utils/ae_utils';
+// import Element_data_store from '$lib/element_data_store_v2.svelte';
+// import Comp_event_session_obj_li from '../../events_pres_mgmt/ae_comp__event_session_obj_li.svelte';
+
+import { liveQuery } from "dexie";
+import { core_func } from '$lib/ae_core_functions';
+import { db_events } from "$lib/db_events";
+import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
+import { events_func } from '$lib/ae_events_functions';
+
+
+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.
+$slct.account_id = data.account_id;
+// console.log(`$slct.account_id = `, $slct.account_id);
+let ae_acct = data[$slct.account_id];
+console.log(`ae_acct = `, ae_acct);
+
+console.log(`event_id layout A: ${data.params.event_id}`);
+console.log(`event_id layout B: ${ae_acct.slct.event_id}`);
+console.log(`event_id layout C: ${$events_slct.event_id}`);
+
+// $: event_id = data.params.event_id;
+// console.log(`event_id layout D: ${event_id}`);
+
+// $events_slct.event_id = event_id;
+// $events_slct.event_obj = ae_acct.slct.event_obj;
+$events_slct.event_session_obj_li = ae_acct.slct.event_session_obj_li;
+$events_slct.event_location_obj_li = ae_acct.slct.event_location_obj_li;
+
+</script>
+
+
+<slot />

src/routes/events/[event_id]/+layout.ts

@@ -0,0 +1,76 @@
+/** @type {import('./$types').LayoutLoad} */
+console.log(`Events - [event_id] launcher +layout.ts start`);
+
+import { error } from '@sveltejs/kit';
+import { browser } from '$app/environment';
+import { events_func } from '$lib/ae_events_functions';
+
+export async function load({ params, parent }) { // route
+    let log_lvl = 0;
+
+    let data = await parent();
+    // console.log(`ae events_pres_mgmt event [event_id] +page.ts data:`, data);
+    data.log_lvl = log_lvl;
+
+    let account_id = data.account_id;
+    let ae_acct = data[account_id];
+    // console.log(`ae_acct = `, ae_acct);
+
+    // if (!account_id) {
+    //     console.log(`events_pres_mgmt_event [event_id] +page.ts: The account_id was not found in the data!!!`);
+    //     return false;
+    // }
+
+    // data.ae_events_pres_mgmt_event_event_id_page_ts = true;
+
+    let event_id = params.event_id;
+    if (!event_id) {
+        console.log(`ae Events - [event_id] +page.ts: The event_id was not found in the params.event_id!!!`);
+        error(404, {
+			message: 'Event ID not found'
+		});
+    }
+
+    ae_acct.slct.event_id = event_id;
+
+    // let load_event_obj = events_func.handle_load_ae_obj_id__event({
+    //     api_cfg: ae_acct.api, event_id:  event_id, try_cache: true
+    // });
+
+    // ae_acct.slct.event_obj = await load_event_obj;
+
+    if (browser) {
+        let load_event_obj = events_func.handle_load_ae_obj_id__event({
+            api_cfg: ae_acct.api, event_id:  event_id, try_cache: true
+        });
+        console.log(`load_event_obj = `, load_event_obj);
+        ae_acct.slct.event_obj = load_event_obj;
+
+        let load_event_session_obj_li = events_func.load_ae_obj_li__event_session({
+            api_cfg: ae_acct.api,
+            for_obj_type: 'event',
+            for_obj_id: event_id,
+            params: {qry__enabled: 'enabled', qry__hidden: 'all', qry__limit: 200},
+            try_cache: true,
+            log_lvl: 1
+        });
+        console.log(`load_event_session_obj_li = `, load_event_session_obj_li);
+        ae_acct.slct.event_session_obj_li = load_event_session_obj_li;
+
+        let load_event_location_obj_li = events_func.load_ae_obj_li__event_location({
+            api_cfg: ae_acct.api,
+            for_obj_type: 'event',
+            for_obj_id: event_id,
+            params: {qry__enabled: 'enabled', qry__hidden: 'all', qry__limit: 200},
+            try_cache: true,
+            log_lvl: 1
+        });
+        console.log(`load_event_location_obj_li = `, load_event_location_obj_li);
+        ae_acct.slct.event_location_obj_li = load_event_location_obj_li;
+    }
+
+    // WARNING: Precaution against shared data between sites and sessions.
+    data[account_id] = ae_acct;
+
+    return data;
+}

src/routes/events/[event_id]/+page.svelte

@@ -25,16 +25,19 @@ 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.
-$slct.account_id = data.account_id;
+// $slct.account_id = data.account_id;
 // console.log(`$slct.account_id = `, $slct.account_id);
 let ae_acct = data[$slct.account_id];
 console.log(`ae_acct = `, ae_acct);
 
-console.log(`event_id: ${data.params.event_id}`);
+console.log(`event_id layout A: ${data.params.event_id}`);
+console.log(`event_id layout B: ${ae_acct.slct.event_id}`);
+console.log(`event_id layout C: ${$events_slct.event_id}`);
+$: event_id = data.params.event_id;
 
-$events_slct.event_id = data.params.event_id;
+// $events_slct.event_id = data.params.event_id;
 // $events_slct.event_obj = ae_acct.slct.event_obj;
-$events_slct.event_session_obj_li = ae_acct.slct.event_session_obj_li;
+// $events_slct.event_session_obj_li = ae_acct.slct.event_session_obj_li;
 
 // import Leads_add_scan from './leads_add_scan.svelte';
 // import Sessions_list from './sessions_list.svelte';
@@ -42,8 +45,9 @@ $events_slct.event_session_obj_li = ae_acct.slct.event_session_obj_li;
 // import Leads_payment from './leads_payment.svelte';
 
 $: lq__event_obj = liveQuery(async () => {
+    console.log(`*** LiveQuery: lq__event_obj *** event_id=${$events_slct.event_id}`);
     let results = await db_events.events
-    .get($events_slct.event_id)
+        .get($events_slct.event_id)
 
     return results;
 });

src/routes/events/[event_id]/+page.ts

@@ -1,76 +1,76 @@
 /** @type {import('./$types').PageLoad} */
 console.log(`Events - [event_id] +page.ts start`);
 
-import { error } from '@sveltejs/kit';
+// import { error } from '@sveltejs/kit';
-import { browser } from '$app/environment';
+// import { browser } from '$app/environment';
-import { events_func } from '$lib/ae_events_functions';
+// import { events_func } from '$lib/ae_events_functions';
 
 export async function load({ params, parent }) { // route
-    let log_lvl = 0;
+    // let log_lvl = 0;
 
-    let data = await parent();
+    // let data = await parent();
-    // console.log(`ae events_pres_mgmt event [event_id] +page.ts data:`, data);
+    // // console.log(`ae events_pres_mgmt event [event_id] +page.ts data:`, data);
-    data.log_lvl = log_lvl;
+    // data.log_lvl = log_lvl;
 
-    let account_id = data.account_id;
+    // let account_id = data.account_id;
-    let ae_acct = data[account_id];
+    // let ae_acct = data[account_id];
-    // console.log(`ae_acct = `, ae_acct);
+    // // console.log(`ae_acct = `, ae_acct);
 
-    // if (!account_id) {
+    // // if (!account_id) {
-    //     console.log(`events_pres_mgmt_event [event_id] +page.ts: The account_id was not found in the data!!!`);
+    // //     console.log(`events_pres_mgmt_event [event_id] +page.ts: The account_id was not found in the data!!!`);
-    //     return false;
+    // //     return false;
+    // // }
+
+    // // data.ae_events_pres_mgmt_event_event_id_page_ts = true;
+
+    // let event_id = params.event_id;
+    // if (!event_id) {
+    //     console.log(`ae Events - [event_id] +page.ts: The event_id was not found in the params.event_id!!!`);
+    //     error(404, {
+	// 		message: 'Event ID not found'
+	// 	});
     // }
 
-    // data.ae_events_pres_mgmt_event_event_id_page_ts = true;
+    // // ae_acct.slct.event_id = event_id;
 
-    let event_id = params.event_id;
+    // // let load_event_obj = events_func.handle_load_ae_obj_id__event({
-    if (!event_id) {
+    // //     api_cfg: ae_acct.api, event_id:  event_id, try_cache: true
-        console.log(`ae Events - [event_id] +page.ts: The event_id was not found in the params.event_id!!!`);
+    // // });
-        error(404, {
-			message: 'Event ID not found'
-		});
-    }
 
-    // ae_acct.slct.event_id = event_id;
+    // // ae_acct.slct.event_obj = await load_event_obj;
 
-    // let load_event_obj = events_func.handle_load_ae_obj_id__event({
+    // if (browser) {
-    //     api_cfg: ae_acct.api, event_id:  event_id, try_cache: true
+    //     let load_event_obj = events_func.handle_load_ae_obj_id__event({
-    // });
+    //         api_cfg: ae_acct.api, event_id:  event_id, try_cache: true
+    //     });
+    //     console.log(`load_event_obj = `, load_event_obj);
+    //     ae_acct.slct.event_obj = load_event_obj;
 
-    // ae_acct.slct.event_obj = await load_event_obj;
+    //     let load_event_session_obj_li = events_func.load_ae_obj_li__event_session({
+    //         api_cfg: ae_acct.api,
+    //         for_obj_type: 'event',
+    //         for_obj_id: event_id,
+    //         params: {qry__enabled: 'enabled', qry__hidden: 'all', qry__limit: 200},
+    //         try_cache: true,
+    //         log_lvl: 1
+    //     });
+    //     console.log(`load_event_session_obj_li = `, load_event_session_obj_li);
+    //     ae_acct.slct.event_session_obj_li = load_event_session_obj_li;
 
-    if (browser) {
+    //     let load_event_location_obj_li = events_func.load_ae_obj_li__event_location({
-        let load_event_obj = events_func.handle_load_ae_obj_id__event({
+    //         api_cfg: ae_acct.api,
-            api_cfg: ae_acct.api, event_id:  event_id, try_cache: true
+    //         for_obj_type: 'event',
-        });
+    //         for_obj_id: event_id,
-        console.log(`load_event_obj = `, load_event_obj);
+    //         params: {qry__enabled: 'enabled', qry__hidden: 'all', qry__limit: 200},
-        ae_acct.slct.event_obj = load_event_obj;
+    //         try_cache: true,
+    //         log_lvl: 1
+    //     });
+    //     console.log(`load_event_location_obj_li = `, load_event_location_obj_li);
+    //     ae_acct.slct.event_location_obj_li = load_event_location_obj_li;
+    // }
 
-        let load_event_session_obj_li = events_func.load_ae_obj_li__event_session({
+    // // WARNING: Precaution against shared data between sites and sessions.
-            api_cfg: ae_acct.api,
+    // data[account_id] = ae_acct;
-            for_obj_type: 'event',
-            for_obj_id: event_id,
-            params: {qry__enabled: 'enabled', qry__hidden: 'all', qry__limit: 200},
-            try_cache: true,
-            log_lvl: 1
-        });
-        console.log(`load_event_session_obj_li = `, load_event_session_obj_li);
-        ae_acct.slct.event_session_obj_li = load_event_session_obj_li;
 
-        let load_event_location_obj_li = events_func.load_ae_obj_li__event_location({
+    // return data;
-            api_cfg: ae_acct.api,
-            for_obj_type: 'event',
-            for_obj_id: event_id,
-            params: {qry__enabled: 'enabled', qry__hidden: 'all', qry__limit: 200},
-            try_cache: true,
-            log_lvl: 1
-        });
-        console.log(`load_event_location_obj_li = `, load_event_location_obj_li);
-        ae_acct.slct.event_location_obj_li = load_event_location_obj_li;
-    }
-
-    // WARNING: Precaution against shared data between sites and sessions.
-    data[account_id] = ae_acct;
-
-    return data;
 }

src/routes/events_pres_mgmt/ae_comp__pres_mgmt_menu_nav.svelte

@@ -51,9 +51,10 @@ export let pres_mgmt__session_search: boolean = false; // event_id
         class="ae_menu__navigation_options flex flex-row items-center justify-around"
         >
         <!-- data-sveltekit-reload={true} -->
+        <!-- href="/events_pres_mgmt/event/{event_id}" -->
+        <!-- href="/events/{event_id}" -->
         <a
-
+            href="/events/{event_id}"
-            href="/events_pres_mgmt/event/{event_id}"
             class="{ae_snip.classes__events_pres_mgmt_menu__button}"
             class:hidden={!pres_mgmt__session_search}
             >

src/routes/events_pres_mgmt/event/[slug]/+page.svelte

@@ -32,7 +32,7 @@ console.log(`ae_acct = `, ae_acct);
 
 // $events_slct.event_id = ae_acct.slct.event_id;
 // $events_slct.event_obj = ae_acct.slct.event_obj;
-$events_slct.event_session_obj_li = ae_acct.slct.event_session_obj_li;
+// $events_slct.event_session_obj_li = ae_acct.slct.event_session_obj_li;
 
 // import Leads_add_scan from './leads_add_scan.svelte';
 // import Sessions_list from './sessions_list.svelte';

src/routes/events_pres_mgmt/event/[slug]/+page.ts

@@ -28,7 +28,7 @@ export async function load({ params, parent }) { // route
     //     return false;
     // }
 
-    // ae_acct.slct.event_id = event_id;
+    ae_acct.slct.event_id = event_id;
 
     // let load_event_obj = events_func.handle_load_ae_obj_id__event({
     //     api_cfg: ae_acct.api, event_id:  event_id, try_cache: true