Making the buttons look the same...

src/routes/events_pres_mgmt/ae_comp__event_presenter_form_agree.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 console.log(`ae_events_pres_mgmt session [slug] form_agree.svelte`);
+export let log_lvl = 1;
 
 // Imports (external and then internal)
 import { onMount } from 'svelte';
@@ -230,7 +231,7 @@ async function handle_update__event_presenter({
         }}
         class="btn btn-md variant-ghost-warning hover:variant-filled-secondary m-2"
         >
-        <span class="fas fa-check mx-1"></span>
+        <span class="fas fa-check m-1 text-orange-500"></span>
         Save Opt-Out?
 
         {#await ae_promises.update__event_presenter_obj}
@@ -263,79 +264,136 @@ async function handle_update__event_presenter({
     <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
+    {#if !$lq__event_presenter_obj?.agree}
-        trigger_patch={ae_triggers.agree}
+    <div>
-        api_cfg={$ae_api}
-        object_type={'event_presenter'}
-        object_id={$lq__event_presenter_obj?.event_presenter_id_random}
-        field_name={'agree'}
-        field_type={'button'}
-        field_value={tmp_agree}
-        allow_null={false}
-        hide_edit_btn={true}
-        outline_element={false}
-        show_crud={false}
-        display_inline={true}
-        class_li={'m-1'}
-        on:ae_crud_updated={e => {
-            console.log(`ae_crud_updated event:`, e.detail);
-
-            // Wait 1 second to make sure it saved...?
-
-            events_func.load_ae_obj_id__event_presenter({
-                api_cfg: $ae_api,
-                event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random,
-                log_lvl: 1
-            })
-            .then(function (load_results) {
-                // Wait and then close
-                // $events_loc.pres_mgmt.show_content__agree_text = null;
-
-                // Maybe reload page... to get the outline view to refresh?
-                window.location.reload();
-            });
-        }}
-        >
-        {#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>
-        <div>
+    <div>
-            Waiting for agreement to the Guest Speaker Consent and Release and Terms and Conditions before you can move on.
+        Waiting for agreement to the Guest Speaker Consent and Release and Terms and Conditions before you can move on.
-        </div>
+    </div>
-        {:else}
+    {:else}
+    <div>
         Agreed:
         <span class="fas fa-check text-green-500 m-1"></span>
         Marked as agreed
-        {/if}
+    </div>
+    {/if}
 
-        <div class="text-center">
+    {#if !$lq__event_presenter_obj?.agree}
-        {#if $ae_loc.trusted_access || $events_loc.auth__kv.presentation[$lq__event_presenter_obj?.event_presentation_id_random]}
         <button
-            type="button"
+            disabled={!$ae_loc.administrator_access
+            && !$events_loc.auth__kv.presentation[$lq__event_presenter_obj?.event_presentation_id_random]}
             on:click={() => {
-                tmp_agree = !$lq__event_presenter_obj?.agree;
+                console.log('Agree to the terms and conditions.');
-                ae_triggers.agree = true;
+
-            }}
+                $events_sess.pres_mgmt.status__presenter_agree = 'saving';
-            class="btn btn-lg variant-ghost-success hover:variant-filled-primary m-2"
+
-            class:variant-ghost-warning={$lq__event_presenter_obj?.agree}
+                let event_presenter_data = {
-            >
+                    agree: true,
-            {#if $lq__event_presenter_obj?.agree}
+                    // agree_updated_on: new Date().toISOString()
-                <!-- <span class="fas fa-sync m-1"></span> -->
+                };
-                <span class="fas fa-times text-red-500 mx-1"></span>
+
-                Change to not agreed?
+                ae_promises.update__event_presenter_obj__agree = events_func.update_ae_obj__event_presenter({
-            {:else}
+                    api_cfg: $ae_api,
-                <span class="fa fa-check m-1 text-green-500"></span>
+                    event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random,
-                Mark as agreed?
+                    data_kv: event_presenter_data,
-            {/if}
+                    log_lvl: log_lvl
+                })
+                .then(function (update_result) {
+                    if (log_lvl) {
+                        console.log('update_result:', update_result);
+                    }
+                    $events_sess.pres_mgmt.status__presenter_agree = 'saved';
+                });
+            }}
+            class="btn btn-lg variant-ghost-primary hover:variant-filled-success m-2"
+            >
+
+            <span class="fa fa-check m-1 text-orange-500"></span>
+            Mark as agreed?
+
+            {#await ae_promises.update__event_presenter_obj__agree}
+                <div class="modal-loading">
+                    <span class="fas fa-spinner fa-spin"></span>
+                    <span class="loading-text">
+                        Saving...
+                    </span>
+                </div>
+            {:then update__event_presenter_obj__agree_result}
+                {#if $events_sess.pres_mgmt.status__presenter_agree}
+                <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}
 
-            <!-- {@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}
+    {:else}
-        </div>
+        <button
-    </Element_ae_crud>
+            disabled={!$ae_loc.administrator_access
+            && !$events_loc.auth__kv.presentation[$lq__event_presenter_obj?.event_presentation_id_random]}
+            on:click={() => {
+                console.log('Revoke agreement to the terms and conditions.');
+
+                $events_sess.pres_mgmt.status__presenter_agree = 'saving';
+
+                let event_presenter_data = {
+                    agree: false,
+                    // agree_updated_on: new Date().toISOString()
+                };
+
+                ae_promises.update__event_presenter_obj__agree = events_func.update_ae_obj__event_presenter({
+                    api_cfg: $ae_api,
+                    event_presenter_id: $lq__event_presenter_obj?.event_presenter_id_random,
+                    data_kv: event_presenter_data,
+                    log_lvl: log_lvl
+                })
+                .then(function (update_result) {
+                    if (log_lvl) {
+                        console.log('update_result:', update_result);
+                    }
+                    $events_sess.pres_mgmt.status__presenter_agree = 'saved';
+                });
+            }}
+            class="btn btn-lg variant-ghost-warning hover:variant-filled-error m-2"
+            >
+
+            <span class="fas fa-times m-1 text-orange-500"></span>
+            Change to not agreed?
+
+            {#await ae_promises.update__event_presenter_obj__agree}
+                <div class="modal-loading">
+                    <span class="fas fa-spinner fa-spin"></span>
+                    <span class="loading-text">
+                        Saving...
+                    </span>
+                </div>
+            {:then update__event_presenter_obj__agree_result}
+                {#if $events_sess.pres_mgmt.status__presenter_agree}
+                <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>
+    {/if}
+
+
     </div>
 
 </section>

src/routes/events_pres_mgmt/ae_comp__event_session_poc_form_agree.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 console.log(`ae_events_pres_mgmt session [slug] form_agree.svelte`);
-export let log_lvl = 1;
+export let log_lvl = 0;
 
 // Imports (external and then internal)
 import type { key_val } from '$lib/ae_stores';
@@ -232,7 +232,7 @@ async function handle_submit_form(event) {
             class="btn btn-md variant-ghost-warning hover:variant-filled-secondary m-2"
             >
 
-            <span class="fas fa-check mx-1"></span>
+            <span class="fas fa-check m-1 text-orange-500"></span>
             Save Opt-Out?
 
             {#await ae_promises.update__event_session_obj__opt_out}
@@ -288,16 +288,16 @@ async function handle_submit_form(event) {
                     log_lvl: log_lvl,
                 })
                 .then(function (update_result) {
-                    // console.log(update_result);
+                    if (log_lvl) {
-                    // return update_result;
+                        console.log('update_result:', update_result);
+                    }
+                    $events_sess.pres_mgmt.status__session_agree = 'saved';
                 });
-
-                $events_sess.pres_mgmt.status__session_agree = 'saved';
             }}
-            class="btn btn-lg variant-ghost-warning hover:variant-filled-success m-2"
+            class="btn btn-lg variant-ghost-primary hover:variant-filled-success m-2"
             >
 
-            <span class="fa fa-check m-1 text-green-500"></span>
+            <span class="fa fa-check m-1 text-orange-500"></span>
             Mark as agreed?
 
             {#await ae_promises.update__event_session_obj__agree}
@@ -350,7 +350,7 @@ async function handle_submit_form(event) {
             }}
             class="btn btn-lg variant-ghost-success hover:variant-filled-warning m-2"
             >
-            <span class="fas fa-times text-red-500 m-1"></span>
+            <span class="fas fa-times m-1 text-orange-500"></span>
             Change to not agreed?
 
             {#await ae_promises.update__event_session_obj__agree}