Most things are working in the template now.
This commit is contained in:
Scott Idem
@@ -1,64 +1,163 @@
|
||||
<script lang="ts">
|
||||
import '../app.postcss';
|
||||
import { AppShell, AppBar } from '@skeletonlabs/skeleton';
|
||||
import '../app.postcss';
|
||||
import { AppShell, AppBar } from '@skeletonlabs/skeleton';
|
||||
|
||||
// Highlight JS
|
||||
import hljs from 'highlight.js/lib/core';
|
||||
import 'highlight.js/styles/github-dark.css';
|
||||
import { storeHighlightJs } from '@skeletonlabs/skeleton';
|
||||
import xml from 'highlight.js/lib/languages/xml'; // for HTML
|
||||
import css from 'highlight.js/lib/languages/css';
|
||||
import javascript from 'highlight.js/lib/languages/javascript';
|
||||
import typescript from 'highlight.js/lib/languages/typescript';
|
||||
// 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 { localStorageStore, storeHighlightJs } from '@skeletonlabs/skeleton';
|
||||
import xml from 'highlight.js/lib/languages/xml'; // for HTML
|
||||
import css from 'highlight.js/lib/languages/css';
|
||||
import javascript from 'highlight.js/lib/languages/javascript';
|
||||
import typescript from 'highlight.js/lib/languages/typescript';
|
||||
|
||||
hljs.registerLanguage('xml', xml); // for HTML
|
||||
hljs.registerLanguage('css', css);
|
||||
hljs.registerLanguage('javascript', javascript);
|
||||
hljs.registerLanguage('typescript', typescript);
|
||||
storeHighlightJs.set(hljs);
|
||||
hljs.registerLanguage('xml', xml); // for HTML
|
||||
hljs.registerLanguage('css', css);
|
||||
hljs.registerLanguage('javascript', javascript);
|
||||
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 });
|
||||
|
||||
type key_val = {
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
import { api } from '$lib/api';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
||||
console.log(api);
|
||||
console.log($ae_loc, $ae_sess, $ae_api);
|
||||
|
||||
|
||||
// const ae_loc_test_store: Writable<string> = localStorageStore('ae_loc_test', {'test': 'This is a test'});
|
||||
// // Subscribe to the store
|
||||
// ae_loc_test_store.subscribe(() => {});
|
||||
|
||||
// // Update the value
|
||||
// ae_loc_test_store.update(() => {});
|
||||
|
||||
// // Set the value
|
||||
// ae_loc_test_store.set(() => {});
|
||||
|
||||
// // // Read the value
|
||||
// get(ae_loc_test_store);
|
||||
|
||||
// // // Read value with automatic subscription
|
||||
// $ae_loc_test_store
|
||||
|
||||
let data_store_obj_get_promises: key_val = {};
|
||||
let get_ds_hub_site_header_promise = handle_get_data_store_obj_w_code({code: 'hub_site_header'});
|
||||
let get_ds_hub_site_footer_promise = handle_get_data_store_obj_w_code({code: 'hub_site_footer'});
|
||||
|
||||
|
||||
async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
|
||||
console.log('*** handle_get_data_store_obj_w_code() ***');
|
||||
|
||||
// let get_item_result = window.localStorage.getItem(code);
|
||||
// localStorage.getItem(code);
|
||||
|
||||
// if ($ae_loc_test_store) {
|
||||
// $ae_loc.hub.ds[code] = $ae_loc_test_store;
|
||||
// } else {
|
||||
// console.log('Get local storage item miss.');
|
||||
// }
|
||||
|
||||
data_store_obj_get_promises[code] = api.get_data_store_obj_w_code({
|
||||
api_cfg: $ae_api,
|
||||
data_store_code: code,
|
||||
data_type: data_type,
|
||||
log_lvl: 2
|
||||
})
|
||||
.then(function (get_data_store_result) {
|
||||
if (get_data_store_result) {
|
||||
|
||||
if (data_type == 'text') {
|
||||
// console.log(get_data_store_result.text);
|
||||
$ae_loc.hub.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;
|
||||
}
|
||||
|
||||
// console.log(`Code: ${$ae_loc.hub.ds[code]}`);
|
||||
// console.log(`Code:`, $ae_loc.hub.ds[code]);
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log('No results returned or failed.', error);
|
||||
});
|
||||
}
|
||||
|
||||
// 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 });
|
||||
</script>
|
||||
|
||||
|
||||
<!-- App Shell -->
|
||||
<AppShell>
|
||||
<svelte:fragment slot="header">
|
||||
<!-- App Bar -->
|
||||
<AppBar>
|
||||
<svelte:fragment slot="lead">
|
||||
<strong class="text-xl uppercase">Skeleton</strong>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="trail">
|
||||
<a
|
||||
class="btn btn-sm variant-ghost-surface"
|
||||
href="https://discord.gg/EXqV7W8MtY"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Discord
|
||||
</a>
|
||||
<a
|
||||
class="btn btn-sm variant-ghost-surface"
|
||||
href="https://twitter.com/SkeletonUI"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Twitter
|
||||
</a>
|
||||
<a
|
||||
class="btn btn-sm variant-ghost-surface"
|
||||
href="https://github.com/skeletonlabs/skeleton"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</svelte:fragment>
|
||||
</AppBar>
|
||||
</svelte:fragment>
|
||||
<!-- Page Route Content -->
|
||||
<slot />
|
||||
<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="/">
|
||||
Æ Home
|
||||
</a>
|
||||
</svelte:fragment>
|
||||
OSIT's Aether App
|
||||
<svelte:fragment slot="trail">
|
||||
<a
|
||||
class="btn btn-sm variant-ghost-surface"
|
||||
href="example">Example Page</a>
|
||||
|
||||
<a
|
||||
class="btn btn-sm variant-ghost-surface"
|
||||
href="example">Example Page</a>
|
||||
</svelte:fragment>
|
||||
</AppBar>
|
||||
|
||||
<!-- <AppBar>
|
||||
<svelte:fragment slot="lead">
|
||||
<strong class="text-xl uppercase">Skeleton</strong>
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="trail">
|
||||
<a
|
||||
class="btn btn-sm variant-ghost-surface"
|
||||
href="https://discord.gg/EXqV7W8MtY"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Discord
|
||||
</a>
|
||||
<a
|
||||
class="btn btn-sm variant-ghost-surface"
|
||||
href="https://twitter.com/SkeletonUI"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Twitter
|
||||
</a>
|
||||
<a
|
||||
class="btn btn-sm variant-ghost-surface"
|
||||
href="https://github.com/skeletonlabs/skeleton"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
</svelte:fragment>
|
||||
</AppBar> -->
|
||||
</svelte:fragment>
|
||||
<!-- Page Route Content -->
|
||||
<slot />
|
||||
|
||||
<svelte:fragment slot="footer">
|
||||
<div class="flex justify-between space-x-2">
|
||||
{@html $ae_loc.hub.ds['hub_site_footer']}
|
||||
</div>
|
||||
</svelte:fragment>
|
||||
|
||||
</AppShell>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user