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" />
<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.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" />
<script>
</script>
%sveltekit.head%

5
src/app.postcss
View File

@@ -56,4 +56,9 @@ body {
max-height: 96vh;
/* 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';
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'});
// // 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);
// if ($ae_loc_test_store) {
// $ae_loc.hub.ds[code] = $ae_loc_test_store;
// $ae_loc.ds[code] = $ae_loc_test_store;
// } else {
// 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') {
// 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') {
// 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.hub.ds[code]);
// console.log(`Code: ${$ae_loc.ds[code]}`);
// console.log(`Code:`, $ae_loc.ds[code]);
if (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';
$: if ($slct_trigger == 'set_access_code_li' && $ae_loc.hub.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']);
$: if ($slct_trigger == 'set_access_code_li' && $ae_loc.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
$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
console.log($ae_loc);
}
@@ -214,32 +217,47 @@ $: if ($slct_trigger == 'set_access_code_li' && $ae_loc.hub.ds['hub__page__acces
<!-- App Shell -->
<AppShell>
<AppShell
slotHeader={($ae_loc.iframe ? 'iframe' : '')}
slotFooter={($ae_loc.iframe ? 'iframe' : '')}
>
<svelte:fragment slot="header">
<!-- App Bar -->
<AppBar gridColumns="grid-cols-3" slotDefault="place-self-center" slotTrail="place-content-end">
<svelte:fragment slot="lead">
<a href="/">
&AElig; Home
</a>
{#if $ae_loc.ds['hub__page__appshell_header_lead']}
{@html $ae_loc.ds['hub__page__appshell_header_lead']}
{:else}
<a href="/" class="text-xl">
<span class="fas fa-home"></span> &AElig; Home
</a>
{/if}
</svelte:fragment>
<!-- OSIT's Aether App -->
{@html $ae_loc.hub.ds['hub_site_header']}
{@html $ae_loc.ds['hub__site__appshell_header']}
<svelte:fragment slot="trail">
<!-- <a
class="btn btn-sm variant-ghost-surface"
href="/testing">Testing Page</a> -->
{#if $ae_loc.ds['hub__page__appshell_header_trail']}
{@html $ae_loc.ds['hub__page__appshell_header_trail']}
{:else}
<a
class="btn btn-sm variant-ghost-surface"
href="/testing"
>
Testing X
</a>
<a
class="btn btn-sm variant-ghost-surface"
class:active={$page.url.pathname==='/sponsorships'}
href="/sponsorships">Sponsorships</a>
<a
class="btn btn-sm variant-ghost-surface"
class:active={$page.url.pathname==='/sponsorships'}
href="/sponsorships">Sponsorships</a>
<a
class="btn btn-sm variant-ghost-surface"
class:active={$page.url.pathname==='/events_speakers'}
href="/events_speakers">Speakers</a>
<a
class="btn btn-sm variant-ghost-surface"
class:active={$page.url.pathname==='/events_speakers'}
href="/events_speakers">Speakers</a>
{/if}
</svelte:fragment>
</AppBar>
@@ -284,7 +302,7 @@ $: if ($slct_trigger == 'set_access_code_li' && $ae_loc.hub.ds['hub__page__acces
<svelte:fragment slot="footer">
<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>
</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}`);
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;
}
let data_store_obj_get_promises: key_val = {};
function handle_get_data_store_obj_w_code({ code=null, data_type='text' }) {
// let data_store_obj_get_promises: key_val = {};
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}`);
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 = route:`, route);
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 = {
ae_core: ae_core,
ae_init: ae_loc_tmp,
// ae_core: ae_core,
params: params,
sections: [
{ 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;
// 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;
// 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) {
console.log(`site_domain_results = `, site_domain_results);
console.log(`ae_ site_domain_results = `, site_domain_results);
let ae_api_tmp = get(ae_api);
@@ -134,98 +141,192 @@ export function load({ params, url }) { // route
ae_api.set(ae_api_tmp);
console.log(`ae_api = `, get(ae_api));
ae_core = {
'account_id': site_domain_results.account_id_random,
'site_id': site_domain_results.site_id_random,
'site_domain_id': site_domain_results.site_domain_id_random,
'enable': site_domain_results.enable,
'style_href': site_domain_results.style_href,
'google_tracking_id': site_domain_results.google_tracking_id,
}
ae_loc_tmp['account_id'] = site_domain_results.account_id_random;
ae_loc_tmp['site_id'] = site_domain_results.site_id_random;
ae_loc_tmp['site_domain_id'] = site_domain_results.site_domain_id_random;
ae_loc_tmp['enable'] = site_domain_results.enable;
ae_loc_tmp['style_href'] = site_domain_results.style_href;
ae_loc_tmp['google_tracking_id'] = site_domain_results.google_tracking_id;
let ae_loc_tmp = get(ae_loc);
ae_loc_tmp.account_id = site_domain_results.account_id_random;
ae_loc.set(ae_loc_tmp);
console.log(`ae_loc = `, get(ae_loc));
// Get updated the data just in case.
// ae_loc_tmp = get(ae_loc);
// ae_loc_tmp.account_id = site_domain_results.account_id_random;
// 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) {
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_core,
// ae_loc_tmp = get(ae_loc);
ae_loc_tmp = {
...ae_loc_tmp,
'access_code_li': access_code_li_json_results,
}
let ae_loc_tmp = get(ae_loc);
let code = 'hub__page__access_code_li_json';
// ae_loc_tmp = get(ae_loc);
// let code = 'hub__page__access_code_li_json';
ae_loc_tmp.hub.ds[code] = access_code_li_json_results;
ae_loc.set(ae_loc_tmp);
console.log(`ae_loc = `, get(ae_loc));
ds_code_li[ds_code] = access_code_li_json_results;
// ae_loc.set(ae_loc_tmp);
// 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);
let code = '';
.then(async function (results) {
// 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) {
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 = {
...ae_core,
'site_header': ds_hub_site_header_results,
}
ds_code_li[ds_code] = ds_hub_site_header_results;
code = 'hub_site_header';
ae_loc_tmp.hub.ds[code] = ds_hub_site_header_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));
}
});
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) {
if (ds_hub_site_footer_results) {
console.log(`ds_hub_site_footer_results = `, ds_hub_site_footer_results);
.then(async function () {
ae_core = {
...ae_core,
'site_footer': ds_hub_site_footer_results,
ds_code = 'hub__site__appshell_footer';
await handle_get_data_store_obj_w_code({code: ds_code})
.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 () {
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...`);
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) {
// 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;
}

19
src/routes/+page.svelte
View File

@@ -10,7 +10,7 @@ type key_val = {
import { api } from '$lib/api';
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);
@@ -32,7 +32,7 @@ onMount(() => {
// // localStorage.getItem(code);
// // if ($ae_loc_test_store) {
// // $ae_loc.hub.ds[code] = $ae_loc_test_store;
// // $ae_loc.ds[code] = $ae_loc_test_store;
// // } else {
// // console.log('Get local storage item miss.');
// // }
@@ -48,14 +48,14 @@ onMount(() => {
// if (data_type == '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') {
// // 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.hub.ds[code]);
// // console.log(`Code: ${$ae_loc.ds[code]}`);
// // console.log(`Code:`, $ae_loc.ds[code]);
// }
// })
// .catch(function (error) {
@@ -65,10 +65,14 @@ onMount(() => {
</script>
<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">
<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">
<a
@@ -86,6 +90,7 @@ onMount(() => {
</a>
</div>
</div>
{/if}
</div>