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

More work on making the loading process better

Browse Source
This commit is contained in:
Scott Idem
2025-05-01 18:59:37 -04:00
parent 9687fe0c90
commit c6d21fadc2
4 changed files with 151 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/lib/element_access_type.svelte
View File

@@ -425,6 +425,7 @@ function handle_clear_access() {
<span <span
class="*:hover:inline" class="*:hover:inline"
title={`Current access type/level: ${$ae_loc.access_type}`}
> >
{#if $ae_loc.access_type == 'super'} {#if $ae_loc.access_type == 'super'}
<span class="fas fa-hat-wizard m-1"></span> <span class="fas fa-hat-wizard m-1"></span>
@@ -460,7 +461,7 @@ function handle_clear_access() {
show_passcode_input = !show_passcode_input; show_passcode_input = !show_passcode_input;
}} }}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all" class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all"
title="Access mode is currently enabled/unlocked. Click to exit and lock." title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
> >
<!-- <span class="fas fa-lock mx-1"></span> --> <!-- <span class="fas fa-lock mx-1"></span> -->
<!-- <ShieldMinus /> --> <!-- <ShieldMinus /> -->
@@ -476,7 +477,7 @@ function handle_clear_access() {
// show_passcode_input = true; // show_passcode_input = true;
}} }}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all" class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all"
title="Access mode is currently enabled/unlocked. Click to exit and lock." title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
> >
<!-- <span class="fas fa-lock mx-1"></span> --> <!-- <span class="fas fa-lock mx-1"></span> -->
<ShieldMinus class="inline-block" /> <ShieldMinus class="inline-block" />
@@ -488,33 +489,6 @@ function handle_clear_access() {
{#if (show_passcode_input)} {#if (show_passcode_input)}
<span class="flex flex-row gap-1 items-center justify-center"> <span class="flex flex-row gap-1 items-center justify-center">
<button
type="button"
onclick={async () => {
show_passcode_input = !show_passcode_input;
if (show_passcode_input) {
// console.log('Button click: Setting focus on the passcode input field');
// document.getElementById('access_passcode_input')?.focus();
// element.focus({preventScroll:false});
} else {
entered_passcode = ''; // Clear the entered passcode when showing the input
}
}}
class="btn btn-sm variant-glass-success hover:variant-filled-warning access_type_unlock_btn transition-all hidden"
title="Anonymous public access is currently set. Access mode is disabled/locked."
>
<span class="fas fa-lock mx-1 lock_icon"></span>
<span class="lock_icon">Locked</span>
<span class="fas fa-unlock mx-1 unlock_icon hidden"></span>
{#if (show_passcode_input)}
<span class="unlock_text">Cancel</span>
{:else}
<span class="unlock_text">Access?</span>
{/if}
<!-- <span class="unlock_text">Cancel?</span> -->
</button>
<ShieldEllipsis class="inline-block" /> <ShieldEllipsis class="inline-block" />
<span class="unlock_text">Passcode?</span> <span class="unlock_text">Passcode?</span>

102
src/routes/+layout.svelte
View File

@@ -26,12 +26,14 @@ const modalRegistry: Record<string, ModalComponent> = {
// ... // ...
}; };
import { import {
ArrowBigRight,
CircleX, CircleX,
Eye, EyeOff, Eye, EyeOff,
Key, Key,
LogIn, LogOut, LockKeyhole, LogIn, LogOut, LockKeyhole,
Mail, MailCheck, Mail, MailCheck,
Menu, Menu,
RefreshCw, RefreshCcwDot,
ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser, ShieldEllipsis, ShieldMinus, ShieldPlus, ShieldUser,
User, UserCheck User, UserCheck
} from '@lucide/svelte'; } from '@lucide/svelte';
@@ -694,9 +696,10 @@ $effect(() => {
<!-- regionFooter="flex justify-end space-x-2" --> <!-- regionFooter="flex justify-end space-x-2" -->
{#if (browser && flag_new_ver)} {#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 max-w-lg mx-auto space-y-6 border border-red-500 rounded-lg p-4 bg-green-50 dark:bg-green-900 m-8">
<h1 class="text-4xl text-center font-bold text-red-600 dark:text-red-400">New Version Available</h1> <h1 class="text-4xl text-center font-bold text-green-600 dark:text-green-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 use the Clear Cache and Reload button below to update.</p> <p class="text-lg text-center text-gray-800 dark:text-gray-200">A new version of the site is available. Please use the Clear Cache and Reload button below to update.</p>
<button <button
type="button" type="button"
onclick={() => { onclick={() => {
@@ -712,11 +715,14 @@ $effect(() => {
window.location.reload(); 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 text-wrap" class="btn btn-lg m-1 variant-ghost-error hover:variant-filled-success text-error-1000 hover:text-error-800 transition-all text-wrap"
title="Reload and clear the page cache to update" title="Reload and clear the page cache to update"
> >
<span class="fas fa-sync mx-1"></span> <!-- <span class="fas fa-sync mx-1"></span> -->
<RefreshCcwDot class="mx-1" />
<span>
Clear Cache and<br/> Reload to Update Clear Cache and<br/> Reload to Update
</span>
</button> </button>
<!-- This is mainly for IDAA using iframes in the Novi site. --> <!-- This is mainly for IDAA using iframes in the Novi site. -->
@@ -728,21 +734,28 @@ $effect(() => {
<p>This sometimes happens with new versions of the app or when in an iframe.</p> <p>This sometimes happens with new versions of the app or when in an iframe.</p>
</div> </div>
<div class="text-sm text-center text-gray-500 dark:text-gray-200">
<span class="">Æther:</span>
<span class=""> {$ae_loc?.ver} <ArrowBigRight class="inline-block" /> {$ae_sess?.ver}</span>
</div>
<button <button
type="button" type="button"
onclick={() => { onclick={() => {
window.location.reload(); window.location.reload();
}} }}
class="btn btn-sm" class="btn btn-sm m-1 variant-ghost-surface hover:variant-ghost-warning hover:variant-outline-warning text-warning-800 hover:text-warning-900 transition-all"
> >
<span class="fas fa-sync mx-1"></span> <!-- <span class="fas fa-sync mx-1"></span> -->
<RefreshCw class="mx-1" />
Reload Reload
</button> </button>
</div> </div>
{:else if browser && $ae_loc?.cache_expired} {: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"> <div class="flex flex-col items-center justify-center max-w-lg mx-auto space-y-6 border border-red-500 rounded-lg p-4 bg-orange-50 dark:bg-orange-900 m-8">
<h1 class="text-4xl text-center font-bold text-red-600 dark:text-red-400">Expired Cache</h1> <h1 class="text-4xl text-center font-bold text-red-500 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> <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 <button
type="button" type="button"
onclick={() => { onclick={() => {
@@ -756,11 +769,14 @@ $effect(() => {
window.location.reload(); 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 text-wrap" class="btn btn-lg m-1 variant-ghost-warning hover:variant-filled-success text-error-1000 hover:text-error-800 transition-all text-wrap"
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> -->
<RefreshCcwDot class="mx-1" />
<span>
Clear Cache and Reload Clear Cache and Reload
</span>
</button> </button>
<!-- This is mainly for IDAA using iframes in the Novi site. --> <!-- This is mainly for IDAA using iframes in the Novi site. -->
@@ -772,14 +788,35 @@ $effect(() => {
<p>This sometimes happens with new versions of the app or when in an iframe.</p> <p>This sometimes happens with new versions of the app or when in an iframe.</p>
</div> </div>
<div>
<div class="text-sm text-center text-gray-500 dark:text-gray-200">
<span class="">Expired:</span>
<span class=""> {Math.floor((Date.now() - $ae_loc.last_cache_refresh) / 60000)} minutes ago</span>
</div>
<div class="text-sm text-center text-gray-500 dark:text-gray-200">
<span class="">Last Refresh:</span>
<span class=""> {new Date($ae_loc.last_cache_refresh).toLocaleString()}</span>
</div>
<div class="text-sm text-center text-gray-500 dark:text-gray-200">
<span class="">Access Level:</span>
<span class=""> {$ae_loc.access_level ?? '-- not set --'}</span>
</div>
<div class="text-sm text-center text-gray-500 dark:text-gray-200">
<span class="">Username:</span>
<span class=""> {$ae_loc.user?.username ?? '-- not set --'}</span>
</div>
</div>
<button <button
type="button" type="button"
onclick={() => { onclick={() => {
window.location.reload(); window.location.reload();
}} }}
class="btn btn-sm" class="btn btn-sm m-1 variant-ghost-surface hover:variant-ghost-warning hover:variant-outline-warning text-warning-800 hover:text-warning-900 transition-all"
title="Reload page to clear some caches and check for updates"
> >
<span class="fas fa-sync mx-1"></span> <!-- <span class="fas fa-sync mx-1"></span> -->
<RefreshCw class="mx-1" />
Reload Reload
</button> </button>
</div> </div>
@@ -789,11 +826,26 @@ $effect(() => {
<!-- !$ae_loc?.allow_access --> <!-- !$ae_loc?.allow_access -->
<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 max-w-lg mx-auto space-y-6 border border-red-500 rounded-lg p-4 bg-red-50 dark:bg-red-900 m-8"
> >
<h1 class="text-4xl text-center font-bold text-red-600 dark:text-red-400">Access Denied</h1> <h1 class="text-4xl text-center font-bold text-red-500 dark:text-red-400">Access Denied</h1>
<p class="text-lg text-center text-gray-800 dark:text-gray-200">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> <p class="text-lg text-center text-gray-800 dark:text-gray-200">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 --> <!-- xx {JSON.stringify(data.route)} xx -->
<div>
<!-- access level/type -->
<div class="text-sm text-center text-gray-500 dark:text-gray-200">
<span class="">Access Level:</span>
<span class=""> {$ae_loc.access_level ?? '-- not set --'}</span>
</div>
<!-- username and email -->
<div class="text-sm text-center text-gray-500 dark:text-gray-200">
<span class="">Username:</span>
<span class=""> {$ae_loc.user?.username ?? '-- not set --'}</span>
</div>
</div>
<button <button
type="button" type="button"
onclick={() => { onclick={() => {
@@ -809,11 +861,14 @@ $effect(() => {
window.location.reload(); 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 text-wrap" class="btn btn-sm m-1 variant-ghost-secondary hover:variant-ghost-warning hover:variant-outline-warning text-error-700 hover:text-error-900 transition-all text-wrap"
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> -->
<RefreshCcwDot class="mx-1" />
<span>
Clear Cache and Reload Clear Cache and Reload
</span>
</button> </button>
<!-- This is mainly for IDAA using iframes in the Novi site. --> <!-- This is mainly for IDAA using iframes in the Novi site. -->
@@ -830,10 +885,14 @@ $effect(() => {
onclick={() => { onclick={() => {
window.location.reload(); window.location.reload();
}} }}
class="btn btn-sm" class="btn btn-sm m-1 variant-ghost-secondary hover:variant-ghost-warning hover:variant-outline-warning text-warning-800 hover:text-warning-900 transition-all"
title="Reload page to clear some caches and check for updates"
> >
<span class="fas fa-sync mx-1"></span> <!-- <span class="fas fa-sync mx-1"></span> -->
<RefreshCw class="mx-1" />
<span>
Reload Reload
</span>
</button> </button>
</div> </div>
@@ -934,6 +993,7 @@ max-w-max -->
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'} {#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
<span <span
class="*:hover:inline" class="*:hover:inline"
title={`Current access type/level: ${$ae_loc.access_type}`}
> >
<!-- <span class="fas fa-unlock mx-1"></span> --> <!-- <span class="fas fa-unlock mx-1"></span> -->
<ShieldPlus class="inline-block" /> <ShieldPlus class="inline-block" />
@@ -983,7 +1043,7 @@ max-w-max -->
} }
}} }}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline" class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all *:hover:inline"
title="Access mode is currently enabled/unlocked. Click to exit and lock." title={`Current user access level: "${$ae_loc.user_access_type}". Click use passcode for a different access level.`}
> >
<!-- <span class="fas fa-lock mx-1"></span> --> <!-- <span class="fas fa-lock mx-1"></span> -->
<!-- <ShieldMinus /> --> <!-- <ShieldMinus /> -->
@@ -1014,7 +1074,7 @@ max-w-max -->
} }
}} }}
class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden" class="btn btn-sm variant-outline-surface hover:variant-ghost-warning transition-all hidden"
title="Access mode is currently enabled/unlocked. Click to exit and lock." title={`Current access level: "${$ae_loc.access_type}". Click to clear the temporary access level.`}
> >
<!-- <span class="fas fa-lock mx-1"></span> Lock? --> <!-- <span class="fas fa-lock mx-1"></span> Lock? -->
<ShieldMinus class="inline-block" /> <ShieldMinus class="inline-block" />
@@ -1045,7 +1105,7 @@ max-w-max -->
btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all btn btn-sm variant-outline-surface hover:variant-ghost-success transition-all
*:hover:inline *:hover:inline
" "
title="Anonymous public access is currently set. Access mode is disabled/locked." title="Anonymous public access is currently set. You must Sign In or use a passcode to change your access level."
> >
<!-- <span class="fas fa-lock mx-1 lock_icon"></span> --> <!-- <span class="fas fa-lock mx-1 lock_icon"></span> -->
<!-- <span class="">Unlock?</span> --> <!-- <span class="">Unlock?</span> -->

27
src/routes/+page.svelte
View File

@@ -5,6 +5,14 @@ export let data: any;
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import {
Brain,
House,
Library,
RefreshCw, RefreshCcwDot,
Satellite
} from '@lucide/svelte';
// import { PUBLIC_TESTING } from '$env/static/public'; // import { PUBLIC_TESTING } from '$env/static/public';
// console.log(`AE Config - +page.svelte PUBLIC_TESTING:`, PUBLIC_TESTING); // console.log(`AE Config - +page.svelte PUBLIC_TESTING:`, PUBLIC_TESTING);
@@ -67,23 +75,34 @@ onMount(() => {
window.location.reload(true); window.location.reload(true);
}} }}
class="btn btn-sm m-1 variant-glass-surface hover:variant-outline-warning text-error-300 hover:text-error-800 transition-all" class="btn btn-sm m-1 variant-glass-surface hover:variant-outline-warning text-error-300 hover:text-error-800 transition-all"
title="Reload and clear the page cache" title="Reload page to clear some caches and check for updates"
> >
<span class="fas fa-sync mx-1"></span> <!-- <span class="fas fa-sync mx-1"></span> -->
<RefreshCw class="mx-1" />
Reload Reload
</button> </button>
<button <button
type="button" type="button"
on:click={() => { on:click={() => {
// Clear Indexed DB
indexedDB.deleteDatabase('ae_archives_db'); // Archives module
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db'); // Events module
indexedDB.deleteDatabase('ae_journals_db'); // Journals module
indexedDB.deleteDatabase('ae_posts_db'); // Posts module
indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
localStorage.clear(); localStorage.clear();
sessionStorage.clear(); sessionStorage.clear();
alert('Local and Session Storage cleared. The page should now refresh on its own.'); alert('Local and Session Storage cleared. The page should now refresh on its own.');
window.location.reload(true); window.location.reload(true);
}} }}
class="btn btn-sm m-1 p-1 variant-glass-surface hover:variant-outline-warning text-error-300 hover:text-error-800 transition-all" class="btn btn-sm m-1 p-1 variant-glass-surface hover:variant-outline-warning text-error-300 hover:text-error-800 transition-all"
title="Reload and clear the page cache" title="Clear IDB, localStorage, and sessionStorage and then reload to clear the page cache"
> >
<span class="fas fa-sync mx-1"></span> <!-- <span class="fas fa-sync mx-1"></span> -->
<RefreshCcwDot class="mx-1" />
Clear Storage and Reload Clear Storage and Reload
</button> </button>
</div> </div>

75
src/routes/journals/+layout.svelte
View File

@@ -112,45 +112,58 @@ if (browser) {
<button <button
onclick={() => { onclick={() => {
// Confirm before clearing if ($ae_loc.edit_mode) {
if (!confirm("Are you sure you want to clear IndexedDB databases and some caches? This will also reload the page.")) { // Confirm before clearing
return; if (!confirm("Are you sure you want to clear IndexedDB databases, localStorage, and sessionStorage? This will also reload the page.")) {
return;
}
console.log("Clearing IndexedDB, localStorage, sessionStorage, and reloading the page...");
// Clear Indexed DB
indexedDB.deleteDatabase('ae_archives_db'); // Archives module
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db'); // Events module
indexedDB.deleteDatabase('ae_journals_db'); // Journals module
indexedDB.deleteDatabase('ae_posts_db'); // Posts module
indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
// Clear localStorage and sessionStorage
// Clearing the localStorage will force it to be re-created.
localStorage.clear();
sessionStorage.clear();
goto('/', {invalidateAll: true});
// window.location.reload(true);
} else {
// Confirm before clearing
if (!confirm("Are you sure you want to clear IndexedDB databases and some caches? This will also reload the page.")) {
return;
}
console.log("Clearing IndexedDB, localStorage, sessionStorage, and reloading the page...");
// Clear Indexed DB
indexedDB.deleteDatabase('ae_archives_db'); // Archives module
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db'); // Events module
indexedDB.deleteDatabase('ae_journals_db'); // Journals module
indexedDB.deleteDatabase('ae_posts_db'); // Posts module
indexedDB.deleteDatabase('ae_sponsorships_db'); // Sponsorships module
window.location.reload(true);
} }
// Clear Indexed DB
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_journals_db');
// This does not seem to work fast enough or something? // This does not seem to work fast enough or something?
goto('/', {invalidateAll: true}); // goto('/', {invalidateAll: true});
// The page does usually seem to reload correctly? // The page does usually seem to reload correctly?
window.location.reload(true); // true only works with Firefox // 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.'); // alert('Local and Session Storage cleared and Indexed DBs deleted. You will probably want to refresh the page.');
}} }}
ondblclick={() => {
// Confirm before clearing
if (!confirm("Are you sure you want to clear all *local* app data and settings? This will also reload the page.")) {
return;
}
console.log("Clearing IndexedDB, localStorage, sessionStorage, and reloading the page...");
// Clear Indexed DB
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_journals_db');
// Clear localStorage and sessionStorage
// Clearing the localStorage will force it to be re-created.
localStorage.clear();
sessionStorage.clear();
goto('/', {invalidateAll: true});
window.location.reload(true);
}}
class="btn btn-sm variant-ghost-surface hover:variant-filled-warning" class="btn btn-sm variant-ghost-surface hover:variant-filled-warning"
title="Clear App Data &amp; Settings - Reload: Clear the browser storage for this site" title="Clear App Data &amp; Settings: Clear IndexedDB and reload. If in edit mode localStorage and sessionStorage will also be cleared."
> >
<!-- <span class="fas fa-eraser mx-1"></span> --> <!-- <span class="fas fa-eraser mx-1"></span> -->
<!-- <span class="fas fa-sync mx-1"></span> --> <!-- <span class="fas fa-sync mx-1"></span> -->