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

Lots of work and testing on the debug and page load process.

Browse Source
This commit is contained in:
Scott Idem
2025-04-30 15:16:02 -04:00
parent 58bf335502
commit a76cc93acf
2 changed files with 156 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/ae_stores.ts
View File

@@ -47,7 +47,7 @@ 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 = '2025-04-29_1545'; // KEEP: 2025-04-18_1335
let ver = '2025-04-30_1320'; // KEEP: 2025-04-18_1335 and 2025-04-29_1545
let ver_idb = '2025-04-18_1100'; // Not used
// *** BEGIN *** Longer-term app data. This should be stored to local storage.

212
src/routes/+layout.svelte
View File

@@ -675,8 +675,8 @@ $effect(() => {
{#if (browser && flag_new_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-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>
<h1 class="text-4xl text-center 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 use the Clear Cache and Reload button below to update.</p>
<button
type="button"
onclick={() => {
@@ -686,30 +686,40 @@ $effect(() => {
// Clear localStorage and sessionStorage
clear_local();
confirm('IDB, Local, and Session Storage cleared. The page should now refresh on its own.');
// alert('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"
class="btn btn-lg m-1 variant-filled-warning hover:variant-filled-success text-error-1000 hover:text-error-800 transition-all text-wrap"
title="Reload and clear the page cache to update"
>
<span class="fas fa-sync mx-1"></span>
Reload and Clear Cache
Clear Cache and<br/> Reload to Update
</button>
<!-- This is mainly for IDAA using iframes in the Novi site. -->
<div
class="text-center text-sm text-gray-500"
class:hidden={!$ae_loc.iframe}
>
<p>If you have tried the "Clear Cache and Reload" button, you may need to manually reload the page using your browser's reload button or by pressing <kbd>Ctrl</kbd> + <kbd>R</kbd> or <kbd>Cmd</kbd> + <kbd>R</kbd>.</p>
<p>This sometimes happens with new versions of the app or when in an iframe.</p>
</div>
<button
type="button"
onclick={() => {
window.location.reload();
}}
class="btn btn-sm"
>
<span class="fas fa-sync mx-1"></span>
Reload Page
Reload
</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>
<h1 class="text-4xl text-center 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"
@@ -720,25 +730,35 @@ $effect(() => {
// Clear localStorage and sessionStorage
clear_local();
confirm('IDB, Local, and Session Storage cleared. The page should now refresh on its own.');
alert('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"
class="btn btn-lg m-1 variant-filled-warning hover:variant-filled-success text-error-1000 hover:text-error-800 transition-all text-wrap"
title="Reload and clear the page cache"
>
<span class="fas fa-sync mx-1"></span>
Reload and Clear Cache
Clear Cache and Reload
</button>
<!-- This is mainly for IDAA using iframes in the Novi site. -->
<div
class="text-center text-sm text-gray-500"
class:hidden={!$ae_loc.iframe}
>
<p>If you have tried the "Clear Cache and Reload" button, you may need to manually reload the page using your browser's reload button or by pressing <kbd>Ctrl</kbd> + <kbd>R</kbd> or <kbd>Cmd</kbd> + <kbd>R</kbd>.</p>
<p>This sometimes happens with new versions of the app or when in an iframe.</p>
</div>
<button
type="button"
onclick={() => {
window.location.reload();
}}
class="btn btn-sm"
>
<span class="fas fa-sync mx-1"></span>
Reload Page
Reload
</button>
</div>
@@ -749,7 +769,7 @@ $effect(() => {
data-sveltekit-preload-data="false"
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">Access Denied</h1>
<h1 class="text-4xl text-center font-bold text-red-600 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>
<!-- xx {JSON.stringify(data.route)} xx -->
<button
@@ -763,25 +783,15 @@ $effect(() => {
clear_local();
// clear_sess();
confirm('IDB, Local, and Session Storage cleared. The page should now refresh on its own.');
alert('IDB, Local, and Session Storage cleared. The page should now refresh on its own.');
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 text-wrap"
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
Clear Cache and Reload
</button>
<!-- This is mainly for IDAA using iframes in the Novi site. -->
@@ -789,9 +799,20 @@ $effect(() => {
class="text-center text-sm text-gray-500"
class:hidden={!$ae_loc.iframe}
>
<p>If you have tried the "Reload and Clear Cache" button, you may need to manually reload the page using your browser's reload button or by pressing <kbd>Ctrl</kbd> + <kbd>R</kbd> or <kbd>Cmd</kbd> + <kbd>R</kbd>.</p>
<p>If you have tried the "Clear Cache and Reload" button, you may need to manually reload the page using your browser's reload button or by pressing <kbd>Ctrl</kbd> + <kbd>R</kbd> or <kbd>Cmd</kbd> + <kbd>R</kbd>.</p>
<p>This sometimes happens with new versions of the app or when in an iframe.</p>
</div>
<button
type="button"
onclick={() => {
window.location.reload();
}}
class="btn btn-sm"
>
<span class="fas fa-sync mx-1"></span>
Reload
</button>
</div>
{:else if (browser && $ae_loc?.allow_access)}
@@ -1094,35 +1115,112 @@ max-w-max -->
{/if}
<!-- opacity-25
hover:opacity-100 -->
<!-- text-slate-400 hover:text-slate-800 -->
<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:ae_debug={$ae_loc?.debug}
>
<!-- {#if $ae_loc.app_cfg?.show_element__sign_in_out}
<Element_sign_in_out
data={data}
hidden={$ae_loc.iframe || !$ae_loc.app_cfg?.show_element__sign_in_out}
/>
{/if} -->
class="
absolute bottom-0 left-0
flex
text-sm sm:text-sm md:text-md lg:text-md xl:text-md 2xl:text-lg
<!-- <button
dark:text-slate-400 dark:hover:text-slate-200
bg-red-100/60 dark:bg-red-800/50
hover:bg-red-200 hover:dark:bg-red-900
mx-1 my-2
max-h-min
max-w-lg
transition-all
transition-delay-1000
transition-duration-1000
ease-in
z-50
border-2
border-red-300 dark:border-red-700
hover:border-red-500 hover:dark:border-red-500
"
class:top-0={$ae_loc?.debug}
class:w-full={$ae_loc?.debug}
class:hidden={!$ae_loc?.trusted_access}
class:border-transparent={!$ae_loc?.debug}
class:hover:border-transparent={!$ae_loc?.debug}
class:hover:bg-transparent={!$ae_loc?.debug}
>
<div
class:hidden={!$ae_loc?.debug}
class:border-red-200={$ae_loc?.debug}
class:dark:border-red-800={$ae_loc?.debug}
class="
transition-all
transition-delay-1000
transition-duration-1000
ease-in
overflow-y-auto
px-1 py-4
opacity-50
hover:opacity-100
relative
"
>
<!-- flex flex-col items-center justify-center max-h-full outline -->
<div>
<span class="fas fa-bug mx-1"></span>
<span>Debug</span>
</div>
<pre>
{JSON.stringify($ae_loc, null, 2)}
</pre>
</div>
<button
type="button"
onclick={() => {
console.log('Debug ae_loc:', $ae_loc);
$ae_loc.debug = !$ae_loc?.debug;
}}
class="
btn btn-sm variant-ghost-surface hover:variant-ghost-warning
transition-all *:hover:inline-block
absolute top-0 right-0
"
title="Turn debug content and styles off and on"
>
<span class="fas fa-toggle-on mx-1"></span>
Debug
<span class="hidden">
Mode On
</span>
</button>
<button
type="button"
onclick={() => {
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 transition-all"
class="
btn btn-icon
variant-glass-surface
hover:variant-ghost-warning
transition-all
fixed bottom-2 left-2
text-gray-400 hover:text-gray-800
"
title="Turn debug content and styles off and on"
>
<!-- absolute bottom-2 left-2 -->
<!-- fixed bottom-0 left-0 -->
&pi;
</button> -->
<!-- {#if $ae_loc.app_cfg?.show_element__access_type}
<Element_access_type
hidden={$ae_loc.iframe && !$ae_loc.trusted_access}
/>
{/if} -->
</button>
</div>
@@ -1130,29 +1228,29 @@ max-w-max -->
/* BEGIN: AE's Svelte Quick Debug component */
#AE-Quick-Debug {
/* position: absolute; */
position: fixed;
/* position: fixed; */
/* position: relative; */
/* position: static; */
/* position: sticky; */
/* top: 1em; */
bottom: 2rem;
left: 1rem;
/* bottom: 2rem; */
/* left: 1rem; */
padding: .0rem;
/* padding: .0rem; */
/* lightyellow */
/* background-color: hsla(60,100%,90%,.30); */
/* background-color: rgba(var(--color-surface-500) / .5); */
border: none;
/* border: none;
border-top: solid thin hsla(0,0%,0%,.25);
border-left: solid thin hsla(0,0%,0%,.25);
border-bottom: solid thin hsla(0,0%,0%,.25);
border-bottom: solid thin hsla(0,0%,0%,.25); */
/* border-top-left-radius: .5em; */
/* border-bottom-left-radius: .5em; */
opacity: .15;
/* opacity: .15; */
/* opacity: 1; */
font-size: .75rem;
@@ -1170,16 +1268,16 @@ max-w-max -->
/* lightyellow */
/* background-color: hsla(60,100%,90%,.95); */
/* background-color: rgba(var(--color-surface-500) / 1); */
/*
border-top: solid thin hsla(0,0%,0%,.95);
border-left: solid thin hsla(0,0%,0%,.95);
border-bottom: solid thin hsla(0,0%,0%,.95);
border-bottom: solid thin hsla(0,0%,0%,.95); */
opacity: 1;
/* opacity: 1; */
padding: .5rem;
/* padding: .5rem; */
font-size: 1.75rem;
font-size: 1.5rem;
/* Need to zoom 3.5 when hovering */
/* transform: scale(3.5); */