Cleaning up the new session alerts

2025-10-03 14:01:25 -04:00
parent c70abc46f3
commit 75f7ed54a5
3 changed files with 301 additions and 3 deletions
--- a/src/routes/events/[event_id]/session/[session_id]/session_view.svelte
+++ b/src/routes/events/[event_id]/session/[session_id]/session_view.svelte
@@ -39,7 +39,7 @@ let ae_tmp: key_val = $state({});
 let ae_triggers: key_val = {};

 import { core_func } from '$lib/ae_core/ae_core_functions';
-import { db_events } from "$lib/ae_events/db_events";
+// import { db_events } from "$lib/ae_events/db_events";
 import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
 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';
--- a/src/routes/events/[event_id]/session/ae_comp__event_session_alert.svelte
+++ b/src/routes/events/[event_id]/session/ae_comp__event_session_alert.svelte
@@ -0,0 +1,287 @@
+<script lang="ts">
+interface Props {
+    log_lvl?: number;
+
+    lq__event_session_obj: any;
+    alert_status?: boolean;
+    alert_msg?: string;
+
+    new_alert_value?: null|boolean;
+    new_alert_msg_value?: null|string;
+
+    tmp__alert_msg?: null|string;
+
+    show__edit_alert_msg?: boolean;
+    show__view_alert?: boolean;
+}
+
+let {
+    log_lvl = 0,
+
+    lq__event_session_obj,
+
+    new_alert_value = $bindable(null),
+    new_alert_msg_value = $bindable(null),
+
+    tmp__alert_msg = $bindable(null),
+
+    show__edit_alert_msg = $bindable(false),
+    show__view_alert = $bindable(false),
+}: Props = $props();
+
+// *** Import Svelte specific
+
+
+import type { key_val } from '$lib/ae_stores';
+import { core_func } from '$lib/ae_core/ae_core_functions';
+
+// *** Import Aether specific variables and functions
+// import Element_ae_crud_v2 from '$lib/element_ae_crud_v2.svelte';
+import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+import { events_loc, events_sess, events_slct, events_trigger, events_trig_kv } from '$lib/ae_events_stores';
+
+
+// Variables
+let ae_promises: key_val = {};
+let ae_tmp: key_val = $state({});
+let ae_triggers: key_val = $state({});
+</script>
+
+
+<div
+    class:h-full={!$events_sess?.pres_mgmt?.show__view_alert[lq__event_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[lq__event_session_obj?.event_session_id_random] = !$events_sess.pres_mgmt.show__view_alert[lq__event_session_obj?.event_session_id_random];
+        }}
+        class:hidden={$events_sess.pres_mgmt.show__view_alert[lq__event_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[lq__event_session_obj?.event_session_id_random]}
+        class:inline-block={lq__event_session_obj?.alert_msg && $events_sess?.pres_mgmt?.show__view_alert[lq__event_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[lq__event_session_obj?.event_session_id_random] = lq__event_session_obj?.alert_msg;
+                $events_sess.pres_mgmt.show__edit_alert_msg[lq__event_session_obj?.event_session_id_random] = false;
+
+                $events_sess.pres_mgmt.show__view_alert[lq__event_session_obj?.event_session_id_random] = false;
+            }}
+            class:hidden={!$events_sess.pres_mgmt.show__view_alert[lq__event_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 = !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="
+                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 class="fas fa-bell-slash text-warning-600 mr-1" title="This session has an alert set."></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[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]}
+                rows={3}
+                class="w-full p-1"
+                placeholder="Enter alert message here..."
+                ></textarea>
+        {:else}
+            {lq__event_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[lq__event_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: lq__event_session_obj?.event_session_id_random,
+                        object_reload: true,
+                        field_name: 'alert_msg',
+                        new_field_value: $events_sess.pres_mgmt.tmp__alert_msg[lq__event_session_obj?.event_session_id_random],
+                        log_lvl: 1
+                        })
+                    .then(function (results) {
+                    })
+                    .finally(function () {
+                        $events_sess.pres_mgmt.show__edit_alert_msg[lq__event_session_obj?.event_session_id_random] = false;
+                    });
+                }}
+                class:invisible={$events_sess.pres_mgmt.tmp__alert_msg[lq__event_session_obj?.event_session_id_random] == lq__event_session_obj?.alert_msg}
+                class:visible={$events_sess.pres_mgmt.tmp__alert_msg[lq__event_session_obj?.event_session_id_random] != lq__event_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[lq__event_session_obj?.event_session_id_random] = lq__event_session_obj?.alert_msg;
+                    $events_sess.pres_mgmt.show__edit_alert_msg[lq__event_session_obj?.event_session_id_random] = false;
+
+                    $events_sess.pres_mgmt.show__view_alert[lq__event_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: lq__event_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[lq__event_session_obj?.event_session_id_random] = true
+
+                    $events_sess.pres_mgmt.tmp__alert_msg[lq__event_session_obj?.event_session_id_random] = lq__event_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>
--- a/src/routes/events/ae_comp__event_session_obj_li.svelte
+++ b/src/routes/events/ae_comp__event_session_obj_li.svelte
@@ -34,6 +34,8 @@ let {
 }: Props = $props();

 // *** Import Svelte specific
+
+// *** Import Aether specific variables and functions
 import type { key_val } from '$lib/ae_stores';
 import { ae_util } from '$lib/ae_utils/ae_utils';
 import Element_ae_crud_v2 from '$lib/element_ae_crud_v2.svelte';
@@ -41,9 +43,8 @@ import Element_ae_crud_v2 from '$lib/element_ae_crud_v2.svelte';
 import Comp_event_presenter_obj_li from '../events/[event_id]/presenter/ae_comp__event_presenter_obj_li_wrapper.svelte';
 import Element_manage_event_file_li from '$lib/element_manage_event_file_li_direct.svelte';

-// import { liveQuery } from "dexie";
+import Comp_event_session_alert from '../events/[event_id]/session/ae_comp__event_session_alert.svelte';

-// *** Import Aether specific variables and functions
 import { core_func } from '$lib/ae_core/ae_core_functions';
 // import { db_events } from "$lib/db_events";
 import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
@@ -176,7 +177,17 @@ 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