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

Moving on to the user sign in/out

Browse Source
This commit is contained in:
Scott Idem
2025-07-15 17:55:53 -04:00
parent 8692771efb
commit 7b853ede8c
5 changed files with 360 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/lib/e_app_sys_menu.svelte
View File

@@ -27,6 +27,7 @@ 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';
import Element_theme from '$lib/e_app_theme.svelte';
// *** Setup Svelte properties
interface Props {
@@ -73,13 +74,13 @@ max-w-max -->
transition hover:transition-all
z-10 hover:z-20
"
class:hidden={!$ae_loc?.app_cfg?.show_element__menu_btn}
class:hidden={!$ae_loc?.sys_menu?.expand_btn}
> -->
<!-- && !$ae_loc?.app_cfg?.show_element__menu -->
<!-- && !$ae_loc?.sys_menu?.expand -->
<!-- !$ae_loc
?.app_cfg?.show_element__menu_btn -->
?.sys_menu?.expand_btn -->
<!-- bg-blue-100/60 dark:bg-blue-800/50 -->
<!-- class:hover:border-transparent={!$ae_loc?.app_cfg?.show_element__menu} -->
<!-- class:hover:border-transparent={!$ae_loc?.sys_menu?.expand} -->
<!-- mx-1 my-2 -->
<!-- We need to be able to hide the menu button in certain situations. Mainly iframes. -->
<section
@@ -116,19 +117,19 @@ max-w-max -->
duration-500 hover:duration-200
ease-in-out
"
class:top-0={$ae_loc?.app_cfg?.show_element__menu & 1 == 3}
class:w-full={$ae_loc?.app_cfg?.show_element__menu}
class:top-0={$ae_loc?.sys_menu?.expand & 1 == 3}
class:w-full={$ae_loc?.sys_menu?.expand}
class:hidden={false}
class:border-transparent={!$ae_loc?.app_cfg?.show_element__menu}
class:border-transparent={!$ae_loc?.sys_menu?.expand}
class:hover:bg-transparent={!$ae_loc?.app_cfg?.show_element__menu}
class:hover:bg-transparent={!$ae_loc?.sys_menu?.expand}
>
<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:hidden={!$ae_loc?.expand && 1 == 3}
class:border-green-200={$ae_loc?.expand}
class:dark:border-green-800={$ae_loc?.expand}
class="
hidden-print
flex flex-col items-end justify-end
@@ -160,9 +161,9 @@ max-w-max -->
{#if $ae_loc?.person_id || $ae_loc?.user_id}
<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:hidden={!$ae_loc?.sys_menu?.expand}
class:hover:visible={$ae_loc?.sys_menu?.expand}
class:invisible={!$ae_loc?.sys_menu?.expand}
class="w-48"
title="
@@ -263,14 +264,14 @@ max-w-max -->
// 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;
if (!$ae_loc?.sys_menu?.expand) {
$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;
} else {
$ae_loc.app_cfg.show_element__menu = false;
// $ae_loc.app_cfg.show_element__menu_btn = 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 transition-all *:hover:inline"
@@ -288,9 +289,9 @@ max-w-max -->
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;
if ($ae_loc?.sys_menu?.expand_btn) {
$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;
@@ -300,8 +301,8 @@ max-w-max -->
// 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.sys_menu.expand = false;
$ae_loc.sys_menu.expand_btn = true;
}
}}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden"
@@ -316,9 +317,9 @@ max-w-max -->
<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;
if ($ae_loc?.sys_menu?.expand_btn) {
$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();
@@ -327,10 +328,10 @@ max-w-max -->
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.sys_menu.expand = false;
$ae_loc.sys_menu.expand_btn = true;
}
// $ae_loc.app_cfg.show_element__menu_btn = !$ae_loc?.app_cfg?.show_element__menu_btn;
// $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
}}
class="
btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
@@ -348,13 +349,13 @@ max-w-max -->
</span>
<!-- <div> -->
<!-- class:visible={$ae_loc?.app_cfg?.show_element__menu} -->
<!-- class:invisible={!$ae_loc?.app_cfg?.show_element__menu} -->
<!-- class:visible={$ae_loc?.sys_menu?.expand} -->
<!-- class:invisible={!$ae_loc?.sys_menu?.expand} -->
<!-- class:hover:visible={true} -->
<!-- invisible -->
<button
type="button"
class:w-48={$ae_loc?.app_cfg?.show_element__menu}
class:w-48={$ae_loc?.sys_menu?.expand}
class="
btn btn-sm
@@ -364,9 +365,9 @@ max-w-max -->
"
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;
if (!$ae_loc?.sys_menu?.expand) {
$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') {
@@ -381,15 +382,15 @@ max-w-max -->
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.sys_menu.expand = false;
// $ae_loc.sys_menu.expand_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;
// $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
}}
>
<span class=" *:hover:inline-block">
{#if $ae_loc?.app_cfg?.show_element__menu}
{#if $ae_loc?.sys_menu?.expand}
<CircleX class="inline-block" />
<span class="inline-block">
Hide Menu
@@ -439,7 +440,7 @@ max-w-max -->
z-20 hover:z-30
"
class:hidden={!$ae_loc?.app_cfg?.show_element__menu}
class:hidden={!$ae_loc?.sys_menu?.expand}
>
<button
@@ -447,18 +448,18 @@ max-w-max -->
class="btn btn-sm variant-outline-tertiary hover:variant-ghost-success *: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;
if (!$ae_loc?.sys_menu?.expand) {
$ae_loc.sys_menu.expand = true;
// $ae_loc.sys_menu.expand_btn = false;
} else {
$ae_loc.app_cfg.show_element__menu = false;
// $ae_loc.app_cfg.show_element__menu_btn = true;
$ae_loc.sys_menu.expand = false;
// $ae_loc.sys_menu.expand_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;
// $ae_loc.sys_menu.expand_btn = !$ae_loc?.sys_menu?.expand_btn;
// $ae_loc.sys_menu.expand = !$ae_loc?.sys_menu?.expand;
}}
>
{#if $ae_loc?.app_cfg?.show_element__menu}
{#if $ae_loc?.sys_menu?.expand}
<CircleX class="mx-1 inline-block" />
<!-- <span class="hidden"> -->
Hide Menu
@@ -473,17 +474,28 @@ max-w-max -->
<!-- {#if $ae_loc?.app_cfg?.show_element__cfg} -->
<span
class:hidden={!$ae_loc?.app_cfg?.show_element__cfg || !$ae_loc.edit_mode}
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}
/>
<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}
/>
/>
<!-- END: Theme -->
</span>
<!-- {/if} -->
{#if $ae_loc?.app_cfg?.show_element__sign_in_out}
<Element_sign_in_out
hide={$ae_loc.sys_menu.hide_user}
expand={$ae_loc.sys_menu.expand_user}
data={data}
hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
/>
@@ -491,9 +503,11 @@ max-w-max -->
{#if $ae_loc?.app_cfg?.show_element__access_type}
<Element_access_type
hide={$ae_loc.sys_menu.hide_access_type}
expand={$ae_loc.sys_menu.expand_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}
hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !$ae_loc?.sys_menu?.expand}
/>
{/if}