437 lines
15 KiB
Svelte
437 lines
15 KiB
Svelte
<script lang="ts">
|
|
/** @type {import('./$types').PageData} */
|
|
export let data: any;
|
|
let log_lvl = 0;
|
|
// console.log(`ae_events_pres_mgmt event [slug] +page.svelte data:`, data);
|
|
|
|
// Imports
|
|
import { Modal } from 'flowbite-svelte';
|
|
import { onMount } from 'svelte';
|
|
|
|
import type { key_val } from '$lib/ae_stores';
|
|
import { ae_util } from '$lib/ae_utils/ae_utils';
|
|
import Element_data_store from '$lib/element_data_store_v2.svelte';
|
|
|
|
let ae_promises: key_val = {};
|
|
let ae_tmp: key_val = {};
|
|
let ae_triggers: key_val = {};
|
|
|
|
import { liveQuery } from "dexie";
|
|
import { core_func } from '$lib/ae_core_functions';
|
|
import { db_events } from "$lib/db_events";
|
|
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
|
|
import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
|
|
import { events_func } from '$lib/ae_events_functions';
|
|
|
|
import Comp_event_files_upload from './../../ae_comp__event_files_upload.svelte';
|
|
import Comp_event_presenter_form_agree from '../../../events/[event_id]/presenter/[presenter_id]/ae_comp__event_presenter_form_agree.svelte';
|
|
import Element_manage_event_file_li_wrap from '$lib/element_manage_event_file_li_direct.svelte';
|
|
import Session_view from './../../session_view.svelte';
|
|
import Session_page_menu from './../../session_page_menu.svelte';
|
|
// import Sign_in_out from './../../sign_in_out.svelte';
|
|
|
|
import { browser } from '$app/environment';
|
|
|
|
// Variables
|
|
if (browser) {
|
|
console.log('Browser environment detected.');
|
|
}
|
|
|
|
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.
|
|
$slct.account_id = data.account_id;
|
|
// console.log(`$slct.account_id = `, $slct.account_id);
|
|
let ae_acct = data[$slct.account_id];
|
|
// console.log(`ae_acct = `, ae_acct);
|
|
|
|
$ae_loc.url_origin = data.url.origin;
|
|
|
|
$events_slct.event_id = ae_acct.slct.event_id;
|
|
// $events_slct.event_obj = ae_acct.slct.event_obj;
|
|
$events_slct.event_session_id = ae_acct.slct.event_session_id;
|
|
// $events_slct.event_session_obj = ae_acct.slct.event_session_obj;
|
|
$events_slct.event_presentation_id = null;
|
|
// $events_slct.event_presentation_obj = null;
|
|
$events_slct.event_presentation_obj_li = ae_acct.slct.event_presentation_obj_li;
|
|
// $events_slct.event_file_obj_li = ae_acct.slct.event_file_obj_li;
|
|
|
|
if (!$events_loc.auth__person) {
|
|
$events_loc.auth__person = {
|
|
id: null,
|
|
email: null,
|
|
full_name: null,
|
|
entered_key: null,
|
|
entered_passcode: null,
|
|
};
|
|
}
|
|
|
|
if (!$events_loc.auth__kv) {
|
|
$events_loc.auth__kv = {
|
|
session: {},
|
|
presentation: {},
|
|
presenter: {},
|
|
person: {},
|
|
};
|
|
}
|
|
|
|
if (!$events_loc.pres_mgmt) {
|
|
$events_loc.pres_mgmt = {};
|
|
}
|
|
|
|
if (!$events_sess.pres_mgmt) {
|
|
$events_sess.pres_mgmt = {};
|
|
$events_sess.pres_mgmt.show_content__agree_text = null;
|
|
$events_sess.pres_mgmt.show_content__presenter_start = null;
|
|
}
|
|
|
|
$events_sess.pres_mgmt.show_content__agree_text = false;
|
|
$events_sess.pres_mgmt.show_content__presenter_start = false;
|
|
|
|
let lq__event_obj = liveQuery(
|
|
() => db_events.events.get($events_slct.event_id)
|
|
);
|
|
|
|
let lq__event_session_obj = liveQuery(
|
|
() => db_events.sessions.get(ae_acct.slct.event_session_id)
|
|
);
|
|
|
|
let lq__event_presentation_obj_li = liveQuery(
|
|
() => db_events.presentations
|
|
.where('event_session_id_random')
|
|
.equals(ae_acct.slct.event_session_id)
|
|
.sortBy('name')
|
|
);
|
|
|
|
let lq__event_presenter_obj = liveQuery(
|
|
() => db_events.presenters.get($events_slct.event_presenter_id)
|
|
);
|
|
|
|
let lq__auth__event_presenter_obj = liveQuery(
|
|
() => db_events.presenters.get($events_loc.auth__person.presenter_id ?? null)
|
|
);
|
|
|
|
$slct.person_obj_kv = {}; // This is intended for the POC lookup list when generated.
|
|
|
|
// JSON formatted configuration options for an event, and specifically for the presentation management module.
|
|
$: if ($lq__event_obj?.mod_pres_mgmt_json) {
|
|
// if (log_lvl) {
|
|
// console.log(`*** Event Pres Mgmt JSON *** pres_mgmt_cfg_local`, $events_loc.pres_mgmt);
|
|
// }
|
|
// $events_loc.pres_mgmt =
|
|
events_func.sync_config__event_pres_mgmt({
|
|
pres_mgmt_cfg_remote: $lq__event_obj?.mod_pres_mgmt_json,
|
|
pres_mgmt_cfg_local: $events_loc?.pres_mgmt,
|
|
log_lvl: log_lvl,
|
|
});
|
|
// if (log_lvl) {
|
|
// console.log(`*** Event Pres Mgmt JSON *** pres_mgmt_cfg_local`, $events_loc.pres_mgmt);
|
|
// }
|
|
}
|
|
|
|
|
|
if (!$ae_loc.authenticated_access && $events_loc.pres_mgmt.show_content__session_view) {
|
|
$events_loc.pres_mgmt.show_content__session_view = null;
|
|
}
|
|
|
|
// Functions and Logic
|
|
onMount(() => {
|
|
console.log('Events Session [slug]: +page.svelte');
|
|
});
|
|
</script>
|
|
|
|
|
|
<svelte:head>
|
|
<title>
|
|
Session: {ae_util.shorten_string({string: $lq__event_session_obj?.name ?? 'Loading...', max_length: 12})} ({$lq__event_session_obj?.event_session_id ?? ''}) - Pres Mgmt - {$events_loc?.title}
|
|
</title>
|
|
</svelte:head>
|
|
|
|
|
|
<section
|
|
class="ae_events_pres_mgmt_event_session
|
|
md:container h-full mx-auto flex flex-col gap-1 py-1 px-2 pb-16"
|
|
>
|
|
|
|
<Session_page_menu
|
|
data={data}
|
|
event_session_id={$lq__event_session_obj?.event_session_id}
|
|
lq__event_session_obj={lq__event_session_obj}
|
|
lq__auth__event_presenter_obj={lq__auth__event_presenter_obj}
|
|
/>
|
|
|
|
{#if !$lq__event_session_obj}
|
|
|
|
<div>
|
|
<span class="fas fa-spinner fa-spin m-1"></span>
|
|
<span>Loading session information...</span>
|
|
</div>
|
|
|
|
{:else if $lq__event_session_obj?.enable || $ae_loc.trusted_access}
|
|
|
|
<h2 class="h2 text-center rounded-md p-2 bg-gray-300">
|
|
{@html $lq__event_session_obj?.name ?? ae_snip.html__not_set}
|
|
</h2>
|
|
|
|
<Element_data_store
|
|
ds_code="events__pres_mgmt__session_msg"
|
|
ds_name="Default: Events - Pres Mgmt Session Message"
|
|
ds_type="html"
|
|
for_type="event"
|
|
for_id={$lq__event_session_obj?.event_id_random}
|
|
class_li="w-full max-w-screen-lg text-lg text-blue-500 font-bold text-center p-1 m-auto border border-blue-200 rounded-md bg-blue-100 space-y-2"
|
|
hide={!$ae_loc.manager_access || $events_loc.pres_mgmt.hide__session_msg}
|
|
show_edit={false}
|
|
show_edit_btn={true}
|
|
/>
|
|
|
|
<div class="m-1 flex flex-col flex-wrap gap-1 items-center">
|
|
{#if $ae_loc.trusted_access || ($events_loc.auth__person.id && $events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id_random]) }
|
|
|
|
{#if $events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id_random] === true}
|
|
<h3 class="h3">Welcome {$lq__event_session_obj?.poc_person_full_name ?? 'Session POC'}</h3>
|
|
{:else if $events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id_random] == 'read'}
|
|
<h3 class="h3">Welcome {$lq__auth__event_presenter_obj?.full_name ?? 'Presenter'}</h3>
|
|
{/if}
|
|
|
|
<!-- {#if $ae_loc.trusted_access || $events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id_random] || ($events_loc.auth__kv.presenter[$events_slct.event_presenter_id] && $lq__event_presenter_obj?.agree)} -->
|
|
{#if
|
|
$ae_loc.trusted_access ||
|
|
$events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id_random] === true ||
|
|
($events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id_random] == 'read' && $lq__auth__event_presenter_obj?.agree)
|
|
}
|
|
<!-- Message if they have agreed -->
|
|
<Element_data_store
|
|
ds_code="events__pres_mgmt__session_page_authorized_info"
|
|
ds_name="Default: Events - Pres Mgmt Session Authorized Info"
|
|
ds_type="html"
|
|
for_type="event"
|
|
for_id={$lq__event_session_obj?.event_id_random}
|
|
class_li="w-fit max-w-screen-lg flex flex-col gap-1"
|
|
show_edit={false}
|
|
show_edit_btn={true}
|
|
mount_reload_sec={1}
|
|
/>
|
|
{:else if ($events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id_random] == 'read' && !$lq__event_presenter_obj?.agree)}
|
|
<!-- Message if they have not yet agreed -->
|
|
<Element_data_store
|
|
ds_code="events__pres_mgmt__presenter_agree_read_consent"
|
|
ds_name="Default: Events - Pres Mgmt Session Restricted Access"
|
|
ds_type="html"
|
|
for_type="event"
|
|
for_id={$lq__event_session_obj?.event_id_random}
|
|
class_li="w-fit max-w-screen-lg text-lg text-red-500 font-bold text-center p-1 m-1 border border-red-200 rounded-md bg-red-100 space-y-2"
|
|
show_edit={false}
|
|
show_edit_btn={true}
|
|
/>
|
|
{/if}
|
|
|
|
{:else}
|
|
|
|
<Element_data_store
|
|
ds_code="events__pres_mgmt__session_page_restricted_access"
|
|
ds_name="Default: Events - Pres Mgmt Session Restricted Access"
|
|
ds_type="html"
|
|
for_type="event"
|
|
for_id={$lq__event_presenter_obj?.event_id_random}
|
|
class_li="w-fit max-w-screen-lg text-xl text-red-500 font-bold text-center p-1 m-1 border border-red-200 rounded-md bg-red-100"
|
|
show_edit={false}
|
|
show_edit_btn={true}
|
|
/>
|
|
|
|
{/if}
|
|
|
|
|
|
|
|
</div>
|
|
|
|
{#if !$events_loc.pres_mgmt.show_content__session_view || $events_loc.pres_mgmt.show_content__session_view == 'default'}
|
|
<Session_view
|
|
event_session_id={$lq__event_session_obj?.event_session_id}
|
|
lq__event_presenter_obj={lq__event_presenter_obj}
|
|
lq__event_session_obj={lq__event_session_obj}
|
|
lq__auth__event_presenter_obj={lq__auth__event_presenter_obj}
|
|
lq__event_presentation_obj_li={lq__event_presentation_obj_li}
|
|
/>
|
|
|
|
{:else if $events_loc.pres_mgmt.show_content__session_view == 'manage_files' && $ae_loc.public_access}
|
|
|
|
<div>
|
|
<h3 class="h5 text-center">
|
|
<span class="fas fa-tasks m-1"></span>
|
|
<span class="fas fa-mail-bulk m-1"></span>
|
|
Manage and Upload Session Files:
|
|
</h3>
|
|
|
|
<Comp_event_files_upload
|
|
class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
|
|
link_to_type="event_session"
|
|
link_to_id={$lq__event_session_obj.event_session_id}
|
|
>
|
|
<span slot="label">
|
|
<div>
|
|
<span class="fas fa-upload"></span>
|
|
<strong class="bg-yellow-100 p-1">Upload session (breakout) specific files only!</strong>
|
|
</div>
|
|
<span class="text-sm text-gray-600 dark:text-gray-400 italic">
|
|
<strong>Session (breakout) files only</strong><br>
|
|
Recommended: PowerPoint (pptx) or Keynote (key)<br>
|
|
Media: Audio and videos files should be directly embedded in PowerPoint (PPTX) files<br>
|
|
Supplemental files: mp4, PDF, Word Doc, Excel, txt, etc
|
|
</span>
|
|
</span>
|
|
</Comp_event_files_upload>
|
|
|
|
<div class="overflow-x-auto w-max max-w-full">
|
|
<Element_manage_event_file_li_wrap
|
|
link_to_type={'event_session'}
|
|
link_to_id={$lq__event_session_obj?.event_session_id_random}
|
|
allow_basic={$events_loc.auth__kv.session[$lq__event_session_obj.event_session_id_random] || $events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id_random]}
|
|
allow_moderator={$events_loc.auth__kv.session[$lq__event_session_obj.event_session_id_random]}
|
|
container_class_li={''}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
{:else}
|
|
|
|
<div class="bg-red-100 p-4 border border-red-200 rounded-md">
|
|
<h2 class="h3">
|
|
<span class="fas fa-exclamation-triangle text-red-500 m-1"></span>
|
|
Session Disabled
|
|
</h2>
|
|
<p>
|
|
This session is currently disabled. Please contact the event organizer for more information.
|
|
</p>
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Main modal -->
|
|
<Modal
|
|
title="Presenter's Profile"
|
|
bind:open={$events_sess.pres_mgmt.show_modal__presenter_agree}
|
|
autoclose={false}
|
|
class="bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 rounded-lg border-gray-200 dark:border-gray-700 divide-gray-200 dark:divide-gray-700 shadow-md relative flex flex-col mx-auto w-full divide-y"
|
|
>
|
|
|
|
<Comp_event_presenter_form_agree
|
|
lq__event_presenter_obj={lq__event_presenter_obj}
|
|
/>
|
|
|
|
<svelte:fragment slot="footer">
|
|
<div class="text-center w-full">
|
|
|
|
<button
|
|
on:click={() => {
|
|
$events_sess.pres_mgmt.show_modal__presenter_agree = false;
|
|
}}
|
|
class="btn btn-sm variant-soft-warning hover:variant-ghost-warning"
|
|
>
|
|
<span class="fas fa-times m-1"></span>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</svelte:fragment>
|
|
|
|
</Modal>
|
|
|
|
|
|
|
|
{#if $events_sess.pres_mgmt?.show_form__sign_in}
|
|
<div class="ae_quick_modal_container">
|
|
<section class="ae_quick_popover">
|
|
|
|
<div class="flex flex-col items-center">
|
|
|
|
|
|
<!-- <div class="h-4 p-10"> -->
|
|
|
|
<!-- </div> -->
|
|
|
|
<section class="ae_modal_scrollfix">
|
|
<button
|
|
on:click={
|
|
() => {
|
|
$events_sess.pres_mgmt.show_content__agree_text = null;
|
|
}
|
|
}
|
|
class="btn btn-md variant-soft-secondary hover:variant-filled-secondary float-right"
|
|
>
|
|
<span class="fas fa-times m-1"></span>
|
|
Close
|
|
</button>
|
|
|
|
|
|
|
|
|
|
|
|
</section>
|
|
|
|
<!-- <div class="h-12"> -->
|
|
<button
|
|
on:click={
|
|
() => {
|
|
$events_sess.pres_mgmt.show_content__agree_text = null;
|
|
}
|
|
}
|
|
class="btn btn-md variant-soft-secondary hover:variant-filled-secondary"
|
|
>
|
|
<span class="fas fa-times m-1"></span>
|
|
Close
|
|
</button>
|
|
<!-- </div> -->
|
|
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
{/if}
|
|
|
|
|
|
|
|
<style lang="postcss">
|
|
/* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */
|
|
div.ae_quick_modal_container {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 100;
|
|
background-color: hsla(0, 0%, 50%, .75);
|
|
/* padding: 1rem; */
|
|
/* border: solid thick red; */
|
|
}
|
|
|
|
/* The section.ae_quick_popover should be above the rest of the content and centered on the page. */
|
|
section.ae_quick_popover {
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 100;
|
|
background-color: hsla(0, 0%, 97%, .97);
|
|
/* margin-top: 1rem;
|
|
margin-bottom: 2rem; */
|
|
/* padding: 1rem;
|
|
padding-top:4rem; */
|
|
/* padding-bottom: 4rem; */
|
|
border: solid thin hsla(0, 0%, 0%, .9);
|
|
border-radius: .5rem;
|
|
box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);
|
|
|
|
min-height: 30%;
|
|
/* max-height: 100vh; */
|
|
min-width: 80%;
|
|
|
|
/* overflow-y: auto; */
|
|
}
|
|
</style>
|