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

Making progress on pulling this together.

Browse Source
This commit is contained in:
Scott Idem
2024-02-16 21:38:41 -05:00
parent 9958724aaa
commit bab68af7dc
6 changed files with 61 additions and 863 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/ae_stores.ts
View File

@@ -1,4 +1,7 @@
import { localStorageStore } from '@skeletonlabs/skeleton'
import { readable, writable } from 'svelte/store';
import type { Writable } from 'svelte/store';
import { PUBLIC_TESTING, PUBLIC_AE_API_PROTOCOL, PUBLIC_AE_API_SERVER, PUBLIC_AE_API_BAK_SERVER, PUBLIC_AE_API_PORT, PUBLIC_AE_API_PATH, PUBLIC_AE_API_SECRET_KEY, PUBLIC_AE_API_CRUD_SUPER_KEY, PUBLIC_AE_ACCOUNT_ID } from '$env/static/public';
console.log(`Aether Config - TESTING:`, PUBLIC_TESTING);
@@ -29,7 +32,7 @@ type key_val = {
// *** BEGIN *** Longer-term app data. This should be stored to local storage.
export let ae_app_local_data_struct: key_val = {
'ver': '0.0.1',
'ver': '0.0.5',
'name': 'Aether App Template',
'theme': 'light',
'account_id': ae_account_id, // OSIT Demo _XY7DXtc9MY
@@ -50,7 +53,16 @@ export let ae_app_local_data_struct: key_val = {
},
}
console.log(`Aether Config - App Local Storage Data:`, ae_app_local_data_struct);
export let ae_loc = writable(ae_app_local_data_struct);
// This does not work yet...
// const ae_loc_store: Writable<string> = localStorageStore('ae_loc', ae_app_local_data_struct);
// console.log(`store - $ae_loc:`, ae_loc_store);
// Testing:
export let ae_loc: Writable<key_val> = localStorageStore('ae_loc', ae_app_local_data_struct);
// This works:
// export let ae_loc = writable(ae_loc_store);
// *** BEGIN *** Temporary app data. This should be stored to session storage.

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

@@ -1,6 +1,10 @@
<script lang="ts">
import { onMount } from 'svelte';
// 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 type {
@@ -28,6 +32,9 @@ const modal_view__sponsorship_obj: ModalSettings = {
component: modalComponentViewSponsorshipObj,
};
// 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;
@@ -43,6 +50,8 @@ onMount(() => {
console.log('Sponsorships: +page.svelte');
let url = window.location.href;
console.log(url);
$ae_loc.href_url = url;
});
@@ -245,7 +254,6 @@ $: if ($ae_loc.mod.sponsorships.show_edit__sponsorship_obj) {
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);
}
@@ -288,7 +296,7 @@ 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
on:click={() => {
console.log('Open drawer');
@@ -315,7 +323,7 @@ const drawer_settings_y: DrawerSettings = {
>
Open Drawer Edit
</button>
</section>
</section> -->
<section class="sponsorships_list">
{#if $slct.sponsorship_obj_li && $ae_loc.mod.sponsorships.show_list__sponsorship_obj_li}

847
src/routes/sponsorships/0_sponsorships__main.svelte
View File

@@ -1,847 +0,0 @@
<script lang="ts">
type key_val = {
[key: string]: any;
};
// *** Import Svelte core
import { onMount } from 'svelte';
// *** Import Aether core variables and functions
import { ae, api, Element_modal_v3 } from 'aether_npm_lib';
import { slct, slct_trigger, ae_app, ae_local, ae_session } from './stores';
// *** Import Aether core components
// import { get_data_store_obj_w_code } from '../data_store/stores_data_store_api.js';
// *** Import Aether module variables and functions
// *** Import Aether module components
import Edit_sponsorship_obj from './10_edit__sponsorship_obj.svelte';
import List_sponsorship_obj from './10_list__sponsorship_obj.svelte';
import View_sponsorship_obj from './10_view__sponsorship_obj.svelte';
// *** Export/Exposed variables and functions for component
// export let account_id: string = $page['page_for']['account_id'];
export let account_id: string = $ae_app.account_id;
export let sponsorship_id: string = $ae_app.sponsorships.sponsorship_id;
export let user: string = $ae_app.user;
export let key: string = $ae_app.key;
export let full_name: string = $ae_app.full_name;
export let ae_admin_li: string = $ae_app.ae_admin_li;
export let ae_trusted_li: string = $ae_app.ae_trusted_li;
// *** Set initial variables
$ae_app.user = decodeURIComponent(user);
$ae_app.key = decodeURIComponent(key);
// $ae_app.ae_admin_li = ae_admin_li;
// $ae_app.ae_trusted_li = ae_trusted_li;
$ae_app.current_timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
if (!$ae_app.lu_country_subdivision_list) {
$ae_app.lu_country_subdivision_list = [];
}
if (!$ae_app.lu_country_list ) {
$ae_app.lu_country_list = [];
}
if (!$ae_app.lu_timezone_list) {
$ae_app.lu_timezone_list = [];
}
$ae_app.sponsorships.show_main__options = true; // Section for: search area, buttons for filtering sponsorships, create new sponsorship.
$ae_app.sponsorships.show_list__sponsorship_obj_li = true;
$ae_app.sponsorships.fulltext_search_qry_str = '';
$ae_app.sponsorships.qry_virtual = false;
$ae_app.sponsorships.qry_physical = false;
$ae_app.sponsorships.qry_type = '';
// NOTE: Check if the ae_user is in the ae_admin_li list
if ($ae_app.ae_user && $ae_app.ae_admin_li) {
if ($ae_app.ae_admin_li.includes($ae_app.ae_user)) {
$ae_app.access_type = 'administrator';
$ae_app.administrator_access = true;
$ae_app.trusted_access = true;
}
}
// NOTE: Check if the ae_user is in the ae_trusted_li list
if ($ae_app.ae_user && $ae_app.ae_trusted_li) {
if ($ae_app.ae_trusted_li.includes($ae_app.ae_user)) {
$ae_app.access_type = 'trusted';
$ae_app.trusted_access = true;
}
}
if ($ae_app.administrator_access) {
$ae_app.sponsorships.enabled = 'enabled';
$ae_app.sponsorships.hidden = 'not_hidden';
$ae_app.sponsorships.limit = 150;
} else if ($ae_app.trusted_access) {
$ae_app.sponsorships.enabled = 'enabled';
$ae_app.sponsorships.hidden = 'not_hidden';
$ae_app.sponsorships.limit = 75;
} else {
$ae_app.sponsorships.enabled = 'enabled';
$ae_app.sponsorships.hidden = 'not_hidden';
$ae_app.sponsorships.limit = 25;
}
let ae_sponsorship_obj_li_get_promise;
let ae_sponsorship_obj_get_promise;
let data_store_obj_get_promise;
let get_ds_sponsorships_info_promise = handle_get_data_store_obj_w_code({code: 'sponsorships_info'});
let get_ds_sponsorships_options_promise = handle_get_data_store_obj_w_code({code: 'sponsorships_options'});
if (account_id) {
$slct.account_id = account_id;
handle_load_ae_sponsorship_obj_li({account_id: $slct.account_id, try_cache: false});
}
// NOTE: This if sponsorship_id is not fully ready yet -2023-09-08
if (sponsorship_id) {
console.log(`Selected Sponsorship ID: ${sponsorship_id}`);
$slct.sponsorship_id = sponsorship_id;
$slct_trigger = 'load__sponsorship_obj';
// handle_load_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});
// // Auto show the selected Sponsorship ID
// // Set the URL param "sponsorship_id" to the current Sponsorship ID. This is a just in case.
// 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, "*");
$ae_app.sponsorships.show_main__options = true;
$ae_app.sponsorships.show_list__sponsorship_obj_li = true;
$ae_app.sponsorships.show_view__sponsorship_obj = true;
$ae_app.sponsorships.show_edit__sponsorship_obj = false;
}
if (!$ae_app.client_content) {
$ae_app.client_content = {};
}
onMount(() => {
console.log('** Component Mounted: ** OSIT - AE Sponsorships: Main');
document.getElementById('meeting_fulltext_search_qry_str').focus();
$ae_session.test.sponsorships = 'Hello World!';
$ae_session.test.general = 'Hello world from Sponsorships!';
console.log('ae_session:', $ae_session);
});
$: if ($ae_app.iframe_height && $ae_app.iframe_height_modal_body) {
console.log('getting new dimensions for iframe:', $ae_app.iframe_height, $ae_app.iframe_height_modal_body);
let iframe_height = 0;
if ($ae_app.iframe_height > $ae_app.iframe_height_modal_body) {
iframe_height = $ae_app.iframe_height;
} else {
iframe_height = $ae_app.iframe_height_modal_body;
// console.log($ae_app.modal_dimensions);
if ($ae_app.modal_dimensions && $ae_app.modal_dimensions.header_height) {
iframe_height = iframe_height + $ae_app.modal_dimensions.header_height;
}
if ($ae_app.modal_dimensions && $ae_app.modal_dimensions.footer_height) {
iframe_height = iframe_height + $ae_app.modal_dimensions.footer_height;
}
// iframe_height = iframe_height + 50; // Just in case
}
console.log(`Suggested new iframe_height: ${iframe_height}`);
window.parent.postMessage({'iframe_height': iframe_height}, "*"); // This should be in pixels
} else if ($ae_app.iframe_height) {
console.log('setting new iframe_height:', $ae_app.iframe_height);
// let iframe_height = $ae_app.iframe_height;
window.parent.postMessage({'iframe_height': $ae_app.iframe_height}, "*"); // This should be in pixels
}
$: if ($slct_trigger == 'load__sponsorship_obj_li' && $slct.account_id) {
if ($ae_app.sponsorships.qry_status == 'loading') {
console.log('*** $ae_app.sponsorships.qry_status == loading ***');
setTimeout(() => {
console.log("Delayed for X second.");
$slct_trigger = null;
handle_load_ae_sponsorship_obj_li({account_id: $slct.account_id, try_cache: false});
}, 250);
} else {
console.log('*** $ae_app.sponsorships.qry_status != loading ***');
$slct_trigger = null;
handle_load_ae_sponsorship_obj_li({account_id: $slct.account_id, try_cache: false});
}
}
async function handle_load_ae_sponsorship_obj_li({account_id, try_cache=true}) {
console.log('*** handle_load_ae_sponsorship_obj_li() ***');
console.log($ae_app.sponsorships);
let fulltext_search_qry_str = $ae_app.sponsorships.fulltext_search_qry_str;
let qry_virtual = $ae_app.sponsorships.qry_virtual;
let qry_physical = $ae_app.sponsorships.qry_physical;
let qry_type = $ae_app.sponsorships.qry_type;
let enabled = $ae_app.sponsorships.enabled;
let hidden = $ae_app.sponsorships.hidden;
let limit = $ae_app.sponsorships.limit;
let offset = $ae_app.sponsorships.offset;
let params = {};
// params['archived'] = 'all';
// params['conference'] = false;
// params['inc_address'] = true;
// params['inc_contact'] = true;
let params_json: key_val = {};
// if (fulltext_search_qry_str && fulltext_search_qry_str.length > 2) {
// params_json['ft_qry'] = {
// 'default_qry_str': fulltext_search_qry_str,
// 'location_address_json': fulltext_search_qry_str,
// 'contact_li_json': fulltext_search_qry_str,
// 'address_default_qry_str': fulltext_search_qry_str, // NOTE: Remove after going live with OSIT ae?
// 'contact_1_default_qry_str': fulltext_search_qry_str, // NOTE: Remove after going live with OSIT ae?
// };
// }
// if (qry_virtual || qry_physical || qry_type) {
// params_json['and_qry'] = {};
// if (qry_virtual) params_json['and_qry']['virtual'] = true;
// if (qry_physical) params_json['and_qry']['physical'] = true;
// if (qry_type) params_json['and_qry']['type'] = qry_type;
// }
// console.log('params_json:', params_json);
// console.log(params_json);
// NOTE: I am not sure if this is actually needed. It may save a little space in the URL.
// if (JSON.stringify(params_json) == JSON.stringify({})) {
// params_json = null;
// }
$ae_app.sponsorships.qry_status = 'loading';
ae_sponsorship_obj_li_get_promise = api.get_ae_obj_li_for_obj_id_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'sponsorship',
for_obj_type: 'account',
for_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.
enabled: enabled,
hidden: hidden,
order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'updated_on': 'DESC', 'created_on': 'DESC'},
// order_by_li: {'priority': 'DESC', 'sort': 'DESC', 'created_on': 'DESC', 'updated_on': 'DESC'},
limit: limit,
offset: offset,
params_json: params_json,
params: params,
log_lvl: 2
})
.then(function (sponsorship_obj_li_get_result) {
if (sponsorship_obj_li_get_result) {
$slct.sponsorship_obj_li = sponsorship_obj_li_get_result;
console.log(`Sponsorship list:`, $slct.sponsorship_obj_li);
} else {
$slct.sponsorship_obj_li = [];
}
})
.catch(function (error) {
console.log('No results returned or failed.', error);
})
.finally(function () {
$ae_app.sponsorships.qry_status = 'done';
});
return ae_sponsorship_obj_li_get_promise;
}
$: if ($slct_trigger == 'load__sponsorship_obj' && $slct.sponsorship_id) {
$slct_trigger = null;
handle_load_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});
// Auto show the selected Sponsorship ID
// Is this pushState needed here?
// Set the URL param "sponsorship_id" to the current Sponsorship ID. This is a just in case.
// 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, "*");
// $ae_app.sponsorships.show_main__options = false;
// $ae_app.sponsorships.show_list__sponsorship_obj_li = false;
// $ae_app.sponsorships.show_view__sponsorship_obj = true;
// $ae_app.sponsorships.show_edit__sponsorship_obj = false;
}
async function handle_load_sponsorship_id_obj({sponsorship_id, try_cache=false}) {
console.log('*** handle_load_sponsorship_id_obj() ***');
// let enabled = $ae_app.sponsorships.enabled;
// let hidden = $ae_app.sponsorships.hidden;
// let limit = $ae_app.sponsorships.limit;
// let offset = $ae_app.sponsorships.offset;
let params = {};
ae_sponsorship_obj_get_promise = api.get_ae_obj_id_crud({
api_cfg: $ae_app.ae_api,
obj_type: 'event',
obj_id: sponsorship_id,
use_alt_table: true, // NOTE: This will use the table_name_alt value instead of the table_name value in the API config.
use_alt_base: true, // 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 (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;
}
function handle_created_sponsorship_obj(event) {
console.log('*** handle_created_sponsorship_obj() ***');
console.log(event.detail);
handle_load_sponsorship_id_obj({sponsorship_id: $slct.sponsorship_id, try_cache: false});
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, "*");
// $slct_trigger = 'load__sponsorship_obj';
$slct_trigger = 'load__sponsorship_obj_li';
$ae_app.sponsorships.show_main__options = false;
$ae_app.sponsorships.show_list__sponsorship_obj_li = false;
$ae_app.sponsorships.show_view__sponsorship_obj = true;
$ae_app.sponsorships.show_edit__sponsorship_obj = false;
}
function handle_updated_sponsorship_obj(event) {
console.log('*** handle_updated_sponsorship_obj() ***');
console.log(event.detail);
// $slct_trigger = 'load__sponsorship_obj';
$slct_trigger = 'load__sponsorship_obj_li';
$ae_app.sponsorships.show_main__options = false;
$ae_app.sponsorships.show_list__sponsorship_obj_li = false;
$ae_app.sponsorships.show_view__sponsorship_obj = true;
$ae_app.sponsorships.show_edit__sponsorship_obj = false;
}
function handle_deleted_sponsorship_obj(event) {
console.log('*** handle_deleted_sponsorship_obj() ***');
console.log(event.detail);
const url = new URL(location);
url.searchParams.delete('sponsorship_id');
history.pushState({}, '', url);
let message = {'sponsorship_id': null};
window.parent.postMessage(message, "*");
$slct_trigger = 'load__sponsorship_obj_li';
$ae_app.sponsorships.show_main__options = true;
$ae_app.sponsorships.show_list__sponsorship_obj_li = true;
$ae_app.sponsorships.show_view__sponsorship_obj = false;
$ae_app.sponsorships.show_edit__sponsorship_obj = false;
}
function handle_submit_form(event) {
console.log('*** handle_submit_form() ***');
console.log(event);
event.preventDefault();
event.stopPropagation();
return false;
}
function handle_cancel_form(event) {
console.log('*** handle_cancel_form() ***');
console.log(event);
event.preventDefault();
event.stopPropagation();
return false;
}
function handle_oninput_fulltext_search_qry_str(event) {
console.log('*** handle_oninput_fulltext_search_qry_str() ***');
console.log(event);
// Check if this variable is a promise. The last query may still be being processed.
// if (!ae_sponsorship_obj_li_get_promise.promise) {
// console.log('*** handle_oninput_fulltext_search_qry_str() ***');
// console.log('*** Promise is still processing. ***');
// console.log(ae_sponsorship_obj_li_get_promise);
// ae_sponsorship_obj_li_get_promise.promise.finally(() => { ae_sponsorship_obj_li_get_promise.promise.done = true; });
// } else {
// $slct_trigger = 'load__sponsorship_obj_li';
// }
// if (ae_sponsorship_obj_li_get_promise && ae_sponsorship_obj_li_get_promise.then) {
// console.log('*** handle_oninput_fulltext_search_qry_str() ***');
// console.log('*** Promise is still processing. ***');
// console.log(ae_sponsorship_obj_li_get_promise);
// $slct_trigger = 'load__sponsorship_obj_li';
// return;
// }
// fulltext_search_qry_str = event.target.value;
// if ($ae_app.sponsorships.fulltext_search_qry_str.length > 2) {
// } else {
// $ae_app.sponsorships.fulltext_search_qry_str = '';
// }
$slct_trigger = 'load__sponsorship_obj_li';
}
async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
console.log('*** handle_get_data_store_obj_w_code() ***');
let get_item_result = window.localStorage.getItem(code);
if (get_item_result) {
$ae_app.sponsorships.ds[code] = get_item_result;
} else {
console.log('Get local storage item miss.');
}
data_store_obj_get_promise = api.get_data_store_obj_w_code({
api_cfg: $ae_app.ae_api,
data_store_code: code,
data_type: data_type,
log_lvl: 1
})
.then(function (get_data_store_result) {
if (get_data_store_result) {
if (data_type == 'text') {
// console.log(get_data_store_result.text);
$ae_app.sponsorships.ds[code] = get_data_store_result.text;
} else if (data_type == 'json') {
// console.log(get_data_store_result.json);
$ae_app.sponsorships.ds[code] = get_data_store_result.json;
}
// console.log(`Code: ${$ae_app.sponsorships.ds[code]}`);
// console.log(`Code:`, $ae_app.sponsorships.ds[code]);
}
})
.catch(function (error) {
console.log('No results returned or failed.', error);
});
}
</script>
<!-- <svelte:window
bind:outerHeight={ae_iframe_height}
/> -->
<section id="osit_ae_sponsorships" class="osit_sponsorships ae_main c_ae c_ae_sponsorships ae_main" bind:clientHeight={$ae_app.iframe_height}>
<header>
<h1>Sponsorships for One Sky IT Demo</h1>
</header>
<section class="ae_section ae_meta">
<p>
ae: {($ae_app.ae_full_name ? $ae_app.ae_full_name : 'Name not set')}
<span class="details">
(
{($ae_app.ae_email ? $ae_app.ae_email : 'Email not set')}
{#if $ae_app.administrator_access}
<span class="access_type administrator_access">Administrator</span>
{:else if $ae_app.trusted_access}
<span class="access_type trusted_access">Trusted</span>
{/if}
<span class="ae_user">{$ae_app.ae_user ? $ae_app.ae_user : 'User not set'}</span>
)
</span>
</p>
</section>
<div class="ae_overview">
<div class="ae_info ds__sponsorships_info ">
{@html $ae_app.sponsorships.ds.sponsorships_info}
</div>
</div>
{#if $ae_app.sponsorships.show_main__options}
<section class="ae_section ae_options ae_column sponsorship_obj__options">
<div class="ae_note ds__sponsorships_options ">
{@html $ae_app.sponsorships.ds.sponsorships_options}
</div>
<div class="filters_and_search">
<form on:submit|preventDefault={handle_submit_form} on:keydown={e => e.key === 'Escape' && handle_cancel_form} class="search_form">
<div class="ae_group">
<input
type="search"
placeholder="Search (name, description, etc.)"
id="meeting_fulltext_search_qry_str"
name="fulltext_search_qry_str"
bind:value={$ae_app.sponsorships.fulltext_search_qry_str}
style="width: 50%;"
class="bs-input"
>
<button
on:click={handle_oninput_fulltext_search_qry_str}
>
<span class="fas fa-search"></span> Search
</button>
</div>
<fieldset>
<legend>Filter on?</legend>
<div class="ae_row ae_flex_justify_around ae_width_md">
<label>Paid
<input
name="qry_paid"
type="checkbox"
bind:checked={$ae_app.sponsorships.qry_paid}
on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
>
</label>
<label>Guests
<input
name="qry_guest_li"
type="checkbox"
bind:checked={$ae_app.sponsorships.qry_guest_li}
on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
>
</label>
</div>
</fieldset>
<fieldset>
<legend>Select level?</legend>
<div class="ae_row ae_flex_justify_around ae_width_100">
<label>All
<input
name="qry_type"
type="radio"
value=""
bind:group={$ae_app.sponsorships.qry_type}
on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
title="Show all meeting types"
>
</label>
<label>Friend ($5,000)
<input
name="qry_type"
type="radio"
value="Friend"
bind:group={$ae_app.sponsorships.qry_type}
on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
title="Friend ($5,000)"
>
</label>
<label>Supporter ($7,500)
<input
name="qry_type"
type="radio"
value="Supporter"
bind:group={$ae_app.sponsorships.qry_type}
on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
title="Supporter ($7,500)"
>
</label>
<label>Champion ($12,500)
<input
name="qry_type"
type="radio"
value="Champion"
bind:group={$ae_app.sponsorships.qry_type}
on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
title="Champion ($12,500)"
>
</label>
<label>Advocate ($20,000)
<input
name="qry_type"
type="radio"
value="Advocate"
bind:group={$ae_app.sponsorships.qry_type}
on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
title="Advocate ($20,000)"
>
</label>
<label>Presenting Partner ($30,000)
<input
name="qry_type"
type="radio"
value="Presenting Partner"
bind:group={$ae_app.sponsorships.qry_type}
on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
title="Presenting Partner ($30,000)"
>
</label>
<label>Signature Partner ($50,000)
<input
name="qry_type"
type="radio"
value="Signature Partner"
bind:group={$ae_app.sponsorships.qry_type}
on:change={() => {$slct_trigger = 'load__sponsorship_obj_li';}}
title="Signature Partner ($50,000)"
>
</label>
</div>
</fieldset>
</form>
{#await ae_sponsorship_obj_li_get_promise}
<div><span class="fas fa-spinner"></span>
Loading sponsorships...</div>
{:then ae_sponsorship_obj_li_get_result}
<!-- <p>Sponsorship list: {ae_sponsorship_obj_li_get_result}</p> -->
{:catch error}
<div>Error: {error.message}</div>
{/await}
<div class="ae_group ae_row">
{#if $ae_app.trusted_access && $ae_app.sponsorships.hidden == 'not_hidden'}
<button
on:click={() => {
$ae_app.sponsorships.hidden = 'all';
$ae_app.sponsorships.limit = 150;
$slct_trigger = 'load__sponsorship_obj_li';
}}
class="btn_show_bb_post ae_btn btn btn-info"
>
<span class="fas fa-eye"></span> Show Hidden Sponsorships
</button>
{:else if $ae_app.trusted_access && $ae_app.sponsorships.hidden == 'all'}
<button
on:click={() => {
$ae_app.sponsorships.hidden = 'not_hidden';
$slct_trigger = 'load__sponsorship_obj_li';
}}
class="btn_hide_bb_post ae_btn btn btn-info"
>
<span class="fas fa-eye-slash"></span> Hide Hidden Sponsorships
</button>
{/if}
{#if $ae_app.administrator_access && $ae_app.sponsorships.enabled == 'enabled'}
<button
on:click={() => {
$ae_app.sponsorships.hidden = 'all';
$ae_app.sponsorships.enabled = 'all';
$ae_app.sponsorships.limit = 500;
$slct_trigger = 'load__sponsorship_obj_li';
}}
class="btn_show_bb_post ae_btn btn btn-warning"
>
<span class="fas fa-eye"></span> Show Disabled Sponsorships
</button>
{:else if $ae_app.administrator_access && $ae_app.sponsorships.enabled == 'all'}
<button
on:click={() => {
$ae_app.sponsorships.enabled = 'enabled';
$slct_trigger = 'load__sponsorship_obj_li';
}}
class="btn_hide_bb_post ae_btn btn btn-warning"
>
<span class="fas fa-eye-slash"></span> Hide Disabled Sponsorships
</button>
{/if}
<button
on:click={() => {
$slct.sponsorship_id = null;
$slct.sponsorship_obj = {};
const url = new URL(location);
url.searchParams.delete('sponsorship_id');
history.pushState({}, '', url);
$ae_app.sponsorships.show_main__options = false;
$ae_app.sponsorships.show_list__sponsorship_obj_li = false;
$ae_app.sponsorships.show_view__sponsorship_obj = false;
$ae_app.sponsorships.show_edit__sponsorship_obj = true;
$ae_session.test.sponsorships = 'Hello World! Create new Sponsorship was clicked!';
$ae_session.test_xyz.sponsorships = 'Hello World! Create new Sponsorship was clicked!';
}}
class="btn_new_recovery_meeting ae_btn btn btn-secondary"
>
<span class="fas fa-plus"></span> Create new Sponsorship
</button>
</div>
</div> <!-- END: div filters_and_search -->
</section>
{/if}
{#if $slct.sponsorship_obj_li && $ae_app.sponsorships.show_list__sponsorship_obj_li}
<List_sponsorship_obj />
{/if}
{#if $ae_app.sponsorships.show_edit__sponsorship_obj}
<!-- <section class="ae_edit sponsorship_obj sponsorship_id ae_sponsorship_id_edit"> -->
<Element_modal_v3
show = { true }
modal_cover_body = { false }
report_client_dimensions = { true }
on:close={ () => {
$ae_app.sponsorships.show_main__options = true;
$ae_app.sponsorships.show_list__sponsorship_obj_li = true;
$ae_app.sponsorships.show_edit__sponsorship_obj = false;
$ae_app.sponsorships.show_view__sponsorship_obj = false;
const url = new URL(location);
url.searchParams.delete('sponsorship_id');
history.pushState({}, '', url);
let message = {'sponsorship_id': null};
window.parent.postMessage(message, "*");
}}
on:report__modal_dimensions={ (event) => {
console.log('*** on:report__modal_dimensions ***');
console.log(event.detail);
$ae_app.modal_dimensions = event.detail.modal_dimensions;
}}
>
<span slot="header_title">{@html ($slct.sponsorship_obj.name ? $slct.sponsorship_obj.name : 'New Sponsorship')}</span>
<span slot="body">
<Edit_sponsorship_obj
on:created__meeting_obj={handle_created_sponsorship_obj}
on:updated__meeting_obj={handle_updated_sponsorship_obj}
on:deleted__meeting_obj={handle_deleted_sponsorship_obj}
/>
</span>
</Element_modal_v3>
<!-- </section> -->
{/if}
{#if $ae_app.sponsorships.show_view__sponsorship_obj && $slct.sponsorship_obj}
<!-- <section class="ae_view sponsorship_obj sponsorship_id ae_sponsorship_id_view"> -->
<Element_modal_v3
show = { true }
modal_cover_body = { false }
report_client_dimensions = { true }
on:close={ () => {
$slct.sponsorship_id = null;
$slct.sponsorship_obj = {};
$ae_app.sponsorships.show_main__options = true;
$ae_app.sponsorships.show_list__sponsorship_obj_li = true;
$ae_app.sponsorships.show_view__sponsorship_obj = false;
$ae_app.sponsorships.show_edit__sponsorship_obj = false;
const url = new URL(location);
url.searchParams.delete('sponsorship_id');
history.pushState({}, '', url);
let message = {'sponsorship_id': null};
window.parent.postMessage(message, "*");
}}
on:report__modal_dimensions={ (event) => {
console.log('*** on:report__modal_dimensions ***');
console.log(event.detail);
$ae_app.modal_dimensions = event.detail.modal_dimensions;
}}
>
<span slot="header_title">{@html $slct.sponsorship_obj.name}</span>
<span slot="body">
<View_sponsorship_obj />
</span>
</Element_modal_v3>
<!-- </section> -->
{/if}
</section>
<style>
/* .ae_meta {
font-size: smaller;
color: hsla(0,0%,50%,1);
} */
/* .ae_edit.sponsorship_obj {
border: dashed thin hsla(0,0%,70%,1);
margin: .5em .25em;
padding: .5em .25em;
background-color: hsla(0,0%,90%,1);
} */
/* .ae_view.sponsorship_obj {
border: dashed thin hsla(0,0%,70%,1);
margin: .5em .25em;
padding: .5em .25em;
background-color: hsla(0,0%,90%,1);
} */
/* :global(.ae_edit.sponsorship_id .element_ae_modal) {
border: dashed thin hsla(0,0%,70%,1);
margin: .5em .25em;
padding: .5em .25em;
background-color: hsla(0,0%,90%,1);
} */
</style>

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

@@ -1,6 +1,12 @@
<script lang="ts">
import type { SvelteComponent } from 'svelte';
import { localStorageStore } from '@skeletonlabs/skeleton';
import type { Writable } from 'svelte/store';
const store_current_tab: Writable<string> = localStorageStore('store_current_tab', 'start');
// console.log(`store_current_tab:`, $store_current_tab);
// Stores
import { getModalStore, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
@@ -41,15 +47,15 @@ const cBase = 'card p-4 w-modal-wide shadow-xl space-y-4 ae_modal_scrollfix';
const cHeader = 'text-2xl font-bold';
const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
let tabSet: number = 0;
// let tab_set: string = 'start';
let tab_set = $store_current_tab;
</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>
<header class={cHeader}>{$modalStore[0].title ?? '-- No Title --'}</header>
<form class="modal-form {cForm}">
<TabGroup
@@ -61,22 +67,22 @@ let tabSet: number = 0;
border=""
class="bg-surface-100-800-token w-full"
>
<Tab bind:group={tabSet} name="tab1" value={0}>
<Tab bind:group={$store_current_tab} name="tab_start" value={'start'}>
<svelte:fragment slot="lead"><span class="fas fa-home"></span></svelte:fragment>
<span>Start</span>
</Tab>
<Tab bind:group={tabSet} name="tab2" value={1}>
<Tab bind:group={$store_current_tab} name="tab_gala_guests" value={'gala_guests'}>
<svelte:fragment slot="lead"><span class="fas fa-users"></span></svelte:fragment>
Gala Guests
</Tab>
<Tab bind:group={tabSet} name="tab3" value={2}>
<Tab bind:group={$store_current_tab} name="tab_options" value={'options'}>
<svelte:fragment slot="lead"><span class="fas fa-info"></span></svelte:fragment>
More
</Tab>
<!-- Tab Panels --->
<svelte:fragment slot="panel">
{#if tabSet === 0}
{#if $store_current_tab === 'start'}
<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>
@@ -164,7 +170,7 @@ let tabSet: number = 0;
</label>
</section>
{:else if tabSet === 1}
{:else if $store_current_tab === 'gala_guests'}
<section>
{#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length && $slct.sponsorship_obj.guest_li_json[0].full_name}
@@ -203,10 +209,10 @@ let tabSet: number = 0;
</section>
{:else if tabSet === 2}
{:else if $store_current_tab === 'options'}
<section>
<label for="amount">Amount
<label for="amount">Additional amount?
<div class="input-group grid-cols-[auto_1fr_auto]">
<div class="input-group-shim">
<span>$</span>

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

@@ -46,7 +46,7 @@ onMount(() => {
// console.log(adjusted_to_local_tz_v2);
// Base Classes
const cBase = 'card p-4 w-modal-wide shadow-xl space-y-4';
const cBase = 'card card-hover p-4 w-modal-wide shadow-xl space-y-4';
const cHeader = 'card-header text-2xl font-bold';
// const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
</script>

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

@@ -2,6 +2,8 @@
export let data;
console.log(`page data:`, data);
import { onMount } from 'svelte';
import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
@@ -25,6 +27,23 @@ const modal_edit__sponsorship_obj: ModalSettings = {
title: 'Edit Your Sponsorship',
};
onMount(() => {
console.log('Sponsorships [New/Edit]: +page.svelte');
console.log(`$ae_loc = `, $ae_loc);
let url = window.location.href;
console.log(url);
$ae_loc.href_url = url;
console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
});
// console.log(`$ae_loc = `, $ae_loc);
// $ae_loc.href_url = url;
// console.log(`$ae_loc.href_url = `, $ae_loc.href_url);
// $ae_loc.mod.sponsorships.show_edit__sponsorship_obj = true;
$slct.sponsorship_id = data.url.searchParams.get('ae_id');