401 lines
18 KiB
Svelte
401 lines
18 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
// Exports
|
|
container_class_li?: string | Array<string>;
|
|
display_mode?: string; // 'default', 'compact', 'minimal', 'launcher'
|
|
// export let link_to_id: string;
|
|
lq__event_presentation_obj_li: any;
|
|
log_lvl?: number; // Variables
|
|
}
|
|
|
|
let {
|
|
container_class_li = [],
|
|
display_mode = 'default',
|
|
lq__event_presentation_obj_li,
|
|
log_lvl = 0
|
|
}: Props = $props();
|
|
|
|
// Imports
|
|
import { ae_util } from '$lib/ae_utils/ae_utils';
|
|
import {
|
|
ae_snip,
|
|
ae_loc,
|
|
ae_sess,
|
|
ae_api,
|
|
ae_trig,
|
|
slct,
|
|
slct_trigger
|
|
} from '$lib/stores/ae_stores';
|
|
import { events_func } from '$lib/ae_events/ae_events_functions';
|
|
import {
|
|
events_sess,
|
|
events_slct,
|
|
events_trigger,
|
|
events_trig_kv
|
|
} from '$lib/stores/ae_events_stores';
|
|
import { pres_mgmt_loc } from '$lib/stores/ae_events_stores__pres_mgmt.svelte';
|
|
import { events_auth_loc } from '$lib/stores/ae_events_stores__auth.svelte';
|
|
import Element_ae_obj_field_editor from '$lib/elements/element_ae_obj_field_editor.svelte';
|
|
import Comp_event_presenter_obj_li from '../events/[event_id]/(pres_mgmt)/presenter/ae_comp__event_presenter_obj_li_wrapper.svelte';
|
|
import Element_manage_event_file_li_wrap from '$lib/elements/element_manage_event_file_li_all.svelte';
|
|
import {
|
|
Barcode,
|
|
CalendarDays,
|
|
Eye,
|
|
EyeOff,
|
|
ListOrdered,
|
|
Plus
|
|
} from '@lucide/svelte';
|
|
// export let link_to_type: string;
|
|
|
|
// let ae_promises: key_val = {};
|
|
// let ae_tmp: key_val = {};
|
|
// let ae_triggers: key_val = {};
|
|
|
|
// *** Functions and Logic
|
|
</script>
|
|
|
|
<section
|
|
class="ae_comp event_presentation_obj_li container w-full min-w-full space-y-2 overflow-x-auto px-0.5 py-2 {container_class_li}">
|
|
<div class="float-right flex flex-row items-center">
|
|
{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
console.log('Add Presentation');
|
|
if (
|
|
!confirm(
|
|
'Add a new presentation to the session? You will be able to edit the details after the presentation is created.'
|
|
)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
let presentation_data = {
|
|
name: 'TEMP Presentation Name',
|
|
code: 'new_presentation',
|
|
enable: true
|
|
};
|
|
|
|
events_func.create_ae_obj__event_presentation({
|
|
api_cfg: $ae_api,
|
|
event_session_id: $events_slct.event_session_id,
|
|
data_kv: presentation_data,
|
|
log_lvl: 1
|
|
});
|
|
}}
|
|
class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500">
|
|
<Plus size="1em" class="" />
|
|
Add Presentation
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
|
|
<!-- <section class="ae_comp event_presentation_obj_li {container_class_li}"> -->
|
|
|
|
<h3 class="h5 text-success-800-400">
|
|
<span class="text-sm">
|
|
Presentations:
|
|
|
|
{#if lq__event_presentation_obj_li?.length}
|
|
<span
|
|
class="preset-filled-success-100-900 rounded-lg px-4 text-3xl font-bold"
|
|
title="Count {lq__event_presentation_obj_li.length ??
|
|
'None'}">
|
|
<ListOrdered size="1em" class="" />
|
|
{lq__event_presentation_obj_li.length ?? 'None'}×
|
|
</span>
|
|
{/if}
|
|
|
|
<!-- {#if !lq__event_presentation_obj_li?.length}
|
|
<span class="text-sm text-gray-500">
|
|
<span class="fas fa-exclamation-triangle mx-1"></span>
|
|
No presentations available to show at this time
|
|
</span>
|
|
{/if} -->
|
|
</span>
|
|
</h3>
|
|
|
|
<!-- Show presentations for this LiveQuery -->
|
|
<ul class="space-y-4">
|
|
{#each lq__event_presentation_obj_li ?? [] as event_presentation_obj (event_presentation_obj.event_presentation_id)}
|
|
<li
|
|
class="border-surface-200-800 bg-surface-50-900 space-y-3 rounded-xl border p-4 shadow-sm transition-colors duration-200">
|
|
<div class="space-2 float-right flex flex-row items-center">
|
|
{#if $ae_loc.trusted_access && $ae_loc.edit_mode}
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
console.log('Add Presenter');
|
|
if (
|
|
!confirm(
|
|
'Add a new presenter to the presentation? You will be able to edit their details after the presenter record is created.'
|
|
)
|
|
) {
|
|
return;
|
|
}
|
|
|
|
let presenter_data = {
|
|
event_presentation_id:
|
|
event_presentation_obj?.event_presentation_id,
|
|
given_name: 'New',
|
|
family_name: 'Presenter',
|
|
email: 'test+newpres@oneskyit.com',
|
|
code: 'new_presenter',
|
|
enable: true
|
|
};
|
|
|
|
events_func.create_ae_obj__event_presenter({
|
|
api_cfg: $ae_api,
|
|
event_presentation_id:
|
|
event_presentation_obj.event_presentation_id,
|
|
data_kv: presenter_data,
|
|
log_lvl: 1
|
|
});
|
|
}}
|
|
class="btn btn-sm preset-tonal-warning hover:preset-filled-warning-500">
|
|
<Plus size="1em" class="" />
|
|
Add Presenter
|
|
</button>
|
|
{/if}
|
|
</div>
|
|
|
|
<h4
|
|
class="bg-surface-100-900 flex flex-wrap items-center gap-2 rounded-lg px-3 py-2 text-lg font-bold">
|
|
<span
|
|
class:hidden={!event_presentation_obj.start_datetime ||
|
|
pres_mgmt_loc.current.hide__presentation_datetime}
|
|
class="border-r-2 border-gray-800/50 px-1 text-base">
|
|
{ae_util.iso_datetime_formatter(
|
|
event_presentation_obj.start_datetime,
|
|
'dddd'
|
|
)}
|
|
@
|
|
{ae_util.iso_datetime_formatter(
|
|
event_presentation_obj.start_datetime,
|
|
'time_short',
|
|
pres_mgmt_loc.current.use_12h
|
|
)}
|
|
</span>
|
|
|
|
<Element_ae_obj_field_editor
|
|
object_type={'event_presentation'}
|
|
object_id={event_presentation_obj?.event_presentation_id}
|
|
field_name={'name'}
|
|
field_type={'text'}
|
|
current_value={event_presentation_obj?.name}
|
|
display_block={true}
|
|
on_success={() =>
|
|
events_func.load_ae_obj_id__event_presentation({
|
|
api_cfg: $ae_api,
|
|
event_presentation_id:
|
|
event_presentation_obj.event_presentation_id,
|
|
log_lvl: 1
|
|
})}>
|
|
<span class="italic">
|
|
{event_presentation_obj?.name}
|
|
</span>
|
|
</Element_ae_obj_field_editor>
|
|
<!-- "{event_presentation_obj.name}" -->
|
|
|
|
<Element_ae_obj_field_editor
|
|
object_type={'event_presentation'}
|
|
object_id={event_presentation_obj?.event_presentation_id}
|
|
field_name={'code'}
|
|
field_type={'text'}
|
|
current_value={event_presentation_obj?.code}
|
|
display_block={true}
|
|
on_success={() =>
|
|
events_func.load_ae_obj_id__event_presentation({
|
|
api_cfg: $ae_api,
|
|
event_presentation_id:
|
|
event_presentation_obj.event_presentation_id,
|
|
log_lvl: 1
|
|
})}>
|
|
{#if (event_presentation_obj?.code || event_presentation_obj?.abstract_code) && !pres_mgmt_loc.current.hide__presentation_code}
|
|
<span
|
|
class="preset-tonal-warning rounded-md px-2 py-0.5 text-xs leading-none"
|
|
title="Presentation code {event_presentation_obj?.code} and abstract code {event_presentation_obj?.abstract_code}">
|
|
<Barcode size="1em" />
|
|
{event_presentation_obj?.code ?? ''}
|
|
{event_presentation_obj?.abstract_code ?? ''}
|
|
</span>
|
|
{:else if $ae_loc.trusted_access && $ae_loc.edit_mode}
|
|
<span
|
|
class="text-semibold text-success-800-400 text-sm">
|
|
<Barcode size="1em" />
|
|
Code:
|
|
<span
|
|
class=""
|
|
title="No code provided for this presentation">
|
|
{@html event_presentation_obj?.code ??
|
|
ae_snip.html__not_set}
|
|
</span>
|
|
</span>
|
|
{/if}
|
|
</Element_ae_obj_field_editor>
|
|
<!-- Can not edit the abstract code here at this time. -->
|
|
</h4>
|
|
|
|
<div
|
|
class:hidden={!(
|
|
$ae_loc.trusted_access && $ae_loc.edit_mode
|
|
)}>
|
|
<span class="text-semibold text-success-800-400 text-sm">
|
|
Date &
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
pres_mgmt_loc.current.use_12h = !pres_mgmt_loc.current.use_12h;
|
|
}}>
|
|
time
|
|
</button>
|
|
:</span>
|
|
<CalendarDays size="1em" class="text-success-800-400" />
|
|
<Element_ae_obj_field_editor
|
|
object_type={'event_presentation'}
|
|
object_id={event_presentation_obj?.event_presentation_id}
|
|
field_name={'start_datetime'}
|
|
field_type={'datetime'}
|
|
current_value={event_presentation_obj.start_datetime}
|
|
on_success={() =>
|
|
events_func.load_ae_obj_id__event_presentation({
|
|
api_cfg: $ae_api,
|
|
event_presentation_id:
|
|
event_presentation_obj?.event_presentation_id
|
|
})}>
|
|
{ae_util.iso_datetime_formatter(
|
|
event_presentation_obj.start_datetime,
|
|
'dddd'
|
|
)}
|
|
{ae_util.iso_datetime_formatter(
|
|
event_presentation_obj.start_datetime,
|
|
'time_short',
|
|
pres_mgmt_loc.current.use_12h
|
|
)}
|
|
</Element_ae_obj_field_editor>
|
|
-
|
|
<Element_ae_obj_field_editor
|
|
object_type={'event_presentation'}
|
|
object_id={event_presentation_obj?.event_presentation_id}
|
|
field_name={'end_datetime'}
|
|
field_type={'datetime'}
|
|
current_value={event_presentation_obj.end_datetime}
|
|
on_success={() =>
|
|
events_func.load_ae_obj_id__event_presentation({
|
|
api_cfg: $ae_api,
|
|
event_presentation_id:
|
|
event_presentation_obj?.event_presentation_id
|
|
})}>
|
|
{ae_util.iso_datetime_formatter(
|
|
event_presentation_obj.end_datetime,
|
|
'time_short',
|
|
pres_mgmt_loc.current.use_12h
|
|
)}
|
|
</Element_ae_obj_field_editor>
|
|
</div>
|
|
|
|
<div
|
|
class:hidden={!pres_mgmt_loc.current.show_content__presentation_description &&
|
|
!($ae_loc.trusted_access && $ae_loc.edit_mode)}>
|
|
<Element_ae_obj_field_editor
|
|
object_type={'event_presentation'}
|
|
object_id={event_presentation_obj?.event_presentation_id}
|
|
field_name={'description'}
|
|
field_type={'textarea'}
|
|
current_value={event_presentation_obj?.description}
|
|
allow_null={true}
|
|
display_block={true}
|
|
textarea_rows={15}
|
|
on_success={() =>
|
|
events_func.load_ae_obj_id__event_presentation({
|
|
api_cfg: $ae_api,
|
|
event_presentation_id:
|
|
event_presentation_obj.event_presentation_id,
|
|
log_lvl: 1
|
|
})}>
|
|
<span
|
|
class="text-semibold text-success-800-400 text-sm">
|
|
Description:
|
|
</span>
|
|
|
|
{#if event_presentation_obj?.description}
|
|
<button
|
|
type="button"
|
|
onclick={() => {
|
|
console.log('Show/Hide Description');
|
|
if (
|
|
$events_sess.pres_mgmt
|
|
.show_content__presentation_description ==
|
|
event_presentation_obj.event_presentation_id
|
|
) {
|
|
$events_sess.pres_mgmt.show_content__presentation_description =
|
|
null;
|
|
|
|
// Was testing with LiveQuery
|
|
$events_slct.event_presentation_id =
|
|
null;
|
|
} else {
|
|
$events_sess.pres_mgmt.show_content__presentation_description =
|
|
event_presentation_obj.event_presentation_id;
|
|
|
|
// Was testing with LiveQuery
|
|
$events_slct.event_presentation_id =
|
|
event_presentation_obj.event_presentation_id;
|
|
}
|
|
}}
|
|
class="btn btn-sm preset-tonal-surface hover:preset-filled-surface-500 text-xs">
|
|
{#if $events_sess.pres_mgmt.show_content__presentation_description == event_presentation_obj.event_presentation_id}
|
|
<EyeOff size="1em" class="" />
|
|
<span>Hide Description</span>
|
|
{:else}
|
|
<Eye size="1em" class="" />
|
|
<span>Show</span>
|
|
{/if}
|
|
</button>
|
|
|
|
<pre
|
|
class="bg-surface-100-900 rounded-lg p-3 text-sm whitespace-pre-wrap"
|
|
class:hidden={$events_sess.pres_mgmt
|
|
.show_content__presentation_description !==
|
|
event_presentation_obj.event_presentation_id}>{event_presentation_obj.description}</pre>
|
|
{:else}
|
|
{@html ae_snip.html__not_set}
|
|
{/if}
|
|
<!-- {:else}
|
|
<div class="text-sm text-gray-500 bg-gray-100 p-1 rounded-md border border-gray-200"
|
|
class:hidden={!$ae_loc.administrator_access}
|
|
>
|
|
<span class="fas fa-exclamation-triangle mx-1"></span>
|
|
No description provided.
|
|
</div>
|
|
{/if} -->
|
|
</Element_ae_obj_field_editor>
|
|
</div>
|
|
|
|
<!-- Show presenters for this presentation -->
|
|
<Comp_event_presenter_obj_li
|
|
link_to_type={'event_presentation'}
|
|
link_to_id={event_presentation_obj.event_presentation_id}
|
|
event_presenter_id_li={[]}
|
|
log_lvl={2}></Comp_event_presenter_obj_li>
|
|
|
|
<!-- Show files for this presentation -->
|
|
<Element_manage_event_file_li_wrap
|
|
link_to_type={'event_presentation'}
|
|
link_to_id={event_presentation_obj?.event_presentation_id}
|
|
allow_basic={events_auth_loc.current.auth__kv.session[
|
|
$events_slct.event_session_id
|
|
] ||
|
|
events_auth_loc.current.auth__kv.presenter[
|
|
$events_slct.event_presenter_id
|
|
]}
|
|
allow_moderator={events_auth_loc.current.auth__kv.session[
|
|
$events_slct.event_session_id
|
|
]}
|
|
container_class_li={''} />
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</section>
|