From 0dbf869d5dea592da6b7ea04fb00b46cafb05bc2 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Sat, 2 Mar 2024 11:28:13 -0500
Subject: [PATCH] Work on file related

---
 src/app.html                                  |   2 +-
 src/routes/+layout.svelte                     |   8 +-
 .../10_edit_modal__sponsorship_obj.svelte     | 161 ++++++++++++------
 3 files changed, 112 insertions(+), 59 deletions(-)
diff --git a/src/app.html b/src/app.html
index 6a99c80b..14500c67 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="light">
+<html lang="en" class="">
     <head>
         <meta charset="utf-8" />
         <link rel="icon" href="%sveltekit.assets%/favicon.png" />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1043eafe..8c4d9adc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -336,9 +336,13 @@ $: if ($slct_trigger == 'set_access_code_li' && !$ae_loc.ds['hub__page__access_c
 {/if}
 
 
-{#if $ae_loc.hub.show_element__cfg}
+<span
+    class:hidden={!$ae_loc.hub.show_element__cfg}
+    >
+<!-- {#if $ae_loc.hub.show_element__cfg} -->
 <Element_app_cfg set_theme_mode={true} set_theme_name={true} />
-{/if}
+<!-- {/if} -->
+</span>
 
 
 <style lang="postcss">
diff --git a/src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte b/src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte
index ff8a87d9..de78b229 100644
--- a/src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte
+++ b/src/routes/sponsorships/10_edit_modal__sponsorship_obj.svelte
@@ -127,23 +127,83 @@ $: if ($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 = `<img src="https://dev-demo.oneskyit.com/hosted_file/download/${$slct.sponsorship_obj.logo_li_json.primary.hosted_file_id_random}" class="max-w-64">${$slct.sponsorship_obj.logo_li_json.primary.filename}`;
+            placeholder_li.file_logo_primary = create_img_element({
+                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 = `<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}`;
+            placeholder_li.file_logo_light = create_img_element({
+                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 = `<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}`;
+            placeholder_li.file_logo_dark = create_img_element({
+                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 = `<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}`;
+            placeholder_li.file_media_promo_video = create_video_element({
+                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}`;
         }
     }
 }
 
+function create_a_element({hosted_file_id, filename=null, extension=null, text="Download", class_li='text-blue-500'}) {
+    return `<a href="${$ae_api.base_url}/hosted_file/${hosted_file_id}/download?x_no_account_id_token=${$ae_loc.account_id}&filename=${filename}" class="${class_li}">${text}</a>`;
+}
+
+function create_img_element({hosted_file_id, filename=null, extension=null, class_li='max-w-64', inc_link=false}) {
+    let img_html = '';
+    if (filename) {
+        img_html = `<img src="${$ae_api.base_url}/hosted_file/${hosted_file_id}/download?x_no_account_id_token=${$ae_loc.account_id}&filename=${filename}" class="${class_li}" />`;
+    } else {
+        img_html = `<img src="${$ae_api.base_url}/hosted_file/${hosted_file_id}/download?x_no_account_id_token=${$ae_loc.account_id}" class="${class_li}" />`;
+    }
+
+    if (inc_link) {
+        let a_html = create_a_element({hosted_file_id: hosted_file_id, filename: filename, extension: extension});
+        img_html = `<div class="ae_img ae_a">${img_html}${a_html}</div>`;
+    }
+
+    return img_html;
+}
+
+function create_video_element({hosted_file_id, filename=null, extension=null, class_li='max-w-64', inc_link=false}) {
+    let video_html = '';
+    if (filename) {
+        video_html = `<video src="${$ae_api.base_url}/hosted_file/${hosted_file_id}/download?x_no_account_id_token=${$ae_loc.account_id}&filename=${filename}" controls class="${class_li}"></video>`;
+    } else {
+        video_html = `<video src="${$ae_api.base_url}/hosted_file/${hosted_file_id}/download?x_no_account_id_token=${$ae_loc.account_id}" controls class="${class_li}"></video>`;
+    }
+
+    if (inc_link) {
+        let a_html = create_a_element({hosted_file_id: hosted_file_id, filename: filename, extension: extension});
+        video_html = `<div class="ae_video ae_a">${video_html}${a_html}</div>`;
+    }
+
+    return video_html;
+}
+
 async function handle_submit_form(event) {
     console.log('*** handle_submit_form() ***');
 
@@ -458,8 +518,13 @@ async function handle_submit_form_files(event) {
 
         if (hosted_file_results) {
             sponsorship_do.logo_li_json.primary = hosted_file_results[0];
-            console.log(sponsorship_do.logo_li_json);
-            placeholder_li.file_logo_primary = `<img src="/hosted_file/download/${sponsorship_do.logo_li_json.primary.hosted_file_id_random}" class="max-w-64">${sponsorship_do.logo_li_json.primary.filename}`;
+            // console.log(sponsorship_do.logo_li_json);
+            placeholder_li.file_logo_primary = create_img_element({
+                hosted_file_id: sponsorship_do.logo_li_json.primary.hosted_file_id_random,
+                filename: `${$slct.sponsorship_obj.name} [logo_primary].${sponsorship_do.logo_li_json.primary.extension}`,
+            })
+
+            // `<img src="https://dev-api.oneskyit.com/hosted_file/${sponsorship_do.logo_li_json.primary.hosted_file_id_random}/download?x_no_account_id_token=${$ae_loc.account_id}" class="max-w-64">${sponsorship_do.logo_li_json.primary.filename}`;
         }
     }
 
@@ -470,8 +535,13 @@ async function handle_submit_form_files(event) {
 
         if (hosted_file_results) {
             sponsorship_do.logo_li_json.light = hosted_file_results[0];
-            console.log(sponsorship_do.logo_li_json);
-            placeholder_li.file_logo_light = `<img src="/hosted_file/download/${sponsorship_do.logo_li_json.light.hosted_file_id_random}" class="max-w-64">${sponsorship_do.logo_li_json.light.filename}`;
+            // console.log(sponsorship_do.logo_li_json);
+            placeholder_li.file_logo_light = create_img_element({
+                hosted_file_id: sponsorship_do.logo_li_json.light.hosted_file_id_random,
+                filename: `${$slct.sponsorship_obj.name} [logo_light].${sponsorship_do.logo_li_json.light.extension}`,
+            })
+
+            // `<img src="/hosted_file/download/${sponsorship_do.logo_li_json.light.hosted_file_id_random}" class="max-w-64">${sponsorship_do.logo_li_json.light.filename}`;
         }
     }
 
@@ -482,8 +552,13 @@ async function handle_submit_form_files(event) {
 
         if (hosted_file_results) {
             sponsorship_do.logo_li_json.dark = hosted_file_results[0];
-            console.log(sponsorship_do.logo_li_json);
-            placeholder_li.file_logo_dark = `<img src="/hosted_file/download/${sponsorship_do.logo_li_json.dark.hosted_file_id_random}" class="max-w-64">${sponsorship_do.logo_li_json.dark.filename}`;
+            // console.log(sponsorship_do.logo_li_json);
+            placeholder_li.file_logo_dark = create_img_element({
+                hosted_file_id: sponsorship_do.logo_li_json.dark.hosted_file_id_random,
+                filename: `${$slct.sponsorship_obj.name} [logo_dark].${sponsorship_do.logo_li_json.dark.extension}`,
+            })
+
+            // `<img src="/hosted_file/download/${sponsorship_do.logo_li_json.dark.hosted_file_id_random}" class="max-w-64">${sponsorship_do.logo_li_json.dark.filename}`;
         }
     }
 
@@ -494,8 +569,13 @@ async function handle_submit_form_files(event) {
 
         if (hosted_file_results) {
             sponsorship_do.media_li_json.promo_video = hosted_file_results[0];
-            console.log(sponsorship_do.media_li_json);
-            placeholder_li.file_media_promo_video = `<video src="/hosted_file/download/${sponsorship_do.media_li_json.promo_video.hosted_file_id_random}" controls class="max-w-64"></video>${sponsorship_do.media_li_json.promo_video.filename}`;
+            // console.log(sponsorship_do.media_li_json);
+            placeholder_li.file_media_promo_video = create_video_element({
+                hosted_file_id: sponsorship_do.media_li_json.promo_video.hosted_file_id_random,
+                filename: `${$slct.sponsorship_obj.name} [promo_video].${sponsorship_do.media_li_json.promo_video.extension}`,
+            })
+
+            // `<video src="/hosted_file/download/${sponsorship_do.media_li_json.promo_video.hosted_file_id_random}" controls class="max-w-64"></video>${sponsorship_do.media_li_json.promo_video.filename}`;
         }
     }
 
@@ -507,41 +587,8 @@ async function handle_submit_form_files(event) {
         obj_id: $slct.sponsorship_id,
         data: sponsorship_do
     });
+    $ae_sess.mod.sponsorships.disable_submit__sponsorship_obj = false;
     $ae_sess.mod.sponsorships.submit_status = 'updated';
-
-    // let sponsorship_do: key_val = {
-    //     logo_li_json: {
-    //         primary: hosted_file_results[0],
-    //     }
-
-    // };
-
-
-    // sponsorship_do['logo_li_json'] = hosted_file_result;
-
-    // sponsorship_do['notes'] = 'Update after file upload!';
-
-    // update_sponsorship_obj_promise = await api.update_ae_obj_id_crud({
-    //     api_cfg: $ae_api,
-    //     obj_type: 'sponsorship',
-    //     obj_id: $slct.sponsorship_id,
-    //     fields: sponsorship_do,
-    //     key: $ae_api.api_crud_super_key,
-    //     log_lvl: 1
-    //     })
-    // .then(function (sponsorship_obj_update_result) {
-    //     if (!sponsorship_obj_update_result) {
-    //         console.log('The result was null or false.');
-    //         return false;
-    //     }
-    //     return sponsorship_obj_update_result;
-    // })
-    // .catch(function (error) {
-    //     console.log('Something went wrong.');
-    //     console.log(error);
-    //     return false;
-    // });
-
 }
 
 
@@ -1197,10 +1244,6 @@ async function handle_update__sponsorship({
     <fieldset class="sponsorship__social_media space-y-4">
         <legend class="legend">Social Media:</legend>
 
-        <label for="social_media_twitter" class="label">
-            <!-- Twitter -->
-            <input type="url" id="social_media_twitter" name="social_media_twitter" class="input text-xs w-96" placeholder="Twitter" value={$slct.sponsorship_obj.social_li_json && $slct.sponsorship_obj.social_li_json.twitter ? $slct.sponsorship_obj.social_li_json.twitter : ''} autocomplete="url" />
-        </label>
         <label for="social_media_facebook" class="label">
             <!-- Facebook -->
             <input type="url" id="social_media_facebook" name="social_media_facebook" class="input text-xs w-96" placeholder="Facebook" value={$slct.sponsorship_obj.social_li_json && $slct.sponsorship_obj.social_li_json.facebook ? $slct.sponsorship_obj.social_li_json.facebook : ''} autocomplete="url" />
@@ -1213,6 +1256,10 @@ async function handle_update__sponsorship({
             <!-- LinkedIn -->
             <input type="url" id="social_media_linkedin" name="social_media_linkedin" class="input text-xs w-96" placeholder="LinkedIn" value={$slct.sponsorship_obj.social_li_json && $slct.sponsorship_obj.social_li_json.linkedin ? $slct.sponsorship_obj.social_li_json.linkedin : ''} autocomplete="url" />
         </label>
+        <label for="social_media_twitter" class="label">
+            <!-- X (Twitter) -->
+            <input type="url" id="social_media_twitter" name="social_media_twitter" class="input text-xs w-96" placeholder="X (Twitter)" value={$slct.sponsorship_obj.social_li_json && $slct.sponsorship_obj.social_li_json.twitter ? $slct.sponsorship_obj.social_li_json.twitter : ''} autocomplete="url" />
+        </label>
     </fieldset>
 
 
@@ -1449,7 +1496,7 @@ async function handle_update__sponsorship({
         <div>
             <div class="text-sm space-y-4">
             <p>As a Plenary Session Sponsor, you will have the opportunity to provide opening remarks during a CHOW plenary session. Opening remarks are typically between 3-5 minutes. Please contact TBD to confirm your plenary session and discuss logistics.</p>
-            <p class="text-sm">If you select "Yes", our CHOW Manager,TBD will review your selection and be in touch with more details.</p>
+            <p class="text-sm">If you select "Yes", our CHOW Manager, TBD will review your selection and be in touch with more details.</p>
             </div>
             <label for="q_plenary_opening" class="label">
                 Are you interested in hosting the CHOW 2024 Opening Plenary Session?<br />
@@ -1498,7 +1545,7 @@ async function handle_update__sponsorship({
 
             <div>Recommend specs:
             <ul class="list-disc list-inside">
-                <li>High resolution Image</li>
+                <li>High resolution image</li>
                 <li>Most image types: PNG, WEBP, SVG, JPG, Illistrator, etc</li>
                 <li>Max file size: 20 MB</li>
             </ul>
@@ -1506,6 +1553,7 @@ async function handle_update__sponsorship({
         </div>
 
         <div class="flex flex-wrap gap-4">
+
         <span class="flex flex-col justify-between basis-2/5">
         <h3 class="h4">Default color logo</h3>
         <label for="file_logo_primary">
@@ -1530,8 +1578,8 @@ async function handle_update__sponsorship({
                 <svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
                 <svelte:fragment slot="meta">Image file types only (PNG, WEBP, JPG, etc)</svelte:fragment>
             </FileDropzone>
-            {@html placeholder_li.file_logo_primary}
         </label>
+        {@html placeholder_li.file_logo_primary}
         </span>
 
         <span class="flex flex-col justify-between basis-2/5">
@@ -1558,8 +1606,8 @@ async function handle_update__sponsorship({
                 <svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
                 <svelte:fragment slot="meta">Image file types only (PNG, WEBP, JPG, etc)</svelte:fragment>
             </FileDropzone>
-            {@html placeholder_li.file_logo_light}
         </label>
+        {@html placeholder_li.file_logo_light}
         </span>
 
         <span class="flex flex-col justify-between basis-2/5">
@@ -1586,9 +1634,10 @@ async function handle_update__sponsorship({
                 <svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
                 <svelte:fragment slot="meta">Image file types only (PNG, WEBP, JPG, etc)</svelte:fragment>
             </FileDropzone>
-            {@html placeholder_li.file_logo_dark}
         </label>
+        {@html placeholder_li.file_logo_dark}
         </span>
+
         </div>
     </section>
 
@@ -1634,8 +1683,8 @@ async function handle_update__sponsorship({
                 <svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
                 <svelte:fragment slot="meta">Video file types only (MP4, MKV, MOV, etc)</svelte:fragment>
             </FileDropzone>
-            {@html placeholder_li.file_media_promo_video}
         </label>
+        {@html placeholder_li.file_media_promo_video}
         </span>
         {/if}
 
