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

Cleaning up the main layout.

Browse Source
This commit is contained in:
Scott Idem
2024-12-03 16:51:31 -05:00
parent 1bdd2aec65
commit aaa6eaa433
1 changed files with 96 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
src/routes/+layout.svelte
View File

@@ -1,10 +1,8 @@
<script lang="ts"> <script lang="ts">
/** @type {import('./$types').LayoutData} */ /** @type {import('./$types').LayoutData} */
let log_lvl: number = 0; let log_lvl: number = 0;
// console.log(`ae_ Svelte root +layout data:`, data);
// *** Import Svelte specific // *** Import Svelte specific
import { onMount } from 'svelte';
import '../app.postcss'; import '../app.postcss';
// *** Import other supporting libraries // *** Import other supporting libraries
@@ -13,12 +11,8 @@ import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
initializeStores(); initializeStores();
import { Modal } from '@skeletonlabs/skeleton'; import { Modal } from '@skeletonlabs/skeleton';
import type { import type {
// DrawerSettings, DrawerComponent, DrawerStore, ModalComponent
ModalSettings, ModalComponent, ModalStore
} from '@skeletonlabs/skeleton'; } from '@skeletonlabs/skeleton';
// const drawerStore = getDrawerStore();
// import ModalComponentEditSponsorshipObj from './sponsorships/10_edit_modal__sponsorship_obj.svelte';
const modalRegistry: Record<string, ModalComponent> = { const modalRegistry: Record<string, ModalComponent> = {
// Set a unique modal ID, then pass the component reference // Set a unique modal ID, then pass the component reference
@@ -30,11 +24,8 @@ const modalRegistry: Record<string, ModalComponent> = {
// Highlight JS // Highlight JS
import hljs from 'highlight.js/lib/core'; import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/github-dark.css'; import 'highlight.js/styles/github-dark.css';
// import type { Writable } from 'svelte/store';
// import { get } from 'svelte/store';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
// import { goto } from '$app/navigation';
// import { page } from "$app/stores";
import { localStorageStore, storeHighlightJs } from '@skeletonlabs/skeleton'; import { localStorageStore, storeHighlightJs } from '@skeletonlabs/skeleton';
import xml from 'highlight.js/lib/languages/xml'; // for HTML import xml from 'highlight.js/lib/languages/xml'; // for HTML
import css from 'highlight.js/lib/languages/css'; import css from 'highlight.js/lib/languages/css';
@@ -48,9 +39,9 @@ hljs.registerLanguage('typescript', typescript);
storeHighlightJs.set(hljs); storeHighlightJs.set(hljs);
// Floating UI for Popups // Floating UI for Popups
import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom'; // import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
import { storePopup } from '@skeletonlabs/skeleton'; // import { storePopup } from '@skeletonlabs/skeleton';
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow }); // storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
// *** Import Aether specific variables and functions // *** Import Aether specific variables and functions
import Analytics from '$lib/analytics.svelte' import Analytics from '$lib/analytics.svelte'
@@ -63,8 +54,16 @@ import Element_access_type from '$lib/element_access_type.svelte';
import Element_app_cfg from '$lib/element_app_cfg.svelte'; import Element_app_cfg from '$lib/element_app_cfg.svelte';
import Element_data_store from '$lib/element_data_store_v2.svelte'; import Element_data_store from '$lib/element_data_store_v2.svelte';
interface Props {
data: any;
children?: import('svelte').Snippet;
}
export let data: any; let { data, children }: Props = $props();
if (log_lvl) {
console.log(`ae_root +layout.svelte data:`, data);
}
// let account_id = localStorage.getItem('ae_account_id'); // let account_id = localStorage.getItem('ae_account_id');
// console.log(`account_id = `, account_id); // console.log(`account_id = `, account_id);
@@ -75,28 +74,30 @@ if (log_lvl) {
console.log(`*ae_root +layout.svelte* $slct.account_id = ${$slct.account_id}`); console.log(`*ae_root +layout.svelte* $slct.account_id = ${$slct.account_id}`);
} }
let ae_acct = data[$slct.account_id]; let ae_acct = data[$slct.account_id];
// console.log(`*ae_root +layout.svelte* ae_acct = `, ae_acct);
// let ae_acct = data.ae_acct;
// $ae_api = ae_acct.api;
// $ae_loc = ae_acct.loc;
$ae_api = { $ae_api = {
...$ae_api, ...$ae_api,
...ae_acct.api, ...ae_acct.api,
} }
// console.log(`$ae_api = `, $ae_api); if (log_lvl) {
console.log(`$ae_api = `, $ae_api);
}
$ae_loc = { $ae_loc = {
...$ae_loc, ...$ae_loc,
...ae_acct.loc, ...ae_acct.loc,
} }
// console.log(`$ae_loc = `, $ae_loc); if (log_lvl) {
console.log(`$ae_loc = `, $ae_loc);
}
$slct = { $slct = {
...$slct, ...$slct,
...ae_acct.slct, ...ae_acct.slct,
} }
// console.log(`$slct = `, $slct); if (log_lvl) {
console.log(`$slct = `, $slct);
}
// IDB caches - Check if the last reload timestamp for $ae_loc.last_idb_reload is no more than 15 minutes ago. // IDB caches - Check if the last reload timestamp for $ae_loc.last_idb_reload is no more than 15 minutes ago.
let default_idb_reload_time = 120 * 60 * 1000; // 15 minutes? let default_idb_reload_time = 120 * 60 * 1000; // 15 minutes?
@@ -242,30 +243,19 @@ if (browser) {
$ae_loc.ver = $ae_sess.ver; $ae_loc.ver = $ae_sess.ver;
// $ae_loc = {};
localStorage.removeItem('ae_loc');
localStorage.removeItem('events_loc');
// localStorage.clear();
// sessionStorage.removeItem('ae_sess');
// sessionStorage.removeItem('events_sess');
// sessionStorage.clear();
// This does not seem to work fast enough or something? // This does not seem to work fast enough or something?
// goto('/', {replaceState: true, invalidateAll: true}); // goto('/', {replaceState: true, invalidateAll: true});
// localStorage.removeItem('ae_loc'); // $ae_loc = {};
// localStorage.removeItem('events_loc'); localStorage.removeItem('ae_loc');
localStorage.removeItem('events_loc');
localStorage.clear(); localStorage.clear();
// sessionStorage.removeItem('ae_sess');
// sessionStorage.removeItem('events_sess');
sessionStorage.clear(); sessionStorage.clear();
window.location.reload(); window.location.reload();
// localStorage.removeItem('ae_loc');
// localStorage.removeItem('events_loc');
// localStorage.clear();
} }
@@ -323,16 +313,6 @@ if (browser) {
} }
}); });
// let access_type_li = ['super', 'manager', 'administrator', 'trusted', 'public', 'authenticated', 'anonymous'];
// if ($ae_loc.access_type && access_type_li.includes($ae_loc.access_type)) {
// document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
// document.getElementsByTagName('html')[0].classList.add(`${$ae_loc.access_type}_access`);
// } else {
// document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
// }
let iframe = data.url.searchParams.get('iframe'); let iframe = data.url.searchParams.get('iframe');
if (iframe == 'true') { if (iframe == 'true') {
console.log('Use iframe layout!'); console.log('Use iframe layout!');
@@ -377,10 +357,6 @@ if (browser) {
} }
// $ae_sess.site_appshell_header = JSON.parse(localStorage.getItem('ae_ds__hub__site__appshell_header'));
// console.log(`$ae_sess.site_appshell_header = `, $ae_sess.site_appshell_header);
// We want to loop through all of the data store (ds) key value pairs and set them to localStorage // We want to loop through all of the data store (ds) key value pairs and set them to localStorage
// $: if (ae_acct.ds) { // $: if (ae_acct.ds) {
// console.log(`ae_ds__ data:`, ae_acct.ds) // console.log(`ae_ds__ data:`, ae_acct.ds)
@@ -391,17 +367,14 @@ if (browser) {
// } // }
// Check if in the array of: super > manager > administrator > trusted > public > authenticated > anonymous // Check if in the array of: super > manager > administrator > trusted > public > authenticated > anonymous
let access_type_li = ['super', 'manager', 'administrator', 'trusted', 'public', 'authenticated', 'anonymous']; const access_type_li = ['super', 'manager', 'administrator', 'trusted', 'public', 'authenticated', 'anonymous'];
$: if (browser && $ae_loc.access_type && access_type_li.includes($ae_loc.access_type)) { $effect(() => {
document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access'); if (browser && $ae_loc.access_type && access_type_li.includes($ae_loc.access_type)) {
document.getElementsByTagName('html')[0].classList.add(`${$ae_loc.access_type}_access`); document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
} else if (browser) { document.getElementsByTagName('html')[0].classList.add(`${$ae_loc.access_type}_access`);
document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access'); } else if (browser) {
} document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
}
onMount(() => {
// console.log('Root: +layout.svelte');
}); });
</script> </script>
@@ -435,37 +408,43 @@ onMount(() => {
slotFooter={($ae_loc.iframe ? 'iframe' : '')} slotFooter={($ae_loc.iframe ? 'iframe' : '')}
> >
<svelte:fragment slot="header"> {#snippet header()}
<!-- App Bar -->
<AppBar <!-- App Bar -->
gridColumns="grid-cols-3" <AppBar
slotDefault="place-self-center" gridColumns="grid-cols-3"
slotTrail="place-content-end" slotDefault="place-self-center"
padding="px-4" slotTrail="place-content-end"
> padding="px-4"
<svelte:fragment slot="lead"> >
{#snippet lead()}
<Element_data_store
ds_code="hub__page__appshell_header_lead"
ds_type="html"
/>
{/snippet}
<!-- OSIT's Aether App -->
<!-- {@html (browser ? JSON.parse(localStorage.getItem('ae_ds__hub__site__appshell_header')).html : '-- not found --')} -->
<!-- {@html $ae_sess.site_appshell_header} -->
<Element_data_store <Element_data_store
ds_code="hub__page__appshell_header_lead" ds_code="hub__site__appshell_header"
ds_type="html" ds_type="html"
/> />
{#snippet trail()}
</svelte:fragment> <Element_data_store
<!-- OSIT's Aether App --> ds_code="hub__page__appshell_header_trail"
<!-- {@html (browser ? JSON.parse(localStorage.getItem('ae_ds__hub__site__appshell_header')).html : '-- not found --')} --> ds_type="html"
<!-- {@html $ae_sess.site_appshell_header} --> />
<Element_data_store
ds_code="hub__site__appshell_header"
ds_type="html"
/>
<svelte:fragment slot="trail">
<Element_data_store
ds_code="hub__page__appshell_header_trail"
ds_type="html"
/>
</svelte:fragment>
</AppBar>
</svelte:fragment> {/snippet}
</AppBar>
{/snippet}
<!-- !($ae_loc.site_access_key && $ae_loc.site_domain_access_key) <!-- !($ae_loc.site_access_key && $ae_loc.site_domain_access_key)
@@ -477,35 +456,37 @@ onMount(() => {
<!-- {access_key ?? '-- param key not set --'} --> <!-- {access_key ?? '-- param key not set --'} -->
<!-- Page Route Content --> <!-- Page Route Content -->
<slot /> {@render children?.()}
<svelte:fragment slot="footer"> {#snippet footer()}
<div
class="flex text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1"
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"
/>
<button <div
type="button" class="flex text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg text-slate-400 hover:text-slate-800 transition px-1"
on:click={() => { 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"
/>
<button
type="button"
onclick={() => {
console.log('Debug ae_loc:', $ae_loc); console.log('Debug ae_loc:', $ae_loc);
$ae_loc.debug = !$ae_loc?.debug; $ae_loc.debug = !$ae_loc?.debug;
}} }}
id="AE-Quick-Debug" id="AE-Quick-Debug"
class="ae_quick_debug btn btn-sm variant-glass-surface transition-all" class="ae_quick_debug btn btn-sm variant-glass-surface transition-all"
title="Turn debug content and styles off and on" title="Turn debug content and styles off and on"
> >
&pi; &pi;
</button> </button>
</div> </div>
</svelte:fragment>
{/snippet}
</AppShell> </AppShell>
@@ -520,11 +501,13 @@ onMount(() => {
<p class="text-lg text-center text-gray-500">You do not have access to this site. You may need a passcode and or URL site key.</p> <p class="text-lg text-center text-gray-500">You do not have access to this site. You may need a passcode and or URL site key.</p>
<button <button
type="button" type="button"
on:click={() => { onclick={() => {
localStorage.clear(); localStorage.clear();
sessionStorage.clear(); sessionStorage.clear();
alert('Local and Session Storage cleared. The page should now refresh on its own.'); alert('Local and Session Storage cleared. The page should now refresh on its own.');
window.location.reload(true); // window.location.reload({forceGet: true});
// window.location.reload(true);
window.location.reload();
}} }}
class="btn btn-sm m-1 variant-glass-surface hover:variant-outline-warning hover:variant-glass-warning text-error-400 hover:text-error-800 transition-all" class="btn btn-sm m-1 variant-glass-surface hover:variant-outline-warning hover:variant-glass-warning text-error-400 hover:text-error-800 transition-all"
title="Reload and clear the page cache" title="Reload and clear the page cache"