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

Wrapping up programming for tonight. Ready for CHOW demo?

Browse Source
This commit is contained in:
Scott Idem
2024-02-20 19:07:09 -05:00
parent d51d059535
commit 5a13852432
8 changed files with 149 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/routes/+layout.svelte
View File

@@ -164,8 +164,8 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
<a
class="btn btn-sm variant-ghost-surface"
class:active={$page.url.pathname==='/event_speakers'}
href="/event_speakers">Speakers</a>
class:active={$page.url.pathname==='/events_speakers'}
href="/events_speakers">Speakers</a>
</svelte:fragment>
</AppBar>

21
src/routes/+page.svelte
View File

@@ -65,7 +65,7 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
</script>
<div class="container h-full mx-auto flex justify-center items-center">
<div class="container h-full mx-auto flex justify-center p-5">
<div class="space-y-10 text-center flex flex-col items-center">
<h1 class="h1">One Sky IT's new Aether App Template</h1>
<h2 class="h2">Using Svelte, SvelteKit, Tailwind, Skeleton</h2>
@@ -73,21 +73,26 @@ async function handle_get_data_store_obj_w_code({code, data_type='text'}) {
<div class="flex justify-center space-x-2">
<a
class="btn variant-filled"
href="https://skeleton.dev/"
href="/sponsorships"
target="_blank"
rel="noreferrer"
>
Launch Documentation
Open Sponsorships
</a>
<a
class="btn variant-filled"
href="/sponsorships"
target="_blank"
rel="noreferrer"
>
Open Speakers
</a>
</div>
<div class="space-y-2">
<p>Try editing the following:</p>
<p><code class="code">/src/routes/+layout.svelte</code></p>
<p><code class="code">/src/routes/+page.svelte</code></p>
</div>
</div>
</div>
<style lang="postcss">
/* figure {
@apply flex relative flex-col;

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

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

18
src/routes/events_speakers/+layout.ts Normal file
View File

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

83
src/routes/events_speakers/+page.svelte Normal file
View File

@@ -0,0 +1,83 @@
<script lang="ts">
import { onMount } from 'svelte';
export let data;
console.log(`Svelte Events - Speakers 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, ProgressRadial } from '@skeletonlabs/skeleton';
import type {
DrawerSettings,
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';
type key_val = {
[key: string]: any;
};
onMount(() => {
console.log('Events - Speakers: +page.svelte');
// 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);
});
if ($ae_loc.event_id) {
$slct.event_id = $ae_loc.event_id;
// handle_load_ae_obj_id__event({event_id: $slct.event_id, try_cache: false});
// handle_load_ae_obj_li__events_speakers({event_id: $slct.event_id, try_cache: false});
}
</script>
<div class="container h-full mx-auto items-center">
<div class="space-y-10 flex flex-col">
<h1 class="h1 text-center">&AElig; - Events: Speakers</h1>
<section>
<button
class="btn variant-ghost-primary"
on:click={() => {
// $ae_loc.mod.events_speakers.show_edit__event_presenter_obj = true;
$slct.event_presenter_id = null;
$slct.event_presenter_obj = null;
// modalStore.trigger(modal_edit__event_presenter_obj);
$ae_loc.mod.events_speakers.show_edit__event_presenter_obj = true;
$slct_trigger = 'show_edit__event_presenter_obj';
}}
>
<span class="fas fa-edit mx-1"></span>
Start/Edit Speaker
</button>
</section>
<section class="events_speakers_list">
</section>
</div>
</div>
<style lang="postcss">
</style>

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

@@ -244,7 +244,7 @@ async function handle_load_ae_obj_id__sponsorship_cfg({sponsorship_cfg_id, try_c
.then(function (sponsorship_cfg_obj_get_result) {
if (sponsorship_cfg_obj_get_result) {
$slct.sponsorship_cfg_obj = sponsorship_cfg_obj_get_result;
console.log(`sponsorship object:`, $slct.sponsorship_cfg_obj);
console.log(`sponsorship_cfg object:`, $slct.sponsorship_cfg_obj);
}
// Auto show the selected sponsorship ID
@@ -379,7 +379,7 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
<div class="container h-full mx-auto items-center">
<div class="space-y-10 flex flex-col">
<h1 class="h1 text-center">Aether - Sponsorships (dev)</h1>
<h1 class="h1 text-center">&AElig; - Sponsorships</h1>
<section>
<button
class="btn variant-ghost-primary"
@@ -458,38 +458,5 @@ async function handle_load_ae_obj_id__sponsorship({sponsorship_id, try_cache=fal
</div>
<style lang="postcss">
/* figure {
@apply flex relative flex-col;
}
figure svg,
.img-bg {
@apply w-64 h-64 md:w-80 md:h-80;
}
.img-bg {
@apply absolute z-[-1] rounded-full blur-[50px] transition-all;
animation: pulse 5s cubic-bezier(0, 0, 0, 0.5) infinite,
glow 5s linear infinite;
}
@keyframes glow {
0% {
@apply bg-primary-400/50;
}
33% {
@apply bg-secondary-400/50;
}
66% {
@apply bg-tertiary-400/50;
}
100% {
@apply bg-primary-400/50;
}
}
@keyframes pulse {
50% {
transform: scale(1.5);
}
} */
</style>

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

@@ -599,6 +599,22 @@ async function handle_update__sponsorship({
</label>
<label class="label">Level of sponsorship?
<!-- {$slct.sponsorship_cfg_obj.level_li_json[1].name} -->
<!-- {#if $slct.sponsorship_cfg_obj && $slct.sponsorship_cfg_obj.level_li_json}
{$slct.sponsorship_cfg_obj.level_li_json[0]}
{#each $slct.sponsorship_cfg_obj.level_li_json as level, index}
<div class="flex gap-4">
<input
type="radio"
id="level_num_{index}"
name="level_num"
value={index + 1}
checked={($slct.sponsorship_obj.level_num == index + 1 ? 'checked' : '')}
>
<label for="level_num_{index}">{index + 1} &mdash; {level.name}</label>
</div>
{/each}
{/if} -->
<!-- <input name="level_num" value={$slct.sponsorship_obj.level_num} /> -->
<select name="level_num" class="select">
<option value=1 selected={($slct.sponsorship_obj.level_num == 1 ? 'selected' : '')}>The Lowest Level Sponsorship ($5,000)</option>

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

@@ -126,7 +126,7 @@ onMount(() => {
<td><span class="ae_flex ae_flex_justify_around">
{#if ae_sponsorship_obj.poc_json}
<span>
<span class="fas fa-user"></span> {ae_sponsorship_obj.poc_json.given_name} {ae_sponsorship_obj.poc_json.family_name}
<span class="fas fa-user"></span> {ae_sponsorship_obj.poc_json.full_name ?? ae_sponsorship_obj.poc_json.given_name}
</span>
<a href="mailto:{ae_sponsorship_obj.poc_json.email}"><span class="fas fa-envelope"></span> {ae_sponsorship_obj.poc_json.email}</a>
{/if}