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">
/** @type {import('./$types').LayoutData} */
let log_lvl: number = 0;
// console.log(`ae_ Svelte root +layout data:`, data);
// *** Import Svelte specific
import { onMount } from 'svelte';
import '../app.postcss';
// *** Import other supporting libraries
@@ -13,12 +11,8 @@ import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
initializeStores();
import { Modal } from '@skeletonlabs/skeleton';
import type {
// DrawerSettings, DrawerComponent, DrawerStore,
ModalSettings, ModalComponent, ModalStore
ModalComponent
} from '@skeletonlabs/skeleton';
// const drawerStore = getDrawerStore();
// import ModalComponentEditSponsorshipObj from './sponsorships/10_edit_modal__sponsorship_obj.svelte';
const modalRegistry: Record<string, ModalComponent> = {
// Set a unique modal ID, then pass the component reference
@@ -30,11 +24,8 @@ const modalRegistry: Record<string, ModalComponent> = {
// Highlight JS
import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/github-dark.css';
// import type { Writable } from 'svelte/store';
// import { get } from 'svelte/store';
import { browser } from '$app/environment';
// import { goto } from '$app/navigation';
// import { page } from "$app/stores";
import { localStorageStore, storeHighlightJs } from '@skeletonlabs/skeleton';
import xml from 'highlight.js/lib/languages/xml'; // for HTML
import css from 'highlight.js/lib/languages/css';
@@ -48,9 +39,9 @@ hljs.registerLanguage('typescript', typescript);
storeHighlightJs.set(hljs);
// Floating UI for Popups
import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
import { storePopup } from '@skeletonlabs/skeleton';
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
// import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
// import { storePopup } from '@skeletonlabs/skeleton';
// storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
// *** Import Aether specific variables and functions
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_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');
// 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}`);
}
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_acct.api,
}
// console.log(`$ae_api = `, $ae_api);
if (log_lvl) {
console.log(`$ae_api = `, $ae_api);
}
$ae_loc = {
...$ae_loc,
...ae_acct.loc,
}
// console.log(`$ae_loc = `, $ae_loc);
if (log_lvl) {
console.log(`$ae_loc = `, $ae_loc);
}
$slct = {
...$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.
let default_idb_reload_time = 120 * 60 * 1000; // 15 minutes?
@@ -242,30 +243,19 @@ if (browser) {
$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?
// goto('/', {replaceState: true, invalidateAll: true});
// localStorage.removeItem('ae_loc');
// localStorage.removeItem('events_loc');
// $ae_loc = {};
localStorage.removeItem('ae_loc');
localStorage.removeItem('events_loc');
localStorage.clear();
// sessionStorage.removeItem('ae_sess');
// sessionStorage.removeItem('events_sess');
sessionStorage.clear();
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');
if (iframe == 'true') {
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
// $: if (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
let access_type_li = ['super', 'manager', 'administrator', 'trusted', 'public', 'authenticated', 'anonymous'];
$: if (browser && $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 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');
const access_type_li = ['super', 'manager', 'administrator', 'trusted', 'public', 'authenticated', 'anonymous'];
$effect(() => {
if (browser && $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 if (browser) {
document.getElementsByTagName('html')[0].classList.remove('super_access', 'manager_access', 'administrator_access', 'trusted_access', 'public_access', 'authenticated_access', 'anonymous_access');
}
});
</script>
@@ -435,37 +408,43 @@ onMount(() => {
slotFooter={($ae_loc.iframe ? 'iframe' : '')}
>
<svelte:fragment slot="header">
<!-- App Bar -->
<AppBar
gridColumns="grid-cols-3"
slotDefault="place-self-center"
slotTrail="place-content-end"
padding="px-4"
>
<svelte:fragment slot="lead">
{#snippet header()}
<!-- App Bar -->
<AppBar
gridColumns="grid-cols-3"
slotDefault="place-self-center"
slotTrail="place-content-end"
padding="px-4"
>
{#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
ds_code="hub__page__appshell_header_lead"
ds_code="hub__site__appshell_header"
ds_type="html"
/>
{#snippet trail()}
</svelte:fragment>
<!-- 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
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>
<Element_data_store
ds_code="hub__page__appshell_header_trail"
ds_type="html"
/>
</svelte:fragment>
{/snippet}
</AppBar>
{/snippet}
<!-- !($ae_loc.site_access_key && $ae_loc.site_domain_access_key)
@@ -477,35 +456,37 @@ onMount(() => {
<!-- {access_key ?? '-- param key not set --'} -->
<!-- Page Route Content -->
<slot />
{@render children?.()}
<svelte:fragment slot="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"
/>
{#snippet footer()}
<button
type="button"
on:click={() => {
<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
type="button"
onclick={() => {
console.log('Debug ae_loc:', $ae_loc);
$ae_loc.debug = !$ae_loc?.debug;
}}
id="AE-Quick-Debug"
class="ae_quick_debug btn btn-sm variant-glass-surface transition-all"
title="Turn debug content and styles off and on"
>
&pi;
</button>
</div>
</svelte:fragment>
id="AE-Quick-Debug"
class="ae_quick_debug btn btn-sm variant-glass-surface transition-all"
title="Turn debug content and styles off and on"
>
&pi;
</button>
</div>
{/snippet}
</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>
<button
type="button"
on:click={() => {
onclick={() => {
localStorage.clear();
sessionStorage.clear();
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"
title="Reload and clear the page cache"