Lots of work on the Launcher and configuration. Looks pretty good and useful.
This commit is contained in:
Scott Idem
@@ -13,12 +13,12 @@ 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 max-w-md
|
||||
flex flex-col gap-2 items-center justify-start
|
||||
"
|
||||
>
|
||||
|
||||
<div class="flex flex-row items-center justify-between w-full">
|
||||
<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"
|
||||
>
|
||||
@@ -27,7 +27,7 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
|
||||
|
||||
<button
|
||||
onclick={() => ($events_loc.launcher.hide_drawer__cfg = true)}
|
||||
class="pb-4 pl-4 dark:text-white"
|
||||
class="btn btn-icon dark:text-white"
|
||||
>
|
||||
<span class="fas fa-times"></span>
|
||||
<span class="sr-only">Close Config</span>
|
||||
@@ -35,115 +35,183 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
|
||||
</div>
|
||||
|
||||
|
||||
<hr class="my-2 border-gray-300 dark:border-gray-600" />
|
||||
<!-- <hr class="w-full my-2 border-1 border-gray-200 dark:border-gray-800 " /> -->
|
||||
|
||||
<section class="controller w-full">
|
||||
<h3
|
||||
class="text-center mb-2 text-sm font-semibold"
|
||||
<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 class="fas fa-sitemap m-1 text-green-700"></span>
|
||||
<!-- <span class="fas fa-signal m-1"></span> -->
|
||||
{:else}
|
||||
<span class="fas fa-times m-1 text-red-700"></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"
|
||||
>
|
||||
<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"
|
||||
ondblclick={() => {
|
||||
$events_sess.launcher.controller_unlock_group_code = !$events_sess.launcher.controller_unlock_group_code;
|
||||
|
||||
$events_loc.launcher.ws_connect = false;
|
||||
}}
|
||||
readonly={!$events_sess.launcher.controller_unlock_group_code}
|
||||
>
|
||||
|
||||
<button
|
||||
onclick={() => {
|
||||
$events_loc.launcher.show_section__controller = !$events_loc.launcher.show_section__controller;
|
||||
$events_loc.launcher.ws_connect = !$events_loc.launcher.ws_connect;
|
||||
$events_sess.launcher.controller_unlock_group_code = false;
|
||||
$events_sess.launcher.controller_cmd = null,
|
||||
$events_sess.launcher.controller_trigger_send = null;
|
||||
}}
|
||||
class="ae_btn btn_sm btn_seamless"
|
||||
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}
|
||||
>
|
||||
Controller:
|
||||
{$events_loc.launcher?.controller ?? '-- not set --'}
|
||||
({$events_loc.launcher.controller_group_code ?? '-- not set --'})
|
||||
{#if $events_sess.launcher.ws_connect_status == 'connected'}
|
||||
<span class="fas fa-sitemap m-1"></span>
|
||||
{#if $events_loc.launcher.ws_connect}
|
||||
<!-- <span class="fas fa-signal m-1"></span> -->
|
||||
Disconnect?
|
||||
{:else}
|
||||
<span class="fas fa-times m-1"></span>
|
||||
{/if}
|
||||
{#if $events_loc.launcher.show_section__controller}
|
||||
<span class="fas fa-chevron-down"></span>
|
||||
{:else}
|
||||
<span class="fas fa-chevron-right"></span>
|
||||
<!-- <span class="fas fa-plug m-1"></span> -->
|
||||
Connect?
|
||||
{/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="select"
|
||||
>
|
||||
<option value="local">Local Only</option>
|
||||
<option value="remote">Remotely Controlled</option>
|
||||
<option value="local_push">Local and 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"
|
||||
ondblclick={() => {
|
||||
$events_sess.launcher.controller_unlock_group_code = !$events_sess.launcher.controller_unlock_group_code;
|
||||
|
||||
$events_loc.launcher.ws_connect = false;
|
||||
}}
|
||||
readonly={!$events_sess.launcher.controller_unlock_group_code}
|
||||
>
|
||||
|
||||
{#if $events_loc.launcher.ws_connect}
|
||||
<button
|
||||
onclick={() => {
|
||||
$events_loc.launcher.ws_connect = !$events_loc.launcher.ws_connect;
|
||||
$events_sess.launcher.controller_unlock_group_code = false;
|
||||
$events_sess.launcher.controller_cmd = null,
|
||||
$events_sess.launcher.controller_trigger_send = null;
|
||||
$events_sess.launcher.controller_cmd = 'ae_refresh:now';
|
||||
$events_sess.launcher.controller_trigger_send = 'trigger';
|
||||
}}
|
||||
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}
|
||||
class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500"
|
||||
>
|
||||
{#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}
|
||||
Send Group Reload
|
||||
</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>
|
||||
|
||||
|
||||
|
||||
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="my-2 border-gray-300 dark:border-gray-600" />
|
||||
<!-- <hr class="my-2 border-gray-300 dark:border-gray-600" /> -->
|
||||
|
||||
|
||||
<section class="screen_saver w-full">
|
||||
<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"
|
||||
>
|
||||
Screen Saver
|
||||
|
||||
<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"
|
||||
>
|
||||
<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-24 text-right"
|
||||
>
|
||||
</label>
|
||||
|
||||
<!-- How often is idle checked? $events_loc.launcher.idle_cycle = 5 * 1000 -->
|
||||
<label
|
||||
class="flex flex-row gap-1 items-center justify-start"
|
||||
>
|
||||
<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-24 text-right"
|
||||
>
|
||||
</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"
|
||||
>
|
||||
<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-24 text-right"
|
||||
>
|
||||
</label>
|
||||
|
||||
<!-- Future options: Show caption for X seconds -->
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<hr class="my-2 border-gray-300 dark:border-gray-600" />
|
||||
<!-- <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) -->
|
||||
@@ -156,7 +224,10 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
|
||||
* native Electron caching and open method (download to cache, copy and then open)
|
||||
* URL: new browser window
|
||||
-->
|
||||
<section class="app_modes w-full">
|
||||
<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"
|
||||
>
|
||||
@@ -164,15 +235,17 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
|
||||
onclick={() => {
|
||||
$events_loc.launcher.show_section__app_modes = !$events_loc.launcher.show_section__app_modes;
|
||||
}}
|
||||
class="ae_btn btn_sm btn_seamless"
|
||||
class="btn btn-sm w-full justify-between"
|
||||
>
|
||||
App Modes:
|
||||
{$events_loc.launcher.app_mode ?? '-- not set --'}
|
||||
<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>
|
||||
|
||||
@@ -190,7 +263,7 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
|
||||
// ae_event_launcher.set($events_loc.launcher);
|
||||
console.log($events_loc.launcher);
|
||||
}}
|
||||
title="Switch to default mode"
|
||||
title="Switch to default web browser mode"
|
||||
>
|
||||
Change to Default Mode
|
||||
</button>
|
||||
@@ -203,7 +276,7 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
|
||||
// ae_event_launcher.set($ae_event_launcher);
|
||||
console.log($events_loc.launcher);
|
||||
}}
|
||||
title="Switch to native mode"
|
||||
title="Switch to native app mode"
|
||||
>
|
||||
Change to App Mode
|
||||
</button>
|
||||
@@ -419,18 +492,154 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
|
||||
|
||||
|
||||
|
||||
<section class="local_cfg_refresh w-full">
|
||||
<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"
|
||||
>
|
||||
Local Config Refresh
|
||||
<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"
|
||||
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>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<hr class="my-2 border-gray-300 dark:border-gray-600" />
|
||||
<!-- <hr class="my-2 border-gray-300 dark:border-gray-600" /> -->
|
||||
|
||||
|
||||
<div class="text-center">
|
||||
@@ -440,7 +649,16 @@ import { events_loc, events_sess, events_slct, events_trigger, events_trig } fro
|
||||
class="btn btn-sm p-1 preset-tonal-error hover:preset-filled-error-500"
|
||||
>
|
||||
<span class="fas fa-bug"></span>
|
||||
<!-- Debug -->
|
||||
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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user