Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More work on the system and debug menus and related info.

Browse Source
This commit is contained in:
Scott Idem
2025-07-16 13:57:12 -04:00
parent 32c3be9983
commit eaffc44772
6 changed files with 320 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/lib/ae_stores.ts
View File

@@ -181,6 +181,7 @@ const ae_app_local_data_defaults: key_val = {
debug_menu: {
hide: false,
expand: false,
// hide_quick_info: true
},
app_cfg: {
@@ -334,6 +335,14 @@ let ae_app_session_data_defaults: key_val = {
// 'name': 'Aether App Template',
// 'theme': 'light',
// 'account_id': ae_account_id,
sys_menu: {
},
debug_menu: {
hide_quick_info: true
},
'ds': {
'submit_status': null,
},

57
src/lib/e_app_clipboard.svelte
View File

@@ -7,23 +7,43 @@ interface Props {
btn_text?: string;
btn_title?: string;
btn_class?: string;
hide_icon?: boolean;
}
let {
log_lvl = 1,
log_lvl = 0,
value = $bindable(''),
success = $bindable(false),
btn_text = 'Copy to Clipboard',
btn_title = 'Copy to Clipboard',
btn_class = 'btn btn-sm preset-tonal-warning text-warning-500 m-1'
btn_class = 'btn btn-sm preset-tonal-warning text-warning-500 m-1',
hide_icon = false,
}: Props = $props();
// *** Import Svelte specific
import { browser } from '$app/environment';
// *** Import other supporting libraries
import {
// ArrowBigRight,
// CircleX,
Copy,
// Eye, EyeOff,
// Key,
// LogIn, LogOut, LockKeyhole,
// Mail, MailCheck,
// Menu,
// RefreshCw, RefreshCcw, RefreshCcwDot,
// ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
// User, UserCheck
} from '@lucide/svelte';
if (log_lvl) {
console.log(`Clipboard component initialized with value:`, value);
}
// Select your trigger element
const elemButton: HTMLButtonElement | null = document.querySelector('[data-button]');
// const elemButton: HTMLButtonElement | null = document.querySelector('[data-button]');
// Add a click event handler to the trigger
// elemButton?.addEventListener('click', () => {
@@ -46,22 +66,31 @@ const elemButton: HTMLButtonElement | null = document.querySelector('[data-butto
type="button"
data-button
onclick={() => {
// Call the Clipboard API
navigator.clipboard
// Use the `writeText` method write content to the clipboard
.writeText(value)
// Handle confirmation
.then(() => {
if (log_lvl) {
console.log(`Clipboard write successful: ${value}`);
}
success = true;
});
// if (browser) {
// Call the Clipboard API
navigator.clipboard
// Use the `writeText` method write content to the clipboard
.writeText(value)
// Handle confirmation
.then(() => {
if (log_lvl) {
console.log(`Clipboard write successful: ${value}`);
}
success = true;
});
// } else {
// if (log_lvl) {
// console.log(`Clipboard write attempted in non-browser environment.`);
// }
// }
}}
class={btn_class}
title={btn_title}
>
<!-- {@render btn_text} -->
<Copy
class="inline-block mx-1 {hide_icon ? 'hidden' : '' }"
/>
{btn_text}
</button>

39
src/lib/e_app_debug_menu.svelte
View File

@@ -4,7 +4,7 @@
// *** Import other supporting libraries
import {
Bug,
CircleX,
CircleX, Info,
ToggleLeft, ToggleRight,
X
} from '@lucide/svelte';
@@ -111,10 +111,10 @@ hover:opacity-100 -->
$ae_loc.debug_mode = !$ae_loc?.debug_mode;
}}
class="
btn btn-sm preset-tonal-surface border-sm border-surface-500 hover:preset-tonal-warning
transition-all *:hover:inline-block
btn btn-sm
preset-outlined-surface-400-600 preset-filled-suface-200-800
hover:preset-tonal-success
transition-all
"
title="Turn debug content and styles off and on"
>
@@ -139,6 +139,29 @@ hover:opacity-100 -->
</button>
<button
type="button"
onclick={() => {
if (log_lvl) {
console.log('Showing quick info/debug menu.');
}
expand = false;
$ae_sess.debug_menu.hide_quick_info = false;
}}
title="Show Quick Info"
class="
btn btn-sm
preset-outlined-surface-400-600 preset-filled-suface-200-800
hover:preset-tonal-success
transition-all
"
>
<!-- <span class="fas fa-info-circle mx-1"></span> -->
<Info class="inline-block mx-1" />
Quick Info
</button>
<button
type="button"
onclick={() => {
@@ -147,8 +170,10 @@ hover:opacity-100 -->
expand = !expand;
}}
class="
btn btn-sm preset-tonal-surface border-sm border-surface-500 hover:preset-tonal-warning
transition-all *:hover:inline-block
btn btn-sm
preset-outlined-surface-400-600 preset-filled-suface-200-800
hover:preset-tonal-warning
transition-all
"
title="Turn debug content and styles off and on"
>

24
src/lib/e_app_sys_menu.svelte
View File

@@ -164,16 +164,18 @@ max-w-max -->
<div
class="flex flex-col gap-1 items-start justify-center transition-all w-full group"
title="
ID: {$ae_loc?.person_id ?? '-- not set --'} / {$ae_loc?.user_id ?? '-- not set --'}
Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
Username: {$ae_loc?.user?.username ?? '-- not set --'}
Email: {$ae_loc?.user?.email ?? '-- not set --'}
"
>
<span class="flex flex-row gap-1 w-32">
<span class="flex flex-row gap-1 w-16">
<User class="mx-1 inline-block text-gray-500" />
<span
class:hidden={!expand}
class="group-hover:inline-block"
class:hidden={!expand}>
>
{$ae_loc?.person?.full_name_override ?? $ae_loc?.person?.full_name}
</span>
</span>
@@ -189,10 +191,10 @@ max-w-max -->
{/if}
<div class="flex flex-row gap-1 items-center justify-between transition-all w-full">
<div class="flex flex-row gap-1 items-center justify-end transition-all w-full">
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
<span
class="flex flex-row gap-1 group"
class="flex flex-row-reverse gap-1 group"
title={`Current access type/level: ${$ae_loc.access_type}`}
>
<!-- <span class="fas fa-unlock mx-1"></span> -->
@@ -202,38 +204,38 @@ max-w-max -->
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-hat-wizard m-1"></span>
<span
class="hidden group-hover:inline-block"
class:hidden={!expand}
class="hidden group-hover:inline-block"
>Super</span>
{:else if $ae_loc.access_type == 'manager'}
<span class="fas fa-user-shield m-1"></span>
<span
class="hidden group-hover:inline-block"
class:hidden={!expand}
class="hidden group-hover:inline-block"
>Manager</span>
{:else if $ae_loc.access_type == 'administrator'}
<span class="fas fa-user-ninja m-1"></span>
<span
class="hidden group-hover:inline-block"
class:hidden={!expand}
class="hidden group-hover:inline-block"
>Administrator</span>
{:else if $ae_loc.access_type == 'trusted'}
<span class="fas fa-user-check m-1"></span>
<span
class="hidden group-hover:inline-block"
class:hidden={!expand}
class="hidden group-hover:inline-block"
>Trusted Access</span>
{:else if $ae_loc.access_type == 'public'}
Public
<span
class="hidden group-hover:inline-block"
class:hidden={!expand}
class="hidden group-hover:inline-block"
>Access</span>
{:else if $ae_loc.access_type == 'authenticated'}
Authenticated
<span
class="hidden group-hover:inline-block"
class:hidden={!expand}
class="hidden group-hover:inline-block"
>Access</span>
{:else if $ae_loc.access_type == 'anonymous'}
Anonymous Access
@@ -306,6 +308,7 @@ max-w-max -->
}}
class="
btn btn-sm text-xs
flex-row-reverse
variant-outline-surface hover:variant-ghost-warning
transition-all group
"
@@ -340,6 +343,7 @@ max-w-max -->
}}
class="
btn btn-sm text-xs
flex-row-reverse
variant-outline-surface hover:variant-ghost-success
transition-all group
"

259
src/routes/+layout.svelte
View File

@@ -13,13 +13,13 @@ import '../app.css';
// *** Import other supporting libraries
import {
ArrowBigRight,
// CircleX,
CircleX,
// Eye, EyeOff,
// Key,
// LogIn, LogOut, LockKeyhole,
// Mail, MailCheck,
// Menu,
RefreshCw, RefreshCcwDot,
RefreshCw, RefreshCcw, RefreshCcwDot,
// ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
// User, UserCheck
} from '@lucide/svelte';
@@ -48,6 +48,7 @@ import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import { events_loc, events_slct } from '$lib/ae_events_stores';
// import type { key_val } from '$lib/ae_stores';
import MyClipboard from '$lib/e_app_clipboard.svelte';
import E_app_debug_menu from '$lib/e_app_debug_menu.svelte';
import E_app_sys_menu from '$lib/e_app_sys_menu.svelte';
// import Element_access_type from '$lib/element_access_type.svelte';
@@ -706,20 +707,224 @@ $effect(() => {
</script>
<svelte:head>
<link rel="stylesheet" href="{ae_acct.loc.site_style_href}">
<!-- <link rel="manifest" href="/manifest.json"> -->
</svelte:head>
{#if $ae_loc?.site_google_tracking_id && $ae_loc?.site_google_tracking_id.length > 0}
<Analytics bind:site_google_tracking_id={$ae_loc.site_google_tracking_id} />
{/if}
<svelte:head>
<!-- <title>{$ae_loc.title ?? 'Æ loading...'}</title> -->
<link rel="stylesheet" href="{ae_acct.loc.site_style_href}">
<!-- <link rel="manifest" href="/manifest.json"> -->
</svelte:head>
<!-- class:z-index-50={$ae_loc?.debug_mode} -->
<!-- hover:bg-neutral-500/75 -->
<!-- focus:bg-neutral-500/75 -->
<!-- active:bg-neutral-500/75 -->
<div
class:hidden={browser && $ae_sess?.debug_menu?.hide_quick_info}
class="
fixed top-0 bottom-0 w-full
flex flex-col
gap-1 items-center justify-start
p-2
bg-neutral-500/50
z-10
transition-all
"
>
<!-- WARNING: Generally this debug status popover should disapear very quickly when the page is loading correctly. If the page load fails, there is a good chance that JS no longer works as expected. Specifically, changing classes does not seem to work. -->
<!-- class:hover:opacity-70={$ae_sess?.debug_menu?.hide_quick_info} -->
<!-- class:opacity-30={$ae_sess.debug_menu.hide_quick_info} -->
<div
class:opacity-90={!$ae_sess.debug_menu.hide_quick_info}
class:md:opacity-90={!$ae_sess.debug_menu.hide_quick_info}
class="
top-0
w-full max-w-lg
flex flex-col
gap-1 items-center justify-center
rounded-lg p-2
preset-outlined-surface-600-400
preset-filled-surface-200-800
opacity-70 md:opacity-50
"
>
<!-- regionFooter="flex justify-end space-x-2" -->
<div
class:hidden={browser}
class="flex flex-row items-center justify-between w-full"
>
<span class="fas fa-cog fa-spin m-1"></span>
<span class="text-center">App loading</span>
<span class="fas fa-cog fa-spin m-1"></span>
</div>
<div class="w-full flex flex-row flex-wrap gap-1 items-center justify-between">
<button
type="button"
onclick={() => {
if ($ae_sess?.debug_menu?.hide_quick_info) {
$ae_sess.debug_menu.hide_quick_info = false;
console.log('Showing quick info/debug menu.');
} else {
$ae_sess.debug_menu.hide_quick_info = true;
console.log('Hiding quick info/debug menu.')
};
// if (log_lvl) {
// console.log('Toggling quick info/debug menu:', $ae_sess.debug_menu.hide_quick_info);
// }
}}
>
<span class="font-bold text-lg">
Quick Debug Info
</span>
</button>
<button
type="button"
onclick={() => {
$ae_sess.debug_menu.hide_quick_info = true;
if (log_lvl) {
console.log('Hiding quick info/debug menu.');
}
}}
class:hidden={$ae_sess?.debug_menu?.hide_quick_info}
class="
btn btn-sm
preset-outlined-surface-400-600 preset-filled-suface-200-800
hover:preset-tonal-warning
transition-all
"
title="Close Quick Info"
>
<!-- <span class="fas fa-times-circle mx-1"></span> -->
<CircleX class="inline-block mx-1" />
Close Quick Info
</button>
</div>
<div class="flex flex-row flex-wrap gap-1 items-center justify-center">
<button
class="
btn btn-sm
preset-outlined-warning-800-200 preset-filled-warning-100-900
hover:preset-tonal-success
"
title="Reload and clear the page cache"
onclick={() => {
clear_idb();
window.location.reload(true);
}}
>
<!-- <span class="fas fa-sync mx-1"></span> -->
<RefreshCcw class="inline-block mx-1" />
Quick Page Reload
<!-- & -->
<!-- <span class="fas fa-trash mx-1"></span> -->
<!-- Clear Cache -->
</button>
<button
type="button"
onclick={() => {
if (!confirm('Are you sure you want to clear the local and session storage?')) {
return false;
}
// // Clear the local and session storage
// localStorage.clear();
// sessionStorage.clear();
// // Clear Indexed DB as well
// indexedDB.deleteDatabase('ae_core_db');
// indexedDB.deleteDatabase('ae_archives_db');
// indexedDB.deleteDatabase('ae_events_db');
// indexedDB.deleteDatabase('ae_posts_db');
// window.location.reload();
// // alert('Local and Session Storage cleared and Indexed DBs deleted. You will probably want to refresh the page.');
console.log('Reloading page...');
// Clear the IndexedDB
clear_idb();
// Clear localStorage and sessionStorage
clear_local();
// clear_sess();
// alert('IDB, Local, and Session Storage cleared. The page should now refresh on its own.');
window.location.reload();
}}
class="
btn btn-sm
m-1
preset-outlined-error-800-200 preset-filled-error-100-900
hover:preset-tonal-success
transition-all text-wrap
"
title="Reload and clear the page cache"
>
<!-- <span class="fas fa-sync mx-1"></span> -->
<RefreshCcwDot class="inline-block mx-1" />
<span>
Clear Cache and Reload
</span>
</button>
<MyClipboard
value={
`
Datetime = ${new Date().toISOString()}
URL = ${data.url.href}
Browser = ${navigator.userAgent}
account_id = ${$slct.account_id}
iframe = ${$ae_loc?.iframe}
access_type = ${$ae_loc?.access_type}
person_id = ${$ae_loc?.person_id}
full_name = ${$ae_loc?.full_name}
user_id = ${$ae_loc?.user_id}
username = ${$ae_loc?.username}
email = ${$ae_loc?.email}
`}
btn_text="Copy Quick Info"
btn_title="Copy quick debug info to clipboard"
btn_class="
novi_btn
btn btn-sm
preset-outlined-tertiary-800-200
preset-filled-tertiary-200-800
hover:preset-filled-tertiary-600-400
transition
"
></MyClipboard>
</div>
<table class="table-auto w-full text-sm">
<thead>
<tr class=""><th>Key</th><th>Value</th></tr>
</thead>
<tbody class="[&>tr]:hover:preset-tonal-primary [&>tr>td]:px-1">
<tr class=""><td class="text-right">Datetime =</td><td>{new Date().toISOString()}</td></tr>
<tr class=""><td class="text-right">URL =</td><td><span class="text-xs">{data.url.href}</span></td></tr>
<tr class=""><td class="text-right">Browser</td><td><span class="text-xs">{navigator.userAgent}</span></td></tr>
<tr class=""><td class="text-right">account_id =</td><td>{$slct.account_id}</td></tr>
<tr class=""><td class="text-right">iframe =</td><td>{$ae_loc?.iframe}</td></tr>
<tr class=""><td class="text-right">access_type =</td><td>{$ae_loc?.access_type}</td></tr>
<tr class=""><td class="text-right">person_id =</td><td>{$ae_loc?.person_id}</td></tr>
<tr class=""><td class="text-right">full_name =</td><td>{$ae_loc?.person?.full_name}</td></tr>
<tr class=""><td class="text-right">user_id =</td><td>{$ae_loc?.user_id}</td></tr>
<tr class=""><td class="text-right">username</td><td>{$ae_loc?.user?.username}</td></tr>
<tr class=""><td class="text-right">email =</td><td>{$ae_loc?.user?.email}</td></tr>
</tbody>
</table>
</div>
</div>
{#if (browser && flag_new_ver)}
<div class="flex flex-col items-center justify-center max-w-lg mx-auto space-y-6 border border-red-500 rounded-lg p-4 bg-green-50 dark:bg-green-900 m-8">
@@ -936,6 +1141,7 @@ $effect(() => {
{@render children?.()}
{:else if (browser || flag_reload)}
<div class="flex flex-col items-center justify-center max-w-lg mx-auto space-y-6 border border-red-500 rounded-lg p-4 bg-green-50 dark:bg-green-900 m-8">
<div>
<span class="fas fa-spinner fa-spin mx-1"></span>
@@ -945,34 +1151,7 @@ $effect(() => {
{/if}
<span class:hidden={browser}>
<span>
Loading...
</span>
<button
type="button"
onclick={() => {
console.log('Reloading page...');
// Clear the IndexedDB
clear_idb();
// Clear localStorage and sessionStorage
clear_local();
// clear_sess();
alert('IDB, Local, and Session Storage cleared. The page should now refresh on its own.');
window.location.reload();
}}
class="btn btn-sm m-1 preset-filled-warning-200-800 preset-outlined-error-600-400 hover:preset-tonal-error text-error-700 hover:text-error-900 transition-all text-wrap"
title="Reload and clear the page cache"
>
<span class="fas fa-sync mx-1"></span>
<span>
Clear Cache and Reload
</span>
</button>
</span>
{#if (browser) }
<!-- Always show if Trusted access or higher. Do not show if in iframe mode. -->
@@ -985,7 +1164,7 @@ $effect(() => {
<!-- The app debug menu -->
<E_app_debug_menu
hide={$ae_loc.debug_menu.hide}
bind:hide={$ae_loc.debug_menu.hide}
bind:expand={$ae_loc.debug_menu.expand}
/>
{:else}
@@ -993,7 +1172,7 @@ $effect(() => {
{/if}
{:else}
<div class="flex flex-col items-center justify-center max-w-lg mx-auto space-y-6 border border-red-500 rounded-lg p-4 bg-green-50 dark:bg-green-900 m-8">
<!-- <div class="flex flex-col items-center justify-center max-w-lg mx-auto space-y-6 border border-red-500 rounded-lg p-4 bg-green-50 dark:bg-green-900 m-8">
<div>
<span class="fas fa-spinner fa-spin mx-1"></span>
Layout loading...
@@ -1007,7 +1186,6 @@ $effect(() => {
class="btn btn-sm m-1 preset-tonal-secondary border-secondary-500 hover:preset-tonal-warning border-warning-500 hover:variant-outline-warning text-warning-800 hover:text-warning-900 transition-all"
title="Reload page to clear some caches and check for updates"
>
<!-- <span class="fas fa-sync mx-1"></span> -->
<RefreshCw class="mx-1" />
<span>
Reload
@@ -1032,13 +1210,12 @@ $effect(() => {
class="btn btn-sm m-1 preset-tonal-secondary border-secondary-500 hover:preset-tonal-warning border-warning-500 hover:variant-outline-warning text-error-700 hover:text-error-900 transition-all text-wrap"
title="Reload and clear the page cache"
>
<!-- <span class="fas fa-sync mx-1"></span> -->
<RefreshCcwDot class="mx-1" />
<span>
Clear Cache and Reload
</span>
</button>
</div>
</div> -->
{/if}

4
src/routes/+page.svelte
View File

@@ -29,6 +29,10 @@ onMount(() => {
});
</script>
<svelte:head>
<title>{$ae_loc.title ?? 'Æ loading...'}</title>
</svelte:head>
<section
class="ae_root md:container h-full mx-auto flex flex-col items-center p-4 space-y-12"