Pulling out parts into separate files. Also minor clean up.
This commit is contained in:
Scott Idem
@@ -66,9 +66,10 @@ const ae_app_local_data_defaults: key_val = {
|
|||||||
iframe: false,
|
iframe: false,
|
||||||
title: `OSIT's Æ`, // - Dev SvelteKit`, // Æ
|
title: `OSIT's Æ`, // - Dev SvelteKit`, // Æ
|
||||||
|
|
||||||
debug: false, // A simple flag to know if we should show debug information.
|
debug_menu: false, // Flag show debug menu.
|
||||||
edit_mode: false, // A simple flag to know if we should show edit mode options.
|
debug_mode: false, // Flag to know if we should be in debug mode and show show debug options.
|
||||||
sync_local_config: true, // A simple flag to know if we should sync local config with the remote API server.
|
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_id': ae_account_id, // OSIT Demo _XY7DXtc9MY
|
||||||
'account_code': 'not_set',
|
'account_code': 'not_set',
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
|
|||||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
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 notes: null|string = null;
|
||||||
let all: boolean = false;
|
let all: boolean = false;
|
||||||
247
src/lib/e_app_debug_menu.svelte
Normal file
247
src/lib/e_app_debug_menu.svelte
Normal 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 -->
|
||||||
|
π
|
||||||
|
</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>
|
||||||
380
src/lib/e_app_sys_menu.svelte
Normal file
380
src/lib/e_app_sys_menu.svelte
Normal 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>
|
||||||
@@ -5,7 +5,7 @@
|
|||||||
let log_lvl: number = 0;
|
let log_lvl: number = 0;
|
||||||
|
|
||||||
// *** Import Svelte specific
|
// *** Import Svelte specific
|
||||||
import { tick } from 'svelte';
|
// import { tick } from 'svelte';
|
||||||
import { goto, invalidateAll } from '$app/navigation';
|
import { goto, invalidateAll } from '$app/navigation';
|
||||||
|
|
||||||
import '../app.postcss';
|
import '../app.postcss';
|
||||||
@@ -27,15 +27,15 @@ const modalRegistry: Record<string, ModalComponent> = {
|
|||||||
};
|
};
|
||||||
import {
|
import {
|
||||||
ArrowBigRight,
|
ArrowBigRight,
|
||||||
CircleX,
|
// CircleX,
|
||||||
Eye, EyeOff,
|
// Eye, EyeOff,
|
||||||
Key,
|
// Key,
|
||||||
LogIn, LogOut, LockKeyhole,
|
// LogIn, LogOut, LockKeyhole,
|
||||||
Mail, MailCheck,
|
// Mail, MailCheck,
|
||||||
Menu,
|
// Menu,
|
||||||
RefreshCw, RefreshCcwDot,
|
RefreshCw, RefreshCcwDot,
|
||||||
ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
|
// ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
|
||||||
User, UserCheck
|
// User, UserCheck
|
||||||
} from '@lucide/svelte';
|
} from '@lucide/svelte';
|
||||||
|
|
||||||
// Highlight JS
|
// 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 { events_loc, events_slct } from '$lib/ae_events_stores';
|
||||||
// import type { key_val } from '$lib/ae_stores';
|
// import type { key_val } from '$lib/ae_stores';
|
||||||
|
|
||||||
import Element_access_type from '$lib/element_access_type.svelte';
|
import E_app_debug_menu from '$lib/e_app_debug_menu.svelte';
|
||||||
import Element_app_cfg from '$lib/element_app_cfg.svelte';
|
import E_app_sys_menu from '$lib/e_app_sys_menu.svelte';
|
||||||
import Element_sign_in_out from '$lib/element_sign_in_out.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';
|
// import Element_data_store from '$lib/element_data_store_v2.svelte';
|
||||||
|
|
||||||
@@ -914,512 +916,14 @@ $effect(() => {
|
|||||||
|
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<!-- min-h-full
|
|
||||||
max-h-max
|
|
||||||
min-w-full
|
|
||||||
max-w-max -->
|
|
||||||
|
|
||||||
{#if (browser) }
|
{#if (browser) }
|
||||||
<!-- Toggle the menu -->
|
<!-- The app debug menu -->
|
||||||
<section
|
<E_app_sys_menu data={data} />
|
||||||
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_debug_menu />
|
||||||
{/if}
|
{/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 -->
|
|
||||||
π
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
<style lang="postcss">
|
<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>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user