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

Wrapping up for the day. Lots of tedious work on the Launcher.

Browse Source
This commit is contained in:
Scott Idem
2024-10-04 18:23:47 -04:00
parent b6cd3f59e5
commit aef469ad9d
11 changed files with 795 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,25 +3,19 @@
export let data: any;
let log_lvl = 0;
import { onMount } from 'svelte';
import { onMount, tick } from 'svelte';
import { sineIn } from 'svelte/easing';
import { liveQuery } from "dexie";
import { Drawer, Footer } from 'flowbite-svelte';
import { Drawer, Footer, Modal } from 'flowbite-svelte';
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, time } from '$lib/ae_stores';
import { events_loc, events_sess, events_slct, events_trigger, events_trig } from '$lib/ae_events_stores';
import Launcher_cfg from './launcher_cfg.svelte';
import Launcher_menu from './launcher_menu.svelte';
import Launcher_session_view from './launcher_session_view.svelte';
import Element_websocket_v2 from '$lib/element_websocket_v2.svelte';
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.
@@ -30,6 +24,21 @@ $slct.account_id = data.account_id;
let ae_acct = data[$slct.account_id];
// console.log(`ae_acct = `, ae_acct);
// This is a just in case check...
if (!$events_loc?.launcher) {
$events_loc.launcher = {
app_mode: 'default',
controller: 'local',
controller_group_code: 'launcher-00',
ws_connect: false,
hide_drawer__cfg: true,
hide_drawer__debug: true,
}
}
console.log(`event_id: ${data.params.event_id}`);
$events_slct.event_id = data.params.event_id;
@@ -99,6 +108,14 @@ $: lq__event_session_obj_li = liveQuery(async () => {
return results;
});
// $: if (!$events_sess.launcher.modal__open) {
// if ($events_loc.launcher.controller == 'local_push' && $events_sess.launcher.ws_connect_status == 'connected') {
// console.log(`Local Push Controller Command: ae_close:event_file_modal`);
// $events_sess.launcher.controller_cmd = `ae_close:event_file_modal`;
// $events_sess.launcher.controller_trigger_send = true;
// }
// }
onMount(() => {
console.log('Events - Launcher: +layout.svelte');
// Hide the AppShell shell header (id="shell-header") and footer
@@ -106,6 +123,199 @@ onMount(() => {
document.getElementById('shell-footer').classList.add('hidden');
});
console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
/* *** BEGIN *** Handle WebSocket events */
function handle_ws_conn(event) {
console.log('*** handle_ws_conn() ***');
console.log(event);
if (event.detail.status == 'connected') {
$events_sess.launcher.ws = {}; // Reset WS related values on a new connection.
$events_sess.launcher.ws.status = 'connected';
} else {
$events_sess.launcher.ws = {}; // Reset WS related values when disconnected connection.
$events_sess.launcher.ws.status = 'disconnected';
}
$events_sess.launcher = $events_sess.launcher;
}
// When this is called something seems to go wrong. It creates a loop when connected.
function handle_ws_recv(event) {
console.log('*** handle_ws_recv() ***');
console.log(event);
if (event.detail.type == 'cmd' && event.detail.cmd) {
let cmd = event.detail.cmd;
console.log(cmd);
if (cmd.startsWith('ae_load:')) {
console.log();
let cmd_parts = cmd.split(':');
let obj_parts = cmd_parts[1].split('=');
let obj_type = obj_parts[0];
let obj_id = obj_parts[1];
if (obj_type == 'event_session') {
$slct.event_session_id = obj_id;
$slct_trigger = 'event_session';
$events_sess.launcher.show_launcher_message = false;
}
} else if (cmd.startsWith('ae_open:')) {
console.log();
let cmd_parts = cmd.split(':');
let obj_parts = cmd_parts[1].split('=');
let obj_type = obj_parts[0];
let obj_id = obj_parts[1];
// NOTE: This is not finished yet.
if (obj_type == 'event_file') {
$slct.event_file_id = obj_id;
$slct_trigger = 'event_file';
$events_sess.launcher.event_file_open.open_status = 'open';
// $events_sess.launcher.show_launcher_message = false;
// NOTE: This is not finished yet.
// This should now trigger the Svelte component for the event launcher file container. Currently this does nothing. Need to bind to something or use the "events_sess.launcher" object?
// let as_modal_result = open_event_file_as_modal({event_file_id: event_file_obj.event_file_id_random, method: 'modal', filename: event_file_obj.filename, extension: event_file_obj.extension, modal_title: poster_title});
// if (as_modal_result) {
// console.log($events_sess.launcher);
// console.log(event_file_obj);
// events_sess.launcher.set({...$events_sess.launcher, ...as_modal_result});
// }
}
// NOTE: This is not finished yet.
} else if (cmd.startsWith('ae_close:')) {
console.log();
let cmd_parts = cmd.split(':');
let what = cmd_parts[1];
// let obj_type = obj_parts[0];
// let obj_id = obj_parts[1];
if (what == 'event_file_modal') {
$slct.event_file_id = null;
$slct_trigger = 'event_file';
$events_sess.launcher.event_file_open.open_status = 'close';
}
} else if (cmd.startsWith('ae_refresh:')) {
console.log();
let cmd_parts = cmd.split(':');
let what = cmd_parts[1];
// let obj_type = obj_parts[0];
// let obj_id = obj_parts[1];
if (what == 'now') {
// window.localStorage.clear();
location.reload();
} else {
console.log('OOPS? What went wrong?');
}
}
} else {
console.log('Unrecognized command');
}
}
function handle_ws_sent(event) {
console.log('*** handle_ws_sent() ***');
console.log(event);
let command = event.detail.cmd;
console.log(command);
$events_sess.launcher.controller_cmd = null;
$events_sess.launcher.controller_trigger_send = null;
}
/* *** END *** Handle WebSocket events */
$: if ($slct_trigger == 'event_file' && $slct.event_file_id && $events_sess.launcher?.event_file_open.open_status == 'open') {
$slct_trigger = null;
// handle_event_file_open();
}
$: if ($slct_trigger == 'event_file' && $events_sess.launcher?.event_file_open.open_status == 'close') {
$slct_trigger = null;
// Assuming just event file modal for now
// handle_event_file_close();
}
async function handle_event_file_open () {
let event_file_obj;
if ($slct.event_file_obj && $slct.event_file_obj.event_file_id_random) {
console.log($slct.event_file_obj);
event_file_obj = $slct.event_file_obj;
} else {
console.log('Need to look up the event file details first.');
// let get_event_file_obj_result = await get_event_file_obj({event_file_id: $slct.event_file_id});
// event_file_obj = get_event_file_obj_result;
// console.log(event_file_obj);
}
// let as_modal_result = open_event_file_as_modal({
// event_file_id: event_file_obj.event_file_id_random,
// filename: event_file_obj.filename,
// extension: event_file_obj.extension,
// modal_title: ae_util.shorten_filename(event_file_obj.filename, 75)
// });
// if (as_modal_result) {
// console.log($events_sess.launcher);
// events_sess.launcher.set({...$events_sess.launcher, ...as_modal_result});
// // $events_sess.launcher.event_file_open = as_modal_result;
// }
}
async function handle_event_file_close () {
let as_modal_result = close_event_file_as_modal({
});
if (as_modal_result) {
events_sess.launcher.set({...$events_sess.launcher, ...as_modal_result});
}
}
// Updated 2023-3-31
// export let open_event_file_as_modal = function open_event_file_as_modal({event_file_id, filename=null, extension=null, modal_title='Poster'}) {
// console.log('*** open_event_file_as_modal() ***');
// // NOTE: I can not set the ae_event_launcher values directly. Passing them back to the component and setting them there. Not ideal. This might be improved/fixed in the future?
// let launcher_modal_values = {'show_modal_file': true, 'event_file_open': {}};
// // launcher_modal_values.show_modal_file = true;
// if (extension == 'png' || extension == 'jpg') {
// launcher_modal_values.event_file_open.file_type = 'image';
// } else if (extension == 'mp4' || extension == 'mov') {
// launcher_modal_values.event_file_open.file_type = 'video';
// } else {
// return false;
// }
// launcher_modal_values.event_file_open.file_src = `/event/file/${event_file_id}/download`;
// launcher_modal_values.event_file_open.modal_title = modal_title;
// // NOTE: Be sure to set these values in the actual ae_event_launcher object!
// return launcher_modal_values;
// }
// Updated 2023-3-31
export let close_event_file_as_modal = function close_event_file_as_modal({}) {
console.log('*** close_event_file_as_modal() ***');
// NOTE: I can not set the ae_event_launcher values directly. Passing them back to the component and setting them there. Not ideal. This might be improved/fixed in the future?
let launcher_modal_values = {'show_modal_file': false, 'event_file_open': {}};
// NOTE: Be sure to set these values in the actual ae_event_launcher object!
return launcher_modal_values;
}
</script>
@@ -167,6 +377,7 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
max-w-xs
border-r border-gray-200
"
class:hidden={$events_loc.launcher.hide__launcher_menu}
>
<!-- {#await $events_slct.id_li__event_location}
@@ -174,7 +385,7 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
{: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
<Launcher_menu
bind:data_url={data.url}
lq__event_obj={lq__event_obj}
@@ -187,7 +398,7 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
lq__event_session_obj={lq__event_session_obj}
lq__event_session_obj_li={lq__event_session_obj_li}
>
</Event_launcher_menu>
</Launcher_menu>
<!-- {:else}
<div class="flex flex-row items-center justify-center">
<span class="fas fa-spinner fa-spin mx-1"></span>
@@ -197,16 +408,6 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
<!-- {/await} -->
<!-- Root: slct Location ID: {$events_slct.event_location_id ?? '-- not set --'} -->
<div class="absolute top-0 left-0 z-20 text-center">
<button
type="button"
on:click={() => ($events_loc.launcher.hide_drawer__cfg = false)}
class="btn btn-sm p-0.5 variant-soft-error hover:variant-filled-error"
>
<span class="fas fa-biohazard"></span>
</button>
</div>
</section>
<section
@@ -220,7 +421,7 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
>
<!-- {#if $events_trigger == 'load__event_session_obj' && $events_slct.event_session_id}
<Event_launcher_session_view
<Launcher_session_view
slct_event_session_id={$events_slct.event_session_id}
lq__event_location_obj={lq__event_location_obj}
@@ -228,7 +429,7 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
lq__event_session_obj={lq__event_session_obj}
lq__event_session_obj_li={lq__event_session_obj_li}
>
</Event_launcher_session_view>
</Launcher_session_view>
{/if} -->
<!-- {$lq__event_session_obj?.name} -->
@@ -241,14 +442,14 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
{/if}
{#if $events_slct.event_session_id && $lq__event_session_obj}
<Event_launcher_session_view
<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>
</Launcher_session_view>
{/if}
</section>
@@ -287,7 +488,7 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
</div>
<div>
{#if $events_loc.launcher?.av_recording}
{#if $events_sess.launcher?.av_recording_status}
<span class="fas fa-video"></span> AV Recording Active
{:else}
<span class="fas fa-video-slash"></span> AV Recording Inactive
@@ -305,6 +506,18 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
</Footer>
<div class="absolute top-0 left-0 z-20 text-center">
<button
type="button"
on:click={() => ($events_loc.launcher.hide_drawer__cfg = false)}
class="btn btn-sm p-0.5 variant-soft-error hover:variant-filled-error"
>
<span class="fas fa-biohazard"></span>
</button>
</div>
<Drawer
bgColor="bg-blue"
class="bg-orange-100 opacity-90 hover:opacity-95 transition-all duration-1000"
@@ -322,123 +535,12 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
id="sidebar1"
>
<div class="flex flex-row items-center justify-between">
<h2
class="text-center mb-4 text-base font-semibold text-gray-500 dark:text-gray-400"
>
Launcher Configuration
</h2>
<button
on:click={() => ($events_loc.launcher.hide_drawer__cfg = true)}
class="pb-4 pl-4 dark:text-white"
>
<span class="fas fa-times"></span>
</button>
</div>
<hr>
<section class="controller">
<h3>
<button
on:click={() => {
$events_loc.launcher.show_section__controller = !$events_loc.launcher.show_section__controller;
}}
class="ae_btn btn_sm btn_seamless"
>
Controller:
{#if $events_loc.launcher.show_section__controller}
<span class="fas fa-chevron-down"></span>
{:else}
<span class="fas fa-chevron-right"></span>
{/if}
</button>
</h3>
<div
class:hidden={!$events_loc.launcher.show_section__controller}
>
<select
bind:value={$events_loc.launcher.controller}
class="select"
>
<option value="local">Locally Controlled</option>
<option value="remote">Remotely Controlled</option>
<option value="local_push">Controller</option>
</select>
<input
bind:value={$events_loc.launcher.controller_group_code}
placeholder="Controller group code"
class="input"
>
</div>
{#if $events_loc.launcher.controller_group_code}
<!-- {$ae_api.base_url} -->
<Element_websocket_v2
ws_server={$ae_api.fqdn}
group_id={$events_loc.launcher.controller_group_code}
cmd={$events_loc.launcher.controller_cmd}
type={'cmd'}
trigger_send={$events_loc.launcher.controller_trigger_send}
/>
<!-- on:ws_conn={handle_ws_conn} -->
<!-- on:ws_recv={handle_ws_recv} -->
<!-- on:ws_sent={handle_ws_sent} -->
{/if}
</section>
<hr>
<!-- <h3
class="text-center mb-4 text-sm font-semibold"
>
Controller
</h3> -->
<h3
class="text-center mb-4 text-sm font-semibold"
>
Screen Saver
</h3>
<h3
class="text-center mb-4 text-sm font-semibold"
>
App Modes
</h3>
<h3
class="text-center mb-4 text-sm font-semibold"
>
Local Config Refresh
</h3>
<Launcher_cfg></Launcher_cfg>
<hr />
<div class="text-center">
<button
type="button"
on:click={() => ($events_loc.launcher.hide_drawer__debug = false)}
class="btn btn-sm p-1 variant-soft-error hover:variant-filled-error"
>
<span class="fas fa-bug"></span>
<!-- Debug -->
</button>
</div>
<hr />
<div class="grid grid-cols-2 gap-4">
<div class="grid grid-cols-2 gap-2">
<a href="/events/{$events_slct.event_id}" class="btn btn-sm variant-soft-primary hover:variant-filled-primary">
<span class="fas fa-arrow-left m-1"></span>
Session Search
@@ -508,4 +610,99 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
</pre>
</div>
</Drawer>
</Drawer>
<!-- Main modal -->
<Modal
title="{$events_sess.launcher?.modal__title}"
bind:open={$events_sess.launcher.modal__open}
autoclose={true}
size="xl"
class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
classHeader="px-1 py-0 md:px-1 md:py-0"
classBody="flex flex-col items-center p-0 md:px-0 py-0"
on:close={async () => {
if ($events_loc.launcher.controller == 'local_push' && $events_sess.launcher.ws_connect_status == 'connected') {
// This should work....????
console.log(`TEST - FAIL??? Local Push Controller Command: ae_close:event_file_modal`);
console.log(`Before: ${$events_sess.launcher.controller_trigger_send}`);
$events_sess.launcher.controller_cmd = `ae_close:event_file_modal`;
$events_sess.launcher.controller_trigger_send = true;
$events_sess = $events_sess;
events_sess.set($events_sess);
tick();
events_sess.set($events_sess);
console.log(`After: ${$events_sess.launcher.controller_trigger_send}`);
}
}}
>
<!-- <svelte:fragment slot="header">
<div class="flex flex-row items-center justify-between">
<h3 class="text-lg font-semibold">
{$events_sess.launcher?.modal__title}
</h3>
</div>
</svelte:fragment> -->
<button
on:click={() => {
console.log(`TEST - THIS WORKS... Local Push Controller Command: ae_close:event_file_modal`);
// This is not terrible if we set autoclose to true.
$events_sess.launcher.controller_cmd = `ae_close:event_file_modal`;
$events_sess.launcher.controller_trigger_send = true;
// $events_sess.launcher.modal__open = false;
}}
class="absolute top-0 right-12 p-1"
>
<span class="fas fa-times"></span>
Close Remote
</button>
<!-- <span class="aspect-[9/16] max-h-96"> -->
<img
src="{$ae_api.base_url}/event/file/{$events_sess.launcher.modal__open}/download?filename={$events_slct.event_file_obj.filename}&x_no_account_id_token=direct-download"
alt="Placeholder"
class="margin-auto max-h-full"
/>
<!-- </span> -->
<!-- <svelte:fragment slot="footer">
<div class="text-center w-full">
<button
on:click={() => {
$events_sess.pres_mgmt.show_modal__session_poc_agree = false;
}}
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
>
<span class="fas fa-times m-1"></span>
Close
</button>
</div>
</svelte:fragment> -->
</Modal>
{#if $events_loc.launcher.controller_group_code && $events_loc.launcher.ws_connect}
<!-- {$ae_api.base_url} -->
<Element_websocket_v2
bind:ws_connect={$events_loc.launcher.ws_connect}
bind:ws_connect_status={$events_sess.launcher.ws_connect_status}
ws_server={$ae_api.fqdn}
bind:group_id={$events_loc.launcher.controller_group_code}
bind:client_id={$events_loc.launcher.controller_client_id}
bind:cmd={$events_sess.launcher.controller_cmd}
type={'cmd'}
bind:trigger_send={$events_sess.launcher.controller_trigger_send}
on:ws_conn={handle_ws_conn}
on:ws_recv={handle_ws_recv}
on:ws_sent={handle_ws_sent}
/>
<!-- on:ws_recv={handle_ws_recv} -->
{/if}