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

Working on more streamlined page load process

Browse Source
This commit is contained in:
Scott Idem
2025-04-29 20:15:37 -04:00
parent 007eb4ec9f
commit d256abc9b3
2 changed files with 1059 additions and 1044 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/ae_stores.ts
View File

@@ -47,14 +47,16 @@ export let ae_snip = string_snippets;
// }; // };
// Set the version for the app data. Changing this should force a notification and ask the user to clear and reload the page. // 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 = '2025-04-18_1335'; // KEEP: 2025-04-18_1335 let ver = '2025-04-29_1545'; // KEEP: 2025-04-18_1335
let ver_idb = '2025-04-18_1100'; // Not used let ver_idb = '2025-04-18_1100'; // Not used
// *** BEGIN *** Longer-term app data. This should be stored to local storage. // *** BEGIN *** Longer-term app data. This should be stored to local storage.
const ae_app_local_data_defaults: key_val = { const ae_app_local_data_defaults: key_val = {
last_page_reload: null, last_page_reload: null,
// last_idb_reload: null, // last_idb_reload: null,
last_cache_refresh: null, // last_cache_refresh: null, // Date.now()
last_cache_refresh: Date.now(),
cache_expired: false,
ver: ver, // ver, // '2025-04-18_1100', ver: ver, // ver, // '2025-04-18_1100',
ver_idb: ver_idb, // '2025-04-18_1100', ver_idb: ver_idb, // '2025-04-18_1100',
name: 'Aether - App Hub (SvelteKit 2.x Svelte 4.x)', name: 'Aether - App Hub (SvelteKit 2.x Svelte 4.x)',

801
src/routes/+layout.svelte
View File

@@ -2,13 +2,11 @@
/** @type {import('./$types').LayoutData} */ /** @type {import('./$types').LayoutData} */
// /** @type {import('./$types').LayoutProps} */ // /** @type {import('./$types').LayoutProps} */
let log_lvl: number = 0; let log_lvl: number = 1;
// *** Import Svelte specific // *** Import Svelte specific
import { tick } from 'svelte'; import { tick } from 'svelte';
import { goto } from '$app/navigation'; import { goto, invalidateAll } from '$app/navigation';
import '../app.postcss'; import '../app.postcss';
@@ -65,6 +63,7 @@
import Element_access_type from '$lib/element_access_type.svelte'; import Element_access_type from '$lib/element_access_type.svelte';
import Element_app_cfg from '$lib/element_app_cfg.svelte'; import Element_app_cfg from '$lib/element_app_cfg.svelte';
import Element_sign_in_out from '$lib/element_sign_in_out.svelte'; import Element_sign_in_out from '$lib/element_sign_in_out.svelte';
// import Element_data_store from '$lib/element_data_store_v2.svelte'; // import Element_data_store from '$lib/element_data_store_v2.svelte';
interface Props { interface Props {
@@ -78,34 +77,6 @@
console.log(`ae_root +layout.svelte data:`, data); console.log(`ae_root +layout.svelte data:`, data);
} }
// goto('/', {replaceState: true, invalidateAll: true});
// try {
// goto(data.route.id, {replaceState: true, invalidateAll: true});
// } catch (e) {
// console.log('Error going to root page:', e);
// goto('/', {replaceState: true, invalidateAll: true});
// }
if (browser && data.route.id !== '/') {
// try {
// goto(data.route.id, {replaceState: true, invalidateAll: true});
// } catch (e) {
// console.log('Error going to root page:', e);
// goto('/', {replaceState: true, invalidateAll: true});
// }
// goto('/', {replaceState: true, invalidateAll: true});
// $ae_loc = {};
// $ae_loc.app_cfg = {};
}
let trigger_clear_access: null|boolean = $state(null);
// let account_id = localStorage.getItem('ae_account_id');
// console.log(`account_id = `, account_id);
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other. This should catch anything that is a child of this layout.svelte file. // Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other. This should catch anything that is a child of this layout.svelte file.
$slct.account_id = data.account_id; $slct.account_id = data.account_id;
if (log_lvl) { if (log_lvl) {
@@ -137,89 +108,203 @@
console.log(`$slct = `, $slct); console.log(`$slct = `, $slct);
} }
let flag_clear_idb: boolean = $state(false);
let flag_clear_local: boolean = $state(false);
let flag_clear_sess: boolean = $state(false);
let flag_reload: boolean = $state(false); // Reload page required
let flag_new_ver: boolean = $state(false); // New version of the app
let flag_expired: boolean = $state(false); // Expired Cache
let flag_denied: boolean = $state(false); // Access Denied
// let flag_reason: string = $state(''); // Reason: New version, Expired Cache, Access Denied
// BEGIN: Sanity Checks:
if (!$ae_loc?.app_cfg) { if (!$ae_loc?.app_cfg) {
$ae_loc.app_cfg = {}; flag_reload = true;
$ae_loc.app_cfg.show_element__menu_btn = true; flag_expired = true;
$ae_loc.app_cfg.show_element__menu = false;
}
// if (!$ae_loc?.ver_testing) { $ae_loc.cache_expired = true;
// console.log(`TEST: AE Stores - ver_testing missing:`, $ae_loc);
// // ae_app_local_data_struct = {
// // ...$ae_loc,
// // ...ae_app_local_data_struct,
// // };
// // $ae_loc.ver_testing = true; // test
// } else {
// console.log(`TEST: AE Stores - ver_testing found`);
// // $ae_loc.ver_testing = false; // test 2
// }
// $ae_loc.app_cfg = {};
// // This should only be temporary. || !$ae_loc?.person || !$ae_loc?.user
// if (!$ae_loc) {
// console.log('No ae_loc. Reloading page...');
// window.location.reload();
// } else if ($ae_loc && $ae_sess && ($ae_loc.ver != $ae_sess.ver)) {
// console.log('New version of the ae_loc (core local storage) 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;
// // This does not seem to work fast enough or something?
// // goto('/', {replaceState: true, invalidateAll: true});
// console.log('Clearing localStorage...');
// // $ae_loc = null;
// // localStorage.removeItem('ae_loc');
// // localStorage.removeItem('ae_idaa_loc');
// // localStorage.removeItem('ae_journals_loc');
// // localStorage.removeItem('ae_events_loc');
// localStorage.clear();
// // sessionStorage.removeItem('ae_sess');
// // sessionStorage.removeItem('events_sess');
// // console.log('Clearing sessionStorage...');
// // sessionStorage.clear();
// console.log('Reloading page...');
// location.reload();
// } else if (!$ae_loc?.app_cfg) {
// console.log('No ae_loc.app_cfg. Reloading page...?');
// // $ae_loc = {};
// // localStorage.removeItem('ae_loc');
// // localStorage.removeItem('ae_idaa_loc');
// // localStorage.removeItem('ae_journals_loc');
// // localStorage.removeItem('ae_events_loc');
// // localStorage.clear();
// // sessionStorage.removeItem('ae_sess');
// // sessionStorage.removeItem('events_sess');
// // sessionStorage.clear();
// // window.location.reload();
// // location.reload();
// // tick();
// // $ae_loc.app_cfg = {};
// } else if ($ae_loc?.app_cfg && !$ae_loc?.app_cfg?.show_element__menu_btn) {
// console.log('No ae_loc.app_cfg.show_element__menu_btn. Forcing show.');
// $ae_loc.app_cfg.show_element__menu_btn = true; // $ae_loc.app_cfg.show_element__menu_btn = true;
// $ae_loc.app_cfg.show_element__menu = false; // $ae_loc.app_cfg.show_element__menu = false;
// } }
if (!$ae_loc?.ver) {
flag_reload = true;
flag_expired = true;
$ae_loc.cache_expired = true;
// $ae_loc.ver = false;
}
if (!$ae_loc?.site_cfg_json) {
flag_reload = true;
flag_expired = true;
$ae_loc.cache_expired = true;
// $ae_loc.site_cfg_json = {};
}
// END: Sanity Checks:
// BEGIN: New Version Check:
if ($ae_loc && $ae_sess && ($ae_loc.ver != $ae_sess.ver)) {
console.log('ROOT: New version of the ae_loc (core local storage) available!!!');
console.log(`$ae_loc.ver: ${$ae_loc.ver} != $ae_sess.ver: ${$ae_sess.ver}`);
flag_clear_idb = true;
flag_clear_local = true;
flag_clear_sess = true;
flag_reload = true;
flag_new_ver = true;
flag_expired = true; // If new version then expire the cache
$ae_loc.cache_expired = true;
// localStorage.clear();
// sessionStorage.clear();
$ae_loc.allow_access = false;
}
// BEGIN: Expired Cache Check:
// localStorage caches - Check if the last refresh timestamp for $ae_loc.last_refresh is no more than 48 hours ago. // localStorage caches - Check if the last refresh timestamp for $ae_loc.last_refresh is no more than 48 hours ago.
let default_refresh_time = 4 * 60 * 60 * 1000; // 48 hours or 2880 minutes? 48 * 60 *
let trusted_refresh_time = 168 * 60 * 60 * 1000; // 1 week or 10080 minutes? let default_refresh_minutes: number = 60;
let trusted_refresh_minutes: number = 120;
if ($ae_loc?.site_cfg_json?.default_refresh_minutes) {
default_refresh_minutes = $ae_loc.site_cfg_json.default_refresh_minutes;
}
if ($ae_loc?.site_cfg_json?.trusted_refresh_minutes) {
trusted_refresh_minutes = $ae_loc.site_cfg_json.trusted_refresh_minutes;
}
let default_refresh_time = default_refresh_minutes * 60 * 1000; // 48 hours or 2880 minutes? 48 * 60 *
let trusted_refresh_time = trusted_refresh_minutes * 60 * 1000; // 1 week or 10080 minutes?
// IDB caches - Check if the last refresh timestamp for $ae_loc.last_cache_refresh is no more than 15 minutes ago. // IDB caches - Check if the last refresh timestamp for $ae_loc.last_cache_refresh is no more than 15 minutes ago.
let default_idb_refresh_time = 2 * 60 * 60 * 1000; // 15 minutes? let default_idb_refresh_time = 120 * 60 * 60 * 1000; // 15 minutes?
let trusted_idb_refresh_time = 4 * 60 * 60 * 1000; // 4 hours or 120 minutes? let trusted_idb_refresh_time = 120 * 60 * 60 * 1000; // 4 hours or 120 minutes?
if (!$ae_loc?.last_cache_refresh) { // Default is null, currently...
console.log(`ROOT: Last reload not found. Need to set!`);
// $ae_loc.last_cache_refresh = Date.now();
flag_clear_idb = true;
flag_clear_local = true;
flag_clear_sess = true;
flag_reload = true;
flag_expired = true;
$ae_loc.cache_expired = true;
$ae_loc.allow_access = false;
} else {
if (log_lvl) {
console.log(`Trusted: ${$ae_loc?.trusted_access}`, (Date.now() - $ae_loc?.last_cache_refresh), trusted_refresh_time);
console.log(`ROOT: Checking expired cache based on last_cache_refresh UNIX timestamp: ${new Date($ae_loc.last_cache_refresh).toISOString()} (${Math.floor((Date.now() - $ae_loc.last_cache_refresh) / 60000)} minutes ago)`);
console.log(`ROOT: Last diff: ${Date.now() - $ae_loc?.last_cache_refresh}`);
}
if ($ae_loc?.trusted_access && (Date.now() - $ae_loc?.last_cache_refresh) > trusted_refresh_time) {
console.log(`ROOT: Last (trusted) local config reload too old for all caches: ${$ae_loc.last_cache_refresh}`);
flag_clear_idb = true;
flag_clear_local = true;
flag_clear_sess = true;
flag_reload = true;
flag_expired = true;
$ae_loc.cache_expired = true;
$ae_loc.allow_access = false;
} else if (!$ae_loc?.trusted_access && (Date.now() - $ae_loc?.last_cache_refresh) > default_refresh_time) {
console.log(`ROOT: Last (default) local config reload too old for all caches: ${$ae_loc.last_cache_refresh}`);
flag_clear_idb = true;
flag_clear_local = true;
flag_clear_sess = true;
flag_reload = true;
flag_expired = true;
$ae_loc.cache_expired = true;
$ae_loc.allow_access = false;
} else {
if (log_lvl > 1) {
console.log(`ROOT: Last local config reload is recent: ${$ae_loc.last_cache_refresh}`);
}
}
if ($ae_loc?.trusted_access && (Date.now() - $ae_loc?.last_cache_refresh) > trusted_idb_refresh_time) {
console.log(`ROOT: Last (trusted) IDB reload too old for IDB: ${$ae_loc.last_cache_refresh}`);
flag_clear_idb = true;
// flag_clear_local = false;
// flag_clear_sess = false;
flag_reload = true;
flag_expired = true;
$ae_loc.cache_expired = true;
$ae_loc.allow_access = false;
} else if (!$ae_loc?.trusted_access && (Date.now() - $ae_loc.last_cache_refresh) > default_idb_refresh_time) {
console.log(`ROOT: Last (default) IDB reload too old for IDB: ${$ae_loc.last_cache_refresh}`);
flag_clear_idb = true;
// flag_clear_local = false;
// flag_clear_sess = false;
flag_reload = true;
flag_expired = true;
$ae_loc.cache_expired = true;
$ae_loc.allow_access = false;
} else {
if (log_lvl > 1) {
console.log(`ROOT: Last IDB reload is recent: ${$ae_loc.last_cache_refresh}`);
}
}
}
// END: Expired Cache Check:
// BEGIN: Access Checks:
// Updated 2024-11-21
if ($ae_loc.site_access_key || $ae_loc.site_domain_access_key) {
// log_lvl = 2;
if (log_lvl > 1) {
console.log(`We need to do a current check against the allow_access value. site key: ${$ae_loc.site_access_key}, domain key: ${$ae_loc.site_domain_access_key}`);
}
// $ae_loc.allow_access is set to they key if passed in the URL. It is set to true if they are just "trusted".
if ($ae_loc.site_access_key === $ae_loc.allow_access || $ae_loc.site_domain_access_key === $ae_loc.allow_access) {
if (log_lvl > 1) {
console.log(`PASS: The allow_access was checked earlier and just now checked against the site or domain key.`);
}
} else {
// console.log(`FAIL: The access key was checked earlier, but just now failed. Checking if they are trusted...`);
if ($ae_loc.trusted_access) {
if (log_lvl > 1) {
console.log(`PASS: The access key was checked and failed, but we have trusted access.`);
}
$ae_loc.allow_access = true;
} else {
if (log_lvl) {
console.log(`FAIL: The site and domain access key was checked and failed, and we do not have trusted access.`);
}
$ae_loc.allow_access = false;
flag_denied = true;
}
}
} else {
// This means this site and domain do not require an access key.
$ae_loc.allow_access = true;
}
// BEGIN: iframe Check:
// END: iframe Check:
// BEGIN: Special Checks for Events, Sponsorships, IDAA, CHOW, etc.:
// There should almost always be an event_id set. // There should almost always be an event_id set.
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_slct.event_id = $ae_loc.site_cfg_json.slct__event_id;
@@ -254,65 +339,42 @@
console.log(`No Sponsorship Config ID set.`); console.log(`No Sponsorship Config ID set.`);
} }
} }
// END: Special Checks
// Root Svelte Layout Specific:
let trigger_clear_access: null|boolean = $state(null);
// Updated 2024-11-21 // $effect(() => {
if ($ae_loc.site_access_key || $ae_loc.site_domain_access_key) { if (browser && flag_reload) {
// log_lvl = 2;
if (log_lvl > 1) {
console.log(`We need to do a current check against the allow_access value. site key: ${$ae_loc.site_access_key}, domain key: ${$ae_loc.site_domain_access_key}`);
}
// $ae_loc.allow_access is set to they key if passed in the URL. It is set to true if they are just "trusted".
if ($ae_loc.site_access_key === $ae_loc.allow_access || $ae_loc.site_domain_access_key === $ae_loc.allow_access) {
if (log_lvl > 1) {
console.log(`PASS: The allow_access was checked earlier and just now checked against the site or domain key.`);
}
} else {
// console.log(`FAIL: The access key was checked earlier, but just now failed. Checking if they are trusted...`);
if ($ae_loc.trusted_access) {
if (log_lvl > 1) {
console.log(`PASS: The access key was checked and failed, but we have trusted access.`);
}
$ae_loc.allow_access = true;
} else {
if (log_lvl) { if (log_lvl) {
console.log(`FAIL: The site and domain access key was checked and failed, and we do not have trusted access.`); console.log(`ROOT: Reloading page after other flags checked...`);
}
$ae_loc.allow_access = false;
}
}
} else {
// This means this site and domain do not require an access key.
$ae_loc.allow_access = true;
} }
// Clear Indexed DB as well
if (flag_clear_idb) {
if (log_lvl) {
console.log(`ROOT: Clearing IndexedDB databases...`);
}
if (browser) { clear_idb();
if (!$ae_loc) { }
console.log('No ae_loc. Reloading page...');
// window.location.reload();
} else if ($ae_loc && $ae_sess && ($ae_loc.ver != $ae_sess.ver)) {
console.log('TEST: New version of the ae_loc (core local storage) available!!!');
console.log(`$ae_loc.ver: ${$ae_loc.ver} != $ae_sess.ver: ${$ae_sess.ver}`);
// WARNING: The page should still manually be reloaded. // Clear localStorage and sessionStorage
if (flag_clear_local) {
if (log_lvl) {
console.log(`ROOT: Clearing localStorage...`);
}
// $ae_loc.ver = $ae_sess.ver; clear_local();
}
if (flag_clear_sess) {
if (log_lvl) {
console.log('ROOT: Clearing sessionStorage...');
}
// console.log('Clearing localStorage...'); clear_sess();
// localStorage.removeItem('ae_loc'); }
// localStorage.removeItem('ae_idaa_loc'); // tick();
// localStorage.removeItem('ae_journals_loc');
// localStorage.removeItem('ae_events_loc');
localStorage.clear();
// WARNING: The page should still manually be reloaded.
// sessionStorage.removeItem('ae_sess');
// sessionStorage.removeItem('events_sess');
// console.log('Clearing sessionStorage...');
// sessionStorage.clear();
// try { // try {
// goto(data.route.id, {replaceState: true, invalidateAll: true}); // goto(data.route.id, {replaceState: true, invalidateAll: true});
@@ -321,191 +383,70 @@
// goto('/', {replaceState: true, invalidateAll: true}); // goto('/', {replaceState: true, invalidateAll: true});
// } // }
// Go to root if not already there. Do this in case things have significantly changed, including routes. We need them to manually click the Reload and Clear Cache button. // This does not seem to work fast enough or something?
// console.log('Going to root page...');
// if (data.route.id !== '/') {
// goto('/', {replaceState: true, invalidateAll: true}); // goto('/', {replaceState: true, invalidateAll: true});
// }
// WARNING: The page should still manually be reloaded. // The page does usually seem to reload correctly?
} else if (!$ae_loc?.app_cfg) { // window.location.reload(true); // true only works with Firefox
console.log('No ae_loc.app_cfg. Reloading page...?'); // window.location.reload({forceGet: true});
$ae_loc.app_cfg = {}; // location.reload();
$ae_loc.app_cfg.show_element__menu_btn = true; // tick();
$ae_loc.app_cfg.show_element__menu = false;
// $ae_loc = {}; invalidateAll();
// alert('Local and Session Storage cleared and Indexed DBs deleted. You will probably want to refresh the page.');
}
function clear_idb() {
indexedDB.deleteDatabase('ae_archives_db'); // Archives module
// indexedDB.deleteDatabase('content'); // Archives module <-- WARNING
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db'); // Events module
// indexedDB.deleteDatabase('badges'); // Events module <-- WARNING
// indexedDB.deleteDatabase('devices'); // Events module <-- WARNING
// indexedDB.deleteDatabase('exhibits'); // Events module <-- WARNING
// indexedDB.deleteDatabase('exhibit_tracking'); // Events module
// indexedDB.deleteDatabase('files'); // Events module <-- WARNING
// indexedDB.deleteDatabase('locations'); // Events module <-- WARNING
// indexedDB.deleteDatabase('presentations'); // Events module <-- WARNING
// indexedDB.deleteDatabase('presenters'); // Events module <-- WARNING
// indexedDB.deleteDatabase('sessions'); // Events module <-- WARNING
// indexedDB.deleteDatabase('file'); // Core - Hosted Files module
indexedDB.deleteDatabase('ae_journals_db');
// indexedDB.deleteDatabase('journal_entry');
// indexedDB.deleteDatabase('notes');
indexedDB.deleteDatabase('ae_posts_db'); // Posts module
// indexedDB.deleteDatabase('comment'); // Posts module <-- WARNING
indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
// indexedDB.deleteDatabase('cfg'); // Sponsorships module <-- WARNING
// indexedDB.deleteDatabase('person'); // Core - People module
// indexedDB.deleteDatabase('user'); // Core - Not currently used
}
function clear_local() {
// localStorage.removeItem('ae_loc'); // localStorage.removeItem('ae_loc');
// localStorage.removeItem('ae_idaa_loc'); // localStorage.removeItem('ae_idaa_loc');
// localStorage.removeItem('ae_journals_loc'); // localStorage.removeItem('ae_journals_loc');
// localStorage.removeItem('ae_events_loc'); // localStorage.removeItem('ae_events_loc');
// localStorage.clear(); $ae_loc.allow_access = false;
$ae_loc.authenticated_access = false;
$ae_loc.edit_mode = false;
localStorage.clear();
}
function clear_sess() {
// sessionStorage.removeItem('ae_sess'); // sessionStorage.removeItem('ae_sess');
// sessionStorage.removeItem('events_sess'); // sessionStorage.removeItem('ae_idaa_sess');
// sessionStorage.clear(); // sessionStorage.removeItem('ae_journals_sess');
// sessionStorage.removeItem('ae_events_sess');
// window.location.reload(); sessionStorage.clear();
// location.reload();
// tick();
// $ae_loc.app_cfg = {};
// goto(data.route.id, {replaceState: true, invalidateAll: true});
} else if ($ae_loc?.app_cfg && !$ae_loc?.app_cfg?.show_element__menu_btn) {
console.log('No ae_loc.app_cfg.show_element__menu_btn. Forcing show.');
$ae_loc.app_cfg.show_element__menu_btn = true;
$ae_loc.app_cfg.show_element__menu = false;
}
// if ($ae_loc && $ae_sess && ($ae_loc.ver != $ae_sess.ver)) {
// console.log('New version of the ae_loc (core local storage) 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;
// // This does not seem to work fast enough or something?
// // goto('/', {replaceState: true, invalidateAll: true});
// console.log('Clearing localStorage...');
// $ae_loc = null;
// // localStorage.removeItem('ae_loc');
// // localStorage.removeItem('ae_idaa_loc');
// // localStorage.removeItem('ae_journals_loc');
// // localStorage.removeItem('ae_events_loc');
// // localStorage.clear();
// // sessionStorage.removeItem('ae_sess');
// // sessionStorage.removeItem('events_sess');
// // console.log('Clearing sessionStorage...');
// // sessionStorage.clear();
// // tick();
// // window.location.reload();
// location.reload();
// }
if (!$ae_loc?.last_cache_refresh) {
// if (log_lvl) {
console.log(`Last reload not found. Need to set!`);
// }
$ae_loc.last_cache_refresh = Date.now();
// Clear Indexed DB as well
indexedDB.deleteDatabase('ae_archives_db');
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db');
indexedDB.deleteDatabase('ae_journals_db');
indexedDB.deleteDatabase('ae_notes_db');
indexedDB.deleteDatabase('ae_posts_db');
localStorage.clear();
window.location.reload();
} else if ($ae_loc?.last_cache_refresh && $ae_loc?.trusted_access && (Date.now() - $ae_loc?.last_cache_refresh) > trusted_refresh_time) {
if (log_lvl) {
console.log(`Last (trusted) reload too old: ${$ae_loc.last_cache_refresh}`);
}
$ae_loc.last_cache_refresh = Date.now();
// Clear Indexed DB as well
indexedDB.deleteDatabase('ae_archives_db');
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db');
indexedDB.deleteDatabase('ae_journals_db');
indexedDB.deleteDatabase('ae_notes_db');
indexedDB.deleteDatabase('ae_posts_db');
// localStorage.removeItem('ae_loc');
// localStorage.removeItem('events_loc');
localStorage.clear();
window.location.reload();
} else if ($ae_loc?.last_cache_refresh && (Date.now() - $ae_loc?.last_cache_refresh) > default_refresh_time) {
// if (log_lvl) {
console.log(`Last (default) reload too old: ${$ae_loc.last_cache_refresh}`);
// }
$ae_loc.last_cache_refresh = Date.now();
// Clear Indexed DB as well
indexedDB.deleteDatabase('ae_archives_db');
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db');
indexedDB.deleteDatabase('ae_journals_db');
indexedDB.deleteDatabase('ae_notes_db');
indexedDB.deleteDatabase('ae_posts_db');
// localStorage.removeItem('ae_loc');
// localStorage.removeItem('events_loc');
localStorage.clear();
window.location.reload();
} else if ($ae_loc?.last_cache_refresh && $ae_loc?.trusted_access && (Date.now() - $ae_loc?.last_cache_refresh) > trusted_idb_refresh_time) {
if (log_lvl) {
console.log(`Last (trusted) reload too old: ${$ae_loc.last_cache_refresh}`);
}
$ae_loc.last_cache_refresh = Date.now();
// Clear Indexed DB as well
indexedDB.deleteDatabase('ae_archives_db');
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db');
indexedDB.deleteDatabase('ae_journals_db');
indexedDB.deleteDatabase('ae_notes_db');
indexedDB.deleteDatabase('ae_posts_db');
// localStorage.removeItem('ae_loc');
// localStorage.removeItem('events_loc');
window.location.reload();
} else if ($ae_loc.last_cache_refresh && (Date.now() - $ae_loc.last_cache_refresh) > default_idb_refresh_time) {
if (log_lvl) {
console.log(`Last (default) reload too old: ${$ae_loc.last_cache_refresh}`);
}
$ae_loc.last_cache_refresh = Date.now();
// Clear Indexed DB as well
indexedDB.deleteDatabase('ae_archives_db');
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db');
indexedDB.deleteDatabase('ae_journals_db');
indexedDB.deleteDatabase('ae_notes_db');
indexedDB.deleteDatabase('ae_posts_db');
// localStorage.removeItem('ae_loc');
// localStorage.removeItem('events_loc');
window.location.reload();
} else {
if (log_lvl > 1) {
console.log(`Last reload is recent: ${$ae_loc.last_cache_refresh}`);
}
} }
// Waiting until the browser exists. if (browser) {
// 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_archives_db');
// indexedDB.deleteDatabase('ae_core_db');
// indexedDB.deleteDatabase('ae_events_db');
// indexedDB.deleteDatabase('ae_notes_db');
// indexedDB.deleteDatabase('ae_posts_db');
// $ae_loc.ver_idb = $ae_sess.ver_idb;
// window.location.reload();
// }
// save_ds_to_local(ae_acct.ds); // save_ds_to_local(ae_acct.ds);
let ae_ds = ae_acct.ds; let ae_ds = ae_acct.ds;
@@ -625,6 +566,61 @@
} }
}); });
//
$effect(() => {
if (browser) {
const interval = setInterval(() => {
if (log_lvl) {
// Show the UNIX timestamp in current ISO time format
console.log(`ROOT LOOP: Checking expired cache based on last_cache_refresh UNIX timestamp: ${new Date($ae_loc.last_cache_refresh).toISOString()} (${Math.floor((Date.now() - $ae_loc.last_cache_refresh) / 60000)} minutes ago)`);
console.log(`ROOT: Last diff: ${Date.now() - $ae_loc?.last_cache_refresh} | trusted: ${$ae_loc?.trusted_access} | trusted_refresh_time: ${trusted_refresh_time} | default_refresh_time: ${default_refresh_time}`);
}
// invalidateAll();
if ($ae_loc?.trusted_access && (Date.now() - $ae_loc?.last_cache_refresh) > trusted_refresh_time) {
if (log_lvl) {
console.log(`ROOT LOOP: Last (trusted) local config reload too old for all caches: ${$ae_loc.last_cache_refresh}`);
}
// flag_clear_idb = true;
// flag_clear_local = true;
// flag_clear_sess = true;
// flag_reload = true;
// flag_expired = true;
$ae_loc.allow_access = false;
$ae_loc.cache_expired = true;
// location.reload();
clearInterval(interval);
} else if (!$ae_loc?.trusted_access && (Date.now() - $ae_loc?.last_cache_refresh) > default_refresh_time) {
if (log_lvl) {
console.log(`ROOT LOOP: Last (default) local config reload too old for all caches: ${$ae_loc.last_cache_refresh}`);
}
// clear_idb();
// clear_local();
// clear_sess();
// flag_clear_idb = true;
// flag_clear_local = true;
// flag_clear_sess = true;
// flag_reload = true;
// flag_expired = true;
$ae_loc.allow_access = false;
$ae_loc.cache_expired = true;
// location.reload();
clearInterval(interval);
}
}, 7000);
}
});
</script> </script>
{#if $ae_loc?.site_google_tracking_id && $ae_loc?.site_google_tracking_id.length > 0} {#if $ae_loc?.site_google_tracking_id && $ae_loc?.site_google_tracking_id.length > 0}
@@ -640,7 +636,7 @@
<!-- regionFooter="flex justify-end space-x-2" --> <!-- regionFooter="flex justify-end space-x-2" -->
{#if (browser && flag_new_ver)}
<div class="flex flex-col items-center justify-center h-full max-w-lg mx-auto space-y-4"> <div class="flex flex-col items-center justify-center h-full max-w-lg mx-auto space-y-4">
<h1 class="text-4xl font-bold text-red-600 dark:text-red-400">New Version Available</h1> <h1 class="text-4xl font-bold text-red-600 dark:text-red-400">New Version Available</h1>
<p class="text-lg text-center text-gray-800 dark:text-gray-200">A new version of the site is available. Please reload the page.</p> <p class="text-lg text-center text-gray-800 dark:text-gray-200">A new version of the site is available. Please reload the page.</p>
@@ -648,54 +644,70 @@
type="button" type="button"
onclick={() => { onclick={() => {
// Clear the IndexedDB // Clear the IndexedDB
// Clear the IndexedDB clear_idb();
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_archives_db');
indexedDB.deleteDatabase('ae_events_db');
indexedDB.deleteDatabase('ae_journals_db');
// Clear localStorage and sessionStorage // Clear localStorage and sessionStorage
// Clear localStorage and sessionStorage clear_local();
localStorage.clear();
confirm('IDB, Local, and Session Storage cleared. The page should now refresh on its own.');
window.location.reload(); window.location.reload();
}} }}
}}
ondblclick={() => {
// Double click to clear all databases and reload the page.
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_archives_db');
indexedDB.deleteDatabase('ae_events_db');
indexedDB.deleteDatabase('ae_journals_db');
indexedDB.deleteDatabase('ae_posts_db');
// Clear localStorage and sessionStorage
localStorage.clear();
sessionStorage.clear();
confirm('Local and Session Storage cleared. The page should now refresh on its own.');
// window.location.reload({forceGet: true});
// window.location.reload(true);
window.location.reload();
class="btn btn-lg m-1 variant-filled-warning hover:variant-filled-success text-error-1000 hover:text-error-800 transition-all" class="btn btn-lg m-1 variant-filled-warning hover:variant-filled-success text-error-1000 hover:text-error-800 transition-all"
title="Reload and clear the page cache" title="Reload and clear the page cache"
> >
<span class="fas fa-sync mx-1"></span> <span class="fas fa-sync mx-1"></span>
Reload and Clear Cache Reload and Clear Cache
</button> </button>
<button
type="button"
onclick={() => {
window.location.reload();
}}
>
<span class="fas fa-sync mx-1"></span>
Reload Page
</button>
</div>
{:else if browser && $ae_loc?.cache_expired}
<div class="flex flex-col items-center justify-center h-full max-w-lg mx-auto space-y-4">
<h1 class="text-4xl font-bold text-red-600 dark:text-red-400">Expired Cache</h1>
<p class="text-lg text-center text-gray-800 dark:text-gray-200">The cache for this site has expired. Please reload the page.</p>
<button
type="button"
onclick={() => {
// Clear the IndexedDB
clear_idb();
// Clear localStorage and sessionStorage
clear_local();
confirm('IDB, Local, and Session Storage cleared. The page should now refresh on its own.');
window.location.reload();
}}
class="btn btn-lg m-1 variant-filled-warning hover:variant-filled-success text-error-1000 hover:text-error-800 transition-all"
title="Reload and clear the page cache"
>
<span class="fas fa-sync mx-1"></span>
Reload and Clear Cache
</button>
<button
type="button"
onclick={() => {
window.location.reload();
}}
>
<span class="fas fa-sync mx-1"></span>
Reload Page
</button>
</div> </div>
{:else if browser && !$ae_loc?.allow_access}
{:else if $ae_loc?.allow_access} <!-- flag_denied -->
<!-- Should we check for "browser" here as well? This may hide some status information as a page is loading. --> <!-- !$ae_loc?.allow_access -->
<!-- The children will contain top level (directly under body tag) div tag(s) or similar. Modal and AppShell should also be set there. The AppShell gives access to a header, footer, AppBar (usually under header), -->
{@render children?.()}
{:else if browser}
<div <div
data-sveltekit-preload-data="false" data-sveltekit-preload-data="false"
class="flex flex-col items-center justify-center h-full max-w-lg mx-auto space-y-4" class="flex flex-col items-center justify-center h-full max-w-lg mx-auto space-y-4"
@@ -707,41 +719,17 @@
type="button" type="button"
onclick={() => { onclick={() => {
console.log('Reloading page...'); console.log('Reloading page...');
console.log('Reloading page...'); // Clear the IndexedDB
// Clear the localStorage and sessionStorage, then reload the page. clear_idb();
// indexedDB.deleteDatabase('ae_core_db');
// indexedDB.deleteDatabase('ae_archives_db');
// indexedDB.deleteDatabase('ae_events_db');
// indexedDB.deleteDatabase('ae_journals_db');
// indexedDB.deleteDatabase('ae_posts_db');
// Clear localStorage and sessionStorage // Clear localStorage and sessionStorage
// Clear localStorage and sessionStorage clear_local();
localStorage.clear(); // clear_sess();
// sessionStorage.clear();
confirm('IDB, Local, and Session Storage cleared. The page should now refresh on its own.');
window.location.reload(); window.location.reload();
}} }}
}}
ondblclick={() => {
// // Double click to clear all databases and reload the page.
// indexedDB.deleteDatabase('ae_core_db');
// indexedDB.deleteDatabase('ae_archives_db');
// indexedDB.deleteDatabase('ae_events_db');
// indexedDB.deleteDatabase('ae_journals_db');
// indexedDB.deleteDatabase('ae_posts_db');
// // Clear localStorage and sessionStorage
// localStorage.clear();
// sessionStorage.clear();
// confirm('DOUBLE CLICk: Local and Session Storage cleared. The page should now refresh on its own.');
// // window.location.reload({forceGet: true});
// // window.location.reload(true);
// window.location.reload();
class="btn btn-sm m-1 variant-ghost-surface hover:variant-ghost-warning hover:variant-outline-warning text-error-600 hover:text-error-900 transition-all" class="btn btn-sm m-1 variant-ghost-surface hover:variant-ghost-warning hover:variant-outline-warning text-error-600 hover:text-error-900 transition-all"
title="Reload and clear the page cache" title="Reload and clear the page cache"
> >
@@ -749,6 +737,16 @@
Reload and Clear Cache Reload and Clear Cache
</button> </button>
<button
type="button"
onclick={() => {
window.location.reload();
}}
>
<span class="fas fa-sync mx-1"></span>
Reload Page
</button>
<!-- This is mainly for IDAA using iframes in the Novi site. --> <!-- This is mainly for IDAA using iframes in the Novi site. -->
<div <div
class="text-center text-sm text-gray-500" class="text-center text-sm text-gray-500"
@@ -759,6 +757,18 @@
</div> </div>
</div> </div>
{:else if (browser && $ae_loc?.allow_access)}
<!-- Should we check for "browser" here as well? This may hide some status information as a page is loading. -->
<!-- The children will contain top level (directly under body tag) div tag(s) or similar. Modal and AppShell should also be set there. The AppShell gives access to a header, footer, AppBar (usually under header), -->
{@render children?.()}
{:else if (browser || flag_reload)}
<span class="fas fa-spinner fa-spin"></span>
Loading...
{/if} {/if}
<!-- min-h-full <!-- min-h-full
@@ -766,6 +776,7 @@
min-w-full min-w-full
max-w-max --> max-w-max -->
{#if (browser) }
<!-- Toggle the menu --> <!-- Toggle the menu -->
<section <section
class=" class="
@@ -998,18 +1009,18 @@
</span> </span>
<!-- {/if} --> <!-- {/if} -->
{#if $ae_loc?.app_cfg?.show_element__sign_in_out}
<Element_sign_in_out <Element_sign_in_out
data={data} data={data}
hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out} hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
/> />
{/if} {/if}
{#if $ae_loc?.app_cfg?.show_element__access_type}
<Element_access_type <Element_access_type
<Element_access_type show_passcode_input={$ae_loc?.app_cfg?.show_element__passcode_input}
trigger_clear_access={trigger_clear_access} trigger_clear_access={trigger_clear_access}
trigger_clear_access={trigger_clear_access} hidden={$ae_loc?.iframe && !$ae_loc?.trusted_access && !$ae_loc?.app_cfg?.show_element__menu}
/> />
{/if} {/if}
@@ -1044,9 +1055,11 @@
</section> </section>
{/if}
<div <div
class="absolute bottom-0 left-0 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 w-full outline" class="absolute bottom-0 left-0 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 w-full outline"
class="absolute bottom-0 left-0 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 w-full outline" class:ae_debug={$ae_loc?.debug}
> >
<!-- {#if $ae_loc.app_cfg?.show_element__sign_in_out} <!-- {#if $ae_loc.app_cfg?.show_element__sign_in_out}
<Element_sign_in_out <Element_sign_in_out