Finally using the alerts for sessions!!
This commit is contained in:
Scott Idem
@@ -805,6 +805,11 @@ img.qr_code:focus {
|
||||
background-image: repeating-linear-gradient(-45deg, hsla(0, 100%, 50%, .25), hsla(0, 100%, 50%, .25) 10px, transparent 10px, transparent 20px);
|
||||
}
|
||||
|
||||
.alert {
|
||||
/* background-color: hsla(0, 100%, 50%, .1); */
|
||||
outline: dashed thin hsla(0, 100%, 50%, .5);
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.sk_header.hide_sm {
|
||||
|
||||
@@ -495,6 +495,11 @@ let events_session_data_struct: key_val = {
|
||||
|
||||
show__edit_poc_person: {},
|
||||
|
||||
show__view_alert: {},
|
||||
show__edit_alert_msg: {},
|
||||
|
||||
tmp__alert_msg: {},
|
||||
|
||||
status_rpt: {
|
||||
recent_files: null,
|
||||
presenters_agree: null,
|
||||
|
||||
@@ -171,8 +171,247 @@ let trigger_reload_session_id: string = $state('');
|
||||
class:dim={session_obj?.hide}
|
||||
class:bg-warning-100={!session_obj?.enable}
|
||||
class:text-warning-900={!session_obj?.enable}
|
||||
class:alert={session_obj?.alert}
|
||||
class="relative"
|
||||
>
|
||||
<td>
|
||||
{#if session_obj?.alert && $ae_loc.trusted_access}
|
||||
<div
|
||||
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>
|
||||
{/if}
|
||||
<a
|
||||
href="/events/{session_obj?.event_id}/session/{session_obj?.event_session_id}"
|
||||
class="
|
||||
@@ -648,6 +887,53 @@ let trigger_reload_session_id: string = $state('');
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
|
||||
<!-- Toggle alert status -->
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => {
|
||||
console.log('Toggle alert status for the session.');
|
||||
|
||||
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:opacity-100={session_obj?.alert}
|
||||
class:opacity-50={!session_obj?.alert}
|
||||
class="
|
||||
btn btn-icon
|
||||
text-xs
|
||||
m-0 px-0.5
|
||||
preset-tonal-warning hover:preset-tonal-error
|
||||
preset-outlined-warning-100-900 hover:preset-outlined-warning-600-400
|
||||
hover:opacity-100
|
||||
transition-all
|
||||
"
|
||||
title={session_obj?.alert ? 'Remove alert status' : 'Mark as alert'}
|
||||
>
|
||||
{#if 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>
|
||||
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
|
||||
Reference in New Issue
Block a user