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

Getting ready for CHOW 2024 demo call tomorrow

Browse Source
This commit is contained in:
Scott Idem
2024-02-29 14:37:37 -05:00
parent 9310aac4d2
commit addadacc47
4 changed files with 214 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/lib/ae_stores.ts
View File

@@ -64,12 +64,17 @@ export let ae_app_local_data_struct: key_val = {
'archives': {},
'events': {
'event_id': null,
// Badge Printing
// Lead Retrievals
// Presentation Management
// Speakers Management
'default_session_id': null, // Assign to presenters by default
// other
},
@@ -128,6 +133,8 @@ export let ae_app_session_data_struct: key_val = {
// Presentation Management
// Speakers Management
// other
},
'journals': {},

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

@@ -91,17 +91,19 @@ $: if ($slct_trigger == 'show_edit__event_presenter_obj' && $ae_loc.mod.events.s
console.log('Show Modal Edit');
$slct_trigger = null;
let location = window.location.href;
const url = new URL(location);
url.searchParams.set('event_presenter_id', $slct.event_presenter_id);
history.pushState({}, '', url);
if ($slct.event_presenter_id) {
let location = window.location.href;
const url = new URL(location);
url.searchParams.set('event_presenter_id', $slct.event_presenter_id);
history.pushState({}, '', url);
let message = {'event_presenter_id': $slct.event_presenter_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
// 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) {
@@ -260,17 +262,17 @@ async function handle_load_ae_obj_id__event_presenter({event_presenter_id, try_c
<button
class="btn variant-ghost-primary"
on:click={() => {
// $ae_loc.mod.events_speakers.show_edit__event_presenter_obj = true;
// $ae_loc.mod.events.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;
$ae_loc.mod.events.show_edit__event_presenter_obj = true;
$slct_trigger = 'show_edit__event_presenter_obj';
}}
>
<span class="fas fa-edit mx-1"></span>
Start/Edit Speaker
Start Speaker
</button>
</section>

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

@@ -1,30 +1,27 @@
<script lang="ts">
import type { SvelteComponent } from 'svelte';
import { createEventDispatcher, onMount } from 'svelte';
// const dispatch = createEventDispatcher();
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
// This works and uses local storage:
// store_current_tab must be prefixed with $ to be reactive.
import { clipboard, localStorageStore, ProgressRadial } from '@skeletonlabs/skeleton';
import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
import type { Writable } from 'svelte/store';
const store_current_tab: Writable<string> = localStorageStore('store_current_tab', 'start');
const store_current_tab: Writable<string> = localStorageStore('ae_events_speakers_current_tab', 'start');
console.log(`store_current_tab:`, $store_current_tab);
// This works, but does not uses local storage:
// store_current_tab is not reactive and should not be prefixed with $.
// let store_current_tab: string = 'start';
// console.log(`store_current_tab:`, store_current_tab);
// This does not work:
// let tab_set = $store_current_tab;
// let tab_set = store_current_tab;
// Stores
import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
// import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
// Props
/** Exposes parent props to this component. */
@@ -50,87 +47,76 @@ onMount(() => {
}
});
// We've created a custom submit function to pass the response and close the modal.
// function onFormSubmit(): void {
// if ($modalStore[0].response) $modalStore[0].response(formData);
// modalStore.close();
// }
// Base Classes
// const cBase = 'card p-4 shadow-xl space-y-4 ae_modal_scrollfix';
// w-modal-wide
// const cBase = 'bg-surface-100-800-token w-screen h-screen';
// const cBase = 'card h-screen';
// const cBase = 'card p-4 w-modal-wide h-screen shadow-xl space-y-4';
const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
let ae_promises: key_val = {}; // Promise<any>;
$ae_loc.mod.events.submit_status = null;
$ae_loc.mod.events.disable_submit__event_presenter_obj = false;
let placeholder_li: key_val = {
file_logo_primary: '-- No File Selected --',
file_logo_secondary: '-- No File Selected --',
file_media_promo_video: '-- No File Selected --',
};
let ae_promises: key_val = {};
// let ae_promises.api_create__event_presenter_obj: Promise<any>;
if ($slct.event_presenter_id) {
console.log(`Presenter ID selected: ${$slct.event_presenter_id}`);
console.log(`Presenter object selected:`, $slct.event_presenter_obj);
// $slct_trigger = 'load__event_presenter_obj';
// $ae_loc.mod.events.presenter_link = `${$ae_loc.href_url}/load?ae_id=${$slct.event_presenter_id}`;
// console.log('Presenter link:', $ae_loc.mod.events.presenter_link);
} else {
$store_current_tab = 'start';
$slct.event_presenter_id = null;
$slct.event_presenter_obj = {
event_id_random: $ae_loc.mod.events.event_id,
name: null,
description: null,
title_names: null, // Usually their prefix name
given_name: null,
family_name: null,
professional_title: null,
full_name: null,
full_name_override: null, // was called display_name
poc_person_id: null,
email: null,
phone_mobile: null,
affiliations: null,
logo_li_json: null,
media_li_json: null,
biography: null,
picture_path: null,
// logo_li_json: null,
// media_li_json: null,
social_li_json: null,
guest_li_json: null,
level_num: null,
level_str: null,
amount: null,
paid: null,
enable: null,
};
}
$: if ($slct.event_presenter_obj) {
// Logo related
if ($slct.event_presenter_obj.logo_li_json) {
if ($slct.event_presenter_obj.logo_li_json.primary.hosted_file_id_random) {
placeholder_li.file_logo_primary = `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.logo_li_json.primary.hosted_file_id_random}">${$slct.event_presenter_obj.logo_li_json.primary.filename}`;
}
if ($slct.event_presenter_obj.logo_li_json.secondary.hosted_file_id_random) {
placeholder_li.file_logo_secondary = `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.logo_li_json.secondary.hosted_file_id_random}">${$slct.event_presenter_obj.logo_li_json.secondary.filename}`;
}
}
// Other media files related
if ($slct.event_presenter_obj.media_li_json) {
if ($slct.event_presenter_obj.media_li_json.promo_video && $slct.event_presenter_obj.media_li_json.promo_video.hosted_file_id_random) {
placeholder_li.file_media_promo_video = `<video src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.media_li_json.promo_video.hosted_file_id_random}" controls></video>${$slct.event_presenter_obj.media_li_json.promo_video.filename}`;
}
}
// Create HTML for showing pictures here?
// if ($slct.event_presenter_obj.logo_li_json) {
// if ($slct.event_presenter_obj.logo_li_json.primary.hosted_file_id_random) {
// placeholder_li.file_logo_primary = `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.logo_li_json.primary.hosted_file_id_random}">${$slct.event_presenter_obj.logo_li_json.primary.filename}`;
// }
// if ($slct.event_presenter_obj.logo_li_json.secondary.hosted_file_id_random) {
// placeholder_li.file_logo_secondary = `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.logo_li_json.secondary.hosted_file_id_random}">${$slct.event_presenter_obj.logo_li_json.secondary.filename}`;
// }
// }
// Create HTML for showing other media file types here?
// if ($slct.event_presenter_obj.media_li_json) {
// if ($slct.event_presenter_obj.media_li_json.promo_video && $slct.event_presenter_obj.media_li_json.promo_video.hosted_file_id_random) {
// placeholder_li.file_media_promo_video = `<video src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.media_li_json.promo_video.hosted_file_id_random}" controls></video>${$slct.event_presenter_obj.media_li_json.promo_video.filename}`;
// }
// }
}
async function handle_submit_form(event) {
console.log('*** handle_submit_form() ***');
$ae_loc.mod.events.disable_submit__event_presenter_obj = true;
$ae_loc.mod.events.submit_status = 'saving';
// Data in
let form_data = new FormData(event.target);
@@ -143,67 +129,48 @@ async function handle_submit_form(event) {
let event_presenter_do: key_val = {};
if (!$slct.event_presenter_id) {
// event_presenter_do['account_id_random'] = $ae_loc.account_id;
event_presenter_do['event_presenter_cfg_id_random'] = $slct.event_presenter_cfg_id;
// event_presenter_do['enable'] = true;
event_presenter_do['event_id_random'] = $ae_loc.mod.events.event_id;
event_presenter_do['event_session_id_random'] = $ae_loc.mod.events.default_session_id;
}
if (event_presenter_di.poc_full_name || event_presenter_di.poc_email) {
event_presenter_do['poc_json'] = {
full_name: event_presenter_di.poc_full_name,
email: event_presenter_di.poc_email,
phone_mobile: event_presenter_di.poc_phone_mobile,
};
if (event_presenter_di.given_name) {
event_presenter_do['given_name'] = event_presenter_di.given_name;
}
if (event_presenter_di.family_name) {
event_presenter_do['family_name'] = event_presenter_di.family_name;
}
if (event_presenter_di.organization_name) {
// Using the organization_name field to store the name of the event_presenter.
event_presenter_do['name'] = event_presenter_di.organization_name;
}
// if (event_presenter_di.description) {
// event_presenter_do['description'] = event_presenter_di.description;
// if (event_presenter_di.given_name && event_presenter_di.family_name) {
// event_presenter_do['full_name_overide'] = ;
// }
if (event_presenter_di.level_num) {
event_presenter_do['level_num'] = Number(event_presenter_di.level_num);
let level_num = event_presenter_do['level_num'];
if ($slct.event_presenter_cfg_obj.level_li_json) {
let level_str = `${$slct.event_presenter_cfg_obj.level_li_json[level_num].name} - ${$slct.event_presenter_cfg_obj.level_li_json[level_num].amount}`;
event_presenter_do['level_str'] = level_str;
}
if (event_presenter_di.organization_name) {
event_presenter_do['affiliations'] = event_presenter_di.organization_name;
}
// Loop through possible guest list (up to 20) and add to the guest_li_json array.
let temp_guest_li = [];
for (let i = 0; i < 20; i++) {
if (event_presenter_di[`guest_${i}_full_name`] || event_presenter_di[`guest_${i}_given_name`]) {
let guest_x_full_name = event_presenter_di[`guest_${i}_given_name`] + ' ' + event_presenter_di[`guest_${i}_family_name`];
temp_guest_li.push({
given_name: event_presenter_di[`guest_${i}_given_name`],
family_name: event_presenter_di[`guest_${i}_family_name`],
full_name: guest_x_full_name,
email: event_presenter_di[`guest_${i}_email`],
phone_mobile: event_presenter_di[`guest_${i}_phone_mobile`],
phone_home: event_presenter_di[`guest_${i}_phone_home`],
phone_office: event_presenter_di[`guest_${i}_phone_office`],
city: event_presenter_di[`guest_${i}_city`],
other_text: event_presenter_di[`guest_${i}_other_text`],
});
}
}
if (temp_guest_li.length) {
event_presenter_do['guest_li_json'] = temp_guest_li;
if (event_presenter_di.email) {
event_presenter_do['email'] = event_presenter_di.email;
}
if (event_presenter_di.social_media_facebook || event_presenter_di.social_media_twitter || event_presenter_di.social_media_instagram || event_presenter_di.social_media_linkedin) {
event_presenter_do['social_li_json'] = {
facebook: event_presenter_di.social_media_facebook,
twitter: event_presenter_di.social_media_twitter,
instagram: event_presenter_di.social_media_instagram,
linkedin: event_presenter_di.social_media_linkedin,
};
if (event_presenter_di.biography) {
event_presenter_do['biography'] = event_presenter_di.biography;
}
// if (event_presenter_di.social_media_facebook || event_presenter_di.social_media_twitter || event_presenter_di.social_media_instagram || event_presenter_di.social_media_linkedin) {
// event_presenter_do['social_li_json'] = {
// facebook: event_presenter_di.social_media_facebook,
// twitter: event_presenter_di.social_media_twitter,
// instagram: event_presenter_di.social_media_instagram,
// linkedin: event_presenter_di.social_media_linkedin,
// };
// }
// if (event_presenter_di.image_headshot) {
// event_presenter_do['picture_path'] = event_presenter_di.image_headshot;
// }
if (event_presenter_di.comments) {
event_presenter_do['comments'] = event_presenter_di.comments;
}
event_presenter_do['hide'] = !!event_presenter_di.hide;
@@ -498,16 +465,25 @@ async function handle_update__event_presenter({
>
<Tab bind:group={$store_current_tab} name="tab_start" value={'start'}>
<svelte:fragment slot="lead"><span class="fas fa-home"></span></svelte:fragment>
{#if $slct.event_presenter_obj.event_presenter_id_random}
<span class="fas fa-check text-green-500"></span>
{/if}
<span>Start</span>
</Tab>
<Tab bind:group={$store_current_tab} name="tab_files" value={'files'} disabled={!$slct.event_presenter_obj.event_presenter_id_random}>
<svelte:fragment slot="lead"><span class="fas fa-file-upload"></span></svelte:fragment>
Files
</Tab>
<Tab bind:group={$store_current_tab} name="tab_biograhpy" value={'biograhpy'} disabled={!$slct.event_presenter_obj.event_presenter_id_random}>
<svelte:fragment slot="lead"><span class="fas fa-users"></span></svelte:fragment>
{#if $slct.event_presenter_obj.biography.length > 50}
<span class="fas fa-check text-green-500"></span>
{/if}
Biography
</Tab>
<Tab bind:group={$store_current_tab} name="tab_files" value={'files'} disabled={!$slct.event_presenter_obj.event_presenter_id_random}>
<svelte:fragment slot="lead"><span class="fas fa-file-upload"></span></svelte:fragment>
{#if $slct.event_presenter_obj.image_li_json}
<span class="fas fa-check text-green-500"></span>
{/if}
Files
</Tab>
<Tab bind:group={$store_current_tab} name="tab_options" value={'options'} disabled={!$slct.event_presenter_obj.event_presenter_id_random}>
<svelte:fragment slot="lead"><span class="fas fa-info"></span></svelte:fragment>
More
@@ -531,7 +507,7 @@ async function handle_update__event_presenter({
<fieldset class="mb-8 flex flex-wrap gap-4">
<legend class="legend">Speaker</legend>
<label for="full_name">Full name
<label for="given_name">Given name
<div class="input-group grid-cols-[auto_1fr_auto]">
<div class="input-group-shim">
{#if !$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
@@ -543,15 +519,41 @@ async function handle_update__event_presenter({
<input
type="text"
class="input"
id="full_name" name="full_name"
placeholder="Full name"
value={($slct.event_presenter_obj.full_name ? $slct.event_presenter_obj.full_name : '')}
id="given_name" name="given_name"
placeholder="Given name"
value={($slct.event_presenter_obj.given_name ? $slct.event_presenter_obj.given_name : '')}
autocomplete="name"
readonly={!$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
required
>
</div>
</label>
<label for="family_name">Family name
<div class="input-group grid-cols-[auto_1fr_auto]">
<div class="input-group-shim">
{#if !$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
<span class="fas fa-lock" title="Field is locked"></span>
{:else}
<span class="fas fa-unlock" title="Field is unlocked"></span>
{/if}
</div>
<input
type="text"
class="input"
id="family_name" name="family_name"
placeholder="Family name"
value={($slct.event_presenter_obj.family_name ? $slct.event_presenter_obj.family_name : '')}
autocomplete="name"
readonly={!$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
required
>
</div>
</label>
<label for="affiliations" class="label">Affiliations/Organization
<input type="text" id="affiliations" name="affiliations" required max="200" value={$slct.event_presenter_obj.affiliations ?? ''} placeholder="Affiliations or organization" autocomplete="off" class="input" />
</label>
<label for="email">Email
<div class="input-group grid-cols-[auto_1fr_auto]">
<div class="input-group-shim">
@@ -575,7 +577,7 @@ async function handle_update__event_presenter({
</div>
</label>
<label for="phone_mobile">Mobile phone
<!-- <label for="phone_mobile">Mobile phone
<input
type="tel"
class="input"
@@ -585,43 +587,7 @@ async function handle_update__event_presenter({
value={($slct.event_presenter_obj.phone_mobile ? $slct.event_presenter_obj.phone_mobile : '')}
autocomplete="tel"
>
</label>
<label for="affiliations" class="label">Affiliations/Organization
<input type="text" id="affiliations" name="affiliations" required max="200" value={$slct.event_presenter_obj.affiliations ?? ''} placeholder="Affiliations or organization" autocomplete="off" class="input" />
</label>
<!-- Collect the organization mailing address -->
<fieldset class="mb-8 flex flex-wrap gap-4">
<legend class="legend">Mailing Address</legend>
<label for="address_line_1" class="label max-w-64">
<!-- Line 1 (Street) -->
<input type="text" id="address_line_1" name="address_line_1" value={$slct.event_presenter_obj.address_street ?? ''} placeholder="Line 1 (street)" autocomplete="street-address" class="input text-xs" />
</label>
<label for="address_line_2" class="label max-w-64">
<!-- Line 2 (Suite) -->
<input type="text" id="address_line_2" name="address_line_2" value={$slct.event_presenter_obj.address_suite ?? ''} placeholder="Line 2 (suite)" autocomplete="address-line2" class="input text-xs" />
</label>
<label for="address_city" class="label max-w-64">
<!-- City -->
<input type="text" id="address_city" name="address_city" value={$slct.event_presenter_obj.address_city ?? ''} placeholder="City" autocomplete="address-level2" class="input text-xs" />
</label>
<label for="address_state" class="label max-w-64">
<!-- State/Province -->
<input type="text" id="address_state_province" name="address_state_province" value={$slct.event_presenter_obj.address_state_province ?? ''} placeholder="State/Province" autocomplete="address-level1" class="input text-xs" />
</label>
<label for="address_postal_code" class="label max-w-64">
<!-- Postal code/Zip -->
<input type="text" id="address_postal_code" name="address_postal_code" value={$slct.event_presenter_obj.address_postal_code ?? ''} placeholder="Postal code/Zip" autocomplete="postal-code" class="input text-xs" />
</label>
<label for="address_country" class="label max-w-64">
<!-- Country -->
<input type="text" id="address_country" name="address_country" value={$slct.event_presenter_obj.address_country ?? ''} placeholder="Country" autocomplete="country-name" class="input text-xs" />
</label>
</fieldset>
</label> -->
</fieldset>
<!-- </section> -->
@@ -629,19 +595,19 @@ async function handle_update__event_presenter({
<fieldset class="mb-8">
<legend class="legend">Agreements & Accommodations</legend>
<label for="waiver" class="label">
<label for="consent" class="label">
<input
type="checkbox"
class="checkbox"
id="waiver"
name="waiver"
id="consent"
name="consent"
value="1"
checked={$slct.event_presenter_obj.waiver}
checked={$slct.event_presenter_obj.consent}
>
Yes, I understand the "Speaker General Waiver".
Yes, I grant the Foundation permission to use my biography, photo, and presentation, materials and verbal remarks on the Foundation website and promotional materials. I understand that summarized remarks will be sent to me for review prior to inclusion.
</label>
<label for="accommodations" class="label">
<!-- <label for="accommodations" class="label">
<input
type="checkbox"
class="checkbox"
@@ -651,7 +617,7 @@ async function handle_update__event_presenter({
checked={$slct.event_presenter_obj.accommodations}
>
Yes, please have a member of the CHOW team reach out for special accommodations or assistance.
</label>
</label> -->
</fieldset>
<button
@@ -660,88 +626,6 @@ async function handle_update__event_presenter({
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
on:click={() => {
console.log('*** Save start button clicked ***');
// if (!confirm('Are you sure you want to save this event_presenter?')) {return false;}
// handle_submit_form();
// handle_submit_form;
}}
>
<span class="fas fa-check mx-1"></span>
Save
</button>
</form>
{:else if $store_current_tab === 'files'}
<form
class="modal-form {cForm}"
on:submit|preventDefault={handle_submit_form_files}
>
<section>
<h2>Logos</h2>
<p>Add your logo here. This logo will be displayed at the gala.</p>
<label for="file_logo_primary">
Upload logo (png, webp, jpg, svg)
<FileDropzone
id="file_logo_primary"
name="file_logo_primary"
padding="p-1"
accept="image/*"
on:change={(e) => {
console.log('*** FileDropzone change event ***', e);
if (e.target.files.length) {
placeholder_li.file_logo_primary = `Ready to upload: ${e.target.files[0].name}`;
} else {
placeholder_li.file_logo_primary = 'No files selected.';
}
}}
>
<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">PNG, WEBP, JPG only image types</svelte:fragment>
</FileDropzone>
{@html placeholder_li.file_logo_primary}
</label>
<label for="file_logo_secondary">
Upload a version of your logo for use with dark backgrounds (png, webp, jpg, svg)
<FileDropzone
id="file_logo_secondary"
name="file_logo_secondary"
padding="p-1"
accept="image/*"
on:change={(e) => {
console.log('*** FileDropzone change event ***', e);
if (e.target.files.length) {
placeholder_li.file_logo_secondary = `Ready to upload: ${e.target.files[0].name}`;
} else {
placeholder_li.file_logo_secondary = 'No files selected.';
}
}}
>
<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">PNG, WEBP, JPG only image types</svelte:fragment>
</FileDropzone>
{@html placeholder_li.file_logo_secondary}
</label>
</section>
<button
type="submit"
class="btn {parent.buttonPositive}"
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
on:click={() => {
console.log('*** Save button clicked ***');
// if (!confirm('Are you sure you want to save this event_presenter?')) {return false;}
// handle_submit_form();
// handle_submit_form;
}}
>
<span class="fas fa-check mx-1"></span>
@@ -760,8 +644,10 @@ async function handle_update__event_presenter({
on:submit|preventDefault={handle_submit_form}
>
<label class="label ae_label event_presenter__biography">Speaker Biography
<textarea name="biography" id="biography" class="textarea ae_value event_presenter__biography tinymce_editor editor_basic" rows="5" cols="70" bind:value={$slct.event_presenter_obj.biography} placeholder="A short biography or overview of this event_presenter."></textarea>
<textarea name="biography" id="biography" class="textarea ae_value event_presenter__biography tinymce_editor editor_basic" rows="10" cols="70" bind:value={$slct.event_presenter_obj.biography} placeholder="A short biography the speaker"></textarea>
</label>
<p>Biography length: {($slct.event_presenter_obj.biography ? $slct.event_presenter_obj.biography.length : 0)} characters</p>
<p>1,375 is roughly 250 to 300 words</p>
<div class="flex flex-wrap gap-2 p-1">
<button
@@ -786,6 +672,61 @@ async function handle_update__event_presenter({
</section>
{:else if $store_current_tab === 'files'}
<form
class="modal-form {cForm}"
on:submit|preventDefault={handle_submit_form_files}
>
<section>
<h2>Headshot Photo</h2>
<p>Add your headshot photo here.</p>
<label for="image_headshot">
Upload logo (png, webp, jpg, svg)
<FileDropzone
id="image_headshot"
name="image_headshot"
padding="p-1"
accept="image/*"
on:change={(e) => {
console.log('*** FileDropzone change event ***', e);
if (e.target.files.length) {
placeholder_li.file_logo_primary = `Ready to upload: ${e.target.files[0].name}`;
} else {
placeholder_li.file_logo_primary = 'No files selected.';
}
}}
>
<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">PNG, WEBP, JPG only image types</svelte:fragment>
</FileDropzone>
{@html placeholder_li.file_logo_primary}
</label>
</section>
<button
type="submit"
class="btn {parent.buttonPositive}"
disabled={($ae_loc.mod.events.disable_submit__event_presenter_obj)}
on:click={() => {
console.log('*** Save button clicked ***');
// if (!confirm('Are you sure you want to save this event_presenter?')) {return false;}
// handle_submit_form();
// handle_submit_form;
}}
>
<span class="fas fa-check mx-1"></span>
Save
</button>
</form>
{:else if $store_current_tab === 'options'}
@@ -794,7 +735,7 @@ async function handle_update__event_presenter({
on:submit|preventDefault={handle_submit_form}
>
<!-- Ask for common social media URLs. (Twitter, Facebook, Instagram, etc) -->
{#if $slct.event_presenter_obj.social_li_json}
<!-- {#if $slct.event_presenter_obj.social_li_json}
<fieldset class="event_presenter__social_media">
<legend class="legend">Social Media</legend>
@@ -811,12 +752,12 @@ async function handle_update__event_presenter({
<input type="url" id="social_media_linkedin" name="social_media_linkedin" class="input" placeholder="LinkedIn" value={$slct.event_presenter_obj.social_li_json.linkedin ?? ''} autocomplete="url" />
</label>
</fieldset>
{/if}
{/if} -->
<fieldset class="event_presenter__more_questions">
<legend class="legend">More Questions</legend>
<legend class="legend">Questions and Comments</legend>
<label for="question" class="label">This is another question?
<!-- <label for="question" class="label">This is another question?
<div class="label">
<input
type="text"
@@ -830,7 +771,7 @@ async function handle_update__event_presenter({
required
>
</div>
</label>
</label> -->
<label class="label ae_label event_presenter__comments">Comments
<textarea name="comments" id="comments" class="textarea ae_value event_presenter__comments tinymce_editor editor_basic" rows="5" cols="70" bind:value={$slct.event_presenter_obj.comments} placeholder="Any comments or questions about event_presenter."></textarea>

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

@@ -1,31 +1,27 @@
<script lang="ts">
import type { SvelteComponent } from 'svelte';
import { createEventDispatcher, onMount } from 'svelte';
import { onMount } from 'svelte';
import { fade } from 'svelte/transition';
// const dispatch = createEventDispatcher();
// This works and uses local storage:
// store_current_tab must be prefixed with $ to be reactive.
import { clipboard, localStorageStore, ProgressRadial } from '@skeletonlabs/skeleton';
import { clipboard, FileDropzone, getModalStore, localStorageStore, ProgressRadial, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
import type { Writable } from 'svelte/store';
const store_current_tab: Writable<string> = localStorageStore('store_current_tab', 'start');
const store_current_tab: Writable<string> = localStorageStore('ae_sponsorships_current_tab', 'start');
console.log(`store_current_tab:`, $store_current_tab);
// This works, but does not uses local storage:
// store_current_tab is not reactive and should not be prefixed with $.
// let store_current_tab: string = 'start';
// console.log(`store_current_tab:`, store_current_tab);
// This does not work:
// let tab_set = $store_current_tab;
// let tab_set = store_current_tab;
// Stores
import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
// import { getModalStore, FileDropzone, TabGroup, Tab, TabAnchor } from '@skeletonlabs/skeleton';
// Props
/** Exposes parent props to this component. */
@@ -50,6 +46,7 @@ onMount(() => {
console.log('Sponsorship link:', $ae_loc.mod.sponsorships.link);
}
// I tried adding this to load with the sponsorships +layout.ts. This did not seem to work. Probably an async related issue?
let ds_code: null|string = 'sponsorships__agree_li';
let ds_type: null|string = 'json';
@@ -78,21 +75,10 @@ onMount(() => {
});
});
// We've created a custom submit function to pass the response and close the modal.
// function onFormSubmit(): void {
// if ($modalStore[0].response) $modalStore[0].response(formData);
// modalStore.close();
// }
// Base Classes
// const cBase = 'card p-4 shadow-xl space-y-4 ae_modal_scrollfix';
// w-modal-wide
// const cBase = 'bg-surface-100-800-token w-screen h-screen';
// const cBase = 'card h-screen';
// const cBase = 'card p-4 w-modal-wide h-screen shadow-xl space-y-4';
const cForm = 'border border-surface-500 p-4 space-y-4 rounded-container-token';
let ae_promises: key_val = {}; // Promise<any>;
$ae_loc.mod.sponsorships.submit_status = null;
$ae_loc.mod.sponsorships.disable_submit__sponsorship_obj = false;
let placeholder_li: key_val = {
@@ -100,17 +86,10 @@ let placeholder_li: key_val = {
file_logo_secondary: '-- No File Selected --',
file_media_promo_video: '-- No File Selected --',
};
let ae_promises: key_val = {};
// let ae_promises.api_create__sponsorship_obj: Promise<any>;
if ($slct.sponsorship_id) {
console.log(`Sponsorship ID selected: ${$slct.sponsorship_id}`);
console.log(`Sponsorship object selected:`, $slct.sponsorship_obj);
// $slct_trigger = 'load__sponsorship_obj';
// $ae_loc.mod.sponsorships.link = `${$ae_loc.href_url}/load?ae_id=${$slct.sponsorship_id}`;
// console.log('Sponsorship link:', $ae_loc.mod.sponsorships.link);
} else {
$store_current_tab = 'start';
$slct.sponsorship_id = null;