From 172763bc2645fc24850a2e68dfa4edf1c1677a6e Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 17 Oct 2024 18:26:56 -0400
Subject: [PATCH] Working on device status and alerts.

---
 package.json                                  |   2 +-
 src/lib/ae_events__event_device.ts            |   4 +
 src/lib/ae_events_functions.ts                |   7 +
 src/lib/db_events.ts                          |   3 +
 .../ae_comp__event_device_obj_li.svelte       | 327 ++++++++++++------
 ...e_comp__event_device_obj_li_wrapper.svelte |   3 +
 .../ae_comp__event_location_obj_li.svelte     |   2 +
 7 files changed, 241 insertions(+), 107 deletions(-)

diff --git a/package.json b/package.json
index de92e5b0..37ce670f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ae-app-svelte4-tailwind-skeleton",
-  "version": "0.1.5",
+  "version": "0.1.10",
   "private": true,
   "scripts": {
     "dev": "vite dev",
diff --git a/src/lib/ae_events__event_device.ts b/src/lib/ae_events__event_device.ts
index 8d4d2282..06594bd6 100644
--- a/src/lib/ae_events__event_device.ts
+++ b/src/lib/ae_events__event_device.ts
@@ -297,6 +297,7 @@ export async function update_ae_obj__event_device(
 }
 
 
+// Not yet used or tested fully!
 // Updated 2024-10-16
 export async function search__event_device(
         {
@@ -475,10 +476,13 @@ export function db_save_ae_obj_li__event_device(
 
                     alert: obj.alert,
                     alert_msg: obj.alert_msg,
+                    alert_on: obj.alert_on,
                     status: obj.status,
                     status_msg: obj.status_msg,
+                    status_on: obj.status_on,
                     record_status: obj.record_status,
                     record_status_msg: obj.record_status_msg,
+                    record_status_on: obj.record_status_on,
 
                     info_hostname: obj.info_hostname,
                     info_ip_list: obj.info_ip_list,
diff --git a/src/lib/ae_events_functions.ts b/src/lib/ae_events_functions.ts
index e34f92f3..14738fbd 100644
--- a/src/lib/ae_events_functions.ts
+++ b/src/lib/ae_events_functions.ts
@@ -2,6 +2,7 @@
 
 // Import all the functions from this library:
 import * as events from "$lib/ae_events__event";
+import * as events_device from "$lib/ae_events__event_device";
 
 import {
     load_ae_obj_id__event_file,
@@ -80,6 +81,12 @@ let export_obj = {
     db_save_ae_obj_li__event: events.db_save_ae_obj_li__event,
     sync_config__event_pres_mgmt: events.sync_config__event_pres_mgmt,
 
+    load_ae_obj_id__event_device: events_device.load_ae_obj_id__event_device,
+    load_ae_obj_li__event_device: events_device.load_ae_obj_li__event_device,
+    create_ae_obj__event_device: events_device.create_ae_obj__event_device,
+    update_ae_obj__event_device: events_device.update_ae_obj__event_device,
+    db_save_ae_obj_li__event_device: events_device.db_save_ae_obj_li__event_device,
+
     load_ae_obj_id__event_file: load_ae_obj_id__event_file,
     load_ae_obj_li__event_file: load_ae_obj_li__event_file,
     delete_ae_obj_id__event_file: delete_ae_obj_id__event_file,
diff --git a/src/lib/db_events.ts b/src/lib/db_events.ts
index 64c25fe7..8d5a5fb1 100644
--- a/src/lib/db_events.ts
+++ b/src/lib/db_events.ts
@@ -167,10 +167,13 @@ export interface Device {
 
     alert?: null|boolean;
     alert_msg?: null|string;
+    alert_on?: null|string;
     status?: null|string;
     status_msg?: null|string;
+    status_on?: null|Date;
     record_status?: null|string;
     record_status_msg?: null|string;
+    record_status_on?: null|Date;
 
     info_hostname?: null|string;
     info_ip_list?: null|string; // Semi-colon separated list of IP addresses
diff --git a/src/routes/events/[event_id]/device/ae_comp__event_device_obj_li.svelte b/src/routes/events/[event_id]/device/ae_comp__event_device_obj_li.svelte
index 6c3e56b2..cedb4324 100644
--- a/src/routes/events/[event_id]/device/ae_comp__event_device_obj_li.svelte
+++ b/src/routes/events/[event_id]/device/ae_comp__event_device_obj_li.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 // Imports
+import { onDestroy } from 'svelte';
+import type { key_val } from '$lib/ae_stores';
 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';
@@ -16,12 +18,16 @@ export let link_to_type: string;
 export let link_to_id: string;
 export let lq__event_device_obj_li: any;
 
+export let auto_refresh: number = 90000;
+
 if (log_lvl) {
     console.log(`Event Device List: link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
 }
 
 // Variables
-// let ae_promises: key_val = {};
+let ae_promises: key_val = {
+    load_ae_obj_id__event_device: {}
+};
 // let ae_tmp: key_val = {};
 // let ae_triggers: key_val = {};
 
@@ -30,6 +36,32 @@ if (!$events_loc.pres_mgmt?.device_kv) {
 }
 
 // Functions and Logic
+if (auto_refresh) {
+    // Add a random number of seconds to the auto_refresh interval to prevent all clients from refreshing at the same time.
+    let refresh_interval = auto_refresh + Math.floor(Math.random() * 15000);
+    console.log(`Auto refresh interval: ${refresh_interval}`);
+    if (typeof auto_refresh === 'number') {
+        refresh_interval = auto_refresh;
+    }
+
+    let refresh_interval_id = setInterval(() => {
+        console.log('Auto-refreshing Event Device List');
+        events_func.load_ae_obj_li__event_device({
+            api_cfg: $ae_api,
+            for_obj_type: link_to_type,
+            for_obj_id: link_to_id,
+            log_lvl: log_lvl
+        });
+    }, refresh_interval);
+
+    // This is needed to clear the interval when the component is destroyed to prevent multiple intervals from running.
+    // This may need to change with Svelte v3.
+    onDestroy(() => {
+        console.log('the component is being destroyed');
+        clearInterval(refresh_interval_id);
+    });
+}
+
 </script>
 
 
@@ -61,134 +93,217 @@ if (!$events_loc.pres_mgmt?.device_kv) {
         class="space-y-4 p-4 m-2 bg-gray-100 rounded-md"
         >
     {#each $lq__event_device_obj_li as event_device_obj}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
         <li
-            class="space-y-2 border border-gray-200 p-2 rounded-md"
+            class="space-y-2 border border-gray-400 p-2 rounded-md"
             class:dim={event_device_obj?.hide}
             class:hidden={event_device_obj?.hide && !$ae_loc.edit_mode}
             >
 
         <h4 class="h5 rounded-md p-2 bg-gray-200 flex flex-row gap-1 items-center justify-between">
             <span>
-            <Element_ae_crud
-                api_cfg={$ae_api}
-                object_type={'event_device'}
-                object_id={event_device_obj?.event_device_id_random}
-                field_name={'name'}
-                field_type={'text'}
-                field_value={event_device_obj?.name}
-                allow_null={false}
-                hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
-                outline_element={false}
-                show_crud={false}
-                display_inline={true}
-                display_block_edit={true}
-                class_li={''}
-                on:ae_crud_updated={e => {
-                    console.log(`ae_crud_updated:`, e.detail);
+                <Element_ae_crud
+                    api_cfg={$ae_api}
+                    object_type={'event_device'}
+                    object_id={event_device_obj?.event_device_id}
+                    field_name={'name'}
+                    field_type={'text'}
+                    field_value={event_device_obj?.name}
+                    allow_null={false}
+                    hide_edit_btn={!$ae_loc.trusted_access || !$ae_loc.edit_mode}
+                    outline_element={false}
+                    show_crud={false}
+                    display_inline={true}
+                    display_block_edit={true}
+                    class_li={''}
+                    on:ae_crud_updated={e => {
+                        console.log(`ae_crud_updated:`, e.detail);
 
-                    events_func.load_ae_obj_id__event_device({
-                        api_cfg: $ae_api, event_device_id: event_device_obj.event_device_id_random, log_lvl: 1
-                    })
-                    .then(function (load_results) {
-                    })
-                    .then(function (load_results) {
-                        // $events_trigger = 'load__event_device_obj_id';
-                        // $events_trig_kv['event_device_id'] = event_device_obj.event_device_id_random;
-                    });
-                }}
-                >
-                <!-- <strong class="text-sm">Name/Title:</strong> -->
-                "{event_device_obj?.name}"
-            </Element_ae_crud>
-            <!-- "{event_device_obj.name}" -->
-            {#if event_device_obj?.code && !$events_loc.pres_mgmt?.hide__device_code}
-            <span class="text-sm text-gray-500 bg-yellow-100 p-1 rounded-md border border-yellow-200"
-                title="Device code {event_device_obj?.code}"
-                >
-                <span class="fas fa-barcode"></span>
-                {event_device_obj?.code ?? ''}
-            </span>
-            {/if}
-            </span>
-
-            {#if event_device_obj?.alert}
-                <!-- {event_device_obj.alert} -->
-                <span
-                    class="text-red-500 bg-red-200 p-1 rounded-md border border-red-200 text-center"
-                    title="{event_device_obj.alert_msg}"
+                        events_func.load_ae_obj_id__event_device({
+                            api_cfg: $ae_api, event_device_id: event_device_obj.event_device_id, log_lvl: 1
+                        })
+                        .then(function (load_results) {
+                        })
+                        .then(function (load_results) {
+                            // $events_trigger = 'load__event_device_obj_id';
+                            // $events_trig_kv['event_device_id'] = event_device_obj.event_device_id;
+                        });
+                    }}
                     >
-                    <span class="fas fa-exclamation-triangle mx-1" />
+                    <!-- <strong class="text-sm">Name/Title:</strong> -->
+                    <span class="fas fa-laptop m-1"></span>
+                    "{event_device_obj?.name}"
+                </Element_ae_crud>
+                <!-- "{event_device_obj.name}" -->
+                {#if event_device_obj?.code && !$events_loc.pres_mgmt?.hide__device_code}
+                <span class="text-sm text-gray-500 bg-yellow-100 p-1 rounded-md border border-yellow-200"
+                    title="Device code {event_device_obj?.code}"
+                    >
+                    <span class="fas fa-barcode"></span>
+                    {event_device_obj?.code ?? ''}
                 </span>
-            {/if}
-            <button
-                type="button"
-                on:click={() => {
-                    console.log('Show/Hide Device');
-                    if (!$events_loc.pres_mgmt.device_kv) {
-                        $events_loc.pres_mgmt.device_kv = {
-                            [event_device_obj.event_device_id]: {collapse: true}
-                        };
-                    } else if (!$events_loc.pres_mgmt.device_kv[event_device_obj.event_device_id]) {
-                        $events_loc.pres_mgmt.device_kv[event_device_obj.event_device_id] = {collapse: true};
-                    } else {
-                        $events_loc.pres_mgmt.device_kv[event_device_obj.event_device_id].collapse = !$events_loc.pres_mgmt.device_kv[event_device_obj.event_device_id].collapse;
-
-                    }
-                }}
-                class="btn btn-sm variant-ghost-surface hover:variant-filled-surface transition-all hover:transition-all *:hover:inline text-xs"
-                class:variant-glass-warning={$events_loc.pres_mgmt?.device_kv[event_device_obj.event_device_id]?.collapse}
-                >
-                {#if $events_loc.pres_mgmt.device_kv && $events_loc.pres_mgmt.device_kv[event_device_obj.event_device_id]?.collapse}
-                    <!-- <span class="fas fa-minus mx-1"></span> -->
-                    <span class="fas fa-chevron-up m-1"></span>
-                    <span
-                        class="hidden"
-                        >
-                        Show?</span>
-                {:else}
-                    <span class="fas fa-chevron-down m-1"></span>
-                    <!-- <span class="fas fa-plus mx-1"></span> -->
-                    <!-- <span>Device</span> -->
                 {/if}
-            </button>
+            </span>
+
+            <span>
+                <span>
+                    {#if event_device_obj?.alert}
+                        <!-- {event_device_obj.alert} -->
+                        <span
+                            class="text-red-500 bg-red-200 p-1 rounded-md border border-red-200 text-center"
+                            title="{event_device_obj.alert_msg}"
+                            >
+                            <span class="fas fa-exclamation-triangle mx-1" />
+                        </span>
+                    {/if}
+                    {#if event_device_obj?.status}
+                        <!-- {event_device_obj.status} -->
+                        <span
+                            class="text-blue-500 bg-blue-200 p-1 rounded-md border border-blue-200 text-center"
+                            title="{event_device_obj.status_msg}"
+                            >
+                            <span class="fas fa-laptop-code mx-1" />
+                        </span>
+                    {/if}
+                    {#if event_device_obj?.record_status}
+                        <!-- {event_device_obj.record_status} -->
+                        <span
+                            class="text-orange-500 bg-orange-200 p-1 rounded-md border border-orange-200 text-center"
+                            title="{event_device_obj.record_status_msg}"
+                            >
+                            <span class="fas fa-camera mx-1" />
+                        </span>
+                    {/if}
+                </span>
+
+                <button
+                    type="button"
+                    on:click={() => {
+                        console.log('Refresh device info:', event_device_obj);
+                        ae_promises.load_ae_obj_id__event_device[event_device_obj.event_device_id] =
+                            events_func.load_ae_obj_id__event_device({
+                                api_cfg: $ae_api,
+                                event_device_id: event_device_obj.event_device_id,
+                                log_lvl: 0
+                            });
+                    }}
+                    class="btn btn-sm variant-soft-surface hover:variant-filled-surface transition-all hover:transition-all *:hover:inline text-xs"
+                    >
+                    {#await ae_promises.load_ae_obj_id__event_device[event_device_obj.event_device_id]}
+                        <span class="fas fa-spinner fa-spin mx-1"></span>
+                    {:then load_results}
+                        <span class="fas fa-sync-alt mx-1"></span>
+                    {:catch error}
+                        <span class="fas fa-exclamation-triangle mx-1"></span>
+                        <span class="hidden">Error</span>
+                    {/await}
+                    <span class="hidden">Refresh</span>
+                </button>
+
+                <button
+                    type="button"
+                    on:click={() => {
+                        console.log('Show/Hide Device');
+                        if (!$events_loc.pres_mgmt.device_kv) {
+                            $events_loc.pres_mgmt.device_kv = {
+                                [event_device_obj.event_device_id]: {collapse: true}
+                            };
+                        } else if (!$events_loc.pres_mgmt.device_kv[event_device_obj.event_device_id]) {
+                            $events_loc.pres_mgmt.device_kv[event_device_obj.event_device_id] = {collapse: true};
+                        } else {
+                            $events_loc.pres_mgmt.device_kv[event_device_obj.event_device_id].collapse = !$events_loc.pres_mgmt.device_kv[event_device_obj.event_device_id].collapse;
+
+                        }
+                    }}
+                    class="btn btn-sm variant-ghost-surface hover:variant-filled-surface transition-all hover:transition-all *:hover:inline text-xs"
+                    class:variant-glass-warning={$events_loc.pres_mgmt?.device_kv[event_device_obj.event_device_id]?.collapse}
+                    >
+                    {#if $events_loc.pres_mgmt.device_kv && $events_loc.pres_mgmt.device_kv[event_device_obj.event_device_id]?.collapse}
+                        <!-- <span class="fas fa-minus mx-1"></span> -->
+                        <span class="fas fa-chevron-up m-1"></span>
+                        <span class="hidden">Show?</span>
+                    {:else}
+                        <span class="fas fa-chevron-down m-1"></span>
+                        <!-- <span class="fas fa-plus mx-1"></span> -->
+                        <!-- <span>Device</span> -->
+                    {/if}
+                </button>
+            </span>
         </h4>
 
         <div
             class:hidden={$events_loc.pres_mgmt.device_kv && $events_loc.pres_mgmt.device_kv[event_device_obj.event_device_id]?.collapse}
             >
 
-            <div>
+            <div class="flex flex-col gap-1">
                 <div
-                    class="text-red-500 bg-red-200 p-1 rounded-md border border-red-200 text-center"
+                    class="text-red-500 bg-red-200 p-1 rounded-md border border-red-400 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 message'}
+                    <div class="flex flex-row items-center justify-between">
+                        <span class="fas fa-exclamation-triangle mx-1" />
+                        <strong class="text-bold">
+                            {event_device_obj?.alert ? 'Alert' : 'No Alert'}
+                        </strong>
+                        <span class="fas fa-exclamation-triangle mx-1" />
+                    </div>
+                    <div>
+                        {@html event_device_obj?.alert_msg ?? 'No message'}
+                    </div>
+                    {#if event_device_obj?.alert_on}
+                        <div class="text-sm text-gray-500">
+                            Datetime: {ae_util.iso_datetime_formatter(event_device_obj?.alert_on, 'time_iso_12_tz')}
+                        </div>
+                    {/if}
                 </div>
 
                 <div
-                    class="text-red-500 bg-red-200 p-1 rounded-md border border-red-200 text-center"
+                    class="text-blue-500 bg-blue-200 p-1 rounded-md border border-blue-400 text-center"
                     class:hidden={!event_device_obj?.status && !event_device_obj?.status_msg}
                     >
-                    <span class="fas fa-exclamation-triangle mx-1" />
-                    {event_device_obj?.status ? 'Status' : 'No Status'}
-                    <span class="fas fa-exclamation-triangle mx-1" />
-                    <br>
-                    {event_device_obj?.status_msg ?? 'No message'}
+                    <div class="flex flex-row items-center justify-between">
+                        <span class="fas fa-laptop-code mx-1" />
+                        <strong class="text-bold">
+                            {event_device_obj?.status ? event_device_obj?.status : 'No Status'}
+                        </strong>
+                        <span class="fas fa-laptop-code mx-1" />
+                    </div>
+                    <div>
+                        {@html event_device_obj?.status_msg ?? 'No message'}
+                    </div>
+                    {#if event_device_obj?.status_on}
+                        <div class="text-sm text-gray-500">
+                            Datetime: {ae_util.iso_datetime_formatter(event_device_obj?.status_on, 'time_iso_12_tz')}
+                        </div>
+                    {/if}
                 </div>
 
                 <div
-                    class="text-red-500 bg-red-200 p-1 rounded-md border border-red-200 text-center"
+                    class="text-orange-500 bg-orange-200 p-1 rounded-md border border-orange-400 text-center"
                     class:hidden={!event_device_obj?.record_status && !event_device_obj?.record_status_msg}
                     >
-                    <span class="fas fa-exclamation-triangle mx-1" />
-                    {event_device_obj?.record_status ? 'Recording Status' : 'No Recording Status'}
-                    <span class="fas fa-exclamation-triangle mx-1" />
-                    <br>
-                    {event_device_obj?.record_status_msg ?? 'No message'}
+                    <div class="flex flex-row items-center justify-between">
+                        <span class="fas fa-camera mx-1" />
+                        <!-- The recording status should be an ISO timestamp if it is recording. We need to check if it is a datetime string first. -->
+                        {#if event_device_obj?.record_status && event_device_obj?.record_status.length > 10}
+                            {ae_util.iso_datetime_formatter(event_device_obj?.record_status, 'time_iso_12_tz')}
+                            <!-- Show number of second and minutes since last recording status update. -->
+
+                        {:else if event_device_obj?.record_status}
+                            {event_device_obj?.record_status}
+                        {:else}
+                            No Recording Status
+                        {/if}
+                        <span class="fas fa-camera mx-1" />
+                    </div>
+                    <div>
+                        {@html event_device_obj?.record_status_msg ?? 'No message'}
+                    </div>
+                    {#if event_device_obj?.record_status_on}
+                        <div class="text-sm text-gray-500">
+                            Datetime: {ae_util.iso_datetime_formatter(event_device_obj?.record_status_on, 'time_iso_12_tz')}
+                        </div>
+                    {/if}
                 </div>
 
                 <div class="flex flex-col gap-1">
@@ -232,7 +347,7 @@ if (!$events_loc.pres_mgmt?.device_kv) {
             <Element_ae_crud
                 api_cfg={$ae_api}
                 object_type={'event_device'}
-                object_id={event_device_obj?.event_device_id_random}
+                object_id={event_device_obj?.event_device_id}
                 field_name={'description'}
                 field_type={'textarea'}
                 field_value={event_device_obj?.description}
@@ -247,7 +362,7 @@ if (!$events_loc.pres_mgmt?.device_kv) {
                 on:ae_crud_updated={e => {
                     console.log(`ae_crud_updated:`, e.detail);
 
-                    events_func.load_ae_obj_id__event_device({api_cfg: $ae_api, event_device_id: event_device_obj.event_device_id_random, log_lvl: 1});
+                    events_func.load_ae_obj_id__event_device({api_cfg: $ae_api, event_device_id: event_device_obj.event_device_id, log_lvl: 1});
                 }}
                 >
                 <strong class="text-sm">
@@ -259,21 +374,21 @@ if (!$events_loc.pres_mgmt?.device_kv) {
                     type="button"
                     on:click={() => {
                         console.log('Show/Hide Description');
-                        if ($events_sess.pres_mgmt.show_content__device_description == event_device_obj.event_device_id_random) {
+                        if ($events_sess.pres_mgmt.show_content__device_description == event_device_obj.event_device_id) {
                             $events_sess.pres_mgmt.show_content__device_description = null;
 
                             // Was testing with LiveQuery
                             $events_slct.event_device_id = null;
                         } else {
-                            $events_sess.pres_mgmt.show_content__device_description = event_device_obj.event_device_id_random;
+                            $events_sess.pres_mgmt.show_content__device_description = event_device_obj.event_device_id;
 
                             // Was testing with LiveQuery
-                            $events_slct.event_device_id = event_device_obj.event_device_id_random;
+                            $events_slct.event_device_id = event_device_obj.event_device_id;
                         }
                     }}
                     class="btn btn-sm variant-soft-surface hover:variant-filled-surface text-xs"
                     >
-                    {#if $events_sess.pres_mgmt.show_content__device_description == event_device_obj.event_device_id_random}
+                    {#if $events_sess.pres_mgmt.show_content__device_description == event_device_obj.event_device_id}
                         <span class="fas fa-eye-slash mx-1"></span>
                         <span>Hide Description</span>
                     {:else}
@@ -284,7 +399,7 @@ if (!$events_loc.pres_mgmt?.device_kv) {
 
                 <pre
                     class="whitespace-pre-wrap p-2 bg-gray-100 rounded-md"
-                    class:hidden={$events_sess.pres_mgmt.show_content__device_description !== event_device_obj.event_device_id_random}
+                    class:hidden={$events_sess.pres_mgmt.show_content__device_description !== event_device_obj.event_device_id}
                     >{event_device_obj.description}</pre>
 
                 {:else}
diff --git a/src/routes/events/[event_id]/device/ae_comp__event_device_obj_li_wrapper.svelte b/src/routes/events/[event_id]/device/ae_comp__event_device_obj_li_wrapper.svelte
index 3dd5cf7b..182b8080 100644
--- a/src/routes/events/[event_id]/device/ae_comp__event_device_obj_li_wrapper.svelte
+++ b/src/routes/events/[event_id]/device/ae_comp__event_device_obj_li_wrapper.svelte
@@ -14,6 +14,8 @@ export let event_device_id_random_li: Array<string> = [];
 export let link_to_type: string;
 export let link_to_id: string;
 
+export let auto_refresh: boolean|number = false;
+
 if (log_lvl) {
     console.log(`Event Device List Wrapper: link_to_type: ${link_to_type}; link_to_id: ${link_to_id}`);
 }
@@ -52,6 +54,7 @@ $: lq__event_device_obj_li = liveQuery(async () => {
     link_to_type={link_to_type}
     link_to_id={link_to_id}
     lq__event_device_obj_li={lq__event_device_obj_li}
+    auto_refresh={auto_refresh}
     log_lvl={log_lvl}
     >
 </Comp_event_device_obj_li>
diff --git a/src/routes/events/[event_id]/locations/ae_comp__event_location_obj_li.svelte b/src/routes/events/[event_id]/locations/ae_comp__event_location_obj_li.svelte
index b6b481b2..db60eefc 100644
--- a/src/routes/events/[event_id]/locations/ae_comp__event_location_obj_li.svelte
+++ b/src/routes/events/[event_id]/locations/ae_comp__event_location_obj_li.svelte
@@ -143,6 +143,7 @@ if (!$events_loc.pres_mgmt?.location_kv) {
                 }}
                 >
                 <!-- <strong class="text-sm">Name/Title:</strong> -->
+                 <span class="fas fa-map-marker-alt m-1"></span>
                 "{event_location_obj?.name}"
             </Element_ae_crud>
             <!-- "{event_location_obj.name}" -->
@@ -316,6 +317,7 @@ if (!$events_loc.pres_mgmt?.location_kv) {
                         link_to_type={'event_location'}
                         link_to_id={event_location_obj?.event_location_id_random}
                         event_device_id_random_li={[]}
+                        auto_refresh={$events_loc.pres_mgmt.refresh_interval ?? 90000}
                         log_lvl={log_lvl}
                         >
                     </Comp_event_device_obj_li>