143 lines
4.2 KiB
Svelte
143 lines
4.2 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
container_class_li?: string|Array<string>;
|
|
// export let event_session_id_random_li: Array<string>;
|
|
lq__event_session_obj_li: any;
|
|
log_lvl?: number;
|
|
show_location_fields?: boolean;
|
|
hide_session_code?: boolean;
|
|
}
|
|
|
|
let {
|
|
container_class_li = [],
|
|
lq__event_session_obj_li,
|
|
log_lvl = $bindable(0),
|
|
show_location_fields = true,
|
|
hide_session_code = false
|
|
}: Props = $props();
|
|
|
|
// Imports
|
|
// import type { key_val } from '$lib/ae_stores';
|
|
|
|
// import { liveQuery } from "dexie";
|
|
import { ae_util } from '$lib/ae_utils/ae_utils';
|
|
// Imports - events specific
|
|
// import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
|
|
// import { db_events } from "$lib/db_events";
|
|
|
|
|
|
// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher';
|
|
// export let link_to_type: string;
|
|
// export let link_to_id: string;
|
|
|
|
// *** Functions and Logic
|
|
if (log_lvl) {
|
|
console.log(`container_class_li: ${container_class_li}; show_location_fields: ${show_location_fields}`);
|
|
// console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
|
|
}
|
|
|
|
let horiz_scroll_warning: boolean = $state(false);
|
|
let horiz_check_element: HTMLElement|null = $state(null);
|
|
|
|
// Check if element is scrolling horizontally
|
|
$effect(() => {
|
|
if (horiz_check_element && horiz_check_element.scrollWidth > horiz_check_element.offsetWidth) {
|
|
horiz_scroll_warning = true;
|
|
// console.log('Element is too wide for the container. Horizontal scrolling detected.');
|
|
} else {
|
|
horiz_scroll_warning = false;
|
|
// console.log('Element fits within the container. No horizontal scrolling.', horiz_check_element);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
|
|
<section
|
|
class:border-r-2={horiz_scroll_warning}
|
|
class:border-dashed={horiz_scroll_warning}
|
|
class:border-warning-900-100={horiz_scroll_warning}
|
|
class="ae_comp event_session_obj_tbl {container_class_li} container overflow-auto max-w-screen">
|
|
|
|
{#if $lq__event_session_obj_li && $lq__event_session_obj_li?.length}
|
|
|
|
<div
|
|
bind:this={horiz_check_element}
|
|
id="tbl_container"
|
|
class="space-y-2 pb-48"
|
|
>
|
|
<h2 class="h3">
|
|
<span class="text-base">
|
|
Results:
|
|
</span>
|
|
|
|
{#if $lq__event_session_obj_li?.length}
|
|
<span
|
|
class="text-3xl font-bold preset-filled-success-100-900 px-4 rounded-lg"
|
|
title="Count {$lq__event_session_obj_li.length ?? 'None'}"
|
|
>
|
|
<span class="fas fa-list-ol mx-4"></span>
|
|
{$lq__event_session_obj_li.length ?? 'None'}×
|
|
</span>
|
|
{/if}
|
|
</h2>
|
|
|
|
<table
|
|
class="table table-auto table-striped w-full text-xs lg:text-sm"
|
|
>
|
|
<thead
|
|
class=""
|
|
>
|
|
<tr>
|
|
<th class="px-4 py-2">Name</th>
|
|
<th class="px-4 py-2">Start Datetime</th>
|
|
{#if show_location_fields}
|
|
<th class="px-4 py-2">Location</th>
|
|
{/if}
|
|
<th class="px-4 py-2">Session Files</th>
|
|
<th class="px-4 py-2">Presenter Files</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody
|
|
class="">
|
|
{#each $lq__event_session_obj_li as event_session_obj, index}
|
|
<tr
|
|
class:dim={event_session_obj?.hide}
|
|
>
|
|
<td class="px-4 py-2">
|
|
<a
|
|
href="/events/{event_session_obj?.event_id}/session/{event_session_obj?.event_session_id}"
|
|
class="text-blue-500 hover:text-blue-800 hover:underline"
|
|
>
|
|
{event_session_obj?.name}
|
|
</a>
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
{ae_util.iso_datetime_formatter(event_session_obj?.start_datetime, 'datetime_iso_12_no_seconds')}
|
|
</td>
|
|
{#if show_location_fields}
|
|
<td class="px-4 py-2">
|
|
{event_session_obj?.event_location_name}
|
|
</td>
|
|
{/if}
|
|
<td class="px-4 py-2">
|
|
{event_session_obj?.file_count ?? '0'}
|
|
</td>
|
|
<td class="px-4 py-2">
|
|
{event_session_obj?.file_count_all ?? '0'}
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{:else}
|
|
|
|
<p class="text-sm">
|
|
No sessions available to show.
|
|
</p>
|
|
|
|
{/if}
|
|
|
|
|
|
</section> |