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>