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/stores/ae_stores';
    import { events_loc, events_slct, events_trigger } from '$lib/stores/ae_events_stores';
    import { ae_util } from '$lib/ae_utils/ae_utils';

    import { page } from '$app/stores';

    interface Props {
        data: any;
    }

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

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

    let lq__event_obj_li = $derived(
        liveQuery(async () => {
            const account_id = $page.data.account_id;
            if (!account_id) return [];
            let results = await db_events.event
                .where('account_id')
                .equals(account_id)
                .reverse()
                .sortBy('start_datetime');
            return results;
        })
    );

    let items_per_page = 10;
    let current_page = $state(1);

    let paginated_events = $derived(() => {
        const start = (current_page - 1) * items_per_page;
        const end = start + items_per_page;
        return $lq__event_obj_li?.slice(start, end) ?? [];
    });

    let total_events = $derived($lq__event_obj_li?.length ?? 0);
    let total_pages = $derived(Math.ceil(total_events / items_per_page));

    function next_page() {
        if (current_page < total_pages) {
            current_page++;
        }
    }

    function prev_page() {
        if (current_page > 1) {
            current_page--;
        }
    }

    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}>
                    <span class="w-full flex flex-row gap-1 items-center justify-between">
                        <!-- 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}
                            <span>
                                <span class="fas fa-calendar-alt mx-1"></span>
                                {ae_util.iso_datetime_formatter(
                                    event_obj.start_datetime,
                                    'date_long'
                                )}
                            </span>
                            <strong>
                                {event_obj.name}
                            </strong>
                            <!-- <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}
                            <span>
                                <span class="fas fa-calendar-alt mx-1"></span>
                                {ae_util.iso_datetime_formatter(
                                    event_obj.start_datetime,
                                    'date_long'
                                )}
                            </span>
                            <strong>
                                {event_obj.name}
                            </strong>
                            <!-- <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}
                    </span>

                    <span class="w-full flex flex-row gap-1 items-center justify-evenly">
                        {#if $ae_loc.authenticated_access}
                            <a
                                data-sveltekit-reload
                                href="/events/{event_obj.event_id}"
                                class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500"
                                title="Presentation Management for {event_obj.name}"
                            >
                                Pres Mgmt
                            </a>
                            <a
                                href="/events/{event_obj.event_id}/badges"
                                class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500"
                                title="Badge Management for {event_obj.name}"
                            >
                                Badges
                            </a>
                            <a
                                href="/events/{event_obj.event_id}/leads"
                                class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500"
                                title="Exhibitor Leads for {event_obj.name}"
                            >
                                Leads
                            </a>
                            <a
                                href="/events/{event_obj.event_id}/launcher"
                                class="btn btn-sm preset-tonal-secondary border border-secondary-500 hover:preset-filled-secondary-500"
                                title="Event Launcher for {event_obj.name}"
                            >
                                Launcher
                            </a>
                        {/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"
                                title="Legacy Presentation Management System (Flask/Svelte) for {event_obj.name}"
                            >
                                Legacy Pres Mgmt
                            </a>
                        {/if}
                    </span>
                </li>
            {/each}
        </ul>
        <div class="flex justify-center items-center space-x-4 mt-4">
            <button class="btn btn-sm" onclick={prev_page} disabled={current_page === 1}
                >Previous</button
            >
            <span>Page {current_page} of {total_pages}</span>
            <button class="btn btn-sm" onclick={next_page} disabled={current_page === total_pages}
                >Next</button
            >
        </div>
    {: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>