Added the opt out options to the session POC agree page.

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'];

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
@@ -335,6 +339,7 @@ async function handle_update__event_presenter({
         {/if}
         </div>
     </Element_ae_crud>
+    </div>
 
 </section>
 

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,7 +122,121 @@ let tmp_opt_out: key_val = {
         />
 </div>
 
+
+<section class="text-lg border border-red-200 rounded-md bg-red-100 space-y-2">
+
+    <!-- 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>
+
+
+    <div>
+    <h3 class="h4">Opt-Out?</h3>
+    <form
+        class="modal-form {$ae_loc.hub.classes__form}"
+        on:submit|preventDefault={handle_submit_form}
+        >
+        <p>Speaker does not permit the use of presentation materials as described in section(s), above for: (please check for all that apply)</p>
+
+        <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>
+
+        <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>
+
+        <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>
+
+        <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 &&
@@ -129,6 +304,8 @@ let tmp_opt_out: key_val = {
     {/if}
     </div>
 
+</section>
+
 {:else}
     Not ready
 {/if}

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">

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>