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

Making a better version check and refresh/reload

Browse Source
This commit is contained in:
Scott Idem
2025-04-18 13:38:47 -04:00
parent 35b4079b90
commit fb937290eb
4 changed files with 221 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/ae_stores.ts
View File

@@ -47,14 +47,14 @@ 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.
let ver = '2024-08-21_1736';
let ver_idb = '2024-10-16_1540';
let ver = '2025-04-18_1335';
let ver_idb = '2025-04-18_1100'; // Not used
// *** BEGIN *** Longer-term app data. This should be stored to local storage.
export let ae_app_local_data_struct: key_val = {
last_idb_reload: null,
ver: '2024-10-16_1540',
ver_idb: '2024-10-16_1540', // Clear if date IndexedDB version
ver: ver, // '2025-04-18_1100',
ver_idb: ver_idb, // '2025-04-18_1100',
name: 'Aether - App Hub (SvelteKit 2.x Svelte 4.x)',
theme: 'light',
theme_mode: 'light',
@@ -116,6 +116,8 @@ export let ae_app_local_data_struct: key_val = {
// affiliations: null,
primary_email: null, // The primary email of the logged-in person/user
user_id: null, // The user ID of the logged-in user
show_content__person_page_help: false,
},
// Added 2025-04-04
@@ -239,10 +241,6 @@ export let ae_app_local_data_struct: key_val = {
'testing': {},
},
'person': {
show_content__person_page_help: false,
},
test: true,
}
// console.log(`AE Stores - App Local Storage Data:`, ae_app_local_data_struct);
@@ -257,8 +255,8 @@ 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-10-16_1540',
// ver_idb: ver_idb,
ver: ver, // '2025-04-18_1100',
ver_idb: ver_idb,
log_lvl: 0,
// 'name': 'Aether App Template',

6
src/lib/element_sign_in_out.svelte
View File

@@ -276,7 +276,7 @@ async function handle_change_password() {
Hide Sign-In Options
{:else}
<User class="mx-1 inline-block text-gray-500" />
{$ae_loc?.person.full_name ?? '-- not set --'}
{$ae_loc?.person?.full_name ?? '-- not set --'}
{/if}
{:else}
@@ -308,7 +308,7 @@ async function handle_change_password() {
$ae_sess.show__sign_in_out__fields = !$ae_sess.show__sign_in_out__fields; // Toggle the visibility of the sign-in form
}}
> -->
{$ae_loc?.person.full_name ?? '-- not set --'}
{$ae_loc?.person?.full_name ?? '-- not set --'}
<!-- <span class="text-sm text-gray-500">
{$ae_loc?.user.username ?? '-- not set --'}
</span> -->
@@ -607,7 +607,7 @@ async function handle_change_password() {
<div class="flex flex-col gap-1 items-end justify-center">
<span class="text-sm text-gray-500">
{$ae_loc?.user.username ?? '-- not set --'}
{$ae_loc?.user?.username ?? '-- not set --'}
</span>
<!-- Display change password option if the user is signed in and in Edit Mode -->

250
src/routes/+layout.svelte
View File

@@ -1,8 +1,12 @@
<script lang="ts">
/** @type {import('./$types').LayoutData} */
// /** @type {import('./$types').LayoutProps} */
let log_lvl: number = 0;
// *** Import Svelte specific
// import { tick } from 'svelte';
import { goto } from '$app/navigation';
import '../app.postcss';
// *** Import other supporting libraries
@@ -71,10 +75,6 @@ if (log_lvl > 1) {
console.log(`ae_root +layout.svelte data:`, data);
}
if (!$ae_loc?.app_cfg?.show_element__menu_btn) {
$ae_loc.app_cfg.show_element__menu = false;
$ae_loc.app_cfg.show_element__menu_btn = true;
}
// let account_id = localStorage.getItem('ae_account_id');
// console.log(`account_id = `, account_id);
@@ -110,20 +110,68 @@ if (log_lvl > 1) {
console.log(`$slct = `, $slct);
}
// This should only be temporary.
if (!$ae_loc.app_cfg) {
$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 = false;
// }
// IDB caches - Check if the last reload timestamp for $ae_loc.last_idb_reload is no more than 15 minutes ago.
let default_idb_reload_time = 120 * 60 * 1000; // 15 minutes?
let trusted_idb_reload_time = 4 * 60 * 60 * 1000; // 4 hours or 120 minutes?
// 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_loc.event_id = $ae_loc.site_cfg_json.slct__event_id;
} else if ($events_slct.event_id) {
} else if ($events_slct?.event_id) {
// console.log(`Event ID already set:`, $events_slct.event_id);
$events_loc.event_id = $events_slct.event_id;
} else {
@@ -133,10 +181,19 @@ if ($ae_loc?.site_cfg_json.slct__event_id) {
}
// This is mainly for Precon CHOW
if ($ae_loc.site_cfg_json.slct__sponsorship_cfg_id) {
if ($ae_loc?.site_cfg_json?.slct__sponsorship_cfg_id) {
$slct.sponsorship_cfg_id = $ae_loc.site_cfg_json.slct__sponsorship_cfg_id;
$ae_loc.mod.sponsorships.cfg_id = $ae_loc.site_cfg_json.slct__sponsorship_cfg_id;
} else if ($ae_loc.sponsorship_cfg_id) {
if ($ae_loc?.mod?.sponsorships) {
$ae_loc.mod.sponsorships.cfg_id = $ae_loc.site_cfg_json.slct__sponsorship_cfg_id;
} else {
$ae_loc.mod = {
...$ae_loc.mod,
sponsorships: {
cfg_id: $ae_loc.site_cfg_json.slct__sponsorship_cfg_id
}
};
}
} else if ($ae_loc?.sponsorship_cfg_id) {
$slct.sponsorship_cfg_id = $ae_loc.sponsorship_cfg_id;
$ae_loc.mod.sponsorships.cfg_id = $ae_loc.sponsorship_cfg_id;
} else {
@@ -179,6 +236,89 @@ if ($ae_loc.site_access_key || $ae_loc.site_domain_access_key) {
if (browser) {
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;
// console.log('Clearing localStorage...');
// $ae_loc = null;
// $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');
// console.log('Clearing sessionStorage...');
// sessionStorage.clear();
// 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.
console.log('Going to root page...');
if (data.route.id !== '/') {
goto('/', {replaceState: true, invalidateAll: true});
}
} 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 = 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_idb_reload) {
if (log_lvl) {
console.log(`Last reload not found. Need to set!`);
@@ -190,6 +330,7 @@ if (browser) {
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');
} else if ($ae_loc.last_idb_reload && $ae_loc.trusted_access && (Date.now() - $ae_loc.last_idb_reload) > trusted_idb_reload_time) {
@@ -203,6 +344,7 @@ if (browser) {
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');
@@ -221,6 +363,7 @@ if (browser) {
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');
@@ -234,6 +377,7 @@ 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!!!');
@@ -251,29 +395,6 @@ if (browser) {
// 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;
// This does not seem to work fast enough or something?
// goto('/', {replaceState: true, invalidateAll: true});
// $ae_loc = {};
localStorage.removeItem('ae_loc');
localStorage.removeItem('events_loc');
localStorage.clear();
// sessionStorage.removeItem('ae_sess');
// sessionStorage.removeItem('events_sess');
sessionStorage.clear();
window.location.reload();
}
// save_ds_to_local(ae_acct.ds);
let ae_ds = ae_acct.ds;
@@ -421,8 +542,53 @@ $effect(() => {
<!-- regionFooter="flex justify-end space-x-2" -->
{#if
$ae_loc?.allow_access}
{#if (browser && $ae_loc && $ae_sess && ($ae_loc.ver != $ae_sess.ver))}
<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-500">New Version Available</h1>
<p class="text-lg text-center text-gray-500">A new version of the site is available. Please reload the page.</p>
<button
type="button"
onclick={() => {
// Clear the IndexedDB
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();
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();
alert('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"
title="Reload and clear the page cache"
>
<span class="fas fa-sync mx-1"></span>
Reload and Clear Cache
</button>
</div>
{:else if $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?.()}
@@ -434,7 +600,8 @@ $effect(() => {
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-500">Access Denied</h1>
<p class="text-lg text-center text-gray-500">You do not have access to this site. You may need a passcode and or URL site key.</p>
<p class="text-lg text-center text-gray-500">You do not have access to this site. You may need a <strong>passcode</strong>, <strong>sign in link</strong>, and or <strong>URL site key</strong>.</p>
<!-- xx {JSON.stringify(data.route)} xx -->
<button
type="button"
onclick={() => {
@@ -444,6 +611,7 @@ $effect(() => {
indexedDB.deleteDatabase('ae_events_db');
indexedDB.deleteDatabase('ae_journals_db');
indexedDB.deleteDatabase('ae_posts_db');
window.location.reload();
}}
ondblclick={() => {
@@ -504,10 +672,10 @@ max-w-max -->
<span class="hidden">
<User class="mx-1 inline-block text-gray-500" />
{$ae_loc?.person.full_name ?? '-- not set --'}<br />
{$ae_loc?.person?.full_name ?? '-- not set --'}<br />
<!-- <ShieldUser /> -->
<ShieldUser class="mx-1 inline-block text-gray-500" />
{$ae_loc?.user.username ?? '-- not set --'}<br />
{$ae_loc?.user?.username ?? '-- not set --'}<br />
</span>
{#if $ae_loc.edit_mode}

2
src/routes/+layout.ts
View File

@@ -111,7 +111,7 @@ export async function load({ fetch, params, parent, route, url }) { // params, r
ae_root_layout_ts: true,
params: params,
route: route,
url: url,
// Not really used yet