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

General clean up. Trying to make things load faster and more smoothly.

Browse Source
This commit is contained in:
Scott Idem
2024-08-21 18:55:12 -04:00
parent fed37a77b8
commit 45d7cba562
8 changed files with 188 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/ae_events_stores.ts
View File

@@ -4,14 +4,20 @@ import type { Writable } from 'svelte/store';
import type { key_val } from '$lib/ae_stores';
// Set the version for the app data. Changing this should force a notification and ask the user to clear and reload the page.
let ver = '2024-08-21_1646';
let ver_idb = '2024-08-21_1645';
/* *** BEGIN *** Initialize events_local_data_struct */
// Longer-term app data. This should be stored to *local* storage.
// Updated 2024-03-06
let events_local_data_struct: key_val = {
'ver': '2024-06-26_12',
ver: ver,
ver_idb: ver_idb,
// Shared
'name': 'Aether - Events (SvelteKit 2.x Svelte 4.x)',
'title': `OSIT's Æ Events`, // - Dev SvelteKit`, // Æ
name: 'Aether - Events (SvelteKit 2.x Svelte 4.x)',
title: `OSIT's Æ Events`, // - Dev SvelteKit`, // Æ
'ds': {},
@@ -244,8 +250,10 @@ export let events_loc: Writable<key_val> = localStorageStore('ae_events_loc', ev
// Temporary app data. This should be stored to session storage.
// Updated 2024-03-06
let events_session_data_struct: key_val = {
'ver': '2024-03-19_17',
'log_lvl': 1,
ver: ver,
ver_idb: ver_idb,
log_lvl: 1,
// Shared
'ds': {
'submit_status': null,

35
src/lib/ae_stores.ts
View File

@@ -45,17 +45,21 @@ export let ae_snip = string_snippets;
// 'classes__events_pres_mgmt_menu': classes__events_pres_mgmt_menu
// };
// Set the version for the app data. Changing this should force a notification and ask the user to clear and reload the page.
let ver = '2024-08-21_1736';
let ver_idb = '2024-08-21_1735';
// *** BEGIN *** Longer-term app data. This should be stored to local storage.
export let ae_app_local_data_struct: key_val = {
'ver': '2024-08-16_1821',
'ver_idb': '2024-08-16_1826', // Clear if date IndexedDB version
'name': 'Aether - App Hub (SvelteKit 2.x Svelte 4.x)',
'theme': 'light',
'iframe': false,
'title': `OSIT's Æ`, // - Dev SvelteKit`, // &AElig;
ver: ver, // Clear local storage if date does not match the session ver value.
ver_idb: ver_idb, // Clear if date IndexedDB version
name: 'Aether - App Hub (SvelteKit 2.x Svelte 4.x)',
theme: 'light',
iframe: false,
title: `OSIT's Æ`, // - Dev SvelteKit`, // &AElig;
'debug': false, // A simple flag to know if we should show debug information.
'edit_mode': false, // A simple flag to know if we should show edit mode options.
debug: false, // A simple flag to know if we should show debug information.
edit_mode: false, // A simple flag to know if we should show edit mode options.
'account_id': ae_account_id, // OSIT Demo _XY7DXtc9MY
'account_code': 'not_set',
@@ -173,6 +177,8 @@ export let ae_app_local_data_struct: key_val = {
'person': {
show_content__person_page_help: false,
},
test: true,
}
// console.log(`AE Stores - App Local Storage Data:`, ae_app_local_data_struct);
@@ -186,11 +192,10 @@ export let ae_loc: Writable<key_val> = localStorageStore('ae_loc', ae_app_local_
// *** BEGIN *** Temporary app data. This should be stored to session storage.
export let ae_app_session_data_struct: key_val = {
'ver': '2024-02-27_13',
'log_lvl': 0,
// 'name': 'Aether App Template',
// 'theme': 'light',
// 'account_id': ae_account_id,
ver: ver,
ver_idb: ver_idb,
log_lvl: 0,
'ds': {
'submit_status': null,
},
@@ -235,6 +240,8 @@ export let ae_app_session_data_struct: key_val = {
'api_download_kv': {},
// Example: {example_file_id: {status: 'downloading', endpoint: '/event/file/abc123/download', filename: 'example_file_name.ext', size_total: 0, size_loaded: 0, percent_completed: 0}}
'api_upload_kv': {}, // {example_temp_id: {status: 'uploading', endpoint: '/event/file/abc123/upload', filename: 'example_file_name.ext', size_total: 0, size_loaded: 0, percent_completed: 0}}
test: true,
};
// console.log(`AE Stores - App Session Storage Data:`, ae_app_session_data_struct);
export let ae_sess = writable(ae_app_session_data_struct);
@@ -242,7 +249,7 @@ export let ae_sess = writable(ae_app_session_data_struct);
// *** BEGIN *** Temporary API data. This should be stored to session storage.
export let ae_api_data_struct: key_val = {
'ver': '2024-02-22_17',
'ver': '2024-08-11_11',
'base_url': api_base_url,
'base_url_bak': api_base_url_bak,
'api_secret_key': api_secret_key, // 'YOUR_API_SECRET_KEY',

69
src/lib/element_access_type.svelte
View File

@@ -52,87 +52,37 @@ function handle_check_access_type_passcode() {
window.localStorage.setItem('access_type', 'super');
entered_passcode = null;
$ae_loc.access_type = 'super';
trigger = 'process_permission_check';
dispatch_access_type_changed();
return true;
} else if ($ae_loc.page_access_code_li.manager == entered_passcode) {
console.log('Manager passcode matched');
window.localStorage.setItem('access_type', 'manager');
entered_passcode = null;
$ae_loc.access_type = 'manager';
trigger = 'process_permission_check';
dispatch_access_type_changed();
return true;
} else if ($ae_loc.page_access_code_li.administrator == entered_passcode) {
console.log('Administrator passcode matched');
window.localStorage.setItem('access_type', 'administrator');
entered_passcode = null;
$ae_loc.access_type = 'administrator';
trigger = 'process_permission_check';
// $ae_loc = $ae_loc; // Trigger Svelte just in case
// ae_loc.set($ae_loc);
// console.log($ae_loc);
dispatch_access_type_changed();
return true;
} else if ($ae_loc.page_access_code_li.trusted == entered_passcode) {
console.log('Trusted passcode matched');
window.localStorage.setItem('access_type', 'trusted');
entered_passcode = null;
$ae_loc.access_type = 'trusted';
trigger = 'process_permission_check';
// $ae_loc = $ae_loc; // Trigger Svelte just in case
// ae_loc.set($ae_loc);
// console.log($ae_loc);
dispatch_access_type_changed();
return true;
} else if ($ae_loc.page_access_code_li.public == entered_passcode) {
console.log('Public passcode matched');
window.localStorage.setItem('access_type', 'public');
entered_passcode = null;
$ae_loc.access_type = 'public';
trigger = 'process_permission_check';
dispatch_access_type_changed();
return true;
} else if ($ae_loc.page_access_code_li.authenticated == entered_passcode) {
console.log('Authenticated passcode matched');
window.localStorage.setItem('access_type', 'authenticated');
entered_passcode = null;
$ae_loc.access_type = 'authenticated';
trigger = 'process_permission_check';
dispatch_access_type_changed();
return true;
} else {
console.log('Passcode does not match');
@@ -149,6 +99,25 @@ function handle_check_access_type_passcode() {
return false;
}
entered_passcode = null;
trigger = 'process_permission_check';
// WARNING 2024-08-21: For some reason the config element does not auto show or hide when the access type changes.
if (!$ae_loc.iframe && $ae_loc.authenticated_access) {
$ae_loc.hub.show_element__access_type = true;
$ae_loc.hub.show_element__cfg = true;
} else if ($ae_loc.iframe && $ae_loc.trusted_access) {
$ae_loc.hub.show_element__access_type = true;
$ae_loc.hub.show_element__cfg = true;
} else {
$ae_loc.hub.show_element__access_type = true;
$ae_loc.hub.show_element__cfg = false;
}
dispatch_access_type_changed();
return true;
} else {
console.log('Entered passcode too short.');

14
src/lib/element_app_cfg.svelte
View File

@@ -8,9 +8,9 @@ import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
let notes: null|string = null;
let all: boolean = false;
export let theme_mode: null|string = null;
// export let theme_mode: null|string = null;
export let set_theme_mode: null|boolean = null;
export let theme_name: null|string = null;
// export let theme_name: null|string = null;
export let set_theme_name: null|boolean = null;
const dispatch = createEventDispatcher();
@@ -26,8 +26,8 @@ onMount(() => {
}
});
$: if ($slct_trigger == 'set_theme_mode' && $ae_loc.hub.theme_mode) {
console.log(`$ae_loc.hub.theme_mode=${$ae_loc.hub.theme_mode}`);
$: if ($slct_trigger == 'set_theme_mode' && $ae_loc?.hub?.theme_mode) {
console.log(`$ae_loc.hub.theme_mode=${$ae_loc?.hub?.theme_mode}`);
$slct_trigger = null;
if ($ae_loc.hub.theme_mode == 'light') {
document.documentElement.classList.remove('dark');
@@ -38,11 +38,11 @@ $: if ($slct_trigger == 'set_theme_mode' && $ae_loc.hub.theme_mode) {
}
}
$: if ($slct_trigger == 'set_theme_name' && $ae_loc.hub.theme_name) {
console.log(`$ae_loc.hub.theme_name=${$ae_loc.hub.theme_name}`);
$: if ($slct_trigger == 'set_theme_name' && $ae_loc?.hub?.theme_name) {
console.log(`$ae_loc?.hub?.theme_name=${$ae_loc?.hub?.theme_name}`);
$slct_trigger = null;
// Update the body attribute named "data-theme" to the current theme name.
document.body.setAttribute('data-theme', $ae_loc.hub.theme_name);
document.body.setAttribute('data-theme', $ae_loc?.hub?.theme_name);
}
// $: if (entered_passcode && entered_passcode.length >= 5) {

141
src/routes/+layout.svelte
View File

@@ -10,12 +10,12 @@ import '../app.postcss';
import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
// Initialize the stores for Drawer, Modal, and Toast so they work throughout the app.
initializeStores();
import { Drawer, Modal, getDrawerStore } from '@skeletonlabs/skeleton';
import { Modal } from '@skeletonlabs/skeleton';
import type {
// DrawerSettings, DrawerComponent, DrawerStore,
ModalSettings, ModalComponent, ModalStore
} from '@skeletonlabs/skeleton';
const drawerStore = getDrawerStore();
// const drawerStore = getDrawerStore();
// import ModalComponentEditSponsorshipObj from './sponsorships/10_edit_modal__sponsorship_obj.svelte';
@@ -33,6 +33,7 @@ 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
@@ -52,7 +53,7 @@ import { storePopup } from '@skeletonlabs/skeleton';
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
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 { events_loc, events_slct } from '$lib/ae_events_stores';
import type { key_val } from '$lib/ae_stores';
@@ -92,7 +93,7 @@ $slct = {
}
// console.log(`$slct = `, $slct);
if ($ae_loc.site_cfg_json.slct__event_id) {
if ($ae_loc?.site_cfg_json.slct__event_id) {
$events_slct.event_id = $ae_loc.site_cfg_json.slct__event_id;
$events_loc.event_id = $ae_loc.site_cfg_json.slct__event_id;
} else if ($events_slct.event_id) {
@@ -121,6 +122,54 @@ if (!$ae_loc.user_email) {
if (browser) {
// Waiting until the browser exists.
if ($ae_loc && $ae_sess && $ae_loc.ver_idb != $ae_sess.ver_idb) {
console.log('New version of the IDB available!!!');
console.log(`$ae_loc.ver_idb: ${$ae_loc.ver_idb} != $ae_sess.ver_idb: ${$ae_sess.ver_idb}`);
// Clear Indexed DB as well
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db');
$ae_loc.ver_idb = $ae_sess.ver_idb;
window.location.reload();
}
if ($ae_loc && $ae_sess && ($ae_loc.ver != $ae_sess.ver)) {
console.log('New version of the data store available!!!');
console.log(`$ae_loc.ver: ${$ae_loc.ver} != $ae_sess.ver: ${$ae_sess.ver}`);
// alert('New version available!!!');
$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');
localStorage.clear();
sessionStorage.clear();
window.location.reload();
// localStorage.removeItem('ae_loc');
// localStorage.removeItem('events_loc');
// localStorage.clear();
}
// save_ds_to_local(ae_acct.ds);
let ae_ds = ae_acct.ds;
console.log(`ae_ds__ data:`, ae_ds)
@@ -204,16 +253,16 @@ onMount(() => {
// TESTING TESTING TESTING
// WARNING: This needs to be tied to an object type and ID. This is a temporary solution.
$ae_sess.download = {
'endpoint': '/event/file/abc123/download',
'filename': 'example.txt',
'size_total': 0,
'size_loaded': 0,
'percent_completed': 0,
};
// $ae_sess.download = {
// 'endpoint': '/event/file/abc123/download',
// 'filename': 'example.txt',
// 'size_total': 0,
// 'size_loaded': 0,
// 'percent_completed': 0,
// };
// This is how the download and upload progress is tracked.
window.addEventListener('message', function(event) {
if (log_lvl) {
console.log('Message received in root +layout.svelte:');
@@ -221,25 +270,21 @@ onMount(() => {
}
if (event.data.type == 'api_download_blob') {
console.log('Download blob (file) message received:', event.data);
// Get the event_file_id from the event.data.endpoint value.
// Example: /event/file/abc123/download
// let endpoint = event.data.endpoint;
// let event_file_id = endpoint.split('/')[3];
if (log_lvl) {
console.log('Download blob (file) message received:', event.data);
}
let task_id = event.data.task_id;
$ae_sess.download[event.data.endpoint] = {
'status': event.data.status,
'task_id': task_id,
'endpoint': event.data.endpoint,
'filename': event.data.filename,
'size_total': event.data.size_total,
'size_loaded': event.data.size_loaded,
'percent_completed': event.data.percent_completed,
};
// $ae_sess.download[event.data.endpoint] = {
// 'status': event.data.status,
// 'task_id': task_id,
// 'endpoint': event.data.endpoint,
// 'filename': event.data.filename,
// 'size_total': event.data.size_total,
// 'size_loaded': event.data.size_loaded,
// 'percent_completed': event.data.percent_completed,
// };
$ae_sess.api_download_kv[task_id] =
{
@@ -252,7 +297,9 @@ onMount(() => {
'percent_completed': event.data.percent_completed,
};
} else if (event.data.type == 'api_post_json_form') {
console.log('Post JSON form message received:', event.data);
if (log_lvl) {
console.log('Post JSON form message received:', event.data);
}
let task_id = event.data.task_id;
@@ -291,22 +338,6 @@ onMount(() => {
regionFooter='modal-footer flex justify-between space-x-2'
/>
<!-- <Drawer>
{#if $drawerStore.id === 'example-1'}
(show 'example-1' contents)
{:else if $drawerStore.id === 'example-2'}
(show 'example-2' contents)
{:else if $drawerStore.id === 'sponsorships__edit'}
(show 'sponsorships__edit__sponsorship_obj' contents)
<section class="sponsorships_editing">
</section>
{:else}
(fallback contents)
{/if}
</Drawer> -->
<!-- App Shell -->
<AppShell
regionPage={($ae_loc.iframe ? 'iframe' : '')}
@@ -400,8 +431,8 @@ onMount(() => {
<button
on:click={() => {
console.log('Debug:', $ae_loc);
$ae_loc.debug = !$ae_loc.debug;
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"
@@ -416,18 +447,18 @@ onMount(() => {
</AppShell>
{#if $ae_loc.hub.show_element__access_type}
{#if $ae_loc.hub?.show_element__access_type}
<Element_access_type />
{/if}
<span
class:hidden={!$ae_loc.hub.show_element__cfg}
>
<!-- {#if $ae_loc.hub.show_element__cfg} -->
<Element_app_cfg set_theme_mode={true} set_theme_name={true} />
<!-- {/if} -->
</span>
<!-- <span
class:hidden={!$ae_loc?.hub?.show_element__cfg}
> -->
{#if $ae_loc.hub?.show_element__cfg}
<Element_app_cfg set_theme_mode={true} set_theme_name={true} />
{/if}
<!-- </span> -->
<style lang="postcss">

4
src/routes/+layout.ts
View File

@@ -20,7 +20,7 @@ const ae_no_account_id = PUBLIC_AE_NO_ACCOUNT_ID;
const ae_no_account_id_token = PUBLIC_AE_NO_ACCOUNT_ID_TOKEN;
let ae_api_init: key_val = {
'ver': '2024-03-27_11',
'ver': '2024-08-11_11',
'base_url': api_base_url,
'base_url_bak': api_base_url_bak,
'api_secret_key': api_secret_key, // 'YOUR_API_SECRET_KEY',
@@ -171,7 +171,7 @@ export async function load({ fetch, params, parent, route, url }) { // params, r
// return false;
// return;
error(500, {
message: 'Not found'
message: 'Account ID not found'
});
}
// console.log(ae_loc_init);

109
src/routes/events_pres_mgmt/+layout.svelte
View File

@@ -5,16 +5,16 @@ export let data: any;
// Imports
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
import type { Writable } from 'svelte/store';
import { localStorageStore } from '@skeletonlabs/skeleton';
// import { onMount } from 'svelte';
// import type { Writable } from 'svelte/store';
// import { localStorageStore } from '@skeletonlabs/skeleton';
import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils';
import { api } from '$lib/api';
// import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores';
import { events_loc, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';
import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
// import { events_func } from '$lib/ae_events_functions';
// import Element_data_store from '$lib/element_data_store.svelte';
@@ -43,12 +43,41 @@ $events_slct.event_obj_li = ae_acct.slct.event_obj_li;
let ae_promises: key_val = {};
onMount(() => {
if (browser) {
console.log('Events - Presentation Management: +layout.svelte');
console.log($events_slct.event_obj_li);
});
// if ($ae_loc.ver != $ae_sess.ver || $ae_loc.ver_idb != $ae_sess.ver_idb || $events_loc.ver != $events_sess.ver|| $events_loc.ver_idb != $events_sess.ver_idb) {
// console.log('New version available!!!');
// console.log(`$ae_loc.ver: ${$ae_loc.ver} != $ae_sess.ver: ${$ae_sess.ver}`);
// console.log(`$ae_loc.ver_idb: ${$ae_loc.ver_idb} != $ae_sess.ver_idb: ${$ae_sess.ver_idb}`);
// console.log(`$events_loc.ver: ${$events_loc.ver} != $events_sess.ver: ${$events_sess.ver}`);
// console.log(`$events_loc.ver_idb: ${$events_loc.ver_idb} != $events_sess.ver_idb: ${$events_sess.ver_idb}`);
// // alert('New version available!!!');
// // Clear Indexed DB as well
// indexedDB.deleteDatabase('ae_core_db');
// indexedDB.deleteDatabase('ae_events_db');
// 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');
// localStorage.clear();
// }
}
// Updated 2024-06-25
@@ -122,66 +151,6 @@ onMount(() => {
{/if}
{#if $ae_loc.ver != '2024-08-16_1821' || $ae_loc.ver_idb != '2024-08-16_1826'}
<div class="flex flex-col items-center justify-center bg-error-100 text-error-800 p-4 rounded-lg shadow-lg space-y-2 my-4 w-full">
<span class="fas fa-exclamation-triangle text-4xl text-error-800"></span>
<h2 class="text-2xl font-bold">New Version Available</h2>
<p class="text-lg max-w-2xl text-center">
There is a new version of the web app (this website). Please use the button to clear some cached data and settings. The page will then reload.
</p>
<button
class="btn btn-xl variant-ghost-success hover:variant-filled-success"
on:click={() => {
// This is not a very efficient way to do this, but it works for now.
// Do this first even if the localStorage will be cleared.
if ($ae_loc.ver_idb != '2024-08-16_1826') {
// Yep... this needs to be done differently.
$ae_loc.ver_idb = '2024-08-16_1826';
}
if ($ae_loc.ver != '2024-08-16_1821') {
alert('You will need to sign in again.')
// Clear the local and session storage. Clearing the localStorage will force it to be re-created.
localStorage.clear();
sessionStorage.clear();
}
// Clear Indexed DB as well
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db');
// This does not seem to work fast enough or something?
goto('/', {invalidateAll: true});
// The page does usually seem to reload correctly?
window.location.reload(true); // true only works with Firefox
// alert('Local and Session Storage cleared and Indexed DBs deleted. You will probably want to refresh the page.');
}}
title="New Version: Clear the browser storage for this page"
>
<!-- <span class="fas fa-eraser mx-1"></span> -->
<span class="fas fa-sync mx-1"></span>
Clear App Data &amp; Settings - Reload
</button>
{#if $ae_loc.ver != '2024-08-07_1504'}
<p class="text-lg font-bold max-w-2xl text-center">
You will need to sign in again after clearing the cache.
</p>
{/if}
<!-- <p>This reload will be done automatically in the future.</p> -->
</div>
{:else}
<!-- <div class="flex flex-col items-center justify-center bg-success-100 text-success-800 p-4 rounded-lg shadow-lg space-y-2 my-4 w-full">Local App Version {$ae_loc.ver}<br>Local App DB Version {$ae_loc.ver_idb}</div> -->
{/if}
<!-- <div class="container m-auto"> -->
<slot></slot>
<!-- </div> -->

2
src/routes/events_pres_mgmt/session/[slug]/+page.svelte
View File

@@ -121,7 +121,7 @@ onMount(() => {
<svelte:head>
<title>
Session: {ae_util.shorten_string({string: $lq__event_session_obj?.name, max_length: 12})} ({$lq__event_session_obj?.event_session_id}) - Pres Mgmt - {$events_loc?.title}
Session: {ae_util.shorten_string({string: $lq__event_session_obj?.name ?? 'Loading...', max_length: 12})} ({$lq__event_session_obj?.event_session_id ?? ''}) - Pres Mgmt - {$events_loc?.title}
</title>
</svelte:head>