Making progress with the new locations page and devices related.
This commit is contained in:
Scott Idem
@@ -0,0 +1,264 @@
|
||||
<script lang="ts">
|
||||
// Imports
|
||||
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';
|
||||
|
||||
import Element_ae_crud from '$lib/element_ae_crud.svelte';
|
||||
|
||||
// Exports
|
||||
export let log_lvl: number = 0;
|
||||
export let container_class_li: string|Array<string> = [];
|
||||
// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
|
||||
|
||||
export let link_to_type: string;
|
||||
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}`);
|
||||
}
|
||||
|
||||
// Variables
|
||||
// let ae_promises: key_val = {};
|
||||
// let ae_tmp: key_val = {};
|
||||
// let ae_triggers: key_val = {};
|
||||
|
||||
// Functions and Logic
|
||||
</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}">
|
||||
|
||||
|
||||
<h3 class="h5">
|
||||
Devices:
|
||||
<span class="font-bold bg-success-100 px-4 border rounded-lg border-success-200"
|
||||
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>
|
||||
{@html ($lq__event_device_obj_li?.length ? `${$lq__event_device_obj_li?.length}×` : '')}
|
||||
</span>
|
||||
|
||||
{#if !$lq__event_device_obj_li?.length}
|
||||
<span class="text-sm text-gray-500 bg-gray-100 p-1 rounded-md border border-gray-200"
|
||||
>
|
||||
<span class="fas fa-exclamation-triangle mx-1"></span>
|
||||
No devices available.
|
||||
</span>
|
||||
{/if}
|
||||
</h3>
|
||||
|
||||
<!-- Show devices for this LiveQuery -->
|
||||
{#if $lq__event_device_obj_li?.length}
|
||||
<ul
|
||||
class="space-y-4 p-4 m-2 bg-gray-100 rounded-md"
|
||||
>
|
||||
{#each $lq__event_device_obj_li as event_device_obj}
|
||||
<li
|
||||
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}
|
||||
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);
|
||||
|
||||
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}
|
||||
<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}
|
||||
</h4>
|
||||
|
||||
<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>
|
||||
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{:else}
|
||||
<!-- <p class:hidden={display_mode != 'default'}>
|
||||
No devices available to show at this time
|
||||
</p> -->
|
||||
{/if}
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,57 @@
|
||||
<script lang="ts">
|
||||
// Imports
|
||||
import Comp_event_device_obj_li from '././ae_comp__event_device_obj_li.svelte';
|
||||
|
||||
import { liveQuery } from "dexie";
|
||||
import { db_events } from "$lib/db_events";
|
||||
|
||||
// Exports
|
||||
export let log_lvl: number = 2;
|
||||
export let container_class_li: string|Array<string> = [];
|
||||
// export let display_mode: string = 'default'; // 'default', 'compact', 'minimal', 'launcher'
|
||||
|
||||
export let event_device_id_random_li: Array<string> = [];
|
||||
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}`);
|
||||
}
|
||||
|
||||
// Variables
|
||||
// let ae_promises: key_val = {};
|
||||
// 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_eq_id_val: string = link_to_id;
|
||||
|
||||
// Functions and Logic
|
||||
$: lq__event_device_obj_li = liveQuery(async () => {
|
||||
if (link_to_type && link_to_id) {
|
||||
let results = await db_events.devices
|
||||
.where(dq__where_type_id_val)
|
||||
.equals(dq__where_eq_id_val)
|
||||
.sortBy('name')
|
||||
|
||||
return results;
|
||||
} else if (event_device_id_random_li.length > 0) {
|
||||
let results = await db_events.devices
|
||||
.bulkGet(event_device_id_random_li);
|
||||
|
||||
return results;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<Comp_event_device_obj_li
|
||||
container_class_li={container_class_li}
|
||||
link_to_type={link_to_type}
|
||||
link_to_id={link_to_id}
|
||||
lq__event_device_obj_li={lq__event_device_obj_li}
|
||||
log_lvl={log_lvl}
|
||||
>
|
||||
</Comp_event_device_obj_li>
|
||||
Reference in New Issue
Block a user