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

Finally working on the Launcher piece again. Getting it updated to match the standards for everything else.

Browse Source
This commit is contained in:
Scott Idem
2025-09-17 13:40:57 -04:00
parent b1aae55900
commit 186923671d
4 changed files with 212 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -667,18 +667,21 @@ $effect(() => {
<!-- {#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} -->
<Launcher_menu
bind:data_url={data.url}
data_url={data.url}
lq__event_obj={lq__event_obj}
lq__event_event_file_obj_li={lq__event_event_file_obj_li}
lq__location_event_file_obj_li={lq__location_event_file_obj_li}
slct__event_file_id={$events_slct.event_file_id}
lq__event_location_obj={lq__event_location_obj}
lq__event_location_obj_li={lq__event_location_obj_li}
lq__event_location_obj={lq__event_location_obj}
slct__event_location_id={$events_slct.event_location_id}
lq__event_session_obj={lq__event_session_obj}
lq__event_session_obj_li={lq__event_session_obj_li}
lq__event_session_obj={lq__event_session_obj}
slct__event_session_id={$events_slct.event_session_id}
>
</Launcher_menu>
<!-- {:else}

42
src/routes/events/[event_id]/(launcher)/launcher_menu.svelte
View File

@@ -1,32 +1,44 @@
<script lang="ts">
interface Props {
data_url: any;
lq__event_obj: any;
lq__event_event_file_obj_li: any;
lq__location_event_file_obj_li: any;
// lq__event_location_obj: any;
// export let lq__event_location_obj_li: any;
slct__event_file_id?: string|null;
lq__event_location_obj_li: any;
// lq__event_session_obj: any;
// export let lq__event_session_obj_li: any;
lq__event_location_obj?: any;
slct__event_location_id?: string|null;
lq__event_session_obj_li: any;
lq__event_session_obj?: any;
slct__event_session_id?: string|null;
log_lvl?: number;
}
let {
data_url,
lq__event_obj,
lq__event_event_file_obj_li,
lq__location_event_file_obj_li,
// lq__event_location_obj,
slct__event_file_id = $bindable(null),
lq__event_location_obj_li,
// lq__event_session_obj,
lq__event_location_obj,
slct__event_location_id = $bindable(null),
lq__event_session_obj_li,
lq__event_session_obj,
slct__event_session_id = $bindable(null),
log_lvl = $bindable(0),
}: Props = $props();
// *** Import Svelte specific
import { goto } from '$app/navigation';
// import { goto } from '$app/navigation';
// *** Import other supporting libraries
// import { liveQuery } from "dexie";
@@ -45,10 +57,11 @@ import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';
import Menu_location_list_menu from './menu_location_list.svelte';
import Menu_session_list_menu from './menu_session_list.svelte';
let slct_event_location_id: string = $state($events_slct.event_location_id);
// let slct_event_location_id: string = $state($events_slct.event_location_id);
// *** Functions and Logic
@@ -129,7 +142,14 @@ let ae_promises: key_val = $state({
{#if $ae_loc.edit_mode}
<div
<Menu_location_list_menu
data_url={data_url}
lq__event_location_obj_li={lq__event_location_obj_li}
slct_event_location_id={$events_slct.event_location_id}
/>
{/if}
<!-- <div
class="
w-full max-w-full
flex flex-row gap-1 items-center justify-center
@@ -141,7 +161,6 @@ let ae_promises: key_val = $state({
{#if $ae_loc.administrator_access}
({$lq__event_location_obj_li?.length}&times;)
{/if}
<!-- This should fade out once the data is loaded. -->
{#await ae_promises[slct_event_location_id]}
<span class="fas fa-spinner fa-spin text-blue-500"></span>
{:then result}
@@ -234,7 +253,7 @@ let ae_promises: key_val = $state({
</div>
{/if}
</div>
{/if}
{/if} -->
@@ -277,6 +296,7 @@ let ae_promises: key_val = $state({
<Menu_session_list_menu
data_url={data_url}
lq__event_session_obj_li={lq__event_session_obj_li}
slct_event_session_id={$events_slct.event_session_id}
/>
{/if}

155
src/routes/events/[event_id]/(launcher)/menu_location_list.svelte Normal file
View File

@@ -0,0 +1,155 @@
<script lang="ts">
interface Props {
data_url: any;
lq__event_location_obj_li: any;
slct_event_location_id: string|null;
log_lvl?: number;
}
let {
data_url,
lq__event_location_obj_li,
slct_event_location_id = null,
log_lvl = $bindable(0),
}: Props = $props();
// *** Import Svelte specific
import { goto } from '$app/navigation';
// import { liveQuery } from "dexie";
// import { tick } from 'svelte';
// *** Import other supporting libraries
// *** Import Aether specific variables and functions
import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils/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 } from '$lib/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';
// export let slct_event_session_id: any;
// *** Functions and Logic
let ae_promises: key_val = $state({
slct_event_location_id: null,
});
// let hover_timer_wait = 1000;
// let hover_timer: any = $state(null);
</script>
<div
class="
w-full max-w-full
flex flex-row flex-wrap gap-1 items-center justify-center
"
>
{#if $lq__event_location_obj_li && $lq__event_location_obj_li.length > 0}
<div class="text-xs text-neutral-800/80">
<strong>
Location:
<span class:hidden={!$ae_loc.trusted_access || !$ae_loc.edit_mode}>
({$lq__event_location_obj_li?.length}&times;)
</span>
<!-- This should fade out once the data is loaded. -->
{#await ae_promises[slct_event_location_id]}
<span class="fas fa-spinner fa-spin text-blue-500"></span>
{:then result}
<span class="fas fa-check text-green-500/80"></span>
{/await}
</strong>
</div>
<select
class="select text-xs p-1 max-w-42"
bind:value={slct_event_location_id}
onchange={async () => {
// console.log(`slct_event_location_id:`, slct_event_location_id);
console.log('Remove fields from the URL.');
// data_url.searchParams.delete('location_id');
data_url.searchParams.delete('presentation_id');
data_url.searchParams.delete('presenter_id');
data_url.searchParams.delete('session_id');
// let url_location_id = slct_event_location_id;
// data_url.searchParams.set('location_id', url_location_id);
let new_url = `/events/${$events_slct.event_id}/launcher`;
if (slct_event_location_id) {
$events_loc.launcher.slct.event_location_id = slct_event_location_id;
$events_slct.event_location_id = slct_event_location_id;
$events_slct.id_li__event_session = [];
ae_promises[slct_event_location_id] = events_func.load_ae_obj_li__event_session({
api_cfg: $ae_api,
for_obj_type: 'event_location',
for_obj_id: $events_slct.event_location_id,
inc_file_li: true,
inc_presentation_li: true,
inc_presenter_li: true,
enabled: $events_loc.launcher.show_content__enabled_sessions ? 'all' : 'enabled',
hidden: $events_loc.launcher.show_content__hidden_sessions ? 'all' : 'not_hidden',
limit: 49,
try_cache: true,
log_lvl: 1,
})
.then(async function (load_results) {
console.log(`load_results = `, load_results);
let event_session_id_li = [];
let tmp_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
for (let i = 0; i < load_results.length; i++) {
let event_session_obj = load_results[i];
let event_session_id_random = event_session_obj.event_session_id_random;
tmp_li.push(event_session_id_random);
}
event_session_id_li = tmp_li;
console.log(`event_session_id_li:`, event_session_id_li);
$events_slct.id_li__event_session = event_session_id_li;
return load_results;
});
new_url = `/events/${$events_slct.event_id}/launcher/${$events_slct.event_location_id}`;
} else {
// This will hide the selected session if the location is changed to false.
// WARNING: This may need to be commented out later.
// slct_event_session_id = null;
$events_loc.launcher.slct.event_location_id = null;
$events_slct.event_location_id = null;
$events_loc.launcher.slct.event_session_id = null;
$events_slct.event_session_id = null;
// WARNING: This may need to be commented out later.
}
goto(new_url, {replaceState: true});
// goto(new_url, {replaceState: false});
}}
>
<option value="" class="italic text-surface-800-200">
-- select --
</option>
{#each $lq__event_location_obj_li as event_location_obj}
<option
value={event_location_obj?.id}
>
{event_location_obj?.name}
</option>
{/each}
</select>
{:else}
<div class="text-sm">
No locations found.
<!-- (Event ID: {$lq__event_obj?.id}) -->
</div>
{/if}
</div>

37
src/routes/events/[event_id]/(launcher)/menu_session_list.svelte
View File

@@ -3,12 +3,14 @@ interface Props {
data_url: any;
// export let lq__event_session_obj: any;
lq__event_session_obj_li: any;
slct_event_session_id: string|null;
log_lvl?: number;
}
let {
data_url,
lq__event_session_obj_li,
slct_event_session_id = null,
log_lvl = $bindable(0),
}: Props = $props();
@@ -38,16 +40,10 @@ let ae_promises: key_val = $state({
let hover_timer_wait = 1000;
let hover_timer: any = $state(null);
</script>
<!-- <span
class="text-sm font-bold"
>
{$lq__event_session_obj?.name}
</span> -->
<div
class="
w-full max-w-full
@@ -55,18 +51,22 @@ let hover_timer: any = $state(null);
"
>
{#if $lq__event_session_obj_li && $lq__event_session_obj_li.length > 0}
<div class="text-xs text-neutral-800/80"><strong>
<div class="text-xs text-neutral-800/80">
<strong>
Sessions:
{#if $ae_loc.administrator_access}
({$lq__event_session_obj_li?.length}&times;)
{/if}
<span class:hidden={!$ae_loc.trusted_access || !$ae_loc.edit_mode}>
({$lq__event_session_obj_li?.length}&times;)
</span>
<!-- This should fade out once the data is loaded. -->
{#await ae_promises.slct_event_session_id}
<span class="fas fa-spinner fa-spin text-blue-500"></span>
{:then result}
<span class="fas fa-check text-green-500/80"></span>
{/await}
</strong></div>
</strong>
</div>
<ul
class="space-y-1"
>
@@ -80,7 +80,7 @@ let hover_timer: any = $state(null);
$events_slct.event_session_id = null;
await tick();
// $events_slct.event_session_id = event_session_obj?.id;
slct_event_session_id = event_session_obj?.id;
$events_slct.event_session_id = event_session_obj?.id;
data_url.searchParams.set('session_id', event_session_obj?.id);
$events_slct.event_session_obj = event_session_obj;
@@ -144,9 +144,9 @@ let hover_timer: any = $state(null);
text-sm
w-full max-w-full
text-left
transition-all
rounded-md
flex flex-row justify-between items-center
flex flex-row items-center justify-start
transition-all
"
class:preset-filled-primary-500={$events_slct.event_session_id === event_session_obj?.id}
class:preset-tonal-secondary={$events_slct.event_session_id != event_session_obj?.id}
@@ -157,8 +157,9 @@ let hover_timer: any = $state(null);
class:dim={event_session_obj?.hide}
title={event_session_obj?.name}
>
<span
class="border-r border-gray-400 pr-1"
class="border-r border-surface-400-600 pr-1 w-28 max-w-28"
>
{#if $events_slct.event_session_id === event_session_obj?.id}
<span class="fas fa-calendar-check"></span>
@@ -177,9 +178,11 @@ let hover_timer: any = $state(null);
{ae_util.iso_datetime_formatter(event_session_obj?.start_datetime, $events_loc.launcher.time_format)}
</span>
</span>
<span class="text-xs">
<span class="text-xs max-w-44">
{event_session_obj?.name}
</span>
</button>
</li>
{/each}