Sponsorships and Speakers are working and looking pretty well. Other general clean up.
This commit is contained in:
Scott Idem
@@ -43,6 +43,10 @@ body {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.ae_d_none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Allow content to scroll horizontal if too wide */
|
||||
.ae_h_scrollfix {
|
||||
max-width: 100%;
|
||||
@@ -61,4 +65,14 @@ body {
|
||||
|
||||
#appShell #shell-header.iframe {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* body[data-theme='wintry'] {
|
||||
background: none;
|
||||
background-image: none;
|
||||
} */
|
||||
|
||||
body[data-theme]:has(#page.iframe) {
|
||||
background: none;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import { localStorageStore } from '@skeletonlabs/skeleton'
|
||||
import { readable, writable } from 'svelte/store';
|
||||
import { get, readable, writable } from 'svelte/store';
|
||||
import type { get, Writable } from 'svelte/store';
|
||||
|
||||
|
||||
import { PUBLIC_TESTING, PUBLIC_AE_API_PROTOCOL, PUBLIC_AE_API_SERVER, PUBLIC_AE_API_BAK_SERVER, PUBLIC_AE_API_PORT, PUBLIC_AE_API_PATH, PUBLIC_AE_API_SECRET_KEY, PUBLIC_AE_API_CRUD_SUPER_KEY, PUBLIC_AE_NO_ACCOUNT_ID, PUBLIC_AE_NO_ACCOUNT_ID_TOKEN, PUBLIC_AE_ACCOUNT_ID, PUBLIC_AE_EVENT_ID, PUBLIC_AE_SPONSORSHIP_CFG_ID } from '$env/static/public';
|
||||
console.log(`Aether Config - TESTING:`, PUBLIC_TESTING);
|
||||
console.log(`AE Stores - PUBLIC_TESTING:`, PUBLIC_TESTING);
|
||||
|
||||
const api_base_url = `${PUBLIC_AE_API_PROTOCOL}://${PUBLIC_AE_API_SERVER}:${PUBLIC_AE_API_PORT}${PUBLIC_AE_API_PATH}`;
|
||||
const api_base_url_bak = `${PUBLIC_AE_API_PROTOCOL}://${PUBLIC_AE_API_BAK_SERVER}:${PUBLIC_AE_API_PORT}${PUBLIC_AE_API_PATH}`;
|
||||
@@ -19,28 +19,24 @@ const ae_no_account_id_token = PUBLIC_AE_NO_ACCOUNT_ID_TOKEN;
|
||||
const ae_event_id = PUBLIC_AE_EVENT_ID;
|
||||
const ae_sponsorship_cfg_id = PUBLIC_AE_SPONSORSHIP_CFG_ID;
|
||||
|
||||
// import { api } from '$lib/api';
|
||||
// console.log(`Aether Config - API:`, api);
|
||||
|
||||
// import { getStores, navigating, page, updated } from '$app/stores';
|
||||
// import { assets, base, resolveRoute } from '$app/paths';
|
||||
// console.log(page.path); // Everything after the domian name
|
||||
|
||||
|
||||
// const hostname = base;
|
||||
|
||||
// console.log(import.meta.env.MODE);
|
||||
// console.log(import.meta.env.BASE_URL);
|
||||
|
||||
type key_val = {
|
||||
|
||||
// Export the key_val type for use in other files.
|
||||
export type key_val = {
|
||||
[key: string]: any; // variable key
|
||||
// name: string;
|
||||
};
|
||||
|
||||
// export type key_val = key_val;
|
||||
|
||||
// *** BEGIN *** Longer-term app data. This should be stored to local storage.
|
||||
export let ae_app_local_data_struct: key_val = {
|
||||
'ver': '2024-02-22_17',
|
||||
'ver': '2024-02-27_13',
|
||||
'name': 'Aether App Template',
|
||||
'theme': 'light',
|
||||
|
||||
@@ -60,10 +56,25 @@ export let ae_app_local_data_struct: key_val = {
|
||||
|
||||
'ds': {},
|
||||
'hub': {
|
||||
'ds': {},
|
||||
'show_xyz': 'abc',
|
||||
},
|
||||
'mod': { // module
|
||||
'events': {},
|
||||
'mod': {
|
||||
'archives': {},
|
||||
|
||||
'events': {
|
||||
// Badge Printing
|
||||
|
||||
// Lead Retrievals
|
||||
|
||||
// Presentation Management
|
||||
|
||||
// other
|
||||
},
|
||||
|
||||
'journals': {},
|
||||
|
||||
'posts': {},
|
||||
|
||||
'sponsorships': {
|
||||
'cfg_id': ae_sponsorship_cfg_id,
|
||||
|
||||
@@ -75,16 +86,18 @@ export let ae_app_local_data_struct: key_val = {
|
||||
show_view__sponsorship_obj: false,
|
||||
disable_submit__sponsorship_obj: false,
|
||||
},
|
||||
|
||||
'testing': {},
|
||||
},
|
||||
}
|
||||
console.log(`Aether Config - App Local Storage Data:`, ae_app_local_data_struct);
|
||||
console.log(`AE Stores - App Local Storage Data:`, ae_app_local_data_struct);
|
||||
|
||||
// This works, but does not uses local storage:
|
||||
// export let ae_loc = writable(ae_app_local_data_struct);
|
||||
|
||||
// This works and uses local storage:
|
||||
export let ae_loc: Writable<key_val> = localStorageStore('ae_loc', ae_app_local_data_struct);
|
||||
console.log(`AE Stores - App Local Storage Data:`, get(ae_loc));
|
||||
|
||||
|
||||
// This does not work yet...? Don't use.
|
||||
@@ -94,13 +107,32 @@ export let ae_loc: Writable<key_val> = localStorageStore('ae_loc', ae_app_local_
|
||||
|
||||
// *** BEGIN *** Temporary app data. This should be stored to session storage.
|
||||
export let ae_app_session_data_struct: key_val = {
|
||||
'ver': '2024-02-22_17',
|
||||
'ver': '2024-02-27_13',
|
||||
// 'name': 'Aether App Template',
|
||||
// 'theme': 'light',
|
||||
// 'account_id': ae_account_id,
|
||||
// 'obj': {},
|
||||
}
|
||||
console.log(`Aether Config - App Session Storage Data:`, ae_app_session_data_struct);
|
||||
'ds': {},
|
||||
'hub': {
|
||||
'show_xyz': null,
|
||||
},
|
||||
'mod': {
|
||||
'archives': {},
|
||||
'events': {
|
||||
// Badge Printing
|
||||
|
||||
// Lead Retrievals
|
||||
|
||||
// Presentation Management
|
||||
|
||||
// other
|
||||
},
|
||||
'journals': {},
|
||||
'posts': {},
|
||||
'sponsorships': {},
|
||||
'testing': {},
|
||||
},
|
||||
};
|
||||
console.log(`AE Stores - App Session Storage Data:`, ae_app_session_data_struct);
|
||||
export let ae_sess = writable(ae_app_session_data_struct);
|
||||
|
||||
|
||||
@@ -114,7 +146,7 @@ export let ae_api_data_struct: key_val = {
|
||||
'api_crud_super_key': api_crud_super_key, // 'YOUR_SUPER_KEY' 'zp5PtX4zUsI'
|
||||
'headers': {},
|
||||
'account_id': ae_account_id,
|
||||
}
|
||||
};
|
||||
|
||||
let ae_api_headers: key_val = {};
|
||||
ae_api_headers['Access-Control-Allow-Origin'] = '*';
|
||||
@@ -132,40 +164,53 @@ if (ae_no_account_id) {
|
||||
}
|
||||
ae_api_data_struct['headers'] = ae_api_headers;
|
||||
|
||||
console.log(`Aether Config - API Data:`, ae_api_data_struct);
|
||||
console.log(`AE Stores - API Data:`, ae_api_data_struct);
|
||||
export let ae_api = writable(ae_api_data_struct);
|
||||
|
||||
|
||||
/* *** BEGIN *** Initialize slct_trigger and slct variables */
|
||||
// Updated 2024-02-15
|
||||
/* *** BEGIN *** Initialize slct_trigger and slct variables. The slct variable can be stored with local storage. */
|
||||
// Updated 2024-02-27
|
||||
export let slct_trigger: any = writable(null);
|
||||
console.log(`Aether Config - Selected Trigger:`, slct_trigger);
|
||||
// console.log(`AE Stores - Selected Trigger:`, slct_trigger);
|
||||
|
||||
let slct_obj_template: key_val = {
|
||||
'account_id': ae_account_id,
|
||||
'account_obj': {},
|
||||
'event_id': null,
|
||||
'event_obj': {},
|
||||
'event_obj_li': [],
|
||||
'event_exhibit_id': null,
|
||||
'event_exhibit_obj': {},
|
||||
'event_exhibit_obj_li': [],
|
||||
'event_presentation_id': null,
|
||||
'event_presentation_obj': {},
|
||||
'event_presentation_obj_li': [],
|
||||
'event_presenter_id': null,
|
||||
'event_presenter_obj': {},
|
||||
'event_presenter_obj_li': [],
|
||||
'event_session_id': null,
|
||||
'event_session_obj': {},
|
||||
'event_session_obj_li': [],
|
||||
'sponsorship_id': null,
|
||||
'sponsorship_obj': {},
|
||||
'sponsorship_obj_li': [],
|
||||
'sponsorship_cfg_id': ae_sponsorship_cfg_id,
|
||||
'sponsorship_cfg_obj': {},
|
||||
'sponsorship_cfg_obj_li': [],
|
||||
'post_id': null,
|
||||
'post_obj': {},
|
||||
'post_obj_li': [],
|
||||
'post_comment_id': null,
|
||||
'post_comment_obj': {},
|
||||
'post_comment_obj_li': [] };
|
||||
console.log(`Aether Config - Selected Objects:`, slct_obj_template);
|
||||
export let slct = writable(slct_obj_template);
|
||||
'post_comment_obj_li': []
|
||||
};
|
||||
// console.log(`AE Stores - Selected Objects:`, slct_obj_template);
|
||||
|
||||
// This works, but does not uses local storage:
|
||||
// export let slct = writable(slct_obj_template);
|
||||
|
||||
// This works and uses local storage:
|
||||
export let slct: Writable<key_val> = localStorageStore('ae_slct', slct_obj_template);
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import '../app.postcss';
|
||||
|
||||
import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
|
||||
@@ -44,16 +45,10 @@ import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floati
|
||||
import { storePopup } from '@skeletonlabs/skeleton';
|
||||
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
|
||||
|
||||
// import { TESTING } from '$env/static/private';
|
||||
// console.log(`Aether Config - TESTING:`, TESTING);
|
||||
|
||||
type key_val = {
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
import { api } from '$lib/api';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
||||
// console.log(api);
|
||||
import type { key_val } from '$lib/ae_stores';
|
||||
console.log($ae_loc, $ae_sess, $ae_api);
|
||||
|
||||
|
||||
@@ -63,6 +58,18 @@ export let data;
|
||||
console.log(`ae_ Svelte +Layout page data:`, data);
|
||||
|
||||
|
||||
onMount(() => {
|
||||
console.log('Root: +layout.svelte');
|
||||
if ($ae_loc.iframe) {
|
||||
console.log('Use iframe layout!');
|
||||
|
||||
document.getElementsByTagName('html')[0].classList.add('iframe');
|
||||
document.getElementsByTagName('html')[0].classList.remove('dark');
|
||||
document.getElementsByTagName('html')[0].classList.remove('light');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// $ae_loc = data;
|
||||
|
||||
// const ae_loc_test_store: Writable<string> = localStorageStore('ae_loc_test', {'test': 'This is a test'});
|
||||
@@ -134,7 +141,7 @@ async function handle_get_data_store_obj_w_code({ code=null, data_type='text', t
|
||||
}
|
||||
|
||||
$slct_trigger = 'set_access_code_li';
|
||||
$: if ($slct_trigger == 'set_access_code_li' && $ae_loc.ds['hub__page__access_code_li_json']) {
|
||||
$: if ($slct_trigger == 'set_access_code_li' && !$ae_loc.ds['hub__page__access_code_li_json']) {
|
||||
console.log(`$ae_loc.ds['hub__page__access_code_li_json'] = `, $ae_loc.ds['hub__page__access_code_li_json']);
|
||||
$slct_trigger = null; // Reset the trigger to prevent loops
|
||||
|
||||
@@ -218,6 +225,7 @@ $: if ($slct_trigger == 'set_access_code_li' && $ae_loc.ds['hub__page__access_co
|
||||
|
||||
<!-- App Shell -->
|
||||
<AppShell
|
||||
regionPage={($ae_loc.iframe ? 'iframe' : '')}
|
||||
slotHeader={($ae_loc.iframe ? 'iframe' : '')}
|
||||
slotFooter={($ae_loc.iframe ? 'iframe' : '')}
|
||||
>
|
||||
|
||||
@@ -2,13 +2,9 @@
|
||||
|
||||
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';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
type key_val = {
|
||||
[key: string]: any; // variable key
|
||||
// name: string;
|
||||
};
|
||||
|
||||
|
||||
async function handle_load_ae_obj_id__site_domain({fqdn, try_cache=false}) {
|
||||
console.log(`*** handle_load_ae_obj_id__site_domain() *** fqdn=${fqdn}`);
|
||||
@@ -47,7 +43,7 @@ async function handle_load_ae_obj_id__site_domain({fqdn, try_cache=false}) {
|
||||
return ae_site_domain_obj_get_promise;
|
||||
}
|
||||
|
||||
// let data_store_obj_get_promises: key_val = {};
|
||||
// let ds_obj_get_promises: key_val = {};
|
||||
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}`);
|
||||
|
||||
@@ -130,7 +126,7 @@ export async function load({ params, url }) { // route
|
||||
|
||||
.then(function (site_domain_results) {
|
||||
if (site_domain_results) {
|
||||
console.log(`ae_ site_domain_results = `, site_domain_results);
|
||||
// console.log(`ae_ site_domain_results = `, site_domain_results);
|
||||
|
||||
let ae_api_tmp = get(ae_api);
|
||||
|
||||
@@ -165,7 +161,7 @@ export async function load({ params, url }) { // route
|
||||
await handle_get_data_store_obj_w_code({code: ds_code, data_type: 'json'})
|
||||
.then(function (access_code_li_json_results) {
|
||||
if (access_code_li_json_results) {
|
||||
console.log(`ae_ access_code_li_json_results = `, access_code_li_json_results);
|
||||
// console.log(`ae_ access_code_li_json_results = `, access_code_li_json_results);
|
||||
|
||||
// ae_loc_tmp = get(ae_loc);
|
||||
ae_loc_tmp = {
|
||||
@@ -214,7 +210,7 @@ export async function load({ params, url }) { // route
|
||||
await handle_get_data_store_obj_w_code({code: ds_code})
|
||||
.then(function (ds_hub_site_footer_results) {
|
||||
if (ds_hub_site_footer_results) {
|
||||
console.log(`ae_ hub__site__appshell_footer = `, ds_hub_site_footer_results);
|
||||
// console.log(`ae_ hub__site__appshell_footer = `, ds_hub_site_footer_results);
|
||||
// let ae_loc_tmp = get(ae_loc);
|
||||
|
||||
ds_code_li[ds_code] = ds_hub_site_footer_results;
|
||||
@@ -251,7 +247,7 @@ export async function load({ params, url }) { // route
|
||||
await handle_get_data_store_obj_w_code({code: ds_code})
|
||||
.then(function (ds_code_results) {
|
||||
if (ds_code_results) {
|
||||
console.log(`ae_ hub__page__appshell_header_lead = `, ds_code_results);
|
||||
// console.log(`ae_ hub__page__appshell_header_lead = `, ds_code_results);
|
||||
// let ae_loc_tmp = get(ae_loc);
|
||||
|
||||
ds_code_li[ds_code] = ds_code_results;
|
||||
@@ -269,7 +265,7 @@ export async function load({ params, url }) { // route
|
||||
await handle_get_data_store_obj_w_code({code: ds_code})
|
||||
.then(function (ds_code_results) {
|
||||
if (ds_code_results) {
|
||||
console.log(`hub__page__appshell_header_trail = `, ds_code_results);
|
||||
// console.log(`hub__page__appshell_header_trail = `, ds_code_results);
|
||||
// let ae_loc_tmp = get(ae_loc);
|
||||
|
||||
ds_code_li[ds_code] = ds_code_results;
|
||||
@@ -311,8 +307,7 @@ export async function load({ params, url }) { // route
|
||||
console.log(`root layout.ts finally load...`);
|
||||
|
||||
return true;
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// let ae_loc_tmp = get(ae_loc);
|
||||
// let iframe = url.searchParams.get('iframe');
|
||||
|
||||
@@ -2,15 +2,12 @@
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
import { PUBLIC_TESTING } from '$env/static/public';
|
||||
console.log(`Aether Config - TESTING:`, PUBLIC_TESTING);
|
||||
console.log(`AE Config - +page.svelte PUBLIC_TESTING:`, PUBLIC_TESTING);
|
||||
|
||||
type key_val = {
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
import { api } from '$lib/api';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
||||
// console.log(api);
|
||||
import type { key_val } from '$lib/ae_stores';
|
||||
console.log($ae_loc, $ae_sess, $ae_api);
|
||||
|
||||
|
||||
@@ -19,50 +16,6 @@ onMount(() => {
|
||||
let url = window.location.href;
|
||||
console.log(url);
|
||||
});
|
||||
|
||||
|
||||
// let data_store_obj_get_promises: key_val = {};
|
||||
// let get_ds_hub_site_header_promise = handle_get_data_store_obj_w_code({code: 'hub_site_header'});
|
||||
// let get_ds_hub_site_footer_promise = handle_get_data_store_obj_w_code({code: 'hub_site_footer'});
|
||||
|
||||
// async function handle_get_data_store_obj_w_code({code}: {code: string}, data_type='text') {
|
||||
// console.log('*** handle_get_data_store_obj_w_code() ***');
|
||||
|
||||
// // let get_item_result = window.localStorage.getItem(code);
|
||||
// // localStorage.getItem(code);
|
||||
|
||||
// // if ($ae_loc_test_store) {
|
||||
// // $ae_loc.ds[code] = $ae_loc_test_store;
|
||||
// // } else {
|
||||
// // console.log('Get local storage item miss.');
|
||||
// // }
|
||||
|
||||
// data_store_obj_get_promises[code] = api.get_data_store_obj_w_code({
|
||||
// api_cfg: $ae_api,
|
||||
// data_store_code: code,
|
||||
// data_type: data_type,
|
||||
// log_lvl: 1
|
||||
// })
|
||||
// .then(function (get_data_store_result) {
|
||||
// if (get_data_store_result) {
|
||||
|
||||
// if (data_type == 'text') {
|
||||
// // console.log(get_data_store_result.text);
|
||||
// $ae_loc.ds[code] = get_data_store_result.text;
|
||||
// } else if (data_type == 'json') {
|
||||
// // console.log(get_data_store_result.json);
|
||||
// $ae_loc.ds[code] = get_data_store_result.json;
|
||||
// }
|
||||
|
||||
// // console.log(`Code: ${$ae_loc.ds[code]}`);
|
||||
// // console.log(`Code:`, $ae_loc.ds[code]);
|
||||
// }
|
||||
// })
|
||||
// .catch(function (error) {
|
||||
// console.log('No results returned or failed.', error);
|
||||
// });
|
||||
// }
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -51,7 +51,7 @@ export function load({ params, url }) { // route
|
||||
console.log(`slct = `, get(slct));
|
||||
|
||||
let slct_trigger_tmp = get(slct_trigger);
|
||||
slct_trigger_tmp = 'load__event_obj';
|
||||
slct_trigger_tmp = 'load__event_presenter_obj_li';
|
||||
slct_trigger.set(slct_trigger_tmp);
|
||||
console.log(`slct_trigger = `, get(slct_trigger));
|
||||
}
|
||||
|
||||
@@ -19,20 +19,79 @@ const modalStore = getModalStore();
|
||||
|
||||
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';
|
||||
|
||||
|
||||
import Edit_modal_event_presenter_obj from './10_edit_modal__event_presenter_obj.svelte';
|
||||
import List_event_presenter_obj from './10_list__event_presenter_obj.svelte';
|
||||
import View_modal_event_presenter_obj from './10_view_modal__event_presenter_obj.svelte';
|
||||
|
||||
type key_val = {
|
||||
[key: string]: any;
|
||||
|
||||
// Editing
|
||||
const modalComponentEditEventPresenterObj: ModalComponent = { ref: Edit_modal_event_presenter_obj, props: {container_class_li: 'w-full p-4 space-y-4 card', container_header_class_li: 'card-header text-2xl font-bold'} };
|
||||
|
||||
const modal_edit__event_presenter_obj: ModalSettings = {
|
||||
type: 'component',
|
||||
component: modalComponentEditEventPresenterObj,
|
||||
title: 'Edit Event Presenter',
|
||||
position: '', // default is "items-center"
|
||||
};
|
||||
|
||||
// console.log($slct, $slct_trigger);
|
||||
// if ($slct.event_id) {
|
||||
// // $slct_trigger = 'load__event_obj';
|
||||
// console.log(`$slct.event_id = `, $slct.event_id);
|
||||
// }
|
||||
// Viewing
|
||||
const modalComponentViewEventPresenterObj: ModalComponent = { ref: View_modal_event_presenter_obj, props: {container_class_li: 'w-full p-4 space-y-4 card', container_header_class_li: 'card-header text-2xl font-bold'} };
|
||||
|
||||
const modal_view__event_presenter_obj: ModalSettings = {
|
||||
type: 'component',
|
||||
component: modalComponentViewEventPresenterObj,
|
||||
title: 'View Event Presenter',
|
||||
position: '', // default is "items-center"
|
||||
|
||||
// Provide arbitrary classes to the backdrop and modal elements:
|
||||
// backdropClasses: '!bg-green-500',
|
||||
// modalClasses: 'w-modal-wide',
|
||||
// modalClasses: 'w-full',
|
||||
|
||||
// Provide arbitrary metadata to your modal instance:
|
||||
// meta: {
|
||||
// component_root_classes: 'w-full',
|
||||
// fn: do_something_function
|
||||
// },
|
||||
};
|
||||
|
||||
// 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 the view modal.
|
||||
$ae_loc.mod.events.show_edit__event_presenter_obj = false;
|
||||
$ae_loc.mod.sponsorships.show_view__event_presenter_obj = false;
|
||||
|
||||
$: if ($slct_trigger == 'show_edit__event_presenter_obj' && $ae_loc.mod.events.show_edit__event_presenter_obj) {
|
||||
console.log('Show Modal Edit');
|
||||
$slct_trigger = null;
|
||||
|
||||
let location = window.location.href;
|
||||
const url = new URL(location);
|
||||
url.searchParams.set('event_presenter_id', $slct.event_presenter_id);
|
||||
history.pushState({}, '', url);
|
||||
|
||||
// modalStore.clear();
|
||||
modalStore.trigger(modal_edit__event_presenter_obj);
|
||||
}
|
||||
$: if ($slct_trigger == 'show_view__event_presenter_obj' && $ae_loc.mod.events.show_view__event_presenter_obj) {
|
||||
console.log('Show Modal View');
|
||||
$slct_trigger = null;
|
||||
|
||||
let location = window.location.href;
|
||||
const url = new URL(location);
|
||||
url.searchParams.set('event_presenter_id', $slct.event_presenter_id);
|
||||
history.pushState({}, '', url);
|
||||
|
||||
// modalStore.clear();
|
||||
modalStore.trigger(modal_view__event_presenter_obj);
|
||||
}
|
||||
|
||||
|
||||
if ($slct.event_id && !$slct.event_presenter_obj_li) {
|
||||
console.log(`No presenter list was found for Event ID: ${$slct.event_id}`);
|
||||
|
||||
$slct_trigger = 'load__event_presenter_obj_li';
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
console.log('Events - Speakers: +page.svelte');
|
||||
@@ -47,8 +106,8 @@ onMount(() => {
|
||||
});
|
||||
|
||||
|
||||
$: if ($slct_trigger == 'load__event_obj' && $slct.event_id) {
|
||||
console.log('Selected Event ID:', $slct.event_id);
|
||||
$: if ($slct_trigger == 'load__event_presenter_obj_li' && $slct.event_id) {
|
||||
console.log(`load__event_presenter_obj_li event_id: ${$slct.event_id}`);
|
||||
|
||||
$slct_trigger = null;
|
||||
|
||||
@@ -113,6 +172,47 @@ async function handle_load_ae_obj_li__event_presenter({event_id, try_cache=true}
|
||||
return ae_event_presenter_obj_li_get_promise;
|
||||
}
|
||||
|
||||
|
||||
// Load the Event Presenter Obj with ID based on the URL param.
|
||||
$: if ($slct_trigger == 'load__event_presenter_obj' && $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});
|
||||
}
|
||||
|
||||
let ae_event_presenter_obj_get_promise: Promise<any>;
|
||||
|
||||
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_obj_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_obj_get_result) {
|
||||
if (event_presenter_obj_get_result) {
|
||||
$slct.event_presenter_obj = event_presenter_obj_get_result;
|
||||
console.log(`event presenter object:`, $slct.event_presenter_obj);
|
||||
}
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log('No results returned or failed.', error);
|
||||
});
|
||||
|
||||
return ae_event_presenter_obj_get_promise;
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,937 @@
|
||||
<script lang="ts">
|
||||
import type { SvelteComponent } from 'svelte';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
|
||||
// const dispatch = createEventDispatcher();
|
||||
|
||||
|
||||
// This works and uses local storage:
|
||||
// store_current_tab must be prefixed with $ to be reactive.
|
||||
import { clipboard, localStorageStore, ProgressRadial } from '@skeletonlabs/skeleton';
|
||||
import type { Writable } from 'svelte/store';
|
||||
const store_current_tab: Writable<string> = localStorageStore('store_current_tab', 'start');
|
||||
console.log(`store_current_tab:`, $store_current_tab);
|
||||
|
||||
|
||||
// This works, but does not uses local storage:
|
||||
// store_current_tab is not reactive and should not be prefixed with $.
|
||||
// let store_current_tab: string = 'start';
|
||||
// console.log(`store_current_tab:`, store_current_tab);
|
||||
|
||||
|
||||
// This does not work:
|
||||
// let tab_set = $store_current_tab;
|
||||
// let tab_set = store_current_tab;
|
||||
|
||||
// Stores
|
||||
import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
|
||||
|
||||
// Props
|
||||
/** Exposes parent props to this component. */
|
||||
export let parent: SvelteComponent;
|
||||
export let container_class_li = '';
|
||||
export let container_header_class_li = '';
|
||||
|
||||
const modalStore = getModalStore();
|
||||
|
||||
|
||||
import { ae_util } from '$lib/ae_utils';
|
||||
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';
|
||||
|
||||
|
||||
onMount(() => {
|
||||
console.log('** Component Mounted: ** View Modal - Sponsorship 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}`;
|
||||
console.log('Speaker link:', $ae_loc.mod.events.presenter_link);
|
||||
}
|
||||
});
|
||||
|
||||
// // Form Data
|
||||
// const formData = {
|
||||
// name: 'Jane Doe',
|
||||
// tel: '214-555-1234',
|
||||
// email: 'jdoe@email.com'
|
||||
// };
|
||||
|
||||
// const form_data = $slct.event_presenter_obj;
|
||||
|
||||
// We've created a custom submit function to pass the response and close the modal.
|
||||
// function onFormSubmit(): void {
|
||||
// if ($modalStore[0].response) $modalStore[0].response(formData);
|
||||
// modalStore.close();
|
||||
// }
|
||||
|
||||
// Base Classes
|
||||
const cBase = 'card p-4 shadow-xl space-y-4 ae_modal_scrollfix';
|
||||
// w-modal-wide
|
||||
// const cBase = 'bg-surface-100-800-token w-screen h-screen';
|
||||
// const cBase = 'card h-screen';
|
||||
// const cBase = 'card p-4 w-modal-wide h-screen shadow-xl space-y-4';
|
||||
|
||||
const cHeader = 'text-2xl font-bold';
|
||||
const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
|
||||
|
||||
|
||||
|
||||
$ae_loc.mod.events.disable_submit__event_presenter_obj = false;
|
||||
let placeholder_li: key_val = {
|
||||
file_logo_primary: '-- No File Selected --',
|
||||
file_logo_secondary: '-- No File Selected --',
|
||||
file_media_promo_video: '-- No File Selected --',
|
||||
};
|
||||
let ae_promises_init: key_val = {};
|
||||
let ae_promises: key_val = {};
|
||||
// let ae_promises.api_create__event_presenter_obj: Promise<any>;
|
||||
|
||||
if ($slct.event_presenter_id) {
|
||||
console.log(`Sponsorship ID selected: ${$slct.event_presenter_id}`);
|
||||
console.log(`Sponsorship object selected:`, $slct.event_presenter_obj);
|
||||
|
||||
// $slct_trigger = 'load__event_presenter_obj';
|
||||
|
||||
// $ae_loc.mod.events.presenter_link = `${$ae_loc.href_url}/load?ae_id=${$slct.event_presenter_id}`;
|
||||
// console.log('Sponsorship link:', $ae_loc.mod.events.presenter_link);
|
||||
} else {
|
||||
$slct.event_presenter_id = null;
|
||||
$slct.event_presenter_obj = {
|
||||
sponsorship_cfg_id_random: $ae_loc.mod.events.sponsorship_cfg_id,
|
||||
|
||||
name: null,
|
||||
description: null,
|
||||
|
||||
poc_person_id: null,
|
||||
|
||||
logo_li_json: null,
|
||||
media_li_json: null,
|
||||
|
||||
social_li_json: null,
|
||||
|
||||
guest_li_json: null,
|
||||
|
||||
level_num: null,
|
||||
level_str: null,
|
||||
amount: null,
|
||||
paid: null,
|
||||
enable: null,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
$: if ($slct.event_presenter_obj) {
|
||||
// Logo related
|
||||
if ($slct.event_presenter_obj.logo_li_json) {
|
||||
if ($slct.event_presenter_obj.logo_li_json.primary.hosted_file_id_random) {
|
||||
placeholder_li.file_logo_primary = `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.logo_li_json.primary.hosted_file_id_random}">${$slct.event_presenter_obj.logo_li_json.primary.filename}`;
|
||||
}
|
||||
if ($slct.event_presenter_obj.logo_li_json.secondary.hosted_file_id_random) {
|
||||
placeholder_li.file_logo_secondary = `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.logo_li_json.secondary.hosted_file_id_random}">${$slct.event_presenter_obj.logo_li_json.secondary.filename}`;
|
||||
}
|
||||
}
|
||||
// Other media files related
|
||||
if ($slct.event_presenter_obj.media_li_json) {
|
||||
if ($slct.event_presenter_obj.media_li_json.promo_video && $slct.event_presenter_obj.media_li_json.promo_video.hosted_file_id_random) {
|
||||
placeholder_li.file_media_promo_video = `<video src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.media_li_json.promo_video.hosted_file_id_random}" controls></video>${$slct.event_presenter_obj.media_li_json.promo_video.filename}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function handle_submit_form(event) {
|
||||
console.log('*** handle_submit_form() ***');
|
||||
|
||||
$ae_loc.mod.events.disable_submit__event_presenter_obj = true;
|
||||
|
||||
// Data in
|
||||
let form_data = new FormData(event.target);
|
||||
console.log(form_data);
|
||||
|
||||
let sponsorship_di: key_val = ae_util.extract_prefixed_form_data({prefix: null, form_data: form_data, trim_values: true, bool_tf_str: true, log_lvl: 0});
|
||||
console.log(sponsorship_di);
|
||||
|
||||
// Data out
|
||||
let sponsorship_do: key_val = {};
|
||||
|
||||
if (!$slct.event_presenter_id) {
|
||||
// sponsorship_do['account_id_random'] = $ae_loc.account_id;
|
||||
sponsorship_do['sponsorship_cfg_id_random'] = $slct.sponsorship_cfg_id;
|
||||
// sponsorship_do['enable'] = true;
|
||||
}
|
||||
|
||||
if (sponsorship_di.poc_full_name || sponsorship_di.poc_email) {
|
||||
sponsorship_do['poc_json'] = {
|
||||
full_name: sponsorship_di.poc_full_name,
|
||||
email: sponsorship_di.poc_email,
|
||||
phone_mobile: sponsorship_di.poc_phone_mobile,
|
||||
};
|
||||
}
|
||||
|
||||
if (sponsorship_di.organization_name) {
|
||||
// Using the organization_name field to store the name of the sponsorship.
|
||||
sponsorship_do['name'] = sponsorship_di.organization_name;
|
||||
}
|
||||
// if (sponsorship_di.description) {
|
||||
// sponsorship_do['description'] = sponsorship_di.description;
|
||||
// }
|
||||
|
||||
if (sponsorship_di.level_num) {
|
||||
sponsorship_do['level_num'] = Number(sponsorship_di.level_num);
|
||||
let level_num = sponsorship_do['level_num'];
|
||||
|
||||
if ($slct.sponsorship_cfg_obj.level_li_json) {
|
||||
let level_str = `${$slct.sponsorship_cfg_obj.level_li_json[level_num].name} - ${$slct.sponsorship_cfg_obj.level_li_json[level_num].amount}`;
|
||||
sponsorship_do['level_str'] = level_str;
|
||||
}
|
||||
}
|
||||
|
||||
// Loop through possible guest list (up to 20) and add to the guest_li_json array.
|
||||
|
||||
let temp_guest_li = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
if (sponsorship_di[`guest_${i}_full_name`] || sponsorship_di[`guest_${i}_given_name`]) {
|
||||
let guest_x_full_name = sponsorship_di[`guest_${i}_given_name`] + ' ' + sponsorship_di[`guest_${i}_family_name`];
|
||||
temp_guest_li.push({
|
||||
given_name: sponsorship_di[`guest_${i}_given_name`],
|
||||
family_name: sponsorship_di[`guest_${i}_family_name`],
|
||||
full_name: guest_x_full_name,
|
||||
email: sponsorship_di[`guest_${i}_email`],
|
||||
phone_mobile: sponsorship_di[`guest_${i}_phone_mobile`],
|
||||
phone_home: sponsorship_di[`guest_${i}_phone_home`],
|
||||
phone_office: sponsorship_di[`guest_${i}_phone_office`],
|
||||
city: sponsorship_di[`guest_${i}_city`],
|
||||
other_text: sponsorship_di[`guest_${i}_other_text`],
|
||||
});
|
||||
}
|
||||
}
|
||||
if (temp_guest_li.length) {
|
||||
sponsorship_do['guest_li_json'] = temp_guest_li;
|
||||
}
|
||||
|
||||
if (sponsorship_di.social_media_facebook || sponsorship_di.social_media_twitter || sponsorship_di.social_media_instagram || sponsorship_di.social_media_linkedin) {
|
||||
sponsorship_do['social_li_json'] = {
|
||||
facebook: sponsorship_di.social_media_facebook,
|
||||
twitter: sponsorship_di.social_media_twitter,
|
||||
instagram: sponsorship_di.social_media_instagram,
|
||||
linkedin: sponsorship_di.social_media_linkedin,
|
||||
};
|
||||
}
|
||||
|
||||
sponsorship_do['hide'] = !!sponsorship_di.hide;
|
||||
sponsorship_do['priority'] = !!sponsorship_di.priority;
|
||||
if (sponsorship_di.sort) {
|
||||
// Change this to a number type
|
||||
sponsorship_do['sort'] = Number(sponsorship_di.sort);
|
||||
} else {
|
||||
sponsorship_do['sort'] = null;
|
||||
}
|
||||
if (sponsorship_di.group) {
|
||||
sponsorship_do['group'] = sponsorship_di.group;
|
||||
} else {
|
||||
sponsorship_do['group'] = null;
|
||||
}
|
||||
if (sponsorship_do['enable']) {
|
||||
sponsorship_do['enable'] = !!sponsorship_di.enable;
|
||||
}
|
||||
|
||||
// if (tinyMCE.get('notes')) {
|
||||
// sponsorship_do['notes'] = tinyMCE.get('notes').getContent();
|
||||
// } else {
|
||||
sponsorship_do['notes'] = sponsorship_di.notes;
|
||||
// }
|
||||
|
||||
console.log(sponsorship_do);
|
||||
|
||||
if (!$slct.event_presenter_id) {
|
||||
ae_promises.create__sponsorship = await handle_create__sponsorship({
|
||||
obj_type: 'sponsorship',
|
||||
data: sponsorship_do
|
||||
});
|
||||
$ae_loc.mod.events.disable_submit__event_presenter_obj = false;
|
||||
|
||||
} else {
|
||||
ae_promises.update__event_presenter_obj = await handle_update__sponsorship({
|
||||
obj_type: 'sponsorship',
|
||||
obj_id: $slct.event_presenter_id,
|
||||
data: sponsorship_do
|
||||
});
|
||||
$ae_loc.mod.events.disable_submit__event_presenter_obj = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handle_submit_form_files(event) {
|
||||
console.log('*** handle_submit_form() ***');
|
||||
|
||||
let sponsorship_do: key_val = {};
|
||||
|
||||
if ($slct.event_presenter_obj.logo_li_json) {
|
||||
console.log('The logo_li_json was found.');
|
||||
sponsorship_do.logo_li_json = $slct.event_presenter_obj.logo_li_json;
|
||||
} else {
|
||||
console.log('The logo_li_json was not found or is empty.');
|
||||
sponsorship_do.logo_li_json = {};
|
||||
}
|
||||
|
||||
if ($slct.event_presenter_obj.media_li_json) {
|
||||
console.log('The media_li_json was found.');
|
||||
sponsorship_do.media_li_json = $slct.event_presenter_obj.media_li_json;
|
||||
} else {
|
||||
console.log('The media_li_json was not found or is empty.');
|
||||
sponsorship_do.media_li_json = {};
|
||||
}
|
||||
|
||||
let hosted_file_results;
|
||||
// let logo_li_json = {};
|
||||
// let media_li_json = {};
|
||||
|
||||
if (event.target.file_logo_primary.files.length > 0) {
|
||||
console.log('The primary logo file was found.');
|
||||
hosted_file_results = await handle_input_upload_files(event.target.file_logo_primary.files);
|
||||
|
||||
if (hosted_file_results) {
|
||||
sponsorship_do.logo_li_json.primary = hosted_file_results[0];
|
||||
console.log(sponsorship_do.logo_li_json);
|
||||
placeholder_li.file_logo_primary = `<img src="/hosted_file/download/${sponsorship_do.logo_li_json.primary.hosted_file_id_random}">${sponsorship_do.logo_li_json.primary.filename}`;
|
||||
}
|
||||
}
|
||||
|
||||
if (event.target.file_logo_secondary.files.length > 0) {
|
||||
console.log('The secondary logo file was found.');
|
||||
hosted_file_results = await handle_input_upload_files(event.target.file_logo_secondary.files);
|
||||
|
||||
if (hosted_file_results) {
|
||||
sponsorship_do.logo_li_json.secondary = hosted_file_results[0];
|
||||
console.log(sponsorship_do.logo_li_json);
|
||||
}
|
||||
}
|
||||
|
||||
if (event.target.file_media_promo_video.files.length > 0) {
|
||||
console.log('The promo video file was found.');
|
||||
hosted_file_results = await handle_input_upload_files(event.target.file_media_promo_video.files);
|
||||
|
||||
if (hosted_file_results) {
|
||||
sponsorship_do.media_li_json.promo_video = hosted_file_results[0];
|
||||
console.log(sponsorship_do.media_li_json);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(sponsorship_do);
|
||||
|
||||
|
||||
ae_promises.update__event_presenter_obj = await handle_update__sponsorship({
|
||||
obj_type: 'sponsorship',
|
||||
obj_id: $slct.event_presenter_id,
|
||||
data: sponsorship_do
|
||||
});
|
||||
|
||||
// let sponsorship_do: key_val = {
|
||||
// logo_li_json: {
|
||||
// primary: hosted_file_results[0],
|
||||
// }
|
||||
|
||||
// };
|
||||
|
||||
|
||||
// sponsorship_do['logo_li_json'] = hosted_file_result;
|
||||
|
||||
// sponsorship_do['notes'] = 'Update after file upload!';
|
||||
|
||||
// update_event_presenter_obj_promise = await api.update_ae_obj_id_crud({
|
||||
// api_cfg: $ae_api,
|
||||
// obj_type: 'sponsorship',
|
||||
// obj_id: $slct.event_presenter_id,
|
||||
// fields: sponsorship_do,
|
||||
// key: $ae_api.api_crud_super_key,
|
||||
// log_lvl: 1
|
||||
// })
|
||||
// .then(function (event_presenter_obj_update_result) {
|
||||
// if (!event_presenter_obj_update_result) {
|
||||
// console.log('The result was null or false.');
|
||||
// return false;
|
||||
// }
|
||||
// return event_presenter_obj_update_result;
|
||||
// })
|
||||
// .catch(function (error) {
|
||||
// console.log('Something went wrong.');
|
||||
// console.log(error);
|
||||
// return false;
|
||||
// });
|
||||
|
||||
}
|
||||
|
||||
|
||||
async function handle_input_upload_files(input_upload_files) {
|
||||
console.log('*** handle_input_upload_files() ***');
|
||||
|
||||
const form_data = new FormData();
|
||||
|
||||
form_data.append('account_id', $ae_loc.account_id);
|
||||
form_data.append('link_to_type', 'sponsorship');
|
||||
form_data.append('link_to_id', $slct.event_presenter_id);
|
||||
|
||||
for (let i = 0; i < input_upload_files.length; i++) {
|
||||
form_data.append(`file_list`, input_upload_files[i]);
|
||||
}
|
||||
|
||||
let params = null;
|
||||
|
||||
let endpoint = '/hosted_file/upload_files';
|
||||
|
||||
console.log(form_data);
|
||||
|
||||
params = null;
|
||||
|
||||
// Uncomment and the post_promise is not seen by the "await" below
|
||||
// post_promise = await api.post_object({api_cfg: $cfg.api, endpoint: endpoint, params: params, data:form_data});
|
||||
// Uncomment so that the post_promise is not seen by the "await" below
|
||||
ae_promises.upload__hosted_file_obj = await api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, form_data: form_data});
|
||||
console.log(ae_promises.upload__hosted_file_obj);
|
||||
let hosted_file_result = ae_promises.upload__hosted_file_obj;
|
||||
|
||||
return hosted_file_result;
|
||||
}
|
||||
|
||||
|
||||
async function handle_create__sponsorship({
|
||||
obj_type,
|
||||
data
|
||||
}) {
|
||||
console.log('*** handle_create__sponsorship() ***');
|
||||
|
||||
ae_promises.api_create__event_presenter_obj = api.create_ae_obj_crud({
|
||||
api_cfg: $ae_api,
|
||||
obj_type: obj_type,
|
||||
fields: data,
|
||||
key: $ae_api.api_crud_super_key,
|
||||
log_lvl: 2
|
||||
})
|
||||
.then(async function (create__obj_result) {
|
||||
if (!create__obj_result) {
|
||||
console.log('The result was null or false.');
|
||||
return false;
|
||||
}
|
||||
return create__obj_result;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log('Something went wrong.');
|
||||
console.log(error);
|
||||
return false;
|
||||
});
|
||||
|
||||
return ae_promises.api_create__event_presenter_obj;
|
||||
}
|
||||
|
||||
|
||||
async function handle_update__sponsorship({
|
||||
obj_type,
|
||||
obj_id,
|
||||
data
|
||||
}) {
|
||||
console.log('*** handle_update__sponsorship() ***');
|
||||
|
||||
ae_promises.update__event_presenter_obj = api.update_ae_obj_id_crud({
|
||||
api_cfg: $ae_api,
|
||||
obj_type: obj_type,
|
||||
obj_id: obj_id,
|
||||
fields: data,
|
||||
key: $ae_api.api_crud_super_key,
|
||||
log_lvl: 2
|
||||
})
|
||||
.then(async function (update__obj_result) {
|
||||
if (!update__obj_result) {
|
||||
console.log('The result was null or false.');
|
||||
return false;
|
||||
}
|
||||
return update__obj_result;
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log('Something went wrong.');
|
||||
console.log(error);
|
||||
return false;
|
||||
});
|
||||
|
||||
return ae_promises.update__event_presenter_obj;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- @component This is the Event Presenters modal edit form. -->
|
||||
|
||||
{#if $modalStore[0]}
|
||||
<div class="svelte_component ae_edit_modal ae_obj__event_presenter {container_class_li}">
|
||||
<header class={container_header_class_li}>
|
||||
{$modalStore[0].title ?? '-- No Title --'}
|
||||
|
||||
{#await ae_promises.update__event_presenter_obj}
|
||||
<div class="modal-loading">
|
||||
<span class="fas fa-spinner fa-spin"></span>
|
||||
<span class="loading-text">
|
||||
<ProgressRadial value={undefined} />
|
||||
Saving...
|
||||
</span>
|
||||
</div>
|
||||
{:then update__event_presenter_obj_result}
|
||||
{#if update__event_presenter_obj_result}
|
||||
<div class="modal-loading">
|
||||
<span class="fas fa-check-circle"></span>
|
||||
<span class="loading-text">Successfully saved!</span>
|
||||
</div>
|
||||
{/if}
|
||||
{:catch error}
|
||||
<div class="modal-loading">
|
||||
<span class="fas fa-exclamation-triangle"></span>
|
||||
<span class="loading-text">Error: {error.message}</span>
|
||||
</div>
|
||||
{/await}
|
||||
</header>
|
||||
|
||||
|
||||
{#if $ae_loc.mod.events.presenter_link}
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="btn variant-soft-secondary"
|
||||
use:clipboard={$ae_loc.mod.events.presenter_link}
|
||||
>
|
||||
<span class="fas fa-copy mx-1"></span>
|
||||
Copy link for {$slct.event_presenter_id}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
<TabGroup
|
||||
justify="justify-center"
|
||||
active="variant-ghost-primary"
|
||||
hover="hover:variant-soft-primary"
|
||||
flex="flex-1 lg:flex-none"
|
||||
rounded=""
|
||||
border=""
|
||||
class="bg-surface-100-800-token w-full"
|
||||
>
|
||||
<Tab bind:group={$store_current_tab} name="tab_start" value={'start'}>
|
||||
<svelte:fragment slot="lead"><span class="fas fa-home"></span></svelte:fragment>
|
||||
<span>Start</span>
|
||||
</Tab>
|
||||
<Tab bind:group={$store_current_tab} name="tab_files" value={'files'} disabled={!$slct.event_presenter_obj.event_presenter_id_random}>
|
||||
<svelte:fragment slot="lead"><span class="fas fa-file-upload"></span></svelte:fragment>
|
||||
Files
|
||||
</Tab>
|
||||
<Tab bind:group={$store_current_tab} name="tab_biograhpy" value={'biograhpy'} disabled={!$slct.event_presenter_obj.event_presenter_id_random}>
|
||||
<svelte:fragment slot="lead"><span class="fas fa-users"></span></svelte:fragment>
|
||||
Biography
|
||||
</Tab>
|
||||
<Tab bind:group={$store_current_tab} name="tab_options" value={'options'} disabled={!$slct.event_presenter_obj.event_presenter_id_random}>
|
||||
<svelte:fragment slot="lead"><span class="fas fa-info"></span></svelte:fragment>
|
||||
More
|
||||
</Tab>
|
||||
|
||||
<!-- Tab Panels --->
|
||||
<svelte:fragment slot="panel">
|
||||
|
||||
|
||||
{#if $store_current_tab === 'start'}
|
||||
|
||||
|
||||
<form
|
||||
class="modal-form {cForm}"
|
||||
on:submit|preventDefault={handle_submit_form}
|
||||
>
|
||||
|
||||
|
||||
|
||||
|
||||
<fieldset class="mb-8 flex flex-wrap gap-4">
|
||||
<legend class="legend">Speaker</legend>
|
||||
|
||||
<label for="full_name">Full name
|
||||
<div class="input-group grid-cols-[auto_1fr_auto]">
|
||||
<div class="input-group-shim">
|
||||
{#if !$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
|
||||
<span class="fas fa-lock" title="Field is locked"></span>
|
||||
{:else}
|
||||
<span class="fas fa-unlock" title="Field is unlocked"></span>
|
||||
{/if}
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
id="full_name" name="full_name"
|
||||
placeholder="Full name"
|
||||
value={($slct.event_presenter_obj.full_name ? $slct.event_presenter_obj.full_name : '')}
|
||||
autocomplete="name"
|
||||
readonly={!$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
|
||||
required
|
||||
>
|
||||
</div>
|
||||
</label>
|
||||
<label for="email">Email
|
||||
<div class="input-group grid-cols-[auto_1fr_auto]">
|
||||
<div class="input-group-shim">
|
||||
{#if !$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
|
||||
<span class="fas fa-lock" title="Field is locked"></span>
|
||||
{:else}
|
||||
<span class="fas fa-unlock" title="Field is unlocked"></span>
|
||||
{/if}
|
||||
</div>
|
||||
<input
|
||||
type="email"
|
||||
class="input"
|
||||
id="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
value={($slct.event_presenter_obj.email ? $slct.event_presenter_obj.email : '')}
|
||||
autocomplete="email"
|
||||
readonly={!$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
|
||||
required
|
||||
>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label for="phone_mobile">Mobile phone
|
||||
<input
|
||||
type="tel"
|
||||
class="input"
|
||||
id="phone_mobile"
|
||||
name="phone_mobile"
|
||||
placeholder="Mobile phone"
|
||||
value={($slct.event_presenter_obj.phone_mobile ? $slct.event_presenter_obj.phone_mobile : '')}
|
||||
autocomplete="tel"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label for="affiliations" class="label">Affiliations/Organization
|
||||
<input type="text" id="affiliations" name="affiliations" required max="200" value={$slct.event_presenter_obj.affiliations ?? ''} placeholder="Affiliations or organization" autocomplete="off" class="input" />
|
||||
</label>
|
||||
|
||||
|
||||
<!-- Collect the organization mailing address -->
|
||||
<fieldset class="mb-8 flex flex-wrap gap-4">
|
||||
<legend class="legend">Mailing Address</legend>
|
||||
|
||||
<label for="address_line_1" class="label max-w-64">
|
||||
<!-- Line 1 (Street) -->
|
||||
<input type="text" id="address_line_1" name="address_line_1" value={$slct.event_presenter_obj.address_street ?? ''} placeholder="Line 1 (street)" autocomplete="street-address" class="input text-xs" />
|
||||
</label>
|
||||
<label for="address_line_2" class="label max-w-64">
|
||||
<!-- Line 2 (Suite) -->
|
||||
<input type="text" id="address_line_2" name="address_line_2" value={$slct.event_presenter_obj.address_suite ?? ''} placeholder="Line 2 (suite)" autocomplete="address-line2" class="input text-xs" />
|
||||
</label>
|
||||
<label for="address_city" class="label max-w-64">
|
||||
<!-- City -->
|
||||
<input type="text" id="address_city" name="address_city" value={$slct.event_presenter_obj.address_city ?? ''} placeholder="City" autocomplete="address-level2" class="input text-xs" />
|
||||
</label>
|
||||
<label for="address_state" class="label max-w-64">
|
||||
<!-- State/Province -->
|
||||
<input type="text" id="address_state_province" name="address_state_province" value={$slct.event_presenter_obj.address_state_province ?? ''} placeholder="State/Province" autocomplete="address-level1" class="input text-xs" />
|
||||
</label>
|
||||
<label for="address_postal_code" class="label max-w-64">
|
||||
<!-- Postal code/Zip -->
|
||||
<input type="text" id="address_postal_code" name="address_postal_code" value={$slct.event_presenter_obj.address_postal_code ?? ''} placeholder="Postal code/Zip" autocomplete="postal-code" class="input text-xs" />
|
||||
</label>
|
||||
<label for="address_country" class="label max-w-64">
|
||||
<!-- Country -->
|
||||
<input type="text" id="address_country" name="address_country" value={$slct.event_presenter_obj.address_country ?? ''} placeholder="Country" autocomplete="country-name" class="input text-xs" />
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<!-- </section> -->
|
||||
|
||||
<fieldset class="mb-8">
|
||||
<legend class="legend">Agreements & Accommodations</legend>
|
||||
|
||||
<label for="waiver" class="label">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
id="waiver"
|
||||
name="waiver"
|
||||
value="1"
|
||||
checked={$slct.event_presenter_obj.waiver}
|
||||
>
|
||||
Yes, I understand the "Speaker General Waiver".
|
||||
</label>
|
||||
|
||||
<label for="accommodations" class="label">
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox"
|
||||
id="accommodations"
|
||||
name="accommodations"
|
||||
value="1"
|
||||
checked={$slct.event_presenter_obj.accommodations}
|
||||
>
|
||||
Yes, please have a member of the CHOW team reach out for special accommodations or assistance.
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn {parent.buttonPositive} m-2"
|
||||
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
|
||||
on:click={() => {
|
||||
console.log('*** Save start button clicked ***');
|
||||
// if (!confirm('Are you sure you want to save this sponsorship?')) {return false;}
|
||||
// handle_submit_form();
|
||||
// handle_submit_form;
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-check mx-1"></span>
|
||||
Save
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
{:else if $store_current_tab === 'files'}
|
||||
|
||||
|
||||
<form
|
||||
class="modal-form {cForm}"
|
||||
on:submit|preventDefault={handle_submit_form_files}
|
||||
>
|
||||
|
||||
<section>
|
||||
<h2>Logos</h2>
|
||||
<p>Add your logo here. This logo will be displayed at the gala.</p>
|
||||
<label for="file_logo_primary">
|
||||
Upload logo (png, webp, jpg, svg)
|
||||
<FileDropzone
|
||||
id="file_logo_primary"
|
||||
name="file_logo_primary"
|
||||
padding="p-1"
|
||||
accept="image/*"
|
||||
on:change={(e) => {
|
||||
console.log('*** FileDropzone change event ***', e);
|
||||
|
||||
if (e.target.files.length) {
|
||||
placeholder_li.file_logo_primary = `Ready to upload: ${e.target.files[0].name}`;
|
||||
} else {
|
||||
placeholder_li.file_logo_primary = 'No files selected.';
|
||||
}
|
||||
}}
|
||||
>
|
||||
<svelte:fragment slot="lead"><span class="fas fa-file-upload"></svelte:fragment>
|
||||
<svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
|
||||
<svelte:fragment slot="meta">PNG, WEBP, JPG only image types</svelte:fragment>
|
||||
</FileDropzone>
|
||||
{@html placeholder_li.file_logo_primary}
|
||||
</label>
|
||||
|
||||
<label for="file_logo_secondary">
|
||||
Upload a version of your logo for use with dark backgrounds (png, webp, jpg, svg)
|
||||
<FileDropzone
|
||||
id="file_logo_secondary"
|
||||
name="file_logo_secondary"
|
||||
padding="p-1"
|
||||
accept="image/*"
|
||||
on:change={(e) => {
|
||||
console.log('*** FileDropzone change event ***', e);
|
||||
|
||||
if (e.target.files.length) {
|
||||
placeholder_li.file_logo_secondary = `Ready to upload: ${e.target.files[0].name}`;
|
||||
} else {
|
||||
placeholder_li.file_logo_secondary = 'No files selected.';
|
||||
}
|
||||
}}
|
||||
>
|
||||
<svelte:fragment slot="lead"><span class="fas fa-file-upload"></svelte:fragment>
|
||||
<svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
|
||||
<svelte:fragment slot="meta">PNG, WEBP, JPG only image types</svelte:fragment>
|
||||
</FileDropzone>
|
||||
{@html placeholder_li.file_logo_secondary}
|
||||
</label>
|
||||
|
||||
</section>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn {parent.buttonPositive}"
|
||||
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
|
||||
on:click={() => {
|
||||
console.log('*** Save button clicked ***');
|
||||
// if (!confirm('Are you sure you want to save this sponsorship?')) {return false;}
|
||||
// handle_submit_form();
|
||||
// handle_submit_form;
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-check mx-1"></span>
|
||||
Save
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
{:else if $store_current_tab === 'biograhpy'}
|
||||
|
||||
|
||||
<section class="biograhpy">
|
||||
<form
|
||||
class="modal-form {cForm}"
|
||||
on:submit|preventDefault={handle_submit_form}
|
||||
>
|
||||
<label class="label ae_label event_presenter__biography">Speaker Biography
|
||||
<textarea name="biography" id="biography" class="textarea ae_value event_presenter__biography tinymce_editor editor_basic" rows="5" cols="70" bind:value={$slct.event_presenter_obj.biography} placeholder="A short biography or overview of this event_presenter."></textarea>
|
||||
</label>
|
||||
|
||||
<div class="flex flex-wrap gap-2 p-1">
|
||||
<button
|
||||
type="submit"
|
||||
class="btn {parent.buttonPositive} btn-sm"
|
||||
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
|
||||
on:click={() => {
|
||||
console.log('*** Save button clicked ***');
|
||||
// if (!confirm('Are you sure you want to save this sponsorship?')) {return false;}
|
||||
// handle_submit_form();
|
||||
// handle_submit_form;
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-check mx-1"></span>
|
||||
Save
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
{:else if $store_current_tab === 'options'}
|
||||
|
||||
|
||||
<form
|
||||
class="modal-form {cForm}"
|
||||
on:submit|preventDefault={handle_submit_form}
|
||||
>
|
||||
<!-- Ask for common social media URLs. (Twitter, Facebook, Instagram, etc) -->
|
||||
{#if $slct.event_presenter_obj.social_li_json}
|
||||
<fieldset class="sponsorship__social_media">
|
||||
<legend class="legend">Social Media</legend>
|
||||
|
||||
<label for="social_media_twitter" class="label">Twitter
|
||||
<input type="url" id="social_media_twitter" name="social_media_twitter" class="input" placeholder="Twitter" value={$slct.event_presenter_obj.social_li_json.twitter ?? ''} autocomplete="url" />
|
||||
</label>
|
||||
<label for="social_media_facebook" class="label">Facebook
|
||||
<input type="url" id="social_media_facebook" name="social_media_facebook" class="input" placeholder="Facebook" value={$slct.event_presenter_obj.social_li_json.facebook ?? ''} autocomplete="url" />
|
||||
</label>
|
||||
<label for="social_media_instagram" class="label">Instagram
|
||||
<input type="url" id="social_media_instagram" name="social_media_instagram" class="input" placeholder="Instagram" value={$slct.event_presenter_obj.social_li_json.instagram ?? ''} autocomplete="url" />
|
||||
</label>
|
||||
<label for="social_media_linkedin" class="label">LinkedIn
|
||||
<input type="url" id="social_media_linkedin" name="social_media_linkedin" class="input" placeholder="LinkedIn" value={$slct.event_presenter_obj.social_li_json.linkedin ?? ''} autocomplete="url" />
|
||||
</label>
|
||||
</fieldset>
|
||||
{/if}
|
||||
|
||||
<fieldset class="sponsorship__more_questions">
|
||||
<legend class="legend">More Questions</legend>
|
||||
|
||||
<label for="question" class="label">This is another question?
|
||||
<div class="label">
|
||||
<input
|
||||
type="text"
|
||||
class="input"
|
||||
id="question"
|
||||
name="question"
|
||||
placeholder="The answer!"
|
||||
value={$slct.event_presenter_obj.question ?? ''}
|
||||
autocomplete="off"
|
||||
readonly={$ae_loc.trusted_access}
|
||||
required
|
||||
>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="label ae_label sponsorship__comments">Comments
|
||||
<textarea name="comments" id="comments" class="textarea ae_value sponsorship__comments tinymce_editor editor_basic" rows="5" cols="70" bind:value={$slct.event_presenter_obj.comments} placeholder="Any comments or questions about sponsorship."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn {parent.buttonPositive}"
|
||||
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
|
||||
on:click={() => {
|
||||
console.log('*** Save more button clicked ***');
|
||||
// if (!confirm('Are you sure you want to save this sponsorship?')) {return false;}
|
||||
// handle_submit_form();
|
||||
// handle_submit_form;
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-check mx-1"></span>
|
||||
Save
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
{/if}
|
||||
|
||||
</svelte:fragment>
|
||||
</TabGroup>
|
||||
|
||||
<!-- </form> -->
|
||||
<!-- prettier-ignore -->
|
||||
<footer class="modal-footer {parent.regionFooter}">
|
||||
{#if $slct.event_presenter_id}
|
||||
<!-- {#if $ae_loc.administrator_access} -->
|
||||
<button
|
||||
on:click={() => {
|
||||
// if (!confirm('Are you sure you want to delete this sponsorship?')) {return false;}
|
||||
// handle_delete_event_presenter_obj({event_presenter_id: $slct.event_presenter_id, method: 'delete'});
|
||||
|
||||
// $slct.event_presenter_id = null;
|
||||
// $slct.event_presenter_obj = {};
|
||||
}}
|
||||
class="btn {parent.buttonNegative}"
|
||||
title="Delete record permanently"
|
||||
>
|
||||
<span class="fas fa-minus mx-1"></span> Delete
|
||||
</button>
|
||||
<!-- {/if} -->
|
||||
{/if}
|
||||
<button class="btn {parent.buttonNeutral}" on:click={parent.onClose}>
|
||||
<span class="fas fa-window-close mx-1"></span>
|
||||
{parent.buttonTextCancel}
|
||||
</button>
|
||||
<!-- <button class="btn {parent.buttonPositive}" on:click={handle_submit_form}>
|
||||
<span class="fas fa-check mx-1"></span>
|
||||
Submit Form
|
||||
</button> -->
|
||||
|
||||
<!-- {#if $slct.event_presenter_id}
|
||||
<button
|
||||
type="submit"
|
||||
class="btn {parent.buttonPositive}"
|
||||
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
|
||||
on:click={() => {
|
||||
console.log('*** Save button clicked ***');
|
||||
if (!confirm('Are you sure you want to save this sponsorship?')) {return false;}
|
||||
handle_submit_form();
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-check mx-1"></span>
|
||||
Save
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
type="submit"
|
||||
class="ae_btn btn_primary"
|
||||
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
|
||||
on:click={() => {
|
||||
if (!confirm('Are you sure you want to create this sponsorship?')) {return false;}
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-plus mx-1"></span>
|
||||
Save New Event
|
||||
</button>
|
||||
{/if} -->
|
||||
</footer>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@@ -46,7 +46,6 @@ onMount(() => {
|
||||
$slct.event_presenter_obj = ae_event_presenter_obj;
|
||||
console.log(`Selected Event Presenter ID: ${$slct.event_presenter_id}`);
|
||||
console.log(`Selected Event Presenter Object:`, $slct.event_presenter_obj);
|
||||
// $slct_trigger = 'load__event_presenter_obj';
|
||||
|
||||
$ae_loc.mod.events.show_main__options = true;
|
||||
$ae_loc.mod.events.show_edit__event_presenter_obj = false;
|
||||
@@ -116,7 +115,7 @@ onMount(() => {
|
||||
</tfoot>
|
||||
</table>
|
||||
{:else}
|
||||
<div>No event_presenters avalible to show at this time</div>
|
||||
<div>No event presenters avalible to show at this time</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
|
||||
@@ -0,0 +1,175 @@
|
||||
<script lang="ts">
|
||||
import type { SvelteComponent } from 'svelte';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
|
||||
// Stores
|
||||
// import { getModalStore } from '@skeletonlabs/skeleton';
|
||||
|
||||
import { ae_util } from '$lib/ae_utils';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
||||
|
||||
// Props
|
||||
/** Exposes parent props to this component. */
|
||||
export let parent: SvelteComponent;
|
||||
console.log(`Parent:`, parent);
|
||||
export let container_class_li = '';
|
||||
export let container_header_class_li = '';
|
||||
|
||||
// const dispatch = createEventDispatcher();
|
||||
|
||||
if ($slct.event_presenter_id) {
|
||||
console.log(`Presenter ID selected: ${$slct.event_presenter_id}`);
|
||||
console.log(`Presenter object selected:`, $slct.event_presenter_obj);
|
||||
|
||||
$slct_trigger = 'load__event_presenter_obj';
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
console.log('** Component Mounted: ** View Modal - Presenter Obj');
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<!-- @component This is the Presenters modal view form. -->
|
||||
|
||||
<section class="svelte_component ae_view_modal ae_obj__event_presenter {container_class_li}">
|
||||
|
||||
<header class={container_header_class_li}>{@html $slct.event_presenter_obj.full_name}</header>
|
||||
|
||||
<div class="event_presenter__content">
|
||||
<div
|
||||
class="event_presenter_biography biography"
|
||||
>
|
||||
<div class="ae_label event_presenter__biography">Biography:</div>
|
||||
<pre class="ae_value event_presenter__biography">{@html $slct.event_presenter_obj.biography ? $slct.event_presenter_obj.biography : '-- No Bio Given --'}</pre>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class:ae_d_none={!$slct.event_presenter_obj.phone_mobile}
|
||||
class="event_presenter_phone_mobile"
|
||||
>
|
||||
<span class="ae_label">Phone:</span>
|
||||
<span class="ae_value"><span class="fas fa-phone"></span> {$slct.event_presenter_obj.phone_mobile} — {$slct.event_presenter_obj.phone_mobile}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="ae_label">Approved:</span>
|
||||
$
|
||||
<span class="ae_value">
|
||||
{$slct.event_presenter_obj.approve ? 'Yes, marked as approved' : 'Not yet marked as approved'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="ae_list event_presenter__guests">
|
||||
<h2>More Information</h2>
|
||||
|
||||
<div class="ae_warning">More info will go here</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<section class="card-footer ae_section ae_meta event_presenter__meta">
|
||||
<div class="ae_group">
|
||||
<span
|
||||
class="event_presenter__id"
|
||||
class:ae_d_none={!$ae_loc.administrator_access}>
|
||||
ID:
|
||||
{$slct.event_presenter_obj.event_presenter_id_random}
|
||||
</span>
|
||||
<span
|
||||
class="event_presenter__created_on"
|
||||
>
|
||||
Created on: {ae_util.iso_datetime_formatter($slct.event_presenter_obj.created_on, 'datetime_short')}
|
||||
</span>
|
||||
<span
|
||||
class="event_presenter__updated_on"
|
||||
class:ae_d_none={!$slct.event_presenter_obj.updated_on}
|
||||
>
|
||||
Updated on: {ae_util.iso_datetime_formatter($slct.event_presenter_obj.updated_on, 'datetime_short')}
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<footer class="modal-footer {parent.regionFooter}">
|
||||
{#if $ae_loc.trusted_access || $slct.event_presenter_obj.external_person_id === $ae_loc.novi_uuid || $slct.event_presenter_obj.contact_1_email === $ae_loc.novi_email}
|
||||
<div class="ae_options">
|
||||
<button
|
||||
on:click={() => {
|
||||
// $slct.event_presenter_id = $slct.event_presenter_obj.event_presenter_id_random;
|
||||
// $slct.event_presenter_obj = $slct.event_presenter_obj;
|
||||
|
||||
// const url = new URL(location);
|
||||
// url.searchParams.set('event_presenter_id', $slct.event_presenter_obj.event_presenter_id_random);
|
||||
// history.pushState({}, '', url);
|
||||
|
||||
// $ae_loc.mod.events.show_main__options = true;
|
||||
// $ae_loc.mod.events.show_list__event_presenterj_li = true;
|
||||
// $slct_trigger = 'load__event_presenter_obj';
|
||||
|
||||
$ae_loc.mod.events.show_view__event_presenter_obj = false;
|
||||
$ae_loc.mod.events.show_edit__event_presenter_obj = true;
|
||||
parent.onClose();
|
||||
$slct_trigger = 'show_edit__event_presenter_obj';
|
||||
}}
|
||||
class="btn variant-filled"
|
||||
title={`Edit presenter: ${$slct.event_presenter_obj.name}`}
|
||||
>
|
||||
<span class="fas fa-edit"></span> Edit
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
<button
|
||||
class="btn {parent.buttonNeutral}"
|
||||
on:click={() => {
|
||||
|
||||
let location = window.location.href;
|
||||
const url = new URL(location);
|
||||
url.searchParams.delete('event_presenter_id');
|
||||
history.pushState({}, '', url);
|
||||
|
||||
parent.onClose();
|
||||
}}
|
||||
>
|
||||
{parent.buttonTextCancel}
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<style>
|
||||
.ae_label {
|
||||
font-size: smaller;
|
||||
}
|
||||
.ae_value {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.event_presenter__user_timezone {
|
||||
font-size: smaller;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.event_presenter_obj .ae_meta {
|
||||
flex-direction: column;
|
||||
/* justify-content: space-between; */
|
||||
}
|
||||
|
||||
.event_presenter_obj .ae_meta .ae_group {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.event_presenter_obj .ae_meta .ae_options {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* a {
|
||||
color: #82B6E1;
|
||||
} */
|
||||
</style>
|
||||
@@ -7,6 +7,7 @@ console.log(`Svelte Sponsorships page data:`, data);
|
||||
// import type { Writable } from 'svelte/store';
|
||||
// const store_current_page: Writable<string> = localStorageStore('store_current_page', 'start');
|
||||
|
||||
// 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, ProgressRadial } from '@skeletonlabs/skeleton';
|
||||
import type {
|
||||
@@ -19,34 +20,45 @@ const modalStore = getModalStore();
|
||||
|
||||
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';
|
||||
|
||||
import Edit_modal_sponsorship_obj from './10_edit_modal__sponsorship_obj.svelte';
|
||||
import List_sponsorship_obj from './10_list__sponsorship_obj.svelte';
|
||||
import View_modal_sponsorship_obj from './10_view_modal__sponsorship_obj.svelte';
|
||||
|
||||
type key_val = {
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
// Editing
|
||||
const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj };
|
||||
const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj, props: {container_class_li: 'w-full p-4 space-y-4 card', container_header_class_li: 'card-header text-2xl font-bold'} };
|
||||
|
||||
const modal_edit__sponsorship_obj: ModalSettings = {
|
||||
type: 'component',
|
||||
component: modalComponentEditSponsorshipObj,
|
||||
title: 'Edit Sponsorship',
|
||||
position: '', // default is "items-center"
|
||||
|
||||
// Provide arbitrary classes to the backdrop and modal elements:
|
||||
// backdropClasses: '!bg-green-500',
|
||||
// modalClasses: 'w-modal-wide',
|
||||
|
||||
// Provide arbitrary metadata to your modal instance:
|
||||
// meta: { fn: do_something_function }
|
||||
};
|
||||
|
||||
// Viewing
|
||||
const modalComponentViewSponsorshipObj: ModalComponent = { ref: View_modal_sponsorship_obj };
|
||||
const modalComponentViewSponsorshipObj: ModalComponent = { ref: View_modal_sponsorship_obj, props: {container_class_li: 'w-full p-4 space-y-4 card', container_header_class_li: 'card-header text-2xl font-bold'} };
|
||||
|
||||
const modal_view__sponsorship_obj: ModalSettings = {
|
||||
type: 'component',
|
||||
component: modalComponentViewSponsorshipObj,
|
||||
title: 'Viewing Sponsorship',
|
||||
position: '', // default is "items-center"
|
||||
|
||||
// Provide arbitrary classes to the backdrop and modal elements:
|
||||
// backdropClasses: '!bg-green-500',
|
||||
// modalClasses: 'w-modal-wide',
|
||||
|
||||
// Provide arbitrary metadata to your modal instance:
|
||||
// meta: { fn: do_something_function }
|
||||
};
|
||||
|
||||
// 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 the view modal.
|
||||
@@ -59,13 +71,27 @@ $ae_loc.site_domain = data.url.origin;
|
||||
$: if ($slct_trigger == 'show_edit__sponsorship_obj' && $ae_loc.mod.sponsorships.show_edit__sponsorship_obj) {
|
||||
console.log('Show Modal Edit');
|
||||
$slct_trigger = null;
|
||||
|
||||
let location = window.location.href;
|
||||
const url = new URL(location);
|
||||
url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
|
||||
history.pushState({}, '', url);
|
||||
|
||||
// $ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
|
||||
// modalStore.clear();
|
||||
modalStore.trigger(modal_edit__sponsorship_obj);
|
||||
}
|
||||
$: if ($slct_trigger == 'show_view__sponsorship_obj' && $ae_loc.mod.sponsorships.show_view__sponsorship_obj) {
|
||||
console.log('Show Modal View');
|
||||
$slct_trigger = null;
|
||||
|
||||
let location = window.location.href;
|
||||
const url = new URL(location);
|
||||
url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
|
||||
history.pushState({}, '', url);
|
||||
|
||||
// $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = false;
|
||||
// modalStore.clear();
|
||||
modalStore.trigger(modal_view__sponsorship_obj);
|
||||
}
|
||||
|
||||
|
||||
@@ -29,6 +29,8 @@ import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeleton
|
||||
// Props
|
||||
/** Exposes parent props to this component. */
|
||||
export let parent: SvelteComponent;
|
||||
export let container_class_li = '';
|
||||
export let container_header_class_li = '';
|
||||
|
||||
const modalStore = getModalStore();
|
||||
|
||||
@@ -36,10 +38,7 @@ const modalStore = getModalStore();
|
||||
import { ae_util } from '$lib/ae_utils';
|
||||
import { api } from '$lib/api';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
||||
|
||||
type key_val = {
|
||||
[key: string]: any;
|
||||
};
|
||||
import type { key_val } from '$lib/ae_stores';
|
||||
|
||||
|
||||
onMount(() => {
|
||||
@@ -460,8 +459,8 @@ async function handle_update__sponsorship({
|
||||
<!-- @component This is the Sponsorships modal edit form. -->
|
||||
|
||||
{#if $modalStore[0]}
|
||||
<div class="modal-example-form {cBase}">
|
||||
<header class={cHeader}>
|
||||
<div class="svelte_component ae_edit_modal ae_obj__sponsorship {container_class_li}">
|
||||
<header class={container_header_class_li}>
|
||||
{$modalStore[0].title ?? '-- No Title --'}
|
||||
|
||||
{#await ae_promises.update__sponsorship_obj}
|
||||
|
||||
@@ -11,7 +11,9 @@ import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
||||
// Props
|
||||
/** Exposes parent props to this component. */
|
||||
export let parent: SvelteComponent;
|
||||
|
||||
console.log(`Parent:`, parent);
|
||||
export let container_class_li = '';
|
||||
export let container_header_class_li = '';
|
||||
|
||||
// const dispatch = createEventDispatcher();
|
||||
|
||||
@@ -26,32 +28,13 @@ onMount(() => {
|
||||
console.log('** Component Mounted: ** View Modal - Sponsorship Obj');
|
||||
});
|
||||
|
||||
|
||||
// dayjs.extend(window.dayjs_plugin_utc)
|
||||
// dayjs.extend(window.dayjs_plugin_timezone);
|
||||
// console.log(`UTC offset: ${dayjs().utcOffset()}`);
|
||||
// console.log(`TZ offset: ${dayjs().utcOffset('US/Pacific')}`);
|
||||
// // let test_time = dayjs.utc('2024-01-08 11:55').tz('Asia/Taipei');
|
||||
// // let test_time = dayjs.utc('2024-01-08 14:15').tz('America/New_York');
|
||||
// let test_time = dayjs.tz('2024-01-08 14:15', 'US/Pacific');
|
||||
// console.log(test_time.format('YYYY-MM-DD HH:mm'));
|
||||
// let adjusted_to_local_tz = test_time.tz('America/New_York');
|
||||
// console.log(adjusted_to_local_tz.format('YYYY-MM-DD HH:mm'));
|
||||
|
||||
// let adjusted_to_local_tz_v2 = dayjs.tz('2024-01-08 14:15', 'US/Pacific').tz('America/New_York');
|
||||
// console.log(adjusted_to_local_tz_v2);
|
||||
|
||||
// Base Classes
|
||||
const cBase = 'card card-hover p-4 w-modal-wide shadow-xl space-y-4';
|
||||
const cHeader = 'card-header text-2xl font-bold';
|
||||
// const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
|
||||
</script>
|
||||
|
||||
<!-- @component This is the Sponsorships modal view form. -->
|
||||
|
||||
<section class="svelte_component ae_section ae_view sponsorship_obj view__sponsorship_obj {cBase}">
|
||||
<section class="svelte_component ae_view_modal ae_obj__sponsorship_obj {container_class_li}">
|
||||
|
||||
<header class={cHeader}>{@html $slct.sponsorship_obj.name}</header>
|
||||
<header class={container_header_class_li}>{@html $slct.sponsorship_obj.name}</header>
|
||||
|
||||
<div class="sponsorship__content">
|
||||
<div
|
||||
@@ -158,9 +141,10 @@ const cHeader = 'card-header text-2xl font-bold';
|
||||
// $ae_loc.mod.sponsorships.show_main__options = true;
|
||||
// $ae_loc.mod.sponsorships.show_list__sponsorship_obj_li = true;
|
||||
// $slct_trigger = 'load__sponsorship_obj';
|
||||
|
||||
$ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
|
||||
$ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
|
||||
parent.onClose();
|
||||
$slct_trigger = 'show_edit__sponsorship_obj';
|
||||
}}
|
||||
class="btn variant-filled"
|
||||
title={`Edit sponsorship: ${$slct.sponsorship_obj.name}`}
|
||||
@@ -169,7 +153,20 @@ const cHeader = 'card-header text-2xl font-bold';
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
<button class="btn {parent.buttonNeutral}" on:click={parent.onClose}>{parent.buttonTextCancel}</button>
|
||||
<button
|
||||
class="btn {parent.buttonNeutral}"
|
||||
on:click={() => {
|
||||
|
||||
let location = window.location.href;
|
||||
const url = new URL(location);
|
||||
url.searchParams.delete('sponsorship_id');
|
||||
history.pushState({}, '', url);
|
||||
|
||||
parent.onClose();
|
||||
}}
|
||||
>
|
||||
{parent.buttonTextCancel}
|
||||
</button>
|
||||
</footer>
|
||||
|
||||
</section>
|
||||
|
||||
107
src/routes/sponsorships/[slug]/+layout.ts
Normal file
107
src/routes/sponsorships/[slug]/+layout.ts
Normal file
@@ -0,0 +1,107 @@
|
||||
/** @type {import('./$types').LayoutLoad} */
|
||||
|
||||
import { api } from '$lib/api';
|
||||
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
type key_val = {
|
||||
[key: string]: any; // variable key
|
||||
// name: string;
|
||||
};
|
||||
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
export async function load({ params, url }) { // route
|
||||
// console.log(`Svelte Sponsorships layout.ts data = params:`, params);
|
||||
// console.log(`Svelte Sponsorships layout.ts data = route:`, route);
|
||||
// console.log(`Svelte Sponsorships 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 data_struct = {
|
||||
ae_init: ae_loc_tmp,
|
||||
params: params,
|
||||
sections: [
|
||||
{ slug: 'new', title: 'New Sponsorship' },
|
||||
{ slug: 'manage', title: 'Manage' },
|
||||
{ slug: 'test', title: 'Test' },
|
||||
],
|
||||
url: url,
|
||||
|
||||
};
|
||||
|
||||
let loading_results = null;
|
||||
|
||||
ds_code = 'hub__page__sponsorships__create_info';
|
||||
loading_results = await handle_get_data_store_obj_w_code({ code: ds_code })
|
||||
.then( function (ds_hub_page_sponsorships_create_info_results) {
|
||||
if (ds_hub_page_sponsorships_create_info_results) {
|
||||
console.log(`ae_ hub__page__sponsorships__create_info = `, ds_hub_page_sponsorships_create_info_results);
|
||||
// let ae_loc_tmp = get(ae_loc);
|
||||
|
||||
ds_code_li[ds_code] = ds_hub_page_sponsorships_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));
|
||||
});
|
||||
|
||||
|
||||
return data_struct;
|
||||
}
|
||||
@@ -175,11 +175,21 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
|
||||
class="container h-full mx-auto"
|
||||
>
|
||||
|
||||
{#if $ae_loc.ds.hub__page__sponsorships__create_info}
|
||||
{@html $ae_loc.ds.hub__page__sponsorships__create_info}
|
||||
{:else}
|
||||
|
||||
<header>
|
||||
<h1 class="h1">Information Goes Here</h1>
|
||||
</header>
|
||||
|
||||
<section>More information goes here.</section>
|
||||
<section>
|
||||
<div class="alert alert-info">
|
||||
More information goes here.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/if}
|
||||
|
||||
<!-- <section class="btn btn-group"> -->
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user