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

Finally got things working. Store act odd when being set under layout.ts?

Browse Source
This commit is contained in:
Scott Idem
2024-02-26 21:04:17 -05:00
parent 060c0500d3
commit 9540aefd50
5 changed files with 231 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app.html
View File

@@ -5,7 +5,7 @@
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title>Svelte Skeleton Tailwind - OSIT's &AElig; Dev</title> <title>New Svelte Structure - OSIT's &AElig; Dev</title>
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -16,7 +16,6 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script> <script>
</script> </script>
%sveltekit.head% %sveltekit.head%

5
src/app.postcss
View File

@@ -56,4 +56,9 @@ body {
max-height: 96vh; max-height: 96vh;
/* max-height: 99%; */ /* max-height: 99%; */
}
#appShell #shell-header.iframe {
display: none;
} }

70
src/routes/+layout.svelte
View File

@@ -60,7 +60,10 @@ console.log($ae_loc, $ae_sess, $ae_api);
import Element_access_type from '$lib/element_access_type.svelte'; import Element_access_type from '$lib/element_access_type.svelte';
export let data; export let data;
console.log(`Svelte +Layout page data:`, data); console.log(`ae_ Svelte +Layout page data:`, data);
// $ae_loc = data;
// const ae_loc_test_store: Writable<string> = localStorageStore('ae_loc_test', {'test': 'This is a test'}); // const ae_loc_test_store: Writable<string> = localStorageStore('ae_loc_test', {'test': 'This is a test'});
// // Subscribe to the store // // Subscribe to the store
@@ -95,7 +98,7 @@ async function handle_get_data_store_obj_w_code({ code=null, data_type='text', t
// localStorage.getItem(code); // localStorage.getItem(code);
// if ($ae_loc_test_store) { // if ($ae_loc_test_store) {
// $ae_loc.hub.ds[code] = $ae_loc_test_store; // $ae_loc.ds[code] = $ae_loc_test_store;
// } else { // } else {
// console.log('Get local storage item miss.'); // console.log('Get local storage item miss.');
// } // }
@@ -111,14 +114,14 @@ async function handle_get_data_store_obj_w_code({ code=null, data_type='text', t
if (data_type == 'text') { if (data_type == 'text') {
// console.log(get_data_store_result.text); // console.log(get_data_store_result.text);
$ae_loc.hub.ds[code] = get_data_store_result.text; $ae_loc.ds[code] = get_data_store_result.text;
} else if (data_type == 'json') { } else if (data_type == 'json') {
// console.log(get_data_store_result.json); // console.log(get_data_store_result.json);
$ae_loc.hub.ds[code] = get_data_store_result.json; $ae_loc.ds[code] = get_data_store_result.json;
} }
// console.log(`Code: ${$ae_loc.hub.ds[code]}`); // console.log(`Code: ${$ae_loc.ds[code]}`);
// console.log(`Code:`, $ae_loc.hub.ds[code]); // console.log(`Code:`, $ae_loc.ds[code]);
if (trigger) { if (trigger) {
$slct_trigger = trigger; $slct_trigger = trigger;
@@ -131,11 +134,11 @@ async function handle_get_data_store_obj_w_code({ code=null, data_type='text', t
} }
$slct_trigger = 'set_access_code_li'; $slct_trigger = 'set_access_code_li';
$: if ($slct_trigger == 'set_access_code_li' && $ae_loc.hub.ds['hub__page__access_code_li_json']) { $: if ($slct_trigger == 'set_access_code_li' && $ae_loc.ds['hub__page__access_code_li_json']) {
console.log(`$ae_loc.hub.ds['hub__page__access_code_li_json'] = `, $ae_loc.hub.ds['hub__page__access_code_li_json']); console.log(`$ae_loc.ds['hub__page__access_code_li_json'] = `, $ae_loc.ds['hub__page__access_code_li_json']);
$slct_trigger = null; // Reset the trigger to prevent loops $slct_trigger = null; // Reset the trigger to prevent loops
$ae_loc.page_access_code_li = $ae_loc.hub.ds['hub__page__access_code_li_json']; $ae_loc.page_access_code_li = $ae_loc.ds['hub__page__access_code_li_json'];
$ae_loc = $ae_loc; // Trigger Svelte just in case $ae_loc = $ae_loc; // Trigger Svelte just in case
console.log($ae_loc); console.log($ae_loc);
} }
@@ -214,32 +217,47 @@ $: if ($slct_trigger == 'set_access_code_li' && $ae_loc.hub.ds['hub__page__acces
<!-- App Shell --> <!-- App Shell -->
<AppShell> <AppShell
slotHeader={($ae_loc.iframe ? 'iframe' : '')}
slotFooter={($ae_loc.iframe ? 'iframe' : '')}
>
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<!-- App Bar --> <!-- App Bar -->
<AppBar gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-content-end"> <AppBar gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-content-end">
<svelte:fragment slot="lead"> <svelte:fragment slot="lead">
<a href="/"> {#if $ae_loc.ds['hub__page__appshell_header_lead']}
&AElig; Home {@html $ae_loc.ds['hub__page__appshell_header_lead']}
</a> {:else}
<a href="/" class="text-xl">
<span class="fas fa-home"></span> &AElig; Home
</a>
{/if}
</svelte:fragment> </svelte:fragment>
<!-- OSIT's Aether App --> <!-- OSIT's Aether App -->
{@html $ae_loc.hub.ds['hub_site_header']} {@html $ae_loc.ds['hub__site__appshell_header']}
<svelte:fragment slot="trail"> <svelte:fragment slot="trail">
<!-- <a {#if $ae_loc.ds['hub__page__appshell_header_trail']}
class="btn btn-sm variant-ghost-surface" {@html $ae_loc.ds['hub__page__appshell_header_trail']}
href="/testing">Testing Page</a> --> {:else}
<a
class="btn btn-sm variant-ghost-surface"
href="/testing"
>
Testing X
</a>
<a <a
class="btn btn-sm variant-ghost-surface" class="btn btn-sm variant-ghost-surface"
class:active={$page.url.pathname==='/sponsorships'} class:active={$page.url.pathname==='/sponsorships'}
href="/sponsorships">Sponsorships</a> href="/sponsorships">Sponsorships</a>
<a <a
class="btn btn-sm variant-ghost-surface" class="btn btn-sm variant-ghost-surface"
class:active={$page.url.pathname==='/events_speakers'} class:active={$page.url.pathname==='/events_speakers'}
href="/events_speakers">Speakers</a> href="/events_speakers">Speakers</a>
{/if}
</svelte:fragment> </svelte:fragment>
</AppBar> </AppBar>
@@ -284,7 +302,7 @@ $: if ($slct_trigger == 'set_access_code_li' && $ae_loc.hub.ds['hub__page__acces
<svelte:fragment slot="footer"> <svelte:fragment slot="footer">
<div class="flex justify-between space-x-2"> <div class="flex justify-between space-x-2">
{@html $ae_loc.hub.ds['hub_site_footer']} {@html $ae_loc.ds['hub__site__appshell_footer']}
</div> </div>
</svelte:fragment> </svelte:fragment>

237
src/routes/+layout.ts
View File

@@ -10,7 +10,7 @@ type key_val = {
}; };
function handle_load_ae_obj_id__site_domain({fqdn, try_cache=false}) { async function handle_load_ae_obj_id__site_domain({fqdn, try_cache=false}) {
console.log(`*** handle_load_ae_obj_id__site_domain() *** fqdn=${fqdn}`); console.log(`*** handle_load_ae_obj_id__site_domain() *** fqdn=${fqdn}`);
let params = {}; let params = {};
@@ -47,8 +47,8 @@ function handle_load_ae_obj_id__site_domain({fqdn, try_cache=false}) {
return ae_site_domain_obj_get_promise; return ae_site_domain_obj_get_promise;
} }
let data_store_obj_get_promises: key_val = {}; // let data_store_obj_get_promises: key_val = {};
function handle_get_data_store_obj_w_code({ code=null, data_type='text' }) { async function handle_get_data_store_obj_w_code({ code=null, data_type='text' }) {
console.log(`*** handle_get_data_store_obj_w_code() *** code=${code}`); console.log(`*** handle_get_data_store_obj_w_code() *** code=${code}`);
if (!code) { if (!code) {
@@ -88,15 +88,22 @@ function handle_get_data_store_obj_w_code({ code=null, data_type='text' }) {
} }
export function load({ params, url }) { // route export async function load({ params, url }) { // route
console.log(`Svelte root layout.ts data = params:`, params); console.log(`Svelte root layout.ts data = params:`, params);
// console.log(`Svelte root layout.ts data = route:`, route); // console.log(`Svelte root layout.ts data = route:`, route);
console.log(`Svelte root layout.ts data = url:`, url); console.log(`Svelte root layout.ts data = url:`, url);
let ae_core: key_val = {} let ae_loc_tmp = get(ae_loc);
console.log(`ae_loc = `, ae_loc_tmp);
let ds_code_li: null|key_val = ae_loc_tmp.ds;
console.log(`ae_ ds_code_li = `, ds_code_li);
let ds_code: null|string = null;
let data_struct = { let data_struct = {
ae_core: ae_core, ae_init: ae_loc_tmp,
// ae_core: ae_core,
params: params, params: params,
sections: [ sections: [
{ slug: 'new', title: 'New Test' }, { slug: 'new', title: 'New Test' },
@@ -107,7 +114,7 @@ export function load({ params, url }) { // route
}; };
let site_domain_results = null; let loading_results = null;
let access_code_li_json = null; let access_code_li_json = null;
// First do a site_domain look up to check if it is valid and get the account_id. // First do a site_domain look up to check if it is valid and get the account_id.
@@ -119,11 +126,11 @@ export function load({ params, url }) { // route
// ae_loc.site_domain = data.url.origin; // ae_loc.site_domain = data.url.origin;
// console.log(`ae_loc = `, ae_loc); // console.log(`ae_loc = `, ae_loc);
site_domain_results = handle_load_ae_obj_id__site_domain({fqdn: url.host, try_cache: false}); loading_results = await handle_load_ae_obj_id__site_domain({fqdn: url.host, try_cache: false})
site_domain_results.then(function (site_domain_results) { .then(function (site_domain_results) {
if (site_domain_results) { if (site_domain_results) {
console.log(`site_domain_results = `, site_domain_results); console.log(`ae_ site_domain_results = `, site_domain_results);
let ae_api_tmp = get(ae_api); let ae_api_tmp = get(ae_api);
@@ -134,98 +141,192 @@ export function load({ params, url }) { // route
ae_api.set(ae_api_tmp); ae_api.set(ae_api_tmp);
console.log(`ae_api = `, get(ae_api)); console.log(`ae_api = `, get(ae_api));
ae_core = { ae_loc_tmp['account_id'] = site_domain_results.account_id_random;
'account_id': site_domain_results.account_id_random, ae_loc_tmp['site_id'] = site_domain_results.site_id_random;
'site_id': site_domain_results.site_id_random, ae_loc_tmp['site_domain_id'] = site_domain_results.site_domain_id_random;
'site_domain_id': site_domain_results.site_domain_id_random, ae_loc_tmp['enable'] = site_domain_results.enable;
'enable': site_domain_results.enable, ae_loc_tmp['style_href'] = site_domain_results.style_href;
'style_href': site_domain_results.style_href, ae_loc_tmp['google_tracking_id'] = site_domain_results.google_tracking_id;
'google_tracking_id': site_domain_results.google_tracking_id,
}
let ae_loc_tmp = get(ae_loc); // Get updated the data just in case.
ae_loc_tmp.account_id = site_domain_results.account_id_random; // ae_loc_tmp = get(ae_loc);
ae_loc.set(ae_loc_tmp); // ae_loc_tmp.account_id = site_domain_results.account_id_random;
console.log(`ae_loc = `, get(ae_loc)); // ae_loc_tmp.core = ae_core;
// ae_loc.set(ae_loc_tmp);
// console.log(`ae_loc = `, get(ae_loc));
} }
return site_domain_results; return true;
}) })
.then(function (site_domain_results) {
access_code_li_json = handle_get_data_store_obj_w_code({code: 'hub__page__access_code_li_json', data_type: 'json'});
access_code_li_json.then(function (access_code_li_json_results) { .then(async function (results) {
ds_code = 'hub__page__access_code_li_json';
await handle_get_data_store_obj_w_code({code: ds_code, data_type: 'json'})
.then(function (access_code_li_json_results) {
if (access_code_li_json_results) { if (access_code_li_json_results) {
console.log(`access_code_li_json_results = `, access_code_li_json_results); console.log(`ae_ access_code_li_json_results = `, access_code_li_json_results);
ae_core = { // ae_loc_tmp = get(ae_loc);
...ae_core, ae_loc_tmp = {
...ae_loc_tmp,
'access_code_li': access_code_li_json_results, 'access_code_li': access_code_li_json_results,
} }
let ae_loc_tmp = get(ae_loc); // ae_loc_tmp = get(ae_loc);
let code = 'hub__page__access_code_li_json'; // let code = 'hub__page__access_code_li_json';
ae_loc_tmp.hub.ds[code] = access_code_li_json_results; ds_code_li[ds_code] = access_code_li_json_results;
ae_loc.set(ae_loc_tmp); // ae_loc.set(ae_loc_tmp);
console.log(`ae_loc = `, get(ae_loc)); // console.log(`ae_loc = `, get(ae_loc));
} }
} }
); );
return site_domain_results; return true;
}) })
.then(function (site_domain_results) {
let ds_hub_site_header = handle_get_data_store_obj_w_code({code: 'hub_site_header'});
let ae_loc_tmp = get(ae_loc); .then(async function (results) {
let code = ''; // We are intentionally loading these in series, not parallel to limit the number of simultaneous requests.
// let ae_loc_tmp = get(ae_loc);
// Loading the header and footer in series, not parallel.
ds_code = 'hub__site__appshell_header';
await handle_get_data_store_obj_w_code({code: ds_code})
.then(function (ds_hub_site_header_results) {
ds_hub_site_header.then(function (ds_hub_site_header_results) {
if (ds_hub_site_header_results) { if (ds_hub_site_header_results) {
console.log(`ds_hub_site_header_results = `, ds_hub_site_header_results); console.log(`ae_ ds_hub_site_header_results = `, ds_hub_site_header_results);
// let ae_loc_tmp = get(ae_loc);
ae_core = { ds_code_li[ds_code] = ds_hub_site_header_results;
...ae_core,
'site_header': ds_hub_site_header_results,
}
code = 'hub_site_header'; // ae_loc.set(ae_loc_tmp);
ae_loc_tmp.hub.ds[code] = ds_hub_site_header_results; // console.log(`ae_loc = `, get(ae_loc));
ae_loc.set(ae_loc_tmp);
console.log(`ae_loc = `, get(ae_loc));
} }
});
let ds_hub_site_footer = handle_get_data_store_obj_w_code({code: 'hub_site_footer'}); })
ds_hub_site_footer.then(function (ds_hub_site_footer_results) { .then(async function () {
if (ds_hub_site_footer_results) {
console.log(`ds_hub_site_footer_results = `, ds_hub_site_footer_results);
ae_core = { ds_code = 'hub__site__appshell_footer';
...ae_core, await handle_get_data_store_obj_w_code({code: ds_code})
'site_footer': ds_hub_site_footer_results, .then(function (ds_hub_site_footer_results) {
if (ds_hub_site_footer_results) {
console.log(`ae_ hub__site__appshell_footer = `, ds_hub_site_footer_results);
// let ae_loc_tmp = get(ae_loc);
ds_code_li[ds_code] = ds_hub_site_footer_results;
// ae_loc.set(ae_loc_tmp);
// console.log(`ae_loc = `, get(ae_loc));
} }
});
code = 'hub_site_footer'; })
ae_loc_tmp.hub.ds[code] = ds_hub_site_footer_results;
.then(async function () {
ds_code = 'hub__site__root_page_content';
await handle_get_data_store_obj_w_code({code: ds_code})
.then(function (ds_code_results) {
if (ds_code_results) {
console.log(`ae_ hub__site__root_page_content = `, ds_code_results);
// let ae_loc_tmp = get(ae_loc);
ds_code_li[ds_code] = ds_code_results;
// ae_loc.set(ae_loc_tmp);
// console.log(`ae_loc = `, get(ae_loc));
}
});
})
.then(async function () {
// Loading the header and footer in series, not parallel.
ds_code = 'hub__page__appshell_header_lead';
await handle_get_data_store_obj_w_code({code: ds_code})
.then(function (ds_code_results) {
if (ds_code_results) {
console.log(`ae_ hub__page__appshell_header_lead = `, ds_code_results);
// let ae_loc_tmp = get(ae_loc);
ds_code_li[ds_code] = ds_code_results;
// ae_loc.set(ae_loc_tmp);
// console.log(`ae_loc = `, get(ae_loc));
}
});
})
.then(async function () {
ds_code = 'hub__page__appshell_header_trail';
await handle_get_data_store_obj_w_code({code: ds_code})
.then(function (ds_code_results) {
if (ds_code_results) {
console.log(`hub__page__appshell_header_trail = `, ds_code_results);
// let ae_loc_tmp = get(ae_loc);
ds_code_li[ds_code] = ds_code_results;
// ae_loc.set(ae_loc_tmp);
// console.log(`ae_loc = `, get(ae_loc));
}
});
ae_loc.set(ae_loc_tmp);
console.log(`ae_loc = `, get(ae_loc));
}
}); });
}) })
.finally(function () { .finally(function () {
let iframe = url.searchParams.get('iframe');
console.log(`iframe = `, iframe);
if (iframe == 'true') {
data_struct['iframe'] = iframe;
ae_loc_tmp.iframe = iframe;
} else if (iframe == 'false') {
data_struct['iframe'] = false;
ae_loc_tmp.iframe = false;
}
console.log(`ae_ ds_code_li = `, ds_code_li);
ae_loc_tmp = {
...ae_loc_tmp,
'ds': ds_code_li,
}
console.log(`ae_loc_tmp = `, ae_loc_tmp);
data_struct['ae_init'] = ae_loc_tmp;
ae_loc.set(ae_loc_tmp);
console.log(`ae_loc = `, get(ae_loc));
console.log(`root layout.ts finally load...`); console.log(`root layout.ts finally load...`);
data_struct['ae_core'] = ae_core; return true;
} }
); );
// let ae_loc_tmp = get(ae_loc);
// let iframe = url.searchParams.get('iframe');
// console.log(`iframe = `, iframe);
// if (iframe == 'true') {
// data_struct['iframe'] = iframe;
// ae_loc_tmp.iframe = iframe;
// } else if (iframe == 'false') {
// data_struct['iframe'] = false;
// ae_loc_tmp.iframe = false;
// }
// ae_loc.set(ae_loc_tmp);
// if (site_domain_results) { // if (site_domain_results) {
// console.log(`site_domain_results = `, site_domain_results); // console.log(`site_domain_results = `, site_domain_results);
@@ -257,11 +358,11 @@ export function load({ params, url }) { // route
// } // }
// } // }
// data_struct['ae_init'] = loading_results;
return data_struct;
} }
console.log(`ae_root layout.ts load is finally finished`);
return data_struct; return data_struct;
} }

19
src/routes/+page.svelte
View File

@@ -10,7 +10,7 @@ type key_val = {
import { api } from '$lib/api'; import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores'; import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
console.log(api); // console.log(api);
console.log($ae_loc, $ae_sess, $ae_api); console.log($ae_loc, $ae_sess, $ae_api);
@@ -32,7 +32,7 @@ onMount(() => {
// // localStorage.getItem(code); // // localStorage.getItem(code);
// // if ($ae_loc_test_store) { // // if ($ae_loc_test_store) {
// // $ae_loc.hub.ds[code] = $ae_loc_test_store; // // $ae_loc.ds[code] = $ae_loc_test_store;
// // } else { // // } else {
// // console.log('Get local storage item miss.'); // // console.log('Get local storage item miss.');
// // } // // }
@@ -48,14 +48,14 @@ onMount(() => {
// if (data_type == 'text') { // if (data_type == 'text') {
// // console.log(get_data_store_result.text); // // console.log(get_data_store_result.text);
// $ae_loc.hub.ds[code] = get_data_store_result.text; // $ae_loc.ds[code] = get_data_store_result.text;
// } else if (data_type == 'json') { // } else if (data_type == 'json') {
// // console.log(get_data_store_result.json); // // console.log(get_data_store_result.json);
// $ae_loc.hub.ds[code] = get_data_store_result.json; // $ae_loc.ds[code] = get_data_store_result.json;
// } // }
// // console.log(`Code: ${$ae_loc.hub.ds[code]}`); // // console.log(`Code: ${$ae_loc.ds[code]}`);
// // console.log(`Code:`, $ae_loc.hub.ds[code]); // // console.log(`Code:`, $ae_loc.ds[code]);
// } // }
// }) // })
// .catch(function (error) { // .catch(function (error) {
@@ -65,10 +65,14 @@ onMount(() => {
</script> </script>
<div class="container h-full mx-auto flex justify-center p-5"> <div class="container h-full mx-auto flex justify-center p-5">
{#if $ae_loc.ds['hub__site__root_page_content']}
{@html $ae_loc.ds['hub__site__root_page_content']}
{:else}
<div class="space-y-10 text-center flex flex-col items-center"> <div class="space-y-10 text-center flex flex-col items-center">
<h1 class="h1">One Sky IT's new Aether App Template</h1> <h1 class="h1">One Sky IT's new Aether App Template</h1>
<h2 class="h2">Using Svelte, SvelteKit, Tailwind, Skeleton</h2> <h2 class="h2">Development using: Svelte, SvelteKit, Tailwind, Skeleton</h2>
<div class="flex justify-center space-x-2"> <div class="flex justify-center space-x-2">
<a <a
@@ -86,6 +90,7 @@ onMount(() => {
</a> </a>
</div> </div>
</div> </div>
{/if}
</div> </div>