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

Finally got things mostly working.

Browse Source
This commit is contained in:
Scott Idem
2024-02-20 18:05:18 -05:00
parent 5bb9134641
commit d51d059535
12 changed files with 660 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/lib/ae_stores.ts
View File

@@ -38,6 +38,7 @@ export let ae_app_local_data_struct: key_val = {
'account_id': ae_account_id, // OSIT Demo _XY7DXtc9MY
'site_domain': null, // https://example.com, https://dev.example.com, etc.
'administrator_access': true,
'trusted_access': true,
'ds': {},
'hub': {
'ds': {},

4
src/routes/+layout.svelte
View File

@@ -11,11 +11,11 @@ import type {
} from '@skeletonlabs/skeleton';
const drawerStore = getDrawerStore();
import ModalComponentEditSponsorshipObj from './sponsorships/10_edit_modal__sponsorship_obj.svelte';
// 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 },
// modalComponentEditSponsorshipObj: { ref: ModalComponentEditSponsorshipObj },
// modalComponentTwo: { ref: ModalComponentTwo },
// ...
};

2
src/routes/sponsorships/+layout.svelte
View File

@@ -3,7 +3,7 @@
export let data;
</script>
<h1>Sponsorships Layout?</h1>
<!-- <h1>Sponsorships Layout?</h1> -->
<!-- <div class="submenu">
{#each data.sections as section}

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

@@ -1,16 +1,19 @@
<script lang="ts">
import { onMount } from 'svelte';
export let data;
console.log(`Svelte Sponsorships page data:`, data);
// import { localStorageStore } from '@skeletonlabs/skeleton';
// import type { Writable } from 'svelte/store';
// const store_current_page: Writable<string> = localStorageStore('store_current_page', 'start');
// To retrieve the store, getModalStore must be invoked at the top level of your component!
import { getDrawerStore, getModalStore } from '@skeletonlabs/skeleton';
import { getDrawerStore, getModalStore, ProgressRadial } from '@skeletonlabs/skeleton';
import type {
DrawerSettings,
ModalSettings
, ModalComponent, ModalStore
ModalSettings,
ModalComponent,
ModalStore
} from '@skeletonlabs/skeleton';
const modalStore = getModalStore();
@@ -18,22 +21,14 @@ 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_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';
// Viewing
const modalComponentViewSponsorshipObj: ModalComponent = { ref: View_modal_sponsorship_obj };
const modal_view__sponsorship_obj: ModalSettings = {
type: 'component',
component: modalComponentViewSponsorshipObj,
title: 'Viewing Sponsorship',
position: '', // default is "items-center"
type key_val = {
[key: string]: any;
};
// Editing
const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj };
@@ -44,35 +39,50 @@ const modal_edit__sponsorship_obj: ModalSettings = {
position: '', // default is "items-center"
};
$: 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(modal_view__sponsorship_obj);
}
// Viewing
const modalComponentViewSponsorshipObj: ModalComponent = { ref: View_modal_sponsorship_obj };
const modal_view__sponsorship_obj: ModalSettings = {
type: 'component',
component: modalComponentViewSponsorshipObj,
title: 'Viewing Sponsorship',
position: '', // default is "items-center"
};
// 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.sponsorships.show_edit__sponsorship_obj = false;
$ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
type key_val = {
[key: string]: any;
};
$ae_loc.hostname = data.url.hostname;
$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;
// $ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
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;
// $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = false;
modalStore.trigger(modal_view__sponsorship_obj);
}
export let data;
// console.log(`Svelte Sponsorships page data:`, data);
let ae_account_obj_get_promise;
let ae_sponsorship_obj_li_get_promise;
onMount(() => {
console.log('Sponsorships: +page.svelte');
let url = window.location.href;
console.log(url);
$ae_loc.href_url = url;
// console.log(`$ae_loc = `, $ae_loc);
let href_url = window.location.href;
console.log(href_url);
$ae_loc.href_url = href_url;
console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
});
@@ -264,6 +274,12 @@ $: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
$slct_trigger = null;
// $ae_loc.mod.sponsorships.link = `${$ae_loc.href_url}/id/${$slct.sponsorship_id}`;
// $ae_loc.mod.sponsorships.link = `${data.url.origin}/sponsorships/${$slct.sponsorship_id}`;
// console.log('Sponsorship link:', $ae_loc.mod.sponsorships.link);
// $ae_loc = $ae_loc;
handle_load_ae_obj_id__sponsorship({sponsorship_id: $slct.sponsorship_id, try_cache: false});
}
@@ -335,27 +351,27 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
// modalStore.trigger(modal);
const drawerStore = getDrawerStore();
// const drawerStore = getDrawerStore();
const drawer_settings_edit: DrawerSettings = {
id: 'sponsorships__edit',
meta: { foo: 'bar', fizz: 'buzz', age: 40 }
};
// const drawer_settings_edit: DrawerSettings = {
// id: 'sponsorships__edit',
// meta: { foo: 'bar', fizz: 'buzz', age: 40 }
// };
const drawer_settings_x: DrawerSettings = {
id: 'example-1',
meta: { foo: 'bar', fizz: 'buzz', age: 40 }
};
// const drawer_settings_x: DrawerSettings = {
// id: 'example-1',
// meta: { foo: 'bar', fizz: 'buzz', age: 40 }
// };
const drawer_settings_y: DrawerSettings = {
id: 'example-2',
// Provide your property overrides:
bgDrawer: 'bg-purple-900 text-white',
bgBackdrop: 'bg-gradient-to-tr from-indigo-500/50 via-purple-500/50 to-pink-500/50',
width: 'w-[280px] md:w-[480px]',
padding: 'p-4',
rounded: 'rounded-xl',
};
// const drawer_settings_y: DrawerSettings = {
// id: 'example-2',
// // Provide your property overrides:
// bgDrawer: 'bg-purple-900 text-white',
// bgBackdrop: 'bg-gradient-to-tr from-indigo-500/50 via-purple-500/50 to-pink-500/50',
// width: 'w-[280px] md:w-[480px]',
// padding: 'p-4',
// rounded: 'rounded-xl',
// };
</script>
@@ -364,38 +380,62 @@ const drawer_settings_y: DrawerSettings = {
<div class="space-y-10 flex flex-col">
<h1 class="h1 text-center">Aether - Sponsorships (dev)</h1>
<!-- <section>
<section>
<button
class="btn variant-ghost-primary"
on:click={() => {
// $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
$slct.sponsorship_id = null;
$slct.sponsorship_obj = null;
// modalStore.trigger(modal_edit__sponsorship_obj);
$ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
$slct_trigger = 'show_edit__sponsorship_obj';
}}
>
<span class="fas fa-edit mx-1"></span>
Start/Edit Sponsorship
</button>
<!-- <button
on:click={() => {
console.log('Open drawer');
drawerStore.open(drawer_settings_x);
}}
>
Open Drawer X
</button>
</button> -->
<button
<!-- <button
on:click={() => {
console.log('Open drawer');
drawerStore.open(drawer_settings_y);
}}
>
Open Drawer Y
</button>
</button> -->
<button
<!-- <button
on:click={() => {
console.log('Open drawer');
drawerStore.open(drawer_settings_edit);
}}
>
Open Drawer Edit
</button>
</section> -->
</button> -->
</section>
<section class="sponsorships_list">
{#await ae_sponsorship_obj_li_get_promise}
<div class="modal-loading">
<span class="fas fa-spinner fa-spin"></span>
<span class="loading-text">
Loading...
</span>
</div>
{/await}
{#if $slct.sponsorship_obj_li && $ae_loc.mod.sponsorships.show_list__sponsorship_obj_li}
<p>Got a list!</p>
<!-- <p>Got a list!</p> -->
<List_sponsorship_obj />
{/if}
</section>

7
src/routes/sponsorships/.directory Normal file
View File

@@ -0,0 +1,7 @@
[Dolphin]
Timestamp=2024,2,20,11,41,17.124
Version=4
ViewMode=1
[Settings]
HiddenFilesShown=true

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

@@ -1,10 +1,10 @@
<script lang="ts">
import type { SvelteComponent } from 'svelte';
import { createEventDispatcher } from 'svelte';
import { createEventDispatcher, onMount } from 'svelte';
// const dispatch = createEventDispatcher();
import { localStorageStore } from '@skeletonlabs/skeleton';
import { clipboard, localStorageStore, ProgressRadial } from '@skeletonlabs/skeleton';
import type { Writable } from 'svelte/store';
// const store_current_tab: Writable<string> = localStorageStore('store_current_tab', 'start');
let store_current_tab: string = 'start';
@@ -29,6 +29,15 @@ type key_val = {
};
onMount(() => {
console.log('** Component Mounted: ** View Modal - Sponsorship Obj');
if ($slct.sponsorship_id && $ae_loc.href_url) {
$ae_loc.mod.sponsorships.link = `${$ae_loc.href_url}/load?ae_id=${$slct.sponsorship_id}`;
console.log('Sponsorship link:', $ae_loc.mod.sponsorships.link);
}
});
// // Form Data
// const formData = {
// name: 'Jane Doe',
@@ -67,6 +76,40 @@ let ae_promises_init: key_val = {};
let ae_promises: key_val = {};
// let ae_promises.api_create__sponsorship_obj: Promise<any>;
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';
// $ae_loc.mod.sponsorships.link = `${$ae_loc.href_url}/load?ae_id=${$slct.sponsorship_id}`;
// console.log('Sponsorship link:', $ae_loc.mod.sponsorships.link);
} else {
$slct.sponsorship_id = null;
$slct.sponsorship_obj = {
sponsorship_cfg_id_random: $ae_loc.mod.sponsorships.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.sponsorship_obj) {
// Logo related
@@ -102,17 +145,25 @@ async function handle_submit_form(event) {
let sponsorship_do: key_val = {};
if (!$slct.sponsorship_id) {
sponsorship_do['account_id_random'] = $ae_loc.account_id;
// sponsorship_do['account_id_random'] = $ae_loc.account_id;
sponsorship_do['sponsorship_cfg_id_random'] = $slct.sponsorship_cfg_id;
// sponsorship_do['enable'] = true;
}
sponsorship_do['name'] = sponsorship_di.name;
// if (tinyMCE.get('description')) {
// sponsorship_do['description'] = tinyMCE.get('description').getContent();
// } else {
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.name) {
sponsorship_do['name'] = sponsorship_di.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);
@@ -126,6 +177,38 @@ async function handle_submit_form(event) {
}
}
// 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) {
@@ -156,7 +239,7 @@ async function handle_submit_form(event) {
obj_type: 'sponsorship',
data: sponsorship_do
});
$ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = false;
} else {
ae_promises.update__sponsorship_obj = await handle_update__sponsorship({
@@ -164,6 +247,7 @@ async function handle_submit_form(event) {
obj_id: $slct.sponsorship_id,
data: sponsorship_do
});
$ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = false;
}
}
@@ -366,7 +450,45 @@ async function handle_update__sponsorship({
{#if $modalStore[0]}
<div class="modal-example-form {cBase}">
<header class={cHeader}>{$modalStore[0].title ?? '-- No Title --'}</header>
<header class={cHeader}>
{$modalStore[0].title ?? '-- No Title --'}
{#await ae_promises.update__sponsorship_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__sponsorship_obj_result}
{#if update__sponsorship_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.sponsorships.link}
<div class="flex justify-end">
<button
class="btn variant-soft-secondary"
use:clipboard={$ae_loc.mod.sponsorships.link}
>
<span class="fas fa-copy mx-1"></span>
Copy link for {$slct.sponsorship_id}
</button>
</div>
{/if}
<TabGroup
justify="justify-center"
@@ -396,7 +518,11 @@ async function handle_update__sponsorship({
<!-- Tab Panels --->
<svelte:fragment slot="panel">
{#if store_current_tab === 'start'}
<form
class="modal-form {cForm}"
on:submit|preventDefault={handle_submit_form}
@@ -524,7 +650,10 @@ async function handle_update__sponsorship({
</form>
{:else if store_current_tab === 'files'}
<form
class="modal-form {cForm}"
on:submit|preventDefault={handle_submit_form_files}
@@ -630,49 +759,129 @@ async function handle_update__sponsorship({
</form>
{:else if store_current_tab === 'gala_guests'}
<section>
{:else if store_current_tab === 'gala_guests'}
<section class="gala_guests">
{#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length && $slct.sponsorship_obj.guest_li_json[0].full_name}
<form
class="modal-form {cForm}"
on:submit|preventDefault={handle_submit_form}
>
{#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 #{index+1} -
{guest.full_name ?? `${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="First name" value={guest.given_name ?? ''} autocomplete="name">
<div class="flex flex-wrap gap-2 p-1">
<label for="guest_{index}_given_name" class="label max-w-64">
<!-- Given name -->
<input type="text" class="input text-xs" id="guest_{index}_given_name" name="guest_{index}_given_name" placeholder="First 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="Last name" value={guest.family_name ?? ''} autocomplete="name">
<label for="guest_{index}_family_name" class="label max-w-64">
<!-- Family name -->
<input type="text" class="input text-xs" id="guest_{index}_family_name" name="guest_{index}_family_name" placeholder="Last 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 for="guest_{index}_email" class="label max-w-64">
<!-- Email -->
<input type="email" class="input text-xs" 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">
<div class="flex flex-wrap gap-2 p-1">
<label for="guest_{index}_phone_mobile" class="label max-w-64">
<!-- Mobile phone -->
<input type="tel" class="input text-xs" 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 for="guest_{index}_phone_office" class="label max-w-64">Office phone
<input type="tel" class="input text-xs" 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 text-xs" id="guest_{index}_city" name="guest_{index}_city" placeholder="City" value={guest.city ?? ''} autocomplete="city">
</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>
</div>
<div class="flex flex-wrap gap-2 p-1">
<button
type="submit"
class="btn {parent.buttonPositive} btn-sm"
disabled={($ae_loc.mod.sponsorships.disable_submit__sponsorship_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>
<button
class="btn {parent.buttonNegative} btn-sm"
on:click={(event) => {
console.log('*** Delete button clicked ***');
if (!confirm('Are you sure you want to delete this guest?')) {return false;}
$slct.sponsorship_obj.guest_li_json.splice(index, 1);
$slct = $slct;
// Now we are ready to submit the form
event.target.form.dispatchEvent(new Event('submit', {cancelable: true}));
}}
>
<span class="fas fa-minus mx-1"></span>
Delete
</button>
</div>
</fieldset>
{/each}
</form>
{:else}
<div class="ae_warning">No guest list found!</div>
{/if}
<button
class="btn {parent.buttonPositive} m-2"
on:click={() => {
console.log('*** Add new guest button clicked ***');
// if (!confirm('Are you sure you want to add a new guest?')) {return false;}
console.log($slct.sponsorship_obj.guest_li_json);
if (!$slct.sponsorship_obj.guest_li_json) {
$slct.sponsorship_obj.guest_li_json = [];
}
$slct.sponsorship_obj.guest_li_json.push({
given_name: null,
family_name: null,
full_name: 'New Guest',
email: null,
phone_mobile: null,
// phone_office: null,
city: null,
});
$slct = $slct;
}}
>
<span class="fas fa-plus mx-1"></span>
Add New Guest
</button>
</section>
{:else if store_current_tab === 'options'}
<form
class="modal-form {cForm}"
on:submit|preventDefault={handle_submit_form}
@@ -682,16 +891,16 @@ async function handle_update__sponsorship({
<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.sponsorship_obj.social_media_twitter ?? ''} autocomplete="url" />
<input type="url" id="social_media_twitter" name="social_media_twitter" class="input" placeholder="Twitter" value={$slct.sponsorship_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.sponsorship_obj.social_media_facebook ?? ''} autocomplete="url" />
<input type="url" id="social_media_facebook" name="social_media_facebook" class="input" placeholder="Facebook" value={$slct.sponsorship_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.sponsorship_obj.social_media_instagram ?? ''} autocomplete="url" />
<input type="url" id="social_media_instagram" name="social_media_instagram" class="input" placeholder="Instagram" value={$slct.sponsorship_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.sponsorship_obj.social_media_linkedin ?? ''} autocomplete="url" />
<input type="url" id="social_media_linkedin" name="social_media_linkedin" class="input" placeholder="LinkedIn" value={$slct.sponsorship_obj.social_li_json.linkedin ?? ''} autocomplete="url" />
</label>
</fieldset>
@@ -724,7 +933,7 @@ async function handle_update__sponsorship({
class="btn {parent.buttonPositive}"
disabled={($ae_loc.mod.sponsorships.disable_submit__sponsorship_obj)}
on:click={() => {
console.log('*** Save button clicked ***');
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;

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

@@ -2,6 +2,9 @@
// *** Import Svelte core
import { onMount } from 'svelte';
// import { getDrawerStore, getModalStore } from '@skeletonlabs/skeleton';
// const modalStore = getModalStore();
// *** Import Aether core variables and functions
import { ae_util } from '$lib/ae_utils';
// import { ae } from 'aether_npm_lib';
@@ -48,12 +51,13 @@ onMount(() => {
$slct.sponsorship_obj = ae_sponsorship_obj;
console.log(`Selected Sponsorship ID: ${$slct.sponsorship_id}`);
console.log(`Selected Sponsorship Object:`, $slct.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_edit__sponsorship_obj = false;
$ae_loc.mod.sponsorships.show_list__sponsorship_obj_li = true;
$ae_loc.mod.sponsorships.show_view__sponsorship_obj = true;
$ae_loc.mod.sponsorships.show_edit__sponsorship_obj = false;
$slct_trigger = 'show_view__sponsorship_obj';
}}
class="variant-soft-primary"
title={`Open to see details: ${ae_sponsorship_obj.name}`}
@@ -68,12 +72,15 @@ onMount(() => {
on:click={() => {
$slct.sponsorship_id = ae_sponsorship_obj.sponsorship_id_random;
$slct.sponsorship_obj = ae_sponsorship_obj;
console.log(`Selected Sponsorship ID: ${$slct.sponsorship_id}`);
console.log(`Selected Sponsorship Object:`, $slct.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_main__options = true;
$ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
$ae_loc.mod.sponsorships.show_list__sponsorship_obj_li = true;
$ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
$slct_trigger = 'show_edit__sponsorship_obj';
}}
class="variant-soft-warning"
title={`Edit meeting: ${ae_sponsorship_obj.name}`}
@@ -125,8 +132,8 @@ onMount(() => {
{/if}
</span></td>
<td>{ae_util.iso_datetime_formatter(ae_sponsorship_obj.created_on, 'datetime_short')}</td>
<td>{ae_util.iso_datetime_formatter(ae_sponsorship_obj.updated_on, 'datetime_short')}</td>
<td><span class="text-xs">{ae_util.iso_datetime_formatter(ae_sponsorship_obj.created_on, 'datetime_short')}</span></td>
<td><span class="text-xs">{ae_util.iso_datetime_formatter(ae_sponsorship_obj.updated_on, 'datetime_short')}</span></td>
</tr>
{/each}

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

@@ -1,23 +1,19 @@
<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;
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();
// const dispatch = createEventDispatcher();
if ($slct.sponsorship_id) {
console.log(`Sponsorship ID selected: ${$slct.sponsorship_id}`);
@@ -53,7 +49,7 @@ const cHeader = 'card-header text-2xl font-bold';
<!-- @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}">
<section class="svelte_component ae_section ae_view sponsorship_obj view__sponsorship_obj {cBase}">
<header class={cHeader}>{@html $slct.sponsorship_obj.name}</header>

32
src/routes/sponsorships/[slug]/+page.svelte
View File

@@ -1,24 +1,31 @@
<script lang="ts">
export let data;
console.log(`Svelte page data:`, data);
import { onMount } from 'svelte';
export let data;
console.log(`Svelte Sponsorships [slug] 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
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_modal_sponsorship_obj from '../10_edit_modal__sponsorship_obj.svelte';
type key_val = {
[key: string]: any;
};
// Editing
const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj };
const modal_edit__sponsorship_obj: ModalSettings = {
@@ -28,11 +35,14 @@ const modal_edit__sponsorship_obj: ModalSettings = {
position: '', // default is "items-center"
};
$ae_loc.hostname = data.url.hostname;
$ae_loc.site_domain = data.url.origin;
onMount(() => {
console.log('Sponsorships [New/Edit]: +page.svelte');
console.log(`$ae_loc = `, $ae_loc);
// console.log(`$ae_loc = `, $ae_loc);
let url = window.location.href;
console.log(url);
@@ -45,8 +55,6 @@ onMount(() => {
// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
// Load the Sponsorship Cfg Obj with ID based on the URL param.
$slct.sponsorship_cfg_id = data.url.searchParams.get('sponsorship_cfg_id');
$slct_trigger = 'load__sponsorship_cfg_obj';
@@ -173,7 +181,7 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
<section>More information goes here.</section>
<section class="btn btn-group">
<!-- <section class="btn btn-group"> -->
<button
class="btn variant-ghost-primary"
on:click={() => {
@@ -185,6 +193,6 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
<span class="fas fa-edit mx-1"></span>
Start/Edit Sponsorship
</button>
</section>
<!-- </section> -->
</section>

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

@@ -0,0 +1,154 @@
<script lang="ts">
import type { SvelteComponent } from 'svelte';
import { createEventDispatcher, onMount } from 'svelte';
// const dispatch = createEventDispatcher();
// import { localStorageStore } from '@skeletonlabs/skeleton';
// import type { Writable } from 'svelte/store';
// const store_current_tab: Writable<string> = localStorageStore('store_current_tab', 'start');
let store_current_tab: string = 'start';
// console.log(`store_current_tab:`, $store_current_tab);
// Stores
import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
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;
};
// Props
/** Exposes parent props to this component. */
export let parent: SvelteComponent;
// const modalStore = getModalStore();
onMount(() => {
console.log('** Component Mounted: ** Edit Modal - Sponsorship Obj');
});
// // 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();
// }
// let tab_set = $store_current_tab;
let tab_set = store_current_tab;
$ae_loc.mod.sponsorships.disable_submit__sponsorship_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__sponsorship_obj: Promise<any>;
if ($slct.sponsorship_id && $slct.sponsorship_obj) {
console.log(`Sponsorship ID selected: ${$slct.sponsorship_id}`);
console.log(`Sponsorship Object selected: ${$slct.sponsorship_obj}`)
// $slct_trigger = 'load__sponsorship_obj';
} else {
$slct.sponsorship_id = null;
$slct.sponsorship_obj = {
sponsorship_cfg_id_random: $ae_loc.mod.sponsorships.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,
};
}
// 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';
</script>
<!-- @component This is the Sponsorships modal edit form. -->
<!-- {#if $modalStore[0]} -->
<section class="modal-example-form {cBase}">
<!-- <header class={cHeader}>{$modalStore[0].title ?? '-- No Title --'}</header> -->
<header class={cHeader}>Start/Edit Sponsorship</header>
here....
<!-- </form> -->
<!-- prettier-ignore -->
<footer class="modal-footer {parent.regionFooter}">
{#if $slct.sponsorship_id}
<!-- {#if $ae_loc.administrator_access} -->
<button
on:click={() => {
// if (!confirm('Are you sure you want to delete this sponsorship?')) {return false;}
// handle_delete_sponsorship_obj({sponsorship_id: $slct.sponsorship_id, method: 'delete'});
// $slct.sponsorship_id = null;
// $slct.sponsorship_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>
</footer>
</section>
<!-- {/if} -->
<style>
</style>