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

Making the buttons look the same...

Browse Source
This commit is contained in:
Scott Idem
2024-09-13 17:12:19 -04:00
parent be58d87faf
commit c711b29bea
2 changed files with 130 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
src/routes/events_pres_mgmt/ae_comp__event_presenter_form_agree.svelte
View File

@@ -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
trigger_patch={ae_triggers.agree}
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>
{#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}
</div>
<div>
Waiting for agreement to the Guest Speaker Consent and Release and Terms and Conditions before you can move on.
</div>
{: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 $ae_loc.trusted_access || $events_loc.auth__kv.presentation[$lq__event_presenter_obj?.event_presentation_id_random]}
{#if !$lq__event_presenter_obj?.agree}
<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;
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}
console.log('Agree to the terms and conditions.');
$events_sess.pres_mgmt.status__presenter_agree = 'saving';
let event_presenter_data = {
agree: true,
// 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-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}
</div>
</Element_ae_crud>
{:else}
<button
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>

18
src/routes/events_pres_mgmt/ae_comp__event_session_poc_form_agree.svelte
View File

@@ -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);
// return update_result;
if (log_lvl) {
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}