Files
OSIT-AE-App-Svelte/src/routes/events/+page.svelte
2026-04-07 15:54:01 -04:00

236 lines
8.9 KiB
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, House, LoaderCircle, MapPin, 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="flex w-full flex-row items-center justify-between gap-1">
<!-- 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>
<CalendarDays size="1em" class="mx-1 inline" />
{ae_util.iso_datetime_formatter(
event_obj.start_datetime,
'date_long'
)}
</span>
<span class="mx-2 text-sm italic opacity-75">
<MapPin size="1em" class="mx-1 inline" />
{event_obj.timezone}
</span>
</span>
<strong>
{event_obj.name}
</strong>
{:else}
<span>
<CalendarDays size="1em" class="mx-1 inline" />
{ae_util.iso_datetime_formatter(
event_obj.start_datetime,
'date_long'
)}
</span>
<strong>
{event_obj.name}
</strong>
{/if}
</span>
<span
class="flex w-full flex-row items-center justify-evenly gap-1">
{#if $ae_loc.authenticated_access}
<a
data-sveltekit-reload
href="/events/{event_obj.event_id}"
class="btn btn-sm preset-tonal-primary border-primary-500 hover:preset-filled-secondary-500 border"
title="Presentation Management for {event_obj.name}">
<House size="1em" class="mr-1 inline" />
Event Home
</a>
{#if $ae_loc.trusted_access}
<a
href="/events/{event_obj.event_id}/pres_mgmt"
class="btn btn-sm preset-tonal-secondary border-secondary-500 hover:preset-filled-secondary-500 border"
title="Presentation Management for {event_obj.name}">
Presentation Mgmt
</a>
<a
href="/events/{event_obj.event_id}/launcher"
class="btn btn-sm preset-tonal-secondary border-secondary-500 hover:preset-filled-secondary-500 border"
title="Event Launcher for {event_obj.name}">
Pres Mgmt - Launcher
</a>
<a
href="/events/{event_obj.event_id}/badges"
class="btn btn-sm preset-tonal-secondary border-secondary-500 hover:preset-filled-secondary-500 border"
title="Badge Management for {event_obj.name}">
Badge Printing
</a>
<a
href="/events/{event_obj.event_id}/leads"
class="btn btn-sm preset-tonal-secondary border-secondary-500 hover:preset-filled-secondary-500 border"
title="Exhibitor Leads for {event_obj.name}">
Exhibitor Leads
</a>
{/if}
{/if}
<!-- {#if $ae_loc.trusted_access}
<a
data-sveltekit-reload
href="/event/{event_obj.event_id}"
class="btn btn-sm preset-tonal-warning border-warning-500 hover:preset-filled-warning-500 border"
title="Legacy Presentation Management System (Flask/Svelte) for {event_obj.name}">
Legacy Pres Mgmt
</a>
{/if} -->
</span>
</li>
{/each}
</ul>
{#if total_pages > 1}
<div class="mt-4 flex items-center justify-center space-x-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>
{/if}
{:else}
<div class="flex flex-row items-center justify-center">
<TriangleAlert size="1em" class="text-error-500 mx-1 inline" />
<span>No events available to display.</span>
<TriangleAlert size="1em" class="text-error-500 mx-1 inline" />
</div>
{/if}
{:else}
<div class="flex flex-row items-center justify-center">
<LoaderCircle size="1em" class="mx-1 inline animate-spin" />
<span>Loading...</span>
</div>
{/if}