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

Prettier for Journals

Browse Source
This commit is contained in:
Scott Idem
2026-03-24 12:25:22 -04:00
parent e1338b1a72
commit b74c6d0e9c
25 changed files with 3983 additions and 4238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

269
src/routes/journals/+layout.svelte
View File

@@ -1,86 +1,95 @@
<script lang="ts">
/** @type {import('./$types').LayoutProps} */
let log_lvl = $state(0);
/** @type {import('./$types').LayoutProps} */
let log_lvl = $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 { ArrowDownUp, ArrowRight, House, RefreshCw, Satellite } from '@lucide/svelte';
// *** Import other supporting libraries
import {
ArrowDownUp,
ArrowRight,
House,
RefreshCw,
Satellite
} from '@lucide/svelte';
// *** Import Aether specific variables and functions
import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_slct,
journals_trig
} from '$lib/ae_journals/ae_journals_stores';
import Element_data_store from '$lib/elements/element_data_store.svelte';
import Help_tech from '$lib/app_components/e_app_help_tech.svelte';
// *** Import Aether specific variables and functions
import { ae_loc, ae_sess, ae_api, slct } from '$lib/stores/ae_stores';
import {
journals_loc,
journals_slct,
journals_trig
} from '$lib/ae_journals/ae_journals_stores';
import Element_data_store from '$lib/elements/element_data_store.svelte';
import Help_tech from '$lib/app_components/e_app_help_tech.svelte';
// *** Setup Svelte properties
interface Props {
data: any;
children: any;
}
let { data, children }: Props = $props();
// *** Setup Svelte properties
interface Props {
data: any;
children: any;
}
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(() => {
if ($slct.account_id !== data.account_id) {
$slct.account_id = data.account_id;
}
});
});
let ae_acct = $derived(data[data.account_id]);
$effect(() => {
if (ae_acct) {
untrack(() => {
if ($slct.account_id !== data.account_id) {
$slct.account_id = data.account_id;
if ($journals_slct.journal_id !== ae_acct.slct.journal_id) {
$journals_slct.journal_id = ae_acct.slct.journal_id;
}
if (
JSON.stringify($journals_slct.journal_obj_li) !==
JSON.stringify(ae_acct.slct.journal_obj_li)
) {
$journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
}
});
});
let ae_acct = $derived(data[data.account_id]);
$effect(() => {
if (ae_acct) {
untrack(() => {
if ($journals_slct.journal_id !== ae_acct.slct.journal_id) {
$journals_slct.journal_id = ae_acct.slct.journal_id;
}
if (JSON.stringify($journals_slct.journal_obj_li) !== JSON.stringify(ae_acct.slct.journal_obj_li)) {
$journals_slct.journal_obj_li = ae_acct.slct.journal_obj_li;
}
});
}
});
let nav_y_height = $state(0);
let box: any = $state(null);
let xLeft = $state(0);
let xScroll = $state(0);
let xWidth = $state(0);
let yTop = $state(0);
let yScroll = $state(0);
let yHeight = $state(0);
function handle_scroll() {
// console.log(`handle_scroll() called`);
if (box) {
xLeft = box.scrollLeft;
xScroll = box.scrollWidth;
xWidth = box.clientWidth;
yTop = box.scrollTop;
yHeight = box.clientHeight;
yScroll = box.scrollHeight;
// console.log(`handle_scroll() called: ${yTop}`);
}
}
});
function scroll_container() {
return (
document.getElementById('ae_main_content') ||
document.documentElement ||
document.body
);
let nav_y_height = $state(0);
let box: any = $state(null);
let xLeft = $state(0);
let xScroll = $state(0);
let xWidth = $state(0);
let yTop = $state(0);
let yScroll = $state(0);
let yHeight = $state(0);
function handle_scroll() {
// console.log(`handle_scroll() called`);
if (box) {
xLeft = box.scrollLeft;
xScroll = box.scrollWidth;
xWidth = box.clientWidth;
yTop = box.scrollTop;
yHeight = box.clientHeight;
yScroll = box.scrollHeight;
// console.log(`handle_scroll() called: ${yTop}`);
}
}
function scroll_container() {
return (
document.getElementById('ae_main_content') ||
document.documentElement ||
document.body
);
}
</script>
<svelte:head>
@@ -97,15 +106,14 @@
class:iframe={$ae_loc?.iframe}
class="
ae_journals
h-full max-h-full max-w-7xl
m-auto flex h-full
max-h-full
max-w-7xl flex-col gap-1
overflow-auto
flex flex-col gap-1
m-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
">
<!-- class:hidden={yTop > 200} -->
<nav
bind:clientHeight={nav_y_height}
@@ -113,36 +121,33 @@
class:opacity-0={yTop > 250}
class="
submenu
z-20
hover:opacity-100
absolute top-0 left-0 right-0
w-full max-w-7xl
min-h-12
p-1 px-2 pb-2 m-auto
absolute
top-0
right-0 left-0 z-20 m-auto
flex min-h-12
w-full
max-w-7xl flex-row flex-wrap items-center
flex flex-row flex-wrap
items-center justify-around sm:justify-between
gap-1
justify-around gap-1 rounded-b-lg
border-b-2 bg-gray-200 p-1
px-2
border-b-2 rounded-b-lg
pb-2 transition-all
bg-gray-200 dark:bg-gray-800
duration-1000 hover:opacity-100
transition-all duration-1000
"
>
sm:justify-between dark:bg-gray-800
">
<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 - Journals Module"> Æ Journals </abbr>
</span>
<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>
@@ -213,9 +218,8 @@
// window.location.reload(true); // true only works with Firefox
// alert('Local and Session Storage cleared and Indexed DBs deleted. You will probably want to refresh the page.');
}}
class="btn btn-sm preset-tonal-surface border border-surface-500 hover:preset-filled-warning-500"
title="Clear App Data & Settings: Clear IndexedDB and reload. If in edit mode localStorage and sessionStorage will also be cleared."
>
class="btn btn-sm preset-tonal-surface border-surface-500 hover:preset-filled-warning-500 border"
title="Clear App Data & Settings: Clear IndexedDB and reload. If in edit mode localStorage and sessionStorage will also be cleared.">
<!-- <span class="fas fa-eraser mx-1"></span> -->
<!-- <span class="fas fa-sync mx-1"></span> -->
<RefreshCw />
@@ -230,8 +234,7 @@
show_btn_class="btn-info"
additional_kv={{
test: true
}}
></Help_tech>
}}></Help_tech>
</nav>
<!-- Add overflow-auto to section element to have the main nav sort of sticky at top -->
@@ -244,23 +247,21 @@
class="
main_content
grow
px-1 md:px-2
pb-48
"
>
px-1 pb-48
md:px-2
">
{@render children?.()}
</section>
<div
class:hidden={yTop < 500}
class="
z-20
hover:opacity-100
fixed bottom-48 right-1
fixed
right-1
bottom-48 z-20 flex
flex flex-col gap-1 items-end justify-end
"
>
flex-col items-end justify-end gap-1 hover:opacity-100
">
<!-- Scroll to top button -->
<button
type="button"
@@ -293,8 +294,7 @@
window.parent.postMessage({ scroll_to: 0 }, '*');
}}
title="Scroll to top"
>
title="Scroll to top">
<ArrowDownUp class="rotate-180" />
Scroll to Top
</button>
@@ -321,8 +321,7 @@
window.parent.postMessage({ scroll_to: xScroll }, '*');
}}
title="Scroll to right"
>
title="Scroll to right">
<ArrowRight size="1em" class="inline" />
<!-- Scroll to Right
xLeft={xLeft} xScroll={xScroll} xWidth={xWidth} xScroll={xScroll} scrollLeft={scroll_container().scrollLeft}
@@ -360,8 +359,7 @@
window.parent.postMessage({ scroll_to: yScroll }, '*');
}}
title="Scroll to bottom"
>
title="Scroll to bottom">
<ArrowDownUp />
Scroll to Bottom
</button>
@@ -373,38 +371,35 @@
class:opacity-0={yTop > 250}
class="
footer
z-20
hover:opacity-100
absolute bottom-0 left-0 right-0
w-full max-w-7xl
p-1 m-auto
absolute
right-0
bottom-0 left-0 z-20 m-auto
flex w-full
max-w-7xl flex-row
flex flex-row flex-wrap
items-center justify-between
sm:flex-row md:items-center md:justify-between
gap-1
flex-wrap items-center justify-between
gap-1 rounded-t-lg
border-t-2 border-gray-200 bg-gray-200
p-1
border-t-2 border-gray-200 dark:border-gray-600
rounded-t-lg
bg-gray-200 dark:bg-gray-800
text-xs transition-all duration-1000
hover:text-base
hover:opacity-100 sm:flex-row
text-xs hover:text-base
md:items-center md:justify-between
transition-all duration-1000
dark:border-gray-600 dark:bg-gray-800
"
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>
</div>
{:else}
<section
class="main_content grow px-1 md:px-2 pb-28 flex flex-col gap-1 items-center"
>
class="main_content flex grow flex-col items-center gap-1 px-1 pb-28 md:px-2">
<p class="text-center">
You are not logged in as a user. You must be signed in to access the
journals module.