621 lines
24 KiB
Svelte
621 lines
24 KiB
Svelte
<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,
|
||
UserCog,
|
||
Wand2,
|
||
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/stores/ae_stores';
|
||
|
||
import Element_access_type from '$lib/app_components/e_app_access_type.svelte';
|
||
import Element_app_cfg from '$lib/app_components/e_app_cfg.svelte';
|
||
import Element_sign_in_out from '$lib/app_components/e_app_sign_in_out.svelte';
|
||
import Element_theme from '$lib/app_components/e_app_theme.svelte';
|
||
|
||
// *** Setup Svelte properties
|
||
interface Props {
|
||
log_lvl?: number;
|
||
data: any;
|
||
hide?: null | boolean;
|
||
expand?: boolean;
|
||
}
|
||
|
||
let {
|
||
log_lvl = $bindable(0),
|
||
data = null,
|
||
hide = $bindable(false),
|
||
expand = $bindable(false)
|
||
}: 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={!expand_btn}
|
||
> -->
|
||
<!-- && !expand -->
|
||
<!-- !$ae_loc
|
||
?.sys_menu?.expand_btn -->
|
||
<!-- bg-blue-100/60 dark:bg-blue-800/50 -->
|
||
<!-- class:hover:border-transparent={!expand} -->
|
||
<!-- mx-1 my-2 -->
|
||
<!-- We need to be able to hide the menu button in certain situations. Mainly iframes. -->
|
||
<section
|
||
class="
|
||
ae_app__sys_menu
|
||
|
||
hidden-print
|
||
md:text-md
|
||
lg:text-md xl:text-md absolute
|
||
|
||
right-0
|
||
bottom-6
|
||
|
||
z-50
|
||
flex
|
||
|
||
w-min max-w-md flex-col-reverse
|
||
items-end justify-center
|
||
|
||
gap-1 rounded-lg border-2 border-blue-300/20 bg-blue-200/90 text-sm
|
||
|
||
opacity-90
|
||
|
||
transition-all delay-500
|
||
duration-500 ease-in-out
|
||
hover:border-blue-500/20 hover:opacity-100
|
||
|
||
hover:delay-200
|
||
hover:duration-200 sm:text-sm
|
||
2xl:text-lg dark:border-blue-700/20
|
||
hover:dark:border-blue-500/20
|
||
"
|
||
class:top-0={expand && (1 as any) == 3}
|
||
class:opacity-100={expand}
|
||
class:w-full={expand}
|
||
class:hidden={hide}
|
||
class:border-transparent={!expand}
|
||
class:bg-transparent={!expand}>
|
||
<!-- class:hidden={!expand} -->
|
||
<!-- class:preset-filled-warning-100-900={expand} -->
|
||
<div
|
||
class:opacity-50={!expand}
|
||
class:opacity-100={expand}
|
||
class:light:bg-blue-500={expand}
|
||
class:dark:bg-blue-500={expand}
|
||
class="
|
||
hidden-print
|
||
light:bg-blue-200/10 relative flex w-full
|
||
flex-col
|
||
|
||
items-end
|
||
justify-end
|
||
|
||
gap-1
|
||
|
||
overflow-y-auto
|
||
p-1
|
||
transition-all
|
||
|
||
delay-1000
|
||
|
||
duration-200
|
||
ease-in-out hover:opacity-100
|
||
hover:delay-500 hover:duration-200
|
||
dark:bg-blue-800/10
|
||
"
|
||
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 --'}
|
||
Access Type: {$ae_loc?.access_type ?? '-- not set --'}
|
||
">
|
||
{#if $ae_loc?.person_id}
|
||
<div
|
||
class="group flex w-full flex-row items-center justify-end gap-1 transition-all">
|
||
<User size="1em" class="mx-1 inline-block text-gray-500" />
|
||
<span class:hidden={!expand} class="group-hover:inline-block">
|
||
{$ae_loc?.person?.informal_name ??
|
||
$ae_loc?.person?.given_name}
|
||
</span>
|
||
</div>
|
||
{/if}
|
||
|
||
{#if $ae_loc?.user_id}
|
||
<!-- This is currently not set to show if not expanded. Saving space. -->
|
||
<div
|
||
class:hidden={!expand}
|
||
class="group flex w-full flex-row items-center justify-end gap-1 transition-all">
|
||
<ShieldUser
|
||
size="1em"
|
||
class="mx-1 inline-block text-gray-500" />
|
||
<span class:hidden={!expand} class="group-hover:inline-block">
|
||
{$ae_loc?.user?.username ?? '-- not set --'}
|
||
</span>
|
||
</div>
|
||
{/if}
|
||
|
||
<div
|
||
class="group flex w-full flex-row items-center justify-end gap-1 transition-all">
|
||
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
|
||
<span
|
||
class="group flex flex-row-reverse gap-1 text-base"
|
||
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'}
|
||
<Wand2 size="1em" class="m-1 inline-block" />
|
||
<span
|
||
class:hidden={!expand}
|
||
class="hidden group-hover:inline-block">Super</span>
|
||
{:else if $ae_loc.access_type == 'manager'}
|
||
<ShieldUser size="1em" class="m-1 inline-block" />
|
||
<span
|
||
class:hidden={!expand}
|
||
class="hidden group-hover:inline-block"
|
||
>Manager</span>
|
||
{:else if $ae_loc.access_type == 'administrator'}
|
||
<UserCog size="1em" class="m-1 inline-block" />
|
||
<span
|
||
class:hidden={!expand}
|
||
class="hidden group-hover:inline-block"
|
||
>Administrator</span>
|
||
{:else if $ae_loc.access_type == 'trusted'}
|
||
<UserCheck size="1em" class="m-1 inline-block" />
|
||
<span
|
||
class:hidden={!expand}
|
||
class="hidden group-hover:inline-block"
|
||
>Trusted Access</span>
|
||
{:else if $ae_loc.access_type == 'public'}
|
||
Public
|
||
<span
|
||
class:hidden={!expand}
|
||
class="hidden group-hover:inline-block"
|
||
>Access</span>
|
||
{:else if $ae_loc.access_type == 'authenticated'}
|
||
Authenticated
|
||
<span
|
||
class:hidden={!expand}
|
||
class="hidden group-hover:inline-block"
|
||
>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 (!expand) {
|
||
expand = true;
|
||
$ae_sess.sys_menu.expand = true;
|
||
$ae_loc.sys_menu.hide_access_type = false;
|
||
$ae_loc.sys_menu.expand_access_type = true;
|
||
// $ae_loc.sys_menu.expand_btn = false;
|
||
// $ae_loc.app_cfg.show_element__access_type = true;
|
||
// $ae_loc.app_cfg.show_element__passcode_input = true;
|
||
} else {
|
||
// expand = true;
|
||
// $ae_loc.sys_menu.expand = false;
|
||
$ae_loc.sys_menu.hide_access_type = false;
|
||
$ae_loc.sys_menu.expand_access_type = true;
|
||
|
||
// $ae_loc.sys_menu.expand_btn = true;
|
||
}
|
||
}}
|
||
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning group text-xs transition-all"
|
||
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 size="2em" class="inline-block" />
|
||
<span class="hidden group-hover:inline-block"
|
||
>Passcode?</span>
|
||
</button>
|
||
{:else}
|
||
<button
|
||
type="button"
|
||
onclick={() => {
|
||
trigger_clear_access = true;
|
||
|
||
if (expand) {
|
||
$ae_loc.sys_menu.hide_access_type = false;
|
||
// $ae_loc.sys_menu.expand_access_type = false;
|
||
expand = false;
|
||
|
||
// $ae_loc.sys_menu.expand = true;
|
||
// $ae_loc.sys_menu.expand_btn = false;
|
||
$ae_loc.app_cfg.show_element__access_type = true;
|
||
$ae_sess.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.sys_menu.hide_access_type = false;
|
||
$ae_loc.sys_menu.expand_access_type = true;
|
||
// $ae_loc.sys_menu.expand = false;
|
||
// $ae_loc.sys_menu.expand_btn = true;
|
||
}
|
||
}}
|
||
class="
|
||
btn btn-sm variant-outline-surface
|
||
hover:variant-ghost-warning
|
||
group flex-row-reverse
|
||
text-xs transition-all
|
||
"
|
||
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" />
|
||
<span class="hidden group-hover:inline-block">
|
||
Clear?
|
||
</span>
|
||
</button>
|
||
{/if}
|
||
{:else}
|
||
<button
|
||
type="button"
|
||
onclick={async () => {
|
||
expand = true;
|
||
$ae_sess.sys_menu.expand = true;
|
||
$ae_loc.sys_menu.hide_access_type = false;
|
||
$ae_loc.sys_menu.expand_access_type = true;
|
||
|
||
$ae_sess.app_cfg.show_element__passcode_input = true;
|
||
$ae_sess.sys_menu.focus_passcode_input = true;
|
||
|
||
// $ae_loc.sys_menu.expand = true;
|
||
// $ae_loc.sys_menu.expand_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();
|
||
}}
|
||
class="
|
||
btn btn-sm variant-outline-surface
|
||
hover:variant-ghost-success
|
||
group flex-row-reverse
|
||
text-xs transition-all
|
||
"
|
||
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 group-hover:inline-block">Auth?</span>
|
||
</button>
|
||
{/if}
|
||
</div>
|
||
|
||
{#if $ae_loc.edit_mode}
|
||
<button
|
||
type="button"
|
||
onclick={() => {
|
||
$ae_loc.edit_mode = false;
|
||
// dispatch_edit_mode_changed();
|
||
}}
|
||
class="
|
||
btn btn-base preset-tonal-warning
|
||
preset-outlined-warning-800-200
|
||
hover:preset-tonal-success
|
||
group
|
||
w-full max-w-fit
|
||
min-w-22 gap-1 text-sm transition-all
|
||
md:min-w-30
|
||
"
|
||
title="Click to turn off edit mode. Edit mode is currently on.">
|
||
<ToggleRight size="1em" class="m-1 inline-block" />
|
||
<span class="text-xs">Edit</span>
|
||
<span
|
||
class="hidden group-hover:inline-block group-hover:text-xs">
|
||
Off
|
||
</span>
|
||
</button>
|
||
{:else if $ae_loc.authenticated_access}
|
||
<button
|
||
type="button"
|
||
onclick={() => {
|
||
$ae_loc.edit_mode = true;
|
||
// dispatch_edit_mode_changed();
|
||
}}
|
||
class="
|
||
btn btn-base preset-tonal-surface
|
||
preset-outlined-warning-400-600
|
||
hover:preset-tonal-warning
|
||
group
|
||
w-full max-w-fit
|
||
min-w-22 gap-1 text-sm transition-all
|
||
md:min-w-30
|
||
"
|
||
title="Click to torn on/enable edit mode. Edit mode is currently off/disabled.">
|
||
<ToggleLeft size="1em" class="m-1 inline-block" />
|
||
<span class="text-xs">Edit</span>
|
||
<span
|
||
class="hidden group-hover:inline-block group-hover:text-xs">
|
||
On?
|
||
</span>
|
||
</button>
|
||
{/if}
|
||
|
||
<!-- Font Size Cycler: default → larger → smaller → default -->
|
||
<button
|
||
type="button"
|
||
class:w-full={expand}
|
||
class="
|
||
btn btn-base preset-tonal-surface
|
||
hover:preset-tonal-primary
|
||
group
|
||
w-full max-w-fit
|
||
min-w-22 px-1 py-1 text-sm
|
||
transition-all md:min-w-30
|
||
"
|
||
title="Cycle font size: default → larger → smaller"
|
||
onclick={() => {
|
||
const mode = $ae_loc.font_size_mode;
|
||
if (!mode || mode === 'default') {
|
||
$ae_loc.font_size_mode = 'larger';
|
||
} else if (mode === 'larger') {
|
||
$ae_loc.font_size_mode = 'smaller';
|
||
} else {
|
||
$ae_loc.font_size_mode = 'default';
|
||
}
|
||
}}>
|
||
{#if !$ae_loc.font_size_mode || $ae_loc.font_size_mode === 'default'}
|
||
<span class="text-sm leading-none font-bold">A</span>
|
||
<span class="hidden text-xs group-hover:inline-block"
|
||
>Font: Normal</span>
|
||
{:else if $ae_loc.font_size_mode === 'larger'}
|
||
<span class="text-base leading-none font-bold">A+</span>
|
||
<span class="hidden text-xs group-hover:inline-block"
|
||
>Font: Larger</span>
|
||
{:else}
|
||
<span class="text-xs leading-none font-bold">A−</span>
|
||
<span class="hidden text-xs group-hover:inline-block"
|
||
>Font: Smaller</span>
|
||
{/if}
|
||
</button>
|
||
|
||
<!-- <div> -->
|
||
<!-- class:visible={expand} -->
|
||
<!-- class:invisible={!expand} -->
|
||
<!-- class:hover:visible={true} -->
|
||
<!-- invisible -->
|
||
<button
|
||
type="button"
|
||
class:w-full={expand}
|
||
class="
|
||
btn btn-base preset-filled-tertiary-400-600
|
||
preset-outlined-tertiary-400-600
|
||
hover:preset-filled-success
|
||
active:preset-filled-success group
|
||
w-full max-w-fit
|
||
min-w-22 px-1 py-1 text-sm
|
||
transition-all md:min-w-30
|
||
"
|
||
title="Show/Hide the system menu"
|
||
onclick={async () => {
|
||
if (!expand) {
|
||
expand = true;
|
||
$ae_sess.sys_menu.expand = true;
|
||
|
||
// $ae_loc.sys_menu.expand = true;
|
||
// $ae_loc.sys_menu.expand_btn = false;
|
||
$ae_loc.app_cfg.show_element__access_type = true;
|
||
|
||
if ($ae_loc?.access_type == 'anonymous') {
|
||
$ae_sess.sys_menu.focus_passcode_input = true;
|
||
// $ae_sess.app_cfg.show_element__passcode_input = true;
|
||
} else {
|
||
// $ae_sess.app_cfg.show_element__passcode_input = false;
|
||
$ae_loc.sys_menu.expand_user = false; // Not in use yet
|
||
$ae_sess.show__sign_in_out__fields = 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 {
|
||
expand = false;
|
||
$ae_sess.sys_menu.expand = false;
|
||
// $ae_loc.sys_menu.expand = false;
|
||
// $ae_loc.sys_menu.expand_btn = true;
|
||
// $ae_loc.app_cfg.show_element__passcode_input = false;
|
||
}
|
||
// $ae_loc.sys_menu.expand_btn = !expand_btn;
|
||
}}>
|
||
<!-- <span class=""> -->
|
||
{#if expand}
|
||
<CircleX class="m-1 inline-block" />
|
||
{:else}
|
||
<Menu class="m-1 inline-block" />
|
||
{/if}
|
||
<span class="hidden text-xs group-hover:inline-block"> Menu </span>
|
||
<!-- </span> -->
|
||
</button>
|
||
<!-- </div> -->
|
||
</div>
|
||
|
||
<!-- Show menu on right side of page -->
|
||
<!-- min-h-96 -->
|
||
<!-- absolute right-0 bottom-10 -->
|
||
<!-- opacity-50 -->
|
||
<!-- hover:opacity-100 -->
|
||
<!-- bg-white dark:bg-gray-800 -->
|
||
<div
|
||
class:preset-filled-warning-200-800={expand}
|
||
class:hidden={!expand}
|
||
class="
|
||
ae_app__sys_menu
|
||
|
||
hidden-print
|
||
z-20 flex
|
||
min-w-48
|
||
flex-col
|
||
items-end
|
||
|
||
justify-end
|
||
|
||
gap-2 rounded-lg
|
||
|
||
border border-gray-200 bg-white
|
||
px-1
|
||
py-2 transition-all
|
||
|
||
delay-1000
|
||
duration-100 ease-in-out
|
||
hover:z-30 hover:delay-100
|
||
hover:duration-200
|
||
|
||
dark:border-gray-700 dark:bg-gray-800
|
||
">
|
||
<button
|
||
type="button"
|
||
class:w-full={expand}
|
||
class="
|
||
btn btn-sm
|
||
preset-filled-tertiary-400-600
|
||
preset-outlined-tertiary-400-600
|
||
hover:preset-filled-success active:preset-filled-success
|
||
group px-6
|
||
py-1 transition-all
|
||
"
|
||
title="Show/Hide the system menu"
|
||
onclick={() => {
|
||
if (!expand) {
|
||
expand = true;
|
||
$ae_sess.sys_menu.expand = true;
|
||
// $ae_loc.sys_menu.expand_btn = false;
|
||
// $ae_loc.sys_menu.expand_access_type = true;
|
||
|
||
// $ae_sess.app_cfg.show_element__passcode_input = true;
|
||
$ae_sess.sys_menu.focus_passcode_input = true;
|
||
} else {
|
||
$ae_sess.sys_menu.expand = false;
|
||
$ae_loc.sys_menu.expand_user = false; // Not in use yet
|
||
$ae_sess.show__sign_in_out__fields = false;
|
||
// $ae_loc.sys_menu.expand_btn = true;
|
||
}
|
||
// $ae_loc.sys_menu.expand_btn = !expand_btn;
|
||
// $ae_loc.sys_menu.expand = !expand;
|
||
}}>
|
||
{#if expand}
|
||
<CircleX class="m-1 inline-block" />
|
||
<span class="hidden group-hover:inline-block"> Hide Menu </span>
|
||
{:else}
|
||
<Menu class="m-1 inline-block" />
|
||
<span class="hidden group-hover:inline-block"> Menu </span>
|
||
{/if}
|
||
</button>
|
||
|
||
<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
|
||
<span class:hidden={!$ae_loc.edit_mode}>
|
||
<Element_app_cfg
|
||
hide={$ae_loc.sys_menu.hide_app_cfg}
|
||
expand={$ae_loc.sys_menu.expand_app_cfg} />
|
||
</span>
|
||
<span class:hidden={!$ae_loc.edit_mode}>
|
||
<Element_theme
|
||
hide={$ae_loc.sys_menu.hide_app_cfg}
|
||
expand={$ae_loc.sys_menu.expand_app_cfg}
|
||
set_theme_mode={true}
|
||
set_theme_name={true} />
|
||
</span>
|
||
<!-- {/if} -->
|
||
|
||
{#if $ae_loc?.app_cfg?.show_element__sign_in_out}
|
||
<!-- hide={$ae_loc.sys_menu.hide_user} -->
|
||
<!-- expand={$ae_loc.sys_menu.expand_user} -->
|
||
<Element_sign_in_out
|
||
{data}
|
||
hidden={$ae_loc.iframe ||
|
||
!$ae_loc.app_cfg?.show_element__sign_in_out} />
|
||
{/if}
|
||
|
||
{#if !$ae_loc?.sys_menu?.hide_access_type && !$ae_loc?.iframe}
|
||
<!-- hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !expand} -->
|
||
<Element_access_type
|
||
bind:hide={$ae_loc.sys_menu.hide_access_type}
|
||
bind:focus_input={$ae_sess.sys_menu.focus_passcode_input}
|
||
bind:expand={$ae_loc.sys_menu.expand_access_type}
|
||
bind:show_passcode_input={
|
||
$ae_sess.app_cfg.show_element__passcode_input
|
||
}
|
||
bind:trigger_clear_access />
|
||
{/if}
|
||
</div>
|
||
</section>
|