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 { CalendarDays, LoaderCircle, TriangleAlert } from '@lucide/svelte';
    import { page } from '$app/stores';

    interface Props {
        data: any;
    }

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

    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>

<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}
    {#if $lq__event_obj_li.length}
        <ul class="space-y-2">
            {#each $lq__event_obj_li as event_obj (event_obj.event_id)}
                <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>
                                <CalendarDays size="1em" class="inline mx-1" />
                                {ae_util.iso_datetime_formatter(
                                    event_obj.start_datetime,
                                    'date_long'
                                )}
                            </span>
                            <strong>
                                {event_obj.name}
                            </strong>
                        {:else}
                            <span>
                                <CalendarDays size="1em" class="inline mx-1" />
                                {ae_util.iso_datetime_formatter(
                                    event_obj.start_datetime,
                                    'date_long'
                                )}
                            </span>
                            <strong>
                                {event_obj.name}
                            </strong>
                        {/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
                type="button"
                class="btn btn-sm"
                onclick={prev_page}
                disabled={current_page === 1}>Previous</button
            >
            <span>Page {current_page} of {total_pages}</span>
            <button
                type="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">
            <TriangleAlert size="1em" class="inline text-error-500 mx-1" />
            <span>No events available to display.</span>
            <TriangleAlert size="1em" class="inline text-error-500 mx-1" />
        </div>
    {/if}
{:else}
    <div class="flex flex-row items-center justify-center">
        <LoaderCircle size="1em" class="inline animate-spin mx-1" />
        <span>Loading...</span>
    </div>
{/if}