More work on the new Launcher. Wrapping up for the day.

This commit is contained in:
Scott Idem
2025-07-21 20:36:44 -04:00
parent 2e39c5f67b
commit 1d840052c7
7 changed files with 189 additions and 81 deletions

View File

@@ -60,12 +60,20 @@ const ae_app_local_data_defaults: key_val = {
cache_expired: false,
ver: ver, // ver, // '2025-04-18_1100',
ver_idb: ver_idb, // '2025-04-18_1100',
name: 'Aether - App Hub (SvelteKit 2.x Svelte 4.x)',
theme: 'light',
theme_mode: 'light',
theme_name: 'nouveau', // wintry
iframe: false,
// disable_sys_header: false,
// disable_sys_nav: false,
// disable_sys_footer: false,
browser_type: null, // Safari needs help with scrolling correctly in iframes.
title: `OSIT's Æ`, // - Dev SvelteKit`, // Æ
// debug_menu: false, // Flag show debug menu.
@@ -332,9 +340,9 @@ let ae_app_session_data_defaults: key_val = {
ver_idb: ver_idb,
log_lvl: 0,
// 'name': 'Aether App Template',
// 'theme': 'light',
// 'account_id': ae_account_id,
disable_sys_header: false,
disable_sys_nav: false,
disable_sys_footer: false,
sys_menu: {
},

View File

@@ -1080,7 +1080,7 @@ email = ${$ae_loc?.email}
window.location.reload();
}}
class="btn btn-sm m-1 preset-tonal-secondary border border-secondary-500 hover:preset-tonal-warning border border-warning-500 hover:variant-outline-warning text-error-700 hover:text-error-900 transition-all text-wrap"
class="btn btn-sm m-1 preset-tonal-secondary border-secondary-500 hover:preset-tonal-warning border-warning-500 hover:variant-outline-warning text-error-700 hover:text-error-900 transition-all text-wrap"
title="Reload and clear the page cache"
>
<!-- <span class="fas fa-sync mx-1"></span> -->

View File

@@ -151,7 +151,7 @@ if (browser) {
"
>
{#if !$ae_sess?.disable_sys_nav}
<nav
class="
submenu
@@ -176,10 +176,12 @@ if (browser) {
Events
</abbr>
</span>
{#if !$ae_sess?.disable_sys_header}
<Element_data_store
ds_code="hub__site__appshell_header"
ds_type="html"
/>
ds_code="hub__site__appshell_header"
ds_type="html"
/>
{/if}
<a
href="/"
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-success-500"
@@ -190,6 +192,7 @@ if (browser) {
</span>
</a>
</nav>
{/if}
<section
class:iframe={$ae_loc?.iframe}
@@ -240,6 +243,7 @@ if (browser) {
</section>
{#if !$ae_sess?.disable_sys_footer}
<section
class="footer_contenttext-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1 py-0.5 min-h-7"
class:ae_debug={$ae_loc.debug}
@@ -252,6 +256,7 @@ if (browser) {
/>
</section>
{/if}
</div>

View File

@@ -41,6 +41,10 @@ $slct.account_id = data.account_id;
let ae_acct = data[$slct.account_id];
// console.log(`ae_acct = `, ae_acct);
$ae_sess.disable_sys_nav = true;
$ae_sess.disable_sys_header = true;
$ae_sess.disable_sys_footer = true;
// This is a just in case check...
if (!$events_loc?.launcher) {
$events_loc.launcher = {
@@ -92,10 +96,20 @@ let lq__event_obj = $derived(liveQuery(async () => {
return results;
}));
// Event File - For Event
let lq__event_event_file_obj_li = $derived(liveQuery(async () => {
let results = await db_events.files
.where('for_id_random')
.equals($events_slct.event_id ?? '')
.sortBy('filename');
return results;
}));
// Event File - For Location
let lq__location_event_file_obj_li = $derived(liveQuery(async () => {
let results = await db_events.files
// .where('event_session_id_random')
// .where('event_location_id_random')
.where('for_id_random')
.equals($events_slct.event_location_id ?? '')
.sortBy('filename');
@@ -576,11 +590,16 @@ $effect(() => {
</title>
</svelte:head>
<div class="static max-w-(--breakpoint-xl) m-auto border border-gray-200 dark:border-gray-600 mt-12 mb-14 sm:mb-12">
<div
class="
static max-w-(--breakpoint-xl) m-auto border border-gray-200 dark:border-gray-600 mt-12 mb-14 sm:mb-12
h-full
"
>
{#if !$lq__event_obj}
<div class="flex flex-row items-center justify-center">
<div class="flex flex-row gap-1 items-center justify-center">
<span class="fas fa-spinner fa-spin mx-1"></span>
<span>Loading...</span>
</div>
@@ -614,9 +633,10 @@ $effect(() => {
<div
class="
container h-full min-w-full w-full
flex flex-row flex-wrap sm:flex-nowrap gap-0
flex flex-col sm:flex-row flex-wrap sm:flex-nowrap gap-0
items-center
justify-center
py-1 px-2
py-1 px-1
bg-gray-100
"
>
@@ -624,11 +644,14 @@ $effect(() => {
<section
id="Main-Nav-Menu"
class="event_launcher_menu
container h-full flex flex-col gap-2 py-1 px-1
container h-full
flex flex-col flex-wrap gap-1 items-center justify-start py-1 px-0.5
basis-1/5
min-w-72
min-w-56 md:min-w-64 lg:min-w-72
max-w-xs
border-r border-gray-200
border-gray-200
overflow-x-auto
overflow-y-auto
"
class:hidden={$events_loc.launcher.hide__launcher_menu}
>
@@ -643,6 +666,7 @@ $effect(() => {
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}
lq__event_location_obj={lq__event_location_obj}
@@ -669,6 +693,7 @@ $effect(() => {
container h-full flex flex-col gap-1 py-1 px-2
items-center
basis-4/5
min-w-xs
max-w-full
overflow-y-auto
"

View File

@@ -2,6 +2,7 @@
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;
@@ -15,6 +16,7 @@ interface Props {
let {
data_url,
lq__event_obj,
lq__event_event_file_obj_li,
lq__location_event_file_obj_li,
// lq__event_location_obj,
lq__event_location_obj_li,
@@ -74,67 +76,69 @@ let ae_promises: key_val = $state({
</script>
<section class="text-center space-y-1">
<h2 class="">{$lq__event_obj?.cfg_json.short_name ?? 'loading...'}</h2>
<button
onclick={() => {
$events_loc.launcher.show_content__hidden_files = !$events_loc.launcher.show_content__hidden_files;
}}
<section
class="
btn btn-sm
text-xs
py-1 px-2
preset-outlined-warning-200-800 preset-filled-warning-50-950
hover:preset-outlined-success-200-800 hover:preset-filled-success-100-900
w-1/2
transition-all
flex flex-col gap-1 items-center justify-center
text-center
w-full max-w-full
"
>
{#if $events_loc.launcher.show_content__hidden_files}
<span class="fas fa-eye-slash m-1"></span>
Hide Files
{:else}
<span class="fas fa-eye m-1"></span>
All Files?
{/if}
>
</button>
<button
onclick={() => {
$events_loc.launcher.show_content__hidden_sessions = !$events_loc.launcher.show_content__hidden_sessions;
}}
class="
btn btn-sm
text-xs
py-1 px-2
preset-outlined-warning-200-800 preset-filled-warning-50-950
hover:preset-outlined-success-200-800 hover:preset-filled-success-100-900
w-1/2
transition-all
"
>
{#if $events_loc.launcher.show_content__hidden_sessions}
<span class="fas fa-eye-slash m-1"></span>
Hide Sessions
{:else}
<span class="fas fa-eye m-1"></span>
All Sessions?
{/if}
</button>
<!-- <h2 class="text-sm font-semibold">{$lq__event_obj?.cfg_json.short_name ?? 'loading...'}</h2> -->
{#if $lq__event_event_file_obj_li}
<div class="w-full text-center">
<!-- <div class="text-xs text-neutral-800/80">
<strong>
Event Files:
{#if $ae_loc.administrator_access}
({$lq__event_event_file_obj_li?.length}&times;)
{/if}
</strong>
</div> -->
{#each $lq__event_event_file_obj_li as event_file_obj, index}
<button
disabled={!$ae_loc.trusted_access}
onclick={() => {
// ae_promises[event_file_obj.event_file_id_random]
ae_promises[event_file_obj?.event_file_id_random] = api.download_hosted_file({
api_cfg: $ae_api,
hosted_file_id: event_file_obj?.hosted_file_id_random,
return_file: true,
filename: event_file_obj?.filename,
auto_download: true,
log_lvl: 0
});
}}
class="
btn btn-sm
text-xs w-full
preset-tonal-primary
hover:preset-tonal-success
transition-all
"
>
<span class="fas fa-file-archive m-1 text-neutral-800/80"></span>
{event_file_obj?.filename}
</button>
{/each}
</div>
{/if}
{#if $ae_loc.edit_mode}
{#if $lq__event_location_obj_li && $lq__event_location_obj_li.length > 0}
<div class="text-xs"><strong>
<div class="text-xs text-neutral-800/80"><strong>
Locations:
{#if $ae_loc.administrator_access}
({$lq__event_location_obj_li?.length})
({$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}
<span class="fas fa-check text-green-500"></span>
<span class="fas fa-check text-green-500/80"></span>
{/await}
</strong></div>
<select
@@ -217,13 +221,17 @@ let ae_promises: key_val = $state({
{/each}
</select>
{:else}
<p class="text-sm">
<div class="text-sm">
No locations found.
Event ID: {$lq__event_obj?.id}
</p>
(Event ID: {$lq__event_obj?.id})
</div>
{/if}
{/if}
{#if $lq__location_event_file_obj_li}
<div class="w-full text-center">
{#each $lq__location_event_file_obj_li as event_file_obj, index}
<button
disabled={!$ae_loc.trusted_access}
@@ -238,18 +246,25 @@ let ae_promises: key_val = $state({
log_lvl: 0
});
}}
class="btn btn-sm preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 text-xs py-1 px-2 w-full"
class="
btn btn-sm
text-xs w-full
preset-tonal-primary
hover:preset-tonal-success
transition-all
"
>
<span class="fas fa-file-archive m-1"></span>
{event_file_obj?.filename}aa
<span class="fas fa-file-archive m-1 text-neutral-800/80"></span>
{event_file_obj?.filename}
</button>
{/each}
</div>
{/if}
</section>
<section class="text-center">
<section class="text-center w-full max-w-full">
{#if $lq__event_session_obj_li}
<Menu_session_list_menu
@@ -260,4 +275,50 @@ let ae_promises: key_val = $state({
</section>
<!-- {/await} -->
{#if $ae_loc.edit_mode}
<section class="flex flex-row gap-2 items-center justify-center w-full max-w-full">
<button
onclick={() => {
$events_loc.launcher.show_content__hidden_files = !$events_loc.launcher.show_content__hidden_files;
}}
class="
btn btn-sm
text-xs
w-1/2 max-w-1/2
preset-tonal-warning
hover:preset-tonal-success
transition-all
"
>
{#if $events_loc.launcher.show_content__hidden_files}
<span class="fas fa-eye-slash m-1 text-neutral-800/80"></span>
Hide Files
{:else}
<span class="fas fa-eye m-1 text-neutral-800/80"></span>
All Files
{/if}
</button>
<button
onclick={() => {
$events_loc.launcher.show_content__hidden_sessions = !$events_loc.launcher.show_content__hidden_sessions;
}}
class="
btn btn-sm
text-xs
w-1/2 max-w-1/2
preset-tonal-warning
hover:preset-tonal-success
transition-all
"
>
{#if $events_loc.launcher.show_content__hidden_sessions}
<span class="fas fa-eye-slash m-1 text-neutral-800/80"></span>
Hide Sessions
{:else}
<span class="fas fa-eye m-1 text-neutral-800/80"></span>
All Sessions
{/if}
</button>
</section>
{/if}

View File

@@ -50,20 +50,20 @@ let hover_timer: any = $state(null);
{#if $lq__event_session_obj_li && $lq__event_session_obj_li.length > 0}
<div class="text-xs"><strong>
<div class="text-xs text-neutral-800/80 w-full max-w-full"><strong>
Sessions:
{#if $ae_loc.administrator_access}
({$lq__event_session_obj_li?.length})
({$lq__event_session_obj_li?.length}&times;)
{/if}
<!-- 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"></span>
<span class="fas fa-check text-green-500/80"></span>
{/await}
</strong></div>
<ul
class="space-y-1"
class="space-y-1 w-full max-w-full"
>
{#each $lq__event_session_obj_li as event_session_obj}
<li>
@@ -133,7 +133,16 @@ let hover_timer: any = $state(null);
$events_sess.launcher.controller_trigger_send = true;
}
}}
class="btn btn-sm hover:preset-filled-primary-500 overflow-hidden text-sm w-full max-w-full text-left transition-all rounded-md flex flex-row justify-between items-center"
class="
btn btn-sm hover:preset-filled-primary-500
overflow-hidden
text-sm
w-full max-w-full
text-left
transition-all
rounded-md
flex flex-row justify-between items-center
"
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}
class:border-secondary-500={$events_slct.event_session_id != event_session_obj?.id}

View File

@@ -31,9 +31,9 @@ if (log_lvl) {
}
if (log_lvl > 1) {
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}`);
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;