Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Working on device status and alerts.

Browse Source
This commit is contained in:
Scott Idem
2024-10-17 18:26:56 -04:00
parent 67b01c5884
commit 172763bc26
7 changed files with 241 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "ae-app-svelte4-tailwind-skeleton",
"version": "0.1.5",
"version": "0.1.10",
"private": true,
"scripts": {
"dev": "vite dev",

4
src/lib/ae_events__event_device.ts
View File

@@ -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,

7
src/lib/ae_events_functions.ts
View File

@@ -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,

3
src/lib/db_events.ts
View File

@@ -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

327
src/routes/events/[event_id]/device/ae_comp__event_device_obj_li.svelte
View File

@@ -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}

3
src/routes/events/[event_id]/device/ae_comp__event_device_obj_li_wrapper.svelte
View File

@@ -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>

2
src/routes/events/[event_id]/locations/ae_comp__event_location_obj_li.svelte
View File

@@ -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>