OSIT-AE-App-Svelte/src/routes/events/+page.svelte

<script lang="ts">
// console.log(`ae_events_pres_mgmt +page data:`, data);
// console.log(`ae_events_pres_mgmt Data Params:`, data.url.searchParams.get('event_id'));

import { onMount } from 'svelte';

import { liveQuery } from "dexie";
import { db_events } from "$lib/ae_events/db_events";
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import { events_loc, events_slct, events_trigger } from '$lib/ae_events_stores';
import { ae_util } from '$lib/ae_utils/ae_utils';
    interface Props {
        data: any;
    }

    let { data }: Props = $props();

// import Element_data_store from '$lib/element_data_store_v2.svelte';

let ae_acct = data[$slct.account_id];

let lq__event_obj_li = $derived(liveQuery(async () => {
    let results = await db_events.events
    .where('account_id')
    .equals(ae_acct.slct.account_id)
    .reverse()
    .sortBy('start_datetime')
    return results;
}));


onMount(() => {
    // console.log('Events - Presentation Management: +page.svelte');
});
</script>


<section class="ae_events_pres_mgmt md:container h-full mx-auto">

<h2 class="h3">Presentation Management for {$ae_loc.account_name ?? 'Æ loading...'}</h2>

{#if $ae_loc.administrator_access}
    <h3 class="h4">Administrator Access - Technical Support</h3>
    <p>You are accessing the presentation management system with "administrator" level permissions.</p>
{:else if $ae_loc.trusted_access}
    <h3 class="h4">Trusted Access - Staff</h3>
    <p>You are accessing the presentation management system with "trusted" level permissions.</p>
{:else if !$ae_loc.trusted_access}
    <h3 class="h4">Restricted Access</h3>
    <p>You access to the presentation management system is limited.</p>
{/if}

<!-- <Element_data_store
    ds_code="events__pres_mgmt__overview"
    ds_type="html"
    for_type="event"
    for_id={$events_slct.event_id}
    display="block"
    class_li="p-2"
    /> -->

<!-- <Element_data_store
    ds_code="events__pres_mgmt__example"
    ds_type="html"
    for_type="event"
    for_id={$events_slct.event_id}
    ds_name="Default: Events - Presentation Management Example"
    store="local"
    display="block"
    class_li="variant-ghost-surface p-2"
    try_cache={true}
    show_edit={false}
    /> -->


{#if $lq__event_obj_li}
    <!-- <div class="flex flex-row items-center justify-center">
        <span class="fas fa-check text-green-500 mx-1"></span>
        <span>Loaded</span>
    </div> -->

    {#if $lq__event_obj_li.length}
    <ul
        class="space-y-2"
        >
        {#each $lq__event_obj_li as event_obj}
            <li
                class:dim={event_obj?.hide}
                >
                <!-- We do not want to show events more than 8 months old. -->
                {#if (
                    new Date(event_obj.start_datetime ?? '').getTime())
                    >
                    (new Date().getTime() - (1000 * 60 * 60 * 24 * 30 * 8))
                    || $ae_loc.trusted_access}

                    <!-- {#if $events_slct.event_id === event_obj.event_id_random} -->
                    <a
                        href="/events/{event_obj.event_id}"
                        class="btn btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500"
                        >
                        {ae_util.iso_datetime_formatter(event_obj.start_datetime, 'date_long')}
                        -
                        {event_obj.name}
                    </a>
                {:else}
                    <button
                        disabled
                        class="btn btn-md preset-tonal-surface border border-surface-500"
                        >
                        {ae_util.iso_datetime_formatter(event_obj.start_datetime, 'date_long')}
                        -
                        {event_obj.name}
                    </button>
                {/if}

                {#if $ae_loc.trusted_access}
                <a
                    data-sveltekit-reload
                    href="/event/{event_obj.event_id}"
                    class="btn btn-sm preset-tonal-warning border border-warning-500 hover:preset-filled-warning-500"
                    >
                    Manage
                </a>
                {/if}
            </li>
        {/each}
    </ul>
    {:else}
    <div class="flex flex-row items-center justify-center">
        <span class="fas fa-exclamation-triangle text-red-500 mx-1"></span>
        <span>No events available to display.</span>
        <span class="fas fa-exclamation-triangle text-red-500 mx-1"></span>
    </div>
    {/if}

{:else}
    <div class="flex flex-row items-center justify-center">
        <span class="fas fa-spinner fa-spin mx-1"></span>
        <span>Loading...</span>
    </div>
<!-- {/if} -->
{/if}


<!-- {:catch error}
    <div class="text-red-800">
        <span class="fas fa-exclamation-triangle text-xl"></span>
        <span>Error: {error.message}</span>
    </div>
{/await} -->

</section>


<style lang="postcss">
</style>