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

Still working on upgrading to Tailwind CSS v4 an dSkeleton v3.....

Browse Source
This commit is contained in:
Scott Idem
2025-06-18 17:59:48 -04:00
parent db6e9dd019
commit 13912fd145
169 changed files with 2343 additions and 1634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/routes/events_speakers/+layout.svelte
View File

@@ -3,7 +3,6 @@
export let data: any;
import { onMount } from 'svelte';
import { localStorageStore } from '@skeletonlabs/skeleton';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
// Quickly save the data passed from the parent(s) to the Svelte stores, localStorage, and other.

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

@@ -8,11 +8,10 @@ import { onMount } from 'svelte';
// https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/Modal/types.ts
// To retrieve the store, getModalStore must be invoked at the top level of your component!
import { getModalStore } from '@skeletonlabs/skeleton';
import type {
ModalSettings,
ModalComponent,
} from '@skeletonlabs/skeleton';
} from '@skeletonlabs/skeleton-svelte';
const modalStore = getModalStore();
import { api } from '$lib/api';
@@ -49,7 +48,7 @@ const modal_view__event_presenter_obj: ModalSettings = {
position: '', // default is "items-center"
// Provide arbitrary classes to the backdrop and modal elements:
// backdropClasses: '!bg-green-500',
// backdropClasses: 'bg-green-500!',
// modalClasses: 'w-modal-wide',
// modalClasses: 'w-full',
@@ -382,7 +381,7 @@ async function handle_load_ae_obj_id__event_presenter({event_presenter_id, try_c
<section>
<button
class="btn variant-ghost-primary"
class="btn preset-tonal-primary border border-primary-500"
on:click={() => {
// $ae_loc.mod.events.show_edit__event_presenter_obj = true;
$slct.event_presenter_id = null;
@@ -417,7 +416,7 @@ async function handle_load_ae_obj_id__event_presenter({event_presenter_id, try_c
});
}}
class="btn btn-sm variant-ghost-warning w-42 mb-1 export_data_btn text-xs"
class="btn btn-sm preset-tonal-warning border border-warning-500 w-42 mb-1 export_data_btn text-xs"
title={`Download sponsorship data for ${$ae_loc.account_name}`}
>
{#await ae_promises.download__sponsorship_export}

61
src/routes/events_speakers/10_edit_modal__event_presenter_obj.svelte
View File

@@ -6,7 +6,7 @@ import { fade } from 'svelte/transition';
// This works and uses local storage:
// store_current_tab must be prefixed with $ to be reactive.
import { clipboard, FileDropzone, getModalStore, localStorageStore, TabGroup, Tab } from '@skeletonlabs/skeleton';
import { Tab, FileUpload, Tabs } from '@skeletonlabs/skeleton-svelte';
import type { Writable } from 'svelte/store';
@@ -23,7 +23,6 @@ console.log(`store_current_tab:`, $store_current_tab);
// let tab_set = store_current_tab;
// Stores
// import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
// Props
/** Exposes parent props to this component. */
@@ -661,7 +660,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
</div>
{/await}
<button class="btn variant-glass-primary float-end" on:click={parent.onClose}>
<button class="btn preset-tonal-primary float-end" on:click={parent.onClose}>
<span class="fas fa-times mx-1"></span>
Close
</button>
@@ -692,14 +691,14 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
{/if} -->
<TabGroup
<Tabs
justify="justify-center"
active="variant-ghost-primary"
hover="hover:variant-soft-primary"
active="preset-tonal-primary border border-primary-500"
hover="hover:preset-tonal-primary"
flex="flex-1 lg:flex-none"
rounded=""
border=""
class="bg-surface-100-800-token w-full"
class="bg-surface-100-900 w-full"
>
<Tab bind:group={$store_current_tab} name="tab_start" value={'start'}>
<svelte:fragment slot="lead">
@@ -800,7 +799,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
<span class="input_required">First name</span>
<input
type="text"
class="input variant-glass-warning"
class="input preset-tonal-warning"
id="given_name" name="given_name"
placeholder="First name"
value={($slct.event_presenter_obj.given_name ? $slct.event_presenter_obj.given_name : '')}
@@ -814,7 +813,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
<span class="input_required">Last name</span>
<input
type="text"
class="input variant-glass-warning"
class="input preset-tonal-warning"
id="family_name" name="family_name"
placeholder="Last name"
value={($slct.event_presenter_obj.family_name ? $slct.event_presenter_obj.family_name : '')}
@@ -826,19 +825,19 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
<label for="professional_title" class="label">
<span class="input_required">Professional title</span>
<input type="text" id="professional_title" name="professional_title" required max="200" value={$slct.event_presenter_obj.professional_title ?? ''} placeholder="Professional title" autocomplete="off" class="input variant-glass-warning" />
<input type="text" id="professional_title" name="professional_title" required max="200" value={$slct.event_presenter_obj.professional_title ?? ''} placeholder="Professional title" autocomplete="off" class="input preset-tonal-warning" />
</label>
<label for="affiliations" class="label">
<span class="input_required">Affiliations/Organization</span>
<input type="text" id="affiliations" name="affiliations" required max="200" value={$slct.event_presenter_obj.affiliations ?? ''} placeholder="Affiliations or organization" autocomplete="off" class="input variant-glass-warning" />
<input type="text" id="affiliations" name="affiliations" required max="200" value={$slct.event_presenter_obj.affiliations ?? ''} placeholder="Affiliations or organization" autocomplete="off" class="input preset-tonal-warning" />
</label>
<label for="email">
<span class="input_required">Email</span>
<input
type="email"
class="input variant-glass-warning"
class="input preset-tonal-warning"
id="email"
name="email"
placeholder="Email"
@@ -880,7 +879,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
<label for="agree" class="label">
<input
type="checkbox"
class="checkbox variant-glass-warning"
class="checkbox preset-tonal-warning"
id="agree"
name="agree"
value="1"
@@ -931,7 +930,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
<button
type="submit"
class="btn variant-glass-primary m-2"
class="btn preset-tonal-primary m-2"
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
on:click={() => {
console.log('*** Save start button clicked ***');
@@ -966,7 +965,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
class="modal-form {$ae_loc.hub.classes__form}"
on:submit|preventDefault={handle_submit_form}
>
<label class="label ae_label event_presenter__biography required variant-glass-warning space-y-4">
<label class="label ae_label event_presenter__biography required preset-tonal-warning space-y-4">
<span class="label">
<h3 class="h4 input_required">Speaker Biography</h3>
<!-- <p>This is required.</p> -->
@@ -975,7 +974,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
name="biography"
id="biography"
class="textarea ae_value event_presenter__biography tinymce_editor editor_basic"
class:variant-glass-error={($slct.event_presenter_obj.biography && $slct.event_presenter_obj.biography.length >1250 ? true : false)}
class:preset-tonal-error={($slct.event_presenter_obj.biography && $slct.event_presenter_obj.biography.length >1250 ? true : false)}
required
rows="16" cols="70"
bind:value={$slct.event_presenter_obj.biography} placeholder="Enter brief biography here"></textarea>
@@ -989,7 +988,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
<div class="flex flex-wrap gap-2 p-1">
<button
type="submit"
class="btn variant-glass-primary m-2"
class="btn preset-tonal-primary m-2"
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
on:click={() => {
console.log('*** Save button clicked ***');
@@ -1022,12 +1021,12 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
<!-- <p>Upload your headshot photo here. This is required.</p> -->
<label for="image_headshot">
Upload a headshot photo
<FileDropzone
<FileUpload
id="image_headshot"
name="image_headshot"
padding="p-1"
accept="image/*"
class="w-96 variant-glass-warning"
class="w-96 preset-tonal-warning"
required={$slct.event_presenter_obj.image_li_json && !$slct.event_presenter_obj.image_li_json.headshot}
on:change={(e) => {
console.log('*** FileDropzone change event ***', e);
@@ -1042,7 +1041,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
<svelte:fragment slot="lead"><span class="fas fa-file-upload"></svelte:fragment>
<svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
<svelte:fragment slot="meta">High resolution image files only<br>(PNG, WEBP, JPG, etc)</svelte:fragment>
</FileDropzone>
</FileUpload>
{@html placeholder_li.image_headshot}
</label>
@@ -1050,7 +1049,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
<button
type="submit"
class="btn variant-glass-primary m-2"
class="btn preset-tonal-primary m-2"
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
on:click={() => {
console.log('*** Save button clicked ***');
@@ -1080,10 +1079,10 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
<label for="website_url" class="label">
<!-- Website URL -->
<input type="url" id="website_url" name="website_url" class="input text-xs w-96 variant-glass-warning" placeholder="Website URL (https://example.org)" bind:value={$slct.event_presenter_obj.website_url} autocomplete="url" required />
<input type="url" id="website_url" name="website_url" class="input text-xs w-96 preset-tonal-warning" placeholder="Website URL (https://example.org)" bind:value={$slct.event_presenter_obj.website_url} autocomplete="url" required />
</label>
<p class="text-xs italic variant-glass-tertiary max-w-96">The URLs should begin with "https://" or "http://"</p>
<p class="text-xs italic preset-tonal-tertiary max-w-96">The URLs should begin with "https://" or "http://"</p>
</fieldset>
<!-- Ask for common social media URLs. (Twitter, Facebook, Instagram, etc) -->
@@ -1110,7 +1109,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
<button
type="submit"
class="btn variant-glass-primary m-2"
class="btn preset-tonal-primary m-2"
disabled={($ae_sess.mod.sponsorships.disable_submit__sponsorship_obj)}
on:click={() => {
console.log('*** Save marketing button clicked ***');
@@ -1127,7 +1126,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
<section class="summary space-y-4">
<button
class="btn variant-soft-secondary mx-1 float-right"
class="btn preset-tonal-secondary mx-1 float-right"
disabled={(!$slct.event_presenter_obj.email)}
title="Send confirmation email to speaker"
on:click={() => {
@@ -1191,7 +1190,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
{/if}
</svelte:fragment>
</TabGroup>
</Tabs>
<!-- </form> -->
@@ -1210,7 +1209,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
$slct.event_presenter_id = null;
$slct.event_presenter_obj = {};
}}
class="btn btn-sm variant-glass-warning mx-1" type="button"
class="btn btn-sm preset-tonal-warning mx-1" type="button"
title="Delete record permanently"
>
<span class="fas fa-minus mx-1"></span> Delete
@@ -1224,7 +1223,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
$slct.event_presenter_id = null;
$slct.event_presenter_obj = {};
}}
class="btn btn-sm variant-glass-warning mx-1" type="button"
class="btn btn-sm preset-tonal-warning mx-1" type="button"
title="Disable record to delete"
>
<span class="fas fa-minus mx-1"></span> Delete
@@ -1238,7 +1237,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
$slct.event_presenter_id = null;
$slct.event_presenter_obj = {};
}}
class="btn btn-sm variant-glass-warning mx-1" type="button"
class="btn btn-sm preset-tonal-warning mx-1" type="button"
title="Hide record to delete"
>
<span class="fas fa-comment-slash mx-1"></span> Delete
@@ -1247,7 +1246,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
{/if}
<button
class="btn btn-sm variant-soft-secondary mx-1"
class="btn btn-sm preset-tonal-secondary mx-1"
use:clipboard={$ae_loc.mod.events.presenter_link}
title={`Copy link to this speaker submission (ID: ${$slct.event_presenter_id})`}
>
@@ -1289,7 +1288,7 @@ async function handle_delete_event_presenter_obj({event_presenter_id, hosted_fil
{/await}
<button class="btn variant-glass-primary" on:click={parent.onClose}>
<button class="btn preset-tonal-primary" on:click={parent.onClose}>
<span class="fas fa-times mx-1"></span>
Close
</button>

12
src/routes/events_speakers/10_list__event_presenter_obj.svelte
View File

@@ -2,8 +2,6 @@
// *** 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/ae_utils';
@@ -20,7 +18,7 @@ onMount(() => {
<section class="svelte_component ae_section ae_list list__event_presenter_obj event_presenter_obj_li {class_li}">
{#if $slct.event_presenter_obj_li}
<table class="table table-compact table-hover">
<table class="table table-compact ">
<thead>
<tr>
<th>Options</th>
@@ -39,7 +37,7 @@ onMount(() => {
>
<td class="ae_options event_presenter_obj__options">
<div class="btn-group variant-filled">
<div class=" preset-filled">
<button
on:click={() => {
$slct.event_presenter_id = ae_event_presenter_obj.event_presenter_id_random;
@@ -53,7 +51,7 @@ onMount(() => {
$ae_loc.mod.events.show_view__event_presenter_obj = true;
$slct_trigger = 'show_view__event_presenter_obj';
}}
class="variant-soft-primary"
class="preset-tonal-primary"
title={`Open to see details: ${ae_event_presenter_obj.name}`}
>
<span class="fas fa-envelope-open mx-1"></span>
@@ -76,7 +74,7 @@ onMount(() => {
$ae_loc.mod.events.show_view__event_presenter_obj = false;
$slct_trigger = 'show_edit__event_presenter_obj';
}}
class="variant-soft-warning"
class="preset-tonal-warning"
title={`Edit event presenter: ${ae_event_presenter_obj.name}`}
>
<span class="fas fa-edit mx-1"></span> Edit
@@ -115,7 +113,7 @@ onMount(() => {
</tfoot>
</table>
{:else}
<div>No event presenters avalible to show at this time</div>
<div>No event presenters available to show at this time</div>
{/if}
</section>

12
src/routes/events_speakers/10_view_modal__event_presenter_obj.svelte
View File

@@ -5,7 +5,7 @@ import { onMount } from 'svelte';
// This works and uses local storage:
// store_current_tab must be prefixed with $ to be reactive.
import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, RadioGroup, RadioItem, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
import { Tab, FileUpload, ProgressRing, Segment, Tabs } from '@skeletonlabs/skeleton-svelte';
import type { Writable } from 'svelte/store';
import { ae_util } from '$lib/ae_utils/ae_utils';
@@ -45,7 +45,7 @@ onMount(() => {
<header class={parent.regionHeader}>
{@html $slct.event_presenter_obj.full_name}
<button class="btn variant-glass-primary float-end" on:click={parent.onClose}>
<button class="btn preset-tonal-primary float-end" on:click={parent.onClose}>
<span class="fas fa-times mx-1"></span>
Close
</button>
@@ -88,7 +88,7 @@ onMount(() => {
class="event_presenter_phone_mobile"
>
<span class="ae_label">Phone:</span>
<span class="ae_value"><span class="fas fa-phone"></span> {$slct.event_presenter_obj.phone_mobile} &mdash; {$slct.event_presenter_obj.phone_mobile}</span>
<span class="ae_value"><span class="fas fa-phone"></span> {$slct.event_presenter_obj.phone_mobile} — {$slct.event_presenter_obj.phone_mobile}</span>
</div>
<!-- <div>
@@ -137,7 +137,7 @@ onMount(() => {
{#if $ae_loc.trusted_access}
<span class="ae_options mx-1">
<button
class="btn variant-glass-warning mx-1"
class="btn preset-tonal-warning mx-1"
on:click={() => {
if (!confirm(`Are you sure you want to send this email to ${$slct.event_presenter_obj.email}?`)) {return false;}
@@ -163,7 +163,7 @@ onMount(() => {
parent.onClose();
$slct_trigger = 'show_edit__event_presenter_obj';
}}
class="btn variant-glass-warning mx-1"
class="btn preset-tonal-warning mx-1"
title={`Edit presenter: ${$slct.event_presenter_obj.name}`}
>
<span class="fas fa-edit mx-1"></span> Edit
@@ -171,7 +171,7 @@ onMount(() => {
</span>
{/if}
<button class="btn variant-glass-primary" on:click={parent.onClose}>
<button class="btn preset-tonal-primary" on:click={parent.onClose}>
<span class="fas fa-times mx-1"></span>
Close
</button>

7
src/routes/events_speakers/[slug]/+page.svelte
View File

@@ -8,13 +8,12 @@ import { onMount } from 'svelte';
// https://github.com/skeletonlabs/skeleton/blob/master/packages/skeleton/src/lib/utilities/Modal/types.ts
// 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
} from '@skeletonlabs/skeleton';
} from '@skeletonlabs/skeleton-svelte';
const modalStore = getModalStore();
import { api } from '$lib/api';
@@ -266,7 +265,7 @@ $: if (testing) {
</div>
<button
class="btn variant-ghost-primary w-96"
class="btn preset-tonal-primary border border-primary-500 w-96"
on:click={() => {
ae_util.handle_url_and_message('event_presenter_id', $slct.event_presenter_id);
modalStore.trigger(modal_edit__event_presenter);
@@ -284,7 +283,7 @@ $: if (testing) {
</button>
{:else}
<button
class="btn variant-ghost-primary w-96"
class="btn preset-tonal-primary border border-primary-500 w-96"
on:click={() => {
ae_util.handle_url_and_message('event_presenter_id', null);
modalStore.trigger(modal_edit__event_presenter);