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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/ae_events_stores.ts
View File

@@ -114,7 +114,14 @@ let events_local_data_struct: key_val = {
qry_limit__presenters: 75,
qry_limit__sessions: 50,
hide__launcher_header: false,
hide__launcher_menu: true,
hide__launcher_footer: false,
hide__modal_header_title: false,
hide_drawer__debug: true,
hide__ws_element: true,
hide__ws_form: true,
hide__ws_messages: true,
hide__ws_commands: true,

7
src/lib/element_websocket_v2.svelte
View File

@@ -12,6 +12,7 @@ interface Props {
type?: null|string; // msg, cmd, json, hello, bye
trigger_send?: any;
classes?: string;
hide__ws_element?: boolean;
hide__ws_form?: boolean;
hide__ws_messages?: boolean;
hide__ws_commands?: boolean;
@@ -34,6 +35,7 @@ let {
type = null,
trigger_send = $bindable(null),
classes = 'container p-1 bg-pink-100 text-xs mx-auto pb-16 mb-20 sm:mb-12 md:mb-8',
hide__ws_element = $bindable(false),
hide__ws_form = $bindable(true),
hide__ws_messages = $bindable(false),
hide__ws_commands = $bindable(false),
@@ -310,7 +312,10 @@ function preventDefault(fn) {
</script>
<section class="ae_element__websocket container p-1 bg-pink-100 text-xs mx-auto pb-16 mt-32 mb-32 relative">
<section
class:hidden={!ws_connect || hide__ws_element}
class="ae_element__websocket container p-1 bg-pink-100 text-xs mx-auto pb-16 mt-32 mb-32 relative"
>
<span class="absolute top-0 right-0 flex flex-col gap-1">
<button

104
src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
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}

206
src/routes/events/[event_id]/(launcher)/launcher_cfg.svelte
View File

@@ -11,7 +11,14 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
</script>
<div class="flex flex-row items-center justify-between">
<div
class="
flex flex-col gap-1 items-center justify-start
w-full max-w-md
"
>
<div class="flex flex-row items-center justify-between w-full">
<h2
class="text-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400"
>
@@ -28,11 +35,11 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
</div>
<hr>
<hr class="my-2 border-gray-300 dark:border-gray-600" />
<section class="controller">
<section class="controller w-full">
<h3
class="text-center mb-4 text-sm font-semibold"
class="text-center mb-2 text-sm font-semibold"
>
<button
onclick={() => {
@@ -123,17 +130,20 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
</div>
</section>
<hr>
<hr class="my-2 border-gray-300 dark:border-gray-600" />
<section class="screen_saver w-full">
<h3
class="text-center mb-4 text-sm font-semibold"
class="text-center mb-2 text-sm font-semibold w-full"
>
Screen Saver
</h3>
</section>
<hr>
<hr class="my-2 border-gray-300 dark:border-gray-600" />
<!-- App Modes: default (browser), onsite (browser onsite), native (Electron app onsite) -->
@@ -146,9 +156,9 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
* native Electron caching and open method (download to cache, copy and then open)
* URL: new browser window
-->
<section class="app_modes">
<section class="app_modes w-full">
<h3
class="text-center mb-4 text-sm font-semibold"
class="text-center mb-2 text-sm font-semibold"
>
<button
onclick={() => {
@@ -167,10 +177,11 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
</h3>
<div
class="grid grid-cols-2 gap-2"
class="flex flex-col gap-1 items-center justify-start w-full"
class:hidden={!$events_loc.launcher.show_section__app_modes}
>
<div class="flex flex-row flex-wrap gap-1 items-center justify-center w-full">
{#if !$events_loc.launcher.app_mode || $events_loc.launcher.app_mode != 'default'}
<button
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
@@ -210,8 +221,9 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
Change to Onsite Mode
</button>
{/if}
</div>
<div class="flex flex-row flex-wrap gap-1 items-center justify-center w-full">
{#if $events_loc.launcher.hide__launcher_menu}
<button
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
@@ -225,6 +237,61 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
Show Launcher Menu
</button>
{/if}
{#if !$events_loc.launcher.hide__launcher_header}
<button
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
onclick={() => {
$events_loc.launcher.hide__launcher_header = true;
// ae_event_launcher.set($ae_event_launcher);
// console.log($events_loc.launcher);
}}
title="Hide launcher header"
>
Hide Launcher Header
</button>
{/if}
{#if $events_loc.launcher.hide__launcher_header}
<button
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
onclick={() => {
$events_loc.launcher.hide__launcher_header = false;
// ae_event_launcher.set($ae_event_launcher);
// console.log($events_loc.launcher);
}}
title="Show launcher header"
>
Show Launcher Header
</button>
{/if}
{#if !$events_loc.launcher.hide__launcher_footer}
<button
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
onclick={() => {
$events_loc.launcher.hide__launcher_footer = true;
// ae_event_launcher.set($ae_event_launcher);
// console.log($events_loc.launcher);
}}
title="Hide launcher footer"
>
Hide Launcher Footer
</button>
{/if}
{#if $events_loc.launcher.hide__launcher_footer}
<button
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
onclick={() => {
$events_loc.launcher.hide__launcher_footer = false;
// ae_event_launcher.set($ae_event_launcher);
// console.log($events_loc.launcher);
}}
title="Show launcher footer"
>
Show Launcher Footer
</button>
{/if}
<!-- Show/Hide Launcher Menu -->
{#if !$events_loc.launcher.hide__launcher_menu}
<button
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
@@ -238,21 +305,132 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
Hide Launcher Menu
</button>
{/if}
<!-- Show/Hide Session Start/End Datetimes hide__session_datetimes -->
{#if !$events_loc.launcher.hide__session_datetimes}
<button
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
onclick={() => {
$events_loc.launcher.hide__session_datetimes = true;
// ae_event_launcher.set($ae_event_launcher);
// console.log($events_loc.launcher);
}}
title="Hide session start/end datetimes"
>
Hide Session Datetimes
</button>
{/if}
{#if $events_loc.launcher.hide__session_datetimes}
<button
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
onclick={() => {
$events_loc.launcher.hide__session_datetimes = false;
// ae_event_launcher.set($ae_event_launcher);
// console.log($events_loc.launcher);
}}
title="Show session start/end datetimes"
>
Show Session Datetimes
</button>
{/if}
<button
type="button"
onclick={() => {
if ($events_loc.launcher.time_format == 'time_12_short') {
// $events_loc.launcher.datetime_format = 'datetime_long';
$events_loc.launcher.time_format = 'time_short';
$events_loc.launcher.time_hours = 24;
} else {
$events_loc.launcher.time_format = 'time_12_short';
// $events_loc.launcher.datetime_format = 'datetime_12_long';
$events_loc.launcher.time_hours = 12;
}
}}
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
>
Time Format:
{#if $events_loc.launcher.time_format == 'time_12_short'}
12-hour
{:else}
24-hour
{/if}
</button>
<!-- Show/Hide Websocket element hide__ws_element -->
{#if !$events_loc.launcher.hide__ws_element}
<button
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
onclick={() => {
$events_loc.launcher.hide__ws_element = true;
// ae_event_launcher.set($ae_event_launcher);
// console.log($events_loc.launcher);
}}
title="Hide WebSocket element"
>
Hide WebSocket Element
</button>
{/if}
{#if $events_loc.launcher.hide__ws_element}
<button
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
onclick={() => {
$events_loc.launcher.hide__ws_element = false;
// ae_event_launcher.set($ae_event_launcher);
// console.log($events_loc.launcher);
}}
title="Show WebSocket element"
>
Show WebSocket Element
</button>
{/if}
<!-- Show/Hide modal header title hide__modal_header_title -->
{#if !$events_loc.launcher.hide__modal_header_title}
<button
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
onclick={() => {
$events_loc.launcher.hide__modal_header_title = true;
// ae_event_launcher.set($ae_event_launcher);
// console.log($events_loc.launcher);
}}
title="Hide modal header title"
>
Hide Modal Header Title
</button>
{/if}
{#if $events_loc.launcher.hide__modal_header_title}
<button
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
onclick={() => {
$events_loc.launcher.hide__modal_header_title = false;
// ae_event_launcher.set($ae_event_launcher);
// console.log($events_loc.launcher);
}}
title="Show modal header title"
>
Show Modal Header Title
</button>
{/if}
</div>
</div>
</section>
<section class="local_cfg_refresh w-full">
<h3
class="text-center mb-4 text-sm font-semibold"
class="text-center mb-2 text-sm font-semibold"
>
Local Config Refresh
</h3>
</section>
<hr />
<hr class="my-2 border-gray-300 dark:border-gray-600" />
<div class="text-center">
@@ -265,3 +443,5 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
<!-- Debug -->
</button>
</div>
</div>

1
src/routes/events/[event_id]/(launcher)/launcher_file_cont.svelte
View File

@@ -260,6 +260,7 @@ async function handle_open_file() {
flex flex-col md:flex-row flex-wrap
gap-1 items-center
max-w-full
transition-all
"
class:justify-between={!hide_meta}
class:justify-center={hide_meta}

8
src/routes/events/[event_id]/(launcher)/launcher_session_view.svelte
View File

@@ -28,6 +28,7 @@ import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$
import { db_events } from "$lib/ae_events/db_events";
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';
import { hide } from '@popperjs/core';
// let load_event_session_obj = events_func.load_ae_obj_id__event_session({
@@ -239,6 +240,7 @@ let ae_promises: key_val = $state({});
<header class="event_session_about text-center border-b-2 border-gray-400 flex flex-row flex-wrap gap-2 items-center justify-between">
<h3
class:hidden={!$lq__event_session_obj?.start_datetime || $events_loc.launcher.hide__session_datetimes}
class="shrink event_session_datetimes"
>
<button
@@ -267,7 +269,11 @@ let ae_promises: key_val = $state({});
</button>
</h3>
<span class="grow flex flex-row gap-2 items-center justify-end">
<span
class:justify-between={$events_loc.launcher.hide__session_datetimes}
class:justify-end={!$events_loc.launcher.hide__session_datetimes}
class="grow flex flex-row gap-2 items-center"
>
<h2
class="shrink text-xl"
title={`Name: ${$lq__event_session_obj.name}\nType: ${$lq__event_session_obj.type_code} \nCode: ${$lq__event_session_obj.code} \nID: ${$lq__event_session_obj.event_session_id_random} \nStart Date/Time: ${ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, 'week_long')} ${ae_util.iso_datetime_formatter($lq__event_session_obj.start_datetime, $events_loc.launcher.time_format)} \nEnd Date/Time: ${ae_util.iso_datetime_formatter($lq__event_session_obj.end_datetime, $events_loc.launcher.time_format)}`}