Work on location views and editing. Also session list clean up.
This commit is contained in:
Scott Idem
340
src/routes/events_pres_mgmt/location/[slug]/+page.svelte
Normal file
340
src/routes/events_pres_mgmt/location/[slug]/+page.svelte
Normal file
@@ -0,0 +1,340 @@
|
||||
<script lang="ts">
|
||||
/** @type {import('./$types').PageData} */
|
||||
export let data: any;
|
||||
let log_lvl = 1;
|
||||
// console.log(`ae_events_pres_mgmt location [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 Comp_event_session_obj_li from './../../ae_comp__event_session_obj_li_v2.svelte';
|
||||
import Element_manage_event_file_li_wrap from '$lib/element_manage_event_file_li_direct.svelte';
|
||||
import Location_view from './../../location_view.svelte';
|
||||
import Location_page_menu from './../../location_page_menu.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_location_id = ae_acct.slct.event_location_id;
|
||||
// $events_slct.event_location_obj = ae_acct.slct.event_location_obj;
|
||||
$events_slct.event_session_id = null;
|
||||
// $events_slct.event_session_obj = null;
|
||||
$events_slct.event_session_obj_li = ae_acct.slct.event_session_obj_li;
|
||||
// $events_slct.event_file_obj_li = ae_acct.slct.event_file_obj_li;
|
||||
|
||||
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_location_obj = liveQuery(
|
||||
() => db_events.locations.get(ae_acct.slct.event_location_id)
|
||||
);
|
||||
|
||||
let lq__event_session_obj_li = liveQuery(
|
||||
() => db_events.sessions
|
||||
.where('event_location_id_random')
|
||||
.equals(ae_acct.slct.event_location_id)
|
||||
.sortBy('start_datetime')
|
||||
);
|
||||
|
||||
// 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__location_view) {
|
||||
$events_loc.pres_mgmt.show_content__location_view = null;
|
||||
}
|
||||
|
||||
let event_session_id_random_li: Array<string>;
|
||||
$: if ($lq__event_session_obj_li) {
|
||||
if (log_lvl) {
|
||||
console.log('Session list updated? Pulling out the event_session_id_random values.');
|
||||
}
|
||||
|
||||
event_session_id_random_li = [];
|
||||
|
||||
// We need to loop through the array of objects and get the event_session_id_random from each object a new list of event_session_id_randoms. Then we can use this list to get the full objects from the database.
|
||||
let tmp_li = []; // This is to prevent the array from constantly updating and triggering the liveQuery.
|
||||
if ($lq__event_session_obj_li) {
|
||||
for (let i = 0; i < $lq__event_session_obj_li.length; i++) {
|
||||
tmp_li.push($lq__event_session_obj_li[i].event_session_id_random);
|
||||
}
|
||||
}
|
||||
event_session_id_random_li = tmp_li;
|
||||
|
||||
// event_session_id_random_li = $events_slct.event_session_obj_li.map(session_obj => session_obj.event_session_id_random);
|
||||
|
||||
// Finally done with the search.
|
||||
$events_sess.pres_mgmt.status_qry__search = 'done';
|
||||
// $events_sess.pres_mgmt.status_rpt[$events_sess.pres_mgmt.show_report] = 'done';
|
||||
|
||||
if (log_lvl > 1) {
|
||||
console.log(`TEST SEARCH - event_session_id_random_li:`, event_session_id_random_li);
|
||||
// console.log(`TEST SEARCH - search live query: ${$lq_kv__event_session_obj_li}`);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Functions and Logic
|
||||
onMount(() => {
|
||||
console.log('Events Location [slug]: +page.svelte');
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<svelte:head>
|
||||
<title>
|
||||
Location: {ae_util.shorten_string({string: $lq__event_location_obj?.name ?? 'Loading...', max_length: 12})} ({$lq__event_location_obj?.event_location_id ?? ''}) - Pres Mgmt - {$events_loc?.title}
|
||||
</title>
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<section
|
||||
class="ae_events_pres_mgmt_event_location
|
||||
md:container h-full mx-auto flex flex-col gap-1 py-1 px-2 pb-16"
|
||||
>
|
||||
|
||||
<Location_page_menu
|
||||
data={data}
|
||||
event_location_id={$lq__event_location_obj?.event_location_id}
|
||||
lq__event_location_obj={lq__event_location_obj}
|
||||
/>
|
||||
|
||||
{#if !$lq__event_location_obj}
|
||||
|
||||
<div>
|
||||
<span class="fas fa-spinner fa-spin m-1"></span>
|
||||
<span>Loading location information...</span>
|
||||
</div>
|
||||
|
||||
{:else if $lq__event_location_obj?.enable || $ae_loc.trusted_access}
|
||||
|
||||
<h2 class="h2 text-center rounded-md p-2 bg-gray-300">
|
||||
{@html $lq__event_location_obj?.name ?? ae_snip.html__not_set}
|
||||
</h2>
|
||||
|
||||
{#if !$events_loc.pres_mgmt.show_content__location_view || $events_loc.pres_mgmt.show_content__location_view == 'default'}
|
||||
|
||||
<!-- General information about the location -->
|
||||
<Location_view
|
||||
event_location_id={$lq__event_location_obj?.event_location_id}
|
||||
lq__event_obj={lq__event_obj}
|
||||
lq__event_location_obj={lq__event_location_obj}
|
||||
lq__event_session_obj_li={lq__event_session_obj_li}
|
||||
/>
|
||||
|
||||
<!-- Sessions in the location -->
|
||||
<section>
|
||||
|
||||
{#if $lq__event_session_obj_li && $lq__event_session_obj_li?.length > 0 && event_session_id_random_li && event_session_id_random_li?.length > 0}
|
||||
<Comp_event_session_obj_li
|
||||
lq__event_obj={lq__event_obj}
|
||||
link_to_type={'event_location'}
|
||||
link_to_id={$events_slct.event_location_id}
|
||||
event_session_id_random_li={event_session_id_random_li}
|
||||
lq__event_session_obj_li={lq__event_session_obj_li}
|
||||
hide__session_poc={$events_loc.pres_mgmt.hide__session_poc}
|
||||
hide__session_location={true}
|
||||
show__session_files={$events_loc.pres_mgmt.show_content__session_files}
|
||||
show__session_presentations={$events_loc.pres_mgmt.show_content__session_presentations}
|
||||
>
|
||||
</Comp_event_session_obj_li>
|
||||
{:else if $lq__event_session_obj_li && $lq__event_session_obj_li?.length == 0}
|
||||
<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>
|
||||
No Sessions Found
|
||||
</h2>
|
||||
<p>
|
||||
There are no sessions found for this location.
|
||||
</p>
|
||||
</div>
|
||||
{:else if event_session_id_random_li?.length > 0}
|
||||
<div class="text-center">
|
||||
<span class="fas fa-spinner fa-spin m-1"></span>
|
||||
<span>Loading session list...</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</section>
|
||||
|
||||
{:else if $events_loc.pres_mgmt.show_content__location_view == 'manage_files' && $ae_loc.trusted_access}
|
||||
<div>
|
||||
<h3 class="h5">
|
||||
<span class="fas fa-upload m-1"></span>
|
||||
Manage and Upload Location Files:
|
||||
</h3>
|
||||
|
||||
<Comp_event_files_upload
|
||||
link_to_type="event_location"
|
||||
link_to_id={$lq__event_location_obj.event_location_id}
|
||||
/>
|
||||
|
||||
<div class="overflow-x-auto w-max max-w-full">
|
||||
<Element_manage_event_file_li_wrap
|
||||
link_to_type={'event_location'}
|
||||
link_to_id={$lq__event_location_obj?.event_location_id_random}
|
||||
allow_basic={$events_loc.auth__kv.location[$lq__event_location_obj.event_location_id_random] || $events_loc.auth__kv.location[$lq__event_location_obj?.event_location_id_random]}
|
||||
allow_moderator={$events_loc.auth__kv.location[$lq__event_location_obj.event_location_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>
|
||||
Location Disabled
|
||||
</h2>
|
||||
<p>
|
||||
This location 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>
|
||||
111
src/routes/events_pres_mgmt/location/[slug]/+page.ts
Normal file
111
src/routes/events_pres_mgmt/location/[slug]/+page.ts
Normal file
@@ -0,0 +1,111 @@
|
||||
/** @type {import('./$types').PageLoad} */
|
||||
import { error } from '@sveltejs/kit';
|
||||
console.log(`ae_events_pres_mgmt_event [slug] +page.ts start`);
|
||||
|
||||
import { browser } from '$app/environment';
|
||||
import { events_func } from '$lib/ae_events_functions';
|
||||
|
||||
export async function load({ params, parent }) { // route
|
||||
let log_lvl = 0;
|
||||
|
||||
let data = await parent();
|
||||
// console.log(`ae events_pres_mgmt location [slug] +page.ts data:`, data);
|
||||
|
||||
let account_id = data.account_id;
|
||||
let ae_acct = data[account_id];
|
||||
// console.log(`ae_acct = `, ae_acct);
|
||||
|
||||
// if (!account_id) {
|
||||
// console.log(`ae events_pres_mgmt location [slug] +page.ts: The account_id was not found in the data!!!`);
|
||||
// return false;
|
||||
// }
|
||||
|
||||
data.ae_events_pres_mgmt_event_slug_page_ts = true;
|
||||
|
||||
let event_location_id = params.slug;
|
||||
if (!event_location_id) {
|
||||
console.log(`ae events_pres_mgmt location [slug] +page.ts: The event_location_id was not found in the params!!!`);
|
||||
error(404, {
|
||||
message: 'Location not found'
|
||||
});
|
||||
}
|
||||
ae_acct.slct.event_location_id = event_location_id;
|
||||
|
||||
if (browser) {
|
||||
// Load event location object
|
||||
let load_event_location_obj = events_func.load_ae_obj_id__event_location({
|
||||
api_cfg: ae_acct.api,
|
||||
event_location_id: event_location_id,
|
||||
try_cache: true
|
||||
});
|
||||
|
||||
ae_acct.slct.event_location_obj = load_event_location_obj;
|
||||
|
||||
// Load event sessions for the location
|
||||
let load_event_session_obj_li = events_func.load_ae_obj_li__event_session({
|
||||
api_cfg: ae_acct.api,
|
||||
for_obj_type: 'event_location',
|
||||
for_obj_id: event_location_id,
|
||||
params: {qry__enabled: 'all', qry__limit: 50},
|
||||
try_cache: true,
|
||||
log_lvl: 1
|
||||
})
|
||||
.then((event_session_obj_li) => {
|
||||
if (log_lvl) {
|
||||
console.log(`event_session_obj_li = `, event_session_obj_li);
|
||||
}
|
||||
for (let index = 0; index < event_session_obj_li.length; index++) {
|
||||
let event_session_obj = event_session_obj_li[index];
|
||||
let event_session_id = event_session_obj.event_session_id_random;
|
||||
|
||||
let load_event_presentation_obj_li = events_func.load_ae_obj_li__event_presentation({
|
||||
api_cfg: ae_acct.api,
|
||||
for_obj_type: 'event_session',
|
||||
for_obj_id: event_session_id,
|
||||
params: {qry__enabled: 'all', qry__limit: 15},
|
||||
try_cache: true
|
||||
});
|
||||
if (log_lvl) {
|
||||
console.log(`load_event_presentation_obj_li = `, load_event_presentation_obj_li);
|
||||
}
|
||||
event_session_obj_li[index].event_presentation_li = load_event_presentation_obj_li;
|
||||
}
|
||||
|
||||
return event_session_obj_li;
|
||||
});
|
||||
if (log_lvl) {
|
||||
console.log(`load_event_session_obj_li = `, load_event_session_obj_li);
|
||||
}
|
||||
ae_acct.slct.event_session_obj_li = load_event_session_obj_li;
|
||||
|
||||
// Load event files for the location
|
||||
let ae_params = {
|
||||
qry__enabled: 'all',
|
||||
qry__hidden: 'all',
|
||||
qry__limit: 50
|
||||
}
|
||||
|
||||
let load_event_file_obj_li = await events_func.handle_load_ae_obj_li__event_file({
|
||||
api_cfg: ae_acct.api,
|
||||
for_obj_type: 'event_location',
|
||||
for_obj_id: event_location_id,
|
||||
params: ae_params,
|
||||
try_cache: true
|
||||
})
|
||||
.then((event_file_obj_li) => {
|
||||
if (log_lvl) {
|
||||
console.log(`event_file_obj_li = `, event_file_obj_li);
|
||||
}
|
||||
return event_file_obj_li;
|
||||
});
|
||||
if (log_lvl) {
|
||||
console.log(`load_event_file_obj_li = `, load_event_file_obj_li);
|
||||
}
|
||||
ae_acct.slct.event_file_obj_li = load_event_file_obj_li;
|
||||
}
|
||||
|
||||
// WARNING: Precaution against shared data between sites and sessions.
|
||||
data[account_id] = ae_acct;
|
||||
|
||||
return data;
|
||||
}
|
||||
Reference in New Issue
Block a user