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

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