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

Last minute work for CHOW. Hopefully done soon...

Browse Source
This commit is contained in:
Scott Idem
2024-03-13 10:32:22 -04:00
parent fd4f2bdf35
commit 3c30664b2b
4 changed files with 293 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -372,6 +372,7 @@ async function handle_submit_form(event) {
temp_questions['accommodations_text'] = sponsorship_di.accommodations_text;
}
// Marketing for social media and email related questions
if (typeof sponsorship_di.website_url !== 'undefined') {
// This is also stored under social_li_json.

199
src/routes/sponsorships/10_view_modal__sponsorship_obj.svelte
View File

@@ -11,6 +11,7 @@ import type { Writable } from 'svelte/store';
import { ae_util } from '$lib/ae_utils';
import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import type { key_val } from '$lib/ae_stores';
// Stores
@@ -23,6 +24,12 @@ export let container_class_li = '';
const modalStore = getModalStore();
let placeholder_li: key_val = {
file_logo_primary: '-- No File Uploaded --',
file_logo_light: '-- No File Uploaded --',
file_logo_dark: '-- No File Uploaded --',
file_media_promo_video: '-- No File Uploaded --',
};
if ($slct.sponsorship_id) {
console.log(`Sponsorship ID selected: ${$slct.sponsorship_id}`);
@@ -35,6 +42,63 @@ onMount(() => {
console.log('** Component Mounted: ** View Modal - Sponsorship Obj');
});
$: if ($slct.sponsorship_obj) {
console.log(`Sponsorship object selected:`, $slct.sponsorship_obj);
// Logo related
if ($slct.sponsorship_obj.logo_li_json) {
if ($slct.sponsorship_obj.logo_li_json.primary && $slct.sponsorship_obj.logo_li_json.primary.hosted_file_id_random) {
placeholder_li.file_logo_primary = ae_util.create_img_element({
account_id: $ae_loc.account_id,
base_url: $ae_api.base_url,
hosted_file_id: $slct.sponsorship_obj.logo_li_json.primary.hosted_file_id_random,
filename: `${$slct.sponsorship_obj.name} [logo_primary].${$slct.sponsorship_obj.logo_li_json.primary.extension}`,
inc_link: true,
})
// `<img src="${$ae_api.base_url}/hosted_file/${$slct.sponsorship_obj.logo_li_json.primary.hosted_file_id_random}/download?x_no_account_id_token=${$ae_loc.account_id}" class="max-w-64">${$slct.sponsorship_obj.logo_li_json.primary.filename}`;
}
if ($slct.sponsorship_obj.logo_li_json.light && $slct.sponsorship_obj.logo_li_json.light.hosted_file_id_random) {
placeholder_li.file_logo_light = ae_util.create_img_element({
account_id: $ae_loc.account_id,
base_url: $ae_api.base_url,
hosted_file_id: $slct.sponsorship_obj.logo_li_json.light.hosted_file_id_random,
filename: `${$slct.sponsorship_obj.name} [logo_light].${$slct.sponsorship_obj.logo_li_json.light.extension}`,
inc_link: true,
})
// `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.sponsorship_obj.logo_li_json.light.hosted_file_id_random}" class="max-w-64">${$slct.sponsorship_obj.logo_li_json.light.filename}`;
}
if ($slct.sponsorship_obj.logo_li_json.dark && $slct.sponsorship_obj.logo_li_json.dark.hosted_file_id_random) {
placeholder_li.file_logo_dark = ae_util.create_img_element({
account_id: $ae_loc.account_id,
base_url: $ae_api.base_url,
hosted_file_id: $slct.sponsorship_obj.logo_li_json.dark.hosted_file_id_random,
filename: `${$slct.sponsorship_obj.name} [logo_dark].${$slct.sponsorship_obj.logo_li_json.dark.extension}`,
inc_link: true,
})
// `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.sponsorship_obj.logo_li_json.dark.hosted_file_id_random}" class="max-w-64">${$slct.sponsorship_obj.logo_li_json.dark.filename}`;
}
}
// Other media files related
if ($slct.sponsorship_obj.media_li_json) {
if ($slct.sponsorship_obj.media_li_json.promo_video && $slct.sponsorship_obj.media_li_json.promo_video.hosted_file_id_random) {
placeholder_li.file_media_promo_video = ae_util.create_video_element({
account_id: $ae_loc.account_id,
base_url: $ae_api.base_url,
hosted_file_id: $slct.sponsorship_obj.media_li_json.promo_video.hosted_file_id_random,
filename: `${$slct.sponsorship_obj.name} [promo_video].${$slct.sponsorship_obj.media_li_json.promo_video.extension}`,
inc_link: true,
})
// `<video src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.sponsorship_obj.media_li_json.promo_video.hosted_file_id_random}" controls class="max-w-64"></video>${$slct.sponsorship_obj.media_li_json.promo_video.filename}`;
}
}
}
</script>
<!-- @component This is the Sponsorships modal view form. -->
@@ -53,31 +117,38 @@ onMount(() => {
<p>This quick view of a sponsorship's information is customizable or can be hidden completely.</p>
<div class="sponsorship__content">
<div class="sponsorship__content space-y-4">
<div class="sponsorship__poc">
<span class="ae_label">Point of Contact:</span>
<h2 class="h4">Point of Contact</h2>
<!-- <span class="ae_label">Point of Contact:</span> -->
<span class="ae_value">{@html $slct.sponsorship_obj.poc_json.full_name}</span>
<span class="ae_label">| Email:</span>
<span class="ae_value"><span class="fas fa-envelope"></span> {$slct.sponsorship_obj.poc_json.email}</span>
<span class="ae_label">| Mobile:</span>
<span class="ae_value"><span class="fas fa-mobile-alt"></span> {$slct.sponsorship_obj.poc_json.phone_mobile ?? '-- Not Given --'}</span>
<div
<span class="ae_label">| Email:</span>
<span class="ae_value"><span class="fas fa-envelope"></span>
<a href="mailto:{$slct.sponsorship_obj.poc_json.email}?Subject={$slct.sponsorship_obj.full_name}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.poc_json.email}</a></span>
<span class="ae_label">| Mobile:</span>
<span class="ae_value"><span class="fas fa-mobile-alt"></span>
<a href="tel:{$slct.sponsorship_obj.poc_json.phone_mobile}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.poc_json.phone_mobile ?? '-- Not Given --'}</span>
</div>
<!-- <div
class="sponsorship_description description"
>
<div class="ae_label sponsorship__description">Description:</div>
<pre class="ae_value sponsorship__description pre_wrap">{@html $slct.sponsorship_obj.description ? $slct.sponsorship_obj.description : '-- No Description Given --'}</pre>
</div>
</div> -->
<div
class:ae_d_none={!$slct.sponsorship_obj.level_num}
class="sponsorship_level"
>
<span class="ae_label">Level of Sponsorship:</span>
<span class="ae_value"><span class="fas fa-gem"></span> {$slct.sponsorship_obj.level_num} &mdash; {$slct.sponsorship_obj.level_str}</span>
<h2 class="h4">Level of Sponsorship</h2>
<!-- <span class="ae_label">Level of Sponsorship:</span> -->
<span class=""><span class="fas fa-gem"></span> {$slct.sponsorship_obj.level_str} ({$slct.sponsorship_obj.level_num})</span>
</div>
<div
<!-- <div
class:hidden={!$slct.sponsorship_obj.amount}
class="sponsorship_amount"
>
@@ -85,18 +156,111 @@ onMount(() => {
<span class="ae_value">
${$slct.sponsorship_obj.amount/100}
</span>
</div>
</div> -->
<div>
<!-- <div>
<span class="ae_label">Paid:</span>
$
<span class="ae_value">
{$slct.sponsorship_obj.paid ? 'Yes, marked as paid' : 'Not yet marked as paid'}
</span>
</div> -->
<div
class="mailing_address">
<h2 class="h4">Mailing Address</h2>
<div>
{#if $slct.sponsorship_obj.address_li_json.mailing}
{#if $slct.sponsorship_obj.address_li_json.mailing.line_1}{$slct.sponsorship_obj.address_li_json.mailing.line_1}<br>{/if}
{#if $slct.sponsorship_obj.address_li_json.mailing.line_2}{$slct.sponsorship_obj.address_li_json.mailing.line_2}<br>{/if}
{#if $slct.sponsorship_obj.address_li_json.mailing.city}{$slct.sponsorship_obj.address_li_json.mailing.city}{/if}
{#if $slct.sponsorship_obj.address_li_json.mailing.state_province}, {$slct.sponsorship_obj.address_li_json.mailing.state_province}{/if}
{#if $slct.sponsorship_obj.address_li_json.mailing.postal_code} {$slct.sponsorship_obj.address_li_json.mailing.postal_code}{/if}
{#if $slct.sponsorship_obj.address_li_json.mailing.country} {$slct.sponsorship_obj.address_li_json.mailing.country}{/if}
<!-- {#if $slct.sponsorship_obj.address_li_json.mailing.other_text}, {$slct.sponsorship_obj.address_li_json.mailing.other_text}{/if} -->
{/if}
</div>
</div>
<div
class="accommodations">
<h2 class="h4">Accommodations</h2>
{#if $slct.sponsorship_obj.questions_li_json && $slct.sponsorship_obj.questions_li_json.accommodations_text}
<div class="">
{$slct.sponsorship_obj.questions_li_json.accommodations_text}
</div>
{/if}
</div>
<div
class="marketing">
<h2 class="h4">Marketing</h2>
{#if $slct.sponsorship_obj.website_url}
<div class="">
<span class="fas fa-globe"></span> Organization website: <a href="{$slct.sponsorship_obj.website_url}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.website_url}</a>
</div>
{/if}
{#if $slct.sponsorship_obj.social_li_json}
{#if $slct.sponsorship_obj.social_li_json.facebook}
<div class="">
<span class="fab fa-facebook"></span> Facebook: <a href="{$slct.sponsorship_obj.social_li_json.facebook}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.social_li_json.facebook}</a>
</div>
{/if}
{#if $slct.sponsorship_obj.social_li_json.instagram}
<div class="">
<span class="fab fa-instagram"></span> Instagram:<a href="{$slct.sponsorship_obj.social_li_json.instagram}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.social_li_json.instagram}</a>
</div>
{/if}
{#if $slct.sponsorship_obj.social_li_json.linkedin}
<div class="">
<span class="fab fa-linkedin"></span> LinkedIn: <a href="{$slct.sponsorship_obj.social_li_json.linkedin}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.social_li_json.linkedin}</a>
</div>
{/if}
{#if $slct.sponsorship_obj.social_li_json.twitter}
<div class="">
<span class="fab fa-twitter"></span> Twitter: <a href="{$slct.sponsorship_obj.social_li_json.twitter}" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">{$slct.sponsorship_obj.social_li_json.twitter}</a>
</div>
{/if}
{/if}
</div>
<div
class="file_uploads">
<h2 class="h4">File Uploads</h2>
{#if placeholder_li.file_logo_primary}
<div class="">
<span class="fas fa-image"></span> Logo (Primary): {@html placeholder_li.file_logo_primary}
</div>
{/if}
{#if placeholder_li.file_logo_light}
<div class="">
<span class="fas fa-image"></span> Logo (Light): {@html placeholder_li.file_logo_light}
</div>
{/if}
{#if placeholder_li.file_logo_dark}
<div class="">
<span class="fas fa-image"></span> Logo (Dark): {@html placeholder_li.file_logo_dark}
</div>
{/if}
{#if placeholder_li.file_media_promo_video}
<div class="">
<span class="fas fa-video"></span> Promo Video: {@html placeholder_li.file_media_promo_video}
</div>
{/if}
</div>
<div class="ae_list sponsorship__guests">
<h2>Guest List</h2>
<h2 class="h4">Guest List</h2>
{#if $slct.sponsorship_obj.guest_li_json && $slct.sponsorship_obj.guest_li_json.length && $slct.sponsorship_obj.guest_li_json[0].full_name}
<ul>
@@ -105,7 +269,8 @@ onMount(() => {
class:ae_d_none={!$slct.sponsorship_obj.guest_li_json[index].full_name}
>
<span class="ae_label">
<span class="fas fa-user"></span> Contact:
<span class="fas fa-user"></span>
<!-- Contact: -->
</span>
{$slct.sponsorship_obj.guest_li_json[index].full_name}
{#if $slct.sponsorship_obj.guest_li_json[index].email}
@@ -128,7 +293,7 @@ onMount(() => {
{/each}
</ul>
{:else}
<div class="ae_warning">No guest list found!</div>
<div class="ae_warning">No guest have been added</div>
{/if}
</div>
@@ -161,7 +326,7 @@ onMount(() => {
<footer class="{parent.regionFooter}">
{#if $ae_loc.trusted_access}
{#if $ae_loc.administrator_access}
<div class="ae_options mx-1">
<button
class="btn variant-glass-warning mx-1"