The posters look pretty good now. A lot more is configurable.

This commit is contained in:
Scott Idem
2025-10-15 12:52:27 -04:00
parent f459c09fbc
commit 6b8f4d54ed
6 changed files with 299 additions and 34 deletions

View File

@@ -124,6 +124,34 @@ let lq__event_obj = $derived(liveQuery(async () => {
return results;
}));
// Event Device
let lq__event_device_obj = $derived(liveQuery(async () => {
if (log_lvl) {
console.log(`lq__event_device_obj: event_device_id = ${$events_slct?.event_device_id}`);
}
let results = await db_events.device
.get($events_slct.event_device_id);
if (log_lvl) {
console.log(`lq__event_device_obj: results = `, results);
}
// Check if results are different than the current session version stored under $events_slct
if ($events_slct.event_device_obj && results) {
if (JSON.stringify($events_slct.event_device_obj) !== JSON.stringify(results)) {
$events_slct.event_device_obj = { ...results};
if (log_lvl) {
console.log(`Device slct stored version has changed for ID = ${$events_slct.event_device_id}`, $events_slct.event_device_obj);
}
} else {
if (log_lvl > 1) {
console.log(`Device slct stored version has not changed for ID = ${$events_slct.event_device_id}`);
}
}
}
return results;
}));
// Event File - For Event
let lq__event_event_file_obj_li = $derived(liveQuery(async () => {
let results = await db_events.file
@@ -699,23 +727,23 @@ $effect(() => {
</title>
</svelte:head>
<!-- max-w-(--breakpoint-xl) -->
<!-- outline-2 outline-red-500 -->
<div
class="
static
m-auto
border-x border-gray-200 dark:border-gray-600
mt-12 mb-14 sm:mb-12
mt-4 mb-16 sm:mb-12
h-full
w-full max-w-7xl
outline
transition-all
"
>
<header
id="Main-Header"
class:hidden={$events_loc.launcher.hide__launcher_header}
class="
z-20
absolute top-0 left-0 right-0
@@ -913,6 +941,7 @@ $effect(() => {
<footer
id="Main-Footer"
class:hidden={$events_loc.launcher.hide__launcher_footer}
class="
z-20
absolute bottom-0 left-0 right-0
@@ -935,24 +964,25 @@ $effect(() => {
[Help]
</div> -->
<div class="slct_location_name">
<div class="slct_location_name transition-all duration-1000">
<span class="fas fa-map-marker-alt"></span>
{$lq__event_location_obj?.name}
{$lq__event_device_obj?.name}
</div>
<span
class="*:hover:inline px-1 rounded-md"
class:preset-tonal-warning={!$events_loc.launcher.ws_connect}
class:preset-tonal-success={$events_loc.launcher.ws_connect}
class="group px-1 rounded-md transition-all duration-1000"
>
{#if $events_sess.launcher.ws_connect_status == 'connected'}
<span class="fas fa-wifi mx-1"></span>
<span class="hidden">
<span class="hidden group-hover:inline">
WebSocket Connected
</span>
{:else}
<span class="fas fa-times mx-1"></span>
<span class="hidden">
<span class="hidden group-hover:inline">
WebSocket Disconnected
</span>
{/if}
@@ -1015,7 +1045,7 @@ $effect(() => {
easing: sineIn
}
}
width={'min-w-80 w-1/2 max-w-(--breakpoint-lg)'}
width={'w-md'}
bind:hidden={$events_loc.launcher.hide_drawer__cfg}
id="sidebar1"
>
@@ -1023,9 +1053,9 @@ $effect(() => {
<Launcher_cfg></Launcher_cfg>
<hr />
<hr class="my-2 border-gray-300 dark:border-gray-600" />
<div class="flex flex-row flex-wrap gap-0.5 items-center justify-center">
<div class="flex flex-row flex-wrap gap-0.5 items-center justify-center max-w-md">
<a href="/events/{$events_slct.event_id}" class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500">
<span class="fas fa-search m-1"></span>
Session Search
@@ -1051,6 +1081,7 @@ $effect(() => {
class="btn btn-sm variant-ghost-tertiary hover:variant-filled-tertiary"
>Test 2</button> -->
</div>
</Drawer>
@@ -1120,7 +1151,7 @@ $effect(() => {
min-w-full
"
bodyClass='p-0 overflow-y-auto overscroll-contain'
headerClass={`fixed top-0 right-0 left-0 z-20 p-1 md:p-2 flex flex-row items-center justify-between ${$events_loc.launcher.controller == 'remote' ? 'hidden' : ''} bg-white dark:bg-gray-800 opacity-50`}
headerClass={`fixed top-0 right-0 left-0 p-1 md:p-2 flex flex-row items-center ${$events_loc.launcher.controller == 'remote' ? 'hidden' : ''} bg-white dark:bg-gray-800 opacity-50 ${$events_loc.launcher.hide__modal_header_title ? 'justify-center' : 'justify-between'}`}
footerClass='text-center'
onclose={async () => {
$events_sess.launcher.modal__open_event_file_id = null;
@@ -1141,11 +1172,14 @@ $effect(() => {
{#snippet header()}
<!-- <div class="flex flex-row items-center justify-between"> -->
<h3 class="text-lg font-semibold">
<h3
class:hidden={$events_loc.launcher.hide__modal_header_title}
class="text-lg font-semibold opacity-20 hover:opacity-100 transition-all">
{$events_sess.launcher?.modal__title ?? 'Digital Poster Display'}
</h3>
<button
type="button"
class="btn flex-row-reverse group transition-all justify-self-end"
onclick={() => {
$events_sess.launcher.modal__open_event_file_id = null;
if ($events_loc.launcher.controller == 'local_push' && $events_sess.launcher.ws_connect_status == 'connected') {
@@ -1153,8 +1187,9 @@ $effect(() => {
}}
title="Close Modal"
>
<span class="fas fa-times m-1"></span>
<span class="hidden ">Close</span>
<span class="fas fa-times my-1.5"></span>
<span class="hidden group-hover:inline">
Close</span>
</button>
<!-- </div> -->
{/snippet}
@@ -1174,10 +1209,18 @@ $effect(() => {
$events_sess.launcher.controller_trigger_send = true;
// $events_sess.launcher.modal__open = false;
}}
class="absolute top-0 right-20 m-1 p-1 btn btn-sm preset-tonal-error hover:preset-filled-error-500"
class="
absolute top-0 right-12
m-1 p-1
btn btn-sm
preset-tonal-error preset-outlined-error hover:preset-filled-success-200-800
transition-all
"
class:hidden={$events_loc.launcher.controller != 'local_push' || $events_sess.launcher.ws_connect_status != 'connected'}
title="Close the remote device's display of the poster"
>
<span class="fas fa-times m-1"></span>
<span class="fas fa-tv"></span>
Close Remote Poster Display Only
</button>
<!-- Open: {$ae_api.base_url} {$events_sess.launcher.modal__open_event_file_id} -->
@@ -1206,10 +1249,18 @@ $effect(() => {
$events_sess.launcher.controller_trigger_send = true;
// $events_sess.launcher.modal__open = false;
}}
class="absolute bottom-0 left-20 m-1 p-1 btn btn-sm preset-tonal-error hover:preset-filled-error-500"
class="
absolute bottom-0 left-12
m-1 p-1
btn btn-sm
preset-tonal-error preset-outlined-error hover:preset-filled-success-200-800
transition-all
"
class:hidden={$events_loc.launcher.controller != 'local_push' || $events_sess.launcher.ws_connect_status != 'connected'}
title="Close the remote device's display of the poster"
>
<span class="fas fa-times m-1"></span>
<span class="fas fa-tv"></span>
Close Remote Poster Display Only
</button>
@@ -1222,11 +1273,25 @@ $effect(() => {
$events_sess.launcher.modal__open_event_file_id = null;
$events_sess.launcher.modal__event_file_obj = null;
}}
class="absolute bottom-0 right-20 m-1 p-1 btn btn-sm preset-tonal-warning hover:preset-tonal-warning border border-warning-500"
class="
absolute bottom-0 right-12
m-1 p-1
btn btn-sm
preset-tonal-success preset-outlined-success hover:preset-filled-success-200-800
transition-all
"
class:hidden={!$ae_loc.trusted_access && ($events_loc.launcher.controller != 'local_push' || $events_sess.launcher.ws_connect_status != 'connected')}
title="Close this controller's local modal display of this poster"
>
<span class="fas fa-times m-1"></span>
Close Controller Poster Only
<span class="fas fa-list"></span>
Close
<!-- Controller -->
<!-- Local -->
Poster
<!-- Here -->
on This Device
<!-- Only -->
</button>
<!-- <svelte:fragment slot="footer">
@@ -1264,6 +1329,7 @@ $effect(() => {
type={'cmd'}
bind:trigger_send={$events_sess.launcher.controller_trigger_send}
bind:hide__ws_element={$events_loc.launcher.hide__ws_element}
bind:hide__ws_form={$events_loc.launcher.hide__ws_form}
bind:hide__ws_messages={$events_loc.launcher.hide__ws_messages}
bind:hide__ws_commands={$events_loc.launcher.hide__ws_commands}