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

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>