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

Pulling out parts into separate files. Also minor clean up.

Browse Source
This commit is contained in:
Scott Idem
2025-05-02 10:48:09 -04:00
parent f2751cbaf9
commit 77c53065bc
8 changed files with 650 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/ae_stores.ts
View File

@@ -66,9 +66,10 @@ const ae_app_local_data_defaults: key_val = {
iframe: false,
title: `OSIT's Æ`, // - Dev SvelteKit`, // Æ
debug: false, // A simple flag to know if we should show debug information.
edit_mode: false, // A simple flag to know if we should show edit mode options.
sync_local_config: true, // A simple flag to know if we should sync local config with the remote API server.
debug_menu: false, // Flag show debug menu.
debug_mode: false, // Flag to know if we should be in debug mode and show show debug options.
edit_mode: false, // Flag to know if we should be in edit mode and show edit options.
sync_local_config: true, // Flag to know if we should sync local config with the remote API server.
'account_id': ae_account_id, // OSIT Demo _XY7DXtc9MY
'account_code': 'not_set',

0
src/lib/element_access_type.svelte → src/lib/e_app_access_type.svelte
View File

2
src/lib/element_app_cfg.svelte → src/lib/e_app_cfg.svelte
View File

@@ -5,7 +5,7 @@ import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import Element_theme from '$lib/element_theme.svelte';
import Element_theme from '$lib/e_app_theme.svelte';
let notes: null|string = null;
let all: boolean = false;

247
src/lib/e_app_debug_menu.svelte Normal file
View File

@@ -0,0 +1,247 @@
<script lang="ts">
// *** Import Svelte specific
// *** Import other supporting libraries
import {
Bug,
CircleX,
ToggleLeft, ToggleRight,
X
} from '@lucide/svelte';
// *** Import Aether specific variables and functions
// import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
// *** Setup Svelte properties
interface Props {
log_lvl?: number;
show_debug_menu: boolean;
hidden: null|boolean;
}
let {
log_lvl = 0,
show_debug_menu = false,
hidden = true,
}: Props = $props();
</script>
<!-- App Debug Menu -->
<!-- opacity-25
hover:opacity-100 -->
<!-- text-slate-400 hover:text-slate-800 -->
<div
class="
absolute bottom-0 left-0
flex
text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg
dark:text-slate-400 dark:hover:text-slate-200
bg-red-100/60 dark:bg-red-800/50
hover:bg-red-200 hover:dark:bg-red-900
mx-1 my-2
max-h-min
max-w-lg
transition-all
transition-delay-1000
transition-duration-1000
ease-in
z-50
border-2
border-red-300 dark:border-red-700
hover:border-red-500 hover:dark:border-red-500
"
class:top-0={$ae_loc?.debug_menu}
class:w-full={$ae_loc?.debug_menu}
class:hidden={!$ae_loc?.trusted_access}
class:border-transparent={!$ae_loc?.debug_menu}
class:hover:border-transparent={!$ae_loc?.debug_menu}
class:hover:bg-transparent={!$ae_loc?.debug_menu}
>
<div
class:hidden={!$ae_loc?.debug_menu}
class:border-red-200={$ae_loc?.debug_menu}
class:dark:border-red-800={$ae_loc?.debug_menu}
class="
transition-all
transition-delay-1000
transition-duration-1000
ease-in
overflow-y-auto
px-1 py-4
opacity-50
hover:opacity-100
relative
"
>
<!-- flex flex-col items-center justify-center max-h-full outline -->
<div>
<!-- <span class="fas fa-bug mx-1"></span> -->
<Bug class="inline-block mx-1" />
<span>Debug</span>
</div>
<pre>
{JSON.stringify($ae_loc, null, 2)}
</pre>
</div>
<span class="absolute top-0 right-0 flex flex-row gap-1 items-center justify-center">
<button
type="button"
onclick={() => {
console.log('Debug ae_loc:', $ae_loc);
$ae_loc.debug_mode = !$ae_loc?.debug_mode;
}}
class="
btn btn-sm variant-ghost-surface hover:variant-ghost-warning
transition-all *:hover:inline-block
"
title="Turn debug content and styles off and on"
>
{#if $ae_loc?.debug_mode}
<!-- <span class="fas fa-toggle-on mx-1"></span> -->
<ToggleRight strokeWidth="2.5" color="green" class="inline-block mx-1" />
<span>Debug</span>
<span class="hidden">
Mode On
</span>
{:else}
<!-- <span class="fas fa-toggle-off mx-1"></span> -->
<ToggleLeft strokeWidth="1" color="gray" class="inline-block mx-1" />
<span>Debug?</span>
<span class="hidden">
Mode Off
</span>
{/if}
<!-- <span class="fas fa-toggle-on mx-1"></span> -->
<!-- <ToggleRight class="inline-block mx-1" /> -->
<!-- <X class="inline-block mx-1" /> -->
</button>
<button
type="button"
onclick={() => {
console.log('Debug ae_loc:', $ae_loc);
$ae_loc.debug_menu = !$ae_loc?.debug_menu;
}}
class="
btn btn-sm variant-ghost-surface hover:variant-ghost-warning
transition-all *:hover:inline-block
"
title="Turn debug content and styles off and on"
>
<!-- <span class="fas fa-toggle-on mx-1"></span> -->
<!-- <ToggleRight class="inline-block mx-1" /> -->
<CircleX class="inline-block mx-1" />
<span class="hidden">
Close
</span>
<span>Debug</span>
</button>
</span>
<button
type="button"
onclick={() => {
console.log('Debug ae_loc:', $ae_loc);
$ae_loc.debug_menu = !$ae_loc?.debug_menu;
}}
id="AE-Quick-Debug"
class="
btn btn-icon
variant-ghost-surface
hover:variant-ghost-warning
transition-all
fixed bottom-2 left-2
text-gray-400 hover:text-gray-800
"
title="Turn debug content and styles off and on"
>
<!-- absolute bottom-2 left-2 -->
<!-- fixed bottom-0 left-0 -->
&pi;
</button>
</div>
<style lang="postcss">
/* BEGIN: AE's Svelte Quick Debug component */
#AE-Quick-Debug {
/* position: absolute; */
/* position: fixed; */
/* position: relative; */
/* position: static; */
/* position: sticky; */
/* top: 1em; */
/* bottom: 2rem; */
/* left: 1rem; */
/* padding: .0rem; */
/* lightyellow */
/* background-color: hsla(60,100%,90%,.30); */
/* background-color: rgba(var(--color-surface-500) / .5); */
/* border: none;
border-top: solid thin hsla(0,0%,0%,.25);
border-left: solid thin hsla(0,0%,0%,.25);
border-bottom: solid thin hsla(0,0%,0%,.25); */
/* border-top-left-radius: .5em; */
/* border-bottom-left-radius: .5em; */
/* opacity: .15; */
/* opacity: 1; */
font-size: .75rem;
/* z-index: 15; */
/* NOTE: transition when no longer hovering */
transition-property: opacity, background-color;
transition-delay: 1.25s;
transition-duration: .5s;
transition-timing-function: ease-out;
}
#AE-Quick-Debug:hover {
/* lightyellow */
/* background-color: hsla(60,100%,90%,.95); */
/* background-color: rgba(var(--color-surface-500) / 1); */
/*
border-top: solid thin hsla(0,0%,0%,.95);
border-left: solid thin hsla(0,0%,0%,.95);
border-bottom: solid thin hsla(0,0%,0%,.95); */
/* opacity: 1; */
/* padding: .5rem; */
font-size: 1.5rem;
/* Need to zoom 3.5 when hovering */
/* transform: scale(3.5); */
/* NOTE: transition when hover starts */
transition-property: opacity, background-color;
transition-delay: .5s;
transition-duration: .10s;
transition-timing-function: ease-in;
}
</style>

0
src/lib/element_sign_in_out.svelte → src/lib/e_app_sign_in_out.svelte
View File

380
src/lib/e_app_sys_menu.svelte Normal file
View File

@@ -0,0 +1,380 @@
<script lang="ts">
// *** Import Svelte specific
import { tick } from 'svelte';
// import { goto, invalidateAll } from '$app/navigation';
// *** Import other supporting libraries
import {
// ArrowBigRight,
// Bug,
CircleX,
// Eye, EyeOff,
// Key,
// LogIn, LogOut, LockKeyhole,
// Mail, MailCheck,
Menu,
// RefreshCw, RefreshCcwDot,
ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
// ToggleLeft, ToggleRight,
User, UserCheck,
X
} from '@lucide/svelte';
// *** Import Aether specific variables and functions
// import { ae_util } from '$lib/ae_utils/ae_utils';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import Element_access_type from '$lib/e_app_access_type.svelte';
import Element_app_cfg from '$lib/e_app_cfg.svelte';
import Element_sign_in_out from '$lib/e_app_sign_in_out.svelte';
// *** Setup Svelte properties
interface Props {
log_lvl?: number;
data: any;
show_sys_menu: boolean;
hidden: null|boolean;
}
let {
log_lvl = 0,
data = null,
show_sys_menu = false,
hidden = true,
}: Props = $props();
let trigger_clear_access: null|boolean = $state(null);
</script>
<!-- App System Menu -->
<!-- min-h-full
max-h-max
min-w-full
max-w-max -->
<section
class="
ae_app__menu
hidden-print
flex flex-col
items-end justify-center
gap-1
absolute right-0 bottom-16
hover:bottom-6
bg-white dark:bg-gray-800
border border-transparent
hover:border hover:border-gray-200 hover:dark:border-gray-700
rounded-lg
p-2
*:hover:inline
opacity-40
hover:opacity-100
duration-50 delay-1000 hover:delay-100 hover:ease-out
transition hover:transition-all
z-10 hover:z-20
"
class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn}
>
<span class="hidden"
title="
Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
Username: {$ae_loc?.user?.username ?? '-- not set --'}
Email: {$ae_loc?.user?.email ?? '-- not set --'}
"
>
<User class="mx-1 inline-block text-gray-500" />
{$ae_loc?.person?.full_name ?? '-- not set --'}<br />
<!-- <ShieldUser /> -->
<ShieldUser class="mx-1 inline-block text-gray-500" />
{$ae_loc?.user?.username ?? '-- not set --'}<br />
</span>
{#if $ae_loc.edit_mode}
<button
type="button"
onclick={() => {
$ae_loc.edit_mode = false;
// dispatch_edit_mode_changed();
}}
class="btn btn-md px-2 variant-ghost-success hover:variant-filled-success transition-all *:hover:inline-block"
title="Edit mode is currently enabled. Click to disable."
>
<span class="fas fa-toggle-on mx-1"></span>
Edit
<span class="hidden">
Mode On
</span>
</button>
{:else if $ae_loc.authenticated_access}
<button
type="button"
onclick={() => {
$ae_loc.edit_mode = true;
// dispatch_edit_mode_changed();
}}
class="btn btn-md px-2 variant-ghost-warning hover:variant-filled-warning transition-all space-x-0 *:hover:inline"
title="Edit mode is currently disabled. Click to enable."
>
<span class="fas fa-toggle-off mx-1"></span>
<span class="">Edit</span>
<span class="hidden">
Mode?
</span>
</button>
{/if}
<div class="flex flex-row flex-wrap gap-1 items-center justify-center transition-all *:hover:inline">
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
<span
class="*:hover:inline"
title={`Current access type/level: ${$ae_loc.access_type}`}
>
<!-- <span class="fas fa-unlock mx-1"></span> -->
<ShieldPlus class="inline-block" />
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-hat-wizard m-1"></span>
<span class="hidden">Super</span>
{:else if $ae_loc.access_type == 'manager'}
<span class="fas fa-user-shield m-1"></span>
<span class="hidden">Manager</span>
{:else if $ae_loc.access_type == 'administrator'}
<span class="fas fa-user-ninja m-1"></span>
<span class="hidden">Administrator</span>
{:else if $ae_loc.access_type == 'trusted'}
<span class="fas fa-user-check m-1"></span>
<span class="hidden">Trusted Access</span>
{:else if $ae_loc.access_type == 'public'}
Public
<span class="hidden">Access</span>
{:else if $ae_loc.access_type == 'authenticated'}
Authenticated
<span class="hidden">Access</span>
{:else if $ae_loc.access_type == 'anonymous'}
Anonymous Access
{:else}
Unknown Access
{/if}
</span>
{#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
<button
type="button"
onclick={() => {
// handle_clear_access();
// trigger_clear_access = true;
// $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true;
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
}}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
>
<!-- <span class="fas fa-lock mx-1"></span> -->
<!-- <ShieldMinus /> -->
<ShieldEllipsis class="inline-block" />
<span class="hidden">Passcode?</span>
</button>
{:else}
<button
type="button"
onclick={() => {
trigger_clear_access = true;
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true;
// await tick();
// console.log('Layout button click: Focus on passcode input!');
// /** @type {HTMLElement | null} */
// const to_focus = document.getElementById('access_passcode_input');
// to_focus?.focus();
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
}}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden"
title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
>
<!-- <span class="fas fa-lock mx-1"></span> Lock? -->
<ShieldMinus class="inline-block" />
Clear?
</button>
{/if}
{:else}
<button
type="button"
onclick={async () => {
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true;
await tick();
console.log('Layout button click: Focus on passcode input!');
/** @type {HTMLElement | null} */
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
}}
class="
btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
*:hover:inline
"
title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
>
<!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
<!-- <span class="">Unlock?</span> -->
<ShieldUser class="inline-block" />
<span class="hidden">Auth?</span>
</button>
{/if}
</div>
<button
type="button"
class="btn btn-sm variant-outline-surface hover:variant-ghost-success *:hover:inline-block w-full hidden px-6 py-1"
title="Sign In"
onclick={async () => {
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
if ($ae_loc?.access_type == 'anonymous') {
$ae_loc.app_cfg.show_element__passcode_input = true;
} else {
$ae_loc.app_cfg.show_element__passcode_input = false;
}
// $ae_loc.app_cfg.show_element__passcode_input = true;
await tick();
console.log('Layout button click: Focus on passcode input!');
/** @type {HTMLElement | null} */
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
$ae_loc.app_cfg.show_element__passcode_input = false;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
}}
>
{#if $ae_loc?.app_cfg?.show_element__menu}
<CircleX class="inline-block" />
<!-- <span class="hidden"> -->
Hide Menu
<!-- </span> -->
{:else}
<Menu class="inline-block" />
<span class="hidden">
Menu
</span>
{/if}
</button>
</section>
<!-- Show menu on right side of page -->
<!-- min-h-96 -->
<section
class="
ae_app__menu
hidden-print
flex flex-col
items-center
justify-end
gap-4
min-w-48
absolute right-0 bottom-10
bg-white dark:bg-gray-800
border border-gray-200 dark:border-gray-700
rounded-lg
p-2
opacity-50
hover:opacity-100
duration-100 delay-1000 hover:delay-100 hover:ease-out
transition hover:transition-all
z-20 hover:z-30
"
class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
>
<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
<span
class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
>
<Element_app_cfg
set_theme_mode={true}
set_theme_name={true}
/>
</span>
<!-- {/if} -->
{#if $ae_loc?.app_cfg?.show_element__sign_in_out}
<Element_sign_in_out
data={data}
hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
/>
{/if}
{#if $ae_loc?.app_cfg?.show_element__access_type}
<Element_access_type
show_passcode_input={$ae_loc?.app_cfg?.show_element__passcode_input}
trigger_clear_access={trigger_clear_access}
hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !$ae_loc?.app_cfg?.show_element__menu}
/>
{/if}
<button
type="button"
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning *:hover:inline w-full px-6 py-1"
title="Sign In"
onclick={() => {
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
// $ae_loc.app_cfg.show_element__menu = !$ae_loc?.app_cfg?.show_element__menu;
}}
>
{#if $ae_loc?.app_cfg?.show_element__menu}
<CircleX class="mx-1 inline-block" />
<!-- <span class="hidden"> -->
Hide Menu
<!-- </span> -->
{:else}
<Menu class="mx-1 inline-block" />
<!-- <span class="hidden"> -->
Menu
<!-- </span> -->
{/if}
</button>
</section>

0
src/lib/element_theme.svelte → src/lib/e_app_theme.svelte
View File

532
src/routes/+layout.svelte
View File

@@ -5,7 +5,7 @@
let log_lvl: number = 0;
// *** Import Svelte specific
import { tick } from 'svelte';
// import { tick } from 'svelte';
import { goto, invalidateAll } from '$app/navigation';
import '../app.postcss';
@@ -27,15 +27,15 @@ const modalRegistry: Record<string, ModalComponent> = {
};
import {
ArrowBigRight,
CircleX,
Eye, EyeOff,
Key,
LogIn, LogOut, LockKeyhole,
Mail, MailCheck,
Menu,
// CircleX,
// Eye, EyeOff,
// Key,
// LogIn, LogOut, LockKeyhole,
// Mail, MailCheck,
// Menu,
RefreshCw, RefreshCcwDot,
ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
User, UserCheck
// ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
// User, UserCheck
} from '@lucide/svelte';
// Highlight JS
@@ -62,9 +62,11 @@ 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 Element_access_type from '$lib/element_access_type.svelte';
import Element_app_cfg from '$lib/element_app_cfg.svelte';
import Element_sign_in_out from '$lib/element_sign_in_out.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';
// import Element_app_cfg from '$lib/element_app_cfg.svelte';
// import Element_sign_in_out from '$lib/element_sign_in_out.svelte';
// import Element_data_store from '$lib/element_data_store_v2.svelte';
@@ -914,512 +916,14 @@ $effect(() => {
{/if}
<!-- min-h-full
max-h-max
min-w-full
max-w-max -->
{#if (browser) }
<!-- Toggle the menu -->
<section
class="
ae_app__menu
hidden-print
flex flex-col
items-end justify-center
gap-1
absolute right-0 bottom-16
hover:bottom-6
bg-white dark:bg-gray-800
border border-transparent
hover:border hover:border-gray-200 hover:dark:border-gray-700
rounded-lg
p-2
*:hover:inline
opacity-40
hover:opacity-100
duration-50 delay-1000 hover:delay-100 hover:ease-out
transition hover:transition-all
z-10 hover:z-20
"
class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn}
>
<span class="hidden"
title="
Name: {$ae_loc?.person?.full_name ?? '-- not set --'}
Username: {$ae_loc?.user?.username ?? '-- not set --'}
Email: {$ae_loc?.user?.email ?? '-- not set --'}
"
>
<User class="mx-1 inline-block text-gray-500" />
{$ae_loc?.person?.full_name ?? '-- not set --'}<br />
<!-- <ShieldUser /> -->
<ShieldUser class="mx-1 inline-block text-gray-500" />
{$ae_loc?.user?.username ?? '-- not set --'}<br />
</span>
{#if $ae_loc.edit_mode}
<button
type="button"
onclick={() => {
$ae_loc.edit_mode = false;
// dispatch_edit_mode_changed();
}}
class="btn btn-md px-2 variant-ghost-success hover:variant-filled-success transition-all *:hover:inline-block"
title="Edit mode is currently enabled. Click to disable."
>
<span class="fas fa-toggle-on mx-1"></span>
Edit
<span class="hidden">
Mode On
</span>
</button>
{:else if $ae_loc.authenticated_access}
<button
type="button"
onclick={() => {
$ae_loc.edit_mode = true;
// dispatch_edit_mode_changed();
}}
class="btn btn-md px-2 variant-ghost-warning hover:variant-filled-warning transition-all space-x-0 *:hover:inline"
title="Edit mode is currently disabled. Click to enable."
>
<span class="fas fa-toggle-off mx-1"></span>
<span class="">Edit</span>
<span class="hidden">
Mode?
</span>
</button>
{/if}
<div class="flex flex-row flex-wrap gap-1 items-center justify-center transition-all *:hover:inline">
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
<span
class="*:hover:inline"
title={`Current access type/level: ${$ae_loc.access_type}`}
>
<!-- <span class="fas fa-unlock mx-1"></span> -->
<ShieldPlus class="inline-block" />
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-hat-wizard m-1"></span>
<span class="hidden">Super</span>
{:else if $ae_loc.access_type == 'manager'}
<span class="fas fa-user-shield m-1"></span>
<span class="hidden">Manager</span>
{:else if $ae_loc.access_type == 'administrator'}
<span class="fas fa-user-ninja m-1"></span>
<span class="hidden">Administrator</span>
{:else if $ae_loc.access_type == 'trusted'}
<span class="fas fa-user-check m-1"></span>
<span class="hidden">Trusted Access</span>
{:else if $ae_loc.access_type == 'public'}
Public
<span class="hidden">Access</span>
{:else if $ae_loc.access_type == 'authenticated'}
Authenticated
<span class="hidden">Access</span>
{:else if $ae_loc.access_type == 'anonymous'}
Anonymous Access
{:else}
Unknown Access
{/if}
</span>
{#if $ae_loc?.user_access_type && $ae_loc?.access_type == $ae_loc?.user_access_type}
<button
type="button"
onclick={() => {
// handle_clear_access();
// trigger_clear_access = true;
// $ae_loc.app_cfg.show_element__passcode_input = !$ae_loc.app_cfg.show_element__passcode_input;
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true;
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
}}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
>
<!-- <span class="fas fa-lock mx-1"></span> -->
<!-- <ShieldMinus /> -->
<ShieldEllipsis class="inline-block" />
<span class="hidden">Passcode?</span>
</button>
{:else}
<button
type="button"
onclick={() => {
trigger_clear_access = true;
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true;
// await tick();
// console.log('Layout button click: Focus on passcode input!');
// /** @type {HTMLElement | null} */
// const to_focus = document.getElementById('access_passcode_input');
// to_focus?.focus();
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
}}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden"
title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
>
<!-- <span class="fas fa-lock mx-1"></span> Lock? -->
<ShieldMinus class="inline-block" />
Clear?
</button>
{/if}
{:else}
<button
type="button"
onclick={async () => {
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
$ae_loc.app_cfg.show_element__passcode_input = true;
await tick();
console.log('Layout button click: Focus on passcode input!');
/** @type {HTMLElement | null} */
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
}}
class="
btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
*:hover:inline
"
title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
>
<!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
<!-- <span class="">Unlock?</span> -->
<ShieldUser class="inline-block" />
<span class="hidden">Auth?</span>
</button>
{/if}
</div>
<button
type="button"
class="btn btn-sm variant-outline-surface hover:variant-ghost-success *:hover:inline-block w-full hidden px-6 py-1"
title="Sign In"
onclick={async () => {
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
$ae_loc.app_cfg.show_element__access_type = true;
if ($ae_loc?.access_type == 'anonymous') {
$ae_loc.app_cfg.show_element__passcode_input = true;
} else {
$ae_loc.app_cfg.show_element__passcode_input = false;
}
// $ae_loc.app_cfg.show_element__passcode_input = true;
await tick();
console.log('Layout button click: Focus on passcode input!');
/** @type {HTMLElement | null} */
const to_focus = document.getElementById('access_passcode_input');
to_focus?.focus();
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
$ae_loc.app_cfg.show_element__passcode_input = false;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
}}
>
{#if $ae_loc?.app_cfg?.show_element__menu}
<CircleX class="inline-block" />
<!-- <span class="hidden"> -->
Hide Menu
<!-- </span> -->
{:else}
<Menu class="inline-block" />
<span class="hidden">
Menu
</span>
{/if}
</button>
</section>
<!-- Show menu on right side of page -->
<!-- min-h-96 -->
<section
class="
ae_app__menu
hidden-print
flex flex-col
items-center
justify-end
gap-4
min-w-48
absolute right-0 bottom-10
bg-white dark:bg-gray-800
border border-gray-200 dark:border-gray-700
rounded-lg
p-2
opacity-50
hover:opacity-100
duration-100 delay-1000 hover:delay-100 hover:ease-out
transition hover:transition-all
z-20 hover:z-30
"
class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
>
<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
<span
class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
>
<Element_app_cfg
set_theme_mode={true}
set_theme_name={true}
/>
</span>
<!-- {/if} -->
{#if $ae_loc?.app_cfg?.show_element__sign_in_out}
<Element_sign_in_out
data={data}
hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
/>
{/if}
{#if $ae_loc?.app_cfg?.show_element__access_type}
<Element_access_type
show_passcode_input={$ae_loc?.app_cfg?.show_element__passcode_input}
trigger_clear_access={trigger_clear_access}
hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !$ae_loc?.app_cfg?.show_element__menu}
/>
{/if}
<button
type="button"
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning *:hover:inline w-full px-6 py-1"
title="Sign In"
onclick={() => {
if ($ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = true;
$ae_loc.app_cfg.show_element__menu_btn = false;
} else {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
// $ae_loc.app_cfg.show_element__menu = !$ae_loc?.app_cfg?.show_element__menu;
}}
>
{#if $ae_loc?.app_cfg?.show_element__menu}
<CircleX class="mx-1 inline-block" />
<!-- <span class="hidden"> -->
Hide Menu
<!-- </span> -->
{:else}
<Menu class="mx-1 inline-block" />
<!-- <span class="hidden"> -->
Menu
<!-- </span> -->
{/if}
</button>
</section>
<!-- The app debug menu -->
<E_app_sys_menu data={data} />
<!-- The app debug menu -->
<E_app_debug_menu />
{/if}
<!-- opacity-25
hover:opacity-100 -->
<!-- text-slate-400 hover:text-slate-800 -->
<div
class="
absolute bottom-0 left-0
flex
text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg
dark:text-slate-400 dark:hover:text-slate-200
bg-red-100/60 dark:bg-red-800/50
hover:bg-red-200 hover:dark:bg-red-900
mx-1 my-2
max-h-min
max-w-lg
transition-all
transition-delay-1000
transition-duration-1000
ease-in
z-50
border-2
border-red-300 dark:border-red-700
hover:border-red-500 hover:dark:border-red-500
"
class:top-0={$ae_loc?.debug}
class:w-full={$ae_loc?.debug}
class:hidden={!$ae_loc?.trusted_access}
class:border-transparent={!$ae_loc?.debug}
class:hover:border-transparent={!$ae_loc?.debug}
class:hover:bg-transparent={!$ae_loc?.debug}
>
<div
class:hidden={!$ae_loc?.debug}
class:border-red-200={$ae_loc?.debug}
class:dark:border-red-800={$ae_loc?.debug}
class="
transition-all
transition-delay-1000
transition-duration-1000
ease-in
overflow-y-auto
px-1 py-4
opacity-50
hover:opacity-100
relative
"
>
<!-- flex flex-col items-center justify-center max-h-full outline -->
<div>
<span class="fas fa-bug mx-1"></span>
<span>Debug</span>
</div>
<pre>
{JSON.stringify($ae_loc, null, 2)}
</pre>
</div>
<button
type="button"
onclick={() => {
console.log('Debug ae_loc:', $ae_loc);
$ae_loc.debug = !$ae_loc?.debug;
}}
class="
btn btn-sm variant-ghost-surface hover:variant-ghost-warning
transition-all *:hover:inline-block
absolute top-0 right-0
"
title="Turn debug content and styles off and on"
>
<span class="fas fa-toggle-on mx-1"></span>
Debug
<span class="hidden">
Mode On
</span>
</button>
<button
type="button"
onclick={() => {
console.log('Debug ae_loc:', $ae_loc);
$ae_loc.debug = !$ae_loc?.debug;
}}
id="AE-Quick-Debug"
class="
btn btn-icon
variant-ghost-surface
hover:variant-ghost-warning
transition-all
fixed bottom-2 left-2
text-gray-400 hover:text-gray-800
"
title="Turn debug content and styles off and on"
>
<!-- absolute bottom-2 left-2 -->
<!-- fixed bottom-0 left-0 -->
&pi;
</button>
</div>
<style lang="postcss">
/* BEGIN: AE's Svelte Quick Debug component */
#AE-Quick-Debug {
/* position: absolute; */
/* position: fixed; */
/* position: relative; */
/* position: static; */
/* position: sticky; */
/* top: 1em; */
/* bottom: 2rem; */
/* left: 1rem; */
/* padding: .0rem; */
/* lightyellow */
/* background-color: hsla(60,100%,90%,.30); */
/* background-color: rgba(var(--color-surface-500) / .5); */
/* border: none;
border-top: solid thin hsla(0,0%,0%,.25);
border-left: solid thin hsla(0,0%,0%,.25);
border-bottom: solid thin hsla(0,0%,0%,.25); */
/* border-top-left-radius: .5em; */
/* border-bottom-left-radius: .5em; */
/* opacity: .15; */
/* opacity: 1; */
font-size: .75rem;
/* z-index: 15; */
/* NOTE: transition when no longer hovering */
transition-property: opacity, background-color;
transition-delay: 1.25s;
transition-duration: .5s;
transition-timing-function: ease-out;
}
#AE-Quick-Debug:hover {
/* lightyellow */
/* background-color: hsla(60,100%,90%,.95); */
/* background-color: rgba(var(--color-surface-500) / 1); */
/*
border-top: solid thin hsla(0,0%,0%,.95);
border-left: solid thin hsla(0,0%,0%,.95);
border-bottom: solid thin hsla(0,0%,0%,.95); */
/* opacity: 1; */
/* padding: .5rem; */
font-size: 1.5rem;
/* Need to zoom 3.5 when hovering */
/* transform: scale(3.5); */
/* NOTE: transition when hover starts */
transition-property: opacity, background-color;
transition-delay: .5s;
transition-duration: .10s;
transition-timing-function: ease-in;
}
</style>