Files
OSIT-AE-App-Svelte/src/routes/events_pres_mgmt/session/[slug]/+page.svelte

294 lines
8.7 KiB
Svelte

<script lang="ts">
/** @type {import('./$types').PageData} */
export let data: any;
// console.log(`ae_events_pres_mgmt event [slug] +page.svelte data:`, data);
// Imports
import { onMount } from 'svelte';
import { clipboard } from '@skeletonlabs/skeleton';
import type { key_val } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils';
import { api, send_email } from '$lib/api';
// import Element_ae_crud from '$lib/element_ae_crud.svelte';
// import Element_data_store from '$lib/element_data_store.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 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__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.
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>
{#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_obj={lq__event_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.trusted_access}
<div>
<h3 class="h5">
<span class="fas fa-upload m-1"></span>
Manage and Upload Session Files:
</h3>
<Comp_event_files_upload
link_to_type="event_session"
link_to_id={$lq__event_session_obj.event_session_id}
/>
<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>
{#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>