Files
OSIT-AE-App-Svelte/src/routes/events/[event_id]/(launcher)/launcher_cfg.svelte
Scott Idem 7e1eaba3bc feat: Migrate ESLint to flat config and resolve initial linting errors
Migrated the ESLint configuration to the new flat config format ()
and addressed several initial linting errors.

Key changes include:
- Updated ESLint configuration to treat  as warnings instead of errors.
- Fixed  errors in  by declaring  and .
- Corrected  error in  by using  instead of an out-of-scope .
- Resolved  error in  by replacing the undefined  directive with the  component.
- Addressed  errors in  by replacing  with  and  with .
- Fixed  errors in  by importing necessary modules (, , ) and adding missing props (, , , , ).
2025-11-17 18:46:54 -05:00

687 lines
22 KiB
Svelte

<script lang="ts">
interface Props {
log_lvl?: number;
}
let { log_lvl = 0 }: Props = $props();
import {
ae_snip,
ae_loc,
ae_sess,
ae_api,
ae_trig,
slct,
slct_trigger,
time
} from '$lib/stores/ae_stores';
import {
events_loc,
events_sess,
events_slct,
events_trigger,
events_trig
} from '$lib/stores/ae_events_stores';
</script>
<div
class="
w-full max-w-md
flex flex-col gap-2 items-center justify-start
"
>
<div class="w-full 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
onclick={() => ($events_loc.launcher.hide_drawer__cfg = true)}
class="btn btn-icon dark:text-white"
>
<span class="fas fa-times"></span>
<span class="sr-only">Close Config</span>
</button>
</div>
<!-- <hr class="w-full my-2 border-1 border-gray-200 dark:border-gray-800 " /> -->
<section
class:preset-outlined-warning-300-700={$events_loc.launcher.show_section__controller}
class="controller w-full preset-outlined-surface-300-700 transition-all"
>
<h3 class="text-center mb-2 text-sm font-semibold">
<button
onclick={() => {
$events_loc.launcher.show_section__controller =
!$events_loc.launcher.show_section__controller;
}}
class="btn btn-sm w-full justify-between"
>
{#if $events_loc.launcher.show_section__controller}
<span class="fas fa-chevron-down"></span>
{:else}
<span class="fas fa-chevron-right"></span>
{/if}
Controller:
{$events_loc.launcher?.controller ?? '-- not set --'}
({$events_loc.launcher.controller_group_code ?? '-- not set --'})
{#if $events_sess.launcher.ws_connect_status == 'connected'}
<span>
<span class="fas fa-sitemap m-1 text-green-700"></span>
<!-- <span class="fas fa-signal m-1"></span> -->
WS
</span>
{:else}
<span>
<span class="fas fa-times m-1 text-red-700"></span>
<span class="fas fa-plug"></span>
WS
</span>
{/if}
</button>
</h3>
<div class:hidden={!$events_loc.launcher.show_section__controller}>
<div class="flex flex-row gap-1 p-0.5">
<select
bind:value={$events_loc.launcher.controller}
class="input select text-sm preset-tonal-surface"
>
<option value="local">Local Only</option>
<option value="remote">Remotely WS Controlled</option>
<option value="local_push">Local and WS Controller</option>
</select>
</div>
<div class="flex flex-row gap-1 p-0.5">
<input
bind:value={$events_loc.launcher.controller_group_code}
placeholder="Controller group code"
class="input preset-tonal-surface text-sm"
ondblclick={() => {
$events_sess.launcher.controller_unlock_group_code =
!$events_sess.launcher.controller_unlock_group_code;
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={() => {
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));
}}
class="btn btn-sm hover:preset-filled-primary-500"
class:preset-tonal-warning={!$events_loc.launcher.ws_connect}
class:preset-tonal-success={$events_loc.launcher.ws_connect}
>
{#if $events_loc.launcher.ws_connect}
<!-- <span class="fas fa-signal m-1"></span> -->
Disconnect?
{:else}
<!-- <span class="fas fa-plug m-1"></span> -->
Connect?
{/if}
</button>
{#if $events_loc.launcher.ws_connect}
<button
onclick={() => {
$events_sess.launcher.controller_unlock_group_code = false;
$events_sess.launcher.controller_cmd = 'ae_refresh:now';
$events_sess.launcher.controller_trigger_send = 'trigger';
}}
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500"
>
Send Group Reload
</button>
{/if}
</div>
</div>
</section>
<!-- <hr class="my-2 border-gray-300 dark:border-gray-600" /> -->
<section
class:preset-outlined-warning-300-700={$events_loc.launcher.show_section__screen_saver}
class="screen_saver w-full preset-outlined-surface-300-700 transition-all"
>
<h3 class="text-center mb-2 text-sm font-semibold w-full">
<button
onclick={() => {
$events_loc.launcher.show_section__screen_saver =
!$events_loc.launcher.show_section__screen_saver;
}}
class="btn btn-sm w-full justify-between"
>
<span>
{#if $events_loc.launcher.show_section__screen_saver}
<span class="fas fa-chevron-down"></span>
{:else}
<span class="fas fa-chevron-right"></span>
{/if}
Screen Saver
</span>
{$events_loc.launcher.idle_timer
? ($events_loc.launcher.idle_timer / 60000).toPrecision(4) + ' min'
: '-- not set --'}
</button>
</h3>
<div
class="flex flex-col gap-1 items-center justify-start w-full"
class:hidden={!$events_loc.launcher.show_section__screen_saver}
>
<!-- 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 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 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 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 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 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 preset-tonal-surface"
/>
</label>
<!-- Future options: Show caption for X seconds -->
</div>
</section>
<!-- <hr class="w-full my-2 border-1 border-gray-200 dark:border-gray-800 " /> -->
<!-- App Modes: default (browser), onsite (browser onsite), native (Electron app onsite) -->
<!-- Related Open Methods: modal, file default/onsite/native, URL -->
<!--
* modal: same for all modes; audio, images, video only
* file:
* default download with regular filename and extension
* onsite download with modified extension
* native Electron caching and open method (download to cache, copy and then open)
* URL: new browser window
-->
<section
class:preset-outlined-warning-300-700={$events_loc.launcher.show_section__app_modes}
class="app_modes w-full preset-outlined-surface-300-700 transition-all"
>
<h3 class="text-center mb-2 text-sm font-semibold">
<button
onclick={() => {
$events_loc.launcher.show_section__app_modes =
!$events_loc.launcher.show_section__app_modes;
}}
class="btn btn-sm w-full justify-between"
>
<span>
{#if $events_loc.launcher.show_section__app_modes}
<span class="fas fa-chevron-down"></span>
{:else}
<span class="fas fa-chevron-right"></span>
{/if}
App Modes
</span>
{$events_loc.launcher.app_mode ?? '-- not set --'}
</button>
</h3>
<div
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"
onclick={() => {
$events_loc.launcher.app_mode = 'default';
// ae_event_launcher.set($events_loc.launcher);
console.log($events_loc.launcher);
}}
title="Switch to default web browser mode"
>
Change to Default Mode
</button>
{/if}
{#if $events_loc.launcher.app_mode != 'native'}
<button
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
onclick={() => {
$events_loc.launcher.app_mode = 'native';
// ae_event_launcher.set($ae_event_launcher);
console.log($events_loc.launcher);
}}
title="Switch to native app mode"
>
Change to App Mode
</button>
{/if}
{#if $events_loc.launcher.app_mode != 'onsite'}
<button
class="btn btn-sm preset-tonal-primary hover:preset-filled-primary-500"
onclick={() => {
$events_loc.launcher.app_mode = 'onsite';
// ae_event_launcher.set($ae_event_launcher);
console.log($events_loc.launcher);
}}
title="Switch to onsite mode"
>
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"
onclick={() => {
$events_loc.launcher.hide__launcher_menu = false;
// ae_event_launcher.set($ae_event_launcher);
// console.log($events_loc.launcher);
}}
title="Show launcher menu"
>
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"
onclick={() => {
$events_loc.launcher.hide__launcher_menu = true;
// ae_event_launcher.set($ae_event_launcher);
// console.log($events_loc.launcher);
}}
title="Hide launcher menu"
>
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:preset-outlined-warning-300-700={$events_loc.launcher.show_section__local_cfg_refresh}
class="local_cfg_refresh w-full preset-outlined-surface-300-700 transition-all"
>
<h3 class="text-center mb-2 text-sm font-semibold">
<button
onclick={() => {
$events_loc.launcher.show_section__local_cfg_refresh =
!$events_loc.launcher.show_section__local_cfg_refresh;
}}
class="btn btn-sm w-full justify-between"
>
<span>
{#if $events_loc.launcher.show_section__local_cfg_refresh}
<span class="fas fa-chevron-down"></span>
{:else}
<span class="fas fa-chevron-right"></span>
{/if}
Other Local Config and Caches
</span>
</button>
</h3>
<!-- delete IDB tables, local storage, etc -->
<div
class="flex flex-col gap-1 items-center justify-start w-full"
class:hidden={!$events_loc.launcher.show_section__local_cfg_refresh}
>
<div class="flex flex-col gap-1 items-center justify-start w-full">
<select
class="input w-full preset-tonal-surface text-sm"
onchange={(event) => {
const val = (event.target as HTMLSelectElement).value;
if (val && val != '') {
if (val == 'delete_idbs') {
// Delete all IDB tables
if (
confirm(
'Are you sure you want to delete ALL IndexedDB databases? This will log you out of the app and you will need to reload the app.'
)
) {
// continue
} else {
(event.target as HTMLSelectElement).value = '';
return false;
}
indexedDB.deleteDatabase('ae_archives_db'); // Archives module
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db'); // Events module
indexedDB.deleteDatabase('ae_journals_db'); // Journals module
indexedDB.deleteDatabase('ae_posts_db'); // Posts module
indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
alert('All IndexedDB databases deleted. Please reload the app.');
} else if (val == 'delete_idbs_events') {
// Delete Event IDB tables
if (
confirm(
'Are you sure you want to delete ONLY the Events IndexedDB database? This will log you out of the app and you will need to reload the app.'
)
) {
// continue
} else {
(event.target as HTMLSelectElement).value = '';
return false;
}
indexedDB.deleteDatabase('ae_events_db'); // Events module
alert('Events IndexedDB database deleted. Please reload the app.');
} else if (val == 'delete_local') {
// Delete all local config
if (
confirm(
'Are you sure you want to delete ALL local config in localStorage? This will log you out of the app and you will need to reload the app.'
)
) {
// continue
} else {
(event.target as HTMLSelectElement).value = '';
return false;
}
localStorage.removeItem('ae_loc');
localStorage.removeItem('ae_events_loc');
localStorage.removeItem('ae_idaa_loc');
localStorage.removeItem('ae_journals_loc');
location.reload();
} else if (val == 'delete_local_events') {
// Delete local config for Events
if (
confirm(
'Are you sure you want to delete ONLY the Events local config in localStorage? This will log you out of the app and you will need to reload the app.'
)
) {
// continue
} else {
(event.target as HTMLSelectElement).value = '';
return false;
}
localStorage.removeItem('ae_events_loc');
// localStorage.removeItem('ae_event_cfg_' + $lq__event_obj?.event_id);
// localStorage.removeItem('ae_event_launcher_' + $lq__event_obj?.event_id);
location.reload();
}
(event.target as HTMLSelectElement).value = '';
}
}}
>
<option value="">-- select an option --</option>
<option value="delete_idbs">Delete all IDB tables</option>
<option value="delete_idbs_events">Delete Events IDB tables</option>
<option value="delete_local">Delete all local config</option>
<option value="delete_local_events">Delete local config for Events</option>
</select>
<span class="text-xs text-gray-500 dark:text-gray-400">
The action happens when the option is selected
</span>
</div>
<div class="flex flex-row gap-1 items-center justify-center w-full">
<!-- $ae_loc.sys_menu.hide -->
<button
type="button"
onclick={() => ($ae_loc.sys_menu.hide = !$ae_loc.sys_menu.hide)}
class="btn btn-sm p-1 preset-tonal-error hover:preset-filled-error-500"
title="Show or hide the Aether system menu (global)"
>
{#if !$ae_loc.sys_menu.hide}
<span class="fas fa-times"></span>
Hide Sys Menu
{:else}
<span class="fas fa-cog"></span>
Show Sys Menu
{/if}
</button>
<!-- $ae_loc.debug_menu.hide -->
<button
type="button"
onclick={() => ($ae_loc.debug_menu.hide = !$ae_loc.debug_menu.hide)}
class="btn btn-sm p-1 preset-tonal-error hover:preset-filled-error-500"
title="Show or hide the Aether debug menu (global)"
>
{#if !$ae_loc.debug_menu.hide}
<span class="fas fa-times"></span>
Hide Debug Menu
{:else}
<span class="fas fa-bug"></span>
Show Debug Menu
{/if}
</button>
</div>
<div class="text-xs text-gray-500 dark:text-gray-400">API: {$ae_api.base_url}</div>
</div>
</section>
<!-- <hr class="my-2 border-gray-300 dark:border-gray-600" /> -->
<div class="text-center">
<button
type="button"
onclick={() => ($events_loc.launcher.hide_drawer__debug = false)}
class="btn btn-sm p-1 preset-tonal-error hover:preset-filled-error-500"
>
<span class="fas fa-bug"></span>
Debug
</button>
<button
type="button"
onclick={() => location.reload()}
class="btn btn-sm p-1 preset-tonal-secondary hover:preset-filled-secondary-500"
>
<span class="fas fa-sync-alt"></span>
Reload Page
</button>
</div>
</div>