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

Wrapping up for the night. Things are working better. There are still API request misses or something.

Browse Source
This commit is contained in:
Scott Idem
2024-03-05 20:35:38 -05:00
parent bed4f4a0f2
commit e71cdab353
10 changed files with 261 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.postcss
View File

@@ -82,8 +82,8 @@ body {
/* Remove the background from the body in all cases */
body[data-theme] {
background: none;
background-image: none;
/* background: none; */
/* background-image: none; */
}
/* Remove the background from the body if using iframes */

2
src/lib/ae_stores.ts
View File

@@ -64,6 +64,8 @@ export let ae_app_local_data_struct: key_val = {
'show_element__access_type': true,
'theme_mode': 'dark',
'theme_name': 'wintry',
'classes__form': 'border border-surface-200 p-4 space-y-4 rounded-container-token',
},
'mod': {
'archives': {},

4
src/lib/ae_utils.ts
View File

@@ -427,7 +427,7 @@ function handle_url_and_message(name: string, value: null|string) {
if (value) {
url.searchParams.set(name, value);
history.pushState({}, '', url);
// history.pushState({}, '', url);
// console.log('url:', url);
// pushState(url.href, {});
@@ -438,7 +438,7 @@ function handle_url_and_message(name: string, value: null|string) {
window.parent.postMessage(message, "*");
} else {
url.searchParams.delete(name);
history.pushState({}, '', url);
// history.pushState({}, '', url);
// console.log('url:', url);
// pushState({}, '', url.search);

102
src/lib/element_data_store.svelte
View File

@@ -9,6 +9,7 @@ import { ae_util } from '$lib/ae_utils';
import type { key_val } from '$lib/ae_stores';
export let ds_code: string;
export let ds_name: string;
export let ds_type: string = 'text';
export let for_type: string;
export let for_id: string;
@@ -26,7 +27,9 @@ export let show_delete_btn: boolean = false;
export let debug: boolean = false;
let ae_promises: key_val = {}; // Promise<any>;
let data_store_results: Promise<any>|key_val;
let ds_get_results: Promise<any>|key_val;
let ds_loading_status: string = 'starting...';
let ds_submit_results: Promise<any>|key_val;
let val_json: key_val;
let val_html: key_val;
@@ -40,13 +43,13 @@ let ds_code_obj =
id: null,
account_id: null,
code: ds_code,
name: ds_name,
type: ds_type,
for_type: null, // for_type
for_id: null, // for_id
access_read: null, // 'super', 'administrator', 'trusted', 'anonymous'
access_write: null, // 'super', 'administrator', 'trusted', 'anonymous'
access_delete: null, // 'super', 'administrator', 'trusted', 'anonymous'
name: null,
html: null,
json: null,
md: null,
@@ -57,34 +60,36 @@ let ds_code_obj =
let ae_ds_loc: Writable<key_val> = localStorageStore(`ae_ds__${ds_code}`, ds_code_obj);
console.log(`ae_ Data Store ${ds_code} = `, $ae_ds_loc);
if (!$ae_ds_loc.id) {
ds_loading_status = '-- loading --';
}
$ae_sess.ds.submit_status = null;
$ae_sess.ds.create_status = null;
$ae_sess.ds.update_status = null;
$slct_trigger = 'load__ds__code';
let trigger: null|string = 'load__ds__code';
onMount(() => {
console.log('Element: Data Store element_data_store.svelte');
if (ds_code && ds_type) {
$slct_trigger = 'load__ds__code';
}
// if (ds_code && ds_type) {
// trigger = 'load__ds__code';
// $slct_trigger = 'load__ds__code';
// }
});
// let ds_code_li = {}; //: key_val; // = ae_loc_tmp.ds;
// console.log(`ae_ ds_code_li = `, ds_code_li);
$: if ($slct_trigger == 'load__ds__code' && ds_code && ds_type) {
$slct_trigger = null;
$: if (trigger == 'load__ds__code' && ds_code && ds_type) {
trigger = null;
load_data_store({
code: ds_code,
type: ds_type,
for_type: for_type,
for_id: for_id,
store: store,
display: display,
class_li: class_li,
try_cache: try_cache
});
}
@@ -97,24 +102,8 @@ async function load_data_store({
try_cache=true
}) {
// if ($ae_ds_loc) {
// console.log(`ae_ Data Store ${code} = `, $ae_ds_loc);
// // ds_code_val = ae_ds_loc;
// // if (type == 'html') {
// // val_html = $ae_ds_loc.text;
// // } else if (type == 'json') {
// // val_json = $ae_ds_loc.json;
// // } else if (type == 'md') {
// // val_md = $ae_ds_loc.text;
// // } else if (type == 'sql') {
// // val_sql = $ae_ds_loc.text;
// // } else {
// // val_text = $ae_ds_loc.text;
// // }
// }
let ds_code_val = await api.get_data_store_obj_w_code({
// let ds_code_val = await api.get_data_store_obj_w_code({
ds_get_results = api.get_data_store_obj_w_code({
api_cfg: $ae_api,
data_store_code: code,
data_type: type,
@@ -154,11 +143,14 @@ async function load_data_store({
val_text = ds_results.text;
return ds_results.text;
}
} else {
ds_loading_status = '-- not found --';
}
})
.catch(function (error) {
console.log(`Something went wrong. for code ${code}`);
console.log(error);
ds_loading_status = '-- error --';
return false;
});
// .finally(function (ds_val_result) {
@@ -209,14 +201,20 @@ async function handle_submit_form(event) {
if (typeof data_store_di.ds_code !== 'undefined') {
data_store_do['code'] = data_store_di.ds_code;
} else {
data_store_do['code'] = ds_code;
}
if (typeof data_store_di.ds_name !== 'undefined') {
data_store_do['name'] = data_store_di.ds_name;
} else {
data_store_do['name'] = ds_name;
}
if (typeof data_store_di.ds_type !== 'undefined') {
data_store_do['type'] = data_store_di.ds_type;
} else {
data_store_do['type'] = ds_type;
}
if (typeof data_store_di.ds_for_type !== 'undefined' && data_store_di.ds_for_type) {
@@ -268,7 +266,7 @@ async function handle_submit_form(event) {
if (!$ae_ds_loc.id) {
// Create
console.log(`ae_ Data Store Create:`, data_store_do);
data_store_results = handle_create__data_store({
ds_submit_results = handle_create__data_store({
obj_type: 'data_store',
data: data_store_do
})
@@ -294,7 +292,7 @@ async function handle_submit_form(event) {
} else {
// Update
console.log(`ae_ Data Store Update:`, data_store_do);
data_store_results = handle_update__data_store({
ds_submit_results = handle_update__data_store({
obj_type: 'data_store',
obj_id: $ae_ds_loc.id,
data: data_store_do
@@ -437,7 +435,7 @@ async function handle_update__data_store({
value={$ae_ds_loc.id}
/>
{#if $ae_loc.administrator_access}
{#if $ae_loc.trusted_access}
<label for="ds_use_account_id" class="label text-xs inline">Use Account ID
<input
type="checkbox"
@@ -447,6 +445,8 @@ async function handle_update__data_store({
checked={$ae_ds_loc.account_id ? true : false}
/>
</label>
{/if}
{#if $ae_loc.administrator_access}
<input
type="text"
name="ds_account_id"
@@ -455,7 +455,6 @@ async function handle_update__data_store({
value={$ae_ds_loc.account_id}
/>
<input
type="text"
name="ds_code"
@@ -464,6 +463,8 @@ async function handle_update__data_store({
value={$ae_ds_loc.code}
required
/>
{/if}
{#if $ae_loc.trusted_access}
<input
type="text"
name="ds_name"
@@ -472,6 +473,8 @@ async function handle_update__data_store({
value={$ae_ds_loc.name}
required
/>
{/if}
{#if $ae_loc.administrator_access}
<input
type="text"
name="ds_type"
@@ -515,6 +518,10 @@ async function handle_update__data_store({
placeholder="Access delete"
value={$ae_ds_loc.access_delete}
/>
{:else}
Code: {$ae_ds_loc.code}
<!-- Name: {$ae_ds_loc.name} -->
Type: {$ae_ds_loc.type}
{/if}
{#if $ae_ds_loc.type == 'html' || $ae_ds_loc.type == null}
@@ -541,7 +548,8 @@ async function handle_update__data_store({
class="btn variant-soft-warning"
on:click={() => {
if (confirm('Are you sure you want to delete this data store?')) {
$slct_trigger = 'delete__ds__code';
trigger = 'delete__ds__code';
// $slct_trigger = 'delete__ds__code';
}
show_edit = false;
show_view = true;
@@ -560,30 +568,31 @@ async function handle_update__data_store({
}}
>
<span class="fas fa-times mx-1"></span>
Cancel
Close
</button>
<button
type="submit"
class="btn variant-soft-primary"
disabled={data_store_results instanceof Promise}
disabled={ds_submit_results instanceof Promise}
on:click={() => {
$slct_trigger = 'save__ds__code';
trigger = 'save__ds__code';
// $slct_trigger = 'save__ds__code';
}}
>
<span class="fas fa-save mx-1"></span>
Save
</button>
{#await data_store_results}
{#await ds_submit_results}
<div class="modal-loading">
<span class="fas fa-spinner fa-spin"></span>
<span class="loading-text">
Saving...
</span>
</div>
{:then data_store_results}
{#if data_store_results}
{:then ds_submit_results}
{#if ds_submit_results}
<span class="fas fa-check text-green-500"></span>
<span class="saved-text">
Saved
@@ -625,6 +634,7 @@ async function handle_update__data_store({
{/if}
<button
type="button"
class="ae_btn_edit__ds btn hover:variant-glass-warning text-xs absolute top-0 right-0 opacity-75 hover:opacity-100 transition delay-700 hover:delay-200 m-1 p-1"
on:click={() => {
show_edit = true;
@@ -636,6 +646,7 @@ async function handle_update__data_store({
</button>
<!-- {/if} -->
{:else}
{/if}
@@ -650,6 +661,17 @@ async function handle_update__data_store({
{val_json}
</pre> -->
{#await ds_get_results}
<div class="modal-loading">
<span class="fas fa-spinner fa-spin"></span>
<span class="loading-text">
Loading...
</span>
</div>
{/await}
<!-- {ds_loading_status} -->
</div>

3
src/routes/events_badges/+page.svelte
View File

@@ -49,11 +49,12 @@ onMount(() => {
ds_type="html"
for_type="event"
for_id={$slct.event_id}
ds_name="Default: Events Badges Example"
store="local"
display="block"
class_li="variant-ghost-surface p-2"
try_cache={true}
show_edit={true}
show_edit={false}
/>
</section>

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

@@ -4,15 +4,14 @@ import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
function number_w_commas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
// This works and uses local storage:
// store_current_tab must be prefixed with $ to be reactive.
import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
import type { Writable } from 'svelte/store';
import Element_data_store from '$lib/element_data_store.svelte';
const store_current_tab: Writable<string> = localStorageStore('ae_events_speakers_current_tab', 'start');
console.log(`store_current_tab:`, $store_current_tab);
@@ -52,7 +51,6 @@ onMount(() => {
}
});
const cForm = 'border border-surface-200 p-4 space-y-4 rounded-container-token';
let ae_promises: key_val = {}; // Promise<any>;
@@ -555,7 +553,7 @@ async function handle_update__event_presenter({
<p>The details provided will be used to list you as a speaker in our CHOW promotional materials and during CHOW in the event mobile app, speaker introductions, etc.</p>
<form
class="modal-form {cForm}"
class="modal-form {$ae_loc.hub.classes__form}"
on:submit|preventDefault={handle_submit_form}
>
@@ -636,7 +634,17 @@ async function handle_update__event_presenter({
<!-- </section> -->
<fieldset class="mb-8">
<legend class="legend input_required">Agreements & Accommodations</legend>
<legend class="legend input_required">Agreements</legend>
<!-- <Element_data_store
ds_code="events_speakers__form__waiver_html"
ds_type="html"
for_type="devent"
for_id={$slct.event_id}
ds_name="Default: Events Speakers Form - Waiver HTML"
display="block"
class_li=""
/> -->
<label for="agree" class="label">
<input
@@ -650,6 +658,18 @@ async function handle_update__event_presenter({
>
Yes, I grant the Foundation permission to use my biography, photo, and presentation, materials and verbal remarks on the Foundation website and promotional materials. I understand that summarized remarks will be sent to me for review prior to inclusion.
</label>
<!-- <label for="agree" class="label">
<input
type="checkbox"
class="checkbox variant-glass-warning"
id="agree"
name="agree"
value="1"
checked={$slct.event_presenter_obj.agree}
required
>
Yes, I understand the permissions.
</label> -->
<!-- <label for="accommodations" class="label">
<input
@@ -666,7 +686,7 @@ async function handle_update__event_presenter({
<button
type="submit"
class="btn variant-filled-primary m-2"
class="btn variant-glass-primary m-2"
disabled={($ae_sess.mod.events.disable_submit__event_presenter_obj)}
on:click={() => {
console.log('*** Start save and email button clicked ***');
@@ -692,7 +712,7 @@ async function handle_update__event_presenter({
<button
type="submit"
class="btn variant-filled-primary m-2"
class="btn variant-glass-primary m-2"
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
on:click={() => {
console.log('*** Save start button clicked ***');
@@ -713,7 +733,7 @@ async function handle_update__event_presenter({
<section class="biograhpy space-y-4">
<form
class="modal-form {cForm}"
class="modal-form {$ae_loc.hub.classes__form}"
on:submit|preventDefault={handle_submit_form}
>
<label class="label ae_label event_presenter__biography required variant-glass-warning space-y-4">
@@ -737,7 +757,7 @@ async function handle_update__event_presenter({
<div class="flex flex-wrap gap-2 p-1">
<button
type="submit"
class="btn {parent.buttonPositive} btn-sm"
class="btn variant-glass-primary m-2"
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
on:click={() => {
console.log('*** Save button clicked ***');
@@ -761,7 +781,7 @@ async function handle_update__event_presenter({
<form
class="modal-form {cForm}"
class="modal-form {$ae_loc.hub.classes__form}"
on:submit|preventDefault={handle_submit_form_files}
>
@@ -798,7 +818,7 @@ async function handle_update__event_presenter({
<button
type="submit"
class="btn {parent.buttonPositive}"
class="btn variant-glass-primary m-2"
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
on:click={() => {
console.log('*** Save button clicked ***');
@@ -818,7 +838,7 @@ async function handle_update__event_presenter({
<form
class="modal-form {cForm}"
class="modal-form {$ae_loc.hub.classes__form}"
on:submit|preventDefault={handle_submit_form}
>
<!-- Ask for common social media URLs. (Twitter, Facebook, Instagram, etc) -->
@@ -869,7 +889,7 @@ async function handle_update__event_presenter({
<button
type="submit"
class="btn {parent.buttonPositive}"
class="btn variant-glass-primary m-2"
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
on:click={() => {
console.log('*** Save more button clicked ***');
@@ -902,7 +922,7 @@ async function handle_update__event_presenter({
// $slct.event_presenter_id = null;
// $slct.event_presenter_obj = {};
}}
class="btn variant-filled-warning mx-1"
class="btn variant-glass-warning mx-1"
class:hidden={!$ae_loc.trusted_access}
title="CURRENTLY DISABLED: Delete record permanently"
>
@@ -942,8 +962,8 @@ async function handle_update__event_presenter({
{/await}
<button class="btn variant-filled-primary" on:click={parent.onClose}>
<span class="fas fa-window-close mx-1"></span>
<button class="btn variant-glass-primary" on:click={parent.onClose}>
<span class="fas fa-times mx-1"></span>
Close
</button>

39
src/routes/events_speakers/10_view_modal__event_presenter_obj.svelte
View File

@@ -2,18 +2,28 @@
import type { SvelteComponent } from 'svelte';
import { onMount } from 'svelte';
// Stores
// This works and uses local storage:
// store_current_tab must be prefixed with $ to be reactive.
import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, RadioGroup, RadioItem, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
import type { Writable } from 'svelte/store';
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';
// Stores
// Props
/** Exposes parent props to this component. */
export let parent: SvelteComponent;
console.log(`Parent:`, parent);
export let container_class_li = '';
const modalStore = getModalStore();
if ($slct.event_presenter_id) {
console.log(`Presenter ID selected: ${$slct.event_presenter_id}`);
console.log(`Presenter object selected:`, $slct.event_presenter_obj);
@@ -29,10 +39,16 @@ onMount(() => {
<!-- @component This is the Presenters modal view form. -->
{#if $modalStore[0]}
<section class="svelte_component ae_view_modal ae_obj__event_presenter {container_class_li} p-4 space-y-4">
<header class={parent.regionHeader}>
{@html $slct.event_presenter_obj.full_name}
<button class="btn variant-glass-primary float-end" on:click={parent.onClose}>
<span class="fas fa-times mx-1"></span>
Close
</button>
</header>
<p>This quick view of a presenter's information is customizable or can be hidden completely.</p>
@@ -109,10 +125,11 @@ onMount(() => {
</div>
<footer class="{parent.regionFooter}">
{#if $ae_loc.trusted_access || $slct.event_presenter_obj.external_person_id === $ae_loc.ae_uuid || $slct.event_presenter_obj.email === $ae_loc.ae_email}
<span>
{#if $ae_loc.trusted_access}
<span class="ae_options mx-1">
<button
class="btn variant-filled-warning mx-1"
class="btn variant-glass-warning mx-1"
on:click={() => {
if (!confirm(`Are you sure you want to send this email to ${$slct.event_presenter_obj.email}?`)) {return false;}
@@ -127,8 +144,7 @@ onMount(() => {
}}
>
<span class="fas fa-paper-plane mx-1
"></span>
<span class="fas fa-paper-plane mx-1"></span>
Send Email
</button>
@@ -139,7 +155,7 @@ onMount(() => {
parent.onClose();
$slct_trigger = 'show_edit__event_presenter_obj';
}}
class="btn variant-filled-warning mx-1"
class="btn variant-glass-warning mx-1"
title={`Edit presenter: ${$slct.event_presenter_obj.name}`}
>
<span class="fas fa-edit mx-1"></span> Edit
@@ -147,20 +163,15 @@ onMount(() => {
</span>
{/if}
<!-- <button
class="btn variant-filled-primary mx-1"
on:click={() => {parent.onClose();}}
>
<span class="fas fa-times mx-1"></span>
Close
</button> -->
<button class="btn variant-glass-primary" on:click={parent.onClose}>
<span class="fas fa-times mx-1"></span>
Close
</button>
</footer>
</section>
{/if}
<style>

27
src/routes/sponsorships/+page.svelte
View File

@@ -64,10 +64,13 @@ function handle_modal_close(response: boolean | undefined) {
ae_util.handle_url_and_message('sponsorship_id', null);
// We do NOT want to keep these values if it is closed and not just switching from view to edit. A "smart" transition?
if (!$ae_loc.mod.sponsorships.show_edit__sponsorship_obj && !$ae_loc.mod.sponsorships.show_view__sponsorship_obj) {
// if (!$ae_loc.mod.sponsorships.show_edit__sponsorship_obj && !$ae_loc.mod.sponsorships.show_view__sponsorship_obj) {
console.log('Clearing the modal store and the selected sponsorship object.');
$slct.sponsorship_id = null;
$slct.sponsorship_obj = null;
}
// } else {
// console.log('Not clearing the modal store and the selected sponsorship object.');
// }
}
@@ -98,7 +101,8 @@ onMount(() => {
ae_util.handle_url_and_message('sponsorship_cfg_id', $slct.sponsorship_cfg_id);
ae_util.handle_url_and_message('sponsorship_id', $slct.sponsorship_id);
if ($slct.sponsorship_id) {
console.log(`Got an ID. Let's show the modal!`);
console.log(`Got an ID. Let's clear the modal store and show the modal!`);
modalStore.clear();
modalStore.trigger(modal_edit__sponsorship_obj);
}
});
@@ -112,7 +116,7 @@ $: if ($slct_trigger == 'show_edit__sponsorship_obj' && $ae_loc.mod.sponsorships
let location = window.location.href;
const url = new URL(location);
url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
history.pushState({}, '', url);
// history.pushState({}, '', url);
let message = {'sponsorship_id': $slct.sponsorship_id};
window.parent.postMessage(message, "*");
@@ -130,7 +134,7 @@ $: if ($slct_trigger == 'show_view__sponsorship_obj' && $ae_loc.mod.sponsorships
let location = window.location.href;
const url = new URL(location);
url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
history.pushState({}, '', url);
// history.pushState({}, '', url);
// modalStore.clear();
modalStore.trigger(modal_view__sponsorship_obj);
@@ -261,12 +265,13 @@ async function handle_load_ae_obj_id__sponsorship_cfg({sponsorship_cfg_id, try_c
// For CHOW 2024 only
$ae_loc.mod.sponsorships.level_guest_max_li = {
0: 0,
1: 4, // Friend
2: 8,
3: 8, // Champion
4: 8, // Advocate
5: 8, // Presenting Partner
6: 16, // Signature Partner
1: 4, // CHOW 2024 - Friend
2: 8, // CHOW 2024 - Supporter
3: 8, // CHOW 2024 - Advocate
4: 8, // CHOW 2024 - Champion
5: 8, // CHOW 2024 - Presenting Partner
6: 16, // CHOW 2024 - Signature Partner
7: 16, // CHOW 2024 - Premier Partner
};
// $ae_loc.mod.sponsorships.level_guest_max_li = {
// '0': 0,

133
src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte
View File

@@ -80,7 +80,6 @@ onMount(() => {
// console.log($slct.sponsorship_obj.address_li_json.mailing);
});
const cForm = 'border border-surface-200 p-4 space-y-4 rounded-container-token';
let ae_promises: key_val = {}; // Promise<any>;
@@ -697,7 +696,10 @@ async function handle_update__sponsorship({
{#if $modalStore[0]}
<div class="svelte_component ae_edit_modal ae_obj__sponsorship {container_class_li}">
<header class={parent.regionHeader}>
{$modalStore[0].title ?? '-- No Title --'}
{$modalStore[0].title ?? '-- No Title --'}:
{$slct.sponsorship_obj.level_str}
({$slct.sponsorship_obj.level_num})
{#await ae_promises.update__sponsorship_obj}
<div class="modal-loading">
@@ -850,7 +852,7 @@ async function handle_update__sponsorship({
<form
class="modal-form {cForm}"
class="modal-form {$ae_loc.hub.classes__form}"
on:submit|preventDefault={handle_submit_form}
>
<!-- <section class="ae_section sponsorship__contacts border border-gray-500/20 p-4"> -->
@@ -861,8 +863,7 @@ async function handle_update__sponsorship({
<div class="label">
<span class="input_required">Select sponsorship level:</span>
{#if $slct.sponsorship_cfg_obj}
<!--
Example JSON level_li_json:
<!-- Example JSON level_li_json:
{
"1": {
"name": "Friend",
@@ -919,7 +920,7 @@ async function handle_update__sponsorship({
<span class="fas fa-check-circle"></span>
<span class="ae_value">Yes, marked as paid</span>
{:else}
<p class="variant-ghost-warning">Deadline to complete payment: April 15th, 2024</p>
<p class="variant-glass-error">Deadline to complete payment: April 15th, 2024</p>
<!-- <p>Return to the <a href="https://preconvirtual.com/chow-2024-faq/#Sponsorship">CHOW Sponsor Hub for Payment Options and Instruction</a> details.</p> -->
<p>Please refer to the sponsorship
@@ -1135,7 +1136,7 @@ async function handle_update__sponsorship({
<div class="flex flex-wrap gap-2 p-1">
<button
type="submit"
class="btn variant-filled-primary btn-sm"
class="btn variant-glass-primary btn-sm"
disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
on:click={() => {
console.log('*** Save button clicked ***');
@@ -1146,7 +1147,7 @@ async function handle_update__sponsorship({
</button>
<button
class="btn variant-filled-warning btn-sm"
class="btn variant-glass-warning btn-sm"
on:click={(event) => {
console.log('*** Delete button clicked ***');
if (!confirm('Are you sure you want to delete this contact?')) {return false;}
@@ -1172,7 +1173,7 @@ async function handle_update__sponsorship({
<div>
<button
class="btn btn-sm variant-filled-secondary m-2"
class="btn btn-sm variant-glass-secondary m-2"
on:click={() => {
console.log('*** Add contact button clicked ***');
// if (!confirm('Are you sure you want to add a contact?')) {return false;}
@@ -1223,6 +1224,7 @@ async function handle_update__sponsorship({
ds_type="html"
for_type="sponsorship_cfg"
for_id={$slct.sponsorship_cfg_id}
ds_name="Default: Sponsorships Form - Waiver HTML"
display="block"
class_li=""
/>
@@ -1246,10 +1248,11 @@ async function handle_update__sponsorship({
ds_type="html"
for_type="sponsorship_cfg"
for_id={$slct.sponsorship_cfg_id}
ds_name="Default: Sponsorships Form - Accommodations HTML"
display="block"
class_li=""
/>
<!-- <h3 class="h4">Special Accomodations</h3>
<!-- <h3 class="h4">Special Accommodations</h3>
<p class="text-sm">If you require any special accommodations in order to enhance/enable your involvement with CHOW please provide details in the text box below. A member of the CHOW team will reach out to assist.</p> -->
<label for="q_accommodations" class="label">
<input
@@ -1282,7 +1285,7 @@ async function handle_update__sponsorship({
<button
type="submit"
class="btn variant-filled-primary m-2"
class="btn variant-glass-primary m-2"
disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
on:click={() => {
console.log('*** Start save and email button clicked ***');
@@ -1308,7 +1311,7 @@ async function handle_update__sponsorship({
<button
type="submit"
class="btn variant-filled-primary m-2"
class="btn variant-glass-primary m-2"
disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
on:click={() => {
console.log('*** Start save and continue button clicked ***');
@@ -1329,7 +1332,7 @@ async function handle_update__sponsorship({
<form
class="modal-form {cForm}"
class="modal-form {$ae_loc.hub.classes__form}"
on:submit|preventDefault={handle_submit_form}
>
@@ -1458,7 +1461,7 @@ async function handle_update__sponsorship({
<button
type="submit"
class="btn variant-filled-primary m-2"
class="btn variant-glass-primary m-2"
disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
on:click={() => {
console.log('*** Save marketing button clicked ***');
@@ -1475,16 +1478,26 @@ async function handle_update__sponsorship({
<form
class="modal-form {cForm}"
class="modal-form {$ae_loc.hub.classes__form}"
on:submit|preventDefault={handle_submit_form}
>
<h3 class="h4">Exhibit Booth Information</h3>
<div class="text-sm space-y-4">
<p>Booth space is limted. Please select below if you would like to have a table top exhibit at CHOW.</p>
<Element_data_store
ds_code="sponsorships__form__exhibit_booth_info_html"
ds_type="html"
for_type="sponsorship_cfg"
for_id={$slct.sponsorship_cfg_id}
ds_name="Default: Sponsorships Form - Exhibit Booth Information HTML"
display="block"
class_li=""
/>
<!-- <div class="text-sm space-y-4">
<p>Booth space is limited. Please select below if you would like to have a table top exhibit at CHOW.</p>
<p>Booth specifications: Exhibit space is six feet wide by 3 feet deep. 10-feet-wide booth backdrops are not allowed. Banner signage or pop-up stands must fit behind the table in the 6-feet-wide space or on top of the table. Your space will include a six-foot skirted table and 2 chairs.</p>
</div>
</div> -->
<div class="space-y-2">
<div class="font-bold input_required">Would you like a table top exhibit at CHOW?</div>
@@ -1542,7 +1555,7 @@ async function handle_update__sponsorship({
<button
type="submit"
class="btn variant-filled-primary"
class="btn variant-glass-primary"
disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
on:click={() => {
console.log('*** Save button clicked ***');
@@ -1558,7 +1571,7 @@ async function handle_update__sponsorship({
{:else if $store_current_tab === 'session'}
<form
class="modal-form {cForm}"
class="modal-form {$ae_loc.hub.classes__form}"
on:submit|preventDefault={handle_submit_form}
>
@@ -1570,11 +1583,20 @@ async function handle_update__sponsorship({
>
<legend class="legend">Plenary Session</legend>
<div class="text-sm space-y-4">
<Element_data_store
ds_code="sponsorships__form__plenary_session_info_html"
ds_type="html"
for_type="sponsorship_cfg"
for_id={$slct.sponsorship_cfg_id}
ds_name="Default: Sponsorships Form - Plenary Session Information HTML"
display="block"
class_li=""
/>
<!-- <div class="text-sm space-y-4">
<p>Plenary sessions are available on a limited basis.</p>
<p>If you select "Yes", our CHOW Manager, Shannon Colbert will review your selection and be in touch with more details.</p>
</div>
</div> -->
<div class="font-bold">Are you interested in hosting a CHOW plenary session?</div>
<div class="space-y-2">
<label class="flex items-center space-x-2">
@@ -1641,13 +1663,22 @@ async function handle_update__sponsorship({
<fieldset class="mb-8 space-y-2">
<legend class="legend">Virtual Session</legend>
<div class="text-sm space-y-4">
<Element_data_store
ds_code="sponsorships__form__virtual_session_info_html"
ds_type="html"
for_type="sponsorship_cfg"
for_id={$slct.sponsorship_cfg_id}
ds_name="Default: Sponsorships Form - Virtual Session Information HTML"
display="block"
class_li=""
/>
<!-- <div class="text-sm space-y-4">
<p>General Information: Virtual sessions are a collaborative process, and the Foundation will have final approval on session topics and speakers. Hosted sessions should align with key priorities related to CHOW 2024's theme 'LEADERSHIP'. Partner organizations will develop and host a live, 45-minute session using Zoom (link provided by the Foundation). The session will be integrated into the CHOW 2024 virtual platform for conference attendees to join.</p>
<p>Virtual sessions are available on a limited basis.</p>
<p>If you select "Yes", our CHOW Manager, Shannon Colbert will review your selection and be in touch with more details. Once confirmed, a draft session form must be submitted by Thursday, April 13 and a final session form must be submitted no later than Thursday, May 4.</p>
</div>
</div> -->
<div class="font-bold">Are you interested in hosting a CHOW virtual session?</div>
<div class="space-y-2">
<label class="flex items-center space-x-2">
@@ -1679,7 +1710,7 @@ async function handle_update__sponsorship({
<button
type="submit"
class="btn variant-filled-primary"
class="btn variant-glass-primary"
disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
on:click={() => {
console.log('*** Save button clicked ***');
@@ -1696,25 +1727,32 @@ async function handle_update__sponsorship({
<form
class="modal-form {cForm}"
class="modal-form {$ae_loc.hub.classes__form}"
on:submit|preventDefault={handle_submit_form_files}
>
<section class="space-y-4">
<h2 class="h3">Logos</h2>
<div class="text-sm">
<Element_data_store
ds_code="sponsorships__form__logos_info_html"
ds_type="html"
for_type="sponsorship_cfg"
for_id={$slct.sponsorship_cfg_id}
ds_name="Default: Sponsorships Form - Logos Information HTML"
display="block"
class_li=""
/>
<!-- <div class="text-sm">
<p>Add your logo here. Your logo will be used throughout Capitol Hill Ocean Week.</p>
<!-- Hidden at the request of Jordan -->
<!-- <p>Please note that these items are required if your company would like to take advantage of the logo recognition benefits associated with this sponsorship level. To prevent delayed benefits fulfillment, please make sure to include this item here.</p> -->
<div>Recommend specs:
<ul class="list-disc list-inside">
<li>High resolution image</li>
<li>Most image types: PNG, WEBP, SVG, JPG, Illistrator, etc</li>
<li>Most image types: PNG, WEBP, SVG, JPG, Illustrator, etc</li>
<li>Max file size: 20 MB</li>
</ul>
</div>
</div>
</div> -->
<div class="flex flex-wrap gap-4">
@@ -1812,9 +1850,18 @@ async function handle_update__sponsorship({
<hr class="border border-gray-500/20" />
<h2 class="h3">Promo video</h2>
<div class="text-sm space-y-4">
<Element_data_store
ds_code="sponsorships__form__promo_info_html"
ds_type="html"
for_type="sponsorship_cfg"
for_id={$slct.sponsorship_cfg_id}
ds_name="Default: Sponsorships Form - Promo Information HTML"
display="block"
class_li=""
/>
<!-- <div class="text-sm space-y-4">
<p>Add your 30 to 60 second promotional video here. This video will play during Capitol Hill Ocean Week.</p>
<p class="variant-ghost-warning">Submission Deadline: Wednesday, May 24</p>
<p class="variant-glass-warning">Submission Deadline: Wednesday, May 24</p>
<div>Recommend specs:
<ul class="list-disc list-inside">
<li>30 to 60 seconds</li>
@@ -1824,7 +1871,7 @@ async function handle_update__sponsorship({
<li>Max file size: 400 MB</li>
</ul>
</div>
</div>
</div> -->
<span class="flex flex-col justify-between">
<label for="file_media_promo_video">
Upload your short second promotional video.
@@ -1857,7 +1904,7 @@ async function handle_update__sponsorship({
<button
type="submit"
class="btn variant-filled-primary"
class="btn variant-glass-primary"
disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
on:click={() => {
console.log('*** Save button clicked ***');
@@ -1879,7 +1926,7 @@ async function handle_update__sponsorship({
<div class="text-sm space-y-4">
<p>These are the guests that will be attending the Ocean Awards Gala. The maximum number is based on your currently selected sponsorship level.</p>
{#if $slct.sponsorship_obj.level_num == 0}
<p class="variant-ghost-warning">Please select a sponsorship level before adding guests.</p>
<p class="variant-glass-error">Please select a sponsorship level before adding guests.</p>
{:else}
<p class="">Included in your sponsorship are <strong>{$ae_loc.mod.sponsorships.level_guest_max_li[$slct.sponsorship_obj.level_num]} seats (
{$ae_loc.mod.sponsorships.level_guest_max_li[$slct.sponsorship_obj.level_num] == 4 ? 'half table' : ''}
@@ -1889,17 +1936,17 @@ async function handle_update__sponsorship({
<p>
Submit RSVPs below. You will have the opportunity to add names at a later date.
</p>
<p class="variant-ghost-warning">Deadline to submit RSVPs is May 15, 2024.</p>
<p class="variant-glass-error">Deadline to submit RSVPs is May 15, 2024.</p>
{/if}
</div>
{#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length >= $ae_loc.mod.sponsorships.level_guest_max_li[$slct.sponsorship_obj.level_num]}
<div class="variant-filled-warning"><span class="fas fa-lock mx-1"></span> Max! You have reached the maximum number of guests for your selected sponsorship level.</div>
<div class="variant-glass-warning"><span class="fas fa-lock mx-1"></span> Max! You have reached the maximum number of guests for your selected sponsorship level.</div>
<!-- <span class="fas fa-lock mx-1"></span> -->
{:else}
<button
class="btn btn-sm variant-filled-secondary m-2"
class="btn btn-sm variant-glass-secondary m-2"
on:click={() => {
console.log('*** Add guest button clicked ***');
// if (!confirm('Are you sure you want to add a guest?')) {return false;}
@@ -2056,7 +2103,7 @@ async function handle_update__sponsorship({
<div class="flex flex-wrap gap-2 p-1">
<button
type="submit"
class="btn variant-filled-primary btn-sm"
class="btn variant-glass-primary btn-sm"
disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
on:click={() => {
console.log('*** Save button clicked ***');
@@ -2070,7 +2117,7 @@ async function handle_update__sponsorship({
</button>
<button
class="btn variant-filled-warning btn-sm"
class="btn variant-glass-warning btn-sm"
on:click={(event) => {
console.log('*** Delete button clicked ***');
if (!confirm('Are you sure you want to delete this guest?')) {return false;}
@@ -2107,7 +2154,7 @@ async function handle_update__sponsorship({
<form
class="modal-form {cForm}"
class="modal-form {$ae_loc.hub.classes__form}"
on:submit|preventDefault={handle_submit_form}
>
@@ -2171,7 +2218,7 @@ async function handle_update__sponsorship({
// $slct.sponsorship_id = null;
// $slct.sponsorship_obj = {};
}}
class="btn variant-filled-warning mx-1"
class="btn variant-glass-warning mx-1"
class:hidden={!$ae_loc.trusted_access}
title="Delete record permanently"
>

28
src/routes/sponsorships/10_view_modal__sponsorship_obj.svelte
View File

@@ -2,18 +2,28 @@
import type { SvelteComponent } from 'svelte';
import { onMount } from 'svelte';
// Stores
// This works and uses local storage:
// store_current_tab must be prefixed with $ to be reactive.
import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, RadioGroup, RadioItem, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
import type { Writable } from 'svelte/store';
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';
// Stores
// Props
/** Exposes parent props to this component. */
export let parent: SvelteComponent;
console.log(`Parent:`, parent);
export let container_class_li = '';
const modalStore = getModalStore();
if ($slct.sponsorship_id) {
console.log(`Sponsorship ID selected: ${$slct.sponsorship_id}`);
console.log(`Sponsorship object selected:`, $slct.sponsorship_obj);
@@ -29,6 +39,7 @@ onMount(() => {
<!-- @component This is the Sponsorships modal view form. -->
{#if $modalStore[0]}
<section class="svelte_component ae_view_modal ae_obj__sponsorship_obj {container_class_li} p-4 space-y-4">
<header class={parent.regionHeader}>
@@ -149,10 +160,11 @@ onMount(() => {
</div>
<footer class="{parent.regionFooter}">
{#if $ae_loc.trusted_access}
<div class="ae_options mx-1">
<button
class="btn variant-filled-warning mx-1"
class="btn variant-glass-warning mx-1"
on:click={() => {
if (!confirm(`Are you sure you want to send this email to ${$slct.sponsorship_obj.poc_json.email}?`)) {return false;}
@@ -167,8 +179,7 @@ onMount(() => {
}}
>
<span class="fas fa-paper-plane mx-1
"></span>
<span class="fas fa-paper-plane mx-1"></span>
Send Email
</button>
@@ -179,23 +190,26 @@ onMount(() => {
parent.onClose();
$slct_trigger = 'show_edit__sponsorship_obj';
}}
class="btn variant-filled-warning mx-1"
class="btn variant-glass-warning mx-1"
title={`Edit sponsorship: ${$slct.sponsorship_obj.name}`}
>
<span class="fas fa-edit mx-1"></span> Edit
</button>
</div>
{/if}
<button
class="btn variant-filled-primary mx-1"
on:click={() => {parent.onClose();}}
class="btn variant-glass-primary mx-1"
on:click={parent.onClose}
>
<span class="fas fa-times mx-1"></span>
Close
</button>
</footer>
</section>
{/if}
<style>