Lots of work on the new Launcher. Also general reorganizing of files.
This commit is contained in:
Scott Idem
231
src/routes/events/[event_id]/(launcher)/+layout.svelte
Normal file
231
src/routes/events/[event_id]/(launcher)/+layout.svelte
Normal file
@@ -0,0 +1,231 @@
|
||||
<script lang="ts">
|
||||
/** @type {import('./$types').LayoutData} */
|
||||
export let data: any;
|
||||
let log_lvl = 0;
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { liveQuery } from "dexie";
|
||||
import { ae_util } from '$lib/ae_utils';
|
||||
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, events_trig } from '$lib/ae_events_stores';
|
||||
|
||||
import Event_launcher_menu from './launcher_menu.svelte';
|
||||
import Event_launcher_session_view from './launcher_session_view.svelte';
|
||||
|
||||
// import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
|
||||
|
||||
// import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
||||
// import { events_loc, events_slct } from '$lib/ae_events_stores';
|
||||
|
||||
|
||||
|
||||
// Variables
|
||||
// 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: ${data.params.event_id}`);
|
||||
|
||||
$events_slct.event_id = data.params.event_id;
|
||||
|
||||
console.log(`event_location_id: ${data.params.event_location_id}`);
|
||||
|
||||
$events_slct.event_location_id = data.params.event_location_id;
|
||||
|
||||
console.log(`ae_acct.slct.event_id:`, ae_acct.slct.event_id);
|
||||
$events_slct.event_id = ae_acct.slct.event_id;
|
||||
// $events_slct.event_obj = ae_acct.slct.event_obj;
|
||||
$events_slct.event_location_obj_li = ae_acct.slct.event_location_obj_li ?? [''];
|
||||
$events_slct.id_li__event_location = ae_acct.slct.id_li__event_location ?? [''];
|
||||
console.log(`$events_slct.event_location_obj_li:`, $events_slct.event_location_obj_li);
|
||||
|
||||
// Event
|
||||
$: lq__event_obj = liveQuery(async () => {
|
||||
let results = await db_events.events
|
||||
.get($events_slct.event_id);
|
||||
|
||||
return results;
|
||||
});
|
||||
|
||||
// Event File - For Location
|
||||
$: lq__location_event_file_obj_li = liveQuery(async () => {
|
||||
let results = await db_events.files
|
||||
// .where('event_session_id_random')
|
||||
.where('for_id_random')
|
||||
.equals($events_slct.event_location_id ?? '')
|
||||
.sortBy('filename');
|
||||
|
||||
return results;
|
||||
});
|
||||
|
||||
// Event Location
|
||||
$: lq__event_location_obj = liveQuery(async () => {
|
||||
let results = await db_events.locations
|
||||
.get($events_slct.event_location_id);
|
||||
|
||||
return results;
|
||||
});
|
||||
|
||||
$: lq__event_location_obj_li = liveQuery(async () => {
|
||||
let results = await db_events.locations
|
||||
.where('event_id')
|
||||
.equals($events_slct.event_id)
|
||||
.sortBy('name');
|
||||
|
||||
return results;
|
||||
});
|
||||
|
||||
// Event Session
|
||||
$: lq__event_session_obj = liveQuery(async () => {
|
||||
let results = await db_events.sessions
|
||||
.get($events_slct.event_session_id);
|
||||
|
||||
return results;
|
||||
});
|
||||
|
||||
$: lq__event_session_obj_li = liveQuery(async () => {
|
||||
let results = await db_events.sessions
|
||||
// .bulkGet(event_session_id_random_li);
|
||||
.where('event_location_id')
|
||||
.equals($events_slct.event_location_id)
|
||||
.sortBy('name');
|
||||
|
||||
return results;
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
console.log('Events - Launcher: +layout.svelte');
|
||||
// Hide the AppShell shell header (id="shell-header") and footer
|
||||
document.getElementById('shell-header').classList.add('hidden');
|
||||
document.getElementById('shell-footer').classList.add('hidden');
|
||||
});
|
||||
console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<svelte:head>
|
||||
<title>
|
||||
Launcher:
|
||||
{ae_util.shorten_string({ string: $lq__event_obj?.name ?? '', max_length: 20, begin_length: 10, end_length: 4 })}
|
||||
({$lq__event_obj?.event_id ?? 'loading...'}) - Pres Mgmt - {$ae_loc?.title}
|
||||
</title>
|
||||
</svelte:head>
|
||||
|
||||
{#if !$lq__event_obj}
|
||||
<div class="flex flex-row items-center justify-center">
|
||||
<span class="fas fa-spinner fa-spin mx-1"></span>
|
||||
<span>Loading...</span>
|
||||
</div>
|
||||
{:else}
|
||||
<header id="Main-Header" class="flex flex-row items-center justify-evenly">
|
||||
<h3 class="h4 text-center italic">Æ Presentation Launcher</h3>
|
||||
<h2 class="h3 text-center">{$lq__event_obj?.name}</h2>
|
||||
<h3 class="h4 text-center italic">{$lq__event_location_obj?.name}
|
||||
{$events_slct.event_location_id}
|
||||
</h3>
|
||||
</header>
|
||||
{/if}
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- The menu should be to the left of the main session view. -->
|
||||
<div
|
||||
class="
|
||||
container h-full min-w-full w-full
|
||||
flex flex-row flex-wrap sm:flex-nowrap gap-0
|
||||
justify-center
|
||||
py-1 px-2 pb-16
|
||||
bg-gray-100
|
||||
"
|
||||
>
|
||||
|
||||
<section
|
||||
id="Main-Nav-Menu"
|
||||
class="event_launcher_menu
|
||||
container h-full flex flex-col gap-2 py-1 px-1
|
||||
basis-1/5
|
||||
min-w-72
|
||||
max-w-xs
|
||||
border-r border-gray-200
|
||||
"
|
||||
>
|
||||
<!-- {#await $events_slct.id_li__event_location}
|
||||
Loading location list... a
|
||||
{:then event_location_obj_li} -->
|
||||
<!-- {#if $lq__event_obj && $lq__event_location_obj_li && $lq__event_session_obj_li && event_location_obj_li && event_location_obj_li.length > 0} -->
|
||||
{#if $lq__event_obj && $lq__event_location_obj_li}
|
||||
<Event_launcher_menu
|
||||
bind:data_url={data.url}
|
||||
|
||||
lq__event_obj={lq__event_obj}
|
||||
|
||||
lq__location_event_file_obj_li={lq__location_event_file_obj_li}
|
||||
|
||||
lq__event_location_obj={lq__event_location_obj}
|
||||
lq__event_location_obj_li={lq__event_location_obj_li}
|
||||
|
||||
lq__event_session_obj={lq__event_session_obj}
|
||||
lq__event_session_obj_li={lq__event_session_obj_li}
|
||||
>
|
||||
</Event_launcher_menu>
|
||||
{:else}
|
||||
<div class="flex flex-row items-center justify-center">
|
||||
<span class="fas fa-spinner fa-spin mx-1"></span>
|
||||
<span>Loading location list...</span>
|
||||
</div>
|
||||
{/if}
|
||||
<!-- {/await} -->
|
||||
<!-- Root: slct Location ID: {$events_slct.event_location_id ?? '-- not set --'} -->
|
||||
</section>
|
||||
|
||||
<section
|
||||
id="Main-Content"
|
||||
class="event_launcher_main
|
||||
container h-full flex flex-col gap-1 py-1 px-2
|
||||
items-center
|
||||
basis-4/5
|
||||
max-w-full
|
||||
"
|
||||
>
|
||||
<!-- {#if $events_trigger == 'load__event_session_obj' && $events_slct.event_session_id}
|
||||
<Event_launcher_session_view
|
||||
slct_event_session_id={$events_slct.event_session_id}
|
||||
|
||||
lq__event_location_obj={lq__event_location_obj}
|
||||
lq__event_location_obj_li={lq__event_location_obj_li}
|
||||
lq__event_session_obj={lq__event_session_obj}
|
||||
lq__event_session_obj_li={lq__event_session_obj_li}
|
||||
>
|
||||
</Event_launcher_session_view>
|
||||
{/if} -->
|
||||
<!-- {$lq__event_session_obj?.name} -->
|
||||
|
||||
{#if !$events_slct.event_location_id}
|
||||
<div class="flex flex-row items-center justify-center">
|
||||
<span class="fas fa-exclamation mx-1"></span>
|
||||
<span>You must select a location first</span>
|
||||
<span class="fas fa-exclamation mx-1"></span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $events_slct.event_session_id && $lq__event_session_obj}
|
||||
<Event_launcher_session_view
|
||||
slct_event_session_id={$events_slct.event_session_id}
|
||||
|
||||
lq__event_location_obj={lq__event_location_obj}
|
||||
|
||||
lq__event_session_obj={lq__event_session_obj}
|
||||
>
|
||||
</Event_launcher_session_view>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<slot />
|
||||
Reference in New Issue
Block a user