468 lines
17 KiB
Svelte
468 lines
17 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,
|
|
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}
|
|
> -->
|
|
<!-- && !$ae_loc?.app_cfg?.show_element__menu -->
|
|
<!-- !$ae_loc?.app_cfg?.show_element__menu_btn -->
|
|
<!-- We need to be able to hide the menu button in certain situations. Mainly iframes. -->
|
|
<section
|
|
class="
|
|
absolute bottom-6 right-0
|
|
flex flex-col-reverse gap-1
|
|
items-end justify-center
|
|
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-blue-100/60 dark:bg-blue-800/50
|
|
hover:bg-blue-200 hover:dark:bg-blue-900
|
|
|
|
mx-1 my-2
|
|
w-min
|
|
max-w-md
|
|
transition-all
|
|
transition-delay-1000
|
|
transition-duration-1000
|
|
ease-in
|
|
z-50
|
|
|
|
opacity-60
|
|
hover:opacity-100
|
|
|
|
border-2
|
|
border-blue-300 dark:border-blue-700
|
|
hover:border-blue-500 hover:dark:border-blue-500
|
|
"
|
|
class:top-0={$ae_loc?.app_cfg?.show_element__menu & 1 == 3}
|
|
class:w-full={$ae_loc?.app_cfg?.show_element__menu}
|
|
class:hidden={false}
|
|
class:border-transparent={!$ae_loc?.app_cfg?.show_element__menu}
|
|
class:hover:border-transparent={!$ae_loc?.app_cfg?.show_element__menu}
|
|
class:hover:bg-transparent={!$ae_loc?.app_cfg?.show_element__menu}
|
|
>
|
|
|
|
|
|
<div
|
|
class:hidden={!$ae_loc?.show_element__menu && 1 == 3}
|
|
class:border-green-200={$ae_loc?.show_element__menu}
|
|
class:dark:border-green-800={$ae_loc?.show_element__menu}
|
|
class="
|
|
flex flex-col items-end justify-end
|
|
gap-1
|
|
transition-all
|
|
transition-delay-1000
|
|
transition-duration-1000
|
|
ease-in
|
|
overflow-y-auto
|
|
|
|
p-1
|
|
|
|
bg-white dark:dark-gray-800
|
|
|
|
relative
|
|
*:hover:inline
|
|
*:hover:visible
|
|
|
|
opacity-50
|
|
hover:opacity-100
|
|
"
|
|
>
|
|
|
|
<span
|
|
class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
|
|
class:hover:visible={$ae_loc?.app_cfg?.show_element__menu}
|
|
class:invisible={!$ae_loc?.app_cfg?.show_element__menu}
|
|
class="w-48"
|
|
|
|
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_override ?? $ae_loc?.person?.full_name}<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
|
|
|
|
"
|
|
title="Edit mode is currently enabled. Click to disable."
|
|
>
|
|
<span class=" *:hover:inline-block">
|
|
<span class="fas fa-toggle-on mx-1 inline-block"></span>
|
|
Edit
|
|
<span class="hidden">
|
|
Mode On
|
|
</span>
|
|
</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}
|
|
<span>
|
|
<div class="flex flex-row gap-1 items-center justify-between transition-all w-auto">
|
|
{#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) {
|
|
$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>
|
|
</span>
|
|
<!-- <div> -->
|
|
<button
|
|
type="button"
|
|
class:w-48={$ae_loc?.app_cfg?.show_element__menu}
|
|
class:visible={$ae_loc?.app_cfg?.show_element__menu}
|
|
class:invisible={!$ae_loc?.app_cfg?.show_element__menu}
|
|
class="btn btn-sm variant-outline-surface hover:variant-ghost-success px-6 py-1"
|
|
title="Show or hide the menu"
|
|
onclick={async () => {
|
|
if (!$ae_loc?.app_cfg?.show_element__menu) {
|
|
$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;
|
|
}}
|
|
>
|
|
<span class=" *:hover:inline-block">
|
|
{#if $ae_loc?.app_cfg?.show_element__menu}
|
|
<CircleX class="inline-block" />
|
|
<span class="inline-block">
|
|
Hide Menu
|
|
</span>
|
|
{:else}
|
|
<Menu class="inline-block" />
|
|
<span class="hidden">
|
|
Menu
|
|
</span>
|
|
{/if}
|
|
</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="
|
|
ae_app__menu
|
|
hidden-print
|
|
flex flex-col
|
|
items-end
|
|
justify-end
|
|
gap-4
|
|
|
|
min-w-48
|
|
|
|
|
|
border border-gray-200 dark:border-gray-700
|
|
rounded-lg
|
|
px-1 py-2
|
|
|
|
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}
|
|
>
|
|
|
|
<button
|
|
type="button"
|
|
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning *:hover:inline px-6 py-1"
|
|
title="Sign In"
|
|
onclick={() => {
|
|
if (!$ae_loc?.app_cfg?.show_element__menu) {
|
|
$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>
|
|
|
|
<!-- {#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}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</section>
|