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

Recovering from something that broke the styling. It is not 100% right, but much better.

Browse Source
This commit is contained in:
Scott Idem
2024-08-23 14:26:17 -04:00
parent fed37a77b8
commit 4dbdd16bd0
8 changed files with 176 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
src/routes/+layout.svelte
View File

@@ -10,12 +10,12 @@ import '../app.postcss';
import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
// Initialize the stores for Drawer, Modal, and Toast so they work throughout the app.
initializeStores();
import { Drawer, Modal, getDrawerStore } from '@skeletonlabs/skeleton';
import { Modal } from '@skeletonlabs/skeleton';
import type {
// DrawerSettings, DrawerComponent, DrawerStore,
ModalSettings, ModalComponent, ModalStore
} from '@skeletonlabs/skeleton';
const drawerStore = getDrawerStore();
// const drawerStore = getDrawerStore();
// import ModalComponentEditSponsorshipObj from './sponsorships/10_edit_modal__sponsorship_obj.svelte';
@@ -33,6 +33,7 @@ import 'highlight.js/styles/github-dark.css';
// import type { Writable } from 'svelte/store';
// import { get } from 'svelte/store';
import { browser } from '$app/environment';
// import { goto } from '$app/navigation';
// import { page } from "$app/stores";
import { localStorageStore, storeHighlightJs } from '@skeletonlabs/skeleton';
import xml from 'highlight.js/lib/languages/xml'; // for HTML
@@ -52,7 +53,7 @@ import { storePopup } from '@skeletonlabs/skeleton';
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
import { api } from '$lib/api';
// import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import { events_loc, events_slct } from '$lib/ae_events_stores';
import type { key_val } from '$lib/ae_stores';
@@ -92,7 +93,7 @@ $slct = {
}
// console.log(`$slct = `, $slct);
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) {
@@ -121,6 +122,54 @@ if (!$ae_loc.user_email) {
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!!!');
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_core_db');
indexedDB.deleteDatabase('ae_events_db');
$ae_loc.ver_idb = $ae_sess.ver_idb;
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;
// $ae_loc = {};
localStorage.removeItem('ae_loc');
localStorage.removeItem('events_loc');
// localStorage.clear();
// sessionStorage.removeItem('ae_sess');
// sessionStorage.removeItem('events_sess');
// sessionStorage.clear();
// This does not seem to work fast enough or something?
// goto('/', {replaceState: true, invalidateAll: true});
// localStorage.removeItem('ae_loc');
// localStorage.removeItem('events_loc');
localStorage.clear();
sessionStorage.clear();
window.location.reload();
// localStorage.removeItem('ae_loc');
// localStorage.removeItem('events_loc');
// localStorage.clear();
}
// save_ds_to_local(ae_acct.ds);
let ae_ds = ae_acct.ds;
console.log(`ae_ds__ data:`, ae_ds)
@@ -204,16 +253,16 @@ onMount(() => {
// TESTING TESTING TESTING
// WARNING: This needs to be tied to an object type and ID. This is a temporary solution.
$ae_sess.download = {
'endpoint': '/event/file/abc123/download',
'filename': 'example.txt',
'size_total': 0,
'size_loaded': 0,
'percent_completed': 0,
};
// $ae_sess.download = {
// 'endpoint': '/event/file/abc123/download',
// 'filename': 'example.txt',
// 'size_total': 0,
// 'size_loaded': 0,
// 'percent_completed': 0,
// };
// This is how the download and upload progress is tracked.
window.addEventListener('message', function(event) {
if (log_lvl) {
console.log('Message received in root +layout.svelte:');
@@ -221,25 +270,21 @@ onMount(() => {
}
if (event.data.type == 'api_download_blob') {
console.log('Download blob (file) message received:', event.data);
// Get the event_file_id from the event.data.endpoint value.
// Example: /event/file/abc123/download
// let endpoint = event.data.endpoint;
// let event_file_id = endpoint.split('/')[3];
if (log_lvl) {
console.log('Download blob (file) message received:', event.data);
}
let task_id = event.data.task_id;
$ae_sess.download[event.data.endpoint] = {
'status': event.data.status,
'task_id': task_id,
'endpoint': event.data.endpoint,
'filename': event.data.filename,
'size_total': event.data.size_total,
'size_loaded': event.data.size_loaded,
'percent_completed': event.data.percent_completed,
};
// $ae_sess.download[event.data.endpoint] = {
// 'status': event.data.status,
// 'task_id': task_id,
// 'endpoint': event.data.endpoint,
// 'filename': event.data.filename,
// 'size_total': event.data.size_total,
// 'size_loaded': event.data.size_loaded,
// 'percent_completed': event.data.percent_completed,
// };
$ae_sess.api_download_kv[task_id] =
{
@@ -252,7 +297,9 @@ onMount(() => {
'percent_completed': event.data.percent_completed,
};
} else if (event.data.type == 'api_post_json_form') {
console.log('Post JSON form message received:', event.data);
if (log_lvl) {
console.log('Post JSON form message received:', event.data);
}
let task_id = event.data.task_id;
@@ -291,22 +338,6 @@ onMount(() => {
regionFooter='modal-footer flex justify-between space-x-2'
/>
<!-- <Drawer>
{#if $drawerStore.id === 'example-1'}
(show 'example-1' contents)
{:else if $drawerStore.id === 'example-2'}
(show 'example-2' contents)
{:else if $drawerStore.id === 'sponsorships__edit'}
(show 'sponsorships__edit__sponsorship_obj' contents)
<section class="sponsorships_editing">
</section>
{:else}
(fallback contents)
{/if}
</Drawer> -->
<!-- App Shell -->
<AppShell
regionPage={($ae_loc.iframe ? 'iframe' : '')}
@@ -400,8 +431,8 @@ onMount(() => {
<button
on:click={() => {
console.log('Debug:', $ae_loc);
$ae_loc.debug = !$ae_loc.debug;
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"
@@ -416,15 +447,15 @@ onMount(() => {
</AppShell>
{#if $ae_loc.hub.show_element__access_type}
{#if $ae_loc.hub?.show_element__access_type}
<Element_access_type />
{/if}
<span
class:hidden={!$ae_loc.hub.show_element__cfg}
class:hidden={!$ae_loc?.hub?.show_element__cfg}
>
<!-- {#if $ae_loc.hub.show_element__cfg} -->
<!-- {#if $ae_loc?.hub?.show_element__cfg} -->
<Element_app_cfg set_theme_mode={true} set_theme_name={true} />
<!-- {/if} -->
</span>

4
src/routes/+layout.ts
View File

@@ -20,7 +20,7 @@ const ae_no_account_id = PUBLIC_AE_NO_ACCOUNT_ID;
const ae_no_account_id_token = PUBLIC_AE_NO_ACCOUNT_ID_TOKEN;
let ae_api_init: key_val = {
'ver': '2024-03-27_11',
'ver': '2024-08-11_11',
'base_url': api_base_url,
'base_url_bak': api_base_url_bak,
'api_secret_key': api_secret_key, // 'YOUR_API_SECRET_KEY',
@@ -171,7 +171,7 @@ export async function load({ fetch, params, parent, route, url }) { // params, r
// return false;
// return;
error(500, {
message: 'Not found'
message: 'Account ID not found'
});
}
// console.log(ae_loc_init);

109
src/routes/events_pres_mgmt/+layout.svelte
View File

@@ -5,16 +5,16 @@ export let data: any;
// Imports
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import { onMount } from 'svelte';
import type { Writable } from 'svelte/store';
import { localStorageStore } from '@skeletonlabs/skeleton';
// import { onMount } from 'svelte';
// import type { Writable } from 'svelte/store';
// import { localStorageStore } from '@skeletonlabs/skeleton';
import type { key_val } from '$lib/ae_stores';
// import { ae_util } from '$lib/ae_utils';
import { api } from '$lib/api';
// import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct } from '$lib/ae_stores';
import { events_loc, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';
import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
// import { events_func } from '$lib/ae_events_functions';
// import Element_data_store from '$lib/element_data_store.svelte';
@@ -43,12 +43,41 @@ $events_slct.event_obj_li = ae_acct.slct.event_obj_li;
let ae_promises: key_val = {};
onMount(() => {
if (browser) {
console.log('Events - Presentation Management: +layout.svelte');
console.log($events_slct.event_obj_li);
});
// if ($ae_loc.ver != $ae_sess.ver || $ae_loc.ver_idb != $ae_sess.ver_idb || $events_loc.ver != $events_sess.ver|| $events_loc.ver_idb != $events_sess.ver_idb) {
// console.log('New version available!!!');
// console.log(`$ae_loc.ver: ${$ae_loc.ver} != $ae_sess.ver: ${$ae_sess.ver}`);
// console.log(`$ae_loc.ver_idb: ${$ae_loc.ver_idb} != $ae_sess.ver_idb: ${$ae_sess.ver_idb}`);
// console.log(`$events_loc.ver: ${$events_loc.ver} != $events_sess.ver: ${$events_sess.ver}`);
// console.log(`$events_loc.ver_idb: ${$events_loc.ver_idb} != $events_sess.ver_idb: ${$events_sess.ver_idb}`);
// // alert('New version available!!!');
// // Clear Indexed DB as well
// indexedDB.deleteDatabase('ae_core_db');
// indexedDB.deleteDatabase('ae_events_db');
// localStorage.removeItem('ae_loc');
// localStorage.removeItem('events_loc');
// localStorage.clear();
// sessionStorage.removeItem('ae_sess');
// sessionStorage.removeItem('events_sess');
// sessionStorage.clear();
// // This does not seem to work fast enough or something?
// goto('/', {replaceState: true, invalidateAll: true});
// localStorage.removeItem('ae_loc');
// localStorage.removeItem('events_loc');
// localStorage.clear();
// }
}
// Updated 2024-06-25
@@ -122,66 +151,6 @@ onMount(() => {
{/if}
{#if $ae_loc.ver != '2024-08-16_1821' || $ae_loc.ver_idb != '2024-08-16_1826'}
<div class="flex flex-col items-center justify-center bg-error-100 text-error-800 p-4 rounded-lg shadow-lg space-y-2 my-4 w-full">
<span class="fas fa-exclamation-triangle text-4xl text-error-800"></span>
<h2 class="text-2xl font-bold">New Version Available</h2>
<p class="text-lg max-w-2xl text-center">
There is a new version of the web app (this website). Please use the button to clear some cached data and settings. The page will then reload.
</p>
<button
class="btn btn-xl variant-ghost-success hover:variant-filled-success"
on:click={() => {
// This is not a very efficient way to do this, but it works for now.
// Do this first even if the localStorage will be cleared.
if ($ae_loc.ver_idb != '2024-08-16_1826') {
// Yep... this needs to be done differently.
$ae_loc.ver_idb = '2024-08-16_1826';
}
if ($ae_loc.ver != '2024-08-16_1821') {
alert('You will need to sign in again.')
// Clear the local and session storage. Clearing the localStorage will force it to be re-created.
localStorage.clear();
sessionStorage.clear();
}
// Clear Indexed DB as well
indexedDB.deleteDatabase('ae_core_db');
indexedDB.deleteDatabase('ae_events_db');
// This does not seem to work fast enough or something?
goto('/', {invalidateAll: true});
// The page does usually seem to reload correctly?
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.');
}}
title="New Version: Clear the browser storage for this page"
>
<!-- <span class="fas fa-eraser mx-1"></span> -->
<span class="fas fa-sync mx-1"></span>
Clear App Data &amp; Settings - Reload
</button>
{#if $ae_loc.ver != '2024-08-07_1504'}
<p class="text-lg font-bold max-w-2xl text-center">
You will need to sign in again after clearing the cache.
</p>
{/if}
<!-- <p>This reload will be done automatically in the future.</p> -->
</div>
{:else}
<!-- <div class="flex flex-col items-center justify-center bg-success-100 text-success-800 p-4 rounded-lg shadow-lg space-y-2 my-4 w-full">Local App Version {$ae_loc.ver}<br>Local App DB Version {$ae_loc.ver_idb}</div> -->
{/if}
<!-- <div class="container m-auto"> -->
<slot></slot>
<!-- </div> -->

2
src/routes/events_pres_mgmt/session/[slug]/+page.svelte
View File

@@ -121,7 +121,7 @@ onMount(() => {
<svelte:head>
<title>
Session: {ae_util.shorten_string({string: $lq__event_session_obj?.name, max_length: 12})} ({$lq__event_session_obj?.event_session_id}) - Pres Mgmt - {$events_loc?.title}
Session: {ae_util.shorten_string({string: $lq__event_session_obj?.name ?? 'Loading...', max_length: 12})} ({$lq__event_session_obj?.event_session_id ?? ''}) - Pres Mgmt - {$events_loc?.title}
</title>
</svelte:head>