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

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>