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

Too many changes. Getting ready to show Jordan.

Browse Source
This commit is contained in:
Scott Idem
2024-03-03 12:31:32 -05:00
parent 1b12cd4aec
commit 64589ec11c
12 changed files with 296 additions and 278 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,11 @@
<script lang="ts">
import { onMount } from 'svelte';
export let data;
console.log(`Svelte Events - Speakers page data:`, data);
console.log(`ae_ 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');
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, ProgressRadial } from '@skeletonlabs/skeleton';
import type {
@@ -19,6 +18,7 @@ const modalStore = getModalStore();
import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import { ae_util } from '$lib/ae_utils';
import type { key_val } from '$lib/ae_stores';
import Edit_modal_event_presenter_obj from './10_edit_modal__event_presenter_obj.svelte';
@@ -32,7 +32,7 @@ const modalComponentEditEventPresenterObj: ModalComponent = { ref: Edit_modal_ev
const modal_edit__event_presenter_obj: ModalSettings = {
type: 'component',
component: modalComponentEditEventPresenterObj,
title: 'Edit Event Presenter',
title: 'Speaker Submission Form', // Editing Event Presenter
position: '', // default is "items-center"
response: (r: boolean | undefined) => handle_modal_close(r)
@@ -44,7 +44,7 @@ const modalComponentViewEventPresenterObj: ModalComponent = { ref: View_modal_ev
const modal_view__event_presenter_obj: ModalSettings = {
type: 'component',
component: modalComponentViewEventPresenterObj,
title: 'View Event Presenter',
title: 'Speaker Submission', // Viewing Event Presenter
position: '', // default is "items-center"
// Provide arbitrary classes to the backdrop and modal elements:
@@ -61,33 +61,62 @@ const modal_view__event_presenter_obj: ModalSettings = {
response: (r: boolean | undefined) => handle_modal_close(r)
};
// This function waits for the response from one of the modals. Do stuff when the modal is closed.
function handle_modal_close(response: boolean | undefined) {
console.log('Modal closed. Response:', response);
let location = window.location.href;
const url = new URL(location);
url.searchParams.delete('event_presenter_id');
history.pushState({}, '', url);
ae_util.handle_url_and_message('event_presenter_id', null);
let message = {'event_presenter_id': null};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
// We do NOT want to keep these values if it is closed and not just switching from view to edit. A "smart" transition?
if (!$ae_loc.mod.events.show_edit__event_presenter_obj || !$ae_loc.mod.events.show_view__event_presenter_obj) {
console.log('Clearing event_presenter_id and event_presenter_obj');
$slct.event_presenter_id = null;
if ($slct.event_presenter_obj) {
console.log('Clearing event_presenter_obj');
$slct.event_presenter_obj = null;
}
} else {
console.log('Not clearing event_presenter_id and event_presenter_obj');
console.log(`show_edit__event_presenter_obj: ${$ae_loc.mod.events.show_edit__event_presenter_obj}`);
console.log(`show_view__event_presenter_obj: ${$ae_loc.mod.events.show_view__event_presenter_obj}`);
}
}
if ($slct_trigger == 'msg_parent' && $slct.event_id) {
console.log(`Message parent with event_id ${$slct.event_id}`);
$slct_trigger = null;
let message = {'event_id': $slct.event_id};
window.parent.postMessage(message, "*");
// console.log('Message sent to parent (iframe):', message);
}
$slct_trigger = 'load__event_presenter_obj_li';
$ae_loc.hostname = data.url.hostname;
$ae_loc.site_domain = data.url.origin;
// 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.events.show_edit__event_presenter_obj = false;
$ae_loc.mod.sponsorships.show_view__event_presenter_obj = false;
$ae_loc.mod.events.show_view__event_presenter_obj = false;
let ae_event_id_get_promise: Promise<any>;
let ae_event_presenter_obj_li_get_promise: Promise<any>;
let ae_event_presenter_obj_get_promise: Promise<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);
// $slct_trigger = 'msg_parent';
ae_util.handle_url_and_message('event_id', $slct.event_id);
ae_util.handle_url_and_message('event_presenter_id', $slct.event_presenter_id);
if ($slct.event_presenter_id) {
console.log(`Got an ID. Let's show the modal!`);
modalStore.trigger(modal_edit__event_presenter_obj);
// $slct_trigger = 'load__event_presenter_obj';
}
});
$: if ($slct_trigger == 'show_edit__event_presenter_obj' && $ae_loc.mod.events.show_edit__event_presenter_obj) {
console.log('Show Modal Edit');
@@ -125,39 +154,28 @@ $: if ($slct_trigger == 'show_view__event_presenter_obj' && $ae_loc.mod.events.s
// console.log('Message sent to parent (iframe):', message);
}
if ($slct.event_id && !$slct.event_presenter_obj_li) {
console.log(`No presenter list was found for Event ID: ${$slct.event_id}`);
$slct_trigger = 'load__event_presenter_obj_li';
}
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);
$slct_trigger = 'msg_parent';
});
$: if ($slct_trigger == 'load__event_presenter_obj_li' && $slct.event_id) {
console.log(`load__event_presenter_obj_li event_id: ${$slct.event_id}`);
$slct_trigger = null;
// $slct.event_id = $ae_loc.event_id;
// handle_load_ae_obj_id__event({event_id: $slct.event_id, try_cache: false});
// This might need to be reviewed and compared to sponsorships version again
if ($ae_loc.mod.events.event_id) {
$slct.event_id = $ae_loc.mod.events.event_id;
// handle_load_ae_obj_id__event({event_id: $slct.event_id, try_cache: false});
handle_load_ae_obj_li__event_presenter({event_id: $slct.event_id, try_cache: false});
}
// if ($slct.event_id && !$slct.event_presenter_obj_li) {
// console.log(`No presenter list was found for Event ID: ${$slct.event_id}`);
let ae_event_presenter_obj_li_get_promise: Promise<any>;
// $slct_trigger = 'load__event_presenter_obj_li';
// }
// $: if ($slct_trigger == 'load__event_presenter_obj_li' && $slct.event_id) {
// console.log(`load__event_presenter_obj_li event_id: ${$slct.event_id}`);
// $slct_trigger = null;
// // $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__event_presenter({event_id: $slct.event_id, try_cache: false});
// }
async function handle_load_ae_obj_li__event_presenter({event_id, try_cache=true}) {
console.log('*** handle_load_ae_obj_li__event_presenter() ***');
@@ -191,7 +209,7 @@ async function handle_load_ae_obj_li__event_presenter({event_id, try_cache=true}
offset: offset,
params_json: params_json,
params: params,
log_lvl: 2
log_lvl: 1
})
.then(function (event_presenter_obj_li_get_result) {
@@ -213,6 +231,13 @@ async function handle_load_ae_obj_li__event_presenter({event_id, try_cache=true}
}
// handle_load_ae_obj_li__event() was done in layout.ts
// This is different from how the sponsorships are loaded.
// Do we need anything from the event object to load the presenters?
// Load the Event Presenter Obj with ID based on the URL param.
$: if ($slct_trigger == 'load__event_presenter_obj' && $slct.event_presenter_id) {
console.log('Selected Event Presenter ID:', $slct.event_presenter_id);
@@ -222,7 +247,6 @@ $: if ($slct_trigger == 'load__event_presenter_obj' && $slct.event_presenter_id)
handle_load_ae_obj_id__event_presenter({event_presenter_id: $slct.event_presenter_id, try_cache: false});
}
let ae_event_presenter_obj_get_promise: Promise<any>;
async function handle_load_ae_obj_id__event_presenter({event_presenter_id, try_cache=false}) {
console.log(`*** handle_load_ae_obj_id__event_presenter() *** event_presenter_id=${event_presenter_id}`);
@@ -237,7 +261,7 @@ async function handle_load_ae_obj_id__event_presenter({event_presenter_id, try_c
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.
params: params,
log_lvl: 0
log_lvl: 1
})
.then(function (event_presenter_obj_get_result) {
if (event_presenter_obj_get_result) {
@@ -252,14 +276,16 @@ async function handle_load_ae_obj_id__event_presenter({event_presenter_id, try_c
return ae_event_presenter_obj_get_promise;
}
</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>
<h1 class="h1 text-center">
<!-- &AElig; - Events: Speakers -->
Speakers Hub
</h1>
<section>
<button
class="btn variant-ghost-primary"
@@ -274,25 +300,21 @@ async function handle_load_ae_obj_id__event_presenter({event_presenter_id, try_c
}}
>
<span class="fas fa-edit mx-1"></span>
Start Speaker
Start Speaker Submission Form
</button>
</section>
<section class="events_speakers_list">
{#await ae_event_presenter_obj_li_get_promise}
<span class="fas fa-spinner fa-spin"></span>
<span class="loading-text">
Loading...
</span>
{/await}
{#if $slct.event_presenter_obj_li && $ae_loc.mod.events.show_list__event_presenter_obj_li}
<List_event_presenter_obj />
<!-- {#if $slct.event_presenter_obj_li && $slct.event_presenter_obj_li.length}
{#each $slct.event_presenter_obj_li as ae_event_presenter_obj, index}
<div class="event_presenter_obj">
{ae_event_presenter_obj.given_name}
</div>
{/each}
{/if} -->
{/if}
</section>
</div>
</div>

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

@@ -63,6 +63,7 @@ if ($slct.event_presenter_id) {
console.log(`Presenter object selected:`, $slct.event_presenter_obj);
} else {
$store_current_tab = 'start';
$slct.event_presenter_id = null;
$slct.event_presenter_obj = {
event_id_random: $ae_loc.mod.events.event_id,
@@ -96,7 +97,15 @@ $: if ($slct.event_presenter_obj) {
// Create HTML for showing pictures here?
if ($slct.event_presenter_obj.image_li_json) {
if ($slct.event_presenter_obj.image_li_json.headshot.hosted_file_id_random) {
placeholder_li.image_headshot = `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.image_li_json.headshot.hosted_file_id_random}" class="max-w-64">${$slct.event_presenter_obj.image_li_json.headshot.filename}`;
placeholder_li.image_headshot = ae_util.create_img_element({
account_id: $ae_loc.account_id,
base_url: $ae_api.base_url,
hosted_file_id: $slct.event_presenter_obj.image_li_json.headshot.hosted_file_id_random,
filename: `${$slct.event_presenter_obj.full_name} [headshot]`,
inc_link: true,
})
// `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.event_presenter_obj.image_li_json.headshot.hosted_file_id_random}" class="max-w-64">${$slct.event_presenter_obj.image_li_json.headshot.filename}`;
}
}
// if ($slct.event_presenter_obj.logo_li_json.secondary.hosted_file_id_random) {
@@ -438,11 +447,16 @@ async function handle_update__event_presenter({
<span class="loading-text">Error: {error.message}</span>
</div>
{/await}
<button class="btn variant-glass-primary float-end" on:click={parent.onClose}>
<span class="fas fa-times mx-1"></span>
Close
</button>
</header>
{#if $slct.event_presenter_id && $ae_loc.mod.events.presenter_link}
<div class="flex justify-end">
<div class="flex justify-center">
<button
class="btn variant-soft-secondary"
use:clipboard={$ae_loc.mod.events.presenter_link}
@@ -450,6 +464,29 @@ async function handle_update__event_presenter({
<span class="fas fa-copy mx-1"></span>
Copy link for {$slct.event_presenter_id}
</button>
<button
class="btn variant-soft-secondary mx-1"
on:click={() => {
if (!confirm(`Are you sure you want to send this email to ${$slct.event_presenter_obj.email}?`)) {return false;}
let subject = `CHOW 2024 Speaker Link for ${$slct.event_presenter_obj.full_name} (ID: ${$slct.event_presenter_id})`;
let body_html = `<p>Name: ${$slct.event_presenter_obj.full_name} (speaker ID: ${$slct.event_presenter_id})</p><p>Use this link to view or update your CHOW 2024 speaker information.<p>Copy and paste link: <a href="${$ae_loc.mod.events.presenter_link}">${$ae_loc.mod.events.presenter_link}</a></p>`
api.send_email({
api_cfg: $ae_api,
from_email: 'scott.idem+from@oneskyit.com',
from_name: 'Scott Idem',
to_email: $slct.event_presenter_obj.email,
subject: subject,
body_html: body_html,
});
}}
>
<span class="fas fa-paper-plane mx-1"></span>
Send Email
</button>
</div>
{/if}
@@ -518,17 +555,9 @@ async function handle_update__event_presenter({
</label>
<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}
<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"
class="input variant-glass-warning"
id="given_name" name="given_name"
placeholder="Given name"
value={($slct.event_presenter_obj.given_name ? $slct.event_presenter_obj.given_name : '')}
@@ -536,20 +565,11 @@ async function handle_update__event_presenter({
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"
class="input variant-glass-warning"
id="family_name" name="family_name"
placeholder="Family name"
value={($slct.event_presenter_obj.family_name ? $slct.event_presenter_obj.family_name : '')}
@@ -557,29 +577,20 @@ async function handle_update__event_presenter({
readonly={!$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
required
>
</div>
</label>
<label for="professional_title" class="label">Professional title
<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" />
<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" />
</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" />
<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" />
</label>
<label for="email">Email
<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="email"
class="input"
class="input variant-glass-warning"
id="email"
name="email"
placeholder="Email"
@@ -588,7 +599,6 @@ async function handle_update__event_presenter({
readonly={!$ae_loc.trusted_access && $slct.event_presenter_obj.event_presenter_id_random}
required
>
</div>
</label>
<!-- <label for="phone_mobile">Mobile phone
@@ -612,7 +622,7 @@ async function handle_update__event_presenter({
<label for="agree" class="label">
<input
type="checkbox"
class="checkbox"
class="checkbox variant-glass-warning"
id="agree"
name="agree"
value="1"
@@ -659,7 +669,7 @@ 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="10" cols="70" bind:value={$slct.event_presenter_obj.biography} placeholder="A short biography the speaker"></textarea>
<textarea name="biography" id="biography" class="textarea ae_value event_presenter__biography tinymce_editor editor_basic" required 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>
@@ -705,6 +715,7 @@ async function handle_update__event_presenter({
name="image_headshot"
padding="p-1"
accept="image/*"
required
on:change={(e) => {
console.log('*** FileDropzone change event ***', e);

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

@@ -29,7 +29,7 @@ onMount(() => {
<!-- @component This is the Presenters modal view form. -->
<section class="svelte_component ae_view_modal ae_obj__event_presenter {container_class_li}">
<section class="svelte_component ae_view_modal ae_obj__event_presenter {container_class_li} p-4 space-y-4">
<header class={parent.regionHeader}>
{@html $slct.event_presenter_obj.full_name}
@@ -134,8 +134,8 @@ onMount(() => {
<button
on:click={() => {
$ae_loc.mod.events.show_view__event_presenter_obj = false;
$ae_loc.mod.events.show_edit__event_presenter_obj = true;
$ae_loc.mod.events.show_view__event_presenter_obj = false;
parent.onClose();
$slct_trigger = 'show_edit__event_presenter_obj';
}}
@@ -147,12 +147,16 @@ onMount(() => {
</span>
{/if}
<button
<!-- <button
class="btn variant-filled-primary mx-1"
on:click={() => {parent.onClose();}}
>
<span class="fas fa-times mx-1"></span>
Close
</button> -->
<button class="btn variant-glass-primary" on:click={parent.onClose}>
<span class="fas fa-times mx-1"></span>
Close
</button>
</footer>