Work on the Launcher and how a "group" presenter is shown.

2024-09-26 18:37:09 -04:00
parent 0f40629bfe
commit 5311e4704f
3 changed files with 215 additions and 8 deletions
--- a/src/routes/events/[event_id]/(launcher)/+layout.svelte
+++ b/src/routes/events/[event_id]/(launcher)/+layout.svelte
@@ -4,7 +4,9 @@ export let data: any;
 let log_lvl = 0;

 import { onMount } from 'svelte';
+import { sineIn } from 'svelte/easing';
 import { liveQuery } from "dexie";
+import { Drawer, Footer } from 'flowbite-svelte';
 import { ae_util } from '$lib/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';
@@ -115,13 +117,23 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
    </title>
 </svelte:head>

+<div class="static max-w-screen-xl m-auto border border-gray-200 dark:border-gray-600 mt-12 mb-12">
+
+
 {#if !$lq__event_obj}
 <div class="flex flex-row items-center justify-center">
    <span class="fas fa-spinner fa-spin mx-1"></span>
    <span>Loading...</span>
 </div>
 {:else}
-<header id="Main-Header" class="flex flex-row items-center justify-evenly">
+<header
+    id="Main-Header"
+    class="
+        absolute top-0 start-0 z-20 w-full p-1
+        flex flex-row items-center justify-evenly bg-slate-200
+        m-auto
+        "
+    >
    <h3 class="h4 text-center italic">&AElig; Presentation Launcher</h3>
    <h2 class="h3 text-center">{$lq__event_obj?.name}</h2>
    <h3 class="h4 text-center italic">{$lq__event_location_obj?.name}
@@ -139,7 +151,7 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
        container h-full min-w-full w-full
        flex flex-row flex-wrap sm:flex-nowrap gap-0
        justify-center
-        py-1 px-2 pb-16
+        py-1 px-2
        bg-gray-100
        "
    >
@@ -154,6 +166,7 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
        border-r border-gray-200
        "
    >
+
    <!-- {#await $events_slct.id_li__event_location}
        Loading location list... a
    {:then event_location_obj_li} -->
@@ -181,6 +194,17 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
    {/if} -->
    <!-- {/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
@@ -192,6 +216,7 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
        max-w-full
        "
    >
+
    <!-- {#if $events_trigger == 'load__event_session_obj' && $events_slct.event_session_id}
    <Event_launcher_session_view
        slct_event_session_id={$events_slct.event_session_id}
@@ -223,9 +248,170 @@ console.log(`BROWSER Events - [event_id] launcher +layout.svelte start`);
        >
    </Event_launcher_session_view>
    {/if}
+
 </section>

 </div>


 <slot />
+
+
+</div>
+
+
+<Footer
+    class="
+        absolute bottom-0 start-0 z-20 w-full p-1
+        md:flex md:items-center md:justify-between
+        text-base hover:text-lg
+        shadow
+        bg-gray-200 border-t border-gray-200
+        dark:bg-gray-800 dark:border-gray-600
+        opacity-50 hover:opacity-100
+        transition-all duration-1000
+        "
+    >
+    <div>
+    [Help]
+    </div>
+
+    <div>
+    [Session Name]
+    </div>
+
+    <div>
+    [Online/Offline]
+    </div>
+
+    <div>
+    [Recording]
+    </div>
+
+    <div>
+    [Date and Time]
+    </div>
+</Footer>
+
+
+<Drawer
+    bgColor="bg-blue"
+    placement="left"
+    transitionType="fly"
+    transitionParams={
+        {
+            x: -320,
+            duration: 200,
+            easing: sineIn
+        }
+    }
+    width={'min-w-96 w-1/2 max-w-screen-lg'}
+    bind:hidden={$events_loc.launcher.hide_drawer__cfg}
+    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>
+
+    <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>
+
+
+
+    <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">
+      <button
+        class="btn btn-sm variant-ghost-tertiary hover:variant-filled-tertiary"
+        >Test 1</button>
+      <button
+        class="btn btn-sm variant-ghost-tertiary hover:variant-filled-tertiary"
+        >Test 2</button>
+    </div>
+</Drawer>
+
+
+
+<Drawer
+    activateClickOutside={false}
+    backdrop={false}
+    class="bg-red-100 opacity-75 hover:opacity-95 transition-all duration-1000"
+    placement="bottom"
+    transitionType="fly"
+    transitionParams={
+        {
+            y: 320,
+            duration: 200,
+            easing: sineIn
+        }
+    }
+    width={'min-h-96 h-1/2'}
+    bind:hidden={$events_loc.launcher.hide_drawer__debug}
+    id="sidebar2"
+    >
+    <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"
+            >
+            Debug
+        </h2>
+        <button on:click={() => ($events_loc.launcher.hide_drawer__debug = true)} class="mb-4 dark:text-white">
+            <span class="fas fa-times"></span>
+        </button>
+    </div>
+
+    <div>
+
+    <!-- Show the launcher configuration in JSON format -->
+    <pre class="text-xs">
+        {JSON.stringify($events_loc.launcher, null, 2)}
+    </pre>
+
+    </div>
+</Drawer>
--- a/src/routes/events/[event_id]/(launcher)/launcher_presenter_view.svelte
+++ b/src/routes/events/[event_id]/(launcher)/launcher_presenter_view.svelte
@@ -13,7 +13,7 @@ import { events_func } from '$lib/ae_events_functions';

 // export let slct_event_presentation_id: string;
 // export let slct_event_presenter_id: string;
-export let lq__event_presenter_obj: any;
+export let lq__event_presenter_obj: any; // This is not actually the LiveQuery object. This was pulled from the list of presenters for a presentation. With Svelte 5 this should not matter.

 let ae_promises: key_val = {
    get_li__event_file: null,
@@ -32,8 +32,15 @@ let lq__event_file_obj_li = liveQuery(


 <strong>
-    <span class="fas fa-user"></span>
-    {#if lq__event_presenter_obj?.full_name }{lq__event_presenter_obj?.full_name}{:else }{lq__event_presenter_obj?.given_name}{/if }
+    {#if lq__event_presenter_obj?.given_name && lq__event_presenter_obj?.given_name != 'Group' }
+        <span class="fas fa-user"></span>
+        {lq__event_presenter_obj?.full_name}
+    {:else if lq__event_presenter_obj?.given_name == 'Group'}
+        <span class="fas fa-users"></span>
+        {lq__event_presenter_obj?.affiliations}
+    {:else}
+        --not set--
+    {/if }
 </strong>

 {#if !lq__event_presenter_obj?.file_count}
--- a/src/routes/events_pres_mgmt/ae_comp__event_presenter_obj_li.svelte
+++ b/src/routes/events_pres_mgmt/ae_comp__event_presenter_obj_li.svelte
@@ -12,6 +12,7 @@ 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, events_trig_kv } from '$lib/ae_events_stores';
 import { events_func } from '$lib/ae_events_functions';
+	import { ae_util } from '$lib/ae_utils';

 // Exports
 export let container_class_li: string|Array<string> = [];
@@ -103,16 +104,29 @@ let lq__event_presentation_obj = liveQuery(
            >
            <a
                href="/events_pres_mgmt/presenter/{event_presenter_obj.event_presenter_id_random}"
-                class="btn variant-ghost-primary hover:variant-filled-primary font-bold min-w-64 my-0.5"
+                class="btn variant-ghost-primary hover:variant-filled-primary font-bold min-w-64 max-w-96 my-0.5 overflow-hidden"
                class:btn-sm={display_mode != 'default'}
                title="Person ID: {event_presenter_obj.person_id_random}; Email: {event_presenter_obj.email}"
                >
-                <span class="fas fa-user m-0.5"></span>
+                {#if event_presenter_obj?.given_name && event_presenter_obj?.given_name != 'Group' }
+                    <span class="fas fa-user m-0.5"></span>
+                {:else if event_presenter_obj?.given_name == 'Group'}
+                    <span class="fas fa-users m-0.5"></span>
+                {:else}
+                    <span class="fas fa-user-slash m-0.5"></span>
+                {/if }
                {#if event_presenter_obj.priority}
                    <span class="fas fa-star text-yellow-500 text-xs m-0.5"></span>
                {/if}
                <span class="text-center grow">
-                {event_presenter_obj.full_name}
+
+                    {#if event_presenter_obj?.given_name && event_presenter_obj?.given_name != 'Group' }
+                        {event_presenter_obj?.full_name}
+                    {:else if event_presenter_obj?.given_name == 'Group'}
+                        {ae_util.shorten_string({string: event_presenter_obj?.affiliations, max_length: 25})}
+                    {:else}
+                        --not set--
+                    {/if }
                </span>

                {#if event_presenter_obj?.file_count}