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

I should have saved this long ago. Lots of changes. Learning a lot as well!

Browse Source
This commit is contained in:
Scott Idem
2024-02-16 20:12:19 -05:00
parent cb9bd1648c
commit 9958724aaa
681 changed files with 831 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app.html
View File

@@ -5,6 +5,12 @@
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
@@ -13,7 +19,7 @@
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" data-theme="modern">
<body data-sveltekit-preload-data="hover" data-theme="wintry">
<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
</body>
</html>

44
src/app.postcss
View File

@@ -5,12 +5,48 @@
html,
body {
@apply h-full overflow-hidden;
@apply h-full overflow-hidden;
/* font-family: 'Liberation Sans', sans-serif; */
/* font-family: 'Noto Sans', sans-serif; */
}
/* default theme */
/* @font-face {
font-family: 'Liberation Sans', sans-serif;
font-family: 'Noto Sans', sans-serif;
src: url('/fonts/liberation/LiberationSans-Regular.ttf');
src: url('/fonts/noto/NotoSans-Regular.ttf');
font-display: swap;
} */
/* modern theme */
@font-face {
font-family: 'Quicksand';
src: url('/fonts/Quicksand.ttf');
font-display: swap;
font-family: 'Quicksand';
src: url('/fonts/Quicksand.ttf');
font-display: swap;
}
:root [data-theme='modern'] {
/* --theme-rounded-base: 20px;
--theme-rounded-container: 4px; */
--theme-font-family-base: 'Liberation Sans', sans-serif;
--theme-font-family-heading: 'Liberation Sans', sans-serif;
}
.card-footer {
border-top: 1px solid hsla(0, 0%, 0%, 0.5);
margin-top: 1em;
padding-top: 1em;
opacity: .5;
}
.ae_modal_scrollfix {
/* Allow modal content to scroll if it's too long */
overflow-y: auto;
max-height: 96vh;
/* max-height: 99%; */
}

24
src/lib/ae_stores.ts
View File

@@ -34,6 +34,7 @@ export let ae_app_local_data_struct: key_val = {
'theme': 'light',
'account_id': ae_account_id, // OSIT Demo _XY7DXtc9MY
'site_domain': null, // https://example.com, https://dev.example.com, etc.
'administrator_access': true,
'ds': {},
'hub': {
'ds': {},
@@ -41,6 +42,7 @@ export let ae_app_local_data_struct: key_val = {
'mod': { // module
'events': {},
'sponsorships': {
show_edit__sponsorship_obj: false,
show_list__sponsorship_obj_li: true,
show_view__sponsorship_obj: false,
},
@@ -93,6 +95,26 @@ export let ae_api = writable(ae_api_data_struct);
export let slct_trigger: any = writable(null);
console.log(`Aether Config - Selected Trigger:`, slct_trigger);
let slct_obj_template: key_val = { 'sponsorship_id': null, 'sponsorship_obj': {}, 'post_id': null, 'post_obj': {}, 'post_obj_li': [], 'post_comment_id': null, 'post_comment_obj': {}, 'post_comment_obj_li': [] };
let slct_obj_template: key_val = {
'account_id': null,
'account_obj': {},
'event_id': null,
'event_obj': {},
'event_exhibit_id': null,
'event_exhibit_obj': {},
'event_presentation_id': null,
'event_presentation_obj': {},
'event_presenter_id': null,
'event_presenter_obj': {},
'event_session_id': null,
'event_session_obj': {},
'sponsorship_id': null,
'sponsorship_obj': {},
'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);

29
src/routes/+layout.svelte
View File

@@ -5,18 +5,28 @@ import { AppShell, AppBar, initializeStores } from '@skeletonlabs/skeleton';
// Initialize the stores for Drawer, Modal, and Toast so they work throughout the app.
initializeStores();
import { Drawer, Modal, getDrawerStore } from '@skeletonlabs/skeleton';
// import type {
// DrawerSettings, DrawerComponent, DrawerStore,
// // ModalSettings, ModalComponent, ModalStore
// } from '@skeletonlabs/skeleton';
import type {
// DrawerSettings, DrawerComponent, DrawerStore,
ModalSettings, ModalComponent, ModalStore
} from '@skeletonlabs/skeleton';
const drawerStore = getDrawerStore();
import ModalComponentEditSponsorshipObj from './sponsorships/10_edit_modal__sponsorship_obj.svelte';
const modalRegistry: Record<string, ModalComponent> = {
// Set a unique modal ID, then pass the component reference
modalComponentEditSponsorshipObj: { ref: ModalComponentEditSponsorshipObj },
// modalComponentTwo: { ref: ModalComponentTwo },
// ...
};
// Highlight JS
import hljs from 'highlight.js/lib/core';
import 'highlight.js/styles/github-dark.css';
import type { Writable } from 'svelte/store';
import { get } from 'svelte/store';
import { page } from "$app/stores";
import { localStorageStore, storeHighlightJs } from '@skeletonlabs/skeleton';
import xml from 'highlight.js/lib/languages/xml'; // for HTML
import css from 'highlight.js/lib/languages/css';
@@ -111,7 +121,7 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
</script>
<Modal />
<Modal components={modalRegistry} />
<Drawer>
@@ -122,10 +132,10 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
{:else if $drawerStore.id === 'sponsorships__edit'}
(show 'sponsorships__edit__sponsorship_obj' contents)
<section class="sponsorships_editing">
{#if $slct.sponsorship_obj && $ae_loc.mod.sponsorships.show_edit__sponsorship_obj}
<!-- {#if $slct.sponsorship_obj && $ae_loc.mod.sponsorships.show_edit__sponsorship_obj}
<p>Edit!</p>
<Edit_sponsorship_obj />
{/if}
{/if} -->
</section>
{:else}
(fallback contents)
@@ -151,10 +161,12 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
<a
class="btn btn-sm variant-ghost-surface"
class:active={$page.url.pathname==='/sponsorships'}
href="/sponsorships">Sponsorships</a>
<a
class="btn btn-sm variant-ghost-surface"
class:active={$page.url.pathname==='/event_speakers'}
href="/event_speakers">Speakers</a>
</svelte:fragment>
</AppBar>
@@ -191,6 +203,9 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
</svelte:fragment>
</AppBar> -->
</svelte:fragment>
<!-- Page Route Content -->
<slot />

14
src/routes/sponsorships/+layout.svelte Normal file
View File

@@ -0,0 +1,14 @@
<script lang="ts">
/** @type {import('./$types').LayoutData} */
export let data;
</script>
<h1>Sponsorships Layout?</h1>
<!-- <div class="submenu">
{#each data.sections as section}
<a href="/settings/{section.slug}">{section.title}</a>
{/each}
</div> -->
<slot></slot>

18
src/routes/sponsorships/+layout.ts
View File

@@ -0,0 +1,18 @@
/** @type {import('./$types').LayoutLoad} */
export function load({ params, url }) { // route
console.log(`page data - params:`, params);
// console.log(`page data - route:`, route);
console.log(`page data - url:`, url);
let data_struct = {
params: params,
sections: [
{ slug: 'new', title: 'New Sponsorship' },
{ slug: 'manage', title: 'Manage' },
{ slug: 'test', title: 'Test' },
],
url: url,
};
return data_struct;
}

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

@@ -5,21 +5,37 @@ import { onMount } from 'svelte';
import { getDrawerStore, getModalStore } from '@skeletonlabs/skeleton';
import type {
DrawerSettings,
// ModalSettings, ModalComponent, ModalStore
ModalSettings
, ModalComponent, ModalStore
} from '@skeletonlabs/skeleton';
const modalStore = getModalStore();
import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import Edit_sponsorship_obj from './10_edit__sponsorship_obj.svelte';
// import Edit_sponsorship_obj from './10_edit__sponsorship_obj.svelte';
import Edit_modal_sponsorship_obj from './10_edit_modal__sponsorship_obj.svelte';
import List_sponsorship_obj from './10_list__sponsorship_obj.svelte';
import View_sponsorship_obj from './10_view__sponsorship_obj.svelte';
import View_modal_sponsorship_obj from './10_view_modal__sponsorship_obj.svelte';
const modalComponentViewSponsorshipObj: ModalComponent = { ref: View_modal_sponsorship_obj };
const modal_view__sponsorship_obj: ModalSettings = {
type: 'component',
component: modalComponentViewSponsorshipObj,
};
type key_val = {
[key: string]: any;
};
export let data;
console.log(`page data:`, data);
let ae_account_obj_get_promise;
let ae_sponsorship_obj_li_get_promise;
@@ -155,7 +171,83 @@ async function handle_load_ae_sponsorship_obj_li({account_id, try_cache=true}) {
return ae_sponsorship_obj_li_get_promise;
}
$: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
console.log('Selected Sponsorship ID:', $slct.sponsorship_id);
console.log('Selected Sponsorship Object:', $slct.sponsorship_obj);
$slct_trigger = null;
handle_load_ae_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});
}
let ae_sponsorship_obj_get_promise;
async function handle_load_ae_sponsorship_id_obj({sponsorship_id, try_cache=false}) {
console.log('*** handle_load_sponsorship_id_obj() ***');
let params = {};
// $ae_loc.hub.sponsorship_id_qry_status = 'loading';
ae_sponsorship_obj_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'sponsorship',
obj_id: sponsorship_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: 2
})
.then(function (sponsorship_obj_get_result) {
if (sponsorship_obj_get_result) {
$slct.sponsorship_obj = sponsorship_obj_get_result;
console.log(`sponsorship object:`, $slct.sponsorship_obj);
}
// Auto show the selected sponsorship ID
// Is this pushState needed here?
// Set the URL param "sponsorship_id" to the current sponsorship ID.
// const url = new URL(location);
// url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
// history.pushState({}, '', url);
// Is this postMessage needed here?
// let message = {'sponsorship_id': $slct.sponsorship_id};
// window.parent.postMessage(message, "*");
// modalStore.trigger(modal_view__sponsorship_obj);
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
return ae_sponsorship_obj_get_promise;
}
const modal_edit__sponsorship_obj: ModalSettings = {
type: 'component',
component: 'modalComponentEditSponsorshipObj',
title: 'Edit Sponsorship',
};
// const modal_view__sponsorship_obj: ModalSettings = {
// type: 'component',
// component: 'modal_component_view__sponsorship_obj',
// };
// $: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
// console.log('Selected Sponsorship ID:', $slct.sponsorship_id);
// console.log('Selected Sponsorship Object:', $slct.sponsorship_obj);
// $slct_trigger = null;
// }
$: if ($ae_loc.mod.sponsorships.show_edit__sponsorship_obj) {
console.log('Show Modal Edit');
modalStore.trigger(modal_edit__sponsorship_obj);
} else if ($ae_loc.mod.sponsorships.show_view__sponsorship_obj) {
console.log('Show Modal View');
// modalStore.trigger(modalComponentViewSponsorshipObj);
modalStore.trigger(modal_view__sponsorship_obj);
}
// const modal: ModalSettings = {
// type: 'alert',
@@ -232,19 +324,19 @@ const drawer_settings_y: DrawerSettings = {
{/if}
</section>
<section class="sponsorships_editing">
<!-- <section class="sponsorships_editing">
{#if $slct.sponsorship_obj && $ae_loc.mod.sponsorships.show_edit__sponsorship_obj}
<p>Edit!</p>
<Edit_sponsorship_obj />
{/if}
</section>
</section> -->
<section class="sponsorships_viewing">
<!-- <section class="sponsorships_viewing">
{#if $slct.sponsorship_obj && $ae_loc.mod.sponsorships.show_view__sponsorship_obj}
<p>Viewing!</p>
<View_sponsorship_obj />
{/if}
</section>
</section> -->
</div>
</div>

2
src/routes/sponsorships/10_edit__sponsorship_obj.svelte
View File

@@ -29,7 +29,7 @@ if ($slct.sponsorship_id) {
// console.log(`Sponsorship ID selected: ${$slct.sponsorship_id}`);
// console.log(`Sponsorship Object selected: ${$slct.sponsorship_obj}`)
$slct_trigger = 'load__sponsorship_obj';
// $slct_trigger = 'load__sponsorship_obj';
disable_submit_btn = false;
} else {
$slct.sponsorship_id = null;

244
src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte Normal file
View File

@@ -0,0 +1,244 @@
<script lang="ts">
import type { SvelteComponent } from 'svelte';
// Stores
import { getModalStore, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
// Props
/** Exposes parent props to this component. */
export let parent: SvelteComponent;
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';
// Form Data
const formData = {
name: 'Jane Doe',
tel: '214-555-1234',
email: 'jdoe@email.com'
};
// const form_data = $slct.sponsorship_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 w-modal-wide shadow-xl space-y-4 ae_modal_scrollfix';
// 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';
let tabSet: number = 0;
</script>
<!-- @component This is the Sponsorships modal edit form. -->
{#if $modalStore[0]}
<div class="modal-example-form {cBase}">
<header class={cHeader}>{$modalStore[0].title ?? '(title missing)'}</header>
<article>{$modalStore[0].body ?? '(body missing)'}</article>
<form class="modal-form {cForm}">
<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={tabSet} name="tab1" value={0}>
<svelte:fragment slot="lead"><span class="fas fa-home"></span></svelte:fragment>
<span>Start</span>
</Tab>
<Tab bind:group={tabSet} name="tab2" value={1}>
<svelte:fragment slot="lead"><span class="fas fa-users"></span></svelte:fragment>
Gala Guests
</Tab>
<Tab bind:group={tabSet} name="tab3" value={2}>
<svelte:fragment slot="lead"><span class="fas fa-info"></span></svelte:fragment>
More
</Tab>
<!-- Tab Panels --->
<svelte:fragment slot="panel">
{#if tabSet === 0}
<section class="ae_section sponsorship__contacts border border-gray-500/20 p-4">
<fieldset class="sponsorship__poc_person flex flex-wrap gap-4">
<legend class="legend">Point of Contact</legend>
<label for="poc_full_name">Full name
<div class="input-group grid-cols-[auto_1fr_auto]">
<div class="input-group-shim">
{#if !$ae_loc.trusted_access}
<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="poc_full_name" name="poc_full_name"
placeholder="Full name"
value={($slct.sponsorship_obj.poc_json && $slct.sponsorship_obj.poc_json.full_name ? $slct.sponsorship_obj.poc_json.full_name : '')}
autocomplete="name"
readonly={!$ae_loc.trusted_access}
required
>
</div>
</label>
<label for="poc_email">Email
<div class="input-group grid-cols-[auto_1fr_auto]">
<div class="input-group-shim">
{#if !$ae_loc.trusted_access}
<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="poc_email"
name="poc_email"
placeholder="Email"
value={($slct.sponsorship_obj.poc_json && $slct.sponsorship_obj.poc_json.email ? $slct.sponsorship_obj.poc_json.email : '')}
autocomplete="email"
readonly={!$ae_loc.trusted_access}
required
>
</div>
</label>
<label for="poc_phone_mobile">Mobile phone
<input
type="tel"
class="input"
id="poc_phone_mobile"
name="poc_phone_mobile"
placeholder="Mobile phone"
value={($slct.sponsorship_obj.poc_json && $slct.sponsorship_obj.poc_json.phone_mobile ? $slct.sponsorship_obj.poc_json.phone_mobile : '')}
autocomplete="tel"
>
</label>
</fieldset>
</section>
<section class="ae_section sponsorship__general_information">
<label for="name" class="label">Name of Sponsorship
<input type="text" id="name" name="name" required max="200" value={$slct.sponsorship_obj.name ?? ''} placeholder="Name of Sponsorship" autocomplete="off" class="input" />
</label>
<label class="label ae_label sponsorship__description">Short description
<textarea name="description" id="description" class="textarea ae_value sponsorship__description tinymce_editor editor_basic" rows="5" cols="70" bind:value={$slct.sponsorship_obj.description} placeholder="A short description or overview of this sponsorship."></textarea>
</label>
<label class="label">Level of sponsorship?
<!-- <input name="level_num" value={$slct.sponsorship_obj.level_num} /> -->
<select name="level_num" class="select">
<option value=1 selected={($slct.sponsorship_obj.level_num == 1 ? 'selected' : '')}>The Lowest Level Sponsorship ($5,000)</option>
<option value=2 selected={($slct.sponsorship_obj.level_num == 2 ? 'selected' : '')}>Mid-level Sponsor ($7,500)</option>
<option value=3 selected={($slct.sponsorship_obj.level_num == 3 ? 'selected' : '')}>High Level Sponsor ($15,000)</option>
</select>
<ul>
<li><strong>Lowest Level</strong> - Thank you?</li>
<li><strong>Mid-level</strong> - Please join the gala along with 5 guests.</li>
<li><strong>High Level</strong> - Please join the gala along with 10 guests. You will also be able to upload a promo video that will play at the end of the gala.</li>
</ul>
</label>
</section>
{:else if tabSet === 1}
<section>
{#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length && $slct.sponsorship_obj.guest_li_json[0].full_name}
{#each $slct.sponsorship_obj.guest_li_json as guest, index}
<fieldset class="border border-gray-500/20 p-4">
<legend class="legend">Guest {index} - {guest.given_name} {guest.family_name}</legend>
<div class="flex flex-wrap gap-4">
<label for="guest_{index}_given_name" class="label max-w-64">Given name
<input type="text" class="input" id="guest_{index}_given_name" name="guest_{index}_given_name" placeholder="Full name" value={guest.given_name ?? ''} autocomplete="name">
</label>
<label for="guest_{index}_family_name" class="label max-w-64">Family name
<input type="text" class="input" id="guest_{index}_family_name" name="guest_{index}_family_name" placeholder="Full name" value={guest.family_name ?? ''} autocomplete="name">
</label>
<label for="guest_{index}_email" class="label max-w-64">Email
<input type="email" class="input" id="guest_{index}_email" name="guest_{index}_email" placeholder="Email" value={guest.email ?? ''} autocomplete="email">
</label>
</div>
<div class="flex flex-wrap gap-4">
<label for="guest_{index}_phone_mobile" class="label max-w-64">Mobile phone
<input type="tel" class="input" id="guest_{index}_phone_mobile" name="guest_{index}_phone_mobile" placeholder="Mobile phone" value={guest.phone_mobile ?? ''} autocomplete="tel">
</label>
<label for="guest_{index}_phone_office" class="label max-w-64">Office phone
<input type="tel" class="input" id="guest_{index}_phone_office" name="guest_{index}_phone_office" placeholder="Office phone" value={guest.phone_office ?? ''} autocomplete="tel">
</label>
<label for="guest_{index}_city" class="label max-w-64">City
<input type="text" class="input" id="guest_{index}_city" name="guest_{index}_city" placeholder="City" value={guest.city ?? ''} autocomplete="city">
</label>
</div>
</fieldset>
{/each}
{:else}
<div class="ae_warning">No guest list found!</div>
{/if}
</section>
{:else if tabSet === 2}
<section>
<label for="amount">Amount
<div class="input-group grid-cols-[auto_1fr_auto]">
<div class="input-group-shim">
<span>$</span>
</div>
<input
type="number"
class="input"
id="amount"
name="amount"
placeholder="Amount"
value={$slct.sponsorship_obj.amount ?? ''}
autocomplete="off"
readonly={$ae_loc.trusted_access}
required
>
</div>
</label>
</section>
{/if}
</svelte:fragment>
</TabGroup>
</form>
<!-- prettier-ignore -->
<footer class="modal-footer {parent.regionFooter}">
<button class="btn {parent.buttonNeutral}" on:click={parent.onClose}>{parent.buttonTextCancel}</button>
<button class="btn {parent.buttonPositive}" on:click={onFormSubmit}>Submit Form</button>
</footer>
</div>
{/if}
<style>
</style>

16
src/routes/sponsorships/10_list__sponsorship_obj.svelte
View File

@@ -17,7 +17,7 @@ onMount(() => {
<section class="svelte_component ae_section ae_list list__sponsorship_obj sponsorship_obj_li {container_class_li.join(' ')}">
{#if $slct.sponsorship_obj_li}
<table class="ae_table">
<table class="table table-compact table-hover">
<thead>
<tr>
<th>Options</th>
@@ -41,6 +41,7 @@ onMount(() => {
>
<td class="ae_options sponsorship_obj__options">
<div class="btn-group variant-filled">
<button
on:click={() => {
$slct.sponsorship_id = ae_sponsorship_obj.sponsorship_id_random;
@@ -54,7 +55,7 @@ onMount(() => {
$ae_loc.mod.sponsorships.show_view__sponsorship_obj = true;
$ae_loc.mod.sponsorships.show_edit__sponsorship_obj = false;
}}
class="ae_btn btn_primary"
class="variant-soft-primary"
title={`Open to see details: ${ae_sponsorship_obj.name}`}
>
<span class="fas fa-envelope-open"></span>
@@ -67,19 +68,20 @@ onMount(() => {
on:click={() => {
$slct.sponsorship_id = ae_sponsorship_obj.sponsorship_id_random;
$slct.sponsorship_obj = ae_sponsorship_obj;
$slct_trigger = 'load__sponsorship_obj';
// $slct_trigger = 'load__sponsorship_obj';
// $ae_loc.mod.sponsorships.show_main__options = true;
// $ae_loc.mod.sponsorships.show_list__sponsorship_obj_li = true;
$ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
$ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
}}
class="ae_btn btn_secondary"
class="variant-soft-warning"
title={`Edit meeting: ${ae_sponsorship_obj.name}`}
>
<span class="fas fa-edit"></span> Edit
</button>
{/if}
</div>
</td>
<td class="ae_value sponsorships__name">{ae_sponsorship_obj.name}</td>
@@ -129,6 +131,12 @@ onMount(() => {
</tr>
{/each}
</tbody>
<tfoot>
<tr>
<th colspan="7" class="">Total Count:</th>
<td>{$slct.sponsorship_obj_li.length}</td>
</tr>
</tfoot>
</table>
{:else}
<div>No sponsorships avalible to show at this time</div>

2
src/routes/sponsorships/10_view__sponsorship_obj.svelte
View File

@@ -143,6 +143,8 @@ onMount(() => {
// $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;
}}

212
src/routes/sponsorships/10_view_modal__sponsorship_obj.svelte Normal file
View File

@@ -0,0 +1,212 @@
<script lang="ts">
import type { SvelteComponent } from 'svelte';
// Stores
import { getModalStore } from '@skeletonlabs/skeleton';
// Props
/** Exposes parent props to this component. */
export let parent: SvelteComponent;
import { createEventDispatcher, onMount } from 'svelte';
import { fade } from 'svelte/transition';
import dayjs from 'dayjs';
import { ae_util } from '$lib/ae_utils';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
export let container_class_li = [];
const dispatch = createEventDispatcher();
if ($slct.sponsorship_id) {
console.log(`Sponsorship ID selected: ${$slct.sponsorship_id}`);
console.log(`Sponsorship Object selected: ${$slct.sponsorship_obj}`)
$slct_trigger = 'load__sponsorship_obj';
}
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 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 {container_class_li.join(' ')} {cBase}">
<header class={cHeader}>{@html $slct.sponsorship_obj.name}</header>
<div class="sponsorship__content">
<div
class="sponsorship_description description"
>
<div class="ae_label sponsorship__description">Description:</div>
<pre class="ae_value sponsorship__description">{@html $slct.sponsorship_obj.description ? $slct.sponsorship_obj.description : '-- No Description Given --'}</pre>
</div>
<div
class:ae_d_none={!$slct.sponsorship_obj.level_num}
class="sponsorship_level"
>
<span class="ae_label">Level of Sponsorship:</span>
<span class="ae_value"><span class="fas fa-gem"></span> {$slct.sponsorship_obj.level_num} &mdash; {$slct.sponsorship_obj.level_str}</span>
</div>
<div>
<span class="ae_label">Paid:</span>
$
<span class="ae_value">
{$slct.sponsorship_obj.paid ? 'Yes, marked as paid' : 'Not yet marked as paid'}
</span>
</div>
<div class="ae_list sponsorship__guests">
<h2>Guest List</h2>
{#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length && $slct.sponsorship_obj.guest_li_json[0].full_name}
<ul>
{#each $slct.sponsorship_obj.guest_li_json as guest, index}
<li class="sponsorship__guest"
class:ae_d_none={!$slct.sponsorship_obj.guest_li_json[index].full_name}
>
<span class="ae_label">
<span class="fas fa-user"></span> Contact:
</span>
{$slct.sponsorship_obj.guest_li_json[index].full_name}
{#if $slct.sponsorship_obj.guest_li_json[index].email}
| <a href="mailto:{$slct.sponsorship_obj.guest_li_json[index].email}?Subject={$slct.sponsorship_obj.full_name}">{$slct.sponsorship_obj.guest_li_json[index].email}</a>
{/if}
{#if $slct.sponsorship_obj.guest_li_json[index].phone_mobile}
<span class="ae_label">| Mobile:</span>
<a href="tel:{$slct.sponsorship_obj.guest_li_json[index].phone_mobile}">{$slct.sponsorship_obj.guest_li_json[index].phone_mobile}</a>
{/if}
{#if $slct.sponsorship_obj.guest_li_json[index].phone_home}
<span class="ae_label">| Home:</span>
<a href="tel:{$slct.sponsorship_obj.guest_li_json[index].phone_home}">{$slct.sponsorship_obj.guest_li_json[index].phone_home}</a>
{/if}
{#if $slct.sponsorship_obj.guest_li_json[index].phone_office}
<span class="ae_label">| Office:</span>
<a href="tel:{$slct.sponsorship_obj.guest_li_json[index].phone_office}">{$slct.sponsorship_obj.guest_li_json[index].phone_office}</a>
{/if}
{#if $slct.sponsorship_obj.guest_li_json[index].other_text}| {$slct.sponsorship_obj.guest_li_json[index].other_text}{/if}
</li>
{/each}
</ul>
{:else}
<div class="ae_warning">No guest list found!</div>
{/if}
</div>
<section class="card-footer ae_section ae_meta sponsorship__meta">
<div class="ae_group">
<span
class="sponsorship__id"
class:ae_d_none={!$ae_loc.administrator_access}>
ID:
{$slct.sponsorship_obj.sponsorship_id_random}
</span>
<span
class="sponsorship__created_on"
>
Created on: {ae_util.iso_datetime_formatter($slct.sponsorship_obj.created_on, 'datetime_short')}
</span>
<span
class="sponsorship__updated_on"
class:ae_d_none={!$slct.sponsorship_obj.updated_on}
>
Updated on: {ae_util.iso_datetime_formatter($slct.sponsorship_obj.updated_on, 'datetime_short')}
</span>
</div>
</section>
</div>
<footer class="modal-footer {parent.regionFooter}">
{#if $ae_loc.trusted_access || $slct.sponsorship_obj.external_person_id === $ae_loc.novi_uuid || $slct.sponsorship_obj.contact_1_email === $ae_loc.novi_email}
<div class="ae_options">
<button
on:click={() => {
// $slct.sponsorship_id = $slct.sponsorship_obj.sponsorship_id_random;
// $slct.sponsorship_obj = $slct.sponsorship_obj;
// const url = new URL(location);
// url.searchParams.set('sponsorship_id', $slct.sponsorship_obj.sponsorship_id_random);
// history.pushState({}, '', url);
// $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;
}}
class="btn variant-filled"
title={`Edit sponsorship: ${$slct.sponsorship_obj.name}`}
>
<span class="fas fa-edit"></span> Edit
</button>
</div>
{/if}
<button class="btn {parent.buttonNeutral}" on:click={parent.onClose}>{parent.buttonTextCancel}</button>
</footer>
</section>
<style>
.ae_label {
font-size: smaller;
}
.ae_value {
font-weight: bold;
}
.sponsorship__user_timezone {
font-size: smaller;
font-style: italic;
}
.sponsorship_obj .ae_meta {
flex-direction: column;
/* justify-content: space-between; */
}
.sponsorship_obj .ae_meta .ae_group {
flex-direction: row;
}
.sponsorship_obj .ae_meta .ae_options {
flex-direction: row;
justify-content: space-between;
}
/* a {
color: #82B6E1;
} */
</style>

117
src/routes/sponsorships/[slug]/+page.svelte Normal file
View File

@@ -0,0 +1,117 @@
<script lang="ts">
export let data;
console.log(`page data:`, data);
import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
// To retrieve the store, getModalStore must be invoked at the top level of your component!
import { getDrawerStore, getModalStore } from '@skeletonlabs/skeleton';
import type {
DrawerSettings,
ModalSettings
, ModalComponent, ModalStore
} from '@skeletonlabs/skeleton';
const modalStore = getModalStore();
import Edit_modal_sponsorship_obj from '../10_edit_modal__sponsorship_obj.svelte';
const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj };
const modal_edit__sponsorship_obj: ModalSettings = {
type: 'component',
component: modalComponentEditSponsorshipObj,
title: 'Edit Your Sponsorship',
};
// $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
$slct.sponsorship_id = data.url.searchParams.get('ae_id');
console.log(data.url.searchParams.get('ae_id'));
console.log(`Selected Sponsorship ID:`, $slct.sponsorship_id);
$slct_trigger = 'load__sponsorship_obj';
$: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
console.log('Selected Sponsorship ID:', $slct.sponsorship_id);
console.log('Selected Sponsorship Object:', $slct.sponsorship_obj);
$slct_trigger = null;
handle_load_ae_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});
modalStore.trigger(modal_edit__sponsorship_obj);
}
let ae_sponsorship_obj_get_promise;
async function handle_load_ae_sponsorship_id_obj({sponsorship_id, try_cache=false}) {
console.log('*** handle_load_sponsorship_id_obj() ***');
let params = {};
// $ae_loc.hub.sponsorship_id_qry_status = 'loading';
ae_sponsorship_obj_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: 'sponsorship',
obj_id: sponsorship_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: 2
})
.then(function (sponsorship_obj_get_result) {
if (sponsorship_obj_get_result) {
$slct.sponsorship_obj = sponsorship_obj_get_result;
console.log(`sponsorship object:`, $slct.sponsorship_obj);
}
// Auto show the selected sponsorship ID
// Is this pushState needed here?
// Set the URL param "sponsorship_id" to the current sponsorship ID.
// const url = new URL(location);
// url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
// history.pushState({}, '', url);
// Is this postMessage needed here?
// let message = {'sponsorship_id': $slct.sponsorship_id};
// window.parent.postMessage(message, "*");
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
return ae_sponsorship_obj_get_promise;
}
</script>
<section
class="container h-full mx-auto"
>
<header>
<h1 class="h1">Information Goes Here</h1>
</header>
<section>More information goes here.</section>
<section class="btn btn-group">
<button
class="btn variant-ghost-primary"
on:click={() => {
// $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
modalStore.trigger(modal_edit__sponsorship_obj);
}}
>
<span class="fas fa-edit mx-1"></span>
Start/Edit Sponsorship
</button>
</section>
</section>

4
src/routes/sponsorships/[slug]/hold +page.ts Normal file
View File

@@ -0,0 +1,4 @@
// export function load({ params }) {
// console.log(`page data - params:`, params);
// return params
// }