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

<script lang="ts">
export let data: any;
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 { api } from '$lib/api';
import { liveQuery } from "dexie";
import { db_events } from "$lib/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';

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


let ae_acct = data[$slct.account_id];
$events_slct.event_obj = ae_acct.slct.event_obj;
$events_slct.event_obj_li = ae_acct.slct.event_obj_li;


let lq__event_obj_li = liveQuery(
    () => db_events.events
    .orderBy('start_datetime')
    .reverse()
    .toArray()
    // .sortBy('start_datetime')
    // () => db_events.events
    //     .where('conference')
    //     // .aboveOrEqual(0)
    //     .equals('true')
    //     // .above(0)
    //     .sortBy('name') // Use sortBy() instead of orderBy(). toArray() is also not needed???
    //     // .sortBy('[priority+name]')
    //     // .orderBy('name')
    //     // .offset(10).limit(5)
    //     // .toArray()
);
// console.log(`lq__event_obj_li:`, $lq__event_obj_li);

let lq__event_obj = liveQuery(
    async () => db_events.events
    .where('id')
    .equals(await ae_acct.slct.event_id)
    .toArray()
    // .first()
    // .get($events_slct.event_id)
);

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

    console.log('ae_ slct:', $slct);

    let href_url = window.location.href;
    // console.log(href_url);

    $ae_loc.href_url = href_url;
    // console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
    console.log(`lq__event_obj = `, $lq__event_obj);
    // $events_slct.event_obj = db_events.events.get($events_slct.event_id);
    console.log(`$events_slct.event_obj = `, $events_slct.event_obj.name);
});
</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>

<!-- {$events_slct.event_obj.name ?? '--'} -->
<!-- ({$events_slct.event_id}) -->

{#if $ae_loc.administrator_access}
    <h3 class="h4">Administrator Access - Technical Support</h3>
    <p>Your accessing the presentation management system with "administrator" level permissions.</p>
{:else if $ae_loc.trusted_access}
    <h3 class="h4">Trusted Access - Staff</h3>
    <p>Your accessing the presentation management system with "trusted" level permissions.</p>
{:else if !$ae_loc.trusted_access}
    <h3 class="h4">Restricted Access</h3>
    <p>Your accessing 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}
<ul
    class="space-y-2"
    >
    {#each $lq__event_obj_li as event_obj}
        <li>
            <!-- 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.id_random} -->
            <a
                href="/events_pres_mgmt/event/{event_obj.id_random}"
                class="btn btn-md variant-ghost-primary hover:variant-filled-primary hover:underline"
                on:pointerover={() => {
                    // When the cursor is hovering we want to set the event_id and event_obj
                    // $events_slct.event_id = event_obj.id_random;
                    // $events_slct.event_obj = event_obj;
                }}
                >
                {ae_util.iso_datetime_formatter(event_obj.start_datetime, 'date_long')}
                -
                {event_obj.name}
            </a>
            {:else}
                <button
                    disabled
                    class="btn btn-md variant-ghost-surface"
                    >
                    {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.id_random}"
                class="btn btn-sm variant-ghost-warning hover:variant-filled-warning hover:underline"
                >
                Manage
            </a>
            {/if}
        </li>
    {/each}
</ul>
{/if}


</section>


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