From 3d34e30c63ef6d0ebc3f453f564c3b9118583e08 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 13 Sep 2024 15:40:02 -0400
Subject: [PATCH] Added the opt out options to the session POC agree page.

---
 .../ae_comp__event_files_upload.svelte        |   2 +-
 ...ae_comp__event_presenter_form_agree.svelte |  81 ++---
 ..._comp__event_session_poc_form_agree.svelte | 293 ++++++++++++++----
 .../presenter/[slug]/+page.svelte             |   1 -
 .../events_pres_mgmt/session_view.svelte      |  43 ---
 5 files changed, 279 insertions(+), 141 deletions(-)

diff --git a/src/routes/events_pres_mgmt/ae_comp__event_files_upload.svelte b/src/routes/events_pres_mgmt/ae_comp__event_files_upload.svelte
index 618ace21..facfda4c 100644
--- a/src/routes/events_pres_mgmt/ae_comp__event_files_upload.svelte
+++ b/src/routes/events_pres_mgmt/ae_comp__event_files_upload.svelte
@@ -25,7 +25,7 @@ export let multiple: boolean = true;
 export let required: boolean = true;
 export let accept: string = 'audio/*, image/*, video/*, .bak, .cfg, .css, .csv, .doc, .docx, .gz, .htm, .html, .ini, .iso, .j2, .json, .key, .keynote, .md, .pdf, .ppt, .pptx, .rar, .rtf, .sql, .svelte, ttf, .txt, .xls, .xlsx, .xz, .zip, .bin, .dmg, .exe, .js, .msi, .php, .py, .sh';
 
-let class_li_default: string = 'flex flex-col gap-1 items-center justify-center w-full';
+export let class_li_default: string = 'flex flex-col gap-1 items-center justify-center w-full max-w-2xl mx-auto my-1';
 export let class_li: string = '';
 export let input_class_li: string[] = ['file_drop_area'];
 export let table_class_li: string[] = ['table', 'table-sm', 'table-striped', 'table-hover' , 'text-sm'];
diff --git a/src/routes/events_pres_mgmt/ae_comp__event_presenter_form_agree.svelte b/src/routes/events_pres_mgmt/ae_comp__event_presenter_form_agree.svelte
index a055e731..8a7d931c 100644
--- a/src/routes/events_pres_mgmt/ae_comp__event_presenter_form_agree.svelte
+++ b/src/routes/events_pres_mgmt/ae_comp__event_presenter_form_agree.svelte
@@ -19,7 +19,7 @@ import { events_func } from '$lib/ae_events_functions';
 // export let event_presenter_id: string;
 export let lq__event_presenter_obj: any;
 // export let event_presentation_id: string;
-export let lq__event_presentation_obj: any;
+// export let lq__event_presentation_obj: any;
 // export let lq__event_session_obj: any;
 
 let ae_triggers: key_val = {};
@@ -158,8 +158,9 @@ async function handle_update__event_presenter({
     <p class="text-lg bg-yellow-100 p-2">
     <strong>{$lq__event_presenter_obj.full_name} ({$lq__event_presenter_obj.email})</strong> agrees to the following terms and conditions for the presentation:
     </p>
-    <h3 class="h4">Title: "{$lq__event_presentation_obj?.name}"</h3>
+    <h3 class="h4">Title: "{$lq__event_presenter_obj?.event_presentation_name}"</h3>
 
+    <div>
     <h3 class="h4">Opt-Out?</h3>
     <form
         class="modal-form {$ae_loc.hub.classes__form}"
@@ -223,6 +224,7 @@ async function handle_update__event_presenter({
         Opt-out - Publication of Presentation on LCI Congress App
     </label>
 
+    <div class="text-center w-full">
     <button
         type="submit"
         disabled={($events_sess.pres_mgmt?.disable_submit__opt_out)}
@@ -257,9 +259,11 @@ async function handle_update__event_presenter({
         {/await}
 
     </button>
+    </div>
 
     </form>
 
+    <div class="text-center w-full">
     <h3 class="h4">Agree?</h3>
     <!-- Agree (agreement) means this presenter has agreed to the terms and conditions. -->
     <Element_ae_crud
@@ -295,46 +299,47 @@ async function handle_update__event_presenter({
             });
         }}
         >
-    {#if !$lq__event_presenter_obj?.agree}
-    <div>
-    Not Agreed:
-    <span class="fas fa-times text-red-500 m-1"></span>
-    <!-- <span class="fas fa-question text-red-500 m-1"></span> -->
-    </div>
-    <div>
-        Waiting for agreement to the Guest Speaker Consent and Release and Terms and Conditions before you can move on.
-    </div>
-    {:else}
-    Agreed:
-    <span class="fas fa-check text-green-500 m-1"></span>
-    Marked as agreed
-    {/if}
-
-    <div class="text-center">
-    {#if $ae_loc.trusted_access || $events_loc.auth__kv.presentation[$lq__event_presenter_obj?.event_presentation_id_random]}
-    <button
-        type="button"
-        on:click={() => {
-            tmp_agree = !$lq__event_presenter_obj?.agree;
-            ae_triggers.agree = true;
-        }}
-        class="btn btn-lg variant-ghost-success hover:variant-filled-primary m-2"
-        class:variant-ghost-warning={$lq__event_presenter_obj?.agree}
-        >
-        {#if $lq__event_presenter_obj?.agree}
-            <!-- <span class="fas fa-sync m-1"></span> -->
-            <span class="fas fa-times text-red-500 mx-1"></span>
-            Change to not agreed?
+        {#if !$lq__event_presenter_obj?.agree}
+        <div>
+        Not Agreed:
+        <span class="fas fa-times text-red-500 m-1"></span>
+        <!-- <span class="fas fa-question text-red-500 m-1"></span> -->
+        </div>
+        <div>
+            Waiting for agreement to the Guest Speaker Consent and Release and Terms and Conditions before you can move on.
+        </div>
         {:else}
-            <span class="fa fa-check m-1 text-green-500"></span>
-            Mark as agreed?
+        Agreed:
+        <span class="fas fa-check text-green-500 m-1"></span>
+        Marked as agreed
         {/if}
 
-        <!-- {@html ($lq__event_presenter_obj?.agree ? '<span class="fas fa-sync m-1"></span> Not agreed?' : '<span class="fa fa-sync m-1"></span> Mark as agreed?')} -->
-    </button>
-    {/if}
-    </div>
+        <div class="text-center">
+        {#if $ae_loc.trusted_access || $events_loc.auth__kv.presentation[$lq__event_presenter_obj?.event_presentation_id_random]}
+        <button
+            type="button"
+            on:click={() => {
+                tmp_agree = !$lq__event_presenter_obj?.agree;
+                ae_triggers.agree = true;
+            }}
+            class="btn btn-lg variant-ghost-success hover:variant-filled-primary m-2"
+            class:variant-ghost-warning={$lq__event_presenter_obj?.agree}
+            >
+            {#if $lq__event_presenter_obj?.agree}
+                <!-- <span class="fas fa-sync m-1"></span> -->
+                <span class="fas fa-times text-red-500 mx-1"></span>
+                Change to not agreed?
+            {:else}
+                <span class="fa fa-check m-1 text-green-500"></span>
+                Mark as agreed?
+            {/if}
+
+            <!-- {@html ($lq__event_presenter_obj?.agree ? '<span class="fas fa-sync m-1"></span> Not agreed?' : '<span class="fa fa-sync m-1"></span> Mark as agreed?')} -->
+        </button>
+        {/if}
+        </div>
     </Element_ae_crud>
+    </div>
 
 </section>
 
diff --git a/src/routes/events_pres_mgmt/ae_comp__event_session_poc_form_agree.svelte b/src/routes/events_pres_mgmt/ae_comp__event_session_poc_form_agree.svelte
index adc2940e..c7c44c7b 100644
--- a/src/routes/events_pres_mgmt/ae_comp__event_session_poc_form_agree.svelte
+++ b/src/routes/events_pres_mgmt/ae_comp__event_session_poc_form_agree.svelte
@@ -31,6 +31,67 @@ let tmp_opt_out: key_val = {
 };
 
 // Functions and Logic
+async function handle_submit_form(event) {
+    console.log('*** handle_submit_form() ***');
+
+    $events_sess.pres_mgmt.disable_submit__opt_out = true;
+    $events_sess.pres_mgmt.submit_status = 'saving';
+
+    // Data in
+    let form_data = new FormData(event.target);
+    console.log(form_data);
+
+    let opt_out_di: key_val = ae_util.extract_prefixed_form_data({prefix: null, form_data: form_data, trim_values: true, bool_tf_str: true, log_lvl: 0});
+    console.log(`opt_out_di:`, opt_out_di);
+
+    // Data out
+    let opt_out_do: key_val = {};
+    opt_out_do.optout_audio = opt_out_di.optout_audio??false;
+    opt_out_do.optout_video = opt_out_di.optout_video??false;
+    opt_out_do.optout_transcription_and_publication = opt_out_di.optout_transcription_and_publication??false;
+    opt_out_do.optout_publication_in_app = opt_out_di.optout_publication_in_app??false;
+
+    console.log(`opt_out_do:`, opt_out_do);
+
+    let data_out = {
+        data_json: opt_out_do,
+    }
+
+    // ae_promises.update__event_presenter_obj = await handle_update__event_presenter({
+    //     obj_type: 'event_presenter',
+    //     obj_id: $lq__event_session_obj?.event_presenter_id_random,
+    //     data: data_out
+    // });
+    // console.log(ae_promises.update__event_presenter_obj);
+
+
+
+    // let event_session_data = {
+    //     poc_agree: false,
+    // }
+
+    // Use this in the future if we need to store the agreements in a more complex way?
+    // let event_session_data = {poc_kv_json: $lq__event_session_obj?.poc_kv_json};
+    // console.log('event_session_data:', event_session_data);
+    // event_session_data.poc_kv_json[poc_type]['agree'] = false;
+
+    ae_promises.update__event_session_obj = events_func.update_ae_obj__event_session({
+        api_cfg: $ae_api,
+        event_session_id: $lq__event_session_obj?.event_session_id_random,
+        data_kv: data_out,
+        log_lvl: log_lvl,
+    })
+    .then(function (update_result) {
+        // console.log(update_result);
+        // return update_result;
+    });
+
+
+
+    $events_sess.pres_mgmt.disable_submit__opt_out = false;
+    $events_sess.pres_mgmt.submit_status = 'saved';
+}
+
 </script>
 
 
@@ -61,73 +122,189 @@ let tmp_opt_out: key_val = {
         />
 </div>
 
-<div class="text-center w-full">
-{#if !$lq__event_session_obj?.poc_agree}
-    <button
-        disabled={!$ae_loc.administrator_access &&
-        !$events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id_random] === true}
-        on:click={() => {
-            console.log('Agree to the terms and conditions.');
 
-            let event_session_data = {
-                poc_agree: true,
-            }
+<section class="text-lg border border-red-200 rounded-md bg-red-100 space-y-2">
 
-            // Use this in the future if we need to store the agreements in a more complex way?
-            // let event_session_data = {poc_kv_json: $lq__event_session_obj?.poc_kv_json};
-            // console.log('event_session_data:', event_session_data);
-            // event_session_data.poc_kv_json[poc_type]['agree'] = true;
+    <!-- Highlight the persons name, email, and that whole line. -->
+    <p class="text-lg bg-yellow-100 p-2">
+    <strong>{$lq__event_session_obj.poc_person_full_name} ({$lq__event_session_obj.poc_person_primary_email})</strong> agrees to the following terms and conditions for the presentation:
+    </p>
+    <h3 class="h4">Title: "{$lq__event_session_obj?.name}"</h3>
 
-            ae_promises.update__event_session_obj = events_func.update_ae_obj__event_session({
-                api_cfg: $ae_api,
-                event_session_id: $lq__event_session_obj?.event_session_id_random,
-                data_kv: event_session_data,
-                log_lvl: log_lvl,
-            })
-            .then(function (update_result) {
-                // console.log(update_result);
-                // return update_result;
-            });
 
-        }}
-        class="btn btn-lg variant-ghost-warning hover:variant-filled-success m-2"
+    <div>
+    <h3 class="h4">Opt-Out?</h3>
+    <form
+        class="modal-form {$ae_loc.hub.classes__form}"
+        on:submit|preventDefault={handle_submit_form}
         >
-        <span class="fa fa-check m-1 text-green-500"></span>
-        Mark as agreed?
-    </button>
-{:else}
-    <button
-        on:click={() => {
-            console.log('Change to not agreed.');
+        <p>Speaker does not permit the use of presentation materials as described in section(s), above for: (please check for all that apply)</p>
 
-            let event_session_data = {
-                poc_agree: false,
-            }
+        <label
+            class="label p-1 hover:variant-ghost-warning rounded-md"
+            for="optout_audio">
+            <input
+                type="checkbox"
+                class="checkbox variant-ghost-warning checked:variant-filled-warning hover:variant-filled-error"
+                id="optout_audio"
+                name="optout_audio"
+                checked={$lq__event_session_obj.data_json?.optout_audio}
+                value={true}
+                >
+            Opt-out - Audio Reproduction of Presentation
+        </label>
 
-            // Use this in the future if we need to store the agreements in a more complex way?
-            // let event_session_data = {poc_kv_json: $lq__event_session_obj?.poc_kv_json};
-            // console.log('event_session_data:', event_session_data);
-            // event_session_data.poc_kv_json[poc_type]['agree'] = false;
+        <label
+            class="label p-1 hover:variant-ghost-warning rounded-md"
+            for="optout_video">
+            <input
+                type="checkbox"
+                class="checkbox variant-ghost-warning checked:variant-filled-warning hover:variant-filled-error"
+                id="optout_video"
+                name="optout_video"
+                checked={$lq__event_session_obj.data_json?.optout_video}
+                value={true}
+                >
+            Opt-out - Video Reproduction of Presentation
+        </label>
 
-            ae_promises.update__event_session_obj = events_func.update_ae_obj__event_session({
-                api_cfg: $ae_api,
-                event_session_id: $lq__event_session_obj?.event_session_id_random,
-                data_kv: event_session_data,
-                log_lvl: log_lvl,
-            })
-            .then(function (update_result) {
-                // console.log(update_result);
-                // return update_result;
-            });
+        <label
+            class="label p-1 hover:variant-ghost-warning rounded-md"
+            for="optout_transcription_and_publication">
+            <input
+                type="checkbox"
+                class="checkbox variant-ghost-warning checked:variant-filled-warning hover:variant-filled-error"
+                id="optout_transcription_and_publication"
+                name="optout_transcription_and_publication"
+                checked={$lq__event_session_obj.data_json?.optout_transcription_and_publication}
+                value={true}
+                >
+            Opt-out - Transcription and Publication of Presentation on LCI Website
+        </label>
 
-        }}
-        class="btn btn-lg variant-ghost-success hover:variant-filled-warning m-2"
-        >
-        <span class="fas fa-times text-red-500 m-1"></span>
-        Change to not agreed?
-    </button>
-{/if}
-</div>
+        <label
+            class="label p-1 hover:variant-ghost-warning rounded-md"
+            for="optout_publication_in_app">
+            <input
+                type="checkbox"
+                class="checkbox variant-ghost-warning checked:variant-filled-warning hover:variant-filled-error"
+                id="optout_publication_in_app"
+                name="optout_publication_in_app"
+                checked={$lq__event_session_obj.data_json?.optout_publication_in_app}
+                value={true}
+                >
+            Opt-out - Publication of Presentation on LCI Congress App
+        </label>
+
+        <div class="text-center w-full">
+        <button
+            type="submit"
+            disabled={($events_sess.pres_mgmt?.disable_submit__opt_out)}
+            on:click={() => {
+                console.log('*** Save button clicked ***');
+            }}
+            class="btn btn-md variant-ghost-warning hover:variant-filled-secondary m-2"
+            >
+            <span class="fas fa-check mx-1"></span>
+            Save Opt-Out?
+
+            {#await ae_promises.update__event_presenter_obj}
+                <div class="modal-loading">
+                    <span class="fas fa-spinner fa-spin"></span>
+                    <span class="loading-text">
+                        <!-- <ProgressRadial value={undefined} /> -->
+                        Saving...
+                    </span>
+                </div>
+            {:then update__event_presenter_obj_result}
+                {#if update__event_presenter_obj_result}
+                <div class="modal-loading">
+                    <span class="fas fa-check-circle"></span>
+                    <span class="loading-text">Successfully saved!</span>
+                </div>
+                {/if}
+            {:catch error}
+                <div class="modal-loading">
+                    <span class="fas fa-exclamation-triangle"></span>
+                    <span class="loading-text">Error: {error.message}</span>
+                </div>
+            {/await}
+
+        </button>
+        </div>
+
+    </form>
+
+    <div class="text-center w-full">
+    <h3 class="h4">Agree?</h3>
+    {#if !$lq__event_session_obj?.poc_agree}
+        <button
+            disabled={!$ae_loc.administrator_access &&
+            !$events_loc.auth__kv.session[$lq__event_session_obj?.event_session_id_random] === true}
+            on:click={() => {
+                console.log('Agree to the terms and conditions.');
+
+                let event_session_data = {
+                    poc_agree: true,
+                }
+
+                // Use this in the future if we need to store the agreements in a more complex way?
+                // let event_session_data = {poc_kv_json: $lq__event_session_obj?.poc_kv_json};
+                // console.log('event_session_data:', event_session_data);
+                // event_session_data.poc_kv_json[poc_type]['agree'] = true;
+
+                ae_promises.update__event_session_obj = events_func.update_ae_obj__event_session({
+                    api_cfg: $ae_api,
+                    event_session_id: $lq__event_session_obj?.event_session_id_random,
+                    data_kv: event_session_data,
+                    log_lvl: log_lvl,
+                })
+                .then(function (update_result) {
+                    // console.log(update_result);
+                    // return update_result;
+                });
+
+            }}
+            class="btn btn-lg variant-ghost-warning hover:variant-filled-success m-2"
+            >
+            <span class="fa fa-check m-1 text-green-500"></span>
+            Mark as agreed?
+        </button>
+    {:else}
+        <button
+            on:click={() => {
+                console.log('Change to not agreed.');
+
+                let event_session_data = {
+                    poc_agree: false,
+                }
+
+                // Use this in the future if we need to store the agreements in a more complex way?
+                // let event_session_data = {poc_kv_json: $lq__event_session_obj?.poc_kv_json};
+                // console.log('event_session_data:', event_session_data);
+                // event_session_data.poc_kv_json[poc_type]['agree'] = false;
+
+                ae_promises.update__event_session_obj = events_func.update_ae_obj__event_session({
+                    api_cfg: $ae_api,
+                    event_session_id: $lq__event_session_obj?.event_session_id_random,
+                    data_kv: event_session_data,
+                    log_lvl: log_lvl,
+                })
+                .then(function (update_result) {
+                    // console.log(update_result);
+                    // return update_result;
+                });
+
+            }}
+            class="btn btn-lg variant-ghost-success hover:variant-filled-warning m-2"
+            >
+            <span class="fas fa-times text-red-500 m-1"></span>
+            Change to not agreed?
+        </button>
+    {/if}
+    </div>
+
+</section>
 
 {:else}
     Not ready
diff --git a/src/routes/events_pres_mgmt/presenter/[slug]/+page.svelte b/src/routes/events_pres_mgmt/presenter/[slug]/+page.svelte
index 55ba4029..48c5100d 100644
--- a/src/routes/events_pres_mgmt/presenter/[slug]/+page.svelte
+++ b/src/routes/events_pres_mgmt/presenter/[slug]/+page.svelte
@@ -234,7 +234,6 @@ if (!$ae_loc.authenticated_access && $events_loc.pres_mgmt.show_content__present
 
     <Comp_event_presenter_form_agree
         lq__event_presenter_obj={lq__event_presenter_obj}
-        lq__event_presentation_obj={$lq__event_presentation_obj}
         />
 
     <svelte:fragment slot="footer">
diff --git a/src/routes/events_pres_mgmt/session_view.svelte b/src/routes/events_pres_mgmt/session_view.svelte
index d208bc31..4179409b 100644
--- a/src/routes/events_pres_mgmt/session_view.svelte
+++ b/src/routes/events_pres_mgmt/session_view.svelte
@@ -941,8 +941,6 @@ $: if ($lq__event_session_obj) {
 {/if}
 
 
-
-
 <!-- Main modal -->
 <Modal
     title="Presenter's Profile"
@@ -953,7 +951,6 @@ $: if ($lq__event_session_obj) {
 
     <Comp_event_presenter_form_agree
         lq__event_presenter_obj={lq__event_presenter_obj}
-        lq__event_presentation_obj={$lq__event_presentation_obj}
         />
 
     <svelte:fragment slot="footer">
@@ -974,45 +971,5 @@ $: if ($lq__event_session_obj) {
 </Modal>
 
 
-
-
-
-
 <style lang="postcss">
-/* Use the div.ae_quick_modal_container to block background clicks when using the section.ae_quick_popover. */
-div.ae_quick_modal_container {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 100;
-    background-color: hsla(0, 0%, 50%, .75);
-    /* padding: 1rem; */
-    /* border: solid thick red; */
-}
-
-/* The section.ae_quick_popover should be above the rest of the content and centered on the page. */
-section.ae_quick_popover {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 100;
-    background-color: hsla(0, 0%, 97%, .97);
-    /* margin-top: 1rem;
-    margin-bottom: 2rem; */
-    /* padding: 1rem;
-    padding-top:4rem; */
-    /* padding-bottom: 4rem; */
-    border: solid thin hsla(0, 0%, 0%, .9);
-    border-radius: .5rem;
-    box-shadow: 0 0 1rem hsla(0, 0%, 0%, .5);
-
-    min-height: 30%;
-    /* max-height: 100vh; */
-    min-width: 80%;
-
-    /* overflow-y: auto; */
-}
 </style>