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

Bug fixes. Style setting improvements.

Browse Source
This commit is contained in:
Scott Idem
2024-02-28 15:45:02 -05:00
parent 00a28588b7
commit 713fcb3c62
12 changed files with 438 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.html
View File

@@ -1,11 +1,11 @@
<!DOCTYPE html>
<html lang="en" class="dark">
<html lang="en" class="">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width" />
<title>New Svelte Structure - OSIT's &AElig; Dev</title>
<title>New SvelteKit Structure - OSIT's &AElig; Dev</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -20,7 +20,7 @@
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" data-theme="wintry">
<body data-sveltekit-preload-data="hover" data-theme="">
<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
</body>
</html>

12
src/app.postcss
View File

@@ -31,8 +31,8 @@ body {
/* --theme-rounded-base: 20px;
--theme-rounded-container: 4px; */
--theme-font-family-base: 'Liberation Sans', sans-serif;
--theme-font-family-heading: 'Liberation Sans', sans-serif;
/* --theme-font-family-base: 'Liberation Sans', sans-serif; */
/* --theme-font-family-heading: 'Liberation Sans', sans-serif; */
}
.card-footer {
@@ -63,14 +63,14 @@ body {
}
/* Deal with being in an iframe */
#appShell #shell-header.iframe {
display: none;
}
/* body[data-theme='wintry'] {
background: none;
background-image: none;
} */
#appShell #shell-footer.iframe {
display: none;
}
body[data-theme]:has(#page.iframe) {
background: none;

6
src/lib/ae_stores.ts
View File

@@ -56,7 +56,9 @@ export let ae_app_local_data_struct: key_val = {
'ds': {},
'hub': {
'show_xyz': 'abc',
'show_cfg': false,
'theme_mode': 'dark',
'theme_name': 'wintry',
},
'mod': {
'archives': {},
@@ -85,6 +87,8 @@ export let ae_app_local_data_struct: key_val = {
show_list__sponsorship_obj_li: true,
show_view__sponsorship_obj: false,
disable_submit__sponsorship_obj: false,
submit_status: null, // 'saving', 'created', 'updated'
},
'testing': {},

123
src/lib/element_app_cfg.svelte
View File

@@ -1,20 +1,49 @@
<script lang="ts">
import { createEventDispatcher, onMount, tick } from 'svelte';
import { RadioGroup, RadioItem } from '@skeletonlabs/skeleton';
import { ae_util } from '$lib/ae_utils';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
let notes: null|string = null;
let all: boolean = false;
let trigger: null|string = null;
export let theme_mode: null|string = null;
export let set_theme_mode: null|boolean = null;
export let theme_name: null|string = null;
export let set_theme_name: null|boolean = null;
const dispatch = createEventDispatcher();
onMount(() => {
console.log('** Element Mounted: ** Element App Config');
if (set_theme_mode) {
$slct_trigger = 'set_theme_mode';
}
if (set_theme_name) {
$slct_trigger = 'set_theme_name';
}
});
$: if ($slct_trigger == 'set_theme_mode' && $ae_loc.hub.theme_mode) {
console.log(`$ae_loc.hub.theme_mode=${$ae_loc.hub.theme_mode}`);
$slct_trigger = null;
if ($ae_loc.hub.theme_mode == 'light') {
document.documentElement.classList.remove('dark');
document.documentElement.classList.add('light');
} else if ($ae_loc.hub.theme_mode == 'dark') {
document.documentElement.classList.remove('light');
document.documentElement.classList.add('dark');
}
}
$: if ($slct_trigger == 'set_theme_name' && $ae_loc.hub.theme_name) {
console.log(`$ae_loc.hub.theme_name=${$ae_loc.hub.theme_name}`);
$slct_trigger = null;
// Update the body attribute named "data-theme" to the current theme name.
document.body.setAttribute('data-theme', $ae_loc.hub.theme_name);
}
// $: if (entered_passcode && entered_passcode.length >= 5) {
// console.log(`entered_passcode=${entered_passcode}`);
@@ -62,6 +91,13 @@ function dispatch_something_changed() {
<section id="AE-App-Cfg" class="ae_app_cfg transition duration-300 delay-150 hover:delay-300 hover:transition-all hidden-print">
<div
class="ae_cfg_content"
class:hidden={!$ae_loc.hub.show_cfg}
>
<div>
{#if $ae_loc.access_type && $ae_loc.access_type != 'anonymous'}
{#if $ae_loc.access_type == 'super'}
<span class="fas fa-secret"></span> Super Access
@@ -80,7 +116,7 @@ function dispatch_something_changed() {
{/if}
<button
class="btn btn-sm access_type_lock_btn hover:transition-all"
class="btn btn-sm variant-soft-secondary access_type_lock_btn hover:transition-all"
on:click={() => {
handle_clear_access();
}}
@@ -91,11 +127,76 @@ function dispatch_something_changed() {
{:else}
Not logged in
{/if}
</div>
<div>
Theme:
<div>
<!-- Light/Dark Theme: -->
<RadioGroup
active="variant-soft"
hover="hover:variant-ringed-primary"
>
<RadioItem
on:change={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.hub.theme_mode}
name="theme_light"
value={'light'}
>
Light
</RadioItem>
<RadioItem
on:change={() => {
$slct_trigger = 'set_theme_mode';
}}
bind:group={$ae_loc.hub.theme_mode}
name="theme_dark"
value={'dark'}
>
Dark
</RadioItem>
</RadioGroup>
</div>
<div>
<!-- Theme Name: -->
<select
on:change={() => {
$slct_trigger = 'set_theme_name';
}}
bind:value={$ae_loc.hub.theme_name}
class="select"
title="Theme name"
>
<option value="">-- None --</option>
<option value="gold-nouveau">Gold Nouveau</option>
<option value="hamlindigo">Hamlindigo</option>
<option value="modern">Modern</option>
<option value="rocket">Rocket</option>
<option value="wintry">Wintry</option>
</select>
</div>
</div>
</div>
<button
class="btn btn-sm ae_cfg_btn hover:transition-all"
on:click={() => {
$ae_loc.hub.show_cfg = !$ae_loc.hub.show_cfg;
}}
>
<span class="fas fa-cog mx-1"></span>
<span class="cfg_text">Config</span>
</button>
</section>
<style lang="postcss">
/* BEGIN: AE's Svelte Quick Access Type component */
/* BEGIN: AE's Svelte App Config component */
#AE-App-Cfg {
/* position: absolute; */
position: fixed;
@@ -113,10 +214,10 @@ function dispatch_something_changed() {
background-color: rgba(var(--color-surface-500) / .5);
border-top: solid thin black;
border-left: solid thin black;
border-right: solid thin black;
border-bottom: solid thin black;
border-top-left-radius: .5em;
border-bottom-left-radius: .5em;
border-top-right-radius: .5em;
border-bottom-right-radius: .5em;
opacity: .50;
@@ -144,16 +245,11 @@ function dispatch_something_changed() {
transition-timing-function: linear;
}
/* #Access-Type .unlock_text {
transition: width 2s, height 2s, background-color 2s, transform 2s;
} */
/* END: Svelte Access Type component */
.access_type_unlock_btn .unlock_text {
.ae_cfg_btn .cfg_text {
display: none;
}
.access_type_unlock_btn:hover .unlock_text {
.ae_cfg_btn:hover .cfg_text {
display: initial;
/* outline: solid thin red; */
}
@@ -166,4 +262,5 @@ function dispatch_something_changed() {
display: initial;
/* outline: solid thin red; */
}
/* END: AE's Svelte App Config component */
</style>

128
src/parent_iframe.html Normal file
View File

@@ -0,0 +1,128 @@
<!-- BEGIN: Aether apps for iframe -->
<script>
let parent_ae_app_iframe_url = 'https://dev-chow.oneskyit.com/';
let parent_ae_params = new URLSearchParams(document.location.search);
let parent_ae_slct_account_id = parent_ae_params.get('account_id');
let parent_ae_slct_event_id = parent_ae_params.get('event_id');
let parent_ae_slct_event_presenter_id = parent_ae_params.get('event_presenter_id');
let parent_ae_slct_sponsorship_id = parent_ae_params.get('sponsorship_id');
let parent_ae_slct_sponsorship_cfg_id = parent_ae_params.get('sponsorship_cfg_id');
let parent_ae_slct_obj_type = parent_ae_params.get('ae_type');
let parent_ae_slct_obj_id = parent_ae_params.get('ae_id');
let parent_ae_iframe_height = null;
if (parent_ae_slct_event_id && parent_ae_slct_event_presenter_id) {
parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}events_speakers?event_id=${parent_ae_slct_event_id}`;
} else if (parent_ae_slct_event_id) {
parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}events_speakers?event_id=${parent_ae_slct_event_id}`;
} else if (parent_ae_slct_event_presenter_id) {
parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}events_speakers?event_presenter_id=${parent_ae_slct_event_presenter_id}`;
}
if (parent_ae_slct_sponsorship_id && parent_ae_slct_sponsorship_cfg_id) {
parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}/sponsorships?sponsorship_id=${parent_ae_slct_sponsorship_id}&sponsorship_cfg_id=${parent_ae_slct_sponsorship_cfg_id}`;
} else if (parent_ae_slct_sponsorship_id) {
parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}sponsorships?sponsorship_id=${parent_ae_slct_sponsorship_id}`;
} else if (parent_ae_slct_sponsorship_cfg_id) {
parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}sponsorships?sponsorship_cfg_id=${parent_ae_slct_sponsorship_cfg_id}`;
}
if (parent_ae_slct_obj_type && parent_ae_slct_obj_id) {
parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}&${parent_ae_slct_obj_type}_id=${parent_ae_slct_obj_id}`;
}
if (parent_ae_app_iframe_url == 'https://dev-chow.oneskyit.com/') {
parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}?iframe=true`;
} else {
parent_ae_app_iframe_url = `${parent_ae_app_iframe_url}&iframe=true`;
}
console.log(`AE parent iframe URL: ${parent_ae_app_iframe_url}`);
window.addEventListener('message', function(event) {
console.log('AE iframe parent: Message received from the child:', event.data);
if (event.data) {
if (event.data.iframe_height) {
parent_ae_iframe_height = event.data.iframe_height;
console.log(`Got AE iframe height: ${parent_ae_iframe_height}`);
let parent_ae_iframe_element = document.getElementById('ae_iframe');
// parent_ae_iframe_element.style.height = parent_ae_iframe_height;
parent_ae_iframe_element.style.height = `${parent_ae_iframe_height+50}px`;
}
const url = new URL(location);
// Check if event_id is defined in the message
if (event.data.event_id !== undefined) {
console.log(`Got AE Event ID: ${event.data.event_id}`);
parent_ae_slct_event_id = event.data.event_id;
if (event.data.event_id) {
url.searchParams.set('event_id', event.data.event_id);
} else {
url.searchParams.delete('event_id');
}
history.pushState({}, '', url);
}
// Check if event_presenter_id is defined in the message
if (event.data.event_presenter_id !== undefined) {
console.log(`Got AE Event Presenter ID: ${event.data.event_presenter_id}`);
parent_ae_slct_event_presenter_id = event.data.event_presenter_id;
if (event.data.event_presenter_id) {
url.searchParams.set('event_presenter_id', event.data.event_presenter_id);
} else {
url.searchParams.delete('event_presenter_id');
}
history.pushState({}, '', url);
}
// Check if sponsorship_id is defined in the message
if (event.data.sponsorship_id !== undefined) {
console.log(`Got AE Sponsorship ID: ${event.data.sponsorship_id}`);
parent_ae_slct_sponsorship_id = event.data.sponsorship_id;
if (event.data.sponsorship_id) {
url.searchParams.set('sponsorship_id', event.data.sponsorship_id);
} else {
url.searchParams.delete('sponsorship_id');
}
history.pushState({}, '', url);
}
// Check if sponsorship_cfg_id is defined in the message
if (event.data.sponsorship_cfg_id !== undefined) {
console.log(`Got AE Sponsorship Config ID: ${event.data.sponsorship_cfg_id}`);
parent_ae_slct_sponsorship_cfg_id = event.data.sponsorship_cfgt_id;
if (event.data.sponsorship_cfg_id) {
url.searchParams.set('sponsorship_cfg_id', event.data.sponsorship_cfg_id);
} else {
url.searchParams.delete('sponsorship_cfg_id');
}
history.pushState({}, '', url);
}
} else {
console.log(`No data in AE iframe child message? ${event}`);
}
});
document.addEventListener("DOMContentLoaded", () => {
console.log('Parent of AE iframe is ready!');
console.log(`AE parent iframe URL: ${parent_ae_app_iframe_url}`);
let parent_ae_iframe_element = document.getElementById('ae_iframe');
console.log('AE parent iframe element', parent_ae_iframe_element);
parent_ae_iframe_element.src = parent_ae_app_iframe_url;
});
console.log('AE iframe parent scripts run');
</script>
<p><iframe width="100%" height="750" style="min-height: 600px; max-height: 100%;" id="ae_iframe" src="" class="ae_parent_iframe"></iframe></p>
<!-- END: Aether apps for iframe -->

2
src/routes/+layout.svelte
View File

@@ -327,7 +327,7 @@ $: if ($slct_trigger == 'set_access_code_li' && !$ae_loc.ds['hub__page__access_c
<Element_access_type />
<Element_app_cfg />
<Element_app_cfg set_theme_mode={true} set_theme_name={true} />
<style lang="postcss">

25
src/routes/events_speakers/+page.svelte
View File

@@ -68,6 +68,19 @@ function handle_modal_close(response: boolean | undefined) {
const url = new URL(location);
url.searchParams.delete('event_presenter_id');
history.pushState({}, '', url);
let message = {'event_presenter_id': null};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
if ($slct_trigger == 'msg_parent' && $slct.event_id) {
console.log(`Message parent with event_id ${$slct.event_id}`);
$slct_trigger = null;
let message = {'event_id': $slct.event_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
// 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.
@@ -85,7 +98,12 @@ $: if ($slct_trigger == 'show_edit__event_presenter_obj' && $ae_loc.mod.events.s
// modalStore.clear();
modalStore.trigger(modal_edit__event_presenter_obj);
let message = {'event_presenter_id': $slct.event_presenter_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
$: if ($slct_trigger == 'show_view__event_presenter_obj' && $ae_loc.mod.events.show_view__event_presenter_obj) {
console.log('Show Modal View');
$slct_trigger = null;
@@ -97,8 +115,11 @@ $: if ($slct_trigger == 'show_view__event_presenter_obj' && $ae_loc.mod.events.s
// modalStore.clear();
modalStore.trigger(modal_view__event_presenter_obj);
}
let message = {'event_presenter_id': $slct.event_presenter_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
if ($slct.event_id && !$slct.event_presenter_obj_li) {
console.log(`No presenter list was found for Event ID: ${$slct.event_id}`);
@@ -116,6 +137,8 @@ onMount(() => {
$ae_loc.href_url = href_url;
// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
$slct_trigger = 'msg_parent';
});

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

@@ -63,8 +63,21 @@ function handle_modal_close(response: boolean | undefined) {
let location = window.location.href;
const url = new URL(location);
url.searchParams.delete('event_presenter_id');
url.searchParams.delete('sponsorship_id');
history.pushState({}, '', url);
let message = {'sponsorship_id': null};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
if ($slct_trigger == 'msg_parent' && $slct.sponsorship_cfg_id) {
console.log(`Message parent with sponsorship_cfg_id ${$slct.sponsorship_cfg_id}`);
$slct_trigger = null
let message = {'sponsorship_cfg_id': $slct.sponsorship_cfg_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
// 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.
@@ -78,12 +91,17 @@ $: if ($slct_trigger == 'show_edit__sponsorship_obj' && $ae_loc.mod.sponsorships
console.log('Show Modal Edit');
$slct_trigger = null;
let location = window.location.href;
const url = new URL(location);
url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
history.pushState({}, '', url);
if ($slct.sponsorship_id) {
let location = window.location.href;
const url = new URL(location);
url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
history.pushState({}, '', url);
let message = {'sponsorship_id': $slct.sponsorship_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
// $ae_loc.mod.sponsorships.show_view__sponsorship_obj = false;
// modalStore.clear();
modalStore.trigger(modal_edit__sponsorship_obj);
}
@@ -96,13 +114,15 @@ $: if ($slct_trigger == 'show_view__sponsorship_obj' && $ae_loc.mod.sponsorships
url.searchParams.set('sponsorship_id', $slct.sponsorship_id);
history.pushState({}, '', url);
// $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = false;
// modalStore.clear();
modalStore.trigger(modal_view__sponsorship_obj);
let message = {'sponsorship_id': $slct.sponsorship_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
let ae_account_obj_get_promise;
let ae_sponsorship_obj_li_get_promise;
onMount(() => {
@@ -115,6 +135,8 @@ onMount(() => {
$ae_loc.href_url = href_url;
// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
$slct_trigger = 'msg_parent';
});
@@ -124,45 +146,6 @@ if ($ae_loc.account_id) {
handle_load_ae_obj_li__sponsorship({account_id: $slct.account_id, try_cache: false});
}
// async function handle_load_ae_obj_id__account({account_id, try_cache=false}) {
// console.log('*** handle_load_ae_obj_id__account() ***');
// let params = {};
// $ae_loc.hub.account_id_qry_status = 'loading';
// ae_account_obj_get_promise = api.get_ae_obj_id_crud({
// api_cfg: $ae_api,
// obj_type: 'account',
// obj_id: account_id,
// use_alt_table: false, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
// use_alt_base: false, // NOTE: This will use the base_name_alt value instead of the base_name value in the API config.
// params: params,
// log_lvl: 0
// })
// .then(function (account_obj_get_result) {
// if (account_obj_get_result) {
// $slct.account_obj = account_obj_get_result;
// console.log(`account object:`, $slct.account_obj);
// }
// // Auto show the selected account ID
// // Is this pushState needed here?
// // Set the URL param "account_id" to the current account ID.
// const url = new URL(location);
// url.searchParams.set('account_id', $slct.account_id);
// history.pushState({}, '', url);
// // Is this postMessage needed here?
// let message = {'account_id': $slct.account_id};
// window.parent.postMessage(message, "*");
// })
// .catch(function (error) {
// console.log('No results returned or failed.', error);
// });
// return ae_account_obj_get_promise;
// }
async function handle_load_ae_obj_li__sponsorship({account_id, try_cache=true}) {
console.log('*** handle_load_ae_obj_li__sponsorship() ***');
// console.log($ae_loc.mod.sponsorships);
@@ -258,6 +241,8 @@ $: if ($slct_trigger == 'load__sponsorship_cfg_obj' && $slct.sponsorship_cfg_id)
$slct_trigger = null;
$ae_loc.mod.sponsorships.cfg_id = $slct.sponsorship_cfg_id;
handle_load_ae_obj_id__sponsorship_cfg({sponsorship_cfg_id: $slct.sponsorship_cfg_id, try_cache: false});
}
@@ -413,7 +398,7 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
</script>
<div class="container h-full mx-auto items-center">
<section class="container h-full mx-auto items-center">
<div class="space-y-10 flex flex-col">
<h1 class="h1 text-center">&AElig; - Sponsorships</h1>
@@ -431,7 +416,7 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
}}
>
<span class="fas fa-edit mx-1"></span>
Start/Edit Sponsorship
Start Sponsorship
</button>
<!-- <button
@@ -492,7 +477,7 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
</section> -->
</div>
</div>
</section>
<style lang="postcss">

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

@@ -1,6 +1,7 @@
<script lang="ts">
import type { SvelteComponent } from 'svelte';
import { createEventDispatcher, onMount } from 'svelte';
import { fade } from 'svelte/transition';
// const dispatch = createEventDispatcher();
@@ -44,7 +45,8 @@ 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}`;
// $ae_loc.mod.sponsorships.link = `${$ae_loc.href_url}/load?sponsorship_id=${$slct.sponsorship_id}`;
$ae_loc.mod.sponsorships.link = `${$ae_loc.site_domain}/sponsorships/load?sponsorship_id=${$slct.sponsorship_id}`;
console.log('Sponsorship link:', $ae_loc.mod.sponsorships.link);
}
});
@@ -64,7 +66,7 @@ onMount(() => {
const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
$ae_loc.mod.sponsorships.submit_status = null;
$ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = false;
let placeholder_li: key_val = {
file_logo_primary: '-- No File Selected --',
@@ -85,7 +87,7 @@ if ($slct.sponsorship_id) {
} else {
$slct.sponsorship_id = null;
$slct.sponsorship_obj = {
sponsorship_cfg_id_random: $ae_loc.mod.sponsorships.sponsorship_cfg_id,
sponsorship_cfg_id_random: $ae_loc.mod.sponsorships.cfg_id,
name: null,
description: null,
@@ -130,6 +132,7 @@ async function handle_submit_form(event) {
console.log('*** handle_submit_form() ***');
$ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = true;
$ae_loc.mod.sponsorships.submit_status = 'saving';
// Data in
let form_data = new FormData(event.target);
@@ -173,6 +176,10 @@ async function handle_submit_form(event) {
}
}
if (sponsorship_di.amount) {
sponsorship_do['amount'] = Number(sponsorship_di.amount)*100;
}
// Loop through possible guest list (up to 20) and add to the guest_li_json array.
let temp_guest_li = [];
@@ -235,7 +242,13 @@ async function handle_submit_form(event) {
obj_type: 'sponsorship',
data: sponsorship_do
});
console.log(ae_promises.create__sponsorship);
$slct.sponsorship_id = ae_promises.create__sponsorship.obj_id_random;
// $ae_loc.mod.sponsorships.link = `${$ae_loc.href_url}/load?sponsorship_id=${$slct.sponsorship_id}`;
$ae_loc.mod.sponsorships.link = `${$ae_loc.site_domain}/sponsorships/load?sponsorship_id=${$slct.sponsorship_id}`;
console.log('Sponsorship link:', $ae_loc.mod.sponsorships.link);
$ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = false;
$ae_loc.mod.sponsorships.submit_status = 'created';
} else {
ae_promises.update__sponsorship_obj = await handle_update__sponsorship({
@@ -244,12 +257,16 @@ async function handle_submit_form(event) {
data: sponsorship_do
});
$ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = false;
$ae_loc.mod.sponsorships.submit_status = 'updated';
}
}
async function handle_submit_form_files(event) {
console.log('*** handle_submit_form() ***');
$ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = true;
$ae_loc.mod.sponsorships.submit_status = 'saving';
let sponsorship_do: key_val = {};
if ($slct.sponsorship_obj.logo_li_json) {
@@ -311,6 +328,7 @@ async function handle_submit_form_files(event) {
obj_id: $slct.sponsorship_id,
data: sponsorship_do
});
$ae_loc.mod.sponsorships.submit_status = 'updated';
// let sponsorship_do: key_val = {
// logo_li_json: {
@@ -387,26 +405,26 @@ async function handle_create__sponsorship({
console.log('*** handle_create__sponsorship() ***');
ae_promises.api_create__sponsorship_obj = api.create_ae_obj_crud({
api_cfg: $ae_api,
obj_type: obj_type,
fields: data,
key: $ae_api.api_crud_super_key,
log_lvl: 2
})
.then(async function (create__obj_result) {
if (!create__obj_result) {
console.log('The result was null or false.');
return false;
}
return create__obj_result;
api_cfg: $ae_api,
obj_type: obj_type,
fields: data,
key: $ae_api.api_crud_super_key,
log_lvl: 2
})
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
.then(async function (create__obj_result) {
if (!create__obj_result) {
console.log('The result was null or false.');
return false;
});
}
return create__obj_result;
})
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
return false;
});
return ae_promises.api_create__sponsorship_obj;
return ae_promises.api_create__sponsorship_obj;
}
@@ -418,27 +436,27 @@ async function handle_update__sponsorship({
console.log('*** handle_update__sponsorship() ***');
ae_promises.update__sponsorship_obj = api.update_ae_obj_id_crud({
api_cfg: $ae_api,
obj_type: obj_type,
obj_id: obj_id,
fields: data,
key: $ae_api.api_crud_super_key,
log_lvl: 2
})
.then(async function (update__obj_result) {
if (!update__obj_result) {
console.log('The result was null or false.');
return false;
}
return update__obj_result;
api_cfg: $ae_api,
obj_type: obj_type,
obj_id: obj_id,
fields: data,
key: $ae_api.api_crud_super_key,
log_lvl: 2
})
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
.then(async function (update__obj_result) {
if (!update__obj_result) {
console.log('The result was null or false.');
return false;
});
}
return update__obj_result;
})
.catch(function (error) {
console.log('Something went wrong.');
console.log(error);
return false;
});
return ae_promises.update__sponsorship_obj;
return ae_promises.update__sponsorship_obj;
}
</script>
@@ -831,7 +849,7 @@ async function handle_update__sponsorship({
id="amount"
name="amount"
placeholder="Amount"
value={$slct.sponsorship_obj.amount ?? ''}
value={$slct.sponsorship_obj.amount ? $slct.sponsorship_obj.amount/100 : ''}
autocomplete="off"
readonly={$slct.sponsorship_obj.paid}
required
@@ -983,9 +1001,6 @@ async function handle_update__sponsorship({
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>
@@ -1205,6 +1220,37 @@ async function handle_update__sponsorship({
</button>
<!-- {/if} -->
{/if}
{#if $ae_loc.mod.sponsorships.submit_status == 'saving'}
<div class="awaiting alert_msg_pulse" out:fade={{ duration: 2000 }}>Saving...</div>
{:else if $ae_loc.mod.sponsorships.submit_status == 'saved'}
<div class="awaiting" out:fade={{ duration: 2000 }}>Finished saving</div>
{:else}
<!-- <div class="awaiting" out:fade={{ duration: 2000 }}>Nothing here yet</div> -->
{/if}
{#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}
<button class="btn variant-filled-primary" on:click={parent.onClose}>
<span class="fas fa-times mx-1"></span>
Close

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

@@ -110,7 +110,7 @@ onMount(() => {
title="Not Paid"></span>
{/if}
{#if ae_sponsorship_obj.amount}
<span class="ae_value sponsorships__amount">${ae_sponsorship_obj.amount}</span>
<span class="ae_value sponsorships__amount">${ae_sponsorship_obj.amount/100}</span>
{/if}
</td>

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

@@ -59,6 +59,16 @@ onMount(() => {
<span class="ae_value"><span class="fas fa-gem"></span> {$slct.sponsorship_obj.level_num} &mdash; {$slct.sponsorship_obj.level_str}</span>
</div>
<div
class:hidden={!$slct.sponsorship_obj.amount}
class="sponsorship_amount"
>
<span class="ae_label">Amount:</span>
<span class="ae_value">
${$slct.sponsorship_obj.amount/100}
</span>
</div>
<div>
<span class="ae_label">Paid:</span>
$
@@ -67,8 +77,6 @@ onMount(() => {
</span>
</div>
<div class="ae_list sponsorship__guests">
<h2>Guest List</h2>

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

@@ -26,15 +26,39 @@ type key_val = {
};
// Editing
const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj };
const modalComponentEditSponsorshipObj: ModalComponent = { ref: Edit_modal_sponsorship_obj, props: {container_class_li: 'w-full p-4 space-y-4 card'} };
const modal_edit__sponsorship_obj: ModalSettings = {
type: 'component',
component: modalComponentEditSponsorshipObj,
title: 'Edit Your Sponsorship',
position: '', // default is "items-center"
response: (r: boolean | undefined) => handle_modal_close(r)
};
function handle_modal_close(response: boolean | undefined) {
console.log('Modal closed. Response:', response);
let location = window.location.href;
const url = new URL(location);
url.searchParams.delete('sponsorship_id');
history.pushState({}, '', url);
let message = {'sponsorship_id': null};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
if ($slct_trigger == 'msg_parent' && $slct.sponsorship_cfg_id) {
console.log(`Message parent with sponsorship_cfg_id ${$slct.sponsorship_cfg_id}`);
$slct_trigger = null
let message = {'sponsorship_cfg_id': $slct.sponsorship_cfg_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
$ae_loc.hostname = data.url.hostname;
$ae_loc.site_domain = data.url.origin;
@@ -112,7 +136,8 @@ async function handle_load_ae_obj_id__sponsorship_cfg({sponsorship_cfg_id, try_c
// Load the Sponsorship Obj with ID based on the URL param.
$slct.sponsorship_id = data.url.searchParams.get('ae_id');
// $slct.sponsorship_id = data.url.searchParams.get('ae_id');
$slct.sponsorship_id = data.url.searchParams.get('sponsorship_id');
$slct_trigger = 'load__sponsorship_obj';