Wrapping up for the day. Lots of improvements. More menu options for location and device related.
This commit is contained in:
Scott Idem
@@ -25,6 +25,10 @@ if (log_lvl) {
|
||||
// let ae_tmp: key_val = {};
|
||||
// let ae_triggers: key_val = {};
|
||||
|
||||
if (!$events_loc.pres_mgmt?.device_kv) {
|
||||
$events_loc.pres_mgmt.device_kv = {};
|
||||
}
|
||||
|
||||
// Functions and Logic
|
||||
</script>
|
||||
|
||||
@@ -38,7 +42,7 @@ if (log_lvl) {
|
||||
class:hidden={!$lq__event_device_obj_li?.length}
|
||||
title="Devices: {$lq__event_device_obj_li?.length ?? 'None'}"
|
||||
>
|
||||
<span class="fas fa-chalkboard-teacher m-1"></span>
|
||||
<span class="fas fa-laptop m-1"></span>
|
||||
{@html ($lq__event_device_obj_li?.length ? `${$lq__event_device_obj_li?.length}×` : '')}
|
||||
</span>
|
||||
|
||||
@@ -59,9 +63,12 @@ if (log_lvl) {
|
||||
{#each $lq__event_device_obj_li as event_device_obj}
|
||||
<li
|
||||
class="space-y-2 border border-gray-200 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">
|
||||
<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'}
|
||||
@@ -94,7 +101,7 @@ if (log_lvl) {
|
||||
"{event_device_obj?.name}"
|
||||
</Element_ae_crud>
|
||||
<!-- "{event_device_obj.name}" -->
|
||||
{#if event_device_obj?.code}
|
||||
{#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}"
|
||||
>
|
||||
@@ -102,128 +109,176 @@ if (log_lvl) {
|
||||
{event_device_obj?.code ?? ''}
|
||||
</span>
|
||||
{/if}
|
||||
</h4>
|
||||
</span>
|
||||
|
||||
<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>
|
||||
@
|
||||
{#if event_device_obj?.alert}
|
||||
<!-- {event_device_obj.alert} -->
|
||||
<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})}
|
||||
class="text-red-500 bg-red-200 p-1 rounded-md border border-red-200 text-center"
|
||||
title="{event_device_obj.alert_msg}"
|
||||
>
|
||||
{ae_util.iso_datetime_formatter(event_device_obj?.updated_on, 'time_iso_12_tz')}
|
||||
<span class="fas fa-exclamation-triangle mx-1" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class:hidden={!$events_loc.pres_mgmt.show_content__device_description}
|
||||
>
|
||||
<Element_ae_crud
|
||||
api_cfg={$ae_api}
|
||||
object_type={'event_device'}
|
||||
object_id={event_device_obj?.event_device_id_random}
|
||||
field_name={'description'}
|
||||
field_type={'textarea'}
|
||||
field_value={event_device_obj?.description}
|
||||
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}
|
||||
textarea_rows={15}
|
||||
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});
|
||||
}}
|
||||
>
|
||||
<strong class="text-sm">
|
||||
Description:
|
||||
</strong>
|
||||
|
||||
{#if event_device_obj?.description}
|
||||
{/if}
|
||||
<button
|
||||
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) {
|
||||
$events_sess.pres_mgmt.show_content__device_description = null;
|
||||
|
||||
// Was testing with LiveQuery
|
||||
$events_slct.event_device_id = null;
|
||||
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_sess.pres_mgmt.show_content__device_description = event_device_obj.event_device_id_random;
|
||||
$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;
|
||||
|
||||
// Was testing with LiveQuery
|
||||
$events_slct.event_device_id = event_device_obj.event_device_id_random;
|
||||
}
|
||||
}}
|
||||
class="btn btn-sm variant-soft-surface hover:variant-filled-surface text-xs"
|
||||
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_sess.pres_mgmt.show_content__device_description == event_device_obj.event_device_id_random}
|
||||
<span class="fas fa-eye-slash mx-1"></span>
|
||||
<span>Hide Description</span>
|
||||
{#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-eye mx-1"></span>
|
||||
<span>Show</span>
|
||||
<span class="fas fa-chevron-down m-1"></span>
|
||||
<!-- <span class="fas fa-plus mx-1"></span> -->
|
||||
<!-- <span>Device</span> -->
|
||||
{/if}
|
||||
</button>
|
||||
</h4>
|
||||
|
||||
<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}
|
||||
>{event_device_obj.description}</pre>
|
||||
<div
|
||||
class:hidden={$events_loc.pres_mgmt.device_kv && $events_loc.pres_mgmt.device_kv[event_device_obj.event_device_id]?.collapse}
|
||||
>
|
||||
|
||||
{:else}
|
||||
{@html ae_snip.html__not_set}
|
||||
{/if}
|
||||
<!-- {:else}
|
||||
<div class="text-sm text-gray-500 bg-gray-100 p-1 rounded-md border border-gray-200"
|
||||
class:hidden={!$ae_loc.administrator_access}
|
||||
>
|
||||
<span class="fas fa-exclamation-triangle mx-1"></span>
|
||||
No description provided.
|
||||
<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>
|
||||
{/if} -->
|
||||
</Element_ae_crud>
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class:hidden={!$events_loc.pres_mgmt.show_content__device_description}
|
||||
>
|
||||
<Element_ae_crud
|
||||
api_cfg={$ae_api}
|
||||
object_type={'event_device'}
|
||||
object_id={event_device_obj?.event_device_id_random}
|
||||
field_name={'description'}
|
||||
field_type={'textarea'}
|
||||
field_value={event_device_obj?.description}
|
||||
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}
|
||||
textarea_rows={15}
|
||||
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});
|
||||
}}
|
||||
>
|
||||
<strong class="text-sm">
|
||||
Description:
|
||||
</strong>
|
||||
|
||||
{#if event_device_obj?.description}
|
||||
<button
|
||||
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) {
|
||||
$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;
|
||||
|
||||
// Was testing with LiveQuery
|
||||
$events_slct.event_device_id = event_device_obj.event_device_id_random;
|
||||
}
|
||||
}}
|
||||
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}
|
||||
<span class="fas fa-eye-slash mx-1"></span>
|
||||
<span>Hide Description</span>
|
||||
{:else}
|
||||
<span class="fas fa-eye mx-1"></span>
|
||||
<span>Show</span>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<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}
|
||||
>{event_device_obj.description}</pre>
|
||||
|
||||
{:else}
|
||||
{@html ae_snip.html__not_set}
|
||||
{/if}
|
||||
<!-- {:else}
|
||||
<div class="text-sm text-gray-500 bg-gray-100 p-1 rounded-md border border-gray-200"
|
||||
class:hidden={!$ae_loc.administrator_access}
|
||||
>
|
||||
<span class="fas fa-exclamation-triangle mx-1"></span>
|
||||
No description provided.
|
||||
</div>
|
||||
{/if} -->
|
||||
</Element_ae_crud>
|
||||
</div>
|
||||
|
||||
</div> <!-- End of device content -->
|
||||
|
||||
</li>
|
||||
{/each}
|
||||
|
||||
Reference in New Issue
Block a user