More work on the WebSockets. Improved status and WS triggers. Better online/offline status.

2025-10-16 14:48:10 -04:00
parent 3d6b7c412c
commit 8d15a5ba0b
6 changed files with 189 additions and 25 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "osit-aether-app-svelte",
-  "version": "3.9.3",
+  "version": "3.9.4",
  "description": "One Sky IT's Aether App created with Svelte, SvelteKit, Tailwind CSS, Lucide, Font Awesome, and Skeleton UI. -Scott Idem",
  "homepage": "https://oneskyit.com/",
  "private": true,
--- a/src/lib/ae_events_stores.ts
+++ b/src/lib/ae_events_stores.ts
@@ -400,6 +400,9 @@ let events_session_data_struct: key_val = {
        trigger_reload__event_session_obj_li: null,
        trigger_reload__event_location_obj_id: null,
        trigger_reload__event_location_obj_li: null,
+
+        trigger__ws_connect: null,
+        trigger__ws_disconnect: null,
    },

    // Lead Retrievals (Exhibit)
--- a/src/lib/element_websocket_v2.svelte
+++ b/src/lib/element_websocket_v2.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 interface Props {
    log_lvl?: number;
-    ws_connect?: boolean;
+    ws_connect?: boolean; // If true then we should be trying to connect to the WS server.
    ws_connect_status?: null|string;
    ws_server?: string;
    ws_retry_delay?: number;
@@ -13,6 +13,8 @@ interface Props {
    msg?: null|string;
    type?: null|string; // msg, cmd, json, hello, bye
    trigger_send?: any;
+    trigger_connect?: boolean;
+    trigger_disconnect?: boolean;
    classes?: string;
    hide__ws_element?: boolean;
    hide__ws_form?: boolean;
@@ -38,6 +40,8 @@ let {
    msg = $bindable(null),
    type = null,
    trigger_send = $bindable(null),
+    trigger_connect = $bindable(false),
+    trigger_disconnect = $bindable(false),
    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),
@@ -294,9 +298,24 @@ function handle_send_ws_data() {

 $effect(() => {
    if (ws_connect && group_id) {
+        console.log('HERE!!!!!');
        ws_group = ws_connect_group_id({group_id: group_id, client_id: client_id});
+    // } else if (!ws_connect) {
+    //     console.log('HERE!!!!!');
+    //     log_lvl = 1;
+    //     if (log_lvl) {
+    //         console.log(`WS: WS not set to connect. Need to close WS Group connection.`);
+    //     }
+    //     ws_group?.close();
+    //     ws_connect_status = 'disconnected';
    } else {
+        console.log('HERE!!!!!');
+        log_lvl = 1;
+        if (log_lvl) {
+            console.log(`WS: Not connecting. ws_connect=${ws_connect} group_id=${group_id}`);
+        }
        ws_group?.close();
+        ws_connect_status = 'disconnected';
    }
 });

@@ -313,6 +332,31 @@ $effect(() => {
    }
 });

+$effect(() => {
+    if (trigger_connect) {
+        trigger_connect = false;
+        if (!ws_connect) {
+            ws_connect = true;
+        }
+        console.log('WS: Connect triggered!');
+    }
+});
+
+$effect(() => {
+    if (trigger_disconnect) {
+        console.log('WS: Disconnect triggered!');
+        trigger_disconnect = false;
+        if (ws_connect) {
+            ws_connect = false;
+        }
+        if (ws_group) {
+            ws_group.close();
+            ws_group = null;
+            ws_connect_status = 'disconnected';
+        }
+    }
+});
+

 function preventDefault(fn) {
    return function (event) {
--- a/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
+++ b/src/routes/events/[event_id]/(launcher)/launcher/+layout.svelte
@@ -46,6 +46,21 @@ import Element_websocket_v2 from '$lib/element_websocket_v2.svelte';
 let ae_acct = data[$slct.account_id];
 // console.log(`ae_acct = `, ae_acct);

+import {
+	// devicePixelRatio,
+	// innerHeight,
+	// innerWidth,
+	online,
+	// outerHeight,
+	// outerWidth,
+	// screenLeft,
+	// screenTop,
+	// scrollX,
+	// scrollY
+} from 'svelte/reactivity/window';
+
+// const online: ReactiveValue<boolean | undefined>;
+
 $ae_sess.disable_sys_nav = true;
 $ae_sess.disable_sys_header = true;
 $ae_sess.disable_sys_footer = true;
@@ -1042,28 +1057,96 @@ $effect(() => {
    </div>

    <span
-        class:preset-tonal-warning={!$events_loc.launcher.ws_connect}
-        class:preset-tonal-success={$events_loc.launcher.ws_connect}
+        class:preset-tonal-warning={!$idle}
+        class:preset-tonal-success={$idle}
        class="group px-1 rounded-md transition-all duration-1000"
+        title="The user is currently { $idle ? 'idle' : 'active' }"
        >
-        {#if $events_sess.launcher.ws_connect_status == 'connected'}
-            <span class="fas fa-wifi mx-1"></span>
+        {#if $idle}
+            <span class="fas fa-bed mx-1"></span>
            <span class="hidden group-hover:inline">
-            WebSocket Connected
+            Idle
            </span>
        {:else}
-        <span class="fas fa-times mx-1"></span>
+            <span class="fas fa-mouse-pointer mx-1"></span>
            <span class="hidden group-hover:inline">
-            WebSocket Disconnected
+            Active
+            </span>
+        {/if}
+    </span>
+
+    <!-- Why does this not behave consistently???? Spent a few hours trying to make it work right. -->
+    <!-- {#if online.current}
+    online
+    {:else}
+    offline
+    {/if} -->
+
+    <!-- class:preset-tonal-warning={!online?.current} -->
+    <!-- class:preset-tonal-success={online?.current} -->
+    <span
+
+        class="group px-1 rounded-md transition-all duration-1000"
+        title="Online status = { online?.current }"
+        >
+        <!-- {@html online?.current ? '<span class="fas fa-wifi mx-1"></span> Online!' : '--'} -->
+        <span class="fas fa-wifi mx-1"></span>
+        {online?.current ? '' : 'Offline!'}
+        <!-- {@html online?.current ? '--' : 'No Connection'} -->
+        <!-- {@html online?.current ? '<span class="fas fa-wifi mx-1"></span> Online!' : '<span class="fas fa-times mx-1 text-red-700"></span> No Connection'} -->
+
+        <!-- current value data type = {online.current ? typeof(online.current) : 'null'} -->
+        <!-- {#if online?.current}
+            <span class="fas fa-wifi mx-1"></span>
+            <span class="hidden group-hover:inline">
+            Online
+            </span>
+        {:else}
+            <span class="fas fa-times mx-1 text-red-700"></span>
+            <span class="hidden group-hover:inline">
+            No Connection!
+            </span>
+        {/if} -->
+
+        <!-- {#if online.current === true}
+            <span class="fas fa-wifi mx-1"></span>
+            <span class="hidden group-hover:inline">
+            Online
+            </span>
+        {:else}
+            <span class="fas fa-times mx-1 text-red-700"></span>
+            <span class="hidden group-hover:inline">
+            No Connection!
+            </span>
+        {/if} -->
+    </span>
+
+    <span
+        class:hidden={!$events_loc.launcher.ws_connect}
+        class:preset-tonal-warning={$events_sess.launcher.ws_connect_status != 'connected'}
+        class:preset-tonal-success={$events_sess.launcher.ws_connect_status == 'connected'}
+        class="group px-1 rounded-md transition-all duration-1000"
+        title="WebSocket is { $events_sess.launcher.ws_connect_status == 'connected' ? 'connected' : 'disconnected' } API: {$ae_api?.base_url}"
+        >
+        {#if $events_sess.launcher.ws_connect_status == 'connected'}
+            <span class="fas fa-sitemap mx-1 text-green-700"></span>
+            <span class="hidden group-hover:inline">
+            WS Connected
+            </span>
+        {:else}
+            <span class="fas fa-times mx-1"></span>
+            <span class="hidden group-hover:inline">
+            WS Disconnected
            </span>
        {/if}
    </span>

    <span
        class:hidden={$events_loc.launcher.app_mode != 'native'}
-        class="group px-1 rounded-md"
+        class="group px-1 rounded-md transition-all duration-1000"
        class:preset-tonal-warning={!$events_sess.launcher?.av_recording_status}
        class:preset-tonal-success={$events_sess.launcher?.av_recording_status}
+        title="Audio/Video recording is { $events_sess.launcher?.av_recording_status ? 'active' : 'inactive' }"
        >
    {#if $events_sess.launcher?.av_recording_status}
        <span class="fas fa-video mx-1"></span>
@@ -1079,9 +1162,13 @@ $effect(() => {
    </span>

    <div class="current_datetime font-mono px-2 hover:font-bold hover:bg-white transition-all">
-        <span class="fas fa-calendar-alt"></span>
-        {ae_util.iso_datetime_formatter($time,'date_full_no_year')}
-        <span class="fas fa-clock"></span>
+        <span class="hidden md:inline">
+            <span class="fas fa-calendar-alt"></span>
+            {ae_util.iso_datetime_formatter($time,'date_full_no_year')}
+        </span>
+        <span class="hidden sm:inline">
+            <span class="fas fa-clock"></span>
+        </span>
        {#if $events_loc.launcher?.time_hours == 12}
            {ae_util.iso_datetime_formatter($time,'time_12_long')}
        {:else}
@@ -1407,6 +1494,9 @@ $effect(() => {
        type={'cmd'}
        bind:trigger_send={$events_sess.launcher.controller_trigger_send}

+        bind:trigger_connect={$events_sess.launcher.trigger__ws_connect}
+        bind:trigger_disconnect={$events_sess.launcher.trigger__ws_disconnect}
+
        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}
--- a/src/routes/events/[event_id]/(launcher)/launcher_cfg.svelte
+++ b/src/routes/events/[event_id]/(launcher)/launcher_cfg.svelte
@@ -81,7 +81,7 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
    <div class="flex flex-row gap-1 p-0.5">
    <select
        bind:value={$events_loc.launcher.controller}
-        class="input select"
+        class="input select text-sm preset-tonal-surface"
        >
            <option value="local">Local Only</option>
            <option value="remote">Remotely WS Controlled</option>
@@ -92,18 +92,34 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
        <input
            bind:value={$events_loc.launcher.controller_group_code}
            placeholder="Controller group code"
-            class="input"
+            class="input preset-tonal-surface text-sm"
            ondblclick={() => {
                $events_sess.launcher.controller_unlock_group_code = !$events_sess.launcher.controller_unlock_group_code;

-                $events_loc.launcher.ws_connect = false;
+                if ($events_loc.launcher.ws_connect) {
+                    $events_sess.launcher.trigger__ws_disconnect = true;
+                } else {
+                    // $events_sess.launcher.trigger__ws_connect = true;
+                }
+                // $events_loc.launcher.ws_connect = false;
            }}
            readonly={!$events_sess.launcher.controller_unlock_group_code}
            >

        <button
            onclick={() => {
-                $events_loc.launcher.ws_connect = !$events_loc.launcher.ws_connect;
+                if ($events_loc.launcher.ws_connect) {
+                    // console.log('HERE!!! Triggering WS disconnect');
+                    // NOTE: When the ws_disconnect is finished, it should set ws_connect to false.
+                    // $events_loc.launcher.ws_connect = false;
+                    $events_sess.launcher.trigger__ws_disconnect = true;
+                } else {
+                    // console.log('HERE!!! Triggering WS connect');
+                    // NOTE: We need to set ws_connect to true so that it will show the WS element.
+                    $events_loc.launcher.ws_connect = true;
+                    $events_sess.launcher.trigger__ws_connect = true;
+                }
+
                $events_sess.launcher.controller_unlock_group_code = false;
                $events_sess.launcher.controller_cmd = null,
                $events_sess.launcher.controller_trigger_send = null;
@@ -174,40 +190,40 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
    >
    <!-- Run screen saver after idle time exceeded $events_loc.launcher.idle_timer = 4 * 60 * 1000  -->
    <label
-        class="flex flex-row gap-1 items-center justify-start"
+        class="flex flex-row gap-1 items-center justify-start text-sm"
        >
        <span class="w-36">Idle Time (ms):</span>
        <input
            type="number"
            min={3000}
            bind:value={$events_loc.launcher.idle_timer}
-            class="input input-sm w-28 text-right"
+            class="input input-sm w-28 text-right preset-tonal-surface"
            >
    </label>

    <!-- How often is idle checked? $events_loc.launcher.idle_cycle = 5 * 1000 -->
     <label
-        class="flex flex-row gap-1 items-center justify-start"
+        class="flex flex-row gap-1 items-center justify-start text-sm"
        >
        <span class="w-36">Cycle Check (ms):</span>
        <input
            type="number"
            min={500}
            bind:value={$events_loc.launcher.idle_cycle}
-            class="input input-sm w-28 text-right"
+            class="input input-sm w-28 text-right preset-tonal-surface"
            >
    </label>

    <!-- How often the image changes? $events_loc.launcher.idle_loop_period = 1 * 60 * 1000 -->
    <label
-        class="flex flex-row gap-1 items-center justify-start"
+        class="flex flex-row gap-1 items-center justify-start text-sm"
        >
        <span class="w-36">Image Change Period (ms):</span>
        <input
            type="number"
            min={750}
            bind:value={$events_loc.launcher.idle_loop_period}
-            class="input input-sm w-28 text-right"
+            class="input input-sm w-28 text-right preset-tonal-surface"
            >
    </label>

@@ -530,7 +546,7 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
    >
 <div class="flex flex-col gap-1 items-center justify-start w-full">
 <select
-    class="input w-full"
+    class="input w-full preset-tonal-surface text-sm"
    onchange={event => {
        const val = (event.target as HTMLSelectElement).value;
        if (val && val != '') {
@@ -641,6 +657,8 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
 </button>
 </div>

+<div class="text-xs text-gray-500 dark:text-gray-400">API: {$ae_api.base_url}</div>
+
 </div>

 </section>
--- a/src/routes/events/[event_id]/(launcher)/launcher_file_cont.svelte
+++ b/src/routes/events/[event_id]/(launcher)/launcher_file_cont.svelte
@@ -44,7 +44,7 @@ let {
 }: Props = $props();

 // *** Import Svelte specific
-import { preventDefault } from 'svelte/legacy';
+// import { preventDefault } from 'svelte/legacy';
 import { onMount, tick } from 'svelte';
 import { fade, scale, fly } from 'svelte/transition';

@@ -250,6 +250,14 @@ async function handle_open_file() {
 //     $events_loc.launcher.poster_src = `/event/file/${event_file_id}/download`;
 //     $events_loc.launcher.modal_title = modal_title;
 // }
+
+function preventDefault(fn) {
+    return function (event) {
+        event.preventDefault();
+        fn.call(this, event);
+    };
+}
+
 </script>


@@ -375,6 +383,7 @@ async function handle_open_file() {
                });
            }
        }}
+        class:preset-tonal-success={$events_slct.event_file_id == event_file_id}
        class="
            btn btn-sm md:btn-md lg:btn-lg
            preset-tonal-primary border border-primary-500