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

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,

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)

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) {

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-warning={!$idle}
-        class:preset-tonal-success={$events_loc.launcher.ws_connect}
+        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'}
+        {#if $idle}
-            <span class="fas fa-wifi mx-1"></span>
+            <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>
+        <span class="hidden md:inline">
-        {ae_util.iso_datetime_formatter($time,'date_full_no_year')}
+            <span class="fas fa-calendar-alt"></span>
-        <span class="fas fa-clock"></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}

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>

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