More work on the alerts for sessions. I think they are pretty good now.
This commit is contained in:
Scott Idem
@@ -32,6 +32,7 @@ import Comp_event_presenter_form_agree from '../../presenter/[presenter_id]/ae_c
|
||||
import Element_manage_event_file_li_wrap from '$lib/element_manage_event_file_li_direct.svelte';
|
||||
import Session_view from './session_view.svelte';
|
||||
import Session_page_menu from './session_page_menu.svelte';
|
||||
import Comp_event_session_alert from '../ae_comp__event_session_alert.svelte';
|
||||
// import Sign_in_out from './../../sign_in_out.svelte';
|
||||
|
||||
import { browser } from '$app/environment';
|
||||
@@ -189,7 +190,15 @@ if (!$ae_loc.authenticated_access && $events_loc.pres_mgmt.show_content__session
|
||||
|
||||
{:else if $lq__event_session_obj?.enable || $ae_loc.trusted_access}
|
||||
|
||||
<header class="ae_module_header">
|
||||
<header class="ae_module_header relative">
|
||||
{#if $lq__event_session_obj?.alert && $ae_loc.trusted_access}
|
||||
<Comp_event_session_alert
|
||||
lq__event_session_obj={$lq__event_session_obj}
|
||||
position='top'
|
||||
log_lvl={log_lvl}
|
||||
/>
|
||||
{/if}
|
||||
|
||||
<span
|
||||
class="flex flex-row flex-wrap gap-1 items-center justify-center"
|
||||
>
|
||||
|
||||
@@ -18,6 +18,7 @@ import { goto } from '$app/navigation';
|
||||
|
||||
import type { key_val } from '$lib/ae_stores';
|
||||
import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
|
||||
import { core_func } from '$lib/ae_core/ae_core_functions';
|
||||
import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
|
||||
import { events_func } from '$lib/ae_events_functions';
|
||||
|
||||
@@ -28,6 +29,8 @@ import Comp__events_menu_nav from '../../../ae_comp__events_menu_nav.svelte';
|
||||
// import Comp__global_menu_opts from '$lib/ae_comp__global_menu_opts.svelte';
|
||||
import Comp__pres_mgmt_menu_opts from '../../../ae_comp__events_menu_opts.svelte';
|
||||
|
||||
// Variables
|
||||
let ae_promises: key_val = {};
|
||||
let ae_tmp: key_val = $state({});
|
||||
let ae_triggers: key_val = $state({});
|
||||
|
||||
@@ -171,7 +174,52 @@ let ae_triggers: key_val = $state({});
|
||||
|
||||
<div class="flex flex-row flex-wrap gap-1 items-center justify-between">
|
||||
|
||||
<div class="flex flex-row gap-1 items-center justify-evenly">
|
||||
<div class="flex flex-row gap-1 items-center justify-evenly relative">
|
||||
|
||||
<!-- Toggle alert status -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Toggle alert status for the session.');
|
||||
|
||||
let new_alert_value = !$lq__event_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: $lq__event_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:opacity-100={$lq__event_session_obj?.alert}
|
||||
class:opacity-50={!$lq__event_session_obj?.alert}
|
||||
class="
|
||||
btn btn-sm
|
||||
preset-tonal-warning hover:preset-tonal-error
|
||||
preset-outlined-warning-100-900 hover:preset-outlined-warning-600-400
|
||||
hover:opacity-100
|
||||
transition-all
|
||||
"
|
||||
title={$lq__event_session_obj?.alert ? 'Remove alert status' : 'Mark as alert'}
|
||||
>
|
||||
{#if $lq__event_session_obj?.alert}
|
||||
<!-- <span class="fas fa-exclamation-triangle m-0.75 text-warning-600" title="This session is marked as an alert."></span> -->
|
||||
<span class="fas fa-bell-slash m-0.75 text-warning-600" title="This session is marked as an alert."></span>
|
||||
{:else}
|
||||
<span class="fas fa-bell m-0.75 text-gray-400" title="This session is not marked as an alert."></span>
|
||||
{/if}
|
||||
<span class="hidden">Toggle Alert</span>
|
||||
</button>
|
||||
|
||||
|
||||
<Element_ae_crud
|
||||
trigger_patch={ae_triggers.hide_event_launcher}
|
||||
api_cfg={$ae_api}
|
||||
@@ -204,19 +252,20 @@ let ae_triggers: key_val = $state({});
|
||||
// $events_slct.exhibit_tracking_obj.hide_event_launcher = !$lq__event_session_obj?.hide_event_launcher;
|
||||
ae_triggers.hide_event_launcher = true;
|
||||
}}
|
||||
class="btn btn-sm m-1 *:hover:inline"
|
||||
class="btn btn-sm m-1 group"
|
||||
class:ae_btn_surface_outlined={!$lq__event_session_obj?.hide_event_launcher}
|
||||
class:ae_btn_success={$lq__event_session_obj?.hide_event_launcher}
|
||||
disabled={!$ae_loc.trusted_access}
|
||||
title="{$lq__event_session_obj?.hide_event_launcher ? 'Not showing in the Launcher. Unhide from the Launcher?' : 'Currently showing in the Launcher. Hide from the Launcher?'}"
|
||||
>
|
||||
{#if $lq__event_session_obj?.hide_event_launcher}
|
||||
<span class="fas fa-toggle-on m-1"></span>
|
||||
Unhide from Launcher?
|
||||
Unhide from Launcher
|
||||
{:else}
|
||||
<!-- <span class="fas fa-toggle-off m-1"></span> -->
|
||||
<span class="fas fa-paper-plane m-1"></span>
|
||||
<span class="hidden">
|
||||
Showing in Launcher
|
||||
<span class="hidden group-hover:inline">
|
||||
Hide from Launcher
|
||||
</span>
|
||||
{/if}
|
||||
<!-- {@html ($lq__event_session_obj?.hide_event_launcher ? '<span class="fas fa-eye m-1"></span> Unhide?' : '<span class="fas fa-eye-slash m-1"></span> Hide?')} -->
|
||||
|
||||
@@ -13,6 +13,8 @@ interface Props {
|
||||
|
||||
show__edit_alert_msg?: boolean;
|
||||
show__view_alert?: boolean;
|
||||
|
||||
position?: 'top'|'bottom'; // 'top' | 'bottom'
|
||||
}
|
||||
|
||||
let {
|
||||
@@ -27,6 +29,8 @@ let {
|
||||
|
||||
show__edit_alert_msg = $bindable(false),
|
||||
show__view_alert = $bindable(false),
|
||||
|
||||
position = 'bottom', // 'top' | 'bottom'
|
||||
}: Props = $props();
|
||||
|
||||
// *** Import Svelte specific
|
||||
@@ -50,8 +54,10 @@ let ae_triggers: key_val = $state({});
|
||||
|
||||
<div
|
||||
class:h-full={!$events_sess?.pres_mgmt?.show__view_alert[lq__event_session_obj?.event_session_id_random]}
|
||||
class:bottom-0={position == 'bottom'}
|
||||
class:top-0={position == 'top'}
|
||||
class="
|
||||
absolute bottom-0 left-0
|
||||
absolute left-0
|
||||
flex flex-row items-center justify-center
|
||||
text-warning-600
|
||||
z-10
|
||||
@@ -131,6 +137,12 @@ let ae_triggers: key_val = $state({});
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
// Confirm before removing the alert status?
|
||||
// confirm('Are you sure you want to remove the alert status for this session?')
|
||||
if (!confirm('Are you sure you want to remove the alert status for this session?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
let new_alert_value = !lq__event_session_obj?.alert;
|
||||
console.log('New alert value:', new_alert_value);
|
||||
|
||||
@@ -165,7 +177,8 @@ let ae_triggers: key_val = $state({});
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="preset-tonal-primary p-1 rounded-lg border border-primary-300 min-h-16">
|
||||
|
||||
<div class="preset-tonal-surface p-1 min-h-16 min-w-xs">
|
||||
{#if $events_sess.pres_mgmt.show__edit_alert_msg[lq__event_session_obj?.event_session_id_random]}
|
||||
<textarea
|
||||
bind:value={$events_sess.pres_mgmt.tmp__alert_msg[lq__event_session_obj?.event_session_id_random]}
|
||||
@@ -178,6 +191,7 @@ let ae_triggers: key_val = $state({});
|
||||
{/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[lq__event_session_obj?.event_session_id_random]}
|
||||
|
||||
|
||||
@@ -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