More work on making the locations and devices more useful.

src/routes/events/[event_id]/+layout.ts

@@ -5,8 +5,9 @@ import { error } from '@sveltejs/kit';
 import { browser } from '$app/environment';
 import { events_func } from '$lib/ae_events_functions';
 
+
 export async function load({ params, parent }) { // route
-    let log_lvl = 0;
+    let log_lvl = 1;
 
     let data = await parent();
     // console.log(`ae events_pres_mgmt event [event_id] +page.ts data:`, data);
@@ -41,7 +42,11 @@ export async function load({ params, parent }) { // route
 
     if (browser) {
         let load_event_obj = events_func.load_ae_obj_id__event({
-            api_cfg: ae_acct.api, event_id:  event_id, try_cache: true
+            api_cfg: ae_acct.api,
+            event_id:  event_id,
+            inc_device_li: true,
+            try_cache: true,
+            log_lvl: log_lvl
         });
         console.log(`load_event_obj = `, load_event_obj);
         ae_acct.slct.event_obj = load_event_obj;
@@ -52,7 +57,7 @@ export async function load({ params, parent }) { // route
             for_obj_id: event_id,
             params: {qry__enabled: 'enabled', qry__hidden: 'all', qry__limit: 200},
             try_cache: true,
-            log_lvl: 1
+            log_lvl: log_lvl
         });
         console.log(`load_event_session_obj_li = `, load_event_session_obj_li);
         ae_acct.slct.event_session_obj_li = load_event_session_obj_li;
@@ -63,7 +68,7 @@ export async function load({ params, parent }) { // route
             for_obj_id: event_id,
             params: {qry__enabled: 'enabled', qry__hidden: 'all', qry__limit: 200},
             try_cache: true,
-            log_lvl: 1
+            log_lvl: log_lvl
         });
         console.log(`load_event_location_obj_li = `, load_event_location_obj_li);
         ae_acct.slct.event_location_obj_li = load_event_location_obj_li;

src/routes/events/[event_id]/device/ae_comp__event_device_obj_li.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 // Imports
+import { ae_util } from '$lib/ae_utils/ae_utils';
 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';
@@ -16,7 +17,7 @@ export let link_to_id: string;
 export let lq__event_device_obj_li: any;
 
 if (log_lvl) {
-    console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
+    console.log(`Event Device List: link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
 }
 
 // Variables
@@ -28,40 +29,6 @@ if (log_lvl) {
 </script>
 
 
-<div
-    class="float-right flex flex-row items-center"
-    >
-    {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
-    <button
-        type="button"
-        on:click={() => {
-            console.log('Add Device');
-            if (!confirm('Add a new device to the event? You will be able to edit the details after the device is created.')) {
-                return;
-            }
-
-            let device_data = {
-                event_id_random: $events_slct.event_id,
-                name: 'TEMP Device Name',
-                enable: true,
-            }
-
-            events_func.create_ae_obj__event_device({
-                api_cfg: $ae_api,
-                event_id: $events_slct.event_id,
-                data_kv: device_data,
-                log_lvl: log_lvl,
-            })
-        }}
-        class="btn btn-sm variant-soft-warning hover:variant-filled-warning"
-        >
-        <span class="fas fa-plus mx-1"></span>
-        Add Device
-    </button>
-    {/if}
-</div>
-
-
 <section class="ae_comp event_device_obj_li {container_class_li}">
 
 
@@ -94,40 +61,6 @@ if (log_lvl) {
             class="space-y-2 border border-gray-200 p-2 rounded-md"
             >
 
-        <div class="float-right space-2 flex flex-row items-center">
-        {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
-        <button
-            type="button"
-            on:click={() => {
-                console.log('Add Session');
-                if (!confirm('Add a new session to the device? You will be able to edit their details after the session record is created.')) {
-                    return;
-                }
-
-                let session_data = {
-                    event_id_random: $events_slct.event_id,
-                    event_device_id_random: event_device_obj?.event_device_id_random,
-                    name: 'TEMP Session Name',
-                    enable: true,
-                }
-
-                events_func.create_ae_obj__event_session({
-                    api_cfg: $ae_api,
-                    event_id: $events_slct.event_id,
-                    data_kv: session_data,
-                    log_lvl: log_lvl,
-                })
-            }}
-            class="btn btn-sm variant-soft-warning hover:variant-filled-warning"
-            >
-            <span class="fas fa-plus mx-1"></span>
-            Add Session
-        </button>
-        {/if}
-
-
-        </div>
-
         <h4 class="h5 rounded-md p-2 bg-gray-200">
             <Element_ae_crud
                 api_cfg={$ae_api}
@@ -171,6 +104,52 @@ if (log_lvl) {
             {/if}
         </h4>
 
+        <div>
+            <div
+                class="text-red-500 bg-red-200 p-1 rounded-md border border-red-200 text-center"
+                class:hidden={!event_device_obj?.alert && !event_device_obj?.alert_msg}
+                >
+                <span class="fas fa-exclamation-triangle mx-1" />
+                {event_device_obj?.alert ? 'Alert' : 'No Alert'}
+                <span class="fas fa-exclamation-triangle mx-1" />
+                <br>
+                {event_device_obj?.alert_msg ?? 'No Alert Message'}
+            </div>
+            <div class="flex flex-col gap-1">
+                <span>
+                    <strong class="text-sm">hostname:</strong>
+                    {event_device_obj?.info_hostname}
+                </span>
+                <span>
+                    <strong class="text-sm">IPs:</strong>
+                    {event_device_obj?.info_ip_list}
+                </span>
+            </div>
+            <div
+                class="text-sm text-gray-500 bg-gray-100"
+                >
+                Last updated:
+                <span>
+                    <span>
+                    {ae_util.iso_datetime_formatter(event_device_obj?.updated_on, 'dddd')},
+                    </span>
+                    <span>
+                    {ae_util.iso_datetime_formatter(event_device_obj?.updated_on, 'date_long_month_day')}
+                    </span>
+                </span>
+                @
+                <span
+                    class="px-1"
+                    class:bg-yellow-200={ae_util.is_datetime_recent({datetime: event_device_obj?.updated_on, minutes: 30})}
+                    class:bg-green-200={ae_util.is_datetime_recent({datetime: event_device_obj?.updated_on, minutes: 240})}
+                    class:bg-blue-200={ae_util.is_datetime_recent({datetime: event_device_obj?.updated_on, minutes: 2880})}
+                    >
+                    {ae_util.iso_datetime_formatter(event_device_obj?.updated_on, 'time_iso_12_tz')}
+                </span>
+            </div>
+        </div>
+
+
         <div
             class:hidden={!$events_loc.pres_mgmt.show_content__device_description}
             >

src/routes/events/[event_id]/device/ae_comp__event_device_obj_li_wrapper.svelte

@@ -15,7 +15,7 @@ export let link_to_type: string;
 export let link_to_id: string;
 
 if (log_lvl) {
-    console.log(`link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
+    console.log(`Event Device List Wrapper: link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
 }
 
 // Variables
@@ -23,7 +23,7 @@ if (log_lvl) {
 // let ae_tmp: key_val = {};
 // let ae_triggers: key_val = {};
 
-let dq__where_type_id_val: string = `${link_to_type}_id_random`;
+let dq__where_type_id_val: string = `${link_to_type}_id`;
 let dq__where_eq_id_val: string = link_to_id;
 
 // Functions and Logic

src/routes/events/[event_id]/locations/ae_comp__event_location_obj_li.svelte

@@ -97,40 +97,6 @@ if (log_lvl) {
             class="space-y-2 border border-gray-200 p-2 rounded-md"
             >
 
-        <div class="float-right space-2 flex flex-row items-center">
-        {#if $ae_loc.trusted_access && $ae_loc.edit_mode}
-        <button
-            type="button"
-            on:click={() => {
-                console.log('Add Session');
-                if (!confirm('Add a new session to the location? You will be able to edit their details after the session record is created.')) {
-                    return;
-                }
-
-                let session_data = {
-                    event_id_random: $events_slct.event_id,
-                    event_location_id_random: event_location_obj?.event_location_id_random,
-                    name: 'TEMP Session Name',
-                    enable: true,
-                }
-
-                events_func.create_ae_obj__event_session({
-                    api_cfg: $ae_api,
-                    event_id: $events_slct.event_id,
-                    data_kv: session_data,
-                    log_lvl: log_lvl,
-                })
-            }}
-            class="btn btn-sm variant-soft-warning hover:variant-filled-warning"
-            >
-            <span class="fas fa-plus mx-1"></span>
-            Add Session
-        </button>
-        {/if}
-
-
-        </div>
-
         <h4 class="h5 rounded-md p-2 bg-gray-200">
             <Element_ae_crud
                 api_cfg={$ae_api}

src/routes/events_pres_mgmt/ae_comp__event_file_obj_tbl.svelte

@@ -181,13 +181,13 @@ let lq_kv__event_file_obj_li = liveQuery(
 
                 >
                 <div>
-                <span>
-                {ae_util.iso_datetime_formatter(event_file_obj?.created_on, 'dddd')}
-                </span>
-                <span>
-                {ae_util.iso_datetime_formatter(event_file_obj?.created_on, 'date_long_month_day')}
-                </span>
-            </div>
+                    <span>
+                    {ae_util.iso_datetime_formatter(event_file_obj?.created_on, 'dddd')}
+                    </span>
+                    <span>
+                    {ae_util.iso_datetime_formatter(event_file_obj?.created_on, 'date_long_month_day')}
+                    </span>
+                </div>
                 <span
                     class:bg-yellow-200={ae_util.is_datetime_recent({datetime: event_file_obj?.created_on, minutes: 30})}
                     class:bg-green-200={ae_util.is_datetime_recent({datetime: event_file_obj?.created_on, minutes: 240})}