Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Event presenter now has a slug directory

Browse Source
This commit is contained in:
Scott Idem
2024-03-03 12:51:14 -05:00
parent 64589ec11c
commit 7051cb92d5
3 changed files with 471 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/events_speakers/10_edit_modal__event_presenter_obj.svelte
View File

@@ -41,8 +41,8 @@ onMount(() => {
console.log('** Component Mounted: ** View Modal - Presenter Obj');
if ($slct.event_presenter_id && $ae_loc.href_url) {
// $ae_loc.mod.events.presenter_link = `${$ae_loc.href_url}/load?ae_id=${$slct.event_presenter_id}`;
$ae_loc.mod.events.presenter_link = `${$ae_loc.site_domain}/events_speakers/load?ae_id=${$slct.event_presenter_id}`;
// $ae_loc.mod.events.presenter_link = `${$ae_loc.href_url}/load?event_presenter_id=${$slct.event_presenter_id}`;
$ae_loc.mod.events.presenter_link = `${$ae_loc.site_domain}/events_speakers/load?event_presenter_id=${$slct.event_presenter_id}`;
console.log('Speaker link:', $ae_loc.mod.events.presenter_link);
}
});

137
src/routes/events_speakers/[slug]/+layout.ts Normal file
View File

@@ -0,0 +1,137 @@
/** @type {import('./$types').LayoutLoad} */
import { get } from 'svelte/store';
import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import type { key_val } from '$lib/ae_stores';
export async function load({ params, url }) { // route
// console.log(`Svelte Events Speakers layout.ts data = params:`, params);
// console.log(`Svelte Events Speakers layout.ts data = route:`, route);
// console.log(`Svelte Events Speakers layout.ts data = url:`, url);
let ae_loc_tmp = get(ae_loc);
console.log(`ae_loc = `, ae_loc_tmp);
let ds_code_li: null|key_val = ae_loc_tmp.ds;
console.log(`ae_ ds_code_li = `, ds_code_li);
let ds_code: null|string = null;
let ds_type: null|string = null;
let data_struct = {
ae_init: ae_loc_tmp,
params: params,
sections: [
{ slug: 'new', title: 'New Event Presenter' },
{ slug: 'manage', title: 'Manage' },
{ slug: 'test', title: 'Test' },
],
url: url,
};
let loading_results = null;
ds_code = 'hub__page__events__create_info';
ds_type = 'text';
// loading_results = await handle_get_data_store_obj_w_code({ code: ds_code })
// .then( function (ds_hub_page_events_create_info_results) {
// if (ds_hub_page_events_create_info_results) {
// console.log(`ae_ hub__page__events__create_info = `, ds_hub_page_events_create_info_results);
// // let ae_loc_tmp = get(ae_loc);
// ds_code_li[ds_code] = ds_hub_page_events_create_info_results;
// // ae_loc.set(ae_loc_tmp);
// // console.log(`ae_loc = `, get(ae_loc));
// }
// })
// .finally(function () {
// console.log(`ae_ ds_code_li = `, ds_code_li);
// ae_loc_tmp = {
// ...ae_loc_tmp,
// 'ds': ds_code_li,
// }
// console.log(`ae_loc_tmp = `, ae_loc_tmp);
// ae_loc.set(ae_loc_tmp);
// console.log(`ae_loc = `, get(ae_loc));
// });
// loading_results = await api.get_data_store_obj_w_code({
// api_cfg: get(ae_api),
// data_store_code: ds_code,
// data_type: ds_type,
// log_lvl: 0
// })
// .then( function (ds_results) {
// if (ds_results) {
// console.log(`ae_ Data Store ${ds_code} = `, ds_results);
// // let ae_loc_tmp = get(ae_loc);
// ds_code_li[ds_code] = ds_results.text;
// // ae_loc.set(ae_loc_tmp);
// // console.log(`ae_loc = `, get(ae_loc));
// }
// })
// .finally(function () {
// console.log(`ae_ ds_code_li = `, ds_code_li);
// ae_loc_tmp = {
// ...ae_loc_tmp,
// 'ds': ds_code_li,
// }
// console.log(`ae_loc_tmp = `, ae_loc_tmp);
// ae_loc.set(ae_loc_tmp);
// console.log(`ae_loc = `, get(ae_loc));
// });
return data_struct;
}
// async function handle_get_data_store_obj_w_code({ code=null, data_type='text' }) {
// console.log(`*** handle_get_data_store_obj_w_code() *** code=${code}`);
// if (!code) {
// console.log('No code provided.');
// return;
// }
// let data_store_obj_get_promise = api.get_data_store_obj_w_code({
// api_cfg: get(ae_api),
// data_store_code: code,
// data_type: data_type,
// log_lvl: 0
// })
// .then(function (get_data_store_result) {
// let return_this = null;
// if (get_data_store_result) {
// if (data_type == 'text') {
// // console.log(get_data_store_result.text);
// return_this = get_data_store_result.text;
// } else if (data_type == 'json') {
// // console.log(get_data_store_result.json);
// return_this = get_data_store_result.json;
// }
// } else {
// console.log('No results returned.');
// return_this = null;
// }
// return return_this;
// })
// .catch(function (error) {
// console.log('No results returned or failed.', error);
// });
// return data_store_obj_get_promise;
// }

332
src/routes/events_speakers/[slug]/+page.svelte Normal file
View File

@@ -0,0 +1,332 @@
<script lang="ts">
export let data;
console.log(`ae_ Svelte Events Speakers [slug] +page data:`, data);
import { onMount } from 'svelte';
// https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/Modal/types.ts
// To retrieve the store, getModalStore must be invoked at the top level of your component!
import { getDrawerStore, getModalStore } from '@skeletonlabs/skeleton';
import type {
DrawerSettings,
ModalSettings,
ModalComponent,
ModalStore
} from '@skeletonlabs/skeleton';
const modalStore = getModalStore();
import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils';
import type { key_val } from '$lib/ae_stores';
import Edit_modal_event_presenter from '../10_edit_modal__event_presenter_obj.svelte';
// Editing
const modalComponentEditEventPresenterObj: ModalComponent = { ref: Edit_modal_event_presenter, props: {container_class_li: 'w-full p-4 space-y-4 card ae_modal_scrollfix'} };
const modal_edit__event_presenter: ModalSettings = {
type: 'component',
component: modalComponentEditEventPresenterObj,
title: 'Edit Speaker Submission',
position: '', // default is "items-center"
response: (r: boolean | undefined) => handle_modal_close(r)
};
// This function waits for the response from one of the modals. Do stuff when the modal is closed.
function handle_modal_close(response: boolean | undefined) {
console.log('Modal closed. Response:', response);
ae_util.handle_url_and_message('event_presenter_id', null);
// We want to keep these values in case they want to re-open the modal. Do NOT clear.
// $slct.event_presenter_id = null;
// $slct.event_presenter_obj = null;
}
if ($slct_trigger == 'msg_parent' && $slct.event_id) {
console.log(`Message parent with event_id ${$slct.event_id}`);
$slct_trigger = null
let message = {'event_id': $slct.event_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
$ae_loc.hostname = data.url.hostname;
$ae_loc.site_domain = data.url.origin;
// We don't want the edit or view to show up by default. Maybe if we see an object ID param in the URL, we can show a modal.
$ae_loc.mod.events.show_edit__event_presenter_obj = false;
$ae_loc.mod.events.show_view__event_presenter_obj = false;
let ae_event_presenter_get_promise: Promise<any>;
onMount(() => {
console.log('Events Presenters [New/Edit]: +page.svelte');
// console.log(`$ae_loc = `, $ae_loc);
let url = window.location.href;
// console.log(url);
$ae_loc.href_url = url;
// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
ae_util.handle_url_and_message('event_presenter_id', $slct.event_presenter_id);
if ($slct.event_presenter_id) {
console.log(`Got an ID. Let's show the modal!`);
modalStore.trigger(modal_edit__event_presenter);
} else {
console.log(`No ID. Nothing to show.`);
}
});
// console.log(`$ae_loc = `, $ae_loc);
// $ae_loc.href_url = url;
// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
// Load the Event Obj with ID based on the URL param.
$slct.event_id = data.url.searchParams.get('event_id');
$slct_trigger = 'load__event_obj';
$: if ($slct_trigger == 'load__event_obj' && $slct.event_id) {
console.log('Selected Event ID:', $slct.event_id);
$slct_trigger = null;
handle_load_ae_obj_id__event({event_id: $slct.event_id, try_cache: false});
}
let ae_event_obj_get_promise;
async function handle_load_ae_obj_id__event({event_id, try_cache=false}) {
console.log(`*** handle_load_ae_obj_id__event() *** event_id=${event_id}`);
let params = {};
// $ae_loc.hub.event_id_qry_status = 'loading';
ae_event_obj_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'event',
obj_id: event_id,
use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
params: params,
log_lvl: 0
})
.then(function (event_obj_get_result) {
if (event_obj_get_result) {
$slct.event_obj = event_obj_get_result;
console.log(`sponsorship object:`, $slct.event_obj);
}
// Auto show the selected sponsorship ID
// Is this pushState needed here?
// Set the URL param "event_id" to the current sponsorship ID.
// const url = new URL(location);
// url.searchParams.set('event_id', $slct.event_id);
// history.pushState({}, '', url);
// Is this postMessage needed here?
// let message = {'event_id': $slct.event_id};
// window.parent.postMessage(message, "*");
// modalStore.trigger(modal_view__event_obj);
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
return ae_event_obj_get_promise;
}
// Load the Event Presenter Obj with ID based on the URL param.
// $slct.event_presenter_id = data.url.searchParams.get('ae_id');
$slct.event_presenter_id = data.url.searchParams.get('event_presenter_id');
if ($slct.event_presenter_id) {
console.log('Selected Event Presenter ID:', $slct.event_presenter_id);
$slct_trigger = 'load__event_presenter';
// $ae_loc.mod.events.show_edit__event_presenter_obj = true;
// $slct_trigger = 'show_edit__event_presenter';
}
$: if ($slct_trigger == 'load__event_presenter' && $slct.event_presenter_id) {
console.log('Selected Event Presenter ID:', $slct.event_presenter_id);
$slct_trigger = null;
handle_load_ae_obj_id__event_presenter({event_presenter_id: $slct.event_presenter_id, try_cache: false});
// modalStore.trigger(modal_edit__event_presenter);
// $slct_trigger = 'show_edit__event_presenter';
}
async function handle_load_ae_obj_id__event_presenter({event_presenter_id, try_cache=false}) {
console.log(`*** handle_load_ae_obj_id__event_presenter() *** event_presenter_id=${event_presenter_id}`);
let params = {};
// $ae_loc.hub.event_presenter_id_qry_status = 'loading';
ae_event_presenter_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'event_presenter',
obj_id: event_presenter_id,
use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
params: params,
log_lvl: 0
})
.then(function (event_presenter_get_result) {
if (event_presenter_get_result) {
$slct.event_presenter_obj = event_presenter_get_result;
console.log(`sponsorship object:`, $slct.event_presenter);
}
// Auto show the selected sponsorship ID
// Is this pushState needed here?
// Set the URL param "event_presenter_id" to the current sponsorship ID.
// const url = new URL(location);
// url.searchParams.set('event_presenter_id', $slct.event_presenter_id);
// history.pushState({}, '', url);
// Is this postMessage needed here?
// let message = {'event_presenter_id': $slct.event_presenter_id};
// window.parent.postMessage(message, "*");
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
return ae_event_presenter_get_promise;
}
let testing = false;
// $: if ($slct_trigger == 'show_edit__event_presenter' && $ae_loc.mod.events.show_edit__event_presenter) {
$: if (testing) {
// && $ae_loc.mod.events.show_edit__event_presenter
// $: if ($slct_trigger == 'show_edit__event_presenter') {
console.log('Show Modal Edit');
$slct_trigger = null;
testing = false;
// $ae_trig.m_events__show_modal_edit = false;
// if ($slct.event_presenter_id) {
// let location = window.location.href;
// const url = new URL(location);
// url.searchParams.set('event_presenter_id', $slct.event_presenter_id);
// history.pushState({}, '', url);
// let message = {'event_presenter_id': $slct.event_presenter_id};
// window.parent.postMessage(message, "*");
// // console.log('Message sent to parent (iframe):', message);
// }
// modalStore.clear();
modalStore.trigger(modal_edit__event_presenter);
}
// KEEP and MOVE: This is the original function.
// The name should be something like "example_id".
function handle_url_and_message(name: string, value: null|string) {
console.log(`*** handle_url_and_message() *** name=${name} value=${value}`);
if (value) {
let location = window.location.href;
const url = new URL(location);
url.searchParams.set(name, value);
history.pushState({}, '', url);
let message = {name: value};
window.parent.postMessage(message, "*");
} else {
let location = window.location.href;
const url = new URL(location);
url.searchParams.delete(name);
history.pushState({}, '', url);
let message = {name: null};
window.parent.postMessage(message, "*");
}
// console.log('Message sent to parent (iframe):', message);
}
</script>
<section
class="container h-full mx-auto flex flex-col items-center space-y-4"
>
{#if $ae_loc.ds.hub__page__events__create_info_header}
{@html $ae_loc.ds.hub__page__events__create_info_header}
{:else}
<header>
<h1 class="h1">Information Goes Here</h1>
</header>
{/if}
<!-- <section class="btn btn-group"> -->
{#if $slct.event_presenter_id}
<button
class="btn variant-ghost-primary w-96"
on:click={() => {
ae_util.handle_url_and_message('event_presenter_id', $slct.event_presenter_id);
modalStore.trigger(modal_edit__event_presenter);
// $ae_loc.mod.events.show_edit__event_presenter_obj = true;
// $slct_trigger = 'load__event_presenter';
// $slct_trigger = 'show_edit__event_presenter';
// modalStore.trigger(modal_edit__event_presenter);
// $ae_trig.m_events__show_modal_edit = true;
}}
>
<span class="fas fa-edit mx-1"></span>
Edit Sponsorship {$slct.event_presenter_id}
</button>
{:else}
<button
class="btn variant-ghost-primary w-96"
on:click={() => {
ae_util.handle_url_and_message('event_presenter_id', null);
modalStore.trigger(modal_edit__event_presenter);
// $slct_trigger = 'load__event_presenter';
$slct_trigger = 'show_edit__event_presenter';
$ae_loc.mod.events.show_edit__event_presenter_obj = true;
// modalStore.trigger(modal_edit__event_presenter);
}}
>
<span class="fas fa-edit mx-1"></span>
Start Sponsor Submission Form
</button>
{/if}
<!-- </section> -->
{#if $ae_loc.ds.hub__page__events__create_info}
{@html $ae_loc.ds.hub__page__events__create_info}
{:else}
<section>
<div class="alert alert-info">
More information goes here.
</div>
</section>
{/if}
</section>