More work on the alerts for sessions. I think they are pretty good now.
This commit is contained in:
Scott Idem
@@ -177,252 +177,12 @@ let trigger_reload_session_id: string = $state('');
|
||||
>
|
||||
<td>
|
||||
{#if session_obj?.alert && $ae_loc.trusted_access}
|
||||
|
||||
<Comp_event_session_alert
|
||||
lq__event_session_obj={session_obj}
|
||||
log_lvl={log_lvl}
|
||||
/>
|
||||
|
||||
|
||||
|
||||
|
||||
<div
|
||||
class:hidden={1==1}
|
||||
class:h-full={!$events_sess?.pres_mgmt?.show__view_alert[session_obj?.event_session_id_random]}
|
||||
class="
|
||||
absolute bottom-0 left-0
|
||||
flex flex-row items-center justify-center
|
||||
text-warning-600
|
||||
z-10
|
||||
transition-all
|
||||
"
|
||||
title="This session is marked as an alert."
|
||||
>
|
||||
<!-- Toggle show/hide alert status and message -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$events_sess.pres_mgmt.show__view_alert[session_obj?.event_session_id_random] = !$events_sess.pres_mgmt.show__view_alert[session_obj?.event_session_id_random];
|
||||
}}
|
||||
class:hidden={$events_sess.pres_mgmt.show__view_alert[session_obj?.event_session_id_random]}
|
||||
class="
|
||||
btn btn-lg
|
||||
text-sm
|
||||
px-3 sm:px-2
|
||||
preset-tonal-warning
|
||||
preset-outlined-warning-100-900
|
||||
opacity-80 hover:opacity-100
|
||||
transition-all
|
||||
group
|
||||
"
|
||||
title="Toggle alert message display"
|
||||
>
|
||||
<span class="fas fa-bell text-warning-600 mx-1" title="This session is marked as an alert."></span>
|
||||
<span class="hidden group-hover:inline">View Alert</span>
|
||||
</button>
|
||||
|
||||
<!-- Alert Message -->
|
||||
<div
|
||||
class:hidden={!$events_sess?.pres_mgmt?.show__view_alert[session_obj?.event_session_id_random]}
|
||||
class:inline-block={session_obj?.alert_msg && $events_sess?.pres_mgmt?.show__view_alert[session_obj?.event_session_id_random]}
|
||||
class="
|
||||
min-w-xs
|
||||
max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl
|
||||
p-1 px-2
|
||||
bg-warning-100 text-warning-900
|
||||
border border-warning-300
|
||||
rounded-lg
|
||||
shadow-lg
|
||||
transition-all
|
||||
"
|
||||
>
|
||||
<div class="flex flex-row flex-wrap gap-1 items-center justify-between mb-1">
|
||||
<!-- Toggle show/hide alert status and message -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$events_sess.pres_mgmt.tmp__alert_msg[session_obj?.event_session_id_random] = session_obj?.alert_msg;
|
||||
$events_sess.pres_mgmt.show__edit_alert_msg[session_obj?.event_session_id_random] = false;
|
||||
|
||||
$events_sess.pres_mgmt.show__view_alert[session_obj?.event_session_id_random] = false;
|
||||
}}
|
||||
class:hidden={!$events_sess.pres_mgmt.show__view_alert[session_obj?.event_session_id_random]}
|
||||
class="
|
||||
btn btn-sm
|
||||
text-xs
|
||||
px-1
|
||||
preset-tonal-warning hover:preset-tonal-error
|
||||
preset-outlined-warning-100-900 hover:preset-outlined-warning-600-400
|
||||
opacity-80 hover:opacity-100
|
||||
transition-all
|
||||
group
|
||||
|
||||
"
|
||||
title="Cancel editing and close alert message"
|
||||
>
|
||||
<span class="fas fa-times mx-1"></span>
|
||||
<!-- <span class="hidden group-hover:inline">Close</span> -->
|
||||
Close Alert
|
||||
</button>
|
||||
|
||||
<!-- Remove alert status (and message?) -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
let new_alert_value = !session_obj?.alert;
|
||||
console.log('New alert value:', new_alert_value);
|
||||
|
||||
ae_promises.api_update__ae_obj = core_func.update_ae_obj_id_crud_v2({
|
||||
api_cfg: $ae_api,
|
||||
object_type: 'event_session',
|
||||
object_id: session_obj?.event_session_id_random,
|
||||
object_reload: true,
|
||||
field_name: 'alert',
|
||||
new_field_value: new_alert_value,
|
||||
log_lvl: 1
|
||||
})
|
||||
.then(function (results) {
|
||||
})
|
||||
.finally(function () {
|
||||
});
|
||||
}}
|
||||
class="
|
||||
btn btn-sm
|
||||
text-xs
|
||||
px-1
|
||||
preset-tonal-secondary hover:preset-filled-secondary-500
|
||||
preset-outlined-secondary-100-900 hover:preset-outlined-secondary-600-400
|
||||
opacity-80 hover:opacity-100
|
||||
transition-all
|
||||
"
|
||||
title="Toggle alert status"
|
||||
>
|
||||
<span class="fas fa-exclamation-triangle text-warning-600 mr-1" title="This session is marked as an alert."></span>
|
||||
<span>Remove Alert</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="preset-tonal-primary p-1 rounded-lg border border-primary-300 min-h-16">
|
||||
{#if $events_sess.pres_mgmt.show__edit_alert_msg[session_obj?.event_session_id_random]}
|
||||
<textarea
|
||||
bind:value={$events_sess.pres_mgmt.tmp__alert_msg[session_obj?.event_session_id_random]}
|
||||
rows={3}
|
||||
class="w-full p-1"
|
||||
placeholder="Enter alert message here..."
|
||||
></textarea>
|
||||
{:else}
|
||||
{session_obj?.alert_msg ?? 'No message set.'}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row flex-wrap gap-1 items-center justify-between mt-1">
|
||||
{#if $events_sess.pres_mgmt.show__edit_alert_msg[session_obj?.event_session_id_random]}
|
||||
|
||||
<!-- Save alert message; only show if changed -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
ae_promises.api_update__ae_obj = core_func.update_ae_obj_id_crud_v2({
|
||||
api_cfg: $ae_api,
|
||||
object_type: 'event_session',
|
||||
object_id: session_obj?.event_session_id_random,
|
||||
object_reload: true,
|
||||
field_name: 'alert_msg',
|
||||
new_field_value: $events_sess.pres_mgmt.tmp__alert_msg[session_obj?.event_session_id_random],
|
||||
log_lvl: 1
|
||||
})
|
||||
.then(function (results) {
|
||||
})
|
||||
.finally(function () {
|
||||
$events_sess.pres_mgmt.show__edit_alert_msg[session_obj?.event_session_id_random] = false;
|
||||
});
|
||||
}}
|
||||
class:invisible={$events_sess.pres_mgmt.tmp__alert_msg[session_obj?.event_session_id_random] == session_obj?.alert_msg}
|
||||
class:visible={$events_sess.pres_mgmt.tmp__alert_msg[session_obj?.event_session_id_random] != session_obj?.alert_msg}
|
||||
class="
|
||||
btn btn-sm
|
||||
text-xs
|
||||
px-1
|
||||
preset-tonal-success hover:preset-filled-success-500
|
||||
preset-outlined-success-100-900 hover:preset-outlined-success-600-400
|
||||
opacity-80 hover:opacity-100
|
||||
transition-all
|
||||
"
|
||||
title="Save alert message"
|
||||
>
|
||||
<span class="fas fa-save mx-1"></span>
|
||||
<span>Save</span>
|
||||
</button>
|
||||
|
||||
<!-- Cancel edit/save alert message -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
$events_sess.pres_mgmt.tmp__alert_msg[session_obj?.event_session_id_random] = session_obj?.alert_msg;
|
||||
$events_sess.pres_mgmt.show__edit_alert_msg[session_obj?.event_session_id_random] = false;
|
||||
|
||||
$events_sess.pres_mgmt.show__view_alert[session_obj?.event_session_id_random] = false;
|
||||
|
||||
// Reload the session to get the original alert message back.
|
||||
// events_func.load_ae_obj_id__event_session({
|
||||
// api_cfg: $ae_api,
|
||||
// event_session_id: session_obj?.event_session_id_random,
|
||||
// log_lvl: log_lvl
|
||||
// })
|
||||
// .then(function (load_results) {
|
||||
// console.log(`Loaded session:`, load_results);
|
||||
// });
|
||||
}}
|
||||
class="
|
||||
btn btn-sm
|
||||
text-xs
|
||||
px-1
|
||||
preset-tonal-secondary hover:preset-filled-secondary-500
|
||||
preset-outlined-secondary-100-900 hover:preset-outlined-secondary-600-400
|
||||
opacity-80 hover:opacity-100
|
||||
transition-all
|
||||
|
||||
"
|
||||
title="Reset alert message and cancel editing alert"
|
||||
>
|
||||
<span class="fas fa-times mx-1"></span>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
|
||||
{:else}
|
||||
|
||||
<!-- Edit alert message -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Edit the alert message for the session.');
|
||||
$events_sess.pres_mgmt.show__edit_alert_msg[session_obj?.event_session_id_random] = true
|
||||
|
||||
$events_sess.pres_mgmt.tmp__alert_msg[session_obj?.event_session_id_random] = session_obj?.alert_msg;
|
||||
}}
|
||||
class="
|
||||
btn btn-sm
|
||||
text-xs
|
||||
px-1
|
||||
preset-tonal-secondary hover:preset-tonal-error
|
||||
preset-outlined-secondary-100-900 hover:preset-outlined-secondary-600-400
|
||||
opacity-80 hover:opacity-100
|
||||
transition-all
|
||||
"
|
||||
title="Edit alert message"
|
||||
>
|
||||
<span class="fas fa-edit mx-1"></span>
|
||||
<span>Edit Message</span>
|
||||
</button>
|
||||
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<Comp_event_session_alert
|
||||
lq__event_session_obj={session_obj}
|
||||
log_lvl={log_lvl}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<a
|
||||
href="/events/{session_obj?.event_id}/session/{session_obj?.event_session_id}"
|
||||
class="
|
||||
|
||||
Reference in New Issue
Block a user