OSIT-AE-App-Svelte/src/routes/events_pres_mgmt/+layout.svelte

<script lang="ts">
/** @type {import('./$types').LayoutData} */
export let data: any;

import { goto } from '$app/navigation';
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 { 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 Element_data_store from '$lib/element_data_store.svelte';

$events_loc.qry__enabled = 'enabled';
$events_loc.qry__hidden = 'not_hidden';
$events_loc.qry__limit = 15;
$events_loc.qry__offset = 0;

// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
$slct.account_id = data.account_id;
console.log(`$slct.account_id = `, $slct.account_id);
let ae_acct = data[$slct.account_id];
// console.log(`ae_acct = `, ae_acct);

$events_slct.event_id = ae_acct.slct.event_id;
$events_slct.event_obj = ae_acct.slct.event_obj;
$events_slct.event_obj_li = ae_acct.slct.event_obj_li;

let ae_promises: key_val = {};


onMount(() => {
    console.log('Events - Presentation Management: +layout.svelte');

    console.log($events_slct.event_obj_li);
});


// Updated 2024-06-25
$: if ($events_trigger == 'load__event_session_obj_id' && $events_trig_kv['event_session_id']) {
    console.log(`load__event_session_obj_id() $events_slct.event_session_id=${$events_slct.event_session_id}`);

    $events_trigger = null;

    if ($events_slct.event_session_id) {
        $events_trig_kv['event_session_id'] = events_func.handle_load_ae_obj_id__event_session({
            api_cfg: $ae_api,
            event_session_id: $events_slct.event_session_id,
            log_lvl: 1
        })
        .then(function (load_results) {
            console.log(`ae_event_session_get_promise:`, load_results);
        });
    }
}


</script>


<svelte:head>
	<title>Presentation Management - {$events_loc.title ?? 'Æ loading...'}</title>
</svelte:head>


{#if $ae_loc.administrator_access && 1==2}
<section
    class="submenu flex flex-row justify-center"
    class:hidden={$ae_loc.iframe}
    >

    <span class="btn-group variant-soft-secondary px-4 py-2">
    {#each Object.entries(data.submenu) as [key, item]}
        <!-- <a href="/settings/{item.slug}">{item.title}</a> -->
        <!-- class:hidden={!$ae_loc.trusted_access && item.access} -->
        {#if item.disable}
        <button
            title={item.title}
            class="hover:variant-ghost-secondary"
            class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') || (!$ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
            disabled={item.disable}

            on:click={() => {
                // window.location(item.href);
                // href={item.href}
                // invalidateAll
                goto(item.href, { });
            }}
            >
            {item.name}
        </button>
        {:else}
        <a
            href={item.href}
            title={item.title}
            class="hover:variant-ghost-secondary"
            class:hidden={(!$ae_loc.trusted_access && item.access === 'trusted') || (!$ae_loc.administrator_access && item.access === 'administrator' || item.hide)}
            class:disabled={item.disable}
            >
            {item.name}
        </a>
        {/if}
    {/each}
    </span>

</section>
{/if}



{#if $ae_loc.ver != '2024-06-26_13' || $ae_loc.ver_idb != '2024-06-26_1625'}

<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-06-26_1625') {
            // Yep... this needs to be done differently.
            $ae_loc.ver_idb = '2024-06-26_1625';
        }

        if ($ae_loc.ver != '2024-06-26_13') {
            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');

        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-06-26_13'}
<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}

<slot></slot>