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

Making the code easier to read and more consistent.

Browse Source
This commit is contained in:
Scott Idem
2026-03-24 12:05:22 -04:00
parent 94849137f0
commit 9a75243d9c
29 changed files with 4096 additions and 2281 deletions
Download Patch File Download Diff File Expand all files Collapse all files

388
src/routes/events/+layout.svelte
View File

@@ -1,133 +1,133 @@
<script lang="ts">
/** @type {import('./$types').LayoutProps} */
let log_lvl: number = $state(0);
/** @type {import('./$types').LayoutProps} */
let log_lvl: number = $state(0);
// *** Import Svelte specific
import { untrack } from 'svelte';
// import { browser } from '$app/environment';
import { goto } from '$app/navigation';
// *** Import Svelte specific
import { untrack } from 'svelte';
// import { browser } from '$app/environment';
import { goto } from '$app/navigation';
// *** Import other supporting libraries
// import * as icons from '@lucide/svelte';
import {
Brain,
House,
Library,
RefreshCw,
Satellite,
ArrowUp,
ArrowDown
} from '@lucide/svelte';
// *** Import other supporting libraries
// import * as icons from '@lucide/svelte';
import {
Brain,
House,
Library,
RefreshCw,
Satellite,
ArrowUp,
ArrowDown
} from '@lucide/svelte';
// *** Import Aether specific variables and functions
import type { key_val } from '$lib/stores/ae_stores';
import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
import Element_data_store from '$lib/elements/element_data_store.svelte';
import {
events_loc,
events_sess,
events_slct,
events_trigger,
events_trig_kv
} from '$lib/stores/ae_events_stores';
// *** Import Aether specific variables and functions
import type { key_val } from '$lib/stores/ae_stores';
import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
import Element_data_store from '$lib/elements/element_data_store.svelte';
import {
events_loc,
events_sess,
events_slct,
events_trigger,
events_trig_kv
} from '$lib/stores/ae_events_stores';
interface Props {
/** @type {import('./$types').LayoutData} */
data: any;
children?: import('svelte').Snippet;
}
interface Props {
/** @type {import('./$types').LayoutData} */
data: any;
children?: import('svelte').Snippet;
}
let { data, children }: Props = $props();
let { data, children }: Props = $props();
// Use effects for store initializations to prevent render-phase updates
$effect(() => {
// Use effects for store initializations to prevent render-phase updates
$effect(() => {
untrack(() => {
$events_loc.qry__enabled = 'enabled';
$events_loc.qry__hidden = 'not_hidden';
$events_loc.qry__limit = 15;
$events_loc.qry__offset = 0;
});
});
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
let ae_acct = $derived(data[data.account_id]);
$effect(() => {
if (ae_acct) {
untrack(() => {
$events_loc.qry__enabled = 'enabled';
$events_loc.qry__hidden = 'not_hidden';
$events_loc.qry__limit = 15;
$events_loc.qry__offset = 0;
$events_slct.event_id = ae_acct.slct.event_id;
$events_slct.event_obj_li = ae_acct.slct.event_obj_li;
});
});
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
let ae_acct = $derived(data[data.account_id]);
$effect(() => {
if (ae_acct) {
untrack(() => {
$events_slct.event_id = ae_acct.slct.event_id;
$events_slct.event_obj_li = ae_acct.slct.event_obj_li;
});
}
});
let ae_promises: key_val = {};
let nav_y_height = $state(0);
let box: any;
let xLeft = $state(0);
let xScroll = $state(0);
let xWidth = $state(0);
let yTop = $state(0);
let yScroll = $state(0);
let yHeight = $state(0);
let scroll_x = $state(0);
let scroll_y = $state(0);
function parse_scroll() {
// console.log(`parse_scroll() called`);
xLeft = box.scrollLeft;
xScroll = box.scrollWidth;
xWidth = box.clientWidth;
yTop = box.scrollTop;
yHeight = box.clientHeight;
yScroll = box.scrollHeight;
// console.log(`parse_scroll() called: ${yTop}`);
}
});
function scroll_container() {
return (
document.getElementById('ae_main_content') ||
document.documentElement ||
document.body
);
}
let ae_promises: key_val = {};
function clear_idb() {
indexedDB.deleteDatabase('ae_archives_db'); // Archives module
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db'); // Events module
indexedDB.deleteDatabase('ae_journals_db'); // Journals module
indexedDB.deleteDatabase('ae_posts_db'); // Posts module
indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
}
let nav_y_height = $state(0);
function clear_local() {
// localStorage.removeItem('ae_loc');
// localStorage.removeItem('ae_idaa_loc');
// localStorage.removeItem('ae_journals_loc');
// localStorage.removeItem('ae_events_loc');
let box: any;
let xLeft = $state(0);
let xScroll = $state(0);
let xWidth = $state(0);
let yTop = $state(0);
let yScroll = $state(0);
let yHeight = $state(0);
$ae_loc.allow_access = false;
$ae_loc.authenticated_access = false;
$ae_loc.edit_mode = false;
let scroll_x = $state(0);
let scroll_y = $state(0);
// $ae_loc.ver = '';
function parse_scroll() {
// console.log(`parse_scroll() called`);
xLeft = box.scrollLeft;
xScroll = box.scrollWidth;
xWidth = box.clientWidth;
yTop = box.scrollTop;
yHeight = box.clientHeight;
yScroll = box.scrollHeight;
// console.log(`parse_scroll() called: ${yTop}`);
}
localStorage.clear();
// window.localStorage.clear();
}
function scroll_container() {
return (
document.getElementById('ae_main_content') ||
document.documentElement ||
document.body
);
}
function clear_sess() {
// sessionStorage.removeItem('ae_sess');
// sessionStorage.removeItem('ae_idaa_sess');
// sessionStorage.removeItem('ae_journals_sess');
// sessionStorage.removeItem('ae_events_sess');
function clear_idb() {
indexedDB.deleteDatabase('ae_archives_db'); // Archives module
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db'); // Events module
indexedDB.deleteDatabase('ae_journals_db'); // Journals module
indexedDB.deleteDatabase('ae_posts_db'); // Posts module
indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
}
sessionStorage.clear();
}
function clear_local() {
// localStorage.removeItem('ae_loc');
// localStorage.removeItem('ae_idaa_loc');
// localStorage.removeItem('ae_journals_loc');
// localStorage.removeItem('ae_events_loc');
$ae_loc.allow_access = false;
$ae_loc.authenticated_access = false;
$ae_loc.edit_mode = false;
// $ae_loc.ver = '';
localStorage.clear();
// window.localStorage.clear();
}
function clear_sess() {
// sessionStorage.removeItem('ae_sess');
// sessionStorage.removeItem('ae_idaa_sess');
// sessionStorage.removeItem('ae_journals_sess');
// sessionStorage.removeItem('ae_events_sess');
sessionStorage.clear();
}
</script>
<svelte:head>
@@ -137,15 +137,15 @@
</svelte:head>
{#if $events_loc?.ver && $events_loc?.ver !== $events_sess?.ver}
<div class="fixed inset-0 bg-pink-100/80 z-40">
<div class="fixed inset-0 z-40 bg-pink-100/80">
<button
type="button"
class="
fixed top-16 left-0 right-0 z-50 p-4 m-8 sm:mx-16 md:mx-32
btn btn-lg rounded-2xl
preset-tonal-warning hover:preset-filled-success-200-800
border-4 border-warning-300 dark:border-warning-700
transition-all
btn btn-lg preset-tonal-warning hover:preset-filled-success-200-800 border-warning-300 dark:border-warning-700 fixed top-16 right-0
left-0 z-50 m-8
rounded-2xl border-4
p-4 transition-all sm:mx-16
md:mx-32
"
onclick={async () => {
// Clear the IndexedDB
@@ -171,17 +171,22 @@
location.reload();
}}
title="A new version of One Sky IT's Aether Events module is available. Click to reload the page and use the latest version."
>
<RefreshCw size="1em" class="animate-spin shrink-0" aria-hidden="true" />
<span class="m-4 sm:mx-8 text-wrap">
title="A new version of One Sky IT's Aether Events module is available. Click to reload the page and use the latest version.">
<RefreshCw
size="1em"
class="shrink-0 animate-spin"
aria-hidden="true" />
<span class="m-4 text-wrap sm:mx-8">
New Events Module Version Available!<br />
Click to Reload<br />
<div class="italic text-base">
<div class="text-base italic">
You may need to sign in again.
</div>
</span>
<RefreshCw size="1em" class="animate-spin shrink-0" aria-hidden="true" />
<RefreshCw
size="1em"
class="shrink-0 animate-spin"
aria-hidden="true" />
<!-- <span class="text-xs">
$events_loc.ver=${$events_loc?.ver}<br>
@@ -202,59 +207,54 @@
class:iframe={$ae_loc?.iframe}
class="
ae_events
min-h-full h-full min-w-full w-full max-w-7xl
overflow-auto container
flex flex-col gap-1
m-auto
container m-auto flex h-full min-h-full
w-full max-w-7xl
min-w-full flex-col gap-1
overflow-auto
bg-gray-50 dark:bg-gray-900
text-gray-800 dark:text-gray-200
"
>
bg-gray-50 text-gray-800
dark:bg-gray-900 dark:text-gray-200
">
{#if !$ae_sess?.disable_sys_nav && !$ae_loc?.iframe}
<nav
bind:clientHeight={nav_y_height}
class:hidden={yTop > 600}
class:opacity-0={yTop > 250}
class="
submenu
print:hidden
z-20
hover:opacity-100
absolute top-0 left-0 right-0
w-full max-w-7xl
min-h-12 md:min-h-20
p-1 px-2 pb-2 m-auto
submenu
absolute
top-0
right-0
left-0 z-20 m-auto flex
min-h-12 w-full
max-w-7xl flex-col
items-center justify-between gap-1 rounded-b-lg
flex flex-col sm:flex-row sm:flex-wrap
items-center justify-between
gap-1
border-b-2 bg-gray-200 p-1 px-2
pb-2 transition-all
duration-1000
border-b-2 rounded-b-lg
hover:opacity-100 sm:flex-row
bg-gray-200 dark:bg-gray-800
sm:flex-wrap md:min-h-20
transition-all duration-1000
"
>
dark:bg-gray-800 print:hidden
">
<span class="justify-self-start">
<!-- Be sure to explain what &AElig; (Aether) means in the title text or similar! -->
<Satellite
size="1.5em"
class="mx-1 inline-block text-gray-500"
/>
class="mx-1 inline-block text-gray-500" />
<abbr title="Aether - Events Module"> Æ Events </abbr>
</span>
{#if !$ae_sess?.disable_sys_header}
<Element_data_store
ds_code="hub__site__appshell_header"
ds_type="html"
/>
ds_type="html" />
{/if}
<a
href="/"
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-success-500"
>
class="btn btn-sm preset-tonal-surface border-surface-500 hover:preset-filled-success-500 border">
<House />
<span class="hidden md:inline"> Home </span>
</a>
@@ -264,20 +264,27 @@
<section
class:iframe={$ae_loc?.iframe}
class:pt-0={!!$ae_sess?.disable_sys_nav || $ae_loc?.iframe}
class:pt-12={!$ae_sess?.disable_sys_nav && nav_y_height > 0 && nav_y_height <= 50}
class:pt-20={!$ae_sess?.disable_sys_nav && nav_y_height > 50 && nav_y_height <= 100}
class:pt-32={!$ae_sess?.disable_sys_nav && nav_y_height > 100 && nav_y_height <= 150}
class:pt-40={!$ae_sess?.disable_sys_nav && nav_y_height > 150 && nav_y_height <= 200}
class:pt-12={!$ae_sess?.disable_sys_nav &&
nav_y_height > 0 &&
nav_y_height <= 50}
class:pt-20={!$ae_sess?.disable_sys_nav &&
nav_y_height > 50 &&
nav_y_height <= 100}
class:pt-32={!$ae_sess?.disable_sys_nav &&
nav_y_height > 100 &&
nav_y_height <= 150}
class:pt-40={!$ae_sess?.disable_sys_nav &&
nav_y_height > 150 &&
nav_y_height <= 200}
class="
main_content
grow
px-1 md:px-2 lg:px-4
pb-[25vh]
flex flex-col gap-1
items-center
flex
grow flex-col items-center
justify-start
"
>
gap-1 px-1 pb-[25vh]
md:px-2
lg:px-4
">
<!-- Page Route Content -->
{@render children?.()}
</section>
@@ -285,14 +292,13 @@
<div
class:hidden={yTop < 500}
class="
print:hidden
z-20
hover:opacity-100
fixed bottom-40 right-1
fixed
right-1
bottom-40
z-20 flex flex-col
flex flex-col gap-1 items-end justify-end
"
>
items-end justify-end gap-1 hover:opacity-100 print:hidden
">
<!-- Scroll to top button -->
<button
type="button"
@@ -317,8 +323,7 @@
window.parent.postMessage({ scroll_to: 0 }, '*'); // This should be
}}
title="Scroll to top"
>
title="Scroll to top">
<ArrowUp size="1em" aria-hidden="true" />
Scroll to Top
</button>
@@ -346,8 +351,7 @@
window.parent.postMessage({ scroll_to: scroll_y }, '*');
}}
title="Scroll to bottom"
>
title="Scroll to bottom">
<ArrowDown size="1em" aria-hidden="true" />
Scroll to Bottom
<!-- yTop={yTop} yScroll={yScroll} yHeight={yHeight} scroll_y={scroll_y} scrollTop={scroll_container().scrollTop} total={scroll_container().scrollTop + yHeight} -->
@@ -360,32 +364,30 @@
class:opacity-80={yTop < 250}
class:opacity-0={yTop > 250}
class="
footer print:hidden z-20
hover:opacity-100
absolute bottom-0 left-0 right-0
footer absolute right-0
bottom-0
left-0 z-20 m-auto flex
w-full max-w-7xl
p-1 m-auto
flex-row flex-wrap
flex flex-row flex-wrap
items-center justify-between
sm:flex-row md:items-center md:justify-between
gap-1
items-center justify-between gap-1
rounded-t-lg border-t-2
border-gray-200 bg-gray-200 p-1
text-xs
border-t-2 border-gray-200 dark:border-gray-600
rounded-t-lg
bg-gray-200 dark:bg-gray-800
transition-all duration-1000 hover:text-base
hover:opacity-100
sm:flex-row md:items-center
text-xs hover:text-base
md:justify-between dark:border-gray-600
transition-all duration-1000
dark:bg-gray-800 print:hidden
"
class:ae_debug={$ae_loc.debug}
>
class:ae_debug={$ae_loc.debug}>
<Element_data_store
ds_code="hub__site__appshell_footer"
ds_type="html"
class_li="grow flex flex-row justify-between"
/>
class_li="grow flex flex-row justify-between" />
</footer>
{/if}
</div>